@things-factory/meta-ui 7.0.1-alpha.1 → 7.0.1-alpha.11

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

@@ -1,4 +1,4 @@
-import { html } from 'lit-element'
+import { html } from 'lit'
 
 import { i18next, localize } from '@things-factory/i18n-base'
 import { PageView } from '@things-factory/shell'
@@ -15,7 +15,6 @@ import { ServiceUtil } from '../../utils/service-util'
 import { UiUtil } from '../../utils/ui-util'
 
 class DynamicMenu extends localize(i18next)(PageView) {
-
   static get properties() {
     return {
       searchFields: Array,
@@ -29,29 +28,32 @@ class DynamicMenu extends localize(i18next)(PageView) {
     return MetaApi.getBasicMasterDetailGristStyle('top-down')
   }
 
-  // 화면 
+  // 화면
   render() {
     return html`
       <div slot="headroom">
         <div id="filters">
-          <ox-filters-form-base 
-            .filters=${this.searchFields|| []} 
-            @filters-change=${e=> { this.groupGrist?.fetch() }}
+          <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">
         <div class="container_detail">
           <!--h2>
             <mwc-icon>list_alt</mwc-icon>${TermsUtil.tTitle('menu_group')}
           </h2-->
-          <ox-grist 
-            id="master-grist" 
-            .config=${this.groupConfig} 
-            .mode=${MetaApi.isMobileEnv() ? 'LIST'  : 'GRID'} 
+          <ox-grist
+            id="master-grist"
+            .config=${this.groupConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
             auto-fetch
-            .fetchHandler=${this.fetchGroupHandler.bind(this)}>
+            .fetchHandler=${this.fetchGroupHandler.bind(this)}
+          >
           </ox-grist>
           <div id="button-container" class="button-container">
             <mwc-button raised label="${TermsUtil.tButton('save')}" @click=${e => this.saveGroup()}></mwc-button>
@@ -60,17 +62,18 @@ class DynamicMenu extends localize(i18next)(PageView) {
         </div>
 
         <div class="container_detail">
-          <ox-grist 
-            id="detail-grist" 
-            .config=${this.detailConfig} 
-            .mode=${MetaApi.isMobileEnv() ? 'LIST'  : 'GRID'} 
+          <ox-grist
+            id="detail-grist"
+            .config=${this.detailConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
             explcit-fetch
-            .fetchHandler=${this.fetchDetailHandler.bind(this)}>
+            .fetchHandler=${this.fetchDetailHandler.bind(this)}
+          >
           </ox-grist>
           <div id="button-container" class="button-container">
-          <mwc-button raised label="${TermsUtil.tButton('copy')}" @click=${e => this.copyMenu()}></mwc-button>
-          <mwc-button raised label="${TermsUtil.tButton('save')}" @click=${e => this.saveMenu()}></mwc-button>
-          <mwc-button raised label="${TermsUtil.tButton('delete')}" @click=${e => this.deleteMenu()}></mwc-button>
+            <mwc-button raised label="${TermsUtil.tButton('copy')}" @click=${e => this.copyMenu()}></mwc-button>
+            <mwc-button raised label="${TermsUtil.tButton('save')}" @click=${e => this.saveMenu()}></mwc-button>
+            <mwc-button raised label="${TermsUtil.tButton('delete')}" @click=${e => this.deleteMenu()}></mwc-button>
           </div>
         </div>
       </div>
@@ -79,7 +82,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
 
   get context() {
     return {
-      title: TermsUtil.tTitle('dynamic_menu') 
+      title: TermsUtil.tTitle('dynamic_menu')
     }
   }
 
@@ -88,7 +91,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
   }
 
   /**
-   * 메뉴 그룹 그리드 
+   * 메뉴 그룹 그리드
    */
   get groupGrist() {
     return this.shadowRoot.querySelector('#master-grist')
@@ -108,19 +111,19 @@ class DynamicMenu extends localize(i18next)(PageView) {
   /**
    * @description 부모 메뉴 (메뉴 그룹) 선택시 하위 메뉴 리스트 조회
    *********************************
-   * @param {Object} param0 
+   * @param {Object} param0
    */
   async fetchDetailHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
-    if(this.menuGroupId) {
+    if (this.menuGroupId) {
       let filters = [
         {
-          name: 'parentId', 
-          operator: 'eq', 
-          value: this.menuGroupId 
+          name: 'parentId',
+          operator: 'eq',
+          value: this.menuGroupId
         },
-        ...(await this.searchForm.getQueryFilters()).filter(x=> ['templateCode','templateText'].includes(x.name))
+        ...(await this.searchForm.getQueryFilters()).filter(x => ['templateCode', 'templateText'].includes(x.name))
       ]
-      
+
       let selectFields = `
         id
         name
@@ -143,11 +146,10 @@ class DynamicMenu extends localize(i18next)(PageView) {
       limit = 999999
       let fetchResult = await MetaApi.searchByPagination('dynamicMenus', filters, sorters, page, limit, selectFields)
 
-      if(fetchResult && fetchResult.records) {
+      if (fetchResult && fetchResult.records) {
         fetchResult.records.forEach(x => {
           x.parentId = this.menuGroupId
         })
-
       }
 
       return fetchResult
@@ -157,21 +159,18 @@ class DynamicMenu extends localize(i18next)(PageView) {
   /**
    * @description 부모 메뉴 (메뉴 그룹) 조회
    ****************************************
-   * @param {Object} param0 
-   * @returns 
+   * @param {Object} param0
+   * @returns
    */
   async fetchGroupHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
-    // 선택된 부모 메뉴 ID 초기화 
+    // 선택된 부모 메뉴 ID 초기화
     this.menuGroupId = null
 
-    if(this.detailGrist && this.detailGrist.data) {
-      this.detailGrist.data = {};
+    if (this.detailGrist && this.detailGrist.data) {
+      this.detailGrist.data = {}
     }
 
-    let filters = [
-      ...await this.searchForm.getQueryFilters(), 
-      { name: 'parentId', operator: 'is_null', value: '' }
-    ]
+    let filters = [...(await this.searchForm.getQueryFilters()), { name: 'parentId', operator: 'is_null', value: '' }]
 
     let selectFields = `
       id
@@ -194,14 +193,14 @@ class DynamicMenu extends localize(i18next)(PageView) {
   /*******************************************/
 
   /**
-   * 메뉴 그룹 Create / Update 
+   * 메뉴 그룹 Create / Update
    */
   async saveGroup() {
     let patches = MetaApi.patchesForUpdateMultiple(this.groupGrist)
 
     if (ValueUtil.isNotEmpty(patches)) {
       patches.forEach(patch => {
-        if(patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
+        if (patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
           patch.hiddenFlag = false
         }
       })
@@ -214,32 +213,32 @@ class DynamicMenu extends localize(i18next)(PageView) {
   }
 
   /**
-   * 메뉴 그룹 Delete 
-   * @returns 
+   * 메뉴 그룹 Delete
+   * @returns
    */
   async deleteGroup() {
     await MetaApi.deleteListByGristSelected(this.groupGrist, 'deleteMenus')
   }
 
   /**
-   * 메뉴 Create / Update 
+   * 메뉴 Create / Update
    */
   async saveMenu() {
     let patches = MetaApi.patchesForUpdateMultiple(this.detailGrist)
 
     if (ValueUtil.isNotEmpty(patches)) {
       patches.forEach(patch => {
-        patch.menuType = patch.menuType || 'SCREEN'        
+        patch.menuType = patch.menuType || 'SCREEN'
 
-        if(!patch.parentId){
-          patch.parent = { id : this.menuGroupId }
+        if (!patch.parentId) {
+          patch.parent = { id: this.menuGroupId }
         } else {
-          patch.parent = { id: patch.parentId}
+          patch.parent = { id: patch.parentId }
 
           delete patch.parentId
         }
 
-        if(patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
+        if (patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
           patch.hiddenFlag = false
         }
       })
@@ -255,53 +254,52 @@ class DynamicMenu extends localize(i18next)(PageView) {
     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)    
+    exportMenuElement.recordName = record.name
+    await MetaApi.openPopupByElement(record.name, 'large', exportMenuElement, true)
   }
 
   /**
-   * 메뉴 Delete 
-   * @returns 
+   * 메뉴 Delete
+   * @returns
    */
   async deleteMenu() {
     await MetaApi.deleteListByGristSelected(this.detailGrist, 'deleteMenus')
   }
 
   /**
-   * 메뉴 복사 
+   * 메뉴 복사
    */
   async copyMenu() {
-    let selectMenus = this.detailGrist.selected;
+    let selectMenus = this.detailGrist.selected
 
-    if(!selectMenus || selectMenus.length == 0){
-      UiUtil.showAlertPopup('text.nothing_selected', 'text.there_is_no_selected_items', 'info', 'confirm');
-      return;
+    if (!selectMenus || selectMenus.length == 0) {
+      UiUtil.showAlertPopup('text.nothing_selected', 'text.there_is_no_selected_items', 'info', 'confirm')
+      return
     }
 
-    let copyMenu = selectMenus[0];
+    let copyMenu = selectMenus[0]
 
-    if(!copyMenu.id){
-      return;
+    if (!copyMenu.id) {
+      return
     }
 
-    Object.keys(copyMenu).forEach( x=> {
-      if(x.startsWith('__')) {
-        delete copyMenu[x];
+    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.template = menu ? menu.template || '' : ''
 
-    copyMenu.name = copyMenu.name + '-copy';
-    copyMenu.routing = copyMenu.routing + '-copy';
-    copyMenu.parent = { id: copyMenu.parentId};
-    delete copyMenu.id;
-    delete copyMenu.parentId;
+    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) {
@@ -315,29 +313,29 @@ class DynamicMenu extends localize(i18next)(PageView) {
   }
 
   /**
-   * 메뉴 템플릿을 편집 할 수 있는 팝업을 오픈한다. 
-   * @param {Object} record 
+   * 메뉴 템플릿을 편집 할 수 있는 팝업을 오픈한다.
+   * @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)    
+    await MetaApi.openPopupByElement(record.name, 'large', menuTemplateElement, true)
   }
 
   /**
-   * 메뉴 템플릿을 생성 할 수 있는 화면으로 이동한다. 
-   * @param {Object} record 
+   * 메뉴 템플릿을 생성 할 수 있는 화면으로 이동한다.
+   * @param {Object} record
    */
-  navigateMetaGenerator(record){
+  navigateMetaGenerator(record) {
     MetaApi.pageNavigate(`meta-generator?menuId=${record.id}`)
   }
 
- /**
-  * LifeCycle - 화면 레더링 설정 
-  */
+  /**
+   * LifeCycle - 화면 레더링 설정
+   */
   async pageInitialized() {
-    // 조회 필드 
+    // 조회 필드
     this.searchFields = [
       // name, type, label, operator, optionValues
       MetaApi.getGristSearchColumnConfig('name', 'string', 'name', 'i_like'),
@@ -346,10 +344,10 @@ class DynamicMenu extends localize(i18next)(PageView) {
       // 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'),
+      MetaApi.getGristSearchColumnConfig('templateText', 'string', 'menu_template_search_text', 'i_like')
     ]
 
-    // 메뉴 그룹 그리드 설정  
+    // 메뉴 그룹 그리드 설정
     this.groupConfig = {
       rows: MetaApi.getGristSelectableConfig(false),
       // 공간이 부족해서 페이지네이션 제거
@@ -357,14 +355,17 @@ class DynamicMenu extends localize(i18next)(PageView) {
       appendable: true,
       columns: [
         ...MetaApi.getGristGuttersConfig(true, false),
-        { type: 'gutter', gutterName: 'button', icon: 'menu_open',
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'menu_open',
           handlers: {
             click: (_columns, _data, _column, record, _rowIndex) => {
               if (record.id) {
                 this.groupMenuQuery(record)
               }
             }
-          },
+          }
         },
         {
           type: 'integer',
@@ -399,13 +400,13 @@ class DynamicMenu extends localize(i18next)(PageView) {
         // 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', '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)
       ]
     }
 
-    // 메뉴 그리드 설정  
+    // 메뉴 그리드 설정
     this.detailConfig = {
       rows: MetaApi.getGristSelectableConfig(false),
       // 공간이 부족해서 페이지네이션 제거
@@ -413,32 +414,41 @@ class DynamicMenu extends localize(i18next)(PageView) {
       appendable: true,
       columns: [
         ...MetaApi.getGristGuttersConfig(true, false),
-        { type: 'gutter', gutterName: 'button', icon: 'download',
+        {
+          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',
+        {
+          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',
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'construction',
           handlers: {
             click: (_columns, _data, _column, record, _rowIndex) => {
               if (record.id) {
                 this.navigateMetaGenerator(record)
               }
             }
-          },
+          }
         },
         {
           type: 'integer',
@@ -482,34 +492,40 @@ class DynamicMenu extends localize(i18next)(PageView) {
           header: TermsUtil.tLabel('parent-menu'),
           record: {
             renderer: (value, column, record, rowIndex, field) => {
-              return value ? (value.name + ' (' + TermsUtil.tMenu(value.name) + ')') : ''
+              return value ? value.name + ' (' + TermsUtil.tMenu(value.name) + ')' : ''
             },
             editable: true,
             options: {
               title: TermsUtil.tLabel('parent-menu'),
               queryName: 'menus',
-              pagination: { pages : [1000] },
+              pagination: { pages: [1000] },
               basicArgs: {
-                filters: [{
-                  name: 'parentId', operator: 'is_null'
-                }],
-                sortings: [{ 
-                  name: 'rank', desc: false 
-                }],
+                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 : { 
+                  width: 75,
+                  record: {
                     editable: false,
                     format: '#,###',
                     align: 'left'
                   },
-                  sortable: true,
+                  sortable: true
                 },
                 {
                   name: 'name',
@@ -528,24 +544,24 @@ class DynamicMenu extends localize(i18next)(PageView) {
                     }
                   }
                 },
-                { 
-                  type: 'code', 
-                  name: 'menuType', 
+                {
+                  type: 'code',
+                  name: 'menuType',
                   width: 120,
                   header: TermsUtil.tLabel('menu_type'),
-                  record: { 
-                    editable: false, 
-                    codeName: 'MENU_TYPE' 
+                  record: {
+                    editable: false,
+                    codeName: 'MENU_TYPE'
                   }
                 },
-                { 
-                  name: 'routing', 
+                {
+                  name: 'routing',
                   width: 150,
                   header: TermsUtil.tLabel('routing'),
-                  record: { 
+                  record: {
                     editable: false
                   }
-                },
+                }
               ],
               valueField: 'id',
               nameField: 'name',
@@ -553,7 +569,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
             }
           },
           width: 200
-        },
+        }
         /*{
           type: 'meta-code-selector',
           header: TermsUtil.tLabel('parent-menu'),
@@ -612,8 +628,8 @@ class DynamicMenu extends localize(i18next)(PageView) {
           width: 120
         }*/
       ]
-    }    
+    }
   }
 }
 
-customElements.define('dynamic-menu', DynamicMenu)
+customElements.define('dynamic-menu', DynamicMenu)