ru.coon 2.8.66 → 3.0.2

package/src/common/button/DropdownContentButton.js

@@ -0,0 +1,146 @@
+/**
+ * Компонент DropdownContentButton представляет собой кнопку,
+ * при активации которой появляется модальное окно, визуально связанное с кнопкой общими границами и бэкграундом.
+ * При инициализации компонента в качестве конфига можно передавать как параметры для самой кнопки,
+ * так и конфигурационные параметры для всплывающей панели (в стиле 'camelCase' с префиксом panel: 'panelItems')
+ * Параметры конфига компонента:
+ * Все валидные параметры для компонентов класса Ext.button.Button
+ * Все валидные параметры для компонентов класса Ext.panel.Panel:
+ *      * должны начинать с префикса 'panel' в стиле 'camelCase',
+ *      * параметры будут перенесены в конфиг дочерней панели без префикса, пример:
+ *     * panelWidth: 500 -> width: 500
+ * alignment: выравнивание модального окна относительно кнопки.
+ *      * Принимает строку (пример: 'br'), в которой:
+ *      * первая буква ('b'/'t') - вертикальное позиционирование контента относительно кнопки (bottom/top)
+ *      * вторая буква ('r'/'l'/'f') - по какой из горизонтальных сторон кнопки выравнивается контент (left / right), либо 'f' - full-screen mode
+ * verticalOffset: размер отступа между кнопкой и контентной частью
+ * roundCorners: true | false - добавляет скругление углов при соединении элементов
+ * bgColor: цвет фона кнопки и контент-части;
+ * borderColor: цвет общей рамки;
+ * outerBgColor: цвет фона внешнего окружения
+ */
+Ext.define('Coon.common.button.DropdownContentButton', {
+    extend: 'Ext.button.Button',
+    xtype: 'DropdownContentButton',
+
+    requires: [
+        'Coon.util.VisualLinker'
+    ],
+
+    cls: 'dropdownContentButton',
+    iconCls: 'dropdownContentButton-icon',
+    overCls: '',
+    focusCls: '',
+
+    // конфигурируемые свойства элемента
+    contentPanelConfig: null,
+    alignment: 'br',
+    verticalOffset: 8,
+    roundCorners: false,
+    bgColor: null,
+    outerBgColor: '#fff',
+
+    controller: 'DropdownContentButtonController',
+
+    viewModel: {
+        data: {
+            isActive: false,
+        },
+    },
+
+    listeners: {
+        click: 'onMainBtnClick',
+        move: 'onMove',
+    },
+
+    initComponent() {
+        this.callParent();
+
+        const defaultPanelConfig = [
+            ['xtype', 'panel'],
+            ['layout', 'fit'],
+            ['floating', true],
+            ['shadow', false],
+            ['scrollable', true],
+            ['alwaysOnTop', false]
+        ];
+
+        // Создаём контент панель, дефолтные параметры конфига при этом в приоритете
+        this.contentPanel = Ext.create('Ext.panel.Panel', Ext.apply(
+            {
+                viewModel: {
+                    parent: this.getViewModel(),
+                },
+            },
+            Ext.applyIf(Object.fromEntries(defaultPanelConfig), this.contentPanelConfig)
+        ));
+        this.contentPanel.on({
+            beforeshow: 'contentBanelBeforeShow',
+            show: function(panel) {
+                this.setButtonZIndex(panel);
+                const content = panel.items.first();
+                if (!content) {
+                    return;
+                }
+                content.fireEvent('ownerShow');
+            },
+            hide: 'returnButtonZIndex',
+            scope: this,
+        });
+        this.setButtonCssVariables();
+    },
+
+    onBoxReady() {
+        Coon.util.VisualLinker.createLinkedPair(
+            this,
+            this.contentPanel,
+            {
+                leadComponentClass: 'dropdownContentButton',
+                alignment: this.alignment,
+                outerBgColor: this.outerBgColor,
+                verticalOffset: this.verticalOffset,
+                roundCorners: this.roundCorners,
+            }
+        );
+    },
+
+    getContentPanel() {
+        return this.contentPanel;
+    },
+
+    setButtonCssVariables() {
+        if (this.bgColor) {
+            this.setStyle('--bg-color', this.bgColor);
+        }
+    },
+
+    setButtonZIndex(panel) {
+        if (!panel.modal) {
+            return;
+        }
+        this.savedZIndex = this.getEl().dom.style.zIndex;
+        this.setStyle({
+            zIndex: panel.getEl().dom.style.zIndex+5,
+        });
+    },
+
+    returnButtonZIndex(panel) {
+        if (!panel.modal) {
+            return;
+        }
+
+        this.setStyle({
+            zIndex: this.savedZIndex || undefined,
+        });
+    },
+
+    contentBanelBeforeShow(panel) {
+        if (panel.autoSize) {
+            const body = Ext.getBody();
+            const widthDecrement = panel.widthDecrement || 60;
+            const heightDecrement = panel.heightDecrement || 100;
+            this.getContentPanel().setWidth(body.getWidth() - widthDecrement);
+            this.getContentPanel().setHeight(body.getHeight() - heightDecrement);
+        }
+    },
+});

