ru.coon 2.8.65 → 3.0.2

package/src/report/plugin/grid/addFilterConditionPlugin/FilterItem.js

@@ -0,0 +1,164 @@
+Ext.define('Coon.report.plugin.grid.addFilterConditionPlugin.FilterItem', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.FilterItem',
+    requires: [
+        'Coon.report.plugin.grid.addFilterConditionPlugin.FilterFieldFactory'
+    ],
+    cls: 'FilterItem',
+    closable: true,
+    bodyPadding: '10 8',
+    margin: '0 10 4 10',
+    frame: true,
+    defaultListenerScope: true,
+    referenceHolder: true,
+    layout: {
+        type: 'hbox', align: 'stretch',
+    },
+    listeners: {
+        boxready: 'onReady',
+    },
+    bind: {
+        title: '{titleFormula}',
+    },
+    viewModel: {
+        data: {
+            filter: {},
+        },
+        formulas: {
+            titleFormula: {
+                get: function(data) {
+                    let columnGroup = Ext.isObject(data('filter')) && data('filter').columnGroup;
+                    columnGroup = Ext.isString(columnGroup) ? columnGroup.replaceAll(';', ' / ') + ' / ': '';
+                    return columnGroup + data('filter').columnName;
+                },
+            },
+            conditionHidden: {
+                get: function(data) {
+                    const filter = data('filter');
+                    return !!(Ext.isObject(filter) && ['list', 'boolean'].includes(filter.type));
+                },
+            },
+            valueToDisabled: {
+                bind: {
+                    bindTo: '{filter}',
+                    deep: true,
+                },
+                get: function(filter) {
+                    return !!(Ext.isObject(filter) && filter.operator!=='between');
+                },
+            },
+            notfilledDisabled: {
+                bind: {
+                    bindTo: '{filter}',
+                    deep: true,
+                },
+                get: function(filter) {
+                    return !!(Ext.isObject(filter) && filter.operator==='notfilled');
+                },
+            },
+        },
+    },
+
+    initComponent() {
+        this.factory = Ext.create('Coon.report.plugin.grid.addFilterConditionPlugin.FilterFieldFactory');
+        this.callParent();
+        this.getViewModel().bind('{filter.type}', function(type) {
+            if (typeof type === 'string') {
+                this.lookup('condition').getStore().setFilters({
+                    property: 'columnFilterType',
+                    value: type,
+                    operator: 'like',
+                });
+            }
+        }, this);
+        this.getViewModel().set({filter: this.filter});
+    },
+
+    getFilter() {
+        this.clearFilterValue();
+        return this.getViewModel().get('filter');
+    },
+
+    clearFilterValue() {
+        const operator = this.getViewModel().get('filter.operator');
+        if (operator === 'notfilled') {
+            this.getViewModel().set('filter.value', undefined);
+            this.getViewModel().set('filter.fromValue', undefined);
+        }
+    },
+
+    onReady() {
+        this.add(this.getItems());
+    },
+
+    getItems() {
+        return [
+            {
+                xtype: 'container',
+                reference: 'valueContainer',
+                flex: 2,
+                layout: {
+                    type: 'hbox', // align: 'stretch',
+                },
+                defaults: {flex: 1},
+                items: this.getFieldsByType(),
+            },
+            this.getConditions()
+        ];
+    },
+
+    getConditions() {
+        return Ext.create({
+            xtype: 'BaseComboBox',
+            reference: 'condition',
+            flex: 1,
+            fieldLabel: 'Условие',
+            forceSelection: true,
+            bind: {
+                value: '{filter.operator}',
+                hidden: '{conditionHidden}',
+            },
+            displayField: 'description',
+            valueField: 'value',
+            listeners: {
+                change: 'changeOperator',
+            },
+            store: {
+                fields: ['value', 'description'],
+                data: [
+                    {value: 'eq', description: 'равно', columnFilterType: 'numeric,date,string'},
+                    {value: 'ne', description: 'не равно', columnFilterType: 'numeric,date,string'},
+                    {value: 'notfilled', description: 'не заполнено', columnFilterType: 'numeric,date,string'},
+                    {value: 'between', description: 'от / до', columnFilterType: 'numeric,date'},
+                    {value: 'like', description: 'по части строки', columnFilterType: 'string'}
+                ],
+            },
+        });
+    },
+
+    changeOperator(combo, value) {
+        const container = this.lookup('valueContainer');
+        if (value) {
+            container.removeAll();
+            const fields = this.getFieldsByType();
+            const comps = container.add(
+                fields
+            );
+            this.fireEvent('fieldsadded', Array.isArray(comps) ? comps: [comps]);
+        }
+    },
+
+    getFieldsByType() {
+        const filter = this.getViewModel().get('filter');
+        const type = filter.type;
+        const operator = this.lookup('condition') && this.lookup('condition').getValue();
+        const booleanLabels = filter.booleanLabels;
+        const listData = filter.listData;
+        const useCombo = filter.useCombo && operator==='eq';
+        return this.factory.getFields(type, {booleanLabels, listData, useCombo});
+    },
+
+    isValid() {
+        return Coon.Function.validateAllFieldsOnForm(this);
+    },
+});

