diff --git a/src/app/components/editor/code/code.component.html b/src/app/components/editor/code/code.component.html
index b6bea5f..7db4cd6 100644
--- a/src/app/components/editor/code/code.component.html
+++ b/src/app/components/editor/code/code.component.html
@@ -7,7 +7,7 @@
-
+
-
-
- Drop Editor
- Save Changes
-
-
diff --git a/src/app/components/editor/code/code.component.ts b/src/app/components/editor/code/code.component.ts
index d13c5b2..0734426 100644
--- a/src/app/components/editor/code/code.component.ts
+++ b/src/app/components/editor/code/code.component.ts
@@ -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 HostRecord from '../../../structures/HostRecord';
-import {Observable} from 'rxjs';
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({
- selector: 'editor-code',
- templateUrl: './code.component.html',
- styleUrls: ['./code.component.scss'],
+ 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') 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();
- });
+export class CodeComponent extends EditorNodeContract implements OnInit {
+ @Input() nodeId: string;
+ public dirty = false;
+ protected dbRecord: any = {};
+ protected codeRefId!: string;
+
+ public editorOptions = {
+ language: 'javascript',
+ uri: v4(),
+ readOnly: false,
+ };
+
+ public editorValue = '';
+ public get readonly() {
+ return !this.node || !this.editorService.canEdit();
+ }
+
+ 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',
+ ];
+ protected hadLoad = false;
+
+ constructor(
+ public readonly editorService: EditorService,
+ public readonly api: ApiService,
+ ) { super(); }
+
+ public isDirty(): boolean | Promise {
+ return this.dirty;
+ }
+
+ public needsSave(): boolean | Promise {
+ return this.dirty;
+ }
+
+ public writeChangesToNode(): void | Promise {
+ this.node.Value.Mode = 'code';
+ this.node.Value.Value = this.codeRefId;
+ this.node.value = this.codeRefId;
+ }
+
+ public needsLoad(): boolean | Promise {
+ return this.node && !this.hadLoad;
+ }
+
+ public performLoad(): void | Promise {
+ 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,
+ });
+ }
});
- });
- }
-
- getInitObservable(): Observable {
- return new Observable(sub => {
- if ( this.hostRecord && this.pendingSetup ) {
- if ( !this.hostRecord.Value ) {
- this.hostRecord.Value = {};
+ }
+
+ public performSave(): void | Promise {
+ if ( !this.editorService.canEdit() ) {
+ return;
}
- 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();
+ return new Promise((res, rej) => {
+ this.dbRecord.code = this.editorValue;
+ this.dbRecord.Language = this.editorOptions.language;
+
+ this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/set/${this.node.Value.Value}`, this.dbRecord)
+ .subscribe({
+ next: result => {
+ this.dbRecord = result.data;
+ this.editorOptions.language = this.dbRecord.Language;
+ this.editorValue = this.dbRecord.code;
+ this.dirty = false;
+ res();
+ },
+ error: rej,
+ });
+ });
+ }
+
+ public performDelete(): void | Promise {
+ 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) {
- if ( updateDbRecord ) {
- this.dbRecord.Language = this.editorOptions.language;
+ ngOnInit() {
+ this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
+ 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};
+ }
}
diff --git a/src/app/pages/editor/editor.page.html b/src/app/pages/editor/editor.page.html
index 7dc4619..a1e247c 100644
--- a/src/app/pages/editor/editor.page.html
+++ b/src/app/pages/editor/editor.page.html
@@ -19,11 +19,11 @@
-
+
@@ -31,6 +31,9 @@
+
+
+