ru.coon 2.8.65 → 3.0.2

package/src/nav/AppNavigationPanel.js

@@ -0,0 +1,115 @@
+Ext.define('Coon.nav.menu.AppNavigationPanel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'AppNavigationPanel',
+    cls: 'AppNavigationPanel',
+    padding: 0,
+    controller: 'AppNavigationPanelController',
+    layout: {
+        type: 'hbox',
+        align: 'stretch',
+    },
+
+    title: 'меню навигации',
+
+    mixin: [
+        'Ext.mixin.Responsive'
+    ],
+    /* listeners: {
+        render: 'onRenderPanel',
+    },*/
+    viewModel: {
+        data: {
+            favorites: {},
+            map: [],
+        },
+        stores: {
+            spacesStore: {
+                type: 'json',
+                data: [],
+            },
+            searchStore: {
+                type: 'json',
+                data: [],
+            },
+        },
+    },
+    tbar: {
+        cls: 'no-shadow',
+        items: [
+            {
+                xtype: 'combo',
+                emptyText: 'Поиск',
+                width: 300,
+                margin: '0 40px 0 0',
+                bind: {
+                    store: '{searchStore}',
+                },
+                queryMode: 'local',
+                valueField: 'MENU_ENTRY_CD',
+                displayField: 'text',
+                anyMatch: true,
+                caseSensitive: false,
+                listeners: {
+                    select: 'onChangeSearchCombo',
+                },
+                clearFilterOnBlur: false,
+                tpl: Ext.create('Ext.XTemplate',
+                    `<ul class="x-list-plain"><tpl for=".">
+                    <li role="option" class="x-boundlist-item">{[this.getText(values.WORKSPACE_DESCR,values.text)]}</li>
+                    </tpl></ul>`,
+                    {
+                        // XTemplate configuration:
+                        disableFormats: true,
+                        // member functions:
+                        getText: function(space, text) {
+                            const value = this.owner.ownerCmp.getValue() || '';
+                            if (value) {
+                                return `${space} / ` + text.replaceAll(value, `<span class="search-compare">${value}</span>`);
+                            } else {
+                                return `${space} / ${text}`;
+                            }
+                        },
+                    }
+                ),
+            }
+        ],
+    },
+    items: [{
+
+        xtype: 'grid',
+        reference: 'spacesPanel',
+        cls: 'spaces-panel',
+        width: 300,
+        header: false,
+        bodyPadding: '0 10px',
+        bind: {
+            store: '{spacesStore}',
+        },
+        listeners: {
+            itemmouseup: 'onGridMouseUp',
+        },
+        columns: [{
+            xtype: 'templatecolumn',
+            tpl: '<i class="workspace-icon {iconCls}"></i><div class="workspace-text">{text}</div>',
+            flex: 1,
+        }],
+    }, {
+        xtype: 'panel',
+        reference: 'menuPanel',
+        cls: 'menu-panel',
+        flex: 1,
+        layout: 'card',
+        items: [],
+    }],
+
+    menuItemTpl: new Ext.XTemplate(
+        `<li class="ref-item {isSelected}" data-removed="{remove}">
+            <span class="item-icon" onclick="Ext.fireEvent('nav:menuitemtofavoriteclick','{MENU_ENTRY_CD}',this);">
+                <i class="star svg-icon svg-icon-star-16 icon-orange {isFavorite}"></i>
+            </span>
+            <span class="item-text" onclick="Ext.fireEvent('nav:menuitemclick', '{MENU_ENTRY_CD}');">
+            {text}</span>
+        </li>`
+    ),
+
+});

package/src/nav/AppNavigationPanel.scss

