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

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, additionalData: any}> = [];

  constructor(
      protected modals: ModalController
  ) { }

  ngOnInit() {}

  onAddColumnClick() {
    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) {
    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;
  }

  onUpArrow(i) {
    if ( this.columnSets[i - 1] ) {
      const temp = this.columnSets[i];
      this.columnSets[i] = this.columnSets[i - 1];
      this.columnSets[i - 1] = temp;
    }
  }

  onDownArrow(i) {
    if ( this.columnSets[i + 1] ) {
      const temp = this.columnSets[i];
      this.columnSets[i] = this.columnSets[i + 1];
      this.columnSets[i + 1] = temp;
    }
  }

}