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

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ApiService} from '../../../service/api.service';
import {Observable} from 'rxjs';
import {AlertController, LoadingController, ModalController} from '@ionic/angular';
import {ColumnsComponent} from './columns/columns.component';
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';
import {MultiSelectEditorComponent} from './editors/select/multiselect-editor.component';
import {DatetimeEditorComponent} from './editors/datetime/datetime-editor.component';
import {DatetimeRendererComponent} from './renderers/datetime-renderer.component';
import {CurrencyRendererComponent} from './renderers/currency-renderer.component';
import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
import {EditorService} from '../../../service/editor.service';

@Component({
  selector: 'editor-database',
  templateUrl: './database.component.html',
  styleUrls: ['./database.component.scss'],
})
export class DatabaseComponent extends EditorNodeContract implements OnInit {
  @Input() nodeId: string;
  // @Input() hostRecord: HostRecord;
  // @Input() readonly = false;
  // @Output() hostRecordChange = new EventEmitter<HostRecord>();
  // @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
  // @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
  @ViewChild('agGridElement') agGridElement: AgGridAngular;

  public dbRecord: any;
  public pendingSetup = true;
  public dirty = false;
  public lastClickRow = -1;
  public dbName = '';
  protected dbId!: string;

  public get readonly() {
    return !this.node || !this.editorService.canEdit()
  }

  constructor(
      protected api: ApiService,
      protected modals: ModalController,
      protected alerts: AlertController,
      protected loader: LoadingController,
      public readonly editorService: EditorService,
  ) { super(); }

  title = 'app';
  columnDefs = [];
  rowData = [];

  public isDirty(): boolean | Promise<boolean> {
    return this.dirty;
  }

  public needsSave(): boolean | Promise<boolean> {
    return this.dirty;
  }

  public needsLoad(): boolean | Promise<boolean> {
    return this.node && this.pendingSetup;
  }

  public writeChangesToNode(): void | Promise<void> {
    this.node.Value.Mode = 'database';
    this.node.Value.Value = this.dbId;
    this.node.value = this.dbId;
  }

  ngOnInit() {
    this.editorService.registerNodeEditor(this.nodeId, this).then(() => {

    });
    // this.loader.create({message: 'Loading database...'}).then(loader => {
      // setTimeout(() => {
      //   loader.present().then(() => {
      //   this.getInitObservable().subscribe(() => {
      //     this.getColumnLoadObservable().subscribe(() => {
      //       this.getDataLoadObservable().subscribe(() => {
      //         loader.dismiss();
      //       });
      //     });
      //   });
        // });
      // }, 100);
    // });
  }

  onCellValueChanged() {
    this.dirty = true;
  }

  async onManageColumns() {
    if ( this.readonly ) {
      return;
    }

    const modal = await this.modals.create({
      component: ColumnsComponent,
      componentProps: {columnSets: this.columnDefs},
    });

    // modal.onDidDismiss().then(result => {
    //   if ( result.data ) {
    //     this.setColumns(result.data).subscribe(() => {
    //       const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns`
    //       this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => {
    //         this.requestParentSave.emit(this);
    //       });
    //     });
    //   }
    // });

    await modal.present();
  }

  onInsertRow() {
    if ( this.readonly ) {
      return;
    }

    this.rowData.push({});
    this.agGridElement.api.setRowData(this.rowData);
    this.dirty = true;
  }

  async onRemoveRow() {
    if ( this.readonly ) {
      return;
    }

    const alert = await this.alerts.create({
      header: 'Are you sure?',
      message: `You are about to delete row ${this.lastClickRow + 1}. This cannot be undone.`,
      buttons: [
        {
          text: 'Keep It',
          role: 'cancel',
        },
        {
          text: 'Delete It',
          handler: () => {
            this.rowData = this.rowData.filter((x, i) => {
              return i !== this.lastClickRow;
            });
            this.agGridElement.api.setRowData(this.rowData);
            this.lastClickRow = -1;
            this.dirty = true;
          },
        }
      ],
    });

    await alert.present();
  }

