@things-factory/meta-ui 10.1.247 → 10.1.248

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

@@ -1,663 +0,0 @@
-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