@things-factory/meta-ui 10.1.248 → 10.1.249

package/dist-client/pages/menu/dynamic-menu.js

@@ -0,0 +1,663 @@
+import { __decorate, __metadata } from "tslib";
+// @ts-nocheck
+import '@material/web/icon/icon.js';
+import '@things-factory/form-ui';
+import gql from 'graphql-tag';
+import { html } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { p13n } from '@operato/p13n';
+import { OxFiltersFormBase } from '@operato/form';
+import { TermsUtil } from './../../utils/terms-util';
+import { MetaApi } from '../../utils/meta-api';
+import './dynamic-menu-template.js';
+import './export-menu-popup.js';
+import { ValueUtil } from '../../utils/value-util';
+import { UiUtil } from '../../utils/ui-util';
+import { DataGrist } from '@operato/data-grist';
+let DynamicMenu = class DynamicMenu extends p13n(localize(i18next)(PageView)) {
+    static { this.styles = [...MetaApi.getBasicMasterDetailGristStyle('top-down')]; }
+    render() {
+        return html `
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form-base
+            .filters=${this.searchFields || []}
+            @filters-change=${e => {
+            this.groupGrist?.fetch();
+        }}
+          ></ox-filters-form-base>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="container_detail">
+          <!--h2>
+            <md-icon>list_alt</md-icon>${TermsUtil.tTitle('menu_group')}
+          </h2-->
+          <ox-grist
+            id="master-grist"
+            .config=${this.groupConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
+            .personalConfigProvider=${this.getPagePreferenceProvider('master-grist')}
+            .fetchHandler=${this.fetchGroupHandler.bind(this)}
+          >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+          </ox-grist>
+          <div class="button-container">
+            <button @click=${e => this.saveGroup()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
+            <button danger @click=${e => this.deleteGroup()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
+          </div>
+        </div>
+
+        <div class="container_detail">
+          <ox-grist
+            id="detail-grist"
+            .config=${this.detailConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
+            .fetchHandler=${this.fetchDetailHandler.bind(this)}
+            .personalConfigProvider=${this.getPagePreferenceProvider('detail-grist')}
+            explcit-fetch
+          >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+          </ox-grist>
+          <div class="button-container">
+            <button @click=${e => this.copyMenu()}><md-icon>content_copy</md-icon>${TermsUtil.tButton('copy')}</button>
+            <button @click=${e => this.saveMenu()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
+            <button danger @click=${e => this.deleteMenu()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    get context() {
+        return {
+            title: TermsUtil.tTitle('dynamic_menu')
+        };
+    }
+    /*******************************************/
+    /* 조회 */
+    /*******************************************/
+    /**
+     * @description 부모 메뉴 (메뉴 그룹) 선택시 하위 메뉴 리스트 조회
+     *********************************
+     * @param {Object} param0
+     */
+    async fetchDetailHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
+        if (this.menuGroupId) {
+            let filters = [
+                {
+                    name: 'parentId',
+                    operator: 'eq',
+                    value: this.menuGroupId
+                },
+                ...(await this.searchForm.getQueryFilters()).filter(x => ['templateCode', 'templateText'].includes(x.name))
+            ];
+            let selectFields = `
+        id
+        name
+        rank
+        description
+        menuType
+        category
+        resourceUrl
+        routingType
+        routing
+        hiddenFlag
+        iconPath
+        parent {
+          id
+          name
+          routing
+        }
+        role {
+          id
+          name
+          description
+        }
+      `;
+            limit = 999999;
+            let fetchResult = await MetaApi.searchByPagination('dynamicMenus', filters, sorters, page, limit, selectFields);
+            if (fetchResult && fetchResult.records) {
+                fetchResult.records.forEach(x => {
+                    x.parentId = this.menuGroupId;
+                });
+            }
+            return fetchResult;
+        }
+    }
+    /**
+     * @description 부모 메뉴 (메뉴 그룹) 조회
+     ****************************************
+     * @param {Object} param0
+     * @returns
+     */
+    async fetchGroupHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
+        // 선택된 부모 메뉴 ID 초기화
+        this.menuGroupId = '';
+        if (this.detailGrist && this.detailGrist.data) {
+            this.detailGrist.data = { records: [] };
+        }
+        let filters = [...(await this.searchForm.getQueryFilters()), { name: 'parentId', operator: 'is_null', value: '' }];
+        let selectFields = `
+      id
+      name
+      rank
+      description
+      menuType
+      category
+      resourceUrl
+      routing
+      hiddenFlag
+      iconPath
+      role {
+        id
+        name
+        description
+      }
+    `;
+        limit = 999999;
+        return await MetaApi.searchByPagination('dynamicMenus', filters, sorters, page, limit, selectFields);
+    }
+    /*******************************************/
+    /*            트랜잭션 (저장 , 삭제)           */
+    /*******************************************/
+    /**
+     * 메뉴 그룹 Create / Update
+     */
+    async saveGroup() {
+        var patches = this.groupGrist.dirtyRecords;
+        if (ValueUtil.isNotEmpty(patches)) {
+            patches = patches.map(patch => {
+                const { creator, updater, createdAt, updatedAt, __dirty__, __dirtyfields__, __origin__, __seq__, __selected__, ...others } = patch;
+                patch = others;
+                if (patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
+                    patch.hiddenFlag = false;
+                }
+                patch.cuFlag = __dirty__;
+                return patch;
+            });
+            let result = await MetaApi.updateMultiple('updateMultipleMenu', patches);
+            if (result) {
+                this.groupGrist.fetch();
+            }
+        }
+    }
+    /**
+     * 메뉴 그룹 Delete
+     * @returns
+     */
+    async deleteGroup() {
+        await MetaApi.deleteListByGristSelected(this.groupGrist, 'deleteMenus');
+    }
+    /**
+     * 메뉴 Create / Update
+     */
+    async saveMenu() {
+        var patches = this.detailGrist.dirtyRecords;
+        if (ValueUtil.isNotEmpty(patches)) {
+            patches = patches.map(patch => {
+                const { creator, updater, createdAt, updatedAt, __dirty__, __dirtyfields__, __origin__, __seq__, __selected__, ...others } = patch;
+                patch = others;
+                patch.menuType = patch.menuType || 'SCREEN';
+                if (!patch.parentId) {
+                    patch.parent = { id: this.menuGroupId };
+                }
+                else {
+                    patch.parent = { id: patch.parentId };
+                }
+                delete patch.parentId;
+                if (patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
+                    patch.hiddenFlag = false;
+                }
+                patch.cuFlag = __dirty__;
+                return patch;
+            });
+            const response = await client.mutate({
+                mutation: gql `
+          mutation UpdateMultipleMenu($patches: [MenuPatch!]!) {
+            updateMultipleMenu(patches: $patches) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    patches
+                }
+            });
+            if (!response.errors) {
+                const result = response.data.updateMultipleMenu;
+                if (result) {
+                    this.detailGrist.fetch();
+                }
+            }
+        }
+    }
+    async exportMenu(record) {
+        let exportMenuElement = MetaApi.createCustomElement('export-menu-popup', 'export-menu-popup');
+        exportMenuElement.title = TermsUtil.tLabel('export');
+        exportMenuElement.recordId = record.id;
+        exportMenuElement.recordName = record.name;
+        await MetaApi.openPopupByElement(record.name, 'large', exportMenuElement, true);
+    }
+    /**
+     * 메뉴 Delete
+     * @returns
+     */
+    async deleteMenu() {
+        await MetaApi.deleteListByGristSelected(this.detailGrist, 'deleteMenus');
+    }
+    /**
+     * 메뉴 복사
+     */
+    async copyMenu() {
+        let selectMenus = this.detailGrist.selected;
+        if (!selectMenus || selectMenus.length == 0) {
+            UiUtil.showAlertPopup('text.nothing_selected', 'text.there_is_no_selected_items', 'info', 'confirm');
+            return;
+        }
+        let copyMenu = selectMenus[0];
+        if (!copyMenu.id) {
+            return;
+        }
+        Object.keys(copyMenu).forEach(x => {
+            if (x.startsWith('__')) {
+                delete copyMenu[x];
+            }
+        });
+        let menu = await MetaApi.findOne('menu', copyMenu.id, 'template');
+        copyMenu.template = menu ? menu.template || '' : '';
+        copyMenu.rank = 99999;
+        copyMenu.cuFlag = '+';
+        copyMenu.name = copyMenu.name + '-copy';
+        copyMenu.routing = copyMenu.routing + '-copy';
+        copyMenu.parent = { id: copyMenu.parentId };
+        delete copyMenu.id;
+        delete copyMenu.parentId;
+        let result = await MetaApi.updateMultiple('updateMultipleMenu', [copyMenu]);
+        if (result) {
+            this.detailGrist.fetch();
+        }
+    }
+    groupMenuQuery(record) {
+        this.menuGroupId = record.id;
+        this.detailGrist.fetch();
+    }
+    /**
+     * 메뉴 템플릿을 편집 할 수 있는 팝업을 오픈한다.
+     * @param {Object} record
+     */
+    async openMenuTemplatePopup(record) {
+        let menuTemplateElement = MetaApi.createCustomElement('dynamic-menu-template', 'dynamic-menu-template');
+        menuTemplateElement.title = TermsUtil.tLabel('template');
+        menuTemplateElement.recordId = record.id;
+        await MetaApi.openPopupByElement(record.name, 'large', menuTemplateElement, true);
+    }
+    /**
+     * 메뉴 템플릿을 생성 할 수 있는 화면으로 이동한다.
+     * @param {Object} record
+     */
+    navigateMetaGenerator(record) {
+        MetaApi.pageNavigate(`meta-generator?menuId=${record.id}`);
+    }
+    /**
+     * LifeCycle - 화면 레더링 설정
+     */
+    async pageInitialized(lifecycle) {
+        // 조회 필드
+        this.searchFields = [
+            // name, type, label, operator, optionValues
+            MetaApi.getGristSearchColumnConfig('name', 'string', 'name', 'i_like'),
+            // name, type, label, operator, codeName
+            await MetaApi.getGristSearchCodeColumnConfig('menuType', 'select', 'menu_type', 'eq', 'MENU_TYPE'),
+            // name, type, label, operator
+            MetaApi.getGristSearchColumnConfig('hiddenFlag', 'checkbox', 'hidden', 'eq'),
+            await MetaApi.getGristSearchCodeColumnConfig('templateCode', 'select', 'menu_template_search_code', 'eq', 'MENU_TEXT_SEARCH_TYPE'),
+            MetaApi.getGristSearchColumnConfig('templateText', 'string', 'menu_template_search_text', 'i_like')
+        ];
+        // 메뉴 그룹 그리드 설정
+        this.groupConfig = {
+            rows: MetaApi.getGristSelectableConfig(false),
+            // 공간이 부족해서 페이지네이션 제거
+            pagination: { infinite: true },
+            appendable: true,
+            columns: [
+                ...MetaApi.getGristGuttersConfig(true, false),
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'menu_open',
+                    handlers: {
+                        click: (_columns, _data, _column, record, _rowIndex) => {
+                            if (record.id) {
+                                this.groupMenuQuery(record);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'integer',
+                    name: 'rank',
+                    header: TermsUtil.tLabel('rank'),
+                    record: {
+                        align: 'left',
+                        editable: true,
+                        format: '#,###'
+                    },
+                    sortable: false,
+                    width: 60
+                },
+                // type, name, align, editable, sortable, width
+                MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 200),
+                {
+                    type: 'string',
+                    name: 'title',
+                    header: TermsUtil.tLabel('title'),
+                    record: {
+                        editable: false,
+                        align: 'left',
+                        renderer: (value, column, record, rowIndex, field) => {
+                            return record.name ? TermsUtil.tMenu(record.name) : '';
+                        }
+                    },
+                    sortable: false,
+                    width: 200
+                },
+                // name, displayName, align, sortable, width, mandatory, codeName
+                await MetaApi.getGristCodeSelectorColumnConfig('menuType', 'menu_type', 'left', false, 90, true, 'MENU_TYPE'),
+                // type, name, displayName, align, editable, sortable, width
+                MetaApi.getGristColumnConfig2('string', 'iconPath', 'icon', 'left', true, false, 115),
+                MetaApi.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden', 'center', true, false, 55),
+                MetaApi.getGristColumnConfig2('string', 'routing', 'routing', 'left', true, false, 135),
+                MetaApi.getGristColumnConfig2('string', 'category', 'tag', 'left', true, false, 135),
+                MetaApi.getGristColumnConfig2('string', 'resourceUrl', 'page_location', 'left', true, false, 350),
+                {
+                    type: 'resource-object',
+                    name: 'role',
+                    label: true,
+                    header: i18next.t('field.required role'),
+                    record: {
+                        editable: true,
+                        options: {
+                            title: i18next.t('title.lookup role'),
+                            queryName: 'roles'
+                        }
+                    },
+                    width: 200
+                }
+            ]
+        };
+        // 메뉴 그리드 설정
+        this.detailConfig = {
+            rows: MetaApi.getGristSelectableConfig(false),
+            // 공간이 부족해서 페이지네이션 제거
+            pagination: { infinite: true },
+            appendable: true,
+            columns: [
+                ...MetaApi.getGristGuttersConfig(true, false),
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'download',
+                    handlers: {
+                        click: (_columns, _data, _column, record, _rowIndex) => {
+                            if (record.id) {
+                                this.exportMenu(record);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'code',
+                    handlers: {
+                        click: (_columns, _data, _column, record, _rowIndex) => {
+                            if (record.id) {
+                                this.openMenuTemplatePopup(record);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'construction',
+                    handlers: {
+                        click: (_columns, _data, _column, record, _rowIndex) => {
+                            if (record.id) {
+                                this.navigateMetaGenerator(record);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'integer',
+                    name: 'rank',
+                    header: TermsUtil.tLabel('rank'),
+                    record: {
+                        align: 'left',
+                        editable: true,
+                        format: '#,###'
+                    },
+                    sortable: false,
+                    width: 60
+                },
+                MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 175),
+                {
+                    type: 'string',
+                    name: 'title',
+                    header: TermsUtil.tLabel('title'),
+                    record: {
+                        editable: false,
+                        align: 'left',
+                        renderer: (value, column, record, rowIndex, field) => {
+                            return record.name ? TermsUtil.tMenu(record.name) : '';
+                        }
+                    },
+                    sortable: false,
+                    width: 175
+                },
+                // name, displayName, align, sortable, width, mandatory, codeName
+                await MetaApi.getGristCodeSelectorColumnConfig('menuType', 'page_type', 'left', false, 90, true, 'MENU_PAGE_TYPE'),
+                await MetaApi.getGristCodeSelectorColumnConfig('routingType', 'routing_type', 'left', false, 0, false, 'MENU_PAGE_ROUTING_TYPE'),
+                // type, name, displayName, align, editable, sortable, width
+                MetaApi.getGristColumnConfig2('string', 'routing', 'routing', 'left', true, false, 175),
+                MetaApi.getGristColumnConfig2('string', 'category', 'tag', 'left', true, false, 175),
+                MetaApi.getGristColumnConfig2('string', 'resourceUrl', 'page_location', 'left', true, false, 450),
+                MetaApi.getGristColumnConfig2('string', 'iconPath', 'icon', 'left', true, false, 100),
+                MetaApi.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden', 'center', true, false, 55),
+                {
+                    type: 'resource-object',
+                    name: 'parent',
+                    header: TermsUtil.tLabel('parent-menu'),
+                    record: {
+                        renderer: (value, column, record, rowIndex, field) => {
+                            return value ? value.name + ' (' + TermsUtil.tMenu(value.name) + ')' : '';
+                        },
+                        editable: true,
+                        options: {
+                            title: TermsUtil.tLabel('parent-menu'),
+                            queryName: 'menus',
+                            pagination: { pages: [1000] },
+                            basicArgs: {
+                                filters: [
+                                    {
+                                        name: 'parentId',
+                                        operator: 'is_null'
+                                    }
+                                ],
+                                sortings: [
+                                    {
+                                        name: 'rank',
+                                        desc: false
+                                    }
+                                ]
+                            },
+                            list: { fields: ['id', 'name'] },
+                            columns: [
+                                { name: 'id', hidden: true },
+                                {
+                                    name: 'rank',
+                                    header: TermsUtil.tLabel('rank'),
+                                    width: 75,
+                                    record: {
+                                        editable: false,
+                                        format: '#,###',
+                                        align: 'left'
+                                    },
+                                    sortable: true
+                                },
+                                {
+                                    name: 'name',
+                                    width: 300,
+                                    header: TermsUtil.tLabel('name'),
+                                    filter: 'search'
+                                },
+                                {
+                                    name: 'description',
+                                    width: 350,
+                                    header: TermsUtil.tLabel('title'),
+                                    record: {
+                                        editable: false,
+                                        renderer: function (value, column, record, rowIndex, field) {
+                                            return TermsUtil.tMenu(record.name);
+                                        }
+                                    }
+                                },
+                                {
+                                    type: 'code',
+                                    name: 'menuType',
+                                    width: 120,
+                                    header: TermsUtil.tLabel('menu_type'),
+                                    record: {
+                                        editable: false,
+                                        codeName: 'MENU_TYPE'
+                                    }
+                                },
+                                {
+                                    name: 'routing',
+                                    width: 150,
+                                    header: TermsUtil.tLabel('routing'),
+                                    record: {
+                                        editable: false
+                                    }
+                                }
+                            ],
+                            valueField: 'id',
+                            nameField: 'name',
+                            descriptionField: 'routing'
+                        }
+                    },
+                    width: 200
+                },
+                {
+                    type: 'resource-object',
+                    name: 'role',
+                    label: true,
+                    header: i18next.t('field.required role'),
+                    record: {
+                        editable: true,
+                        options: {
+                            title: i18next.t('title.lookup role'),
+                            queryName: 'roles'
+                        }
+                    },
+                    width: 200
+                }
+                /*{
+                  type: 'meta-code-selector',
+                  header: TermsUtil.tLabel('parent-menu'),
+                  name: 'parentId',
+                  record: {
+                    editable: true,
+                    align: 'left',
+                    options: {
+                      codes: await ServiceUtil.getCodeByEntity({queryName:'menus', codeField:'id', dispField:'name', filters:[{ name: 'parentId', operator: 'is_null', value: '' }]}),
+                      queryName: 'menus',
+                      codeField: 'id',
+                      dispField: 'name',
+                      filterFields: [{name: 'name', operator: 'like'}],
+                      selectorName: TermsUtil.tLabel('parent-menu'),
+                      columns: [
+                        {
+                          name: 'id',
+                          hidden: true
+                        },
+                        //MetaApi.getGristColumnConfig('integer', 'rank', 'right', false, true, 65),
+                        {
+                          type: 'integer',
+                          name: 'rank',
+                          header: TermsUtil.tLabel('rank'),
+                          record: {
+                            align: 'left',
+                            editable: false,
+                            format: '#,###'
+                          },
+                          sortable: false,
+                          width: 65
+                        },
+                        MetaApi.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden', 'center', true, false, 60),
+                        {
+                          type:'select',
+                          name: 'menuType',
+                          header: 'menu_type',
+                          record: {
+                            align:'left',
+                            editable: false
+                          },
+                          options:{
+                            type: 'code',
+                            name: 'MENU_TYPE'
+                          },
+                          sortable: false,
+                          width: 100
+                        },
+                        MetaApi.getGristColumnConfig('string', 'name', 'left', false, true, 450)
+                      ],
+                      filters: [{ name: 'parentId', operator: 'is_null', value: '' }],
+                      sorters: [{ name: 'rank', desc: false }],
+                    }
+                  },
+                  sortable: false,
+                  width: 120
+                }*/
+            ]
+        };
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], DynamicMenu.prototype, "searchFields", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DynamicMenu.prototype, "groupConfig", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DynamicMenu.prototype, "detailConfig", void 0);
+__decorate([
+    query('ox-filters-form-base'),
+    __metadata("design:type", OxFiltersFormBase)
+], DynamicMenu.prototype, "searchForm", void 0);
+__decorate([
+    query('#master-grist'),
+    __metadata("design:type", DataGrist)
+], DynamicMenu.prototype, "groupGrist", void 0);
+__decorate([
+    query('#detail-grist'),
+    __metadata("design:type", DataGrist)
+], DynamicMenu.prototype, "detailGrist", void 0);
+DynamicMenu = __decorate([
+    customElement('dynamic-menu')
+], DynamicMenu);
+export { DynamicMenu };
+//# sourceMappingURL=dynamic-menu.js.map