ru.coon 2.5.64 → 2.5.65

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# Version 2.5.65, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/64478c87b5169b1d5be5b28bae8b82ada2477f32)
+* ## Fixes
+* <span style='color:red'> HT-7918 WindowWrap missing focus</span> ([0bdf38], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/0bdf38c03dbd1cac10c9f2d8ea5d0786909d68e1))
+
+* update: CHANGELOG.md ([4a4d82], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/4a4d820afb7cfa7df56e325ba7435a3ecdfff712))
+
 # Version 2.5.64, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/9f48777236abed76cf08cd5cef56e7f9be0dac63)
 * ## Features
 * <span style='color:green'>feat: HT-7955: focus CP before save action, set cell editing values in grids</span> ([4c6578], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/4c6578c6873cd21c509de304494938276e7367a9))

package/package.json

@@ -4,7 +4,7 @@
     "name": "ru.coon"
   },
   "description": "",
-  "version": "2.5.64",
+  "version": "2.5.65",
   "repository": {
     "type": "git",
     "url": "git+http://gitlab-dbr.sigma-it.local/dbr/ru.coon"

package/src/common/panel/WindowWrap.js

@@ -115,7 +115,7 @@ Ext.define('Coon.common.panel.WindowWrap', {
             }];
         }
         this.callParent();
