Convert code editor to new format
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
parent
0a6a775fdb
commit
ae24674717
GPG Key ID:
D2BF5FBA8298F246
@ -1,209 +1,212 @@
|
|||||||
import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
import {Component, Input, OnInit} from '@angular/core';
|
||||||
import {v4} from 'uuid';
|
import {v4} from 'uuid';
|
||||||
import HostRecord from '../../../structures/HostRecord';
|
|
||||||
import {Observable} from 'rxjs';
|
|
||||||
import {ApiService} from '../../../service/api.service';
|
import {ApiService} from '../../../service/api.service';
|
||||||
import {AlertController, LoadingController} from '@ionic/angular';
|
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
|
||||||
|
import {EditorService} from '../../../service/editor.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'editor-code',
|
selector: 'editor-code',
|
||||||
templateUrl: './code.component.html',
|
templateUrl: './code.component.html',
|
||||||
styleUrls: ['./code.component.scss'],
|
styleUrls: ['./code.component.scss'],
|
||||||
})
|
})
|
||||||
export class CodeComponent implements OnInit {
|
export class CodeComponent extends EditorNodeContract implements OnInit {
|
||||||
@Input() readonly = false;
|
@Input() nodeId: string;
|
||||||
@Input() hostRecord: HostRecord;
|
public dirty = false;
|
||||||
@Output() hostRecordChange = new EventEmitter<HostRecord>();
|
protected dbRecord: any = {};
|
||||||
@Output() requestParentSave = new EventEmitter<CodeComponent>();
|
protected codeRefId!: string;
|
||||||
@Output() requestParentDelete = new EventEmitter<CodeComponent>();
|
|
||||||
@ViewChild('theEditor') theEditor;
|
public editorOptions = {
|
||||||
|
language: 'javascript',
|
||||||
public dirty = false;
|
uri: v4(),
|
||||||
public pendingSetup = true;
|
readOnly: false,
|
||||||
protected dbRecord: any = {};
|
};
|
||||||
|
|
||||||
public languageOptions: Array<string> = [
|
public editorValue = '';
|
||||||
'ABAP',
|
public get readonly() {
|
||||||
'AES',
|
return !this.node || !this.editorService.canEdit();
|
||||||
'Apex',
|
}
|
||||||
'AZCLI',
|
|
||||||
'Bat',
|
public languageOptions: Array<string> = [
|
||||||
'C',
|
'ABAP',
|
||||||
'Cameligo',
|
'AES',
|
||||||
'Clojure',
|
'Apex',
|
||||||
'CoffeeScript',
|
'AZCLI',
|
||||||
'Cpp',
|
'Bat',
|
||||||
'Csharp',
|
'C',
|
||||||
'CSP',
|
'Cameligo',
|
||||||
'CSS',
|
'Clojure',
|
||||||
'Dockerfile',
|
'CoffeeScript',
|
||||||
'Fsharp',
|
'Cpp',
|
||||||
'Go',
|
'Csharp',
|
||||||
'GraphQL',
|
'CSP',
|
||||||
'Handlebars',
|
'CSS',
|
||||||
'HTML',
|
'Dockerfile',
|
||||||
'INI',
|
'Fsharp',
|
||||||
'Java',
|
'Go',
|
||||||
'JavaScript',
|
'GraphQL',
|
||||||
'JSON',
|
'Handlebars',
|
||||||
'Kotlin',
|
'HTML',
|
||||||
'LeSS',
|
'INI',
|
||||||
'Lua',
|
'Java',
|
||||||
'Markdown',
|
'JavaScript',
|
||||||
'MiPS',
|
'JSON',
|
||||||
'MSDAX',
|
'Kotlin',
|
||||||
'MySQL',
|
'LeSS',
|
||||||
'Objective-C',
|
'Lua',
|
||||||
'Pascal',
|
'Markdown',
|
||||||
'Pascaligo',
|
'MiPS',
|
||||||
'Perl',
|
'MSDAX',
|
||||||
'pgSQL',
|
'MySQL',
|
||||||
'PHP',
|
'Objective-C',
|
||||||
'Plaintext',
|
'Pascal',
|
||||||
'Postiats',
|
'Pascaligo',
|
||||||
'PowerQuery',
|
'Perl',
|
||||||
'PowerShell',
|
'pgSQL',
|
||||||
'Pug',
|
'PHP',
|
||||||
'Python',
|
'Plaintext',
|
||||||
'R',
|
'Postiats',
|
||||||
'Razor',
|
'PowerQuery',
|
||||||
'Redis',
|
'PowerShell',
|
||||||
'RedShift',
|
'Pug',
|
||||||
'RestructuredText',
|
'Python',
|
||||||
'Ruby',
|
'R',
|
||||||
'Rust',
|
'Razor',
|
||||||
'SB',
|
'Redis',
|
||||||
'Scheme',
|
'RedShift',
|
||||||
'SCSS',
|
'RestructuredText',
|
||||||
'Shell',
|
'Ruby',
|
||||||
'SOL',
|
'Rust',
|
||||||
'SQL',
|
'SB',
|
||||||
'St',
|
'Scheme',
|
||||||
'Swift',
|
'SCSS',
|
||||||
'TCL',
|
'Shell',
|
||||||
'Twig',
|
'SOL',
|
||||||
'TypeScript',
|
'SQL',
|
||||||
'VB',
|
'St',
|
||||||
'XML',
|
'Swift',
|
||||||
'YAML',
|
'TCL',
|
||||||
];
|
'Twig',
|
||||||
|
'TypeScript',
|
||||||
public editorOptions = {
|
'VB',
|
||||||
language: 'javascript',
|
'XML',
|
||||||
uri: v4(),
|
'YAML',
|
||||||
readOnly: this.readonly,
|
];
|
||||||
};
|
protected hadLoad = false;
|
||||||
public editorValue = '';
|
|
||||||
|
constructor(
|
||||||
constructor(
|
public readonly editorService: EditorService,
|
||||||
protected api: ApiService,
|
public readonly api: ApiService,
|
||||||
protected loader: LoadingController,
|
) { super(); }
|
||||||
protected alerts: AlertController,
|
|
||||||
) { }
|
public isDirty(): boolean | Promise<boolean> {
|
||||||
|
return this.dirty;
|
||||||
ngOnInit() {
|
}
|
||||||
this.loader.create({message: 'Loading code...'}).then(loader => {
|
|
||||||
loader.present().then(() => {
|
public needsSave(): boolean | Promise<boolean> {
|
||||||
this.getInitObservable().subscribe(() => {
|
return this.dirty;
|
||||||
this.editorOptions.language = this.dbRecord.Language;
|
}
|
||||||
this.editorOptions.readOnly = this.readonly;
|
|
||||||
this.onSelectChange(false);
|
public writeChangesToNode(): void | Promise<void> {
|
||||||
loader.dismiss();
|
this.node.Value.Mode = 'code';
|
||||||
});
|
this.node.Value.Value = this.codeRefId;
|
||||||
|
this.node.value = this.codeRefId;
|
||||||
|
}
|
||||||
|
|
||||||
|
public needsLoad(): boolean | Promise<boolean> {
|
||||||
|
return this.node && !this.hadLoad;
|
||||||
|
}
|
||||||
|
|
||||||
|
public performLoad(): void | Promise<void> {
|
||||||
|
return new Promise((res, rej) => {
|
||||||
|
if ( !this.node.Value ) {
|
||||||
|
this.node.Value = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !this.node.Value.Value && this.editorService.canEdit() ) {
|
||||||
|
this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
|
||||||
|
next: result => {
|
||||||
|
this.dbRecord = result.data;
|
||||||
|
this.node.Value.Mode = 'code';
|
||||||
|
this.node.Value.Value = result.data.UUID;
|
||||||
|
this.node.value = result.data.UUID;
|
||||||
|
this.codeRefId = result.data.UUID;
|
||||||
|
this.editorOptions.readOnly = this.readonly;
|
||||||
|
this.onSelectChange(false);
|
||||||
|
this.hadLoad = true;
|
||||||
|
res();
|
||||||
|
},
|
||||||
|
error: rej,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.api.get(`/code/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
|
||||||
|
next: result => {
|
||||||
|
this.dbRecord = result.data;
|
||||||
|
this.initialValue = this.dbRecord.code;
|
||||||
|
this.editorValue = this.dbRecord.code;
|
||||||
|
this.editorOptions.language = this.dbRecord.Language;
|
||||||
|
this.codeRefId = this.node.Value.Value;
|
||||||
|
this.editorOptions.readOnly = this.readonly;
|
||||||
|
this.onSelectChange(false);
|
||||||
|
this.hadLoad = true;
|
||||||
|
res();
|
||||||
|
},
|
||||||
|
error: rej,
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
public performSave(): void | Promise<void> {
|
||||||
getInitObservable(): Observable<any> {
|
if ( !this.editorService.canEdit() ) {
|
||||||
return new Observable<any>(sub => {
|
return;
|
||||||
if ( this.hostRecord && this.pendingSetup ) {
|
|
||||||
if ( !this.hostRecord.Value ) {
|
|
||||||
this.hostRecord.Value = {};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( !this.hostRecord.Value.Value && !this.readonly ) {
|
return new Promise((res, rej) => {
|
||||||
this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
|
this.dbRecord.code = this.editorValue;
|
||||||
this.dbRecord = res.data;
|
this.dbRecord.Language = this.editorOptions.language;
|
||||||
this.hostRecord.Value.Mode = 'code';
|
|
||||||
this.hostRecord.Value.Value = res.data.UUID;
|
this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/set/${this.node.Value.Value}`, this.dbRecord)
|
||||||
this.hostRecord.value = res.data.UUID;
|
.subscribe({
|
||||||
this.hostRecordChange.emit(this.hostRecord);
|
next: result => {
|
||||||
this.pendingSetup = false;
|
this.dbRecord = result.data;
|
||||||
sub.next(true);
|
this.editorOptions.language = this.dbRecord.Language;
|
||||||
sub.complete();
|
this.editorValue = this.dbRecord.code;
|
||||||
});
|
this.dirty = false;
|
||||||
} else {
|
res();
|
||||||
this.api.get(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
|
},
|
||||||
this.dbRecord = res.data;
|
error: rej,
|
||||||
this.editorValue = this.dbRecord.code;
|
});
|
||||||
this.editorOptions.language = this.dbRecord.Language;
|
});
|
||||||
this.pendingSetup = false;
|
}
|
||||||
sub.next(true);
|
|
||||||
sub.complete();
|
public performDelete(): void | Promise<void> {
|
||||||
|
return new Promise((res, rej) => {
|
||||||
|
this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/delete/${this.node.Value.Value}`).subscribe({
|
||||||
|
next: result => {
|
||||||
|
res();
|
||||||
|
},
|
||||||
|
error: rej,
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
} 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) {
|
ngOnInit() {
|
||||||
if ( updateDbRecord ) {
|
this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
|
||||||
this.dbRecord.Language = this.editorOptions.language;
|
this.editorOptions.readOnly = !this.editorService.canEdit();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public onEditorModelChange($event) {
|
||||||
|
if ( this.editorValue !== this.dbRecord.code ) {
|
||||||
|
this.dirty = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.editorOptions = {...this.editorOptions};
|
public onSelectChange(updateDbRecord = true) {
|
||||||
}
|
if ( updateDbRecord ) {
|
||||||
|
this.dbRecord.Language = this.editorOptions.language;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.editorOptions = {...this.editorOptions};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue