@things-factory/meta-ui 5.0.0-zeta.7 → 5.0.0

package/client/bootstrap.js

@@ -13,13 +13,13 @@ export default function bootstrap() {
 
   auth.on('profile', async ({ credential, domains, domain }) => {
     // 1. 용어 다운로드
-    let locale = MetaUtil.currentLocale()
-    await TermsUtil.downloadTerminologies(locale)
+    let locale = MetaUtil.currentLocale();
+    await TermsUtil.downloadTerminologies(locale);
 
     // 2. 메뉴 정보를 서버로 부터 받아서 적용
-    let menuRoutes = await MetaUtil.myDynamicMenus()
+    let menuRoutes = await MetaUtil.myDynamicMenus();
     let realMenus = menuRoutes.menus;
-    updateMenuTemplate(realMenus)
+    updateMenuTemplate(realMenus);
 
     // 3. 동적 메뉴 관리 화면 추가
     store.dispatch({
@@ -43,23 +43,49 @@ export default function bootstrap() {
           navigate('config-terminology')
         }
       }
-    })
+    }) 
+    
+    // 5. 모든 routes 정보 추출
+    let allRoutes = menuRoutes.routes;
 
-    // 5. store의 모듈 정보 조회 & 마지막 application 모듈 정보를 추출 & routes 정보 교체
+    // 6. store의 모듈 정보 조회 & 마지막 application 모듈 정보를 추출
     let modules = store.getState().app.modules;
-    let allModules = Object.assign([], modules)
+    let allModules = Object.assign([], modules);
     let appModule = allModules[allModules.length - 1];
-    appModule.routes = menuRoutes.routes;
 
-    // 6. store에 모듈 업데이트
+    // 7. 최종 애플리케이션 모듈의 routes 정보 교체
+    appModule.routes = allRoutes.filter(r => {
+      return r.template && !r.template.startsWith('@things-factory')
+    })
+
+    // 8. meta-ui 모듈 추출
+    let metaUiModule = allModules.find(m => {
+      return m.name == '@things-factory/meta-ui'
+    })
+
+    // 9. meta-ui의 routes 정보 교체
+    let metaUiRoutes = allRoutes.filter(r => {
+      let isMetaUiRoute = r.template && r.template.startsWith('@things-factory/meta-ui');
+      if(isMetaUiRoute) { 
+        r.template = r.template.replace('@things-factory/meta-ui/client', '.') 
+      }
+      
+      return isMetaUiRoute;
+    })
+
+    this.routes.forEach(r => {
+      metaUiRoutes.push({ page : r.page, tagname : r.tagname })
+    });
+    metaUiModule.routes = metaUiRoutes;
+
+    // 10. store에 모듈 업데이트
     store.dispatch({
       type: UPDATE_MODULES,
       modules: allModules
     })
 
-    // 7. 첫 페이지를 리로딩 처리 (shell/app.js에서 리로딩 처리시에는 라우팅 정보가 없어서 처리를 못하므로 여기서 다시 한번 해줌...)
+    // 11. 첫 페이지를 리로딩 처리 (shell/app.js에서 리로딩 처리시에는 라우팅 정보가 없어서 처리를 못하므로 여기서 다시 한번 해줌...)
     // TODO 먼저 PAGE_NOT_FOUND 화면이 나온 후에 화면이 나오는 부분 처리 필요 ...
     store.dispatch(navigateWithSilence(location))
   })
-
 }

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

@@ -1,17 +1,16 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+import './dynamic-menu-template.js'
+
 import { css, html } from 'lit-element'
 
-import { ScrollbarStyles, CommonGristStyles } from '@operato/styles'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { PageView } from '@things-factory/shell'
 import { isMobileDevice } from '@things-factory/utils'
-import { openPopup } from '@things-factory/layout-base'
 
-import '@things-factory/form-ui'
-import '@things-factory/grist-ui'
-import './dynamic-menu-template.js'
-
-import { TermsUtil } from './../../utils/terms-util'
 import { MetaUtil } from '../../utils/meta-util'
+import { TermsUtil } from '../../utils/terms-util'
 
 class DynamicMenu extends localize(i18next)(PageView) {
   static get properties() {
@@ -28,87 +27,95 @@ class DynamicMenu extends localize(i18next)(PageView) {
       CommonGristStyles,
       ScrollbarStyles,
       css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow-x: auto;
-        background-color: var(--main-section-background-color);
-      }
-      .container {
-        flex: 1;
-        display: grid;
-        overflow: hidden;
-        grid-template-rows: 50% 50%;
-      }
-      .container_detail {
-        background-color: var(--main-section-background-color);
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      h2 {
-        padding: var(--subtitle-padding);
-        font: var(--subtitle-font);
-        color: var(--subtitle-text-color);
-        border-bottom: var(--subtitle-border-bottom);
-      }
-
-      .container_detail h2 {
-        margin: var(--grist-title-margin);
-        border: var(--grist-title-border);
-        font: var(--grist-title-font);
-        color: var(--secondary-color);
-      }
-
-      .container_detail h2 mwc-icon {
-        vertical-align: middle;
-        margin: var(--grist-title-icon-margin);
-        font-size: var(--grist-title-icon-size);
-        color: var(--grist-title-icon-color);
-      }
-
-      h2 {
-        padding-bottom: var(--grist-title-with-grid-padding);
-      }      
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-      .button-container {
-        padding: var(--button-container-padding);
-        margin: var(--button-container-margin);
-        text-align: var(--button-container-align);
-        background-color: var(--button-container-background);
-        height: var(--button-container-height);
-        text-align: right;
-        padding-right: 12px;
-      }
-
-      mwc-button{
-        margin-left:7px;
-        margin-top:7px;
-      }
-    `]
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow-x: auto;
+          background-color: var(--main-section-background-color);
+        }
+        .container {
+          flex: 1;
+          display: grid;
+          overflow: hidden;
+          grid-template-rows: 50% 50%;
+        }
+        .container_detail {
+          background-color: var(--main-section-background-color);
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
+
+        h2 {
+          padding: var(--subtitle-padding);
+          font: var(--subtitle-font);
+          color: var(--subtitle-text-color);
+          border-bottom: var(--subtitle-border-bottom);
+        }
+
+        .container_detail h2 {
+          margin: var(--grist-title-margin);
+          border: var(--grist-title-border);
+          font: var(--grist-title-font);
+          color: var(--secondary-color);
+        }
+
+        .container_detail h2 mwc-icon {
+          vertical-align: middle;
+          margin: var(--grist-title-icon-margin);
+          font-size: var(--grist-title-icon-size);
+          color: var(--grist-title-icon-color);
+        }
+
+        h2 {
+          padding-bottom: var(--grist-title-with-grid-padding);
+        }
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+        .button-container {
+          padding: var(--button-container-padding);
+          margin: var(--button-container-margin);
+          text-align: var(--button-container-align);
+          background-color: var(--button-container-background);
+          height: var(--button-container-height);
+          text-align: right;
+          padding-right: 12px;
+        }
+
+        mwc-button {
+          margin-left: 7px;
+          margin-top: 7px;
+        }
+      `
+    ]
   }
 
-  // 화면 
+  // 화면
   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>
+          <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="group-grist" .config=${this.groupConfig} .mode=${isMobileDevice() ? 'LIST'  : 'GRID'} auto-fetch
-            .fetchHandler=${this.fetchGroupHandler.bind(this)}>
+          <h2><mwc-icon>list_alt</mwc-icon>${TermsUtil.tTitle('menu_group')}</h2>
+          <ox-grist
+            id="group-grist"
+            .config=${this.groupConfig}
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            auto-fetch
+            .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>
@@ -116,8 +123,13 @@ class DynamicMenu extends localize(i18next)(PageView) {
           </div>
         </div>
         <div class="container_detail">
-          <ox-grist id="detail-grist" .config=${this.detailConfig} .mode=${isMobileDevice() ? 'LIST'  : 'GRID'} explcit-fetch
-            .fetchHandler=${this.fetchDetailHandler.bind(this)}>
+          <ox-grist
+            id="detail-grist"
+            .config=${this.detailConfig}
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            explcit-fetch
+            .fetchHandler=${this.fetchDetailHandler.bind(this)}
+          >
           </ox-grist>
           <div id="button-container" class="button-container">
             <mwc-button raised label="${TermsUtil.tButton('save')}" @click=${e => this.saveMenu()}></mwc-button>
@@ -130,7 +142,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
 
   get context() {
     return {
-      title: TermsUtil.tTitle('dynamic_menu') 
+      title: TermsUtil.tTitle('dynamic_menu')
     }
   }
 
@@ -139,7 +151,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
   }
 
   /**
-   * 메뉴 그룹 그리드 
+   * 메뉴 그룹 그리드
    */
   get groupGrist() {
     return this.shadowRoot.querySelector('#group-grist')
@@ -159,16 +171,18 @@ class DynamicMenu extends localize(i18next)(PageView) {
   /**
    * @description 부모 메뉴 (메뉴 그룹) 선택시 하위 메뉴 리스트 조회
    *********************************
-   * @param {Object} param0 
+   * @param {Object} param0
    */
   async fetchDetailHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
-    if(this.menuGroupId) {
-      let filters = [{ 
-        name: 'parent', 
-        operator: 'eq', 
-        value: this.menuGroupId 
-      }];
-      
+    if (this.menuGroupId) {
+      let filters = [
+        {
+          name: 'parent',
+          operator: 'eq',
+          value: this.menuGroupId
+        }
+      ]
+
       let selectFields = `
         id
         name
@@ -180,28 +194,25 @@ class DynamicMenu extends localize(i18next)(PageView) {
         hiddenFlag
         iconPath
       `
-      return await MetaUtil.searchByPagination('menus', filters, sorters, page, limit, selectFields);
+      return await MetaUtil.searchByPagination('menus', filters, sorters, page, limit, selectFields)
     }
   }
 
   /**
    * @description 부모 메뉴 (메뉴 그룹) 조회
    ****************************************
-   * @param {Object} param0 
-   * @returns 
+   * @param {Object} param0
+   * @returns
    */
   async fetchGroupHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
-    // 선택된 부모 메뉴 ID 초기화 
-    this.menuGroupId = null;
+    // 선택된 부모 메뉴 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: 'parent', operator: 'is_null', value: '' }
-    ];
+    let filters = [...(await this.searchForm.getQueryFilters()), { name: 'parent', operator: 'is_null', value: '' }]
 
     let selectFields = `
       id
@@ -215,7 +226,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
       hiddenFlag
       iconPath
     `
-    return await MetaUtil.searchByPagination('menus', filters, sorters, page, limit, selectFields);
+    return await MetaUtil.searchByPagination('menus', filters, sorters, page, limit, selectFields)
   }
 
   /*******************************************/
@@ -223,38 +234,37 @@ class DynamicMenu extends localize(i18next)(PageView) {
   /*******************************************/
 
   /**
-   * 메뉴 그룹 Create / Update 
+   * 메뉴 그룹 Create / Update
    */
   async saveGroup() {
-    await MetaUtil.updateMultipleData(this.groupGrist, 'updateMultipleMenu');
+    await MetaUtil.updateMultipleData(this.groupGrist, 'updateMultipleMenu')
   }
 
   /**
-   * 메뉴 그룹 Delete 
-   * @returns 
+   * 메뉴 그룹 Delete
+   * @returns
    */
   async deleteGroup() {
     await MetaUtil.deleteListByGristSelected(this.groupGrist, 'deleteMenus')
   }
 
   /**
-   * 메뉴 Create / Update 
+   * 메뉴 Create / Update
    */
   async saveMenu() {
-    let cudRecords = this.detailGrist.dirtyRecords;
+    let cudRecords = this.detailGrist.dirtyRecords
 
     if (!cudRecords || cudRecords.length == 0) {
-      MetaUtil.showAlertPopup('text.nothing_selected', 'text.there_is_nothing_to_delete', 'info', 'confirm');
-
+      MetaUtil.showAlertPopup('text.nothing_selected', 'text.there_is_nothing_to_delete', 'info', 'confirm')
     } else {
-      let patches = MetaUtil.patchForUpdateMultiple(cudRecords);
+      let patches = MetaUtil.patchForUpdateMultiple(cudRecords)
 
       patches.forEach(patch => {
         patch.menuType = 'SCREEN'
-        patch.parent = { id : this.menuGroupId }
+        patch.parent = { id: this.menuGroupId }
       })
 
-      let result = await MetaUtil.updateMultiple('updateMultipleMenu', patches);
+      let result = await MetaUtil.updateMultiple('updateMultipleMenu', patches)
       if (result) {
         this.detailGrist.fetch()
       }
@@ -262,38 +272,38 @@ class DynamicMenu extends localize(i18next)(PageView) {
   }
 
   /**
-   * 메뉴 Delete 
-   * @returns 
+   * 메뉴 Delete
+   * @returns
    */
   async deleteMenu() {
     await MetaUtil.deleteListByGristSelected(this.detailGrist, 'deleteMenus')
   }
 
   groupMenuQuery(record) {
-    this.menuGroupId = record.id;
-    this.detailGrist.fetch();
+    this.menuGroupId = record.id
+    this.detailGrist.fetch()
   }
 
   /**
-   * 메뉴 템플릿을 편집 할 수 있는 팝업을 오픈한다. 
-   * @param {Object} record 
+   * 메뉴 템플릿을 편집 할 수 있는 팝업을 오픈한다.
+   * @param {Object} record
    */
-  async openMenuTemplatePopup(record){
-    let menuTemplateElement = MetaUtil.createCustomElement('dynamic-menu-template', 'dynamic-menu-template');
-    menuTemplateElement.title = TermsUtil.tLabel('template');
-    menuTemplateElement.recordId = record.id;
-    await MetaUtil.openPopupByElement(record.name, 'large', menuTemplateElement, true);    
+  async openMenuTemplatePopup(record) {
+    let menuTemplateElement = MetaUtil.createCustomElement('dynamic-menu-template', 'dynamic-menu-template')
+    menuTemplateElement.title = TermsUtil.tLabel('template')
+    menuTemplateElement.recordId = record.id
+    await MetaUtil.openPopupByElement(record.name, 'large', menuTemplateElement, true)
   }
 
   /**
-  * LifeCycle
-  * 화면 레더링 설정 
-  */
+   * LifeCycle
+   * 화면 레더링 설정
+   */
   async pageInitialized() {
     // 공통 코드 메뉴타입 조회
-    let menuTypes = await MetaUtil.getCodeSelectorData('MENU_TYPE');
+    let menuTypes = await MetaUtil.getCodeSelectorData('MENU_TYPE')
 
-    // 조회 필드 
+    // 조회 필드
     this.searchFields = [
       // name, type, label, operator, optionValues
       MetaUtil.getGristSearchColumnConfig('name', 'string', 'name', 'i_like'),
@@ -301,21 +311,24 @@ class DynamicMenu extends localize(i18next)(PageView) {
       MetaUtil.getGristSearchColumnConfig('hiddenFlag', 'checkbox', 'hidden_flag', 'eq')
     ]
 
-    // 메뉴 그룹 그리드 설정  
+    // 메뉴 그룹 그리드 설정
     this.groupConfig = {
       rows: MetaUtil.getGristSelectableConfig(false),
       pagination: MetaUtil.getGristPagination50Config(),
       appendable: true,
       columns: [
         ...MetaUtil.getGristGuttersDefaultConfig(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);
+                this.groupMenuQuery(record)
               }
             }
-          },
+          }
         },
         // type, name, align, editable, sortable, width
         MetaUtil.getGristColumnConfig('integer', 'rank', 'right', true, false, 60),
@@ -328,7 +341,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
             editable: false,
             align: 'left',
             renderer: (value, column, record, rowIndex, field) => {
-              return record.name ? TermsUtil.tMenu(record.name) : '';
+              return record.name ? TermsUtil.tMenu(record.name) : ''
             }
           },
           sortable: false,
@@ -339,25 +352,28 @@ class DynamicMenu extends localize(i18next)(PageView) {
         MetaUtil.getGristSelectorColumnConfig('menuType', 'menu_type', 'left', false, 100, true, menuTypes),
         // type, name, displayName, align, editable, sortable, width
         MetaUtil.getGristColumnConfig2('string', 'iconPath', 'icon', 'left', true, false, 100),
-        MetaUtil.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden_flag', 'center', true, false, 100),
+        MetaUtil.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden_flag', 'center', true, false, 100)
       ]
     }
 
-    // 메뉴 그리드 설정  
+    // 메뉴 그리드 설정
     this.detailConfig = {
       rows: MetaUtil.getGristSelectableConfig(false),
       pagination: MetaUtil.getGristPagination50Config(),
       appendable: true,
       columns: [
         ...MetaUtil.getGristGuttersDefaultConfig(false),
-        { 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);
+                this.openMenuTemplatePopup(record)
               }
             }
-          },
+          }
         },
         MetaUtil.getGristColumnConfig('integer', 'rank', 'right', true, false, 55),
         MetaUtil.getGristColumnConfig('string', 'name', 'left', true, false, 135),
@@ -369,7 +385,7 @@ class DynamicMenu extends localize(i18next)(PageView) {
             editable: false,
             align: 'left',
             renderer: (value, column, record, rowIndex, field) => {
-              return record.name ? TermsUtil.tMenu(record.name) : '';
+              return record.name ? TermsUtil.tMenu(record.name) : ''
             }
           },
           sortable: false,
@@ -380,10 +396,10 @@ class DynamicMenu extends localize(i18next)(PageView) {
         MetaUtil.getGristColumnConfig('string', 'routing', 'left', true, false, 175),
         MetaUtil.getGristColumnConfig2('string', 'detailFormId', 'page_location', 'left', true, false, 450),
         MetaUtil.getGristColumnConfig2('string', 'iconPath', 'icon', 'left', true, false, 125),
-        MetaUtil.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden_flag', 'center', true, false, 95),
+        MetaUtil.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden_flag', 'center', true, false, 95)
       ]
-    }    
+    }
   }
 }
 
-customElements.define('dynamic-menu', DynamicMenu)
+customElements.define('dynamic-menu', DynamicMenu)

package/client/route.js

@@ -1,10 +1,34 @@
+import { store } from '@things-factory/shell'
+
 export default function route(page) {
-  switch (page) {
-    case 'dynamic-menu':
-      import('./pages/menu/dynamic-menu')
-      return page
-    case 'config-terminology':
-      import('./pages/terms/config-terminology')
-      return page
+  if (page == 'dynamic-menu') {
+    import('./pages/menu/dynamic-menu')
+    return page
+
+  } else if(page == 'config-terminology') {
+    import('./pages/terms/config-terminology')
+    return page
+
+  } else {
+    let storage = store.getState();
+
+    if(storage && storage.app && storage.app.modules) {
+      let modules = storage.app.modules;
+      let metaUiMod = modules.find(m => {
+        return m.name == '@things-factory/meta-ui'
+      })
+  
+      if(metaUiMod && metaUiMod.routes) {
+        let metaUiRoutes = metaUiMod.routes;
+        let metaRoute = metaUiRoutes.find(mapping => mapping.page == page)
+  
+        if (metaRoute) {
+          import (`${metaRoute.template}`)
+          return page
+        }       
+      }
+    }
+
+    return '';
   }
-}
+}