finish database implementation

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

@@ -0,0 +1,46 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Manage Database Columns</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismissModal(false)">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<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"
+    >
+      <ion-col size="5">
+        <ion-item>
+          <ion-label position="floating">Field Label</ion-label>
+          <ion-input type="text" required [(ngModel)]="columnSets[i].headerName"></ion-input>
+        </ion-item>
+      </ion-col>
+      <ion-col size="5">
+        <ion-item>
+          <ion-label position="floating">Data Type</ion-label>
+          <ion-select interface="popover" [(ngModel)]="columnSets[i].Type">
+            <ion-select-option value="text">Text</ion-select-option>
+            <ion-select-option value="number">Number</ion-select-option>
+            <ion-select-option value="textarea">Text-Area</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-col>
+      <ion-col size="2" align-items-center>
+        <ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
+          <ion-icon color="danger" name="trash"></ion-icon>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

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

@@ -0,0 +1,41 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+
+@Component({
+  selector: 'editor-database-columns',
+  templateUrl: './columns.component.html',
+  styleUrls: ['./columns.component.scss'],
+})
+export class ColumnsComponent implements OnInit {
+  @Input() columnSets: Array<{headerName: string, field: string, Type: string}> = [];
+
+  constructor(
+      protected modals: ModalController
+  ) { }
+
+  ngOnInit() {}
+
+  onAddColumnClick() {
+    this.columnSets.push({headerName: '', field: '', Type: ''});
+  }
+
+  dismissModal(doSave = true) {
+    if ( doSave ) {
+      this.columnSets = this.columnSets.map(x => {
+        x.field = x.headerName;
+        return x;
+      })
+      this.modals.dismiss(this.columnSets);
+    } else {
+      this.modals.dismiss();
+    }
+  }
+
+  onDeleteClick(i) {
+    const newSets = this.columnSets.filter((x, index) => {
+      return index !== i;
+    });
+    this.columnSets = newSets;
+  }
+
+}