gehgassi_backend/gehGassi.Web/TS/Views/Faqs/Edit.ts

import { Global } from "../../Core/Globals"
import { EventManager } from "../../Core/Events"
import { Ui } from "../../Core/Ui"
import * as Events from "../../Core/EventDefinitions"
import { LocalizationManager } from "../../Core/Localization"
import { Tab } from "@syncfusion/ej2-navigations";
import * as Utility from "../../Core/Utility";
import { FormValidation } from "../../Core/Forms"
import * as Models from "../../Common/Models";
import { RichTextEditor, Toolbar, Link,Image, HtmlEditor, QuickToolbar, FileManager } from "@syncfusion/ej2-richtexteditor";

class EditFaqModule {
    private _moduleName = "EditFaqModule";
    private _component = "#faqEditContainer";
    private _global: Global;
    private _eventManager: EventManager;
    private _uiManager: Ui;
    private _localizationMananger: LocalizationManager;
    private _tab: Tab;
    private _tabText: Tab;
    private _rteList: Array<RichTextEditor>;

    constructor() {
        this._global = Global.getInstance();
        this._eventManager = EventManager.getInstance();
        this._uiManager = Ui.getInstance();
        this._localizationMananger = LocalizationManager.getInstance();
        RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, FileManager);
        this._rteList = [];
    }

    /**
     * Stellt einen Prefix vor einen Selektor
     * @param selector
     */
    private prefix(selector: string): string {
        const self = this;
        if ($(`${self._component} ${selector}`).length > 0)
            return `${self._component} ${selector}`;
        return `html ${selector}`;
    }

    /**
    * Speichern
    */
    private save(): void {
        var self = this;
        self._uiManager.blockMainUi();

        var action = $(self.prefix("#frmEditFaq")).attr("action");
        var data = $(self.prefix("#frmEditFaq")).serialize();
        $.post(action, data)
            .done(result => {
                if (result.success) {
                    for (var rte of self._rteList) {
                        rte.destroy();
                    }
                    self._uiManager.pageTitleClear(self._component);
                    self._eventManager.unSubscribeAll(self._moduleName);
                    self._eventManager.publish(Events.Faq.editSuccess, result.data);
                }
                else {
                    for (var rte of self._rteList) {
                        rte.destroy();
                    }
                    $(self._component).replaceWith(result.html);
                    $.highlightErrors();
                    Utility.showErrorTab();
                    self.activate();
                }
            })
            .fail(result => {
                self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
            })
            .always(result => {
                self._uiManager.unblockMainUi();
            });
    }

    /**
    * Bindungen erstellen
    */
    private setupBindings(): void {
        var self = this;

        $(self.prefix("#btnSave")).off("click").on("click", function () {
            FormValidation.getInstance().validateForm(self.prefix("#frmEditFaq"), () => {
                self.save();
            }, () => {
                $.highlightErrors();
                Utility.showErrorTab();
            });
        });

        $(self.prefix("#btnCancel")).off("click").on("click", function () {
            self._uiManager.pageTitleClear(self._component);
            self._eventManager.unSubscribeAll(self._moduleName);
            self._eventManager.publish(Events.Faq.editCancel);
        });

        self._tabText = new Tab({
            animation: { previous: { effect: "FadeIn", duration: 100 }, next: { effect: "FadeIn", duration: 100 } },
            selecting: (arsg: any) => {
                if (arsg.isSwiped) {
                    arsg.cancel = true;
                }
            },
            selected: (args: any) => {
                for (var rte of self._rteList) {
                    rte.refreshUI();
                }
            }
        });
        self._tabText.appendTo(self.prefix("#tabContainerText"));

        //#region RTE

        $(self.prefix(".rte")).each(function () {
            var id = $(this).prop("id");
            let rte = new RichTextEditor({
                height: 340,
                quickToolbarSettings: {
                    image: [
                        "Replace", "Align", "Caption", "Remove", "InsertLink", "OpenImageLink", "-",
                        "EditImageLink", "RemoveImageLink", "Display", "AltText", "Dimension"
                    ],
                    link: ["Open", "Edit", "UnLink"]
                },
                insertImageSettings: {
                    
                },
                toolbarSettings: {
                    items: ["Bold", "Italic", "Underline", "StrikeThrough", "FontColor", "|",
                        "Formats", "Alignments", "OrderedList", "UnorderedList",
                        "Outdent", "Indent", "|",
                        "CreateLink", "FileManager", "|", "ClearFormat", "Print",
                        "SourceCode", "FullScreen", "|", "Undo", "Redo"]
                },
                fileManagerSettings: {
                    enable: true,
                    ajaxSettings: {
                        url: <string>$(self.prefix("#jsFmBaseUrl")).val(),
                        getImageUrl: <string>$(self.prefix("#jsBrowserUrl")).val(),
                        uploadUrl: <string>$(self.prefix("#jsFmUploadUrl")).val(),
                        downloadUrl: <string>$(self.prefix("#jsFmDownloadUrl")).val()
                    },
                    toolbarSettings: { items: ["NewFolder", "Upload", "Cut", "Copy", "Paste", "Delete", "Rename", "SortBy", "Refresh", "Selection", "View"], visible: true },
                    contextMenuSettings: { file: ["Open", "|", "Cut", "Copy", "|", "Delete", "Rename"], folder: ["Open", "|", "Cut", "Copy", "Paste", "|", "Delete", "Rename"], layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "Upload", "|", "SelectAll"], visible: true, },
                    uploadSettings: {
                        autoClose: true,
                        autoUpload: true
                    }
                },
                dialogOpen: function (args: any) {
                    const dialogObj = this.fileManagerModule.dialogObj;
                    this.fileManagerModule.fileObj.beforeImageLoad = function (args) {
                        args.imageUrl = args.imageUrl.replace("?path=", "&path=");
                    };
                    this.fileManagerModule.fileObj.fileSelect = function (args) {
                        if (args.fileDetails.isFile) {
                            dialogObj.element.querySelector(".e-img-url").value = args.fileDetails._fm_imageUrl.replace("?path=", "&path=");
                            dialogObj.btnObj[0].disabled = false;
                        }
                        else {
                            dialogObj.element.querySelector(".e-img-url").value = "";
                            dialogObj.btnObj[0].disabled = true;
                        }
                    };
                },
            });
            rte.appendTo(self.prefix(`#${id}`));
            self._rteList.push(rte);
        });

        setTimeout(() => {
            for (var rte of self._rteList) {
                rte.refreshUI();
            }
        }, 1000);

        //#endregion

        $('[data-toggle="tooltip"]').tooltip();
    }

    /**
    * Aktivieren des Moduls
    */
    public activate(): void {
        var self = this;
        $.setupValidator();
        $.reinitializeValidator();
        this.setupBindings();
        self._uiManager.pageTitleAdd(self._component, self.prefix("#pageTitleAdd"));
        $.randomAutocompleteValue();
    }

    /**
    * Initialisieren des Moduls
    */
    public init(): void {
        if (this._global.appInitialized) {
            editFaqModule.activate();
        } else {
            setTimeout(() => { this.init() }, 10);
        }
    }
}

let editFaqModule = new EditFaqModule();
editFaqModule.init();