Convert code editor to new format
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
0a6a775fdb
commit
ae24674717
GPG Key ID:
D2BF5FBA8298F246
@ -7,7 +7,7 @@
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-toolbar>
|
||||
<div class="ed-wrapper" style="width: 100%; height: 480px;">
|
||||
<div class="ed-wrapper" style="width: 100%; height: 540px;">
|
||||
<ngx-monaco-editor style="width: 100%; height: 100%;"
|
||||
[options]="editorOptions"
|
||||
[(ngModel)]="editorValue"
|
||||
@ -15,10 +15,4 @@
|
||||
#theEditor
|
||||
></ngx-monaco-editor>
|
||||
</div>
|
||||
<ion-toolbar *ngIf="!readonly">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button (click)="onDropClick()"><ion-icon name="alert" color="danger"></ion-icon> Drop Editor</ion-button>
|
||||
<ion-button (click)="onSaveClick()"><ion-icon name="save" [color]="dirty ? 'warning' : 'success'"></ion-icon> Save Changes</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
|
||||
@ -1,26 +1,30 @@
|
||||
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'],
|
||||
})
|
||||
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;
|
||||
|
||||
export class CodeComponent extends EditorNodeContract implements OnInit {
|
||||
@Input() nodeId: string;
|
||||
public dirty = false;
|
||||
public pendingSetup = true;
|
||||
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<string> = [
|
||||
'ABAP',
|
||||
@ -87,109 +91,109 @@ export class CodeComponent implements OnInit {
|
||||
'XML',
|
||||
'YAML',
|
||||
];
|
||||
|
||||
public editorOptions = {
|
||||
language: 'javascript',
|
||||
uri: v4(),
|
||||
readOnly: this.readonly,
|
||||
};
|
||||
public editorValue = '';
|
||||
protected hadLoad = false;
|
||||
|
||||
constructor(
|
||||
protected api: ApiService,
|
||||
protected loader: LoadingController,
|
||||
protected alerts: AlertController,
|
||||
) { }
|
||||
public readonly editorService: EditorService,
|
||||
public readonly api: ApiService,
|
||||
) { super(); }
|
||||
|
||||
ngOnInit() {
|
||||
this.loader.create({message: 'Loading code...'}).then(loader => {
|
||||
loader.present().then(() => {
|
||||
this.getInitObservable().subscribe(() => {
|
||||
this.editorOptions.language = this.dbRecord.Language;
|
||||
public isDirty(): boolean | Promise<boolean> {
|
||||
return this.dirty;
|
||||
}
|
||||
|
||||
public needsSave(): boolean | Promise<boolean> {
|
||||
return this.dirty;
|
||||
}
|
||||
|
||||
public writeChangesToNode(): void | Promise<void> {
|
||||
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);
|
||||
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();
|
||||
this.hadLoad = true;
|
||||
res();
|
||||
},
|
||||
error: rej,
|
||||
});
|
||||
} else {
|
||||
this.api.get(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
|
||||
this.dbRecord = res.data;
|
||||
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.pendingSetup = false;
|
||||
sub.next(true);
|
||||
sub.complete();
|
||||
this.codeRefId = this.node.Value.Value;
|
||||
this.editorOptions.readOnly = this.readonly;
|
||||
this.onSelectChange(false);
|
||||
this.hadLoad = true;
|
||||
res();
|
||||
},
|
||||
error: rej,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.pendingSetup = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onSaveClick() {
|
||||
if ( this.readonly ) {
|
||||
public performSave(): void | Promise<void> {
|
||||
if ( !this.editorService.canEdit() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise((res, rej) => {
|
||||
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.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,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async onDropClick() {
|
||||
if ( this.readonly ) {
|
||||
return;
|
||||
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,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
ngOnInit() {
|
||||
this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
|
||||
this.editorOptions.readOnly = !this.editorService.canEdit();
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
public onEditorModelChange($event) {
|
||||
@ -198,12 +202,11 @@ export class CodeComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
onSelectChange(updateDbRecord = true) {
|
||||
public onSelectChange(updateDbRecord = true) {
|
||||
if ( updateDbRecord ) {
|
||||
this.dbRecord.Language = this.editorOptions.language;
|
||||
}
|
||||
|
||||
this.editorOptions = {...this.editorOptions};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -19,11 +19,11 @@
|
||||
<div class="editor-root ion-padding">
|
||||
<div
|
||||
class="host-container"
|
||||
style="display: flex;"
|
||||
style="display: flex; margin-bottom: 20px;"
|
||||
*ngFor="let node of editorService.immutableNodes"
|
||||
>
|
||||
<div class="host-icons">
|
||||
<i class="type-icon norm fa" [ngClass]="typeIcons.norm" title="WYSIWYG Node"></i>
|
||||
<i class="type-icon fa" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : node.type)" title="WYSIWYG Node"></i>
|
||||
<button (click)="onOptionsClick($event, node)">
|
||||
<i class="fa fa-ellipsis-v" title="Node options"></i>
|
||||
</button>
|
||||
@ -31,6 +31,9 @@
|
||||
<ng-container *ngIf="node.isNorm()">
|
||||
<editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="node.type === 'code_ref'">
|
||||
<editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
|
||||
</ng-container>
|
||||
</div>
|
||||
<button class="host-add-button" (click)="onAddClick($event)">
|
||||
<i class="fa fa-plus"></i> Add Node
|
||||
|
||||
@ -15,10 +15,19 @@ ion-icon.invisible {
|
||||
|
||||
.type-icon {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
&.norm {
|
||||
&.node {
|
||||
color: var(--noded-background-node);
|
||||
}
|
||||
|
||||
&.code_ref {
|
||||
color: var(--noded-background-code);
|
||||
}
|
||||
|
||||
&.db {
|
||||
color: var(--noded-background-db);
|
||||
}
|
||||
}
|
||||
|
||||
.host-add-button {
|
||||
|
||||
@ -24,6 +24,7 @@ export class EditorPage implements OnInit {
|
||||
page: 'fa fa-sticky-note',
|
||||
db: 'fa fa-database',
|
||||
code: 'fa fa-code',
|
||||
code_ref: 'fa fa-code',
|
||||
};
|
||||
|
||||
@Input() pageId: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user