Add new column types and editors

src/app/components/components.module.ts

@@ -18,6 +18,7 @@ import {NumericEditorComponent} from './editor/database/editors/numeric/numeric-
 import {ParagraphEditorComponent} from './editor/database/editors/paragraph/paragraph-editor.component';
 import {ParagraphModalComponent} from './editor/database/editors/paragraph/paragraph-modal.component';
 import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-editor.component';
+import {SelectEditorComponent} from './editor/database/editors/select/select-editor.component';
 
 @NgModule({
   declarations: [
@@ -35,6 +36,7 @@ import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-
     ParagraphEditorComponent,
     ParagraphModalComponent,
     BooleanEditorComponent,
+    SelectEditorComponent,
   ],
   imports: [
     CommonModule,
@@ -58,6 +60,7 @@ import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-
     ParagraphEditorComponent,
     ParagraphModalComponent,
     BooleanEditorComponent,
+    SelectEditorComponent,
   ],
   exports: [
     HostComponent,
@@ -74,6 +77,7 @@ import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-
     ParagraphEditorComponent,
     ParagraphModalComponent,
     BooleanEditorComponent,
+    SelectEditorComponent,
   ]
 })
 export class ComponentsModule {}

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

@@ -11,14 +11,9 @@
 
 <ion-content>
   <ion-grid>
-    <ion-row>
-      <ion-col size="12">
-        <ion-button (click)="onAddColumnClick()" fill="outline">Add Column</ion-button>
-        <ion-button (click)="dismissModal(true)" color="success" fill="outline">Save</ion-button>
-      </ion-col>
-    </ion-row>
     <ion-row
       *ngFor="let colSet of columnSets; let i = index"
+      class="column-def"
     >
       <ion-col size="5">
         <ion-item>
@@ -33,10 +28,10 @@
             <ion-select-option value="text">Text</ion-select-option>
             <ion-select-option value="number">Number</ion-select-option>
             <ion-select-option value="paragraph">Paragraph</ion-select-option>
-            <ion-select-option value="boolean">True/False</ion-select-option>
+            <ion-select-option value="boolean">Boolean</ion-select-option>
+            <ion-select-option value="select">Select</ion-select-option>
 <!--            <ion-select-option value="currency">Currency</ion-select-option>-->
 <!--            <ion-select-option value="datetime">Date-Time</ion-select-option>-->
-<!--            <ion-select-option value="select">Select</ion-select-option>-->
 <!--            <ion-select-option value="multiselect">Multi-Select</ion-select-option>-->
 <!--            <ion-select-option value="person">Person</ion-select-option>-->
 <!--            <ion-select-option value="url">URL</ion-select-option>-->
@@ -49,6 +44,41 @@
           <ion-icon color="danger" name="trash"></ion-icon>
         </ion-button>
       </ion-col>
+      <ion-col size="5" *ngIf="columnSets[i].Type === 'boolean'">
+        <ion-item>
+          <ion-label position="floating">Label Type</ion-label>
+          <ion-select interface="popover" [(ngModel)]="columnSets[i].additionalData.labelType">
+            <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>
+        </ion-item>
+      </ion-col>
+      <ion-col size="12" *ngIf="columnSets[i].Type === 'select'">
+        <ion-button (click)="onAddOption(i)" fill="outline">Add Option</ion-button>
+        <ng-container *ngIf="columnSets[i].additionalData.options">
+          <ion-row *ngFor="let option of columnSets[i].additionalData.options; let n = index">
+            <ion-col size="10">
+              <ion-item>
+                <ion-label position="floating">Value</ion-label>
+                <ion-input [(ngModel)]="columnSets[i].additionalData.options[n].value"></ion-input>
+              </ion-item>
+            </ion-col>
+            <ion-col size="2">
+              <ion-button fill="outline" color="light" (click)="onDeleteOptionClick(i, n)">
+                <ion-icon color="danger" name="trash"></ion-icon>
+              </ion-button>
+            </ion-col>
+          </ion-row>
+        </ng-container>
+      </ion-col>
     </ion-row>
   </ion-grid>
 </ion-content>
+
+<ion-footer>
+  <ion-buttons>
+    <ion-button (click)="onAddColumnClick()" fill="outline">Add Column</ion-button>
+    <ion-button (click)="dismissModal(true)" color="success" fill="outline">Save</ion-button>
+  </ion-buttons>
+</ion-footer>

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