@@ -0,0 +1,178 @@
+.svg-icon-size-18{
+    mask-size: 18px;
+}
+.search-compare{
+    background-color: #ffcd29 !important;
+}
+.AppNavigationPanel{
+    .no-shadow{
+        box-shadow: none !important;
+    }
+    .x-grid-cell-inner{
+        margin: 2px 0;
+        display: flex;
+        align-items: center;
+    }
+    .activeToggle{
+        color: #A9A9A9;
+    }
+    .inactiveToggle{
+        color: #D0D0D0;
+    }
+    .btn-toggle{
+        height: 20px !important;
+        padding: 5px !important;
+    }
+
+    .x-btn-pressed{
+        background-color: transparent !important;
+    }
+
+    .favorite-title{
+        margin-left: 20px;
+    }
+
+    .workspace-icon{
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background-color: #3D6780;
+    }
+    .workspace-text{
+        display: inline-block;
+        margin-left: 10px;
+    }
+    .x-grid-with-row-lines .x-grid-item{
+        border: none;
+    }
+
+    .selected-item {
+        .item-text{
+            color: black;
+            background-color: #F5F5F5;
+            padding-right: 16px;
+        }
+        .item-icon{
+            background-color: #F5F5F5;
+        }
+
+
+
+    }
+    .is-favorite-item{
+       background-color: #ff9800 !important;
+    }
+    .item-icon:hover{
+        i:not(.is-favorite-item) {
+            background-color: #b4b4b4 !important;
+        }
+    }
+    .flex-container .x-autocontainer-innerCt{
+        display: flex;
+        flex-wrap: wrap;
+        ul{
+            width: 400px;
+            list-style: none;
+            padding-left: 10px;
+            li{
+                margin: 10px 0;
+                color: #1E3B4C;
+                display: block;
+                .parent-menu-item{
+                    color: #112b39;
+                    font-weight: 600;
+                }
+            }
+            .item-icon{
+                width: 20px;
+                min-width: 20px;
+                height: 20px;
+                display: inline-block;
+            }
+            .star{
+                width: 20px;
+                height: 18px;
+                display: none;
+            }
+            .icon-orange {
+                background-color: #ff9800;
+            }
+
+            .item-text{
+                display: inline-block;
+            }
+            li.ref-item {
+                display: flex;
+                flex-wrap: nowrap;
+                cursor: pointer;
+            }
+            li.ref-item:hover {
+                .item-text{
+                    //background-color: #F5F5F5;
+                    color: black;
+                }
+                .item-icon{
+                    //background-color: #F5F5F5;
+                }
+                .icon-orange{
+                    background-color: #dddddd;
+                }
+                .star{
+                    display: block;
+
+                }
+
+            }
+            .is-favorite-item{
+                display: block !important;
+            }
+        }
+    }
+
+    .spaces-panel{
+        .x-grid-body{
+            border: none;
+        }
+        .x-grid-item-selected{
+            background-color: #F5F5F5;
+            .x-grid-cell::before {
+                background-color: #9a2d2a;
+                content: " ";
+                position: absolute;
+                display: block;
+                left: 0;
+                top: 0;
+                width: 5px;
+                height: 100%;
+            }
+            .workspace-text {
+                color: #111111;
+            }
+            .workspace-icon{
+                background-color: #1E3B4C;
+            }
+        }
+        .x-grid-item-over{
+            background-color: #F5F5F5;
+        }
+        .workspace-text {
+            margin-right: 0;
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: normal;
+            white-space: pre-wrap;
+        }
+        .x-grid-cell-inner{
+            i {
+                margin: 0 10px 0 10px;
+            }
+            cursor: pointer;
+        }
+    }
+
+    .menu-panel {
+        .x-panel-body {
+            overflow-x: hidden !important;
+        }
+    }
+}

package/src/nav/AppNavigationPanelController.js

