ru.coon 2.7.4 → 2.7.6

package/src/nav/AppNavigationBarViewController.js

@@ -1,66 +1,66 @@
-/* eslint-disable require-jsdoc */
-Ext.define('Coon.nav.AppNavigationBarViewController', {
-    extend: 'Ext.app.ViewController',
-    requires: [
-        'Coon.nav.AppNavTab',
-        'Coon.setup',
-        'Coon.eventBus'
-    ],
-
-    alias: 'controller.AppNavigationBarViewController',
-
-    locals: {
-        state: {},
-    },
-
-    init() {
-        Coon.eventBus.on('nav.loadMenuComponent', function(data) {
-            this.activateNavTab('menu', data);
-        }, this);
-        Coon.eventBus.on('nav.loadComponent', function(data) {
-            this.activateNavTab('plugin', data);
-        }, this);
-    },
-
-    setActiveState(id) {
-        this.getView().query('splitbutton').forEach((btn) => {
-            if (btn.checkId && btn.checkId(id)) {
-                btn.addCls('active');
-            } else {
-                btn.removeCls('active');
-            }
-        });
-    },
-
-    onCloseComponent(cmp) {
-        const view = this.getView();
-        const tab = view.getComponent('navbtn-' + cmp.id);
-        if (tab && !cmp.isNavRootCmp) {
-            view.remove(tab);
-        }
-    },
-
-    activateNavTab(source, data) {
-        const view = this.getView();
-        let {component, viewport, id} = data || {};
-        component = component || viewport.getComponent(id);
-        const tabId = id || component && component.xtype;
-        view.addTab({
-            text: (component.getTitle && component.getTitle()) || tabId,
-            root: source === 'menu',
-            viewport,
-            id: component.id,
-        });
-        this.setActiveState(tabId);
-        if (component) {
-            component.isNavRootCmp = source === 'CenterView';
-            component.on({
-                close: this.onCloseComponent,
-                destroy: this.onCloseComponent,
-                scope: this,
-            });
-        } else {
-            Coon.log.error(`APPNAV.component with id:[${id}] not found!`);
-        }
-    },
-});
+/* eslint-disable require-jsdoc */
+Ext.define('Coon.nav.AppNavigationBarViewController', {
+    extend: 'Ext.app.ViewController',
+    requires: [
+        'Coon.nav.AppNavTab',
+        'Coon.setup',
+        'Coon.eventBus'
+    ],
+
+    alias: 'controller.AppNavigationBarViewController',
+
+    locals: {
+        state: {},
+    },
+
+    init() {
+        Coon.eventBus.on('nav.loadMenuComponent', function(data) {
+            this.activateNavTab('menu', data);
+        }, this);
+        Coon.eventBus.on('nav.loadComponent', function(data) {
+            this.activateNavTab('plugin', data);
+        }, this);
+    },
+
+    setActiveState(id) {
+        this.getView().query('splitbutton').forEach((btn) => {
+            if (btn.checkId && btn.checkId(id)) {
+                btn.addCls('active');
+            } else {
+                btn.removeCls('active');
+            }
+        });
+    },
+
+    onCloseComponent(cmp) {
+        const view = this.getView();
+        const tab = view.getComponent('navbtn-' + cmp.id);
+        if (tab && !cmp.isNavRootCmp) {
+            view.remove(tab);
+        }
+    },
+
+    activateNavTab(source, data) {
+        const view = this.getView();
+        let {component, viewport, id} = data || {};
+        component = component || viewport.getComponent(id);
+        const tabId = id || component && component.xtype;
+        view.addTab({
+            text: (component.getTitle && component.getTitle()) || tabId,
+            root: source === 'menu',
+            viewport,
+            id: component.id,
+        });
+        this.setActiveState(tabId);
+        if (component) {
+            component.isNavRootCmp = source === 'CenterView';
+            component.on({
+                close: this.onCloseComponent,
+                destroy: this.onCloseComponent,
+                scope: this,
+            });
+        } else {
+            Coon.log.error(`APPNAV.component with id:[${id}] not found!`);
+        }
+    },
+});