package/src/report/plugin/grid/addFilterConditionPlugin/FilterItem.scss

@@ -0,0 +1,21 @@
+.FilterItem {
+  .x-panel-header-title-default-framed > .x-title-text-default-framed {
+    color: #111111 !important;
+    font-size: 16px;
+
+  }
+  .x-panel-header-default-framed-top {
+    padding: 8px 8px 8px 8px;
+  }
+  .x-tool-tool-el {
+    width: 20px;
+    height: 20px;
+  }
+  .x-tool-img.x-tool-close {
+    background-color: #707070 !important;
+    min-height: 20px !important;
+    min-width: 20px !important;
+    mask-size: 20px;
+  }
+
+}

package/src/report/plugin/grid/addFilterConditionPlugin/FilterMenu.js

@@ -0,0 +1,29 @@
+/**
+ * В базовом меню Ext.menu.Menu шаблонный метод processFocusableContainerKeyEvent меняет
+ * поведение по нажатию TAB. По TAB и shift TAB работает навигация вверх/вниз по пунктам меню.
+ * В классе FilterMenu по нажатию TAB и shift+TAB требуется переход по полям формы, так как
+ * единственным пунктом этого меню является форма простого поиска.
+ */
+Ext.define('Coon.report.plugin.grid.addFilterConditionPlugin.FilterMenu', {
+    extend: 'Ext.menu.Menu',
+    alias: 'widget.FilterMenu',
+
+    privates: {
+        processFocusableContainerKeyEvent(e) {
+            // ESC may be from input fields, and FocusableContainers ignore keys from
+            // input fields. We do not want to ignore ESC. ESC hide menus.
+            if (e.keyCode === e.ESC) {
+                e.target = this.el.dom;
+            } else if (e.keyCode === e.TAB && Ext.fly(e.target).is('input[type=text],textarea')) {
+                if (!Ext.fly(e.target).isInputField()) {
+                    return e;
+                }
+                return undefined;
+            } else {
+                return this.callParent([e]);
+            }
+
+            return e;
+        },
+    },
+});

package/src/report/plugin/grid/addFilterConditionPlugin/FilterWrapPanel.js