@@ -0,0 +1,386 @@
+/* eslint-disable require-jsdoc */
+Ext.define('Coon.nav.AppNavigationPanelController', {
+    extend: 'Ext.app.ViewController',
+    requires: [
+        'Coon.nav.AppNavTab',
+        'Coon.setup',
+        'Coon.eventBus',
+        'Coon.common.UserPropStorage'
+    ],
+    alias: 'controller.AppNavigationPanelController',
+    menuRendered: false,
+    mouseInFlag: true,
+    addWorkspaceToUrl: false,
+    menuReady: false,
+    router: null,
+    locals: {
+        data: null,
+        savedWsMenuLinks: {},
+    },
+
+    init() {
+        this.router = Ext.getApplication().appRouter;
+        this.lastRoute = this.router && this.router.lastRoute;
+        this.renderMenu();
+        this.getView().on('ownerShow', () => {
+            const panel = this.lookup('menuPanel').layout.getActiveItem();
+            if (panel) {
+                const cardId = panel.itemId;
+                const active = panel.down('[reference="menuInterface"]').layout.getActiveItem();
+                if (active && cardId) {
+                    if (active.reference === 'menuView') {
+                        this.updateMenuView(cardId, active);
+                    } else {
+                        this.updateFavoriteView(cardId, active);
+                    }
+                }
+            }
+        }, this);
+        Ext.on({
+            'nav:menuitemtofavoriteclick': {fn: this.onMenuItemToFavoriteClick, scope: this},
+            'nav:menuitemclick': {fn: this.onMenuItemClick, scope: this},
+            'nav:reload': {fn: this.updateMenu, scope: this},
+            'route:change': {
+                fn: (route) => {
+                    this.setActiveMenuItem(route.id);
+                },
+                scope: this,
+            },
+            'route:unmatched': {fn: () => {
+                this.goTo(this.getFirstAvailable());
+            }, scope: this},
+        });
+        this.lookup('spacesPanel').on({
+            itemmouseenter: {fn: this.onGridMouseUp, scope: this, buffer: 600},
+            beforeitemmouseenter: {fn: this.mouseIn, scope: this},
+            beforeitemmouseleave: {fn: this.mouseOut, scope: this},
+        });
+    },
+    onMenuItemToFavoriteClick(menuEntryCd, cmp) {
+        const props = Coon.nav.menu.FavoriteCfg.get().favorite || [];
+        const index = props.indexOf(menuEntryCd);
+        index >= 0 ? props.splice(index, 1) : props.push(menuEntryCd);
+        const state = index >= 0 ? 'remove' : 'add';
+        Coon.nav.menu.FavoriteCfg.set({favorite: props});
+        if (cmp) {
+            if (index >= 0) {
+                if (cmp.parentNode.getAttribute('data-removed') === 'true') {
+                    cmp.parentNode.parentNode.removeChild(cmp.parentNode);
+                } else {
+                    cmp.firstElementChild.classList.remove('is-favorite-item');
+                }
+            } else if (!cmp.firstElementChild.classList.contains('is-favorite-item')) {
+                cmp.firstElementChild.classList.add('is-favorite-item');
+            }
+        }
+        Ext.fireEvent('nav:favoriteitemschange', menuEntryCd, state);
+    },
+
+    setActiveMenuItem(menuEntryCd) {
+        const item = this.locals.data.menu.find((el) => el.MENU_ENTRY_CD === menuEntryCd);
+        if (!item) {
+            return;
+        }
+        document.title = item.text;
+        Ext.fireEvent('nav:menuitemchange', item, this);
+        this.changeWorkSpace(item.WORKSPACE_CD);
+    },
+
+    changeWorkSpace(id) {
+        if (!this.menuReady || !id) {
+            return;
+        }
+        const index = this.getViewModel().get('map').indexOf(id);
+        const rec = this.getViewModel().getStore('spacesStore').getAt(index);
+        this.lookup('spacesPanel').setSelection(rec);
+        this.lookup('menuPanel').setActiveItem(index);
+    },
+
+    getFirstAvailable() {
+        const ws = [...this.locals.data.ws.values()][0];
+        const item = ws && this.locals.data.menu.find((el) => el.WORKSPACE_CD === ws.ws);
+        return ws && item && item.MENU_ENTRY_CD;
+    },
+
+    async onMenuReady() {
+        const isValidLastRoute = this.lastRoute && this.lastRoute.id && await Coon.nav.MenuEntity.isValid(this.lastRoute.id);
+        if (isValidLastRoute) {
+            this.setActiveMenuItem(this.lastRoute.id);
+        } else {
+            this.goTo(this.getFirstAvailable());
+        }
+    },
+    goTo(menuEntryCd, force = false) {
+        if (menuEntryCd) {
+            let prefix = '';
+            if (this.addWorkspaceToUrl) {
+                const ws = this.getViewModel().get('workspace') || this.getFirstAvailable().ws.ws;
+                prefix = ws && ws + '/';
+            }
+            this.router.redirectTo(prefix + menuEntryCd, {force});
+        }
+    },
+
+    onMenuItemClick(menuEntryCd) {
+        this.goTo(menuEntryCd);
+    },
+    mouseOut() {
+        this.mouseInFlag = false;
+    },
+    mouseIn() {
+        this.mouseInFlag = true;
+    },
+    onGridMouseUp(el, rec) {
+        if (!this.mouseInFlag) {
+            return false;
+        }
+        this.changeWorkSpace(rec.get('value'));
+    },
+
+    prepareMenuData(data) {
+        return data;
+    },
+
+    onMenuPanelBeforeActivate(panel) {
+        const activeView = panel.down('[reference="menuInterface"]').layout.getActiveItem();
+        if (activeView.reference === 'favoriteView') {
+            this.updateFavoriteView(panel.itemId, activeView);
+        } else {
+            this.updateMenuView(panel.itemId, activeView);
+        }
+    },
+
+    updateMenu: function() {
+        Coon.nav.MenuEntity.menuItems = null;
+        this.renderMenu();
+    },
+
+    renderMenu() {
+        this.menuReady = false;
+        // view.mask();
+        const vm = this.getViewModel();
+        vm.getStore('spacesStore').removeAll();
+        vm.getStore('searchStore').removeAll();
+        // this.lookup('menuPanel').removeAll();
+        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,
+                    });
+                    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);
+                        },
+                    });
+                });
+                vm.getStore('spacesStore').loadData(items);
+                vm.getStore('searchStore').loadData(this.locals.data.menu);
+
+                const listToTree = (list) => {
+                    const map = {}; const roots = [];
+                    let node;
+                    for (let i = 0; i < list.length; i += 1) {
+                        map[list[i].MENU_ENTRY_CD] = i; // initialize the map
+                        list[i].children = []; // initialize the children
+                    }
+                    for (let i = 0; i < list.length; i += 1) {
+                        node = list[i];
+                        node.PARENT_MENU_ENTRY_CD = node.PARENT_MENU_ENTRY_CD || '0';
+                        if (node.PARENT_MENU_ENTRY_CD !== '0') {
+                            // if you have dangling branches check that map[node.parentId] exists
+                            list[map[node.PARENT_MENU_ENTRY_CD]].children.push(node);
+                        } else {
+                            roots.push(node);
+                        }
+                    }
+                    return roots;
+                };
+
+                Object.entries(this.locals.data.items).forEach(function(workspace) {
+                    const [workspaceId, workspaceItems] = workspace;
+                    this.locals.data.items[workspaceId] = listToTree(Object.values(workspaceItems));
+                }, this);
+
+                const menuPanel = this.lookup('menuPanel');
+                const map = [];
+                this.locals.data.ws.forEach((workSpace) => {
+                    map.push(workSpace.ws);
+                    menuPanel.add({
+                        xtype: 'panel',
+                        bodyPadding: '10px 0 0 0',
+                        style: {
+                            border: '1px solid #dddddd',
+                        },
+                        title: workSpace.text,
+                        scrollable: true,
+                        listeners: {
+                            activate: 'onMenuPanelBeforeActivate',
+                        },
+                        itemId: workSpace.ws,
+                        items: [{
+                            xtype: 'container',
+                            colspan: 10,
+                            layout: 'hbox',
+                            items: [{
+                                xtype: 'container',
+                                margin: '8px 0 8px 8px',
+                                html: '<span class="favorite-title">Избранное</span>',
+                            }, {
+                                xtype: 'button',
+                                padding: '10px 16px 8px 6px',
+                                focusOnToFront: false,
+                                focusable: false,
+                                overCls: '',
+                                focusCls: '',
+                                style: {
+                                    backgroundColor: 'transparent!important',
+                                    marginRight: '20px',
+                                },
+                                iconCls: 'x-fa fa-toggle-on inactiveToggle',
+                                handler: this.onFavoriteClick.bind(this),
+                                bind: {
+                                    // eslint-disable-next-line max-len
+                                    iconCls: `{favorites.${workSpace.ws} ? 'x-fa fa-toggle-on fa-rotate-180 activeToggle' : 'x-fa fa-toggle-on inactiveToggle'}`,
+                                },
+                            }],
+                        }, {
+                            xtype: 'panel',
+                            reference: 'menuInterface',
+                            layout: 'card',
+
+                            items: [
+                                {
+                                    xtype: 'panel',
+                                    reference: 'menuView',
+                                    cls: 'flex-container',
+                                },
+                                {
+                                    xtype: 'panel',
+                                    reference: 'favoriteView',
+                                    cls: 'flex-container',
+                                }
+                            ],
+                        }],
+                    });
+                });
+                this.getViewModel().set('map', map);
+                this.menuReady = true;
+                Ext.fireEvent('nav:ready');
+                this.onMenuReady();
+            }
+            // view.unmask();
+        });
+    },
+
+    getMenuItemHtml(menuItem) {
+        return this.getView().menuItemTpl.apply(menuItem);
+    },
+
+    updateMenuView(cardId, panel) {
+        const selected = this.router.lastRoute?.id || '';
+        const props = Coon.nav.menu.FavoriteCfg.get().favorite || [];
+        const createItemsTemplate = (item) => {
+            item.isFavorite = props.indexOf(item.MENU_ENTRY_CD) >= 0 ? 'is-favorite-item' : '';
+            item.isSelected = selected === item.MENU_ENTRY_CD ? 'selected-item' : '';
+            item.remove = false;
+            if (!item.children[0]) {
+                return this.getMenuItemHtml(item);
+            }
+            let res = `<li><span class="parent-menu-item">${item.text}</span><ul>`;
+            item.children.forEach((child) => {
+                res += createItemsTemplate(child);
+            });
+            res += '</ul></li>';
+            return res;
+        };
+
+        const panels = [];
+        const html = [];
+        this.locals.data.items[cardId].forEach((item) => {
+            item.remove = false;
+            if (item.children[0]) {
+                panels.push(`<ul>${createItemsTemplate(item)}</ul>`);
+            } else {
+                item.isFavorite = props.indexOf(item.MENU_ENTRY_CD) >= 0 ? 'is-favorite-item' : '';
+                item.isSelected = selected === item.MENU_ENTRY_CD ? 'selected-item' : '';
+                html.push(this.getMenuItemHtml(item));
+            }
+        });
+        if (html.length) {
+            panels.splice(0, 0, `<ul>${html.join('')}</ul>`);
+        }
+        panel.setHtml(`${panels.join('')}`);
+    },
+
+    updateFavoriteView(cardId, panel) {
+        const props = Coon.nav.menu.FavoriteCfg.get().favorite || [];
+        const selected = this.router.lastRoute?.id || '';
+        if (props.length) {
+            const createItemsTemplate = (item) => {
+                item.isFavorite = props.indexOf(item.MENU_ENTRY_CD) >= 0 ? 'is-favorite-item' : '';
+                item.isSelected = selected === item.MENU_ENTRY_CD ? 'selected-item' : '';
+                item.remove = true;
+                if (!item.children[0]) {
+                    return item.isFavorite ? this.getMenuItemHtml(item) : '';
+                }
+                let res = '';
+                item.children.forEach((child) => {
+                    res += createItemsTemplate(child);
+                });
+                return res;
+            };
+            let res = '';
+            this.locals.data.items[cardId].forEach((item) => {
+                res += createItemsTemplate(item);
+            });
+            panel.setHtml(`<ul>${res}</ul>`);
+        }
+    },
+
+    onFavoriteClick(cmp) {
+        const vm = this.getViewModel();
+        const favorites = vm.get('favorites');
+        const cardId = cmp.up('panel').itemId;
+        favorites[cardId] = !favorites[cardId];
+        vm.set('favorites', favorites);
+
+        const panel = cmp.up('panel').down('[reference="menuInterface"]');
+        if (favorites[cardId]) {
+            this.updateFavoriteView(cardId, panel.down('[reference="favoriteView"]'));
+        } else {
+            this.updateMenuView(cardId, panel.down('[reference="menuView"]'));
+        }
+        panel.setActiveItem(favorites[cardId] ? 1 : 0);
+    },
+
+    onChangeSearchCombo(cmp, rec) {
+        if (!rec || !rec.get('MENU_ENTRY_CD')) {
+            return false;
+        }
+        cmp.clearValue();
+        this.goTo(rec.get('MENU_ENTRY_CD'));
+    },
+});

package/src/nav/FavoriteCfg.js

@@ -0,0 +1,18 @@
+Ext.define('Coon.nav.menu.FavoriteCfg', {
+    singleton: true,
+    localStorage: Ext.create('Coon.common.UserPropStorage', {
+        component: 'AppNavigationPanelController',
+        componentId: 'AppNavigationPanelController',
+        module: 'AppNavigationPanelController',
+        propList: ['favorite'],
+        saveType: 'ls',
+    }),
+
+    get() {
+        return this.localStorage.getSavedProps();
+    },
+
+    set(data) {
+        this.localStorage.saveProps(data);
+    },
+});