ru.coon 2.5.25 → 2.5.26

package/src/common/panel/DayPicker.js

@@ -1,63 +1,63 @@
-Ext.define('Coon.common.panel.DayPicker',
-    {
-        extend: 'Ext.picker.Date',
-        xtype: 'day-picker',
-
-        padding: 10,
-        highlightCls: 'highlighted',
-        highlightedDates: [],
-
-        getDayCells: function() {
-            return this['cells'].elements.filter((cell) => cell.className.includes(this['baseCls'] + '-active'));
-        },
-        removeHighlight: function() {
-            const cells = this.getDayCells();
-            if (Array.isArray(cells)) {
-                cells.forEach((cell) => {
-                    if (cell.className.includes(this.highlightCls)) {
-                        cell.className = cell.className.replaceAll(this.highlightCls, '');
-                    }
-                });
-            }
-        },
-        highlightDay: function(dayNumber) {
-            const cells = this.getDayCells();
-            const cell = cells[Number(dayNumber) - 1];
-            cell && !cell.className.includes(this.highlightCls) && (cell.className += ' ' + this.highlightCls);
-        },
-        setHighlightedDates: function(dates = []) {
-            this.removeHighlight();
-            const value = this.getValue();
-            if (!value instanceof Date) {
-                return;
-            }
-            dates = Array.isArray(dates) ? dates : [dates];
-
-            this.highlightedDates = dates;
-
-            dates.forEach((date) => {
-                if (date instanceof Date) {
-                    if (date.getMonth() === value.getMonth() && date.getFullYear() === value.getFullYear()) {
-                        this.highlightDay(date.getDate());
-                    }
-                }
-            });
-        },
-        clearHighlightedDates: function() {
-            this.highlightedDates = [];
-            this.removeHighlight();
-        },
-        refreshHighlight: function() {
-            if (Array.isArray(this.highlightedDates) && this.highlightedDates.length) {
-                this.setHighlightedDates(this.highlightedDates);
-            } else {
-                this.clearHighlightedDates();
-            }
-        },
-        update: function(date, forceRefresh) {
-            const res = this.self.superclass['update'].apply(this, arguments);
-            this.refreshHighlight();
-            return res;
-        },
-    }
-);
+Ext.define('Coon.common.panel.DayPicker',
+    {
+        extend: 'Ext.picker.Date',
+        xtype: 'day-picker',
+
+        padding: 10,
+        highlightCls: 'highlighted',
+        highlightedDates: [],
+
+        getDayCells: function() {
+            return this['cells'].elements.filter((cell) => cell.className.includes(this['baseCls'] + '-active'));
+        },
+        removeHighlight: function() {
+            const cells = this.getDayCells();
+            if (Array.isArray(cells)) {
+                cells.forEach((cell) => {
+                    if (cell.className.includes(this.highlightCls)) {
+                        cell.className = cell.className.replaceAll(this.highlightCls, '');
+                    }
+                });
+            }
+        },
+        highlightDay: function(dayNumber) {
+            const cells = this.getDayCells();
+            const cell = cells[Number(dayNumber) - 1];
+            cell && !cell.className.includes(this.highlightCls) && (cell.className += ' ' + this.highlightCls);
+        },
+        setHighlightedDates: function(dates = []) {
+            this.removeHighlight();
+            const value = this.getValue();
+            if (!value instanceof Date) {
+                return;
+            }
+            dates = Array.isArray(dates) ? dates : [dates];
+
+            this.highlightedDates = dates;
+
+            dates.forEach((date) => {
+                if (date instanceof Date) {
+                    if (date.getMonth() === value.getMonth() && date.getFullYear() === value.getFullYear()) {
+                        this.highlightDay(date.getDate());
+                    }
+                }
+            });
+        },
+        clearHighlightedDates: function() {
+            this.highlightedDates = [];
+            this.removeHighlight();
+        },
+        refreshHighlight: function() {
+            if (Array.isArray(this.highlightedDates) && this.highlightedDates.length) {
+                this.setHighlightedDates(this.highlightedDates);
+            } else {
+                this.clearHighlightedDates();
+            }
+        },
+        update: function(date, forceRefresh) {
+            const res = this.self.superclass['update'].apply(this, arguments);
+            this.refreshHighlight();
+            return res;
+        },
+    }
+);

package/src/common/panel/DayPicker.scss

