ucan-ext-js-kitchen-sink/packages/local/common-ux/src/util/dialog/ExtendErrorDialogView.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.common.dialog.ExtendErrorDialogView', {
    extend: 'Ext.Dialog',
    alias: 'widget.error-dialog',
    xtype: 'extendErrorDialogView',
    cls: 'js-ucan-error-dialog-view ucan-error-dialog-view',

    config: {
        errorTitle: '',
        errorCode: '',
        errorMessage: '',
        errorAction: '',
        errorId: '',
        appName: '',
        appVersion: '',
        appCall: '',
        options: [],
        translator: null
    },

    twoWayBindable: {
        errorTitle: false,
        errorCode: false,
        errorMessage: false,
        errorAction: false,
        errorId: false,
        appName: false,
        appVersion: false,
        appCall: false,
        options: false,
        translator: false
    },

    publishes: ['errorTitle', 'errorCode', 'errorMessage', 'errorAction', 'errorId', 'appName', 'appVersion', 'appCall', 'options', 'translator'],

    closable: true,
    maximizable: true,
    maxWidth: '95%',
    maxHeight: '95%',
    layout: 'vbox',

    items: [
        {
            cls: 'js-ucan-error-dialog-view-base-data-container ucan-error-dialog-view-base-data-container',
            html: ''
        },
        {
            xtype: 'list',
            cls: 'js-ucan-error-dialog-view-option-container ucan-error-dialog-view-option-container',
            itemTpl: new Ext.XTemplate(
                '{[this.createEntryDescr(values)]}',
                {
                    createEntryDescr: function(values) {
                        return values.name
                            + ' ('
                            + values.descr
                            + ')';
                    }
                }),
            listeners: {
                childtap: function(_list, location) {
                    location.record.data.call();
                }
            }
        },
    ],

    // region Update Attributes

    updateErrorTitle: function(config) {
        this.setTitle(config);
    },

    updateErrorCode: function(config) {
        this.getBaseDataContainer().setHtml(this.renderErrorData());
    },

    updateErrorMessage: function(config) {
        this.getBaseDataContainer().setHtml(this.renderErrorData());
    },

    updateErrorAction: function(config) {
        this.getBaseDataContainer().setHtml(this.renderErrorData());
    },

    updateErrorId: function(config) {
        this.getBaseDataContainer().setHtml(this.renderErrorData());
    },

    updateAppName: function(config) {
        this.getBaseDataContainer().setHtml(this.renderErrorData());
    },

    updateAppVersion: function(config) {
        this.getBaseDataContainer().setHtml(this.renderErrorData());
    },

    updateAppCall: function(config) {
        this.getBaseDataContainer().setHtml(this.renderErrorData());
    },

    updateOptions: function(config) {
        this.getOptionContainer().updateData(config);
    },

    // endregion

    renderErrorData: function() {
        let data = ''
            + '<p><span class="ucan-error-label">' + this.getTranslator()['error_code'] + ': </span>' + this.getErrorCode() + '</p>'
            + '<p><span class="ucan-error-label">' + this.getTranslator()['error_id'] + ': </span>' + this.getErrorId() + '</p>'
            + '<details>'
            + '<summary>' + this.getTranslator()['details'] + '</summary>'
            + '<p><span class="ucan-error-label">' + this.getTranslator()['app_name'] + ': </span>' + this.getAppName() + '</p>'
            + '<p><span class="ucan-error-label">' + this.getTranslator()['app_version'] + ': </span>' + this.getAppVersion() + '</p>'
            + '<p><span class="ucan-error-label">' + this.getTranslator()['app_call'] + ': </span>' + this.getAppCall()+ '</p>'
            + '</details>'
            + '<p><span class="ucan-error-label">' + this.getTranslator()['error_message'] + ': </span></p>'
            + '<p class="ucan-error-dialog-text">' + this.getErrorMessage() + '</p>'
        if(!Ext.isEmpty(this.getErrorAction()))
            data = data + '<p><span class="ucan-error-label">' + this.getTranslator()['error_action'] + ': </span></p>' + '<p class="ucan-error-dialog-text">' + this.getErrorAction() + '</p>';
        if(!Ext.isEmpty(this.getOptions()))
            data = data + '<p><span class="ucan-error-label">' + this.getTranslator()['error_options'] + ': </span></p>';
        return data;
    },

    // region Getter

    getBaseDataContainer: function() {
        return this.down('[cls~=js-ucan-error-dialog-view-base-data-container]');
    },

    getOptionContainer: function() {
        return this.down('[cls~=js-ucan-error-dialog-view-option-container]');
    }

    // endregion
})