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(); @Output() requestParentSave = new EventEmitter(); @Output() requestParentDelete = new EventEmitter(); @ViewChild('theEditor', {static: false}) theEditor; public dirty = false; public pendingSetup = true; protected dbRecord: any = {}; public languageOptions: Array = [ '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 { return new Observable(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}; } }