@@ -1,15 +1,15 @@
-.highlighted .x-datepicker-date,
-.x-datepicker-selected.highlighted .x-datepicker-date {
-  color: orange;
-}
-
-.highlighted:hover .x-datepicker-date, {
-  border-radius: 50%;
-  background-color: #D7E0E4;
-  color: orange;
-}
-
-.x-datepicker-date {
-  padding: 0 15px 0 13px;
-}
-
+.highlighted .x-datepicker-date,
+.x-datepicker-selected.highlighted .x-datepicker-date {
+  color: orange;
+}
+
+.highlighted:hover .x-datepicker-date, {
+  border-radius: 50%;
+  background-color: #D7E0E4;
+  color: orange;
+}
+
+.x-datepicker-date {
+  padding: 0 15px 0 13px;
+}
+

package/src/common/panel/MainUploadPanel.scss

@@ -1,14 +1,14 @@
-.MainUploadPanel {
-  .x-btn-icon-el-blue-text-button-small.svg-icon {
-    width: 28px;
-    height: 28px;
-  }
-
-  .x-form-trigger {
-    padding: 0;
-  }
-
-  .x-toolbar-footer{
-    background-color: white;
-  }
+.MainUploadPanel {
+  .x-btn-icon-el-blue-text-button-small.svg-icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .x-form-trigger {
+    padding: 0;
+  }
+
+  .x-toolbar-footer{
+    background-color: white;
+  }
 }

package/src/common/panel/SelectIconClassPanel.scss

@@ -1,38 +1,38 @@
-.SelectIconClassPanel {
-    .x-btn-default-small {
-        background-color: transparent;
-        padding: 2px;
-        border-color: lightgray;
-    }
-    .x-btn-icon-el-default-small {
-        display: flex;
-        align-items: center;
-        
-        justify-content: center;
-        min-height: 26px;
-        min-width: 26px;
-    }
-    .svg-icon {
-        background-color: $base-color;
-    }
-    .x-table-layout {
-        padding-left: 16px;
-    }
-    .x-autocontainer-innerCt {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-        gap: 12px;
-        grid-auto-rows: min-content;
-    }
-    .icon-pack-grid-btn {
-        .x-btn-button-default-small {
-            display: grid;
-            grid-template-columns: 24px 1fr 24px;
-            align-items: center;
-        }
-    }
-    .icon-pack-search {
-        display: flex;
-        align-items: center;
-    }
-}
+.SelectIconClassPanel {
+    .x-btn-default-small {
+        background-color: transparent;
+        padding: 2px;
+        border-color: lightgray;
+    }
+    .x-btn-icon-el-default-small {
+        display: flex;
+        align-items: center;
+        
+        justify-content: center;
+        min-height: 26px;
+        min-width: 26px;
+    }
+    .svg-icon {
+        background-color: $base-color;
+    }
+    .x-table-layout {
+        padding-left: 16px;
+    }
+    .x-autocontainer-innerCt {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        gap: 12px;
+        grid-auto-rows: min-content;
+    }
+    .icon-pack-grid-btn {
+        .x-btn-button-default-small {
+            display: grid;
+            grid-template-columns: 24px 1fr 24px;
+            align-items: center;
+        }
+    }
+    .icon-pack-search {
+        display: flex;
+        align-items: center;
+    }
+}

package/src/common/panel/SelectIconClassPanelTemplate.scss

@@ -1,14 +1,14 @@
-.SelectIconClassPanelTemplate {
-    .coon-icon-message {
-        .x-form-display-field.x-form-display-field-default {
-            font-size: 22px;
-            width: 90%;
-            line-height: 1.2;
-            margin: 24px;
-        }
-    }
-
-    .x-autocontainer-innerCt:has(.coon-icon-message) {
-        display: block,
-    }
-}
+.SelectIconClassPanelTemplate {
+    .coon-icon-message {
+        .x-form-display-field.x-form-display-field-default {
+            font-size: 22px;
+            width: 90%;
+            line-height: 1.2;
+            margin: 24px;
+        }
+    }
+
+    .x-autocontainer-innerCt:has(.coon-icon-message) {
+        display: block,
+    }
+}

package/src/common/panel/StopwatchWindow.js

@@ -1,44 +1,44 @@
-Ext.define('Coon.common.panel.StopwatchWindow',
-    {
-        extend: 'Ext.window.Window',
-        xtype: 'stopwatch-window',
-        bodyPadding: 0,
-        layout: {
-            type: 'vbox',
-            align: 'center',
-        },
-        height: 240,
-        width: 300,
-        modal: true,
-        closable: false,
-        resizable: false,
-        draggable: false,
-        closeAction: 'destroy',
-        textPrefix: 'Время выполнения: ',
-        items: [{
-            xtype: 'container',
-            itemId: 'stopwatch-window-mask-target',
-            width: '100%',
-            flex: 1,
-        }],
-        listeners: {
-            render: function(win) {
-                win.tick();
-                win.timerId = setInterval(win.tick.bind(win), 1000);
-            },
-            destroy: function(win) {
-                win.timerId && clearInterval(win.timerId);
-            },
-        },
-        tick: function() {
-            this.setLoading(
-                (this.textPrefix || '') + new Date(this.secondsVisible++ * 1000).toISOString().substr(11, 8),
-                this.getComponent('stopwatch-window-mask-target'));
-        },
-        constructor: function(config) {
-            Ext.apply(this, config);
-            this.self.superclass['constructor'].apply(this);
-            this.secondsVisible = 1;
-        },
-    }
-);
+Ext.define('Coon.common.panel.StopwatchWindow',
+    {
+        extend: 'Ext.window.Window',
+        xtype: 'stopwatch-window',
+        bodyPadding: 0,
+        layout: {
+            type: 'vbox',
+            align: 'center',
+        },
+        height: 240,
+        width: 300,
+        modal: true,
+        closable: false,
+        resizable: false,
+        draggable: false,
+        closeAction: 'destroy',
+        textPrefix: 'Время выполнения: ',
+        items: [{
+            xtype: 'container',
+            itemId: 'stopwatch-window-mask-target',
+            width: '100%',
+            flex: 1,
+        }],
+        listeners: {
+            render: function(win) {
+                win.tick();
+                win.timerId = setInterval(win.tick.bind(win), 1000);
+            },
+            destroy: function(win) {
+                win.timerId && clearInterval(win.timerId);
+            },
+        },
+        tick: function() {
+            this.setLoading(
+                (this.textPrefix || '') + new Date(this.secondsVisible++ * 1000).toISOString().substr(11, 8),
+                this.getComponent('stopwatch-window-mask-target'));
+        },
+        constructor: function(config) {
+            Ext.apply(this, config);
+            this.self.superclass['constructor'].apply(this);
+            this.secondsVisible = 1;
+        },
+    }
+);

package/src/common/panel/UIElementPickerPanel.js

@@ -0,0 +1,176 @@
+Ext.define('Coon.common.panel.UIElementPickerPanel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'UIElementPickerPanel',
+    requires: ['Coon.util', 'Coon.report.command.GetDynamicReportDataCommand'],
+    layout: {
+        type: 'vbox',
+        align: 'stretch',
+    },
+    searchXtype: undefined,
+    value: null,
+    preload: true,
+    bodyPadding: 10,
+    setValue(value) {
+        this.value = value;
+    },
+    getValue() {
+        return this.value;
+    },
+    viewModel: {
+        data: {
+            selected: null,
+            searchString: '',
+            searchXtype: '',
+            value: '',
+            listIsLoading: false,
+        },
+        stores: {
+            list: {
+                // TODO type:'command', loadMask
+                data: [],
+            },
+        },
+    },
+    controller: {
+        bindings: {
+            onChangeListIsLoading: '{listIsLoading}',
+        },
+        onChangeListIsLoading(isLoading) {
+            if (isLoading) {
+                this.mask();
+            } else {
+                this.unmask();
+            }
+        },
+        onGridRender() {
+            this.vm.get('listIsLoading') && this.mask();
+        },
+        mask() {
+            this.lookup('grid').getEl().mask('Загрузка...');
+        },
+        unmask() {
+            this.lookup('grid').getEl().unmask();
+        },
+        initViewModel(vm) {
+            this.vm = vm;
+            const searchXtype = this.getView().getConfig('searchXtype');
+            searchXtype && this.getView().getConfig('preload') === true && this.searchHandler();
+            vm.set({
+                value: this.getView().getValue(),
+                searchXtype,
+            });
+        },
+        searchHandler() {
+            const searchStr = this.vm.get('searchString');
+            const params = Ext.encode([
+                {type: 'XTYPE', value: this.getView().getConfig('searchXtype')},
+                {type: 'UI_ELEMENT_CD', value: (searchStr.length && searchStr) || undefined}
+            ]);
+            this.vm.set('listIsLoading', true);
+            Coon.util
+                .promisifyCmd(
+                    'command.GetDynamicReportDataCommand',
+                    'UI_ELEMENTS_LIST',
+                    params
+                )
+                .then((data) => {
+                    if (!this.vm) {
+                        return;
+                    }
+                    this.vm.set('listIsLoading', false);
+                    this.vm.getStore('list').loadData(data.list);
+                    const value = this.getView().getValue();
+                    if (value && value.length) {
+                        this.lookup('grid').setSelection(this.vm.getStore('list').findRecord('UI_ELEMENT_CD', value));
+                    }
+                })
+                .catch((error) => {
+                    this.vm && this.vm.set('listIsLoading', false);
+                    Coon.log.debug(error);
+                    Ext.Msg.alert('Ошибка', error.toString());
+                });
+        },
+        handler() {
+            const selected = this.vm.get('selected');
+            if (selected) {
+                this.getView().setValue(selected.get('UI_ELEMENT_CD'));
+                this.getView().fireEvent('select', selected);
+            }
+        },
+    },
+    items: [
+        {
+            xtype: 'container',
+            layout: {
+                type: 'hbox',
+                align: 'end',
+            },
+            autoHeight: true,
+            items: [
+                {
+                    xtype: 'textfield',
+                    fieldLabel: 'UI_ELEMENT_CD',
+                    flex: 1,
+                    bind: {
+                        value: '{searchString}',
+                    },
+                    triggers: {
+                        clear: {
+                            cls: 'svg-icon svg-icon-cancel-small',
+                            tooltip: 'Очистить поле',
+                            handler: function() {
+                                this.clear();
+                            },
+                        },
+                    },
+                    enableKeyEvents: true,
+                    listeners: {
+                        keypress: (fld, e) => {
+                            if (e.getKey() === e.ENTER) {
+                                fld.ownerCt.getComponent('searchBtn').click();
+                            }
+                        },
+                    },
+                },
+                {
+                    xtype: 'button',
+                    itemId: 'searchBtn',
+                    text: 'Поиск',
+                    ui: 'blue-button',
+                    handler: 'searchHandler',
+                }
+            ],
+        },
+        {
+            xtype: 'grid',
+            reference: 'grid',
+            bind: {
+                store: '{list}',
+                selection: '{selected}',
+            },
+            flex: 1,
+            columns: [
+                {dataIndex: 'UI_ELEMENT_CD', flex: 1, text: 'UI_ELEMENT_CD'},
+                {dataIndex: 'DESCR', flex: 2, text: 'DESCR'},
+                {dataIndex: 'XTYPE', flex: 1, text: 'XTYPE'},
+                {dataIndex: 'LAST_CHANGE_DATE', flex: 1, text: 'DATE'}
+            ],
+            listeners: {
+                itemdblclick: 'handler',
+                render: 'onGridRender',
+            },
+        }
+    ],
+    bbar: {
+        items: [
+            '->',
+            {
+                xtype: 'button',
+                text: 'Выбрать',
+                ui: 'orange-button',
+                dock: 'bottom',
+                handler: 'handler',
+            }
+        ],
+    },
+});