-        this.defaultFocus = this.readOnly ? undefined : (panel.defaultFocus || 'textfield[hidden=false][readOnly=false]');
+        this.setFocusTarget(panel);
         this.content = this.items.getAt(0);
         this.title = Ext.isEmpty(this.title) ? this.content.title : this.title;
         if (!Ext.isEmpty(this.content.wrapWindowResizeEvent)) {
@@ -167,6 +167,15 @@ Ext.define('Coon.common.panel.WindowWrap', {
         }
     },
 
+    setFocusTarget: function(panel) {
+        this.on('render', function() {
+            this.focus();
+        }, this);
+        this.on('focus', function() {
+            this.defaultFocus = this.readOnly ? undefined : (panel.defaultFocus || 'textfield[hidden=false][readOnly=false]');
+        }, this);
+    },
+
     wikiLink: function() {
         const context = (Ext.isFunction(this.content.getWikiContext) && this.content.getWikiContext()) || this.content.getXType();
         const panel = Ext.create('Coon.requests.wiki.WikiLinkView');

package/src/uielement/component/UiCPVisualEditor.js

@@ -0,0 +1,896 @@
+Ext.define('Coon.uielement.component.UiCPVisualEditor', {
+    extend: 'Ext.panel.Panel',
+    cls: 'UiCPVisualEditor',
+    alias: 'widget.UiCPVisualEditor',
+    xtype: 'UiCPVisualEditor',
+    header: false,
+    layout: 'border',
+    requires: [
+        'Coon.uielement.component.UiCPVisualEditorConfigWindow'
+    ],
+    controller: {
+        defaultPixelsSize: 200,
+        bindingRegister: [],
+        plugins: [],
+        isTipOpened: false,
+        onTreeItemContextMenu: function(view, record, item, index, event, opt) {
+            this.onContextClick(event, item, {
+                'cmp': this.getEditorPanel().down('[dataId=' + record.get('dataId') + ']'),
+                'target': Ext.get(item.id).el,
+            });
+            return false;
+        },
+        deselectAllCmp: function() {
+            this.getEditorPanel().query('[dataId]').map((item) => {
+                if (item.el) {
+                    item.el.dom.classList.remove('hover-item');
+                }
+            });
+        },
+        selectCmp: function(id) {
+            const cmp = this.getEditorPanel().down('[dataId=' + id + ']');
+            if (cmp && cmp.el) {
+                cmp.el.dom.classList.add('hover-item');
+            }
+        },
+        onTreeSelectionChange: function(tree, selection) {
+            this.deselectAllCmp();
+            if (selection.length) {
+                this.selectCmp(selection[0].get('dataId'));
+            }
+        },
+        getEditorPanel: function() {
+            return this.getView().down('[dataId=editorPanel]');
+        },
+        onRenderMainPanel: function() {
+            this.renderTemplate();
+        },
+        getFirstContainer: function(formData) {
+            return formData.find((item) => {
+                if (item.xtype === 'panel' || item.xtype === 'container') {
+                    return item;
+                }
+                if (item.items && item.items.length) {
+                    return this.getFirstContainer(item.items);
+                }
+            });
+        },
+        normaliseMainPluginsCfg: function(data) {
+            data.map((item) => {
+                if (item.cmpParams) {
+                    if (item.cmpParams.mainPlugins && item.cmpParams.mainPlugins.length) {
+                        this.plugins = item.cmpParams.mainPlugins;
+                        delete item.cmpParams['mainPlugins'];
+                    }
+                    if (item.items && item.items.length) {
+                        this.normaliseMainPluginsCfg(item.items);
+                    }
+                }
+            });
+        },
+        renderTemplate: function(data) {
+            this.getEditorPanel().removeAll(true);
+            const formData = this.getTemplate(data);
+            const firstContainer = this.getFirstContainer(formData);
+            this.plugins = [];
+            this.normaliseMainPluginsCfg(formData);
+            if (this.plugins.length) {
+                firstContainer.plugins = this.plugins;
+                firstContainer.cmpParams.mainPlugins = this.plugins;
+            }
+            firstContainer['controller'] = {};
+            firstContainer['viewModel'] = {};
+            this.reloadTreeStore(formData);
+            try {
+                this.getEditorPanel().add(formData);
+            } catch (e) {
+                Ext.Msg.alert('Ошибка', e.message);
+            }
+        },
+        reloadTreeStore: function(formData) {
+            this.getView().down('[dataId=treeEditorPanel]').setRootNode(this.getNodeCfg(formData)[0]);
+        },
+        getNodeCfg: function(items) {
+            if (!items) {
+                return [];
+            }
+            return items.map((item) => {
+                const subItems = item.uiElementCd ? false : this.getNodeCfg(item.items);
+                let obj = {};
+                if (item.isContainer) {
+                    obj = {leaf: false, children: []};
+                } else {
+                    obj = {leaf: true};
+                }
+                const result = Ext.apply({
+                    'text': item.cmpParams.xtype,
+                    'dataId': item.cmpParams.dataId,
+                }, subItems && subItems.length ? {children: subItems, expanded: true} : obj);
+                return result;
+            });
+        },
+        getTemplate: function(data) {
+            if (!data) {
+                data = [this.getDefaultData()];
+            }
+            return data.map((item) => {
+                return this.getTemplateCmp(item);
+            });
+        },
+        getDefaultsByLayoutType: function(layout) {
+            switch (layout) {
+            case 'vbox':
+                return {width: '100%', flex: 1};
+            case 'hbox':
+                return {height: '100%', flex: 1};
+            }
+        },
+        modifyObject: function(obj) {
+            const newObject = {};
+            newObject.cmpParams = obj;
+            delete newObject.cmpParams['uiElementCd'];
+            // delete newObject.cmpParams['plugins'];
+            if (obj.xtype === 'ReportPanel') {
+                delete newObject.cmpParams['items'];
+            }
+            if (!obj.xtype) {
+                newObject.cmpParams.xtype = 'panel';
+            }
+
+            return newObject;
+        },
+        getTemplateCmp: function(cfg) {
+            const modifiedObject = typeof cfg.cmpParams !== 'undefined' ? cfg : this.modifyObject(cfg);
+            if (typeof modifiedObject.cmpParams.items !== 'undefined' && modifiedObject.cmpParams.items.length) {
+                modifiedObject.items = modifiedObject.cmpParams.items;
+                delete modifiedObject.cmpParams['items'];
+            }
+            if (!modifiedObject.cmpParams.dataId) {
+                modifiedObject.cmpParams.dataId = Ext.id() + '-interface-node';
+            }
+            const layout = typeof modifiedObject.cmpParams.layout === 'undefined' ? 'fit' :
+                modifiedObject.cmpParams.layout === 'object' ? modifiedObject.cmpParams.layout.type : modifiedObject.cmpParams.layout;
+            const newCmp = Ext.apply({
+                'defaults': this.getDefaultsByLayoutType(layout),
+                'cmpParams': modifiedObject.cmpParams,
+            }, modifiedObject.cmpParams);
+            if (modifiedObject.items && modifiedObject.items.length) {
+                newCmp.items = this.getTemplate(modifiedObject.items);
+            }
+            if (!newCmp.items || newCmp.items.length === 0) {
+                newCmp.cls = 'borders-default';
+                newCmp.listeners = {'render': this.onGetTemplateCmp.bind(this)};
+            }
+            return newCmp;
+        },
+        getCurrentPanelIndex: function(panel) {
+            let panelIndex = 0;
+            panel.up().items.items.map((item, index) => {
+                if (item.id === panel.id) {
+                    panelIndex = index;
+                }
+            });
+            return panelIndex;
+        },
+        addCmp: function(cmp, side, inParent, xtype) {
+            if (inParent && cmp.up().xtype === cmp.xtype) {
+                cmp = cmp.up();
+            }
+            const parent = cmp.up();
+            if (!parent) {
+                return false;
+            }
+            const parentLayout = parent.layout.type || false;
+            const index = this.getCurrentPanelIndex(cmp);
+            let container = {};
+            let newIndex = index;
+            const needLayout = side === 'left' || side === 'right' ? 'hbox' : 'vbox';
+            if (side === 'down' || side === 'right') {
+                newIndex = Number(index) + 1;
+            }
+            if (parentLayout === needLayout) {
+                parent.insert(newIndex, this.getTemplateCmp(this.getDefaultCmp(xtype)));
+            } else {
+                container = {
+                    xtype: xtype,
+                    cmpParams: {
+                        xtype: xtype,
+                        layout: needLayout,
+                        flex: cmp.flex || 1,
+                    },
+                    layout: needLayout,
+                    flex: cmp.flex || 1,
+                    items: [],
+                };
+                const currentTemplate = this.getTemplate(this.getData([cmp])).pop();
+                const defaultTemplate = this.getTemplateCmp(this.getDefaultCmp(xtype));
+                if (side === 'down' || side === 'right') {
+                    container.items = [currentTemplate, defaultTemplate];
+                } else {
+                    container.items = [defaultTemplate, currentTemplate];
+                }
+                parent.remove(cmp, true);
+                parent.insert(index, [container]);
+            }
+            this.renderTemplate(this.getData(this.getEditorPanel().items.items));
+        },
+        getData: function(items) {
+            if (!items) {
+                return [];
+            }
+            return items.map((item) => {
+                const subItems = !item.cmpParams ||
+                    item.xtypesMap.grid ||
+                    item.cmpParams.xtype === 'ReportPanel' ||
+                    (!item.items ?
+                        false :
+                        this.getData(item.items.items)
+                    );
+                const result = Ext.apply({
+                    'cmpParams': item.cmpParams,
+                }, subItems ? {items: subItems} : {});
+                return result;
+            });
+        },
+
+        onDeleteCmpClick: function(elem) {
+            const me = this;
+            Ext.Msg.show({
+                title: 'Внимание',
+                message: 'Вы действительно хотите удалить элемент рабочего стола?',
+                buttons: Ext.Msg.YESNO,
+                icon: Ext.Msg.QUESTION,
+                fn: function(btn) {
+                    if (btn === 'yes') {
+                        const branch = me.getDeletedBranch(elem);
+                        const xtype = branch.xtype;
+                        const parent = branch.up();
+                        branch.destroy();
+                        if (parent.xtype === xtype && parent.items.items.length === 1) {
+                            parent.cmpParams = parent.items.items[0].cmpParams;
+                            parent.cmpParams.items = me.getData(parent.items.items[0].items.items);
+                            parent.removeAll(true);
+                        }
+                        me.reloadView();
+                    }
+                },
+            });
+        },
+        getDeletedBranch: function(panel) {
+            if (panel.up().items.items.length > 1 || panel.xtype !== panel.up().xtype || panel.up().dataId === 'editorPanel') {
+                return panel;
+            }
+            return this.getDeletedBranch(panel.up());
+        },
+        clearBindRegister: function() {
+            this.bindingRegister.map((bind) => {
+                bind.destroy();
+            });
+        },
+        reloadView: function() {
+            this.clearBindRegister();
+            this.renderTemplate(this.getData(this.getEditorPanel().items.items));
+        },
+        onContextClick: function(event, dom, opt) {
+            const cmp = opt.cmp;
+            const target = !opt.target ? cmp : opt.target;
+            const contextMenu = new Ext.menu.Menu({
+                closeAction: 'destroy',
+                items: this.getMenuCfgByXtype(cmp.cmpParams.xtype, cmp),
+                listeners: {
+                    hide: function() {
+                        const me = this;
+                        Ext.defer(() => me.destroy(), 2000);
+                    },
+                },
+            });
+            contextMenu.showAt(target.getX(), target.getY());
+            event.preventDefault();
+            return false;
+        },
+        onGetTemplateCmp: function(elem) {
+            const cmp = Ext.get(elem.id);
+            cmp.on('mouseover', this.enableBorders.bind(this, cmp, true));
+            cmp.on('mouseout', this.enableBorders.bind(this, cmp, false));
+            cmp.on('contextmenu', this.onContextClick, this, {'cmp': elem});
+            /* elem.el.dom.addEventListener('mouseover', this.enableBorders.bind(this, true), this);
+            elem.el.dom.addEventListener('mouseout', this.enableBorders.bind(this, false), this);*/
+        },
+        enableBorders: function(elem, flag, event) {
+            if (flag) {
+                elem.dom.classList.add('hover-item');
+            } else {
+                elem.dom.classList.remove('hover-item');
+            }
+            // }
+        },
+        onClickButtonAddPanel: function(panel, event) {
+            this.addCmp(panel, event.target.getAttribute('data-side'), event.target.getAttribute('data-in-parent') === 'true', 'container');
+        },
+        renderMenu: function(panel, xtype, event) {
+            const me = this;
+            if (!me.isTipOpened) {
+                me.isTipOpened = true;
+                const tip = Ext.create('Ext.tip.Tip', {
+                    autoShow: false,
+                    target: event.target,
+                    closeAction: 'destroy',
+                    closable: true,
+                    layout: 'fit',
+                    cls: 'menu-tip',
+                    listeners: {
+                        'beforeclose': function() {
+                            me.isTipOpened = false;
+                        },
+                    },
+                    items: [
+                        {
+                            xtype: 'treelist',
+                            store: {
+                                root: me.getMenuCfgByXtype(xtype),
+                            },
+                            listeners: {
+                                'itemclick': me.menuItemClick.bind(me, panel),
+                            },
+                        }
+                    ],
+                });
+                tip.show();
+                // tip.setXY([event.clientX, event.clientY]);
+            }
+        },
+        getIndex: function(panel) {
+            let index = 0;
+            panel.up().items.keys.find((item, number) => {
+                if (panel.id === item) {
+                    index = number;
+                    return item;
+                }
+            });
+            return index;
+        },
+        getMenuCfgByXtype: function(xtype, panel) {
+            const me = this;
+            let buttons = [];
+            if (panel.isContainer) {
+                buttons = buttons.concat([{
+                    iconCls: 'x-fa fa-file-invoice',
+                    text: 'Добавить элемент',
+                    handler: () => me.onAddCmpClick(panel),
+                },
+                {
+                    iconCls: 'x-fa fa-file-invoice',
+                    text: 'Импортировать существующую настраиваемую панель',
+                    handler: () => me.onAddExistingPanelCmpClick(panel),
+                },
+                {iconCls: 'x-fa fa-copy', text: 'Копировать содержимое'},
+                {iconCls: 'x-fa fa-paste', text: 'Вставить содержимое'},
+                {iconCls: 'x-fa fa-pastafarianism', text: 'Заменить содержимое'}]
+                );
+                const firstContainer = this.getFirstContainer(this.getEditorPanel().items.items);
+                if (firstContainer.dataId !== panel.dataId) {
+                    buttons = buttons.concat([
+                        {
+                            iconCls: 'x-fa fa-file-invoice',
+                            text: 'Прикрепить отчет',
+                            handler: () => me.onAddReportCmpClick(panel),
+                        }
+                    ]
+                    );
+                }
+            }
+            if (panel.successUserEditingOptions && panel.successUserEditingOptions.length) {
+                buttons = buttons.concat([
+                    {iconCls: 'x-fa fa-cog', text: 'Настройки', handler: () => me.onSettingsCmpClick(panel)}
+                ]);
+            }
+            if (panel.up().dataId !== 'editorPanel') {
+                buttons = buttons.concat([{
+                    iconCls: 'x-fa fa-remove',
+                    text: 'Удалить',
+                    handler: () => me.onDeleteCmpClick(panel),
+                }]);
+            }
+            buttons = buttons.concat([{
+                iconCls: 'x-fa fa-save',
+                text: 'Сохранить',
+                handler: () => me.onSaveCmpClick(panel),
+            }]);
+
+            if (panel.up().layout.type !== 'border' && panel.up().isContainer && panel.up().items.length > 1) {
+                const curIndex = this.getIndex(panel);
+                if (curIndex === 0 || curIndex === panel.up().items.length - 1) {
+                    if (curIndex === 0) {
+                        buttons = buttons.concat([{
+                            iconCls: 'x-fa fa-chevron-circle-down',
+                            text: 'Переместить вниз',
+                            handler: () => me.onMoveCmpClick(panel, curIndex + 1),
+                        }]);
+                    }
+                    if (curIndex === panel.up().items.length - 1) {
+                        buttons = buttons.concat([{
+                            iconCls: 'x-fa fa-chevron-circle-up',
+                            text: 'Переместить вверх',
+                            handler: () => me.onMoveCmpClick(panel, curIndex - 1),
+                        }]);
+                    }
+                } else {
+                    buttons = buttons.concat([{
+                        iconCls: 'x-fa fa-chevron-circle-up',
+                        text: 'Переместить вверх',
+                        handler: () => me.onMoveCmpClick(panel, curIndex - 1),
+                    }, {
+                        iconCls: 'x-fa fa-chevron-circle-down',
+                        text: 'Переместить вниз',
+                        handler: () => me.onMoveCmpClick(panel, curIndex + 1),
+                    }]);
+                }
+            }
+
+            switch (xtype) {
+            case 'container':
+                buttons = [
+                    {
+                        iconCls: 'x-fa fa-angle-left',
+                        text: 'Добавить влево',
+                        handler: () => me.addCmp(panel, 'left', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-right',
+                        text: 'Добавить вправо',
+                        handler: () => me.addCmp(panel, 'right', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-up',
+                        text: 'Добавить панель вверх',
+                        handler: () => me.addCmp(panel, 'up', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-down',
+                        text: 'Добавить вниз',
+                        handler: () => me.addCmp(panel, 'down', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-left',
+                        text: 'Добавить в родителя влево',
+                        handler: () => me.addCmp(panel, 'left', true, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-right',
+                        text: 'Добавить в родителя вправо',
+                        handler: () => me.addCmp(panel, 'right', true, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-up',
+                        text: 'Добавить в родителя вверх',
+                        handler: () => me.addCmp(panel, 'up', true, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-down',
+                        text: 'Добавить в родителя вниз',
+                        handler: () => me.addCmp(panel, 'down', true, xtype),
+                    }
+                ].concat(buttons);
+                break;
+            }
+            return buttons;
+        },
+        menuItemClick: function(panel, list, opt) {
+            switch (opt.node.data.action) {
+            case 'add':
+                this.addCmp(panel, opt.node.data.side, opt.node.data.inParent, 'container');
+                break;
+            case 'addCmp':
+                this.onAddCmpClick(panel);
+                break;
+            case 'remove':
+                this.onDeleteCmpClick(panel);
+                break;
+            case 'save':
+                this.onSaveCmpClick(panel);
+                break;
+            }
+            list.up().close();
+        },
+        onMoveCmpClick: function(panel, needIndex) {
+            const parent = panel.up();
+            parent.remove(panel, false);
+            parent.insert(needIndex, panel);
+            this.reloadView();
+        },
+        onSaveCmpClick: function() {
+            JSON.stringify(this.getData(this.getEditorPanel().items.items));
+        },
+        enablePanelControls: function(div, flag) {
+            div.style.display = flag ? 'unset' : 'none';
+        },
+        onAddCmpClick: function(panel) {
+            const me = this;
+            let value = 'container';
+            let data = [
+                {'id': 'container', 'name': 'Контенер'},
+                {'id': 'panel', 'name': 'Панель'},
+                {'id': 'tabpanel', 'name': 'Таб панель'},
+                {'id': 'fieldset', 'name': 'fieldset'},
+                {'id': 'textfield', 'name': 'Текстовое поле'},
+                {'id': 'numberfield', 'name': 'Числовое поле'},
+                {'id': 'datefield', 'name': 'Дата'}
+            ];
+            if (panel.xtype === 'tabpanel') {
+                data = [{'id': 'panel', 'name': 'Панель'}];
+                value = 'panel';
+            }
+            Ext.create('Ext.window.Window', {
+                closable: true,
+                parentPanel: panel,
+                closeAction: 'destroy',
+                width: 400,
+                title: 'Добавлние элемента',
+                height: 170,
+                modal: true,
+                maximazible: false,
+                minimazible: false,
+                items: [
+                    {
+                        margin: '10px 5px',
+                        fieldLabel: 'Тип элемента',
+                        flex: 1,
+                        width: '100%',
+                        xtype: 'combo',
+                        queryMode: 'local',
+                        value: value,
+                        displayField: 'name',
+                        valueField: 'id',
+                        store: {
+                            fields: ['id', 'name'],
+                            data: data,
+                        },
+                    }
+                ],
+                buttons: [
+                    {
+                        text: 'Применить',
+                        handler: me.insertCmp.bind(me, panel),
+                    },
+                    {
+                        text: 'Отмена',
+                        handler: function() {
+                            this.up('window').close();
+                        },
+                    }
+                ],
+            }).show();
+        },
+        insertCmp: function(panel, btn) {
+            const cmpXtype = btn.up('window').down('combo').getValue();
+            if (!panel.items.length) {
+                switch (cmpXtype) {
+                case 'textfield':
+                case 'numberfield':
+                case 'datefield':
+                    panel.cmpParams.layout = 'anchor';
+                    break;
+                case 'panel':
+                case 'tabpanel':
+                case 'fieldset':
+                case 'container':
+                    panel.cmpParams.layout = 'fit';
+                    break;
+                }
+            }
+            panel.add(this.getCfgCmpByXtype(cmpXtype));
+            this.reloadView();
+            btn.up('window').close();
+        },
+        getCfgCmpByXtype: function(xtype) {
+            switch (xtype) {
+            case 'panel':
+                return {
+                    xtype: 'panel',
+                    layout: 'fit',
+                    cmpParams: {
+                        xtype: 'panel',
+                        layout: 'fit',
+                        title: 'Новая панель',
+                    },
+                    title: 'Новая панель',
+                };
+                break;
+            case 'tabpanel':
+                return {
+                    xtype: 'tabpanel',
+                    layout: 'fit',
+                    cmpParams: {
+                        xtype: 'tabpanel',
+                        layout: 'fit',
+                        title: 'Новая панель',
+                    },
+                    title: 'Новая панель',
+                };
+                break;
+            case 'container':
+                return {
+                    xtype: 'container',
+                    cmpParams: {
+                        xtype: 'container',
+                        layout: 'fit',
+                    },
+                    layout: 'fit',
+                };
+                break;
+            case 'fieldset':
+                return {
+                    xtype: 'fieldset',
+                    cmpParams: {
+                        xtype: 'fieldset',
+                        layout: 'fit',
+                        title: 'Филдсет',
+                    },
+                };
+                break;
+            case 'textfield':
+                return {
+                    xtype: 'textfield',
+                    cmpParams: {
+                        xtype: 'textfield',
+                        anchor: '100%',
+                        fieldLabel: 'Текствое поле',
+                    },
+                };
+                break;
+            case 'numberfield':
+                return {
+                    xtype: 'numberfield',
+                    cmpParams: {
+                        anchor: '100%',
+                        xtype: 'numberfield',
+                        fieldLabel: 'Числовое поле',
+                    },
+                };
+                break;
+            case 'datefield':
+                return {
+                    xtype: 'datefield',
+                    cmpParams: {
+                        anchor: '100%',
+                        xtype: 'datefield',
+                        fieldLabel: 'Дата поле',
+                    },
+                };
+                break;
+            }
+        },
+
+        getDefaultData: function() {
+            return {
+                'cmpParams': {'xtype': 'container', 'layout': 'fit', 'flex': 1, 'dataId': Ext.id() + '-interface-node'},
+
+            };
+        },
+        getDefaultCmp: function(xtype) {
+            return {
+                'cmpParams': {
+                    'layout': 'fit',
+                    'flex': 1,
+                    'xtype': xtype || 'container',
+                },
+            };
+        },
+        onSettingsCmpClick(panel) {
+            const window = Ext.create('Coon.uielement.component.UiCPVisualEditorConfigWindow', {
+                'parentPanel': panel,
+                'parentController': this,
+            });
+            window.show();
+        },
+        getValueJson: function(str) {
+            try {
+                return JSON5.parse(str);
+            } catch (e) {
+                return str;
+            }
+        },
+        valueIsValidJson: function(str) {
+            try {
+                return JSON5.parse(str);
+            } catch (e) {
+                return false;
+            }
+        },
+        onAddReportCmpClick: function(panel) {
+            const me = this;
+            Ext.create('Ext.window.Window', {
+                height: '80%',
+                width: 700,
+                layout: 'fit',
+                closeAction: 'destroy',
+                modal: true,
+                resizable: false,
+                minimazible: false,
+                maximazible: false,
+
+                items: [
+                    {
+                        xtype: 'grid',
+                        store: {
+                            type: 'json',
+                            pageSize: 0,
+                        },
+                        listeners: {
+                            itemdblclick: function(element, record) {
+                                const reportCfg = me.getDefaultCmp('ReportPanel');
+                                reportCfg.cmpParams.reportId = record.get('CM_REPORT_CD');
+                                panel.cmpParams = reportCfg.cmpParams;
+                                me.reloadView();
+                                element.up('window').close();
+                            },
+                            render: function(grid) {
+                                Promise.all([
+                                    Ext.Ajax.request({
+                                        url: 'ReportFormData/get',
+                                        method: 'POST',
+                                        params: {
+                                            reportId: 'REPORTS',
+                                            parameterList: '[]',
+                                        },
+                                    })
+                                ]).then(function(valArray) {
+                                    const panels = Ext.decode(valArray[0].responseText).list;
+                                    const data = panels.map((item) => {
+                                        return {
+                                            'CM_REPORT_CD': item.CM_REPORT_CD,
+                                            'DESCR': item.DESCR,
+                                        };
+                                    });
+                                    grid.getStore().loadData(data);
+                                });
+                            },
+                        },
+                        plugins: [
+                            {ptype: 'gridfilterbar', clicksToEdit: 2}
+                        ],
+                        columns: [
+                            {
+                                dataIndex: 'CM_REPORT_CD', text: 'Наименование', flex: 1, filter: {type: 'string'},
+                            },
+                            {dataIndex: 'DESCR', text: 'Описание', flex: 2, filter: {type: 'string'}}
+
+                        ],
+                    }
+                ],
+                buttons: [{
+                    text: 'Закрыть',
+                    handler: (elem) => elem.up('window').close(),
+                }],
+            }).show();
+        },
+        getDataFromTemplateObj: function(template) {
+
+        },
+        onAddExistingPanelCmpClick: function(panel) {
+            const me = this;
+            Ext.create('Ext.window.Window', {
+                height: '80%',
+                width: 700,
+                layout: 'fit',
+                closeAction: 'destroy',
+                modal: true,
+                resizable: false,
+                minimazible: false,
+                maximazible: false,
+
+                items: [
+                    {
+                        xtype: 'grid',
+                        store: {
+                            type: 'json',
+                            pageSize: 0,
+                        },
+                        listeners: {
+                            itemdblclick: function(element, record) {
+                                const command = Ext.create('command.GetUIElementCommand');
+                                command.on('complete', function(UIElementBean) {
+                                    const value = me.valueIsValidJson(UIElementBean.propertyData);
+                                    if (!value) {
+                                        Ext.Msg.alert('Ошибка', 'Не корректный JSON объект');
+                                        return false;
+                                    }
+                                    try {
+                                        const check = Ext.create('Ext.panel.Panel', value);
+                                        check.destroy();
+                                    } catch (e) {
+                                        element.up('window').close();
+                                        Ext.Msg.alert('Ошибка', e.message);
+                                        return false;
+                                    }
+                                    panel.removeAll(true);
+                                    if (value && value.plugins && value.plugins.length) {
+                                        panel.cmpParams.mainPlugins = value.plugins;
+                                        delete value['plugins'];
+                                    }
+                                    const content = me.getTemplate([value]);
+                                    panel.add(content);
+                                    me.reloadView();
+                                    element.up('window').close();
+                                    /*
+                                    */
+                                }, this);
+                                command.execute(record.get('CM_REPORT_CD'));
+                            },
+                            render: function(grid) {
+                                Promise.all([
+                                    Ext.Ajax.request({
+                                        url: 'ReportFormData/get',
+                                        method: 'POST',
+                                        params: {
+                                            reportId: 'UI_CUSTOM_PANELS_LIST',
+                                            parameterList: '[]',
+                                        },
+                                    })
+                                ]).then(function(valArray) {
+                                    const panels = Ext.decode(valArray[0].responseText).list;
+                                    const data = panels.map((item) => {
+                                        return {
+                                            'CM_REPORT_CD': item.UI_ELEMENT_CD,
+                                            'DESCR': item.DESCR,
+                                        };
+                                    });
+                                    grid.getStore().loadData(data);
+                                });
+                            },
+                        },
+                        plugins: [
+                            {ptype: 'gridfilterbar', clicksToEdit: 2}
+                        ],
+                        columns: [
+                            {
+                                dataIndex: 'CM_REPORT_CD', text: 'Наименование', flex: 1, filter: {type: 'string'},
+                            },
+                            {dataIndex: 'DESCR', text: 'Описание', flex: 2, filter: {type: 'string'}}
+
+                        ],
+                    }
+                ],
+                buttons: [{
+                    text: 'Закрыть',
+                    handler: (elem) => elem.up('window').close(),
+                }],
+            }).show();
+        },
+    },
+    items: [
+        {
+            xtype: 'panel',
+            region: 'center',
+            flex: 4,
+            layout: 'fit',
+            header: false,
+            dataId: 'editorPanel',
+            split: true,
+        },
+        {
+            xtype: 'treepanel',
+            store: {
+                type: 'tree',
+                rootVisible: false,
+                root: {
+                    expanded: true,
+                    children: [],
+                },
+            },
+            title: 'Структура',
+            cls: 'tree-container',
+            collapsible: true,
+            region: 'east',
+            flex: 1,
+            dataId: 'treeEditorPanel',
+            listeners: {
+                'selectionchange': 'onTreeSelectionChange',
+                'itemcontextmenu': 'onTreeItemContextMenu',
+            },
+        }
+    ],
+    listeners: {
+        render: 'onRenderMainPanel',
+    },
+});

package/src/uielement/component/UiCPVisualEditor.scss

@@ -0,0 +1,108 @@
+.UiCPVisualEditor {
+  .x-grid-cell-inner .x-btn {
+    padding: 0;
+  }
+
+  .widget-box {
+    border: 2px solid #e0e0e0;
+    margin: 10px 20px;
+    padding: 7px;
+    border-radius: 10px;
+  }
+
+  /*-------------*/
+  .borders {
+    margin: 0 3px 15px 3px !important;
+    box-shadow: 0 1px 6px 0 rgba(86, 112, 163, 0.2);
+  }
+
+  .borders > .x-panel-bodyWrap > .x-panel-body {
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 0 0 5px 5px;
+    margin-top: -1px;
+  }
+
+  .no-header-panel .x-panel-bodyWrap > .x-panel-body {
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 5px;
+    margin-top: 0;
+  }
+
+  .borders .x-panel-header {
+    border-radius: 5px 5px 0 0;
+    height: auto;
+  }
+
+  .draggable-element {
+    width: 100px;
+    height: 100px;
+    background-color: #e0e0e0;
+  }
+
+
+  .btn i {
+    color: #FFF;
+    font-style: normal;
+  }
+
+
+  .icon {
+    font-size: 18px;
+    display: block;
+    text-align: center;
+    margin-top: 6px;
+  }
+
+
+  .btn {
+    &:hover {
+      background-color: rgba(61, 103, 128, 1) !important;
+    }
+
+    width: 30px;
+    height: 30px;
+    background-color: rgba(61, 103, 128, 0.7);
+    border-radius: 18px;
+    cursor: pointer;
+    z-index: 999;
+  }
+
+  .center-btn {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin: -12px 0 0 -11px;
+  }
+
+  .right-top-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 1px 0 0 0;
+  }
+
+  .hidden-btn {
+    display: none !important;
+  }
+
+  .borders-default {
+    border: 1px solid black;
+  }
+
+  .hover-item {
+    border: 1px solid red;
+  }
+
+  .tree-container .x-panel-body{
+    background-color: #f0f0f0;
+  }
+}
+
+.menu-tip .x-tool-close {
+  background-color: #111111 !important;
+}
+
+.svg-icon-tool {
+  background-color: white !important;
+}
+

package/src/uielement/component/UiCPVisualEditorConfigWindow.js

@@ -0,0 +1,303 @@
+Ext.define('Coon.uielement.component.UiCPVisualEditorConfigWindow', {
+    extend: 'Ext.window.Window',
+    cls: 'UiCPVisualEditorConfigWindow',
+    alias: 'widget.UiCPVisualEditorConfigWindow',
+    xtype: 'UiCPVisualEditorConfigWindow',
+    title: 'Настройки компонента',
+    width: 500,
+    height: '80%',
+    layout: 'fit',
+    closeAction: 'destroy',
+    requires: [
+        'Coon.uielement.component.settings.UiAceEditor'
+    ],
+    controller: {
+        parentCfgLocalState: {},
+
+        init: function(view) {
+            this.initParentCfgLocalState();
+            this.loadGrid();
+        },
+        initParentCfgLocalState: function() {
+            const view = this.getView();
+            view.parentPanel.successUserEditingOptions.map((option) => {
+                const valueObj = this.getOptionValue(option);
+                const value = Object.keys(valueObj).length ? valueObj[Object.keys(valueObj)[0]] : null;
+                if (value !== null && typeof value === 'object') {
+                    if (typeof this.parentCfgLocalState[Object.keys(valueObj)[0]] !== 'object') {
+                        this.parentCfgLocalState[Object.keys(valueObj)[0]] = {};
+                    }
+                    Ext.apply(this.parentCfgLocalState[Object.keys(valueObj)[0]], value);
+                } else {
+                    if (value !== '' && value !== null && typeof value !== 'undefined') {
+                        Ext.apply(this.parentCfgLocalState, valueObj);
+                    }
+                }
+            });
+            Ext.applyIf(this.parentCfgLocalState, view.parentPanel.cmpParams);
+            delete this.parentCfgLocalState['dataId'];
+        },
+        loadGrid: function() {
+            const view = this.getView();
+            view.down('grid').getStore().loadData(view.parentPanel.successUserEditingOptions.map((option) => {
+                return Ext.apply({
+                    'id': option.name,
+                    'group': option.group || '',
+                    'description': option.description,
+                    'type': option.type,
+                    'options': this.getOptions(option),
+                }, this.getOptionValue(option, true));
+            }));
+        },
+        findDefaultOptionName: function(group) {
+            if (!group) {
+                return '';
+            }
+            const defaultOption = this.getView().parentPanel.successUserEditingOptions.find((item) => {
+                if (item.group === 'group' && item.defaultOption === true) {
+                    return item;
+                }
+            });
+            return defaultOption ? defaultOption.name : false;
+        },
+        getOptionValue: function(option, local) {
+            const objCfg = local ? this.parentCfgLocalState : this.getView().parentPanel;
+            const returnVariable = local ? 'value' : option.name;
+            const returningObj = {};
+            let value = null;
+            let isGroupOption = false;
+            if (typeof option.group !== 'undefined' && option.group) {
+                isGroupOption = true;
+                if (typeof objCfg[option.group] === 'undefined') {
+                    return {};
+                }
+                if (typeof objCfg[option.group][option.name] !== 'undefined') {
+                    value = objCfg[option.group][option.name];
+                } else {
+                    if (option.name === this.findDefaultOptionName(option.group)) {
+                        value = objCfg[option.group];
+                    } else {
+                        return {};
+                    }
+                }
+            } else {
+                if (typeof objCfg[option.name] === 'undefined') {
+                    return {};
+                }
+                value = objCfg[option.name];
+            }
+            switch (option.type) {
+            case 'int':
+            case 'integer':
+                returningObj[returnVariable] = Math.round(value) || null;
+                break;
+            case 'number':
+            case 'float':
+                returningObj[returnVariable] = Number(value) || null;
+                break;
+            case 'combo':
+                returningObj[returnVariable] = value || null;
+                break;
+            default:
+                returningObj[returnVariable] = value;
+            }
+            if (isGroupOption && !local) {
+                const tmpObj = {};
+                tmpObj[option.group] = returningObj;
+                return tmpObj;
+            }
+            return returningObj;
+        },
+        getOptions: function(option) {
+            if (option.type === 'bool') {
+                return ['true', 'false'];
+            }
+            if (option.options && option.options.length) {
+                return option.options;
+            }
+            return [];
+        },
+        onClose: function() {
+            this.getView().close();
+        },
+        applyGridChanges: function() {
+            this.getView().down('grid').getStore().getModifiedRecords().map((record) => {
+                const value = record.get('value');
+                const key = record.get('id');
+                const group = record.get('group');
+                if (value === null || value === '' || typeof value === 'undefined') {
+                    if (group) {
+                        if (typeof this.parentCfgLocalState[group][key] !== 'undefined') {
+                            delete this.parentCfgLocalState[group][key];
+                        }
+                    } else {
+                        if (typeof this.parentCfgLocalState[key] !== 'undefined') {
+                            delete this.parentCfgLocalState[key];
+                        }
+                    }
+                } else {
+                    if (group) {
+                        this.parentCfgLocalState[group][key] = value;
+                    } else {
+                        this.parentCfgLocalState[key] = value;
+                    }
+                }
+            });
+        },
+        applyEditorChanges: function() {
+            const aceEditor = this.getView().down('UiAceEditor');
+            const value = aceEditor.getValue();
+            if (aceEditor.hasErrors()) {
+                Ext.Msg.alert('Ошибка', 'В редакторе присутствуют ошибки.');
+                return false;
+            }
+            if (!this.valueIsValidJson(value)) {
+                Ext.Msg.alert('Ошибка', 'Не корректный JSON объект');
+                return false;
+            }
+            this.parentCfgLocalState = this.getValueJson(value);
+            return true;
+        },
+        getValueJson: function(str) {
+            try {
+                return JSON5.parse(str);
+            } catch (e) {
+                return str;
+            }
+        },
+        valueIsValidJson: function(str) {
+            try {
+                return JSON5.parse(str);
+            } catch (e) {
+                return false;
+            }
+        },
+        onApply: function() {
+            const view = this.getView();
+            const tab = this.getView().down('tabpanel').getActiveTab();
+            if (tab.xtype === 'UiAceEditor') {
+                if (!this.applyEditorChanges()) {
+                    return false;
+                }
+            } else {
+                this.applyGridChanges();
+            }
+            view.parentPanel.cmpParams = {'dataId': view.parentPanel.cmpParams['dataId']};
+            Ext.apply(view.parentPanel.cmpParams, this.parentCfgLocalState);
+            view.parentController.reloadView();
+            view.close();
+        },
+        onBeforeTabChange: function(tabPanel, newCard, oldCard, eOpts) {
+            if (newCard.xtype !== 'UiAceEditor') {
+                const aceEditor = tabPanel.down('UiAceEditor');
+                const value = aceEditor.getValue();
+                if (aceEditor.hasErrors()) {
+                    Ext.Msg.alert('Ошибка', 'В редакторе присутствуют ошибки.');
+                    return false;
+                }
+                if (!this.valueIsValidJson(value)) {
+                    Ext.Msg.alert('Ошибка', 'Не корректный JSON объект');
+                    return false;
+                }
+            }
+        },
+        onTabChange: function(panel, tab) {
+            if (tab.xtype === 'UiAceEditor') {
+                this.applyGridChanges();
+                tab.setValue(JSON.stringify(this.parentCfgLocalState, null, 2));
+            } else {
+                this.applyEditorChanges();
+                this.loadGrid();
+            }
+        },
+    },
+    items: [
+        {
+            xtype: 'tabpanel',
+            listeners: {
+                'tabchange': 'onTabChange',
+                'beforetabchange': 'onBeforeTabChange',
+            },
+            items: [
+                {
+                    xtype: 'grid',
+                    title: 'Таблица',
+                    store: {
+                        fields: ['id', 'description', 'type', 'options', 'value', 'group'],
+                        groupField: 'group',
+                        data: [],
+                    },
+                    features: [{ftype: 'grouping', groupHeaderTpl: '{name}', collapsible: false}],
+                    columns: [
+                        {dataIndex: 'description', text: 'Наименование', flex: 1, filter: {type: 'string'}},
+                        {
+                            dataIndex: 'value', text: 'Значение', flex: 1, getEditor: function(record) {
+                                switch (record.get('type')) {
+                                case 'bool':
+                                case 'boolean':
+                                    return Ext.create('Ext.grid.CellEditor', {
+                                        field: Ext.create('Ext.form.field.ComboBox', {
+                                            forceSelection: true,
+                                            store: [[true, 'true'], [false, 'false']],
+                                        }),
+                                    });
+                                    break;
+                                case 'int':
+                                case 'integer':
+                                    return Ext.create('Ext.grid.CellEditor', {
+                                        field: Ext.create('Ext.form.field.Number', {
+                                            allowDecimals: false,
+                                            minValue: 0,
+                                        }),
+                                    });
+                                    break;
+                                case 'number':
+                                case 'float':
+                                    return Ext.create('Ext.grid.CellEditor', {
+                                        field: Ext.create('Ext.form.field.Number', {
+                                            allowDecimals: true,
+                                            minValue: 0,
+                                        }),
+                                    });
+                                    break;
+                                case 'text':
+                                case 'string':
+                                    return Ext.create('Ext.grid.CellEditor', {
+                                        field: Ext.create('Ext.form.field.Text', {}),
+                                    });
+                                    break;
+                                case 'combo':
+                                    return Ext.create('Ext.grid.CellEditor', {
+                                        field: Ext.create('Ext.form.field.ComboBox', {
+                                            forceSelection: true,
+                                            store: record.get('options').map((option) => {
+                                                return [option, option];
+                                            }),
+                                        }),
+                                    });
+                                    break;
+                                }
+                            },
+                        }
+                    ],
+                    plugins: {
+                        cellediting: {
+                            clicksToEdit: 2,
+                        },
+                    },
+                },
+                {
+                    xtype: 'UiAceEditor',
+                    flex: true,
+                    scrollable: 'y',
+                    title: 'PRO',
+                }
+            ],
+        }
+
+    ],
+    buttons: [
+        {text: 'Применить', handler: 'onApply'},
+        {text: 'Отмена', handler: 'onClose'}
+    ],
+});

package/src/version.js

@@ -1,4 +1,4 @@
 Ext.define('Coon.version', {
     singleton: true,
-    number: '2.5.64',
+    number: '2.5.65',
 });