ru.coon 2.8.66 → 3.0.2

package/src/VisualLinker.scss

@@ -0,0 +1,219 @@
+// visualLinker-linkerLine - главный элемент соединения
+.visualLinker-linkerLine {
+    --width: 30px;
+    --size: 6px;
+    --x: 0px;
+    --y: 0px;
+    --z-index: 1;
+    --bg-color: #fff;
+    --border-color: rgb(61, 103, 128);
+    
+    position: absolute;
+    width: var(--width);
+    height: var(--size);
+    top: var(--y);
+    left: var(--x);
+    background-color: var(--bg-color);
+    z-index: var(--z-index);
+
+    &.linker-full {
+        border-right: 1px solid var(--border-color);
+        border-left: 1px solid var(--border-color);
+      }
+  
+    &.linker-right {
+      border-right: 1px solid var(--border-color);
+    }
+  
+    &.linker-left {
+      border-left: 1px solid var(--border-color);
+    }
+
+    &.linker-bottom::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        top: 100%;
+        left: 0;
+        background-color: var(--bg-color);
+    }
+
+    &.linker-top::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 100%;
+        left: 0;
+        background-color: var(--bg-color);
+    }
+    
+    // закомментирован код для скруглённых углов
+    // &.linker-bottom.linker-right {
+    //   &::after {
+    //     content: '';
+    //     display: block;
+    //     position: absolute;
+    //     bottom: 0;
+    //     right: 100%;
+    //     width: 3px;
+    //     height: 1px;
+    //     background-color: white;
+    //     z-index: calc(var(--z-index) + 1);
+    //   }
+    // }
+
+    // &.linker-bottom.linker-left {
+    //     &::after {
+    //         content: '';
+    //         display: block;
+    //         position: absolute;
+    //         bottom: 0;
+    //         left: 100%;
+    //         width: 3px;
+    //         height: 1px;
+    //         background-color: white;
+    //         z-index: calc(var(--z-index) + 1);
+    //     }
+    // }
+  
+    // &.linker-top.linker-right {  
+    //   &::after {
+    //     content: '';
+    //     display: block;
+    //     position: absolute;
+    //     top: 0;
+    //     right: 100%;
+    //     width: 3px;
+    //     height: 1px;
+    //     background-color: white;
+    //     z-index: calc(var(--z-index) + 1);
+    //   }
+    // }
+
+    // &.linker-top.linker-left {
+    //     &::after {
+    //         content: '';
+    //         display: block;
+    //         position: absolute;
+    //         top: 0;
+    //         left: 100%;
+    //         width: 3px;
+    //         height: 1px;
+    //         background-color: white;
+    //         z-index: calc(var(--z-index) + 1);
+    //     }
+    // }
+}
+
+// visualLinker-linkerCorner - элемент соединения для скруглённых границ
+.visualLinker-linkerCorner {
+    --size: 6px;
+    --z-index: 1;
+    --border-color: #000;
+    --outer-bg-color: rgb(61, 103, 128);
+    
+    content: '';
+    display: block;
+    width: var(--size);
+    height: var(--size);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: var(--outer-bg-color);
+    border-radius: 50%;
+    z-index: calc(var(--z-index) + 1);
+
+    &::before {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        width: calc(var(--size) - 0px);
+        height: calc(var(--size) - 0px);
+        z-index: calc(var(--z-index) + 2);
+    }
+    
+    &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: calc(var(--size) - 3px);
+        height: calc(var(--size) - 3px);
+        z-index: calc(var(--z-index) + 1);
+    }
+
+    &.linkerCorner-bottom {
+        &::before {
+            top: 0;
+        }
+        
+        &::after {
+            bottom: 0;
+        }
+
+        &.linkerCorner-left {
+            &::before {
+                right: 0;
+                border-bottom-left-radius: 66%;
+            }
+
+            &::after {
+                left: 0;
+                border-bottom-left-radius: 6px;
+                outline: 1px solid var(--border-color);
+            }
+        }
+
+        &.linkerCorner-right {
+            &::before {
+                left: 0;
+                border-bottom-right-radius: 66%;
+            }
+
+            &::after {
+                right: 0;
+                border-bottom-right-radius: 6px;
+                outline: 1px solid var(--border-color);
+            }
+        }
+    }
+
+    &.linkerCorner-top {
+        &::before {
+            bottom: 0;
+        }
+
+        &::after {
+            top: 0;
+        }
+
+        &.linkerCorner-left {
+            &::before {
+                right: 0;
+                border-top-left-radius: 66%;
+            }
+
+            &::after {
+                left: 0;
+                border-top-left-radius: 6px;
+                outline: 1px solid var(--border-color);
+            }
+        }
+
+        &.linkerCorner-right {
+            &::before {
+                left: 0;
+                border-top-right-radius: 66%;
+            }
+        }
+
+        &::after {
+            right: 0;
+            border-top-right-radius: 6px;
+            outline: 1px solid var(--border-color);
+        }
+    }
+}

