#55 - add checkbox support to database boolean column type

src/app/components/editor/database/columns/columns.component.html

@@ -84,6 +84,7 @@
             <ion-select-option value="true_false">True/False</ion-select-option>
             <ion-select-option value="yes_no">Yes/No</ion-select-option>
             <ion-select-option value="1_0">1/0</ion-select-option>
+            <ion-select-option value="checkbox">Checkbox</ion-select-option>
           </ion-select>
         </ion-item>
       </ion-col>

src/app/components/editor/database/renderers/boolean-renderer.component.ts

@@ -1,24 +1,44 @@
 import {ICellRendererAngularComp} from 'ag-grid-angular';
 import {Component} from '@angular/core';
 import {ICellRendererParams} from 'ag-grid-community';
-import * as moment from 'moment';
 
 @Component({
     selector: 'editor-boolean-renderer',
-    template: `{{ display }}`,
+    template: `
+        <ng-container *ngIf="!checkbox">{{ display }}</ng-container>
+        <div *ngIf="checkbox" style="width: 100%; text-align: center; padding-top: 3px;">
+            <ion-checkbox [checked]="params.value" (ionChange)="onChecked($event)"></ion-checkbox>
+        </div>
+    `,
+    styles: [`
+        :host {
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+        }
+    `],
 })
 export class BooleanRendererComponent implements ICellRendererAngularComp {
     public params: ICellRendererParams;
     public emptyValue = '';
     public trueValue = 'True';
     public falseValue = 'False';
+    public checkbox = false;
+
+    public checked = false;
 
     agInit(params: ICellRendererParams): void {
         this.params = params;
+
         // @ts-ignore
-        const labelType = params.colDef.additionalData.labelType.split('_').map(x => x.charAt(0).toUpperCase() + x.slice(1));
-        this.trueValue = labelType[0];
-        this.falseValue = labelType[1];
+        this.checkbox = params.colDef.additionalData.labelType === 'checkbox';
+
+        if ( !this.checkbox ) {
+            // @ts-ignore
+            const labelType = params.colDef.additionalData.labelType.split('_').map(x => x.charAt(0).toUpperCase() + x.slice(1));
+            this.trueValue = labelType[0];
+            this.falseValue = labelType[1];
+        }
     }
 
     public get display() {
@@ -34,4 +54,10 @@ export class BooleanRendererComponent implements ICellRendererAngularComp {
     refresh(params: any): boolean {
         return false;
     }
+
+    onChecked($event) {
+        const checked = !this.params.value;
+        const colId = this.params.column.getColId();
+        this.params.node.setDataValue(colId, checked);
+    }
 }