package/src/common/panel/WindowWrap.scss

@@ -1,9 +1,9 @@
-.window-wrap {
-
-  &.coon-mobile {
-    .x-title-text {
-        white-space: normal;
-    }
-  }
-
+.window-wrap {
+
+  &.coon-mobile {
+    .x-title-text {
+        white-space: normal;
+    }
+  }
+
 }

package/src/common/panel/dropzone/UniversalMultiUploadForm.scss

@@ -1,29 +1,29 @@
-.overItemCls {
-  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5)
-}
-.universalmultiuploadform {
-  .files-container {
-    width: 100%;
-    height: 100%;
-    border: 1px dashed lightgray;
-    display: flex;
-    padding: 2px;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    .file-name-container {
-      width: 100%;
-      font-size: 10px;
-    }
-  }
-
-  .file-item {
-    display: flex;
-    width: 100px;
-    height: 100px;
-    padding: 5px;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow: hidden;
-  }
-}
+.overItemCls {
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5)
+}
+.universalmultiuploadform {
+  .files-container {
+    width: 100%;
+    height: 100%;
+    border: 1px dashed lightgray;
+    display: flex;
+    padding: 2px;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    .file-name-container {
+      width: 100%;
+      font-size: 10px;
+    }
+  }
+
+  .file-item {
+    display: flex;
+    width: 100px;
+    height: 100px;
+    padding: 5px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    overflow: hidden;
+  }
+}