ru.coon 2.6.22 → 2.7.0

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

@@ -0,0 +1,178 @@
+Ext.define('Coon.report.plugin.grid.AddFilterConditionPlugin', {
+    extend: 'Ext.AbstractPlugin',
+    alias: 'plugin.AddFilterConditionPlugin',
+    uses: [],
+    requires: [
+        'Ext.grid.Panel'
+    ],
+    configurePanelWizard: 'AddFilterConditionPluginConfigPanel',
+
+    filters: new Map(),
+
+    init: function(grid) {
+        this.grid = grid;
+        grid.on('added', function(grid) {
+            const contextMenu = grid.contextMenu;
+            contextMenu.add(new Ext.menu.Item({
+                iconCls: 'svg-icon svg-icon-filter-alt',
+                text: 'фильтр по значению',
+                itemId: 'filterByCellValue',
+                handler: this.addFilter.bind(this),
+            }));
+            contextMenu.add(new Ext.menu.Item({
+                text: 'Отменить фильтр для столбца',
+                hidden: true,
+                itemId: 'cancelCurrentColumnFilter',
+                handler: this.clearCurrentColumnFilter.bind(this),
+            }));
+            contextMenu.add(new Ext.menu.Item({
+                text: 'Отменить все',
+                itemId: 'cancelAllFilters',
+                handler: this.clearAllFilters.bind(this),
+            }));
+        }, this);
+        grid.on('load', function() {
+            this.clearAllFilters();
+        }, this);
+        grid.contextMenu.on('requestMenuItems', this.onShowMenu, this);
+    },
+
+    onShowMenu({record, cellIndex}) {
+        const cancelAllItem = this.findMenuItem('cancelAllFilters');
+        cancelAllItem && cancelAllItem.setDisabled(this.filters.size === 0);
+        if (this.filters.size) {
+            this.findMenuItem('cancelCurrentColumnFilter').hide();
+        }
+        this.findMenuItem('filterByCellValue').hide();
+        record && this.setMenuText(record, cellIndex);
+    },
+
+    addFilter: function() {
+        if (!this.grid) {
+            return;
+        }
+        const key = this.getColumnKey();
+        this.filters.set(key, this.columnValue);
+        this.doFilter();
+        this.changeColumnStyle(this.column);
+    },
+
+    changeColumnStyle(column) {
+        if (this.filters.has(column.dataIndex)) {
+            column.addCls('filtered-column');
+        } else {
+            column.removeCls('filtered-column');
+        }
+    },
+
+    doFilter() {
+        if (this.filters.size) {
+            this.grid.getStore().suspendEvents();
+            this.grid.getStore().clearFilter();
+            this.grid.getStore().resumeEvents();
+            this.grid.getStore().filter(
+                [...this.filters.entries()].map(function([property, value]) {
+                    if (Ext.isString(value) || Ext.isNumber(value)) {
+                        return {property, operator: '=', value};
+                    } else if (Ext.isDate(value)) {
+                        return new Ext.util.Filter({
+                            filterFn: function(rec) {
+                                return Ext.Date.format(rec.get(property), Coon.format.dateTime) === Ext.Date.format(value, Coon.format.dateTime);
+                            },
+                        }, this);
+                    } else {
+                        return new Ext.util.Filter({
+                            filterFn: function(rec) {
+                                return rec.get(property) === value;
+                            },
+                        }, this);
+                    }
+                }, this)
+            );
+        } else {
+            this.grid.getStore().clearFilter();
+        }
+    },
+
+    isColumnFiltered() {
+        return this.filters.has(this.getColumnKey());
+    },
+
+    showCancelMenuItems: function() {
+        const cancelCurrentItem = this.findMenuItem('cancelCurrentColumnFilter');
+        cancelCurrentItem && cancelCurrentItem.setHidden(!this.isColumnFiltered());
+    },
+
+    findMenuItem: function(findBy) {
+        const contextMenu = this.grid.contextMenu;
+        return contextMenu.down(`#${findBy}`);
+    },
+
+    getColumnKey(column) {
+        return (column || this.column).initialConfig.dataIndex;
+    },
+
+    clearAllFilters: function() {
+        this.filters.clear();
+        this.doFilter();
+        this.grid.getColumns().forEach((column) => {
+            if (column.hasCls('filtered-column')) {
+                column.removeCls('filtered-column');
+            }
+        });
+    },
+
+    clearCurrentColumnFilter: function() {
+        this.filters.delete(this.getColumnKey());
+        this.doFilter();
+        this.changeColumnStyle(this.column);
+    },
+
+    isFilterable: function() {
+        if (!this.filterOptions[this.column.dataIndex]) {
+            return false;
+        }
+
+        if (Array.isArray(this.columnValue) || Ext.isObject(this.columnValue)) {
+            Coon.log.debug('Фильтрация по значению из ячейки невозможна. Сложный тип данных');
+            return false;
+        }
+        if (typeof this.columnValue === 'number' && isNaN(this.columnValue)) {
+            Coon.log.debug('Фильтрация по значению из ячейки невозможна. Значение NaN');
+            return false;
+        }
+        return true;
+    },
+
+    setMenuText(record, cellIndex) {
+        const contextMenu = this.grid.contextMenu;
+        const columns = this.grid.getColumns();
+        const column = columns.length && columns[cellIndex];
+        if (!column) {
+            return;
+        }
+        this.column = column;
+        this.columnValue = record.get(column.dataIndex);
+
+        this.showCancelMenuItems();
+        const foundMenuItem = contextMenu.down('#filterByCellValue');
+        foundMenuItem.show();
+        if (this.filters.size && this.filters.get(this.getColumnKey()) === this.columnValue) {
+            foundMenuItem.hide();
+        }
+
+        if (this.isFilterable()) {
+            foundMenuItem.setDisabled(false);
+            if (Ext.isDate(this.columnValue)) {
+                foundMenuItem.setText(`фильтр по "${Ext.Date.format(this.columnValue, column.format || Coon.format.dateTime)}"`);
+            } else if (Ext.isEmpty(this.columnValue)) {
+                foundMenuItem.setText(`фильтр по пустому значению`);
+            } else {
+                foundMenuItem.setText(`фильтр по "${this.columnValue}"`);
+            }
+        } else {
+            foundMenuItem.setText(`Нет возможности фильтрации`);
+            foundMenuItem.setDisabled(true);
+        }
+    },
+});

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

