ru.coon 2.6.6 → 2.6.7

package/src/common/component/formeditor/UiCustomFormEditor.js

@@ -0,0 +1,191 @@
+/* global Ext */
+Ext.define('Coon.common.component.formeditor.UiCustomFormEditor', {
+    extend: 'Ext.panel.Panel',
+    controller: 'UiCustomFormEditorController',
+    xtype: 'UiCustomFormEditor',
+    layout: 'border',
+    cls: 'UiCustomFormEditor',
+    viewModel: {
+        data: {
+            viewMode: false,
+            focusedField: null,
+            activeForm: 0,
+            focusedFieldXType: null,
+            UI_ELEMENT_CD: null,
+            description: null,
+        },
+        stores: {
+            configStore: {
+                type: 'json',
+                data: [],
+                fields: ['key', 'type', 'property', 'visible', 'title', 'description'],
+            },
+            typeStore: {
+                type: 'json',
+                data: [{key: 'text'}, {key: 'int'}, {key: 'bool'}, {key: 'date'}, {key: 'dateFormat'},
+                    {key: 'timeFormat'}, {key: 'timeTextFormat'}, {key: 'reportsList'},
+                    {key: 'cards'}, {key: 'radio'}, {key: 'segmented'}, {key: 'allowedExtensions'}, {key: 'reportField'}],
+                fields: ['key'],
+            },
+        },
+    },
+    items: [
+        {
+            xtype: 'UiCFContainer',
+            region: 'center',
+            scrollable: 'y',
+            flex: 1,
+        },
+        {
+            reference: 'settingsPanel',
+            layout: 'card',
+            xtype: 'panel',
+            items: [
+                {
+                    xtype: 'form',
+                    reference: 'settingsForm',
+                    layout: 'anchor',
+                    scrollable: 'y',
+                    bodyPadding: 5,
+                    defaults: {
+                        anchor: '100%',
+                    },
+                    items: [],
+                    buttons: [
+                        {
+                            text: 'Применить',
+                            ui: 'orange-button',
+                            flex: 1,
+                            handler: 'applySettings',
+                            disabled: true,
+                            bind: {
+                                disabled: '{!focusedField}',
+                            },
+                        }
+                    ],
+                },
+                {
+                    xtype: 'panel',
+                    layout: 'fit',
+                    items: [
+                        {
+                            xtype: 'grid',
+                            buttons: [{
+                                text: 'Применить',
+                                ui: 'orange-button',
+                                flex: 1,
+                                handler: 'applyXTypeSettings',
+                                disabled: true,
+                                bind: {
+                                    disabled: '{!focusedField}',
+                                },
+                            }],
+                            reference: 'configGrid',
+                            bind: {
+                                store: '{configStore}',
+                            },
+                            columns: [
+                                {text: 'Вкл.', dataIndex: 'visible', xtype: 'checkcolumn', filter: {type: 'boolean'}},
+                                {text: 'Переменная', dataIndex: 'property', flex: 1, filter: {type: 'string'}},
+                                {
+                                    text: 'Тип',
+                                    dataIndex: 'type',
+                                    editor: {
+                                        xtype: 'combo',
+                                        bind: {
+                                            store: '{typeStore}',
+                                        },
+                                        queryMode: 'local',
+                                        displayField: 'key',
+                                        valueField: 'key',
+                                    },
+                                    flex: 1,
+                                },
+                                {text: 'Заголовок', dataIndex: 'title', editor: {xtype: 'textfield'}, flex: 1, filter: {type: 'string'}},
+                                {text: 'Описание', dataIndex: 'description', editor: {xtype: 'textfield'}, flex: 1}
+                            ],
+                            plugins: [
+                                {ptype: 'cellediting', clicksToEdit: 2},
+                                {ptype: 'gridfilterbar'}
+                            ],
+                        }
+                    ],
+                }
+            ],
+            animCollapse: 100,
+            region: 'east',
+            width: 500,
+            collapsible: true,
+            collapseDirection: 'right',
+            hideCollapseTool: true,
+            collapseMode: 'header',
+            collapsed: true,
+            header: {
+                iconCls: 'x-fa fa-th',
+                title: 'Настройки',
+            },
+            bind: {
+                activeItem: '{activeForm}',
+            },
+            tools: [
+                {
+                    iconCls: 'fa fa-eye',
+                    hidden: true,
+                    bind: {
+                        hidden: '{viewMode === true}',
+                    },
+                    callback: function(view) {
+                        view.up('UiCustomFormEditor').getViewModel().set('viewMode', true);
+                    },
+                },
+                {
+                    iconCls: 'fa fa-eye-slash',
+                    hidden: true,
+                    bind: {
+                        hidden: '{viewMode === false}',
+                    },
+                    callback: function(view) {
+                        view.up('UiCustomFormEditor').getViewModel().set('viewMode', false);
+                    },
+                },
+                {
+                    iconCls: 'fa fa-cogs', // Reply icon
+                    bind: {
+                        hidden: '{activeForm !== 0}',
+                    },
+                    callback: function(view) {
+                        view.up('UiCustomFormEditor').getViewModel().set('activeForm', 1);
+                    },
+                },
+                {
+                    iconCls: 'fa fa-reply', // Reply icon
+                    hidden: true,
+                    bind: {
+                        hidden: '{activeForm !== 1}',
+                    },
+                    callback: function(view) {
+                        view.up('UiCustomFormEditor').getViewModel().set('activeForm', 0);
+                    },
+                },
+                {
+                    type: 'pin',
+                    itemId: 'pinned',
+                    callback(view, tool) {
+                        if (tool.type === 'pin') {
+                            tool.setType('unpin');
+                        } else {
+                            tool.setType('pin');
+                        }
+                        const pinned = tool.type === 'unpin';
+                        view.up('UiCustomFormEditor').getController().setPinned(pinned);
+                        Ext.state.Manager.getProvider().set('settingsPanel', {pinned});
+                    },
+                }
+
+            ],
+            listeners: {
+                render: 'onSettingsRender',
+            },
+        }
+    ],
+});

package/src/common/component/formeditor/UiCustomFormEditor.scss

@@ -0,0 +1,13 @@
+.UiCustomFormEditor{
+  .selectedField{
+    border-radius: 2px;
+    border: 1px solid #c7eef5;
+  }
+  .UiCFContainer{
+    border-radius: 2px;
+    border: 1px solid #c7f5c8;
+  }
+  .cutCell{
+    border: 1px dashed red;
+  }
+}