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

<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
      *ngFor="let colSet of columnSets; let i = index"
      class="column-def"
    >
      <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="4">
        <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="paragraph">Paragraph</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="multiselect">Multi-Select</ion-select-option>
            <ion-select-option value="datetime">Date-Time</ion-select-option>
            <ion-select-option value="currency">Currency</ion-select-option>
            <ion-select-option value="index">Incrementing Index</ion-select-option>
<!--            <ion-select-option value="person">Person</ion-select-option>-->
<!--            <ion-select-option value="url">URL</ion-select-option>-->
<!--            <ion-select-option value="email">E-Mail</ion-select-option>-->
          </ion-select>
        </ion-item>
      </ion-col>
      <ion-col size="3" align-items-center>
        <ion-row>
          <ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
            <ion-icon color="danger" name="trash"></ion-icon>
          </ion-button>
        </ion-row>
        <ion-row>
          <ion-button fill="outline" color="light" size="small" (click)="onUpArrow(i)">
            <ion-icon color="dark" name="arrow-up"></ion-icon>
          </ion-button>
          <ion-button fill="outline" color="light" size="small" (click)="onDownArrow(i)">
            <ion-icon color="dark" name="arrow-down"></ion-icon>
          </ion-button>
        </ion-row>
      </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' || columnSets[i].Type === 'multiselect'">
        <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" size="small" (click)="onDeleteOptionClick(i, n)">
                <ion-icon color="danger" name="trash"></ion-icon>
              </ion-button>
            </ion-col>
          </ion-row>
        </ng-container>
      </ion-col>
      <ion-col size="12" *ngIf="columnSets[i].Type === 'datetime'">
        <ion-list>
          <ion-radio-group value="YYYY-MM-DD h:mm a" [(ngModel)]="columnSets[i].additionalData.format">
            <ion-list-header>Format</ion-list-header>
            <ion-item>
              <ion-label>Date Only</ion-label>
              <ion-radio slot="start" value="YYYY-MM-DD"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label>Time Only</ion-label>
              <ion-radio slot="start" value="h:mm a"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label>Both</ion-label>
              <ion-radio slot="start" value="YYYY-MM-DD h:mm a"></ion-radio>
            </ion-item>
          </ion-radio-group>
        </ion-list>
      </ion-col>
      <ion-col size="12" *ngIf="columnSets[i].Type === 'currency'">
        <ion-item>
          <ion-label position="floating">Currency</ion-label>
          <ion-select [(ngModel)]="columnSets[i].additionalData.currency">
            <ion-select-option value="USD">US Dollar</ion-select-option>
            <ion-select-option value="EUR">Euro</ion-select-option>
            <ion-select-option value="MXN">Mexican Peso</ion-select-option>
            <ion-select-option value="CNY">Chinese Yuan</ion-select-option>
            <ion-select-option value="XAG">Silver</ion-select-option>
            <ion-select-option value="XAU">Gold</ion-select-option>
          </ion-select>
        </ion-item>
      </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>