package/src/nav/AppNavigationMenu.js

@@ -1,43 +1,42 @@
 Ext.define('Coon.nav.AppNavigationMenu', {
     extend: 'Ext.Panel',
     xtype: 'AppNavigationMenu',
-
     // mixins: ['Coon.mixin.RelayMethods'],
-
     requires: [
         'Coon.nav.menu.WorkspaceMenuView',
         'Coon.nav.AppNavigationMenuController'
     ],
+    scrollable: 'y',
+    selectFirstOnLoad: true,
     controller: 'AppNavigationMenuController',
-
-    cls: 'AppNavigationMenu',
-
-    updateSelection: function(selection) {
-        return this.getController().selectMenuItem(selection);
-    },
-
-    getMenuReady: function() {
-        return this.getController().getMenuReady();
-    },
-
-    getFirstAvailable: function() {
-        return this.getController().getFirstAvailable();
-    },
-
-    changeMicro: function(micro) {
-        this.lookup('WorkspaceMenuView').setMicro(micro);
+    viewModel: {
+        data: {
+            workspace_descr: null,
+            workspace_list: null,
+            workspace_icon: null,
+            navCollapsed: false,
+            collapsedWidth: 44,
+            fullWidth: 260,
+        },
     },
-
-    changeWorkspace: function(workspace, selectFirst) {
-        return this.getController().changeWorkspace(workspace, selectFirst);
+    fullWidth: 260,
+    cls: 'AppNavigationMenu',
+    layout: {
+        type: 'vbox',
+        align: 'stretch',
     },
-
-    initComponent: function() {
-        this.layout = {
-            type: 'vbox',
-            align: 'stretch',
+    items: [
+        {
+            xtype: 'button',
+            textAlign: 'left',
+            bind: {
+                text: '{workspace_descr}',
+                menu: '{workspace_list}',
+                iconCls: '{workspace_icon}',
+                arrowVisible: '{!navCollapsed}',
+            },
         },
-        this.workspaceMenuView = Ext.create({
+        {
             xtype: 'WorkspaceMenuView',
             reference: 'WorkspaceMenuView',
             store: {
@@ -46,23 +45,15 @@ Ext.define('Coon.nav.AppNavigationMenu', {
                     children: null,
                 },
             },
-        });
-        this.items = [
-            {
-                xtype: 'button',
-                textAlign: 'left',
-                bind: {
-                    text: '{workspace_descr}',
-                    menu: '{workspace_list}',
-                    iconCls: '{workspace_icon}',
-                    arrowVisible: '{!navCollapsed}',
-                },
-            },
-            this.workspaceMenuView
-        ];
-        this.relayEvents(this.workspaceMenuView, ['selectionchange']);
-        // this.relayMethods(this, ['getFirstAvailable', 'getMenuReady', 'updateSelection']);
+        }
+    ],
+
+    bind: {
+        width: `{!navCollapsed ? fullWidth : collapsedWidth}`,
+    },
+    initComponent: function() {
         this.callParent();
+        this.relayEvents(this.lookup('WorkspaceMenuView'), ['selectionchange']);
     },
 
 });

package/src/nav/AppNavigationMenu.scss

@@ -1,64 +1,64 @@
-.AppNavigationMenu {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .x-btn-arrow-right:after {
-    color: white;
-  }
-
-  -ms-overflow-style: none;
-
-  .x-panel-body-default {
-    .x-box-inner {
-      width: 260px !important;
-
-      .x-box-target {
-        width: 260px !important;
-
-        .x-btn-default-small {
-          width: 260px !important;
-        }
-
-        .x-menuview {
-          width: 260px !important;
-        }
-      }
-    }
-  }
-
-  .x-panel-body-default {
-    background-color: $base-color;
-  }
-
-  .x-treelist-menu {
-    width: 260px !important;
-  }
-
-  .x-btn-button-default-small {
-    .x-btn-icon-el {
-      &.svg-icon {
-        background-color: lighten(lightgray, 5%);
-        width: 24px;
-        height: 24px;
-        margin-left: 2px;
-      }
-    }
-  }
-
-  .x-btn-default-small {
-    padding: 4px 6px;
-  }
-
-  .x-btn-inner-default-small {
-    letter-spacing: 0.03em;
-    font-size: 16px;
-    font-weight: 500;
-    padding-left: 8px;
-    color: white;
-  }
-
-  .x-btn-arrow-right:after {
-    color: white;
-  }
-}
+.AppNavigationMenu {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .x-btn-arrow-right:after {
+    color: white;
+  }
+
+  -ms-overflow-style: none;
+
+  .x-panel-body-default {
+    .x-box-inner {
+      width: 260px !important;
+
+      .x-box-target {
+        width: 260px !important;
+
+        .x-btn-default-small {
+          width: 260px !important;
+        }
+
+        .x-menuview {
+          width: 260px !important;
+        }
+      }
+    }
+  }
+
+  .x-panel-body-default {
+    background-color: $base-color;
+  }
+
+  .x-treelist-menu {
+    width: 260px !important;
+  }
+
+  .x-btn-button-default-small {
+    .x-btn-icon-el {
+      &.svg-icon {
+        background-color: lighten(lightgray, 5%);
+        width: 24px;
+        height: 24px;
+        margin-left: 2px;
+      }
+    }
+  }
+
+  .x-btn-default-small {
+    padding: 4px 6px;
+  }
+
+  .x-btn-inner-default-small {
+    letter-spacing: 0.03em;
+    font-size: 16px;
+    font-weight: 500;
+    padding-left: 8px;
+    color: white;
+  }
+
+  .x-btn-arrow-right:after {
+    color: white;
+  }
+}

package/src/nav/AppNavigationMenuController.js

@@ -6,13 +6,52 @@ Ext.define('Coon.nav.AppNavigationMenuController', {
         data: null,
     },
     menuReady: false,
-
+    selectThenMenuReady: undefined,
+    addWorkspaceToUrl: false,
     init: function(view) {
+        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);
         this.loadMenu();
         view.getFirstAvailable = this.getFirstAvailable.bind(this);
+        Ext.on('route:initial', (route) => {
+            this.selectThenMenuReady = route.id;
+        });
+        Ext.on('route:change', (route) => this.selectMenuItem.call(this, route.id));
+        Ext.on('route:unmatched', () => this.goTo(this.getFirstAvailable()));
+        const vm = this.getViewModel();
+        Ext.on('nav:toggle', () => {
+            vm.set('navCollapsed', !vm.get('navCollapsed'));
+            vm.getParent().set('navCollapsed', vm.get('navCollapsed'));
+            this.changeMicro(vm.get('navCollapsed'));
+        });
+        Ext.on('nav:reload', () => this.updateMenu());
+    },
+    initViewModel(vm) {
+        vm.set('fullWidth', this.getView().fullWidth);
+    },
+    onMenuReady() {
+        const ws = this.locals.data.ws.entries().next().value.at(0);
+        this.changeWorkspace(ws, false);
+        if (this.selectThenMenuReady) {
+            this.selectMenuItem(this.selectThenMenuReady);
+        } else {
+            this.view.selectFirstOnLoad && this.goTo(this.getFirstAvailable(), true);
+        }
+    },
+    updateSelection: function(selection) {
+        return this.selectMenuItem(selection);
+    },
+
+    changeMicro: function(micro) {
+        this.lookup('WorkspaceMenuView').setMicro(micro);
     },
 
     updateMenu: function() {
+        Coon.nav.MenuEntity.menuItems = null;
         this.loadMenu();
     },
 
@@ -74,6 +113,21 @@ Ext.define('Coon.nav.AppNavigationMenuController', {
         return Object.values(menu);
     },
 
+    goTo(id, force = false) {
+        if (id) {
+            let prefix = '';
+            if (this.addWorkspaceToUrl) {
+                const ws = this.getViewModel().get('workspace') || this.getFirstAvailable().ws.ws;
+                prefix = ws && ws + '/';
+            }
+            this.redirectTo(prefix + id, {force});
+        }
+    },
+
+    onSelectMenuItem: function(navCmp, item) {
+        this.goTo(item && item.get('UI_ELEMENT_CD'));
+    },
+
     selectMenuItem: function(uiElementCd) {
         if (!this.menuReady) {
             return;
@@ -90,6 +144,7 @@ Ext.define('Coon.nav.AppNavigationMenuController', {
 
         if (!menuItem) {
             console.error('unmatchedRoute: ' + uiElementCd);
+            this.goTo(this.getFirstAvailable());
             return;
         }
 
@@ -111,65 +166,64 @@ Ext.define('Coon.nav.AppNavigationMenuController', {
         this.fireViewEvent('select', node);
         return node;
     },
-    loadMenu: function() {
-        return Coon.util.promisifyCmd('command.GetDynamicReportDataCommand', 'MENU_ALLITEMS')
-            .then((data) => {
-                if (Array.isArray(data.list)) {
-                    const transformData = data.list.map((el) => {
-                        return Coon.Function.convertObjectByMapping(el, {
-                            MENU_ENTRY_ICON: 'iconCls',
-                            MENU_ENTRY_DESCR: 'text',
-                        });
+    loadMenu() {
+        Coon.nav.MenuEntity.get().then((menu) => {
+            if (Array.isArray(menu)) {
+                const dataList = this.prepareMenuData(menu);
+                const transformData = dataList.map((el) => {
+                    return Coon.Function.convertObjectByMapping(el, {
+                        MENU_ENTRY_ICON: 'iconCls',
+                        MENU_ENTRY_DESCR: 'text',
+                    });
+                });
+                this.locals.data = transformData.reduce((acc, el) => {
+                    acc.ws.set(el.WORKSPACE_CD, {
+                        ws: el.WORKSPACE_CD,
+                        text: el.WORKSPACE_DESCR,
+                        iconCls: el.WORKSPACE_ICON,
                     });
-                    this.locals.data = transformData.reduce((acc, el) => {
-                        acc.ws.set(el.WORKSPACE_CD, {
-                            ws: el.WORKSPACE_CD,
-                            text: el.WORKSPACE_DESCR,
-                            iconCls: el.WORKSPACE_ICON,
-                        });
-                        acc.items[el.WORKSPACE_CD] = acc.items[el.WORKSPACE_CD] || {};
-                        acc.items[el.WORKSPACE_CD][el.MENU_ENTRY_CD] = el;
-                        acc.menu.push(el);
-                        return acc;
-                    }, {ws: new Map(), items: {}, menu: []});
-
-                    const items = [];
-                    const me = this;
-                    this.locals.data.ws.forEach((item) => {
-                        items.push({
-                            text: item.text,
-                            width: 260,
-                            value: item.ws,
-                            iconCls: item.iconCls,
-                            handler: function() {
-                                me.changeWorkspace(this.value, true);
-                            },
-                        });
+                    acc.items[el.WORKSPACE_CD] = acc.items[el.WORKSPACE_CD] || {};
+                    acc.items[el.WORKSPACE_CD][el.MENU_ENTRY_CD] = el;
+                    acc.menu.push(el);
+                    return acc;
+                }, {ws: new Map(), items: {}, menu: []});
+
+                const items = [];
+                const me = this;
+                this.locals.data.ws.forEach((item) => {
+                    items.push({
+                        text: item.text,
+                        width: this.getView().fullWidth,
+                        value: item.ws,
+                        iconCls: item.iconCls,
+                        handler: function() {
+                            me.changeWorkspace(this.value, true);
+                        },
                     });
-                    this.getViewModel().set('workspace_list', items);
-
-                    Object.entries(this.locals.data.items).forEach(function(workspace) {
-                        const [workspaceId, workspaceItems] = workspace;
-                        Object.values(workspaceItems).forEach(function(el) {
-                            el.leaf = el.LEAF_SW === 'Y';
-                            if (el.PARENT_MENU_ENTRY_CD) { // значит вложенный
-                                const parent = this.locals.data.items[workspaceId][el.PARENT_MENU_ENTRY_CD];
-                                if (parent) {
-                                    parent.children = parent.children || [];
-                                    parent.children.push(el);
-                                }
+                });
+                this.getViewModel().set('workspace_list', items);
+
+                Object.entries(this.locals.data.items).forEach(function(workspace) {
+                    const [workspaceId, workspaceItems] = workspace;
+                    Object.values(workspaceItems).forEach(function(el) {
+                        el.leaf = el.LEAF_SW === 'Y';
+                        if (el.PARENT_MENU_ENTRY_CD) { // значит вложенный
+                            const parent = this.locals.data.items[workspaceId][el.PARENT_MENU_ENTRY_CD];
+                            if (parent) {
+                                parent.children = parent.children || [];
+                                parent.children.push(el);
                             }
-                        }, this);
+                        }
                     }, this);
-                    this.menuReady = true;
-                    this.fireViewEvent('menuReady');
-                } else {
-                    Ext.Msg.alert('ошибка', 'некорректный формат ответа или нет данных');
-                }
-            });
+                }, this);
+                this.menuReady = true;
+                this.fireViewEvent('menuReady');
+                Ext.fireEvent('nav:ready');
+                this.onMenuReady();
+            }
+        });
     },
-
-    onToggleNavigationSize: function(micro) {
-        this.getViewModel().set('micro', micro);
+    prepareMenuData(data) {
+        return data;
     },
 });

package/src/nav/AppNavigationToggleButton.js

@@ -0,0 +1,9 @@
+Ext.define('Coon.nav.AppNavigationToggleButton', {
+    extend: 'Ext.button.Button',
+    xtype: 'AppNavigationToggleButton',
+    cls: 'AppNavigationToggleButton',
+    iconCls: 'svg-icon svg-icon-menu-open',
+    handler() {
+        Ext.fireEvent('nav:toggle');
+    },
+});

package/src/nav/AppNavigationToggleButton.scss

@@ -0,0 +1,6 @@
+.AppNavigationToggleButton{
+    .x-btn-icon-el.svg-icon{
+        width: 33px;
+        height: 24px;
+    }
+}

package/src/nav/MenuEntity.js

@@ -0,0 +1,35 @@
+Ext.define('Coon.nav.MenuEntity', {
+    singleton: true,
+    menuItems: null,
+    isLoading: false,
+    promise: null,
+    get() {
+        if (typeof this.menuItems === 'object' && Array.isArray(this.menuItems) && this.isLoading === false) {
+            return new Promise((resolve) => {
+                resolve(this.menuItems);
+            });
+        } else if (!this.promise) {
+            this.isLoading = true;
+            this.promise = Coon.util.promisifyCmd('command.GetDynamicReportDataCommand', 'MENU_ALLITEMS')
+                .then((data) => {
+                    if (Array.isArray(data.list)) {
+                        this.menuItems = data.list;
+                    } else {
+                        Ext.Msg.alert('ошибка', 'некорректный формат ответа или нет данных');
+                    }
+                    this.isLoading = false;
+                    return this.menuItems;
+                }).finally(() => {
+                    this.promise = null;
+                });
+        }
+        return this.promise;
+    },
+
+    isValid(uiElement) {
+        return this.get().then((data) => {
+            return !!data.find((i) => i.UI_ELEMENT_CD === uiElement);
+        });
+    },
+
+});