ru.coon 2.8.66 → 3.0.2

package/src/app/viewPort/CenterView.js

@@ -1,65 +1,172 @@
 Ext.define('Coon.app.viewPort.CenterView', {
-    extend: 'Ext.container.Container',
+    extend: 'Ext.tab.Panel',
     xtype: 'centerview',
-    requires: ['Coon.util'],
-    controller: 'CenterViewController',
-    layout: 'card',
-    viewModel: true,
+
+    requires: [
+        'Coon.util',
+        'Coon.common.ComponentFactory',
+        'Ext.ux.TabReorderer'
+    ],
+
+    config: {
+        tabLimit: 50,
+    },
+
+    plugins: {
+        tabreorderer: {
+            animate: false,
+        },
+    },
+
+    frame: true,
+
+    cls: 'CenterView',
+    bodyCls: 'CenterView-body',
+
+    tabBar: {
+        cls: 'CenterViewTabBar',
+    },
+
     defaultComponentType: 'panel',
-    style: {
-        backgroundColor: 'white',
+
+    initComponent() {
+        this.callParent();
+
+        Ext.on('route:change', this.setMenuComponent, this);
+
+        this.on('beforeadd', function() {
+            return !this.isTabLimit();
+        }, this);
+
+        this.on('add', function(_, component) {
+            component.on('render', function() {
+                this.setScrollButtonVisibility();
+            }, this, {single: true});
+        }, this);
+        this.on('remove', function() {
+            this.setScrollButtonVisibility();
+        }, this);
     },
-    constructor() {
-        this.callParent(arguments);
-        this.app = Ext.getApplication();
-        Ext.on('route:change', this.display.bind(this));
+
+    setScrollButtonVisibility() {
+        if (!this.getTabBar().rendered) {
+            return;
+        }
+        const tabbarEl = this.getTabBar().getEl().down('.x-box-target')?.dom;
+        if (!tabbarEl) {
+            console.error('tabbar el not found');
+            return;
+        }
+        if (this.isOverflown(tabbarEl)) {
+            this.getTabBar().addCls('display-sliders');
+        } else {
+            this.getTabBar().removeCls('display-sliders');
+        }
+    },
+
+    isOverflown(element) {
+        return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
     },
+
     onRender() {
         this.callParent(arguments);
         const {initialRoute} = Ext.getApplication();
         if (initialRoute) {
-            this.display(initialRoute);
+            this.setMenuComponent(initialRoute);
         }
     },
-    findComponent(config) {
-        return (
-            this.items &&
-            this.items.findBy((item) =>
-                Coon.util.objectsIsEqual(item.initialConfig, config)
-            )
-        );
-    },
-    resolveComponentType(token) {
-        let type;
-        switch (String(token).toUpperCase()) {
-        case 'R':
-            type = 'report';
-            break;
-        case 'P':
-            type = 'panel';
-            break;
+
+    findComponent(componentContextId) {
+        const component = this.getTabComponents()
+            .find((cmp) => cmp.componentContextId === componentContextId);
+        if (component && !component.destroyed) {
+            return component;
         }
-        return type || token;
     },
-    display(cmp) {
-        if (!cmp.id) {
+
+    setMenuComponent(route) {
+        Coon.log.debug('display', route);
+        if (!route.id) {
             return;
         }
-        Coon.nav.MenuEntity.isValid(cmp.id).then(async (valid) => {
-            if (valid === true) {
-                const type = this.resolveComponentType(cmp.type) || this.defaultComponentType;
-                const config = await this.getController().create(cmp.id, type, cmp.params);
-                if (config) {
-                    Ext.fireEvent('nav:hide', !!config._preferFullScreen);
-                    const cmp = this.findComponent(config);
-                    const active = this.setActiveItem(
-                        cmp && !cmp.destroyed ? cmp : Ext.create(config)
-                    );
-                    active && active.fireEvent('router:activate', active);
-                } else {
-                    Ext.fireEvent('route:unmatched');
-                }
+        const existedComponent = this.findComponent(route.id);
+        if (existedComponent) {
+            this.setActiveTab(existedComponent);
+            return;
+        }
+        const component = Coon.common.ComponentFactory.createTabComponent(route);
+        const active = this.setActiveComponent(component);
+        active && active.fireEvent('activatecomponent', active);
+    },
+
+    setActiveComponent(component) {
+        const routeId = component.menuItem && component.menuItem.MENU_ENTRY_CD ||
+            component.reportId || component.uiElementCd;
+        Coon.log.debug(
+            'setActiveComponent',
+            {
+                ui: component.uiElementCd,
+                reportId: component.reportId,
+                routeId,
+                ctx: Coon.util.ContextManager.getContext(component.componentContextId),
+            }
+
+        );
+        const previousView = this.getLayout().getActiveItem();
+        const isComponentExist = this.findComponent(component.componentContextId);
+        if (isComponentExist) {
+            return this.setActiveTab(isComponentExist);
+        }
+        if (previousView) {
+            component.prevComponentContextId = previousView.componentContextId;
+        }
+        this.add(component);
+
+        component.on('titlechange', function(view, title) {
+            if (view.tab) {
+                view.tab.setText(title);
             }
         });
+
+        component.on('destroy', function() {
+            const activeTab = this.getActiveTab();
+            if (!activeTab || !activeTab.menuItem) {
+                Ext.fireEvent('nav:menuitemchange');
+                Ext.getApplication().appRouter.redirectTo('/', {force: true});
+                return;
+            }
+            Ext.fireEvent('nav:menuitemclick', activeTab.menuItem.MENU_ENTRY_CD);
+        }, this);
+
+        if (!component.menuItem) {
+            component.on('close', function() {
+                const tab = component.tab;
+                this.remove(component);
+                this.getTabBar().remove(tab);
+            }, this);
+        }
+
+        return this.setActiveTab(component);
+    },
+
+    getTabComponents() {
+        return this.getLayout().getLayoutItems();
+    },
+
+    isTabLimit() {
+        const tabCount = this.getTabComponents().length;
+        if (tabCount === this.getTabLimit()) {
+            Ext.Msg.alert(
+                `Достигнут лимит`,
+                `Превышен лимит вкладок(${this.getTabLimit()}),<br />пожалуйста закройте неиспользуемые!`
+            );
+            return true;
+        }
+    },
+
+    onCloseActiveComponent(component) {
+        const previousView = this.findComponent(component.prevComponentContextId);
+        previousView && this.setActiveTab(previousView);
     },
+
 });

package/src/app/viewPort/CenterView.scss

@@ -0,0 +1,151 @@
+.CenterView {
+  border: none;
+  .CenterViewTabBar {
+    .x-box-target {
+      display: flex;
+      flex-flow: row;
+      justify-content: flex-start;
+      width: 100% !important;
+    }
+    .x-tab {
+      position: relative !important;
+      &:not(.x-dd-drag-current) {
+        left: 0 !important;
+      }
+      &.x-dd-drag-current {
+        position: absolute !important;
+      }
+    }
+    .x-tab-inner {
+      text-overflow: unset;
+      overflow: visible;
+    }
+    .x-tab-inner-default {
+      color: #111111;
+      font-weight: 400;
+    }
+    .x-tab-bar-body {
+      padding-left: 0;
+    }
+    .x-tab.x-tab-focus.x-tab-active.x-tab-default {
+      border-color: #DEDEDE;
+    }
+    .x-tab.x-tab-focus.x-tab-default {
+      border-color: #DEDEDE;
+    }
+    span.x-tab-close-btn {
+      color: #777!important;
+      font-size: 14px!important;
+      width: 36px;
+      height: 100%;
+      background: linear-gradient(90deg, rgba(245,245,245,0) 0%, #F5F5F5 30%);
+      &::before {
+        width: 100%;
+        height: 100%;
+        top: 4px;
+        position: relative;
+      }
+    }
+    span.x-tab-icon-el {
+      mask-size: 16px!important;
+      background-color: gray;
+    }
+    .x-tab-wrap {
+      text-transform: none!important;
+      display: flex;
+    }
+    .x-tab {
+      border-width: 1px 1px 0 0!important;
+      max-width: 300px;
+      min-width: 120px;
+      padding: 4px 36px 4px 10px;
+      border-color: #DEDEDE;
+      border-top: 1px solid transparent;
+      .x-tab-button {
+        display: flex;
+        width: 100%;
+        padding: 0;
+      }
+      .x-tab-inner-default {
+        text-overflow: ellipsis;
+      }
+    }
+    .x-tab-active {
+      background-color: #FFFFFF !important;
+      border-width: 1px 1px 0 0!important;
+      border-top: 1px solid #DEDEDE;
+      .x-tab-inner {
+        color: #000000;
+      }
+      span.x-tab-close-btn {
+        background: linear-gradient(90deg, rgba(245,245,245,0) 0%, #fff 30%);
+      }
+      &.x-tab-over {
+        span.x-tab-close-btn {
+          background: linear-gradient(90deg, rgba(245,245,245,0) 0%, #fff 30%);
+        }
+      }
+    }
+    .x-tab-over {
+      background-color: #ECECEC;
+      .x-tab-inner-default {
+        color: #111;
+      }
+      span.x-tab-close-btn {
+        background: linear-gradient(90deg, rgba(245,245,245,0) 0%, #ECECEC 30%);
+      }
+      &.x-tab-focus {
+        background-color: #ECECEC;
+        span.x-tab-close-btn {
+          background: linear-gradient(90deg, rgba(245,245,245,0) 0%, #ECECEC 30%);
+        }
+      }
+      &.x-tab-active {
+        span.x-tab-close-btn {
+          background: linear-gradient(90deg, rgba(245,245,245,0) 0%, #fff 30%);
+        }
+      }
+    }
+    .x-tab-focus {
+      background-color: #ECECEC;
+    }
+  }
+  .title-block:hover{
+    .add-to-favorite:not(.is-favorite-item):hover{
+      color: #b4b4b4 !important;
+    }
+  }
+  .title-block{
+    .add-to-favorite{
+      color: #dddddd !important;
+      cursor: pointer;
+      font-size: 14px !important;
+    }
+    .is-favorite-item{
+      color: #ff9800 !important;
+    }
+  }
+  .x-box-scroller {
+    display: none !important;
+    font: 13px / 26px Material Icons, "Font Awesome 5 Free";
+    height: 28px;
+    &.x-box-scroller-left {
+      border-right: solid 1px #dedede;
+    }
+    &.x-box-scroller-right {
+      border-left: solid 1px #dedede;
+    }
+  }
+  .x-box-scroller-body-horizontal {
+    margin: 0;
+  }
+  .display-sliders {
+    .x-box-scroller {
+      display: block !important;
+    }
+    .x-box-scroller-body-horizontal {
+      margin-left: 24px;
+    }
+  }
+}
+

package/src/app/viewPort/ComponentContextManager.js

@@ -0,0 +1,24 @@
+Ext.define('Coon.app.viewPort.ComponentContextManager', {
+    contextPropertyName: 'componentContextId',
+    alternateClassName: 'Coon.aka.CmpCtxManager',
+
+    statics: {
+        generateContectId(data) {
+            return Coon.util.generateHashFromObj(data);
+        },
+    },
+
+    constructor(config = {}) {
+        if (typeof config.rootId !== 'string' && !config.rootId) {
+            throw new Error('ComponentContextManager must have rootId');
+        }
+        const rootId = config.rootId;
+        this.getRootId = function() {
+            return rootId;
+        };
+    },
+
+    setComponent(component, context) {
+        // if
+    },
+});

package/src/app/viewPort/Main.js

@@ -50,8 +50,11 @@ Ext.define('Coon.app.viewPort.Main', {
                     xtype: 'AppNavigationToggleButton',
                 },
                 {
-                    xtype: 'AppNavigationBar',
+                    xtype: 'container',
                     flex: 1,
+                },
+                {
+                    xtype: 'AppNavCalcButton',
                 }
             ],
         },

package/src/app/viewPort/Routing.d2

@@ -0,0 +1,23 @@
+changeUrl->Router.routes./\#r/ReportId{label: загрузить репорт в dev-режиме}
+changeUrl->Router.routes./\#p/CustomPanelId{label: загрузить кастомную панель в dev-режиме}
+changeUrl->Router.routes./\#UiElementCd{label: начитать uiElementCd для загрузки компонента пункта меню}
+
+Router: {
+	routes: {
+		/\#r/ReportId
+		/\#p/CustomPanelId
+		/\#UiElementCd
+	}
+	routes./\#r/ReportId -> ReportPanel_create
+	routes./\#p/CustomPanelId -> loadUlElement(xtype=UiCustomPanel): async load
+	loadUlElement(xtype=UiCustomPanel) -> UiCustomPanel_instancing
+	routes./\#UiElementCd -> loadUlElement
+	loadUlElement -> 'xtype=ReportPanel'
+	loadUlElement -> 'xtype=UiCustomPanel' -> loadUlElement(xtype=UiCustomPanel)
+}
+
+Router.loadUlElement.'xtype=ReportPanel' -> ComponentFactory.createRootNavComponent
+
+ComponentFactory: {
+	createRootNavComponent
+}

package/src/app/viewPort/TabHistory.js

@@ -0,0 +1,81 @@
+Ext.define('Coon.app.viewPort.TabHistory', {
+    singleton: true,
+
+
+    getCenterView() {
+        if (!this.centerview) {
+            this.centerview = Ext.ComponentQuery.query('centerview')[0];
+        }
+        return this.centerview;
+    },
+
+    registerTab(component) {
+        const routeId = component.menuItem && component.menuItem.MENU_ENTRY_CD ||
+            component.reportId || component.uiElementCd;
+        const config = {
+            ui: component.uiElementCd,
+            reportId: component.reportId,
+            routeId,
+            ctxId: component.componentContextId,
+            text: component.getTitle && component.getTitle(),
+            ctx: Coon.util.ContextManager.getContext(component.componentContextId),
+        };
+        if (!this.inited && this.getHeaderCt()) {
+            this.inited = true;
+            this.ct.add(this.getHistoryComponent());
+            const menu = this.ct.down('#TabHistoryMenu');
+            menu.on('click', function(_, item) {
+                console.log('item.inHistory', item, item.inHistory);
+                if (item.inHistory) {
+                    return;
+                }
+                this.getCenterView().setActiveComponent({componentContextId: item.ctxId});
+            }, this);
+        }
+        if (this.inited) {
+            const menu = this.ct.down('#TabHistoryMenu');
+            console.log('config', config, component);
+            component.on('titlechange', function(_, title) {
+                menu.down(`[menuItemId=${config.ctxId}]`).setText(title);
+            });
+            component.on('beforedestroy', function() {
+                const menuItem = menu.down(`[menuItemId=${config.ctxId}]`);
+                menuItem.inHistory = true;
+                menuItem.setIconCls('');
+                return true;
+            });
+            const menuItem = menu.down(`[menuItemId=${config.ctxId}]`);
+            if (menuItem) {
+                menuItem.inHistory = false;
+                menuItem.setIconCls('x-fa fa-home');
+            } else {
+                menu.add({
+                    iconCls: 'x-fa fa-home',
+                    text: config.text || config.routeId,
+                    menuItemId: config.ctxId,
+                });
+            }
+        }
+    },
+
+    getHistoryComponent() {
+        return {
+            xtype: 'button',
+            text: '...',
+            menu: {
+                itemId: 'TabHistoryMenu',
+                maxWidth: 560,
+                margin: 4,
+                items: [],
+            },
+        };
+    },
+
+    getHeaderCt() {
+        if (this.ct) {
+            return this.ct;
+        }
+        this.ct = Ext.ComponentQuery.query('#headerFlexCt')[0];
+        return this.ct;
+    },
+});

package/src/common/ComponentFactory.js

@@ -0,0 +1,167 @@
+Ext.define('Coon.common.ComponentFactory', {
+    singleton: true,
+
+    requires: [
+        'Coon.util.ContextManager'
+    ],
+
+    cache: new Map(),
+
+    triggerPlugin(pluginId, target) {
+        if (target && Array.isArray(target.plugins)) {
+            const triggerPlugin = target.plugins.find((p) => p.pluginId === pluginId);
+            if (triggerPlugin && typeof triggerPlugin.handler === 'function') {
+                triggerPlugin.handler.call(triggerPlugin);
+            }
+        }
+    },
+
+    onActivateComponent(params, cmp) {
+        if (cmp.xtype === 'ReportPanel') {
+            if (params) {
+                cmp.updateFilterDefaults(params);
+                if (params.plugin) {
+                    if (!cmp.grid) {
+                        cmp.on('gridReady', (reportPanel) => {
+                            this.triggerPlugin(params.plugin, reportPanel.grid);
+                        });
+                    } else {
+                        this.triggerPlugin(params.plugin, cmp.grid);
+                    }
+                }
+            }
+        }
+    },
+
+    paramsToObject(params) {
+        const entries = [];
+        if (Array.isArray(params) && params.length > 1) {
+            for (let i = 0; i < Math.floor(params.length / 2); i++) {
+                entries.push([params[i * 2], params[i * 2 + 1]]);
+            }
+        }
+        return entries.length ? Object.fromEntries(entries) : null;
+    },
+
+    getRootComponentConfig(route, useCache = true) {
+        const {id, params = [], menuItem} = route;
+        if (!id) {
+            throw new Error('не задан id у пункта меню');
+        }
+        const uiElementCd = menuItem.UI_ELEMENT_CD;
+        const cacheKey = JSON.stringify({uiElementCd, params});
+        const cachedComponent = useCache && this.cache.get(cacheKey);
+        if (cachedComponent) {
+            return cachedComponent;
+        }
+        const config = route.uiElement;
+
+        const paramsObject = this.paramsToObject(params);
+        const filterDefaults =
+          (paramsObject && Object.assign(paramsObject, {doFilter: true})) || {};
+
+        if (!Ext.isObject(config)) {
+            throw new Error('неверный формат элемента пункта меню');
+        }
+        if (typeof config.propertyData === 'string') {
+            config.propertyData = JSON5.parse(
+                config.propertyData,
+                (key, value) => {
+                    if (value === 'true') {
+                        return true;
+                    }
+                    if (value === 'false') {
+                        return false;
+                    }
+                    return value;
+                }
+            );
+        }
+        Object.assign(
+            config,
+            {xtype: config.xtype, itemId: uiElementCd},
+            config.propertyData
+        );
+        if (config.xtype === 'ReportPanel') {
+            Object.assign(config, {
+                filterDefaults,
+                listeners: {
+                    activatecomponent: this.onActivateComponent.bind(
+                        this,
+                        paramsObject
+                    ),
+                },
+            });
+        } else if (config.xtype === 'UiCustomPanel') {
+            Object.assign(config, {
+                listeners: {
+                    activatecomponent: this.onActivateComponent.bind(
+                        this,
+                        paramsObject
+                    ),
+                    afterrender(panel) {
+                        Coon.Function.executeComponentDoInit(panel, paramsObject);
+                    },
+                },
+            });
+        } else {
+            Object.assign(config, {
+                listeners: {
+                    afterrender(panel) {
+                        Coon.Function.executeComponentDoInit(panel, paramsObject);
+                    },
+                },
+            });
+        }
+
+        config.menuItem = menuItem;
+
+        config.ctxMgr = Coon.util.ContextManager;
+        config.componentContextId = config.ctxMgr.createContext(null, {
+            params,
+            menuItem,
+        }, route.id);
+        cacheKey && this.cache.set(cacheKey, config);
+        return config;
+    },
+
+    createTabComponent(route) {
+        const config = this.getRootComponentConfig(route);
+        const menuItem = config.menuItem;
+        config.layout = config.layout || 'fit';
+        const onIconClick = function() {
+            if (menuItem) {
+                Ext.fireEvent('nav:menuitemtofavoriteclick', menuItem.MENU_ENTRY_CD, false);
+            }
+        };
+        if (menuItem) {
+            config.title = {
+                xtype: 'title',
+                cls: 'title-block',
+                iconCls: 'fa fa-star add-to-favorite',
+                title: menuItem.MENU_ENTRY_DESCR,
+                listeners: {
+                    click: onIconClick,
+                    element: 'iconEl',
+                },
+            };
+        }
+        const instanceConfig = {
+            xtype: 'CVWrapperPanel',
+            closable: true,
+            componentContext: config.componentContext,
+            menuItem: config.menuItem,
+            componentContextId: route.id,
+            tabConfig: {
+                title: menuItem.MENU_ENTRY_DESCR,
+                tooltip: menuItem.MENU_ENTRY_DESCR,
+                iconCls: menuItem.MENU_ENTRY_ICON,
+            },
+            items: [config],
+            title: menuItem.MENU_ENTRY_DESCR,
+        };
+        const instance = Ext.create(instanceConfig);
+        return instance;
+    },
+
+});