@@ -0,0 +1,53 @@
+/**
+ * Панель, которая отображается в контекстном меню по пункту Поиск.
+ * В зависимости от типа фильтра колонки конструируется наполнение панели. Для каждого типа фильтра (string, boolean, date, list, numeric)
+ */
+Ext.define('Coon.report.plugin.grid.addFilterConditionPlugin.FilterWrapPanel', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.FilterWrapPanel',
+    cls: 'FilterWrapPanel',
+
+    viewModel: {
+        data: {
+            // Валидация кнопки 'Ok'. Поиск возможен, если поле фильтра валидно (например дата в диапазоне минимальной и максимальной дат)
+            filterFieldValid: true,
+        },
+    },
+    controller: 'FilterWrapPanelController',
+
+    config: {
+        filter: {},
+        // ссылка на грид
+        reportGrid: undefined,
+    },
+    updateReportGrid(grid) {
+        if (grid) {
+            this.getController().report = grid.up('ReportPanel');
+        }
+    },
+    maxWidth: 600,
+    maxHeight: 400,
+    layout: {type: 'vbox', align: 'stretch'},
+    items: [],
+
+    buttons: [
+        {
+            xtype: 'button',
+            ui: 'orange-button',
+            text: 'Расширенный поиск',
+            handler: 'advancedSearchHandler',
+        },
+        {
+            xtype: 'tbfill',
+        },
+        {
+            xtype: 'button',
+            ui: 'orange-button',
+            text: 'Ok',
+            handler: 'okClickHandler',
+            bind: {
+                disabled: '{!filterFieldValid}',
+            },
+        }
+    ],
+});

package/src/report/plugin/grid/addFilterConditionPlugin/FilterWrapPanelController.js

@@ -0,0 +1,57 @@
+Ext.define('Coon.report.plugin.grid.addFilterConditionPlugin.FilterWrapPanelController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.FilterWrapPanelController',
+    mixins: ['Coon.report.plugin.grid.addFilterConditionPlugin.FilterConfigMixin'],
+
+    report: undefined,
+    init() {
+        this.cellValue = this.getView().cellValue;
+        this.dataIndex = this.getView().dataIndex;
+        const filter = this.getView().getFilter();
+        this.addFilterProperties(filter);
+        this.filterItem = Ext.create({
+            xtype: 'FilterItem',
+            flex: 1,
+            filter,
+            closable: false,
+            bodyPadding: '10 8',
+            margin: '0 0 0 10',
+            frame: false,
+            title: false,
+            bind: {
+                title: false,
+            },
+        });
+        const vm = this.getViewModel();
+        this.filterItem.on('fieldsadded', function(fields) {
+            fields.forEach(function(field) {
+                field.on('change', function() {
+                    vm.set('filterFieldValid', field.isValid());
+                });
+            });
+        });
+        this.getView().add(this.filterItem);
+    },
+
+    filterReact() {
+        const filter = this.filterItem.getFilter();
+        const filterType = filter.type;
+        const condition = filter.operator || (filterType==='list' ? 'in' : 'eq');
+        const value = condition === 'between' ?
+            [filter.fromValue, filter.toValue].map(this.prepareValue):
+            this.prepareValue(filter.fromValue);
+        this.getView().fireEvent('dofilter', value, condition);
+    },
+
+    okClickHandler() {
+        this.filterReact();
+    },
+
+    isCurrent() {
+        return true;
+    },
+
+    advancedSearchHandler() {
+        this.fireViewEvent('advancedsearch');
+    },
+});

package/src/report/plugin/grid/addFilterConditionPlugin/InfoMenuItem.js

