ru.coon 2.7.3 → 2.7.4

package/src/report/plugin/configPanel/GridRowStylePluginConfig.js

@@ -18,15 +18,14 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfig', {
             ],
         },
     },
-
     getDefaults() {
         return {
-            selectBckColor: '#C0C0C0',
+            selectBckColor: 'rgba(192,192,192,1)',
             hoverBorderWidth: 1,
-            hoverBorderColor: '#CBCBCB',
+            hoverBorderColor: 'rgba(203,203,203,1)',
             hoverTextShadow: true,
             hoverStyleEnable: true,
-            hoverBackColor: false,
+            hoverBackColor: null,
         };
     },
 
@@ -40,12 +39,17 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfig', {
             },
         };
     },
-
+    onReadyChooseColorField(cmp) {
+        const props = cmp.up('ReportFormEditPanel').getViewModel().get('report.properties');
+        cmp.setHidden(!props.find((p) => p.key === 'isTree'));
+    },
     createItems: function() {
         this.grid = Ext.create('Coon.report.plugin.configPanel.GridRowStylePluginConfigPropertyGrid', {
             flex: 1,
             collapsible: true,
             titleCollapse: true,
+            maxHeight: 300,
+            title: 'Зависимости стилей от значения',
         });
 
         const fieldColumns = this.createFieldColumns({
@@ -92,48 +96,86 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfig', {
         }, this, {single: true});
 
         return [
-            {
-                layout: 'form',
-                labelWidth: 90,
-                items: [fieldColumns],
-            },
             {
                 xtype: 'panel',
-                collapsible: true,
-                titleCollapse: true,
-                title: 'Стилизация статусов',
-                bodyPadding: 8,
-                layout: {
-                    type: 'vbox',
-                    align: 'stretch',
+                flex: 1,
+                layout: 'anchor',
+                defaults: {
+                    anchor: '100%',
                 },
-                defaults: {margin: 8, flex: 1},
+                scrollable: 'y',
                 items: [
                     {
-                        xtype: 'withdefault',
-                        field: {
-                            xtype: 'colorfield',
-                            name: 'selectBckColor',
-                            format: 'rgba',
-                            labelAlign: 'top',
-                            fieldLabel: 'цвет фона выбранных строк',
+                        xtype: 'fieldset',
+                        checkboxToggle: true,
+                        checked: true,
+                        title: 'Стили строки в зависимости от поля и его значений',
+                        layout: 'anchor',
+                        defaults: {
+                            anchor: '100%',
                         },
-                        defaultValue: this.getDefaults().selectBckColor,
+                        items: [
+                            {
+                                layout: 'form',
+                                labelWidth: 90,
+                                items: [fieldColumns],
+                            },
+                            this.grid
+                        ],
+                    },
+                    {
+                        xtype: 'container',
+                        layout: {
+                            type: 'hbox',
+                            align: 'stretch',
+                        },
+                        margin: '10px 0 10px 10px',
+                        items: [
+                            {
+                                xtype: 'withdefault',
+                                flex: 1,
+
+                                field: {
+                                    xtype: 'ChooseColorField',
+                                    hideClearTrigger: true,
+                                    flex: 1,
+                                    name: 'selectBckColor',
+                                    fieldLabel: 'Цвет фона выбранных строк',
+                                },
+                                defaultValue: this.getDefaults().selectBckColor,
+                            },
+                            {
+                                xtype: 'ChooseColorField',
+                                gradient: true,
+                                // hidden: true,
+                                flex: 1,
+                                reference: 'treeNodesColors',
+                                listeners: {
+                                    'render': this.onReadyChooseColorField,
+                                },
+                                name: 'treeNodesColors',
+                                fieldLabel: 'Цвета раскрытых узлов дерева',
+                            }
+                        ],
                     },
+
                     {
                         xtype: 'fieldset',
                         checkboxToggle: true,
                         checkbox: {name: 'hoverStyleEnable'},
-                        title: 'стиль строки при наведении курсора мыши',
-                        layout: 'vbox',
+                        title: 'Стили строки при наведении курсора мыши',
+                        layout: {
+                            type: 'vbox',
+                            align: 'stretch',
+                        },
+                        defaults: {flex: 1},
                         items: [
                             {
                                 xtype: 'withdefault',
                                 field: {
-                                    xtype: 'colorfield',
+                                    xtype: 'ChooseColorField',
+                                    flex: 1,
                                     name: 'hoverBackColor',
-                                    format: 'rgba',
-                                    labelAlign: 'top',
                                     fieldLabel: 'цвет фона',
                                 },
                                 defaultValue: this.getDefaults().hoverBackColor,
@@ -150,12 +192,13 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfig', {
                                     type: 'hbox',
                                     align: 'stretch',
                                 },
-                                defaults: {margin: '4 8', labelAlign: 'top'},
+                                defaults: {margin: '4 8', labelAlign: 'top', flex: 1},
                                 items: [
                                     {
                                         xtype: 'withdefault',
                                         field: {
                                             xtype: 'numberfield',
+                                            flex: 1,
                                             name: 'hoverBorderWidth',
                                             minValue: 0,
                                             maxValue: 4,
@@ -167,10 +210,10 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfig', {
                                     {
                                         xtype: 'withdefault',
                                         field: {
-                                            xtype: 'colorfield',
+                                            xtype: 'ChooseColorField',
+                                            flex: 1,
                                             name: 'hoverBorderColor',
-                                            hideTrigger: true,
-                                            format: 'rgba',
+                                            hideClearTrigger: true,
                                             fieldLabel: 'цвет рамки',
                                         },
                                         defaultValue: this.getDefaults().hoverBorderColor,
@@ -178,70 +221,63 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfig', {
                                 ],
                             }
                         ],
-                    }
-                ],
-            },
-
-            this.grid,
-
-            {
-                xtype: 'grid',
-                collapsible: true,
-                titleCollapse: true,
-                plugins: [
-                    {
-                        ptype: 'cellediting',
-                        clicksToEdit: 1,
-                    }
-                ],
-                title: 'Стилизация колонок',
-                columns: [
-                    {
-                        header: 'Поле',
-                        dataIndex: 'columnName',
-                        editor: false,
-                        flex: 3,
-                        renderer(value, meta) {
-                            const {record} = meta;
-                            meta.tdStyle = pluginClass.getStyleString(record.getData());
-                            return value;
-                        },
                     },
                     {
-                        header: 'Цвет текста',
-                        dataIndex: 'txt',
-                        editor: {
-                            xtype: 'colorfield',
-                            allowBlank: true,
-                            triggers: {
-                                clear: this.getColorFieldClearTrigger(),
-                                picker: {
-                                    hidden: true,
-                                },
-                            },
-                            format: 'rgba',
-                        },
-                        flex: 1,
-                    },
-                    {
-                        header: 'Цвет фона',
-                        dataIndex: 'bg',
-                        editor: {
-                            xtype: 'colorfield',
-                            allowBlank: true,
-                            triggers: {
-                                clear: this.getColorFieldClearTrigger(),
-                                picker: {
-                                    hidden: true,
-                                },
-                            },
-                            format: 'rgba',
+                        xtype: 'fieldset',
+                        checkboxToggle: true,
+                        checked: true,
+                        title: 'Стили колонок',
+                        layout: 'anchor',
+                        defaults: {
+                            anchor: '100%',
                         },
-                        flex: 1,
+                        items: [
+                            {
+                                xtype: 'grid',
+                                maxHeight: 400,
+                                plugins: [
+                                    {
+                                        ptype: 'cellediting',
+                                        clicksToEdit: 1,
+                                    }
+                                ],
+                                columns: [
+                                    {
+                                        header: 'Поле',
+                                        dataIndex: 'columnName',
+                                        editor: false,
+                                        flex: 3,
+                                        renderer(value, meta) {
+                                            const {record} = meta;
+                                            meta.tdStyle = pluginClass.getStyleString(record.getData());
+                                            return value;
+                                        },
+                                    },
+                                    {
+                                        header: 'Цвет текста',
+                                        dataIndex: 'txt',
+                                        editor: {
+                                            xtype: 'ChooseColorField',
+                                            allowBlank: true,
+                                        },
+                                        flex: 1,
+                                    },
+                                    {
+                                        header: 'Цвет фона',
+                                        dataIndex: 'bg',
+                                        editor: {
+                                            xtype: 'ChooseColorField',
+                                            allowBlank: true,
+                                        },
+                                        flex: 1,
+                                    }
+                                ],
+                                store: this.columnColorsStore,
+                            }
+                        ],
                     }
+
                 ],
-                store: this.columnColorsStore,
-                flex: 1,
             }
         ];
     },

package/src/report/plugin/configPanel/GridRowStylePluginConfigPropertyGrid.js

@@ -15,7 +15,7 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfigPropertyGrid'
     initComponent: function() {
         this.plugins = [
             Ext.create('Coon.report.plugin.grid.CopyRowsFromGrid'),
-            {ptype: 'cellediting', clicksToEdit: 1}
+            {ptype: 'cellediting', clicksToEdit: 2}
         ];
 
         this.dockedItems = [{
@@ -103,35 +103,30 @@ Ext.define('Coon.report.plugin.configPanel.GridRowStylePluginConfigPropertyGrid'
         });
 
         const colorField = {
-            xtype: 'colorfield',
+            xtype: 'ChooseColorField',
             allowBlank: true,
-            hideTrigger: true,
-            bind: '{color}',
-            format: 'rgba',
         };
 
         const backgroundField = {
-            xtype: 'colorfield',
+            xtype: 'ChooseColorField',
             allowBlank: true,
-            hideTrigger: true,
-            bind: '{bgColor}',
-            format: 'rgba',
         };
 
         this.columns = {
             items: [
-                {header: 'Значение', dataIndex: ns.$value, xtype: 'hintColumn', editor: variableEditor},
-                {header: 'Цвет', dataIndex: ns.$color, xtype: 'hintColumn', editor: colorField, width: 150},
-                {header: 'Ссылки в цвет', dataIndex: ns.$linkColor, xtype: 'checkcolumn', editable: true,
-                    tooltip: 'Красит все ссылки строки в цвет текста'},
-                {header: 'Фон', dataIndex: ns.$background, xtype: 'hintColumn', editor: backgroundField, width: 150},
+                {header: 'Значение', flex: 1, dataIndex: ns.$value, xtype: 'hintColumn', editor: variableEditor},
+                {header: 'Цвет', flex: 1, dataIndex: ns.$color, xtype: 'hintColumn', editor: colorField},
+                {
+                    header: 'Ссылки в цвет', dataIndex: ns.$linkColor, xtype: 'checkcolumn', editable: true,
+                    tooltip: 'Красит все ссылки строки в цвет текста',
+                },
+                {header: 'Фон', flex: 1, dataIndex: ns.$background, xtype: 'hintColumn', editor: backgroundField},
                 {header: 'Жирным', dataIndex: ns.$bold, xtype: 'checkcolumn', editable: true},
                 {header: 'Наклонно', dataIndex: ns.$italic, xtype: 'checkcolumn', editable: true},
                 {header: 'С подчеркиванием', dataIndex: ns.$underline, xtype: 'checkcolumn', editable: true}
             ],
             defaults: {
                 sortable: true,
-                width: 100,
             },
         };
         this.callParent();

package/src/report/plugin/grid/GridEditorsPlugin.js

@@ -31,7 +31,6 @@ Ext.define('Coon.report.plugin.grid.GridEditorsPlugin', {
 
     init: function(grid) {
         this.grid = grid;
-        this.grid.getStore().on('load', this.setEditors, this);
         this.grid.on('afterrender', this.setEditors, this);
     },
 
@@ -55,27 +54,34 @@ Ext.define('Coon.report.plugin.grid.GridEditorsPlugin', {
                 }
                 const dependsOnFieldName = editorObj['dependsOnField'] && editorObj['dependsOnFieldName'];
                 const needComboRenderer = editor.isXType('BaseComboBox') && column.useComboRenderer !== false;
-                const renderFunction = (value, metaData, record) => {
-                    let editable = true;
-                    if (editorObj['dependsOnField'] && editorObj['dependsOnFieldName']) {
-                        const dependsOnFieldName = editorObj['dependsOnFieldName'];
-                        const invertValue = editorObj['invertValue'];
-                        editable = invertValue === !record.get(dependsOnFieldName);
-                        record.allowEditWithEditorPlugin = editable;
-                        if (editorObj['highlightEditableCells']) {
-                            metaData.tdCls = editable ? 'editable-cell' : 'hover-cell';
-                        }
-                    }
-                    if (editor.isXType('BaseComboBox') && column.useComboRenderer !== false) {
-                        Coon.format.comboRenderer(editor, column.renderer && column.renderer.customStyle);
-                    }
-                    hasEditor.on('beforeedit', function(editor, context) {
-                        return context.record.allowEditWithEditorPlugin;
-                    }, this);
-                    return value;
-                };
                 if (dependsOnFieldName || needComboRenderer) {
-                    column.renderer = renderFunction;
+                    const customStyle = column.renderer && column.renderer.customStyle;
+                    column.renderer = (value, metaData, record) => {
+                        let editable = true;
+                        if (editorObj['dependsOnField'] && editorObj['dependsOnFieldName']) {
+                            const dependsOnFieldName = editorObj['dependsOnFieldName'];
+                            const invertValue = editorObj['invertValue'];
+                            editable = invertValue === !record.get(dependsOnFieldName);
+                            record.allowEditWithEditorPlugin = editable;
+                            if (editorObj['highlightEditableCells']) {
+                                metaData.tdCls = editable ? 'editable-cell' : 'hover-cell';
+                            }
+                            hasEditor.on('beforeedit', function(editor, context) {
+                                return context.record.allowEditWithEditorPlugin;
+                            }, this);
+                        }
+                        if (typeof customStyle === 'string') {
+                            metaData.tdStyle = customStyle;
+                        }
+                        if (needComboRenderer) {
+                            editor.store.clearFilter();
+                            const editorRecord = editor.findRecord(editor.valueField, value);
+                            return editorRecord ? editorRecord.get(editor.displayField) : editor.valueNotFoundText;
+                        } else {
+                            return value;
+                        }
+                    };
+                    column.renderer.customStyle = customStyle;
                 }
             }
         }

package/src/report/plugin/grid/GridRowStylePlugin.js

@@ -28,6 +28,7 @@ Ext.define('Coon.report.plugin.grid.GridRowStylePlugin', {
         hoverStyleEnable: false,
         hoverBorderColor: false,
         hoverBackColor: false,
+        treeNodesColors: false,
     },
 
     styleId: 'gridRowStylePluginCSS',
@@ -180,7 +181,87 @@ Ext.define('Coon.report.plugin.grid.GridRowStylePlugin', {
 
     classCache: new Map(),
 
+    getTreeFirstLevelElems() {
+        return this.grid.getRootNode().childNodes.filter((node) => node.isVisible && node.get('leaf') === false && node.isExpanded());
+    },
+    getLastLevelElems(node) {
+        let nodes = [];
+        if (node.get('leaf') === false && node.isExpanded()) {
+            if (node.hasChildNodes()) {
+                node.childNodes.forEach((item) => {
+                    const lowLevelElems = this.getLastLevelElems(item);
+                    if (Ext.isArray(lowLevelElems) && lowLevelElems.length) {
+                        nodes = nodes.concat(lowLevelElems);
+                    }
+                });
+                if (!nodes.length) {
+                    nodes.push(node);
+                }
+            }
+        }
+        return nodes;
+    },
+    applyStylesOnCollapse(node) {
+        if (!node.isRoot()) {
+            const el = this.grid.getView().getRow(node);
+            el.style.backgroundColor = null;
+        }
+    },
+    getRootColor() {
+        return this.treeNodesColors[4];
+    },
+    getLastExpandedColor() {
+        return this.treeNodesColors[6];
+    },
+    applyStylesOnExpand(node) {
+        if (node.parentNode) {
+            if (node.parentNode.isRoot()) {
+                this.grid.getView().getRow(node).setAttribute('style', `background-color: ${this.getRootColor()};`);
+                if (node.hasChildNodes()) {
+                    node.childNodes.forEach((item) => {
+                        if (item.get('leaf') === false && item.isExpanded()) {
+                            this.getLastLevelElems(item).forEach((rec) => {
+                                this.grid.getView().getRow(rec).setAttribute('style', `background-color: ${this.getLastExpandedColor()};`);
+                            });
+                        }
+                    });
+                }
+            } else {
+                if (node.hasChildNodes()) {
+                    let hasLast = false;
+                    node.childNodes.forEach((item) => {
+                        if (item.get('leaf') === false && item.isExpanded()) {
+                            this.getLastLevelElems(item).forEach((rec) => {
+                                hasLast = true;
+                                this.grid.getView().getRow(rec).setAttribute('style', `background-color: ${this.getLastExpandedColor()};`);
+                            });
+                        }
+                    });
+                    if (!hasLast) {
+                        this.grid.getView().getRow(node).setAttribute('style', `background-color: ${this.getLastExpandedColor()};`);
+                    }
+                }
+            }
+        }
+    },
+    applyStylesOnRefresh() {
+        const firstLevel = this.getTreeFirstLevelElems();
+        firstLevel.forEach((node) => {
+            this.grid.getView().getRow(node).setAttribute('style', `background-color: ${this.getRootColor()};`);
+            if (node.hasChildNodes()) {
+                node.childNodes.forEach((item) => {
+                    if (item.get('leaf') === false && item.isExpanded()) {
+                        this.getLastLevelElems(item).forEach((rec) => {
+                            this.grid.getView().getRow(rec).setAttribute('style', `background-color: ${this.getLastExpandedColor()};`);
+                        });
+                    }
+                });
+            }
+        });
+    },
+
     init: function(grid) {
+        this.grid = grid;
         const uniqCls = this.getConfigValue('gridUniqId').value;
         if (typeof grid.addCls === 'function') {
             grid.addCls('gridrowstyleplugin');
@@ -189,6 +270,15 @@ Ext.define('Coon.report.plugin.grid.GridRowStylePlugin', {
             }
             grid.addCls('gridrowstyleplugin');
         }
+        if (this.treeNodesColors !== false) {
+            const proto = Ext.ClassManager.classes[Ext.ClassManager.aliasToName['widget.'+grid.xtype]].prototype;
+            if (proto && proto.xtypesMap && proto.xtypesMap.treepanel === true) {
+                grid.on('itemexpand', this.applyStylesOnExpand, this);
+                grid.getView().on('refresh', this.applyStylesOnRefresh, this);
+                grid.on('itemcollapse', this.applyStylesOnCollapse, this);
+            }
+        }
+
         if (this.getColumnName() && this.getValueConfig().length) {
             const rules = this.createRules();
 

package/src/uielement/component/formchips/Chip.js

@@ -20,7 +20,7 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
         removeFilterCallback: undefined,
     },
     tpl: new Ext.XTemplate(
-        '<span class="chip-value">{value}</span>',
+        '<span class="chip-value">{rawValue}</span>',
         '<span class="closebtn">&times;</span>'
     ),
 
@@ -31,7 +31,7 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
 
     initComponent: function() {
         if (this.forRemoteSearch && this.data) {
-            this.originalValue = this.data.value;
+            this.originalValue = this.data.rawValue;
         }
 
         this.configureCls();

package/src/uielement/component/formchips/FilterConditionToolbar.js

@@ -72,9 +72,10 @@ Ext.define('Coon.uielement.component.formchips.FilterConditionToolbar', {
     layout: {
         type: 'hbox', align: 'stretch',
     },
+    dock: 'bottom',
     listeners: {
         beforerender: 'initToolbar',
-        boxready: 'fillChipsHandler',
+        boxready: 'onReloadChipsHandler',
         show: 'fadeInHandler',
     },