@@ -16,16 +16,52 @@ Ext.define('Coon.report.plugin.grid.GridContextMenu', {
         }
         this.grid = component;
         this.grid.getView().on({
-            cellcontextmenu: {fn: this.cellContextMenuHandler, scope: this},
-            containercontextmenu: {fn: this.containerContextMenuHandler, scope: this}, /* ,
-            destroy: {fn: this.destroyHandler, scope: this}*/
+            cellcontextmenu: {
+                fn: this.cellContextMenuHandler,
+                scope: this,
+            },
+            containercontextmenu: {
+                fn: function(view, event) {
+                    this.showContextMenu({event, view});
+                    event.preventDefault();
+                },
+                scope: this,
+            },
         });
 
         this.grid.contextMenu = Ext.create('Coon.common.tree.BaseContextMenu', {items: this.items});
+        this.grid.contextMenu.on('show', this.displacementContextMenu, this);
+        this.grid.contextMenu.on('hide', this.restoreCellQtip, this);
         this.grid.getSelectionModel().on('selectionchange', this.updateContext, this);
         this.grid.getStore().on('load', this.updateContext, this);
     },
 
+    /**
+     * Размещение контекстного меню под текстом в ячейке.
+     * Удаление qtip (восстанавливается при скрытии контекстного меню)
+     */
+    displacementContextMenu: function() {
+        const contextMenu = this.grid.contextMenu;
+        const cellIndex = contextMenu.cellIndex;
+        const columns = this.grid.getColumns();
+        const column = columns.length && columns[cellIndex];
+        if (!column || !contextMenu.record) {
+            return;
+        }
+        const cell = this.grid.getView().getCell(contextMenu.record, column);
+        this.qtipSpan = cell.querySelector('[data-qtip]');
+        this.qtipSpan && this.qtipSpan.removeAttribute('data-qtip');
+
+        contextMenu.alignTo(cell, 'tl-bl');
+
+        const y = contextMenu.getY();
+        contextMenu.setY(y - 7);
+    },
+
+    restoreCellQtip: function() {
+        this.qtipSpan && this.qtipSpan.setAttribute('data-qtip', this.columnValue);
+    },
+
     destroyHandler: function() {
         if (this.grid.contextMenu) {
             this.grid.contextMenu.destroy();
@@ -33,10 +69,6 @@ Ext.define('Coon.report.plugin.grid.GridContextMenu', {
         }
     },
 
-    containerContextMenuHandler: function(view, e, eOpts) {
-        this.showContextMenu(undefined, e);
-    },
-
     updateContext: function() {
         const grid = this.grid;
         const selected = grid.getSelectionModel().getLastSelected();
@@ -51,17 +83,20 @@ Ext.define('Coon.report.plugin.grid.GridContextMenu', {
         grid.contextMenu.params = params && params.parameterList && Coon.Function.convertProperties(Ext.decode(params.parameterList));
     },
 
-    cellContextMenuHandler: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
+    cellContextMenuHandler: function(view, td, cellIndex, record, tr, rowIndex, event) {
         this.grid.getSelectionModel().select(rowIndex);
         if (record) {
-            this.showContextMenu(record, e);
+            this.showContextMenu({view, td, cellIndex, record, tr, rowIndex, event});
         }
         return false;
     },
 
-    showContextMenu: function(selectedRecord, event) {
+    showContextMenu: function({view, td, cellIndex, record, tr, rowIndex, event}) {
         const contextMenu = this.grid.contextMenu;
-        contextMenu.record = selectedRecord;
+        if (record) {
+            contextMenu.record = record;
+        }
+        cellIndex && (contextMenu.cellIndex = cellIndex);
         const store = this.grid.getStore();
         let params;
         if (this.grid instanceof Ext.tree.Panel) {
@@ -70,7 +105,10 @@ Ext.define('Coon.report.plugin.grid.GridContextMenu', {
             params = store.lastOptions && store.lastOptions.params;
         }
         contextMenu.params = params && params.parameterList && Coon.Function.convertProperties(Ext.decode(params.parameterList));
-        if (contextMenu.items.length) {
+        contextMenu.fireEvent('requestMenuItems', {view, td, cellIndex, record, tr, rowIndex, event});
+        const showMenu = contextMenu.items &&
+            contextMenu.items.getRange().find((item) => !item.hidden);
+        if (showMenu) {
             contextMenu.show([event.getX(), event.getY()]);
             return this.removeBrowserContextMenu(event);
         }

package/src/uielement/component/UiCustomController.js

@@ -5,6 +5,10 @@ Ext.define('Coon.uielement.component.UiCustomController', {
 
     init: function(view) {
         const config = view.propertyData || view.initialConfig;
+        if (!view || typeof view.on !== 'function') {
+            Coon.log.debug(` [Error]UiCustomController.init - view not found or view.on is not a function`);
+            return;
+        }
         view.on('afterrender', function() {
             const {accessDecision, securePoints} = config;
             Coon.log.debug('UiCustomController.accessProps', {accessDecision, securePoints});

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

@@ -3,6 +3,8 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
     xtype: 'Chip',
     alias: 'widget.Chip',
     defaultListenerScope: true,
+    searchRequired: false,
+
     config: {
         // Служебный
         service: false,
@@ -10,6 +12,12 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
         unusable: undefined,
         // С кнопкой закрытия
         closable: undefined,
+        // Чип критерия для удаленного поиска (если false то для локальной фильтрации в ReportPanel)
+        forRemoteSearch: true,
+        // Всплывающая подсказка для кнопки закрытия чипа
+        deleteChipTooltipMessage: 'Очистить поле формы',
+        // Функция колбэка, срабатывающая при закрытии чипа
+        removeFilterCallback: undefined,
     },
     tpl: new Ext.XTemplate(
         '<span class="chip-value">{value}</span>',
@@ -22,15 +30,30 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
     },
 
     initComponent: function() {
+        if (this.forRemoteSearch && this.data) {
+            this.originalValue = this.data.value;
+        }
+
+        this.configureCls();
+        this.callParent();
+    },
+
+    configureCls() {
+        const cls = [];
         if (this.getService()) {
-            this.cls = 'service-chip';
+            cls.push('service-chip');
         } else {
-            this.cls = this.getUnusable() ?
+            cls.push(this.getUnusable() ?
                 'unusable-chip':
-                this.getClosable() ? 'closable-chip' : 'chip';
+                this.getClosable() ? 'closable-chip' : 'chip');
         }
 
-        this.callParent();
+        if (this.getForRemoteSearch()) {
+            cls.push('remote-search-chip');
+        } else {
+            cls.push('local-search-chip');
+        }
+        this.cls = cls.join(' ');
     },
 
     closeChip: function() {
@@ -42,6 +65,9 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
                 chip.fireEvent('delete', field);
             }
             chip.fireEvent('needReloadChips');
+        } else if (Ext.isFunction(chip.removeFilterCallback)) {
+            chip.removeFilterCallback();
+            chip.fireEvent('needReloadChips');
         }
     },
 
@@ -62,6 +88,9 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
                             if (chip.data.unusable) {
                                 toolTipText+=`<br>Не использовано при последнем поиске!`;
                             }
+                            if (chip.searchRequired) {
+                                toolTipText+=`<br>Критерий поиска "${chip.data.label}" изменился. Необходимо выполнить поиск!`;
+                            }
                             tip.update(toolTipText);
                         }
                     },
@@ -71,7 +100,7 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
             // Тултип для крестика закрытия чипа
             chip.tipClose = Ext.create('Ext.tip.ToolTip', {
                 target: chip.el.query('[class=closebtn]')[0],
-                html: 'Очистить поле формы',
+                html: this.getDeleteChipTooltipMessage(),
             });
         }
     },
@@ -84,4 +113,5 @@ Ext.define('Coon.uielement.component.formchips.Chip', {
         cmp.tip && cmp.tip.destroy();
         cmp.tipClose && cmp.tipClose.destroy();
     },
+
 });

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

@@ -1,18 +1,25 @@
 /**
  * Компонет формы поиска для отображения чипов (типа https://materializecss.com/chips.html) с критериями поиска.
- * Копмонент - это тулбар.
+ * Копмонент - тулбар.
+ *
+ * Поведение.
+ *  - отображается всегда
+ *  - включает тул (глаз) для сворачивания формы поиска
+ *  - при выполнении поиска отображает (перечитывает) чипы с критериями, используемые при поиске.
+ *  - каждый чип отображает введенное значение критерия (наприпер дату), а при наведении показывает тултип с названием.
+ *  - чипы не закрываемые
+ *  - при сворачивании формы поиска в тулбар добавляются кнопки "Поиск" и "Очистить", которые дублируют поведение формы поиска.
+ *  - каждый чип связан с полем формы и меняет свой вид и содержание тултипа в случае изменения значения в поле поиска.
+ *
+ * Использование в репорте:
+ * Включается свойством репорта - enableChipToolbar.
+ *
+ * Использование в кастомной панели:
  * Д.быть добавлен в основной контейней кастомной панели, где есть title.
- * В заголовок будет добавлен tool, управляющий формой критериев поиска (Свернуть/Развернуть) через searchFormItemId.
- * Тулбар виден, если свернута форма поиска, и свернут, когда форма поиска видна.
- * При сворачивании формы поиска тулбар показывает критерии поиска в виде чипов двух типов:
- * 1. Критерии, использованные для последнего поиска. Отображение более яркое.
- * 2. Критерии, заполненные на форме поиска, но не использованные при последнем поиске. Отображения бледное.
- * Всегда есть иконка крестика для закрытия чипа.
- * При нажатии "Закрыть" чип будет удален с тулбара, а соответствующий критерий поиска формы будет очищен.
- * Конфигурационный параметр компонента closableFilterCondition в значении true дает чипам типа 1 возможность быть тоже закрываемыми.
- * При закрытии таких чипов компонент формирует событие chipdelete.
- * По этому событию кастомная панель сможет к примеру выполнить новый поиск.
- * Каждый чип отображает введенное значение критерия (наприпер дату), а при наведении показывает тултип с названием
+ * В заголовок будет добавлен tool, управляющий сворачиванием формы критериев поиска (Свернуть/Развернуть)
+ * (Ссылка на форму поиска по searchFormItemId).
+ * Конфигурационный параметр компонента closableFilterCondition пока не используется.
+ *
  * критерия поиска (например "Период").
  * Пример использования:
  * @example
@@ -24,10 +31,12 @@
  *                       {
  *                           xtype: 'FilterConditionToolbar',
  *                           reference: 'filterConditionToolbarRef',
- *                           closableFilterCondition: true,
-                             listeners: {
-                                 chipdelete: 'onChipDeleteHandler', // Реакция на закрытие чипа. Например, выполнение нового поиска.
-                             },
+ *                           dock: 'bottom',
+ *                           listeners: {
+ *                              clear: 'onClearFromChips', // Событие от кнопки "Очистить" из тулбара. Привязать хендлер очистки формы
+ *                              needreload: 'doInitReport', // Событие от кнопки "Поиск" из тулбара. Привязать хендлер выполнения поиска
+ *                              // chipdelete: 'onChipDeleteHandler', // Реакция на закрытие чипа. Например, выполнение нового поиска. НЕ ИСПОЛЬЗУЕТСЯ
+ *                           },
  *                       },
  *                   ],
  *                   ...
@@ -40,7 +49,7 @@
  *}]
  *
  * Обязательно в хендлере выполнения поиска формы нужно добавить формирование события rememberconditions,
- * чтобы тулбар ЗАПОМНИЛ критерии поиска, использованные для поиска в текущий момент:
+ * чтобы тулбар ИСПОЛЬЗОВАЛ критерии поиска, использованные для поиска в текущий момент:
  *
  * @example
  * this.lookup('filterConditionToolbarRef').fireEvent('rememberconditions');
@@ -49,7 +58,7 @@
  * 1. Панель, содержащая поля формы поиска, должна иметь itemId searchFormItemId
  */
 Ext.define('Coon.uielement.component.formchips.FilterConditionToolbar', {
-    extend: 'Ext.toolbar.Toolbar',
+    extend: 'Ext.container.Container',
     xtype: 'FilterConditionToolbar',
     alias: 'widget.FilterConditionToolbar',
     cls: 'FilterConditionToolbar',
@@ -60,10 +69,11 @@ Ext.define('Coon.uielement.component.formchips.FilterConditionToolbar', {
     controller: 'filterconditiontoolbarcontroller',
     bodyPadding: 10,
     hidden: true,
-    overflowHandler: 'scroller',
-
+    layout: {
+        type: 'hbox', align: 'stretch',
+    },
     listeners: {
-        beforerender: 'setPanelTools',
+        beforerender: 'initToolbar',
         boxready: 'fillChipsHandler',
         show: 'fadeInHandler',
     },
@@ -79,6 +89,34 @@ Ext.define('Coon.uielement.component.formchips.FilterConditionToolbar', {
      * Предназначено для вызова из кастомной панели из хендлера
      */
 
+    items: [
+        {
+            xtype: 'toolbar',
+            flex: 1,
+            overflowHandler: 'menu',
+            reference: 'chipsContainer',
+        },
+        {
+            xtype: 'toolbar',
+            reference: 'buttonsContainer',
+            hidden: true,
+            width: 200,
+            items: [
+                {
+                    reference: 'searchButton',
+                    ui: 'orange-button',
+                    text: 'Поиск',
+                    handler: 'onSearchButton',
+                },
+                {
+                    reference: 'clearButton',
+                    ui: 'green-button',
+                    text: 'Очистить',
+                    handler: 'onClearButton',
+                }
+            ],
+        }
+    ],
     config: {
         /**
          * @param {boolean} Если true, то ЧИП, по которому был произведен поиск, можно закрывать. Что приведет к очистке поля, связанного с чипом.

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

@@ -1,16 +1,14 @@
-.FilterConditionToolbar {
+.x-menu-body .x-box-target, .FilterConditionToolbar {
 
     .closable-chip, .unusable-chip, .chip, .service-chip {
         display: inline-block;
         cursor: default;
         padding: 0 15px;
-        height: 30px;
-        line-height: 30px;
-        border-radius: 15px;
-        background-color: #f1f1f1;
+        height: 26px;
+        line-height: 26px;
+        border-radius: 13px;
         .chip-value {
             font-size: 13px;
-            font-weight: bold;
         }
         .closebtn {
             padding-left: 10px;
@@ -24,23 +22,46 @@
             color: #000;
         }
     }
+    .remote-search-chip {
+        background-color: #f1f1f1;
+    }
+
+    .local-search-chip {
+        background-color: #dffad3;
+    }
+
     /* Неиспользованное для поиска поле и сервисное поле */
-    .unusable-chip, .service-chip {
+    .unusable-chip {
+        border: 1px solid #ff9800;
         .chip-value {
             font-size: 13px;
+            font-style: italic;
             color: gray;
             font-weight: normal;
         }
     }
-    .chip, .service-chip {
+
+    .service-chip {
+        .chip-value {
+            font-size: 13px;
+            color: gray;
+            font-weight: normal;
+        }
+    }
+
+    .chip, .service-chip, .unusable-chip {
         .closebtn {
             display: none;
         }
     }
+
     .closable-chip {
         .closebtn {
             display: block;
         }
     }
 
+    .tool-eye-horus {
+        color: #002453;
+    }
 }