  // async onDropDatabase() {
  //   if ( this.readonly ) {
  //     return;
  //   }
  //
  //   const alert = await this.alerts.create({
  //     header: 'Are you sure?',
  //     message: `You are about to delete this database and all its entries. This action cannot be undone.`,
  //     buttons: [
  //       {
  //         text: 'Keep It',
  //         role: 'cancel',
  //       },
  //       {
  //         text: 'Delete It',
  //         handler: async () => {
  //           this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/drop/${this.hostRecord.Value.Value}`).subscribe();
  //           this.requestParentDelete.emit(this);
  //         },
  //       },
  //     ],
  //   });
  //
  //   await alert.present();
  // }

  onRowClicked($event) {
    this.lastClickRow = $event.rowIndex;
  }



  // getDataLoadObservable(): Observable<any> {
  //   return new Observable<any>(sub => {
  //     this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/data`).subscribe(res => {
  //       this.rowData = res.data.map(x => x.RowData);
  //       this.agGridElement.api.setRowData(this.rowData);
  //       sub.next();
  //       sub.complete();
  //     });
  //   });
  // }
  //
  // onSyncRecords() {
  //   if ( this.readonly ) {
  //     return;
  //   }
  //
  //   this.loader.create({message: 'Syncing the database...'}).then(loader => {
  //     loader.present().then(() => {
  //       this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
  //           .subscribe(res => {
  //         this.rowData = res.data.map(x => x.RowData);
  //         this.agGridElement.api.setRowData(this.rowData);
  //
  //         this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/name`,
  //             { Name: this.dbName })
  //             .subscribe(resp => {
  //               this.dirty = false;
  //               loader.dismiss();
  //             });
  //       });
  //     });
  //   });
  // }
  //
  // getColumnLoadObservable(): Observable<any> {
  //   return new Observable<any>(sub => {
  //     this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/columns`).subscribe(res => {
  //       this.setColumns(res.data).subscribe(() => {
  //         sub.next();
  //         sub.complete();
  //       });
  //     });
  //   });
  // }

  setColumns(data): Observable<any> {
    return new Observable<any>(sub => {
      this.columnDefs = data.map(x => {
        x.editable = !this.readonly;

        // Set editors and renderers for different types
        if ( x.Type === 'text' ) {
          x.editor = 'agTextCellEditor';
        } else if ( x.Type === 'number' ) {
          x.cellEditorFramework = NumericEditorComponent;
        } else if ( x.Type === 'paragraph' ) {
          x.cellEditorFramework = ParagraphEditorComponent;
        } else if ( x.Type === 'boolean' ) {
          x.cellRendererFramework = BooleanRendererComponent;
          x.cellEditorFramework = BooleanEditorComponent;
        } else if ( x.Type === 'select' ) {
          x.cellEditorFramework = SelectEditorComponent;
        } else if ( x.Type === 'multiselect' ) {
          x.cellEditorFramework = MultiSelectEditorComponent;
        } else if ( x.Type === 'datetime' ) {
          x.cellEditorFramework = DatetimeEditorComponent;
          x.cellRendererFramework = DatetimeRendererComponent;
        } else if ( x.Type === 'currency' ) {
          x.cellEditorFramework = NumericEditorComponent;
          x.cellRendererFramework = CurrencyRendererComponent;
        } else if ( x.Type === 'index' ) {
          x.editable = false;
        }

        console.log({x});
        return x;
      });

      this.agGridElement.api.setColumnDefs(this.columnDefs);

      sub.next();
      sub.complete();
    });
  }

  public performLoad(): void | Promise<void> {
    return new Promise((res, rej) => {
      if ( !this.node.Value ) {
        this.node.Value = {};
      }

      console.log('loading db');

      if ( !this.node.Value.Value && this.editorService.canEdit() ) {
        this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
          next: result => {
            this.dbRecord = result.data;
            this.dbName = result.data.Name;
            this.node.Value.Mode = 'database';
            this.node.Value.Value = result.data.UUID;
            this.node.value = result.data.UUID;
            this.pendingSetup = false;
            res();
          },
          error: rej,
        });
      } else {
        this.api.get(`/db/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
          next: result => {
            this.dbRecord = result.data;
            this.dbName = result.data.Name;
            this.pendingSetup = false;
            res();
          },
          error: rej,
        });
      }
    });
  }
}