@@ -0,0 +1,6 @@
+.column-def {
+  border: 2px solid #ccc;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 7px;
+}

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

@@ -7,7 +7,7 @@ import {ModalController} from '@ionic/angular';
   styleUrls: ['./columns.component.scss'],
 })
 export class ColumnsComponent implements OnInit {
-  @Input() columnSets: Array<{headerName: string, field: string, Type: string}> = [];
+  @Input() columnSets: Array<{headerName: string, field: string, Type: string, additionalData: any}> = [];
 
   constructor(
       protected modals: ModalController
@@ -16,7 +16,21 @@ export class ColumnsComponent implements OnInit {
   ngOnInit() {}
 
   onAddColumnClick() {
-    this.columnSets.push({headerName: '', field: '', Type: ''});
+    this.columnSets.push({headerName: '', field: '', Type: '', additionalData: {}});
+  }
+
+  onAddOption(i) {
+    const set = this.columnSets[i];
+    if ( !Array.isArray(set.additionalData.options) ) {
+      set.additionalData.options = [];
+    }
+
+    set.additionalData.options.push({value: ''});
+  }
+
+  onDeleteOptionClick(i, n) {
+    const set = this.columnSets[i];
+    set.additionalData.options = set.additionalData.options.filter((x, index) => index !== n);
   }
 
   dismissModal(doSave = true) {

src/app/components/editor/database/database.component.ts

@@ -8,6 +8,7 @@ import {AgGridAngular} from 'ag-grid-angular';
 import {NumericEditorComponent} from './editors/numeric/numeric-editor.component';
 import {ParagraphEditorComponent} from './editors/paragraph/paragraph-editor.component';
 import {BooleanEditorComponent} from './editors/boolean/boolean-editor.component';
+import {SelectEditorComponent} from './editors/select/select-editor.component';
 
 @Component({
   selector: 'editor-database',
@@ -208,6 +209,8 @@ export class DatabaseComponent implements OnInit {
           x.cellEditorFramework = ParagraphEditorComponent;
         } else if ( x.Type === 'boolean' ) {
           x.cellEditorFramework = BooleanEditorComponent;
+        } else if ( x.Type === 'select' ) {
+          x.cellEditorFramework = SelectEditorComponent;
         }
 
         console.log({x});

src/app/components/editor/database/editors/boolean/boolean-editor.component.ts

@@ -16,11 +16,21 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView
     private params: ICellEditorParams;
     public value: string;
 
+    protected trueValue = 'True';
+    protected falseValue = 'False';
+    protected emptyValue = '';
+
     @ViewChild('input', {static: false}) input: ElementRef;
 
     agInit(params: ICellEditorParams): void {
         this.params = params;
         this.value = this.params.value;
+        console.log('bool params', {params});
+
+        // @ts-ignore
+        const values = params.colDef.additionalData.labelType.split('_');
+        this.trueValue = values[0].charAt(0).toUpperCase() + values[0].slice(1);
+        this.falseValue = values[1].charAt(0).toUpperCase() + values[1].slice(1);
     }
 
     getValue(): any {
@@ -32,12 +42,12 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView
     }
 
     onClick() {
-        if ( this.value === 'True' ) {
+        if ( this.value === this.trueValue ) {
-            this.value = 'False';
+            this.value = this.falseValue;
-        } else if ( this.value === 'False' ) {
+        } else if ( this.value === this.falseValue ) {
-            this.value = '';
+            this.value = this.emptyValue;
         } else {
-            this.value = 'True';
+            this.value = this.trueValue;
         }
     }
 }

src/app/components/editor/database/editors/select/select-editor.component.ts

@@ -0,0 +1,41 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {IonSelect} from '@ionic/angular';
+
+@Component({
+    selector: 'cell-editor-paragraph',
+    template: `
+        <ion-select #select [(ngModel)]="value" style="padding: 0;"
+                    [interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}">
+            <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
+        </ion-select>
+    `,
+    styles: [
+        `input {
+            width: 100%;
+            border: 1px solid grey;
+        }`
+    ],
+})
+export class SelectEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+    private params: ICellEditorParams;
+    public value: string;
+    public options: Array<{value: string}> = [];
+    @ViewChild('select', {static: false}) select: IonSelect;
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = this.params.value;
+        // @ts-ignore
+        this.options = this.params.colDef.additionalData.options;
+    }
+
+    getValue(): any {
+        return this.value;
+    }
+
+    ngAfterViewInit(): void {
+        this.select.open();
+    }
+}