package/src/common/button/DropdownContentButton.scss

@@ -0,0 +1,92 @@
+.dropdownContentButton {
+    --btn-width: 30px;
+    --btn-height: 30px;
+    // переменная --base-foreground-color из material-theme
+    --bg-color: var(--base-foreground-color);
+    --icon-hover-color: #5fa2dd;
+
+    border-radius: 6px;
+    overflow: hidden;
+    background-color: var(--bg-color);
+
+    &.dropdownContentButton--active {
+        .dropdownContentButton-icon {
+            transform: rotateX(180deg);
+        }
+
+        &.dropdownContentButton--bottom {
+            border-bottom: none;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &.dropdownContentButton--top {
+            border-top: none;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    &-btn {
+        border-radius: 4px;
+        background-color: var(--bg-color);
+        transition: background-color 0.2s;
+
+        &:hover {
+            background-color: var(--bg-color);
+
+            & .dropdownContentButton-icon {
+                color: var(--icon-hover-color);
+            }
+        }
+    }
+
+    &-icon {
+        mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI5Mjg5IDcuMjkyODlDMy42ODM0MiA2LjkwMjM3IDQuMzE2NTggNi45MDIzNyA0LjcwNzExIDcuMjkyODlMMTIgMTQuNTg1OEwxOS4yOTI5IDcuMjkyODlDMTkuNjgzNCA2LjkwMjM3IDIwLjMxNjYgNi45MDIzNyAyMC43MDcxIDcuMjkyODlDMjEuMDk3NiA3LjY4MzQyIDIxLjA5NzYgOC4zMTY1OCAyMC43MDcxIDguNzA3MTFMMTIuNzA3MSAxNi43MDcxQzEyLjMxNjYgMTcuMDk3NiAxMS42ODM0IDE3LjA5NzYgMTEuMjkyOSAxNi43MDcxTDMuMjkyODkgOC43MDcxMUMyLjkwMjM3IDguMzE2NTggMi45MDIzNyA3LjY4MzQyIDMuMjkyODkgNy4yOTI4OVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
+        mask-size: 100%;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: #3d6780;
+      }
+
+    .x-btn-default-small {
+        border: none;
+    }
+}
+
+.dropdownContentButton-content {
+    --border-color: #a5a5a5;
+    --bg-color: white;
+    --shadow-color: #a5a5a5;
+
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+
+    &.dropdownContentButton-content--bottom {
+        &.dropdownContentButton-content--right {
+            box-shadow:
+                -2px 4px 6px -1px var(--shadow-color);
+        }
+
+        &.dropdownContentButton-content--left {
+            box-shadow:
+                2px 4px 6px -1px var(--shadow-color);
+        }
+    }
+
+    &.dropdownContentButton-content--top {
+        &.dropdownContentButton-content--right {
+            box-shadow:
+                -2px -4px 6px -1px var(--shadow-color);
+        }
+
+        &.dropdownContentButton-content--left {
+            box-shadow:
+                2px -4px 6px -1px var(--shadow-color);
+        }
+    }
+
+    .x-panel-body {
+        background-color: var(--bg-color);
+    }
+}

package/src/common/button/DropdownContentButtonController.js

@@ -0,0 +1,60 @@
+Ext.define('Coon.common.button.DropdownContentButtonController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.DropdownContentButtonController',
+
+    listen: {
+        global: {
+            mousedown: 'checkDismissClick',
+        },
+    },
+
+    onMainBtnClick() {
+        const vm = this.getViewModel();
+        const isActive = vm.get('isActive');
+
+        if (!isActive) {
+            this.showContent();
+            vm.set('isActive', true);
+        } else {
+            this.hideContent();
+        }
+    },
+
+    onMove() {
+        const vm = this.getViewModel();
+        const isActive = vm.get('isActive');
+        if (isActive) {
+            this.hideContent();
+        }
+    },
+
+    checkDismissClick: function(event) {
+        const isActive = this.getViewModel().get('isActive');
+        if (isActive) {
+            if (!this.getView().contentPanel.owns(event.getTarget()) && !this.getView().owns(event.getTarget())) {
+                this.hideContent();
+                this.getView().getViewModel().set('isActive', false);
+            }
+        }
+    },
+
+    showContent() {
+        const panel = this.getView().contentPanel;
+        const btn = this.getView();
+
+        panel.show();
+        Coon.util.VisualLinker.link(btn, panel);
+    },
+
+    hideContent() {
+        const panel = this.getView().contentPanel;
+        const vm = this.getViewModel();
+        const btn = this.getView();
+
+        Coon.util.VisualLinker.unlink(btn, panel);
+
+        panel.hide();
+        vm.set('isActive', false);
+        this.getView().updateLayout();
+    },
+});

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

@@ -1,5 +1,4 @@
 .UiCustomFilterForm{
-    margin-bottom: 20px;
     margin-top: 5px;
     .x-form-layout-wrap{
         border-spacing: 0;

package/src/common/component/settings/modules/settingClosePageConfirmation.js

@@ -4,10 +4,8 @@ Ext.define('Coon.common.component.settings.modules.settingClosePageConfirmation'
     getFieldComponent: (get, set) => {
         return {
             xtype: 'checkbox',
-            fieldLabel: 'Предупреждать при закрытии страницы',
-            labelAlign: 'left',
+            boxLabel: 'Предупреждать при закрытии страницы',
             value: get(),
-            labelWidth: 300,
             listeners: {
                 change: function(_, value) {
                     set(value);

package/src/common/component/settings/modules/settingFavoritePanelShow.js

@@ -0,0 +1,21 @@
+Ext.define('Coon.common.component.settings.modules.settingFavoritePanelShow', {
+    alias: 'usersetting.favoritePanelHidden',
+    requires: ['Coon.setup'],
+    defaultValue: false,
+    getFieldComponent: (get, set) => {
+        return {
+            xtype: 'checkbox',
+            boxLabel: 'Скрыть панель избранного',
+            value: get(),
+            listeners: {
+                change: function(_, value) {
+                    set(value);
+                    Ext.fireEvent('nav:setvisiblefavoritepanel', value);
+                },
+            },
+        };
+    },
+    init(get) {
+        Coon.setup.set('favoritePanelHidden', get());
+    },
+});

package/src/common/component/settings/modules/settingReportCalculator.js

@@ -0,0 +1,22 @@
+Ext.define('Coon.common.component.settings.modules.settingReportCalculator', {
+    alias: 'usersetting.settingReportCalculator',
+    requires: ['Coon.setup'],
+    defaultValue: false,
+    getFieldComponent: (get, set) => {
+        return {
+            xtype: 'checkbox',
+            boxLabel: 'Показывать калькулятор',
+            value: get(),
+            listeners: {
+                change: function(_, value) {
+                    Coon.setup.set('showReportCalculator', !!value);
+                    Ext.fireEvent('enableReportCalculator', !!value);
+                    set(value);
+                },
+            },
+        };
+    },
+    init(get) {
+        Coon.setup.set('showReportCalculator', get());
+    },
+});

package/src/common/component/settings/modules/settingShowNeedReloadMessage.js

@@ -4,10 +4,8 @@ Ext.define('Coon.common.component.settings.modules.settingShowNeedReloadMessage'
     getFieldComponent: (get, set) => {
         return {
             xtype: 'checkbox',
-            fieldLabel: 'Выводить сообщение о необходимости перезагрузить старницу после обновления приложения',
-            labelAlign: 'left',
+            boxLabel: 'Выводить сообщение о необходимости перезагрузить старницу после обновления приложения',
             value: get(),
-            labelWidth: 300,
             listeners: {
                 change: function(_, value) {
                     set(value);

package/src/common/component/settings/modules/settingwindowHolder.js

@@ -5,12 +5,11 @@ Ext.define('Coon.common.component.settings.modules.settingwindowHolder', {
     getFieldComponent: (get, set) => {
         return {
             xtype: 'checkbox',
-            fieldLabel: 'сворачивать окно добавления/редактирования',
-            labelAlign: 'left',
+            boxLabel: 'Сворачивать окно добавления/редактирования',
             value: get(),
-            labelWidth: 300,
             listeners: {
                 change: function(_, value) {
+                    Coon.setup.set('windowHolderMode', !!value);
                     set(value);
                 },
             },

package/src/common/panel/WindowWrap.js

@@ -10,7 +10,7 @@ Ext.define('Coon.common.panel.WindowWrap', {
     },
     addCloseButton: false,
     closable: true,
-    constrain: true,
+    // constrain: true,
     scrollable: false,
     maximizable: true,
     maximized: false,
@@ -20,7 +20,7 @@ Ext.define('Coon.common.panel.WindowWrap', {
     layout: 'fit',
     frame: false,
     border: false,
-    modal: true,
+    modal: false,
     closeAction: 'destroy',
     alwaysInCenter: false,
     callbackFn: undefined,
@@ -62,13 +62,11 @@ Ext.define('Coon.common.panel.WindowWrap', {
     },
 
     updateConstraints: function() {
-        const viewPortSize = Ext.getBody().getViewSize();
+        const viewPortSize = this.constrainView.getSize();
         this.maxWidth = viewPortSize.width;
         this.maxHeight = viewPortSize.height;
-
         const isWinMaximized = this.height >= this.maxHeight && this.width >= this.maxWidth;
         this.maximized = this.maximized || isWinMaximized;
-
         if (this.maximized) {
             const defaultRestoreSize = {
                 height: 500,
@@ -77,10 +75,10 @@ Ext.define('Coon.common.panel.WindowWrap', {
             this.height = Ext.isEmpty(this.height) ? defaultRestoreSize.height : this.height;
             this.width = Ext.isEmpty(this.width) ? defaultRestoreSize.width : this.width;
         }
-
         if (this.alwaysInCenter) {
             this.center();
         }
+        this.updateLayout();
     },
 
     updateDem(panel) {
@@ -103,8 +101,10 @@ Ext.define('Coon.common.panel.WindowWrap', {
         const me = this;
         const panel = this.items;
         panel.header = false;
+        this.constrainView = Ext.getBody();// Coon.app.Config.get('mainViewXType');
+        // this.constrainTo = this.constrainView.getEl();
         this.updateDimensions(panel);
-        this.resizerDestroier = Ext.on('resize', this.updateConstraints, this);
+        this.constrainView.on('resize', this.updateConstraints, this);
         this.tools = this.tools || [];
         if (this.canHold) {
             this.tools.unshift({
@@ -130,6 +130,18 @@ Ext.define('Coon.common.panel.WindowWrap', {
                 handler: Ext.bind(this.openInNewWindow, this),
             }];
         }
+        this.on({
+            show: () => {
+                this.constrainView.mask();
+            },
+            hide: () => {
+                this.constrainView.unmask();
+            },
+            destroy: () => {
+                this.constrainView.unmask();
+            },
+            scope: this,
+        });
         this.callParent();
         this.setFocusTarget(panel);
         this.content = this.items.getAt(0);
@@ -211,8 +223,4 @@ Ext.define('Coon.common.panel.WindowWrap', {
         window.open(url);
     },
 
-    onDestroy: function() {
-        // Ext.destroy(this.resizerDestroier);
-    },
-
 });

package/src/common/tree/BaseContextMenu.js

@@ -10,12 +10,13 @@ Ext.define('Coon.common.tree.BaseContextMenu', {
     validate: function() {
         let count = 0;
         if (this.items) {
+            this.shouldDisplaySeparator = false;
             this.items.each(Ext.bind(function(item) {
-                if (item.xtype == 'menuseparator') {
+                if (item.xtype === 'menuseparator') {
                     item.setVisible(this.shouldDisplaySeparator);
                     this.shouldDisplaySeparator = false;
                 }
-                if (item.isValid) {
+                if (Ext.isFunction(item.isValid)) {
                     const valid = item.isValid();
                     item.setVisible(valid);
                     if (valid) {
@@ -23,7 +24,7 @@ Ext.define('Coon.common.tree.BaseContextMenu', {
                         this.shouldDisplaySeparator = true;
                     }
                 }
-            }, this), {shouldDisplaySeparator: false});
+            }, this));
         }
         return count;
     },

package/src/log.js

@@ -19,9 +19,6 @@ Ext.define('Coon.log', {
         const me = this;
         if (!this.getInit() && this.isDebug) {
             this.setInit(true);
-            if (this.isDebug) {
-                this.injectViewer();
-            }
         }
         this.consoleError = window.console.error;
         this.getConsoleError = function() {
@@ -98,7 +95,7 @@ Ext.define('Coon.log', {
             // eslint-disable-next-line no-console
             console.trace(...args);
         } else {
-            if (Coon.log.isProduction && level === 'error') {
+            if (Coon.log.isProduction() && level === 'error') {
                 Coon.log.getConsoleError()(` [${level}]: `, ...args);
             } else {
                 // eslint-disable-next-line no-console
@@ -160,7 +157,9 @@ Ext.define('Coon.log', {
     getEmptyProxy() {
         const proxy = new Proxy({}, {
             get() {
-                return () => proxy;
+                return function() {
+                    return proxy;
+                };
             },
         });
         return proxy;

package/src/nav/AppNavCalcButton.js

@@ -0,0 +1,23 @@
+Ext.define('Coon.nav.AppNavCalcButton', {
+    extend: 'Ext.button.Button',
+    xtype: 'AppNavCalcButton',
+    cls: 'AppNavCalcButton',
+    iconCls: 'svg-icon svg-icon-calculator',
+    hidden: false,
+    width: 40,
+    height: 40,
+    margin: 0,
+
+    initComponent() {
+        this.setVisible(Coon.setup.get('showReportCalculator'));
+        Ext.on('enableReportCalculator', (enabled) => {
+            this.setVisible(enabled);
+        }, this);
+        this.callParent();
+    },
+
+    handler() {
+        Coon.report.component.calculator.ReportCalculatorPanel.open();
+        this.blur();
+    },
+});

package/src/nav/AppNavCalcButton.scss

@@ -0,0 +1,6 @@
+.AppNavCalcButton{
+    .x-btn-icon-el.svg-icon{
+        width: 20;
+        height: 28;
+    }
+}

package/src/nav/AppNavigationBar.js

@@ -7,6 +7,7 @@ Ext.define('Coon.nav.AppNavigationBar', {
     controller: 'AppNavigationBarViewController',
 
     cls: 'AppNavigationBar',
+    hidden: true,
 
     layout: {
         type: 'hbox',
@@ -42,7 +43,6 @@ Ext.define('Coon.nav.AppNavigationBar', {
             const el = Ext.create({
                 xtype: 'AppNavTab',
                 tabId: tab.id,
-                hidden: !Coon.setup.get('overrides.displacedMode'),
                 tooltip: text,
                 text,
                 first: idx === 0,

package/src/nav/AppNavigationMenuController.js

@@ -12,14 +12,14 @@ Ext.define('Coon.nav.AppNavigationMenuController', {
     menuUpdate: false,
     lastRoute: false,
     init: function(view) {
+        this.router = Ext.getApplication().appRouter;
         view.updateSelection = this.updateSelection.bind(this);
         view.getMenuReady = this.getMenuReady.bind(this);
         view.getFirstAvailable = this.getFirstAvailable.bind(this);
         view.changeMicro = this.changeMicro.bind(this);
         view.changeWorkspace = this.changeWorkspace.bind(this);
         this.view.on('selectionchange', this.onSelectMenuItem, this);
-        const appRouter = Ext.getApplication().appRouter;
-        this.lastRoute = appRouter && appRouter.lastRoute;
+        this.lastRoute = this.router && this.router.lastRoute;
         this.loadMenu(false, !!this.lastRoute);
         Ext.on('route:initial', (route) => {
             this.selectThenMenuReady = route.id;

package/src/nav/AppNavigationMenuMinimized.js

@@ -0,0 +1,61 @@
+Ext.define('Coon.nav.AppNavigationMenuMinimized', {
+    extend: 'Ext.Panel',
+    xtype: 'AppNavigationMenuMinimized',
+    // mixins: ['Coon.mixin.RelayMethods'],
+    requires: [
+        'Coon.nav.menu.WorkspaceMenuView',
+        'Coon.nav.AppNavigationMenuController'
+    ],
+    scrollable: 'y',
+    selectFirstOnLoad: true,
+    controller: 'AppNavigationMenuController',
+    viewModel: {
+        data: {
+            workspace_descr: null,
+            workspace_list: null,
+            workspace_icon: null,
+            navCollapsed: true,
+            collapsedWidth: 44,
+            fullWidth: 260,
+        },
+    },
+    fullWidth: 260,
+    cls: 'AppNavigationMenu',
+    layout: {
+        type: 'vbox',
+        align: 'stretch',
+    },
+    items: [
+        {
+            xtype: 'button',
+            textAlign: 'left',
+            margin: '0 0 15px 0',
+            bind: {
+                text: '{workspace_descr}',
+                menu: '{workspace_list}',
+                iconCls: '{workspace_icon}',
+                arrowVisible: '{!navCollapsed}',
+            },
+        },
+        {
+            xtype: 'WorkspaceMenuViewMinimized',
+            width: 260,
+            reference: 'WorkspaceMenuView',
+            store: {
+                root: {
+                    expanded: true,
+                    children: null,
+                },
+            },
+        }
+    ],
+
+    bind: {
+        width: `{!navCollapsed ? fullWidth : collapsedWidth}`,
+    },
+    initComponent: function() {
+        this.callParent();
+        this.relayEvents(this.lookup('WorkspaceMenuView'), ['selectionchange']);
+    },
+
+});