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

import {Component, Input, OnInit} from '@angular/core';
import {v4} from 'uuid';
import {ApiService} from '../../../service/api.service';
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 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<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',
    ];
    protected hadLoad = false;

    constructor(
        public readonly editorService: EditorService,
        public readonly api: ApiService,
    ) { super(); }

    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);
                        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> {
        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.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<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,
            });
        });
    }

    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.editorService.triggerSave();
        }
    }

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

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