package/src/app/Application.js

@@ -2,6 +2,7 @@ Ext.define('Coon.app.Application', {
     extend: 'Ext.app.Application',
     name: 'CoonApplication',
     requires: ['Iconpack.*', 'Coon.*', 'Ext.*'],
+    appRouter: null,
     config: {
         applicationMainView: null,
     },

package/src/app/ApplicationSettings.js

@@ -0,0 +1,49 @@
+Ext.define('Coon.app.ApplicationSettings', {
+    singleton: true,
+
+    mainViewXType: undefined,
+    menuXType: undefined,
+    mainView: undefined,
+    requires: ['Coon.common.UserPropStorage'],
+
+    constructor: function(config) {
+        const storage = Ext.create('Coon.common.UserPropStorage', {
+            component: 'applicationSettings',
+            componentId: 'app',
+            module: 'applicationSettingsParameters',
+            propList: ['mainViewXType', 'menuXType'],
+            saveType: 'ls',
+        });
+        // console.log(storage.saveProps({mainViewXType: 'centerview', menuXType: 'AppNavigationMenuMinimized'}));
+        // console.log(storage.saveProps({mainViewXType: false, menuXType: 'AppNavigationMenu'}));
+        const props = storage.getSavedProps();
+        this.setMainViewXType(props.mainViewXType);
+        this.setMenuXType(props.menuXType);
+    },
+    setMenuXType: function(xtype) {
+        this.menuXType = xtype;
+    },
+    getMenuXType: function() {
+        return this.menuXType;
+    },
+    setMainViewXType(xtype) {
+        this.mainViewXType = xtype;
+    },
+    setMainView(view) {
+        this.mainView = view;
+    },
+    getMainView: function() {
+        if (this.mainView) {
+            return this.mainView;
+        }
+        let cmp = Ext.getBody();
+        if (this.mainViewXType) {
+            const result = Ext.ComponentQuery.query('centerview');
+            if (result && result.length > 0) {
+                cmp = result[0];
+            }
+        }
+        this.setMainView(cmp);
+        return cmp;
+    },
+});

package/src/app/Config.js

@@ -0,0 +1,60 @@
+Ext.define('Coon.app.Config', {
+    singleton: true,
+    requires: ['Coon.common.UserPropStorage'],
+    configVersion: null,
+    locals: {},
+    appConfig: {
+        default: 'v1',
+        versions: {
+            v1: {
+                mainViewXType: 'centerview',
+                menuXType: 'AppNavigationMenuMinimized',
+            },
+            v2: {
+                mainViewXType: null,
+                menuXType: 'AppNavigationMenu',
+            },
+        },
+        convert: {
+            mainViewXType(val) {
+                let cmp = Ext.getBody();
+                if (val) {
+                    const result = Ext.ComponentQuery.query(val)[0];
+                    if (result) {
+                        cmp = result;
+                    }
+                }
+                return cmp;
+            },
+        },
+
+    },
+
+    constructor: function(config) {
+        this.storage = Ext.create('Coon.common.UserPropStorage', {
+            component: 'appConfig',
+            componentId: 'app',
+            module: 'appConfig',
+            propList: ['configVersion'],
+            saveType: 'ls',
+        });
+    },
+
+    getVersionKey() {
+        return this.storage.getSavedProps().configVersion || this.appConfig.default;
+    },
+
+    get(property) {
+        if (!property || !this.getVersionKey() || !(this.getVersionKey() in this.appConfig.versions)) {
+            return false;
+        }
+        if (property in this.locals) {
+            return this.locals[property];
+        }
+        const value = this.appConfig.versions[this.getVersionKey()][property];
+        const convertFn = typeof this.appConfig.convert[property] === 'function' && this.appConfig.convert[property];
+        this.locals[property] = convertFn ? convertFn.call(this, value) : value;
+        return this.locals[property];
+    },
+
+});

package/src/app/Router.js

@@ -3,22 +3,20 @@ Ext.define('Coon.app.Router', {
     singleton: true,
     constructor() {
         this.setRoutes({
-            ':{type}/:{id}': {
-                action: 'onRouteEnter',
-            },
             ':{id}': {
                 action: 'onRouteEnter',
+                before: 'validateMenuItem',
             },
-            ':{type}/:{id}/:{params...}': {
-                action: 'onRouteEnter',
-                types: {
-                    '...': {
-                        re: '(.+)?',
-                        split: '/',
-                        parse: (value) => value,
-                    },
-                },
-            },
+            // ':{type}/:{id}/:{params...}': {
+            //     action: 'onRouteEnter',
+            //     types: {
+            //         '...': {
+            //             re: '(.+)?',
+            //             split: '/',
+            //             parse: (value) => value,
+            //         },
+            //     },
+            // },
         });
         Ext.on('router:goToLastRoute', () => {
             this.onRouteEnter(this.lastRoute);
@@ -27,6 +25,28 @@ Ext.define('Coon.app.Router', {
 
     lastRoute: null,
 
+    async validateMenuItem(route) {
+        if (!Ext.getApplication().isAuthenticated()) {
+            return false;
+        }
+        try {
+            route.menuItem = await Coon.nav.MenuEntity.getMenuItem(route.id);
+            if (!route.menuItem) {
+                return false;
+            }
+            route.uiElement = await Coon.util.promisifyCmd(
+                'Coon.uielement.command.GetUIElementCommand',
+                route.menuItem.UI_ELEMENT_CD
+            );
+            if (!route.uiElement) {
+                return false;
+            }
+            return true;
+        } catch (ex) {
+            return false;
+        }
+    },
+
     onBeforeRouteEnterFn: null,
 
     onBeforeRouteEnter() {
@@ -45,7 +65,6 @@ Ext.define('Coon.app.Router', {
         return true;
     },
 
-
     getLastRoute() {
         return this.lastRoute;
     },
@@ -60,21 +79,18 @@ Ext.define('Coon.app.Router', {
         if (!app.initialRoute) {
             app.initialRoute = route;
         }
-        Coon.nav.MenuEntity.isValid(route.id).then(async (valid) => {
-            if (valid === true) {
-                Ext.fireEvent('route:change', route);
-            } else {
-                Ext.fireEvent('route:unmatched', route);
-            }
-        });
+        Ext.fireEvent('route:change', route);
     },
+
     getRouterView() {
         return Ext.ComponentQuery.query('centerview')[0];
     },
+
     getActiveComponent() {
         const routerView = this.getRouterView();
         return routerView && routerView.getLayout().getActiveItem();
     },
+
     getAuthToken() {
         const search = document.location.search;
         let jwtToken;

package/src/app/viewPort/CVWrapperPanel.js

@@ -0,0 +1,53 @@
+Ext.define('Coon.app.viewPort.CVWrapperPanel', {
+    extend: 'Ext.panel.Panel',
+
+    xtype: 'CVWrapperPanel',
+    cls: 'CVWrapperPanel',
+    layout: 'fit',
+
+    changeFavorite(menuEntryCd, state) {
+        if (this.menuItem.MENU_ENTRY_CD !== menuEntryCd) {
+            return;
+        }
+        const title = this.getComponentTitle();
+        if (state === 'add') {
+            title.iconEl.dom.classList.add('is-favorite-item');
+        } else {
+            title.iconEl.dom.classList.remove('is-favorite-item');
+        }
+    },
+
+    getComponentTitle() {
+        const component = this.getComponent(0);
+        const header = component.getHeader();
+        return header && header.getTitle();
+    },
+
+    initComponent(...args) {
+        this.callParent(...args);
+        const component = this.getComponent(0);
+        if (this.menuItem) {
+            component.on('afterrender', function() {
+                const title = this.getComponentTitle();
+                if (title && title.iconEl) {
+                    const props = Coon.nav.menu.FavoriteCfg.get().favorite || [];
+                    const index = props.indexOf(this.menuItem.MENU_ENTRY_CD);
+                    if (index >= 0) {
+                        title.iconEl.dom.classList.add('is-favorite-item');
+                    }
+                    Ext.on('nav:favoriteitemschange', this.changeFavorite, this);
+                }
+            }, this, {single: true});
+
+            component.on('beforedestroy', function() {
+                Ext.un('nav:favoriteitemschange', this.changeFavorite, this);
+            }, this);
+        }
+        if (component) {
+            this.on('activate', function(...args) {
+                this.menuItem && Ext.fireEvent('nav:menuitemchange', this.menuItem);
+                component.fireEvent('activatecomponent', ...args);
+            });
+        }
+    },
+});