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

import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import {v4} from 'uuid';
import HostRecord from '../../../structures/HostRecord';
import {Observable} from 'rxjs';
import {ApiService} from '../../../service/api.service';
import {AlertController, LoadingController} from '@ionic/angular';

@Component({
  selector: 'editor-code',
  templateUrl: './code.component.html',
  styleUrls: ['./code.component.scss'],
})
export class CodeComponent implements OnInit {
  @Input() readonly = false;
  @Input() hostRecord: HostRecord;
  @Output() hostRecordChange = new EventEmitter<HostRecord>();
  @Output() requestParentSave = new EventEmitter<CodeComponent>();
  @Output() requestParentDelete = new EventEmitter<CodeComponent>();
  @ViewChild('theEditor') theEditor;

  public dirty = false;
  public pendingSetup = true;
  protected dbRecord: any = {};

  public languageOptions: Array<string> = [
      'ABAP',
      'AES',
      'Apex',
      'AZCLI',
      'Bat',
      'C',
      'Cameligo',
      'Clojure',
      'CoffeeScript',
      'Cpp',
      'Csharp',
      'CSP',
      'CSS',
      'Dockerfile',
      'Fsharp',
      'Go',
      'GraphQL',
      'Handlebars',
      'HTML',
      'INI',
      'Java',
      'JavaScript',
      'JSON',
      'Kotlin',
      'LeSS',
      'Lua',
      'Markdown',
      'MiPS',
      'MSDAX',
      'MySQL',
      'Objective-C',
      'Pascal',
      'Pascaligo',
      'Perl',
      'pgSQL',
      'PHP',
      'Plaintext',
      'Postiats',
      'PowerQuery',
      'PowerShell',
      'Pug',
      'Python',
      'R',
      'Razor',
      'Redis',
      'RedShift',
      'RestructuredText',
      'Ruby',
      'Rust',
      'SB',
      'Scheme',
      'SCSS',
      'Shell',
      'SOL',
      'SQL',
      'St',
      'Swift',
      'TCL',
      'Twig',
      'TypeScript',
      'VB',
      'XML',
      'YAML',
  ];

  public editorOptions = {
    language: 'javascript',
    uri: v4(),
    readOnly: this.readonly,
  };
  public editorValue = '';

  constructor(
      protected api: ApiService,
      protected loader: LoadingController,
      protected alerts: AlertController,
  ) { }

  ngOnInit() {
    this.loader.create({message: 'Loading code...'}).then(loader => {
        loader.present().then(() => {
            this.getInitObservable().subscribe(() => {
                this.editorOptions.language = this.dbRecord.Language;
                this.editorOptions.readOnly = this.readonly;
                this.onSelectChange(false);
                loader.dismiss();
            });
        });
    });
  }

  getInitObservable(): Observable<any> {
    return new Observable<any>(sub => {
      if ( this.hostRecord && this.pendingSetup ) {
        if ( !this.hostRecord.Value ) {
            this.hostRecord.Value = {};
        }

        if ( !this.hostRecord.Value.Value && !this.readonly ) {
          this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
            this.dbRecord = res.data;
            this.hostRecord.Value.Mode = 'code';
            this.hostRecord.Value.Value = res.data.UUID;
            this.hostRecord.value = res.data.UUID;
            this.hostRecordChange.emit(this.hostRecord);
            this.pendingSetup = false;
            sub.next(true);
            sub.complete();
          });
        } else {
            this.api.get(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
                this.dbRecord = res.data;
                this.editorValue = this.dbRecord.code;
                this.editorOptions.language = this.dbRecord.Language;
                this.pendingSetup = false;
                sub.next(true);
                sub.complete();
            });
        }
      } else {
          this.pendingSetup = true;
      }
    });
  }

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

      this.dbRecord.code = this.editorValue;
      this.dbRecord.Language = this.editorOptions.language;
      this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}`, this.dbRecord)
          .subscribe(res => {
        this.dbRecord = res.data;
        this.editorOptions.language = this.dbRecord.Language;
        this.editorValue = this.dbRecord.code;
        this.dirty = false;
      });
  }

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

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

      await alert.present();
  }

  public onEditorModelChange($event) {
    if ( this.editorValue !== this.dbRecord.code ) {
        this.dirty = true;
    }
  }

  onSelectChange(updateDbRecord = true) {
    if ( updateDbRecord ) {
        this.dbRecord.Language = this.editorOptions.language;
    }

    this.editorOptions = {...this.editorOptions};
  }

}