@@ -0,0 +1,111 @@
+Ext.define('Coon.report.plugin.grid.addFilterConditionPlugin.InfoMenuItem', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.InfoMenuItem',
+    xtype: 'InfoMenuItem',
+    cls: 'InfoMenuItem',
+    focusableContainer: true,
+    viewModel: {
+        data: {
+            columnName: undefined,
+            filterPrefix: undefined,
+            filterText: undefined,
+            qTip: '',
+        },
+    },
+    margin: '0 0 0 0',
+    layout: {type: 'hbox', align: 'stretch'},
+
+    initComponent() {
+        this.removeButton = Ext.create({
+            xtype: 'button',
+            iconCls: 'svg-icon svg-icon-cancel-small',
+            cls: 'system-button-type',
+            handler: this.removeFilter.bind(this),
+        });
+        this.items = [
+            {
+                // hack: Невидимая кнопка для получения фокуса
+                // Установка фокуса на компоненте решает проблему снятия фокуса при переводе указателя мыши с другого пункта меню.
+                xtype: 'button',
+                text: 'X',
+                itemId: 'hiddenButton',
+                width: 0,
+            },
+            {
+                xtype: 'panel',
+                flex: 1,
+                bind: {
+                    data: {
+                        columnName: '{columnName}',
+                        qTip: '{qTip}',
+                        filterPrefix: '{filterPrefix}',
+                        filterText: '{filterText}',
+                    },
+                },
+
+                tpl: new Ext.XTemplate(
+                    `<div class="menu-item-wrapper">`,
+                    `     <div class="menu-text-container" data-qtip="{qTip}">`,
+                    `       <b>{columnName}</b>`,
+                    `       <tpl if="filterText">`,
+                    `          <br><span class="filter-prefix">{filterPrefix}</span> {filterText}`,
+                    `       </tpl>`,
+                    `     </div>`,
+                    `</div>`
+                ),
+            },
+            {
+                xtype: 'container',
+                width: 50,
+                layout: 'center',
+                items: [
+                    this.removeButton
+                ],
+            }
+        ];
+        this.listeners = {
+            afterrender: this.setButtonFocus.bind(this),
+        };
+        this.callParent();
+    },
+
+    // hack: Установка фокуса на компоненте решает проблему снятия фокуса при переводе указателя мыши с другого пункта меню.
+    setButtonFocus: function(panel) {
+        panel.getEl().on('mouseover', function(e) {
+            this.down('#hiddenButton').focus();
+        }, this);
+    },
+    removeFilter() {
+        this.fireEvent('removefilter');
+    },
+    setFilterPrefix(value) {
+        this.getViewModel().set('filterPrefix', value);
+    },
+    setFilterText(value) {
+        this.getViewModel().set('filterText', value);
+    },
+    setColumnName(columnName) {
+        columnName = this.prepareText(columnName);
+        this.getViewModel().set('columnName', columnName);
+    },
+    setQTip(columnName, columnGroup, filterPrefix, filterText) {
+        columnName = this.prepareText(columnName);
+        columnGroup = this.prepareText(columnGroup);
+        filterText = Ext.String.htmlEncode(filterText);
+        const qTip = `<b>${columnGroup} ${columnName}</b> <br>${filterPrefix} ${filterText}`;
+        this.getViewModel().set('qTip', qTip);
+    },
+    removeQTip() {
+        this.getViewModel().set('qTip', 'Фильтр не задан');
+    },
+    buttonSetHidden(value) {
+        this.removeButton.setHidden(value);
+    },
+    prepareText(str) {
+        if (!Ext.isString(str)) {
+            return str;
+        }
+        const replaced = str.replace(/<br\s*\/?>/gi, ' ');
+        return Ext.util.Format.stripTags(replaced);
+    },
+});

package/src/report/plugin/grid/addFilterConditionPlugin/InfoMenuItem.scss

@@ -0,0 +1,83 @@
+.InfoMenuItem {
+  $menu-background-color: #F5F5F5;
+  .filter-prefix {
+    color: rgba(0, 0, 0, 0.50);
+  }
+  .menu-item-wrapper {
+    padding: 8px 0;
+
+    .menu-text-container {
+      margin-left: 48px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      min-width: 200px;
+      max-width: 400px;
+    }
+  }
+
+  background-color: $menu-background-color;
+  .x-panel-body-default {
+    background-color: $menu-background-color;
+  }
+
+  .svg-icon-cancel-small {
+    min-height: 18px !important;
+    min-width: 18px !important;
+    mask-size: 15px;
+  }
+
+  .system-button-type {
+    border: 1px solid #888888 !important;
+    border-radius: 6px;
+    padding: 6px;
+    background-color: #FFFFFF;
+    width: 30px;
+    height: 30px;
+  }
+
+  .system-button-type.x-btn-over {
+    border: 1px solid #888888 !important;
+    border-radius: 6px;
+    padding: 6px;
+    background-color: #F5F7FA;
+  }
+
+  .system-button-type.x-btn-disabled {
+    border: 1px solid #A3AAB2 !important;
+    border-radius: 6px;
+    padding: 6px;
+    background-color: #FFFFFF;
+  }
+  .system-button-type.x-btn-disabled .x-btn-icon-el{
+    background-color: #A3AAB2;
+  }
+
+  .system-button-type.x-btn-menu-active {
+    border: 1px solid #3D78BF !important;
+    background-color: #D8E4F2;
+    border-radius: 6px;
+  }
+
+  .system-button-type .x-btn-icon-el {
+    //width: 18px;
+    //height: 18px;
+  }
+
+  .system-button-type .x-btn-split-right::before,
+  .system-button-type .x-btn-arrow-el::before {
+    width: 0 !important;
+    right: 0 !important;
+  }
+
+  .system-button-type {
+    .x-btn-split-right::after {
+      color: var(--base-dark-color) !important;
+      padding-left: 5px;
+    }
+
+    .x-btn-split-right > .x-btn-button::after {
+      border-right-color: var(--base-dark-color) !important;
+    }
+  }
+}

package/src/report/plugin/grid/addFilterConditionPlugin/SelectColumnPanel.js

@@ -0,0 +1,102 @@
+Ext.define('Coon.report.plugin.grid.addFilterConditionPlugin.SelectColumnPanel', {
+    extend: 'Ext.tree.Panel',
+    title: 'Добавить фильтр',
+    alias: 'widget.SelectColumnPanel',
+    rootVisible: false,
+    hideHeaders: true,
+    rowLines: true,
+    store: {
+        type: 'tree',
+        filterer: 'bottomup',
+        root: {
+            expanded: true,
+            children: [],
+        },
+    },
+    autoLoad: false,
+    columns: {
+        items: [
+            {
+                xtype: 'treecolumn',
+                flex: 1,
+                dataIndex: 'text',
+            }
+        ],
+    },
+
+    initComponent: function() {
+        this.tbar = [
+            {
+                xtype: 'textfield',
+                fieldLabel: 'Поиск',
+                flex: 1,
+                triggers: {
+                    clear: {
+                        cls: 'svg-icon svg-icon-cancel-small',
+                        tooltip: 'Очистить поле',
+                        hidden: false,
+                        handler: function() {
+                            this.clear();
+                        },
+                    },
+                },
+                listeners: {
+                    change: {
+                        fn: this.onFilter.bind(this),
+                        buffer: 200,
+                    },
+                },
+            }
+        ];
+        this.buttons = [
+            {
+                text: 'Добавить',
+                ui: 'orange-button',
+                handler: this.onSelectColumn.bind(this),
+            },
+            {
+                text: 'Отменить',
+                ui: 'green-button',
+                handler: this.onClose.bind(this),
+            }
+        ];
+        this.callParent();
+        this.on('celldblclick', this.onCellClick, this);
+        this.on('itemkeydown', this.onItemKeyDown, this);
+    },
+
+    onCellClick: function() {
+        this.onSelectColumn();
+    },
+
+    onItemKeyDown: function(view, record, item, index, e) {
+        if (record.isLeaf() && e.keyCode === e.ENTER) {
+            this.onSelectColumn();
+        }
+    },
+
+    onSelectColumn() {
+        const record = this.getSelection()[0];
+        if (record && record.isLeaf()) {
+            this.fireEvent('selectColumn', {
+                dataIndex: record.get('id'),
+            });
+            this.onClose();
+        }
+    },
+
+    onClose() {
+        this.fireEvent('close');
+    },
+
+    onFilter(field, value) {
+        field.triggers.clear.setHidden(!value);
+        this.getStore().clearFilter();
+        const regexp = new RegExp(value, 'i');
+        this.getStore().filterBy(function(record) {
+            return (Ext.isString(record.get('text')) && regexp.test(record.get('text'))) ||
+                (Ext.isString(record.get('columnGroup')) && regexp.test(record.get('columnGroup')));
+        }, this);
+    },
+
+});