@things-factory/meta-ui 7.0.1-alpha.86 → 7.0.1-alpha.87

package/client/pages/menu/{dynamic-menu.js → dynamic-menu.ts}

@@ -1,11 +1,15 @@
 import '@material/web/icon/icon.js'
 import '@things-factory/form-ui'
 
+import gql from 'graphql-tag'
 import { html } from 'lit'
+import { customElement, property, 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'
@@ -14,22 +18,22 @@ import './dynamic-menu-template.js'
 import './export-menu-popup.js'
 import { ValueUtil } from '../../utils/value-util'
 import { UiUtil } from '../../utils/ui-util'
+import { DataGrist, FetchOption } from '@operato/data-grist'
 
-class DynamicMenu extends p13n(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      searchFields: Array,
-      groupConfig: Object,
-      detailConfig: Object,
-      menuGroupId: String
-    }
-  }
+@customElement('dynamic-menu')
+export class DynamicMenu extends p13n(localize(i18next)(PageView)) {
+  static styles = [...MetaApi.getBasicMasterDetailGristStyle('top-down')]
 
-  static get styles() {
-    return MetaApi.getBasicMasterDetailGristStyle('top-down')
-  }
+  @state() searchFields?: string[]
+  @state() groupConfig: any
+  @state() detailConfig: any
+
+  @query('ox-filters-form-base') searchForm!: OxFiltersFormBase
+  @query('#master-grist') groupGrist!: DataGrist
+  @query('#detail-grist') detailGrist!: DataGrist
+
+  private menuGroupId?: string
 
-  // 화면
   render() {
     return html`
       <div slot="headroom" class="header">
@@ -52,9 +56,8 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
             id="master-grist"
             .config=${this.groupConfig}
             .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
-            .personalConfigProvider=${this.getPagePreferenceProvider('master-grist')}
+            .personalConfigProvider=${this.getPagePreferenceProvider('master-grist')!}
             .fetchHandler=${this.fetchGroupHandler.bind(this)}
-            auto-fetch
           >
             <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
           </ox-grist>
@@ -72,7 +75,7 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
             .config=${this.detailConfig}
             .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
             .fetchHandler=${this.fetchDetailHandler.bind(this)}
-            .personalConfigProvider=${this.getPagePreferenceProvider('detail-grist')}
+            .personalConfigProvider=${this.getPagePreferenceProvider('detail-grist')!}
             explcit-fetch
           >
             <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
@@ -95,24 +98,6 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
     }
   }
 
-  get searchForm() {
-    return this.shadowRoot.querySelector('ox-filters-form-base')
-  }
-
-  /**
-   * 메뉴 그룹 그리드
-   */
-  get groupGrist() {
-    return this.shadowRoot.querySelector('#master-grist')
-  }
-
-  /**
-   * 메뉴 그룹에 포함 된 메뉴 그리드
-   */
-  get detailGrist() {
-    return this.shadowRoot.querySelector('#detail-grist')
-  }
-
   /*******************************************/
   /* 조회 */
   /*******************************************/
@@ -122,7 +107,7 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
    *********************************
    * @param {Object} param0
    */
-  async fetchDetailHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
+  async fetchDetailHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {
     if (this.menuGroupId) {
       let filters = [
         {
@@ -177,12 +162,12 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
    * @param {Object} param0
    * @returns
    */
-  async fetchGroupHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
+  async fetchGroupHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {
     // 선택된 부모 메뉴 ID 초기화
-    this.menuGroupId = null
+    this.menuGroupId = ''
 
     if (this.detailGrist && this.detailGrist.data) {
-      this.detailGrist.data = {}
+      this.detailGrist.data = { records: [] }
     }
 
     let filters = [...(await this.searchForm.getQueryFilters()), { name: 'parentId', operator: 'is_null', value: '' }]
@@ -288,10 +273,10 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
           patch.parent = { id: this.menuGroupId }
         } else {
           patch.parent = { id: patch.parentId }
-
-          delete patch.parentId
         }
 
+        delete patch.parentId
+
         if (patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
           patch.hiddenFlag = false
         }
@@ -301,18 +286,36 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
         return patch
       })
 
-      let result = await MetaApi.updateMultiple('updateMultipleMenu', patches)
-      if (result) {
-        this.detailGrist.fetch()
+      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
+    ;(exportMenuElement as any).recordId = record.id
+    ;(exportMenuElement as any).recordName = record.name
+
     await MetaApi.openPopupByElement(record.name, 'large', exportMenuElement, true)
   }
 
@@ -376,8 +379,10 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
    */
   async openMenuTemplatePopup(record) {
     let menuTemplateElement = MetaApi.createCustomElement('dynamic-menu-template', 'dynamic-menu-template')
+
     menuTemplateElement.title = TermsUtil.tLabel('template')
-    menuTemplateElement.recordId = record.id
+    ;(menuTemplateElement as any).recordId = record.id
+
     await MetaApi.openPopupByElement(record.name, 'large', menuTemplateElement, true)
   }
 
@@ -733,5 +738,3 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
     }
   }
 }
-
-customElements.define('dynamic-menu', DynamicMenu)

package/client/utils/meta-api.js

@@ -94,7 +94,7 @@ export class MetaApi {
    *************************************************
    * @param {String} popupTitle 팝업 타이틀
    * @param {String} popupSize 팝업 사이즈 ex) 'large', 'medium', 'small'
-   * @param {String} element 팝업에 표시할 엘리먼트 HTML 문자열
+   * @param {HTMLElement} element 팝업에 표시할 엘리먼트 HTMLElement
    * @param {Boolean} backdrop 백드롭 여부
    * @returns {Object} 팝업 객체
    */
@@ -139,7 +139,7 @@ export class MetaApi {
    * @description 페이지 이동
    **************************************
    * @param {String} url 페이지 URL (route 값)
-   * @param {Object} params 페이지 파라미터, null 가능
+   * @param {Object} [params] 페이지 파라미터, null 가능
    */
   static pageNavigate(url, params) {
     UiUtil.pageNavigate(url, params)
@@ -270,7 +270,7 @@ export class MetaApi {
    * @param {String} queryFunc 쿼리 함수
    * @param {Array} filters 조회 조건
    * @param {Array} sortings 소팅 조건
-   * @param {Number} page 현재 페이지
+   * @param {Number|undefined} page 현재 페이지
    * @param {Number} limit 페이지 당 표시할 레코드 건수
    * @param {String} selectFields 조회할 필드 리스트
    * @returns {FetchResult} 조회 결과 { records : [{,...}], total : 100 }
@@ -611,7 +611,7 @@ export class MetaApi {
    * @param {String} type 검색 편집기 유형
    * @param {String} label 검색 필드 라벨명
    * @param {String} operator 검색 연산자
-   * @param {Array} optionValues 옵션 값
+   * @param {Array} [optionValues] 옵션 값
    * @returns {Object} 그리스트 검색 편집기 설정
    */
   static getGristSearchColumnConfig(name, type, label, operator, optionValues) {

package/client/utils/service-util.js

@@ -523,12 +523,12 @@ export class ServiceUtil {
    * @param {String} queryFunc 쿼리 함수
    * @param {Array} filters 조회 조건
    * @param {Array} sortings 소팅 조건
-   * @param {Number} page 현재 페이지
+   * @param {Number|undefined} page 현재 페이지
    * @param {Number} limit 페이지 당 표시할 레코드 건수
    * @param {String} selectFields 조회할 필드 리스트
    * @returns {Array} 조회 결과 { records : [{...}], total : 100 }
    */
-  static async searchByPagination(queryFunc, filters, sortings, page, limit, selectFields) {
+  static async searchByPagination(queryFunc, filters, sortings, page = 1, limit, selectFields) {
     try {
       const response = await client.query({
         query: gql`

package/client/utils/ui-util.js

@@ -73,7 +73,7 @@ export class UiUtil {
    *************************************************
    * @param {String} popupTitle 팝업 타이틀
    * @param {String} popupSize 팝업 사이즈 ex) 'large', 'medium', 'small'
-   * @param {String} element 팝업에 표시할 엘리먼트
+   * @param {HTMLElement} element 팝업에 표시할 엘리먼트
    * @param {Boolean} backdrop 백드롭 여부
    * @returns {Object} popup
    */
@@ -101,7 +101,9 @@ export class UiUtil {
    */
   static async openDynamicPopup(title, popupConfig, paramData, popupCloseCallback) {
     // 부모 필드
-    let parentValue = ValueUtil.isNotEmpty(popupConfig.parent_field) ? ValueUtil.getParams(paramData, ...popupConfig.parent_field.split('.')) : undefined
+    let parentValue = ValueUtil.isNotEmpty(popupConfig.parent_field)
+      ? ValueUtil.getParams(paramData, ...popupConfig.parent_field.split('.'))
+      : undefined
 
     // 팝업 엘리먼트 생성
     let htmlText = `<${popupConfig.tagname} route_name='${popupConfig.menu}' parent_id='${parentValue}' is_popup=true></${popupConfig.tagname}>`
@@ -222,7 +224,7 @@ export class UiUtil {
    * @param {String} textCode Alert 텍스트 표시를 위한 용어 이름 예) text.are_you_sure
    * @param {String} type Alert 창 유형 - info, error, warning ...
    * @param {String} confirmButtonCode 확인 버튼 표시를 위한 용어 이름 예) confirm
-   * @param {String} cancelButtonCode 취소 버튼 표시를 위한 용어 이름 예) cancel
+   * @param {String} [cancelButtonCode] 취소 버튼 표시를 위한 용어 이름 예) cancel
    * @returns {Object} Alert 팝업
    */
   static async showAlertPopup(titleCode, textCode, type, confirmButtonCode, cancelButtonCode) {

package/dist-client/pages/menu/dynamic-menu.d.ts

@@ -1 +1,84 @@
+import '@material/web/icon/icon.js';
+import '@things-factory/form-ui';
+import { PageView } from '@operato/shell';
+import { OxFiltersFormBase } from '@operato/form';
+import './dynamic-menu-template.js';
+import './export-menu-popup.js';
+import { DataGrist, FetchOption } from '@operato/data-grist';
+declare const DynamicMenu_base: (new (...args: any[]) => {
+    getPagePreferenceProvider(element: string): {
+        load: () => Promise<any>;
+        save: (preference: any) => Promise<any>;
+        reset: () => Promise<void>;
+    } | undefined;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+export declare class DynamicMenu extends DynamicMenu_base {
+    static styles: any[];
+    searchFields?: string[];
+    groupConfig: any;
+    detailConfig: any;
+    searchForm: OxFiltersFormBase;
+    groupGrist: DataGrist;
+    detailGrist: DataGrist;
+    private menuGroupId?;
+    render(): import("lit").TemplateResult<1>;
+    get context(): {
+        title: string;
+    };
+    /*******************************************/
+    /*******************************************/
+    /**
+     * @description 부모 메뉴 (메뉴 그룹) 선택시 하위 메뉴 리스트 조회
+     *********************************
+     * @param {Object} param0
+     */
+    fetchDetailHandler({ page, limit, sorters }: FetchOption): Promise<any>;
+    /**
+     * @description 부모 메뉴 (메뉴 그룹) 조회
+     ****************************************
+     * @param {Object} param0
+     * @returns
+     */
+    fetchGroupHandler({ page, limit, sorters }: FetchOption): Promise<FetchResult>;
+    /*******************************************/
+    /*******************************************/
+    /**
+     * 메뉴 그룹 Create / Update
+     */
+    saveGroup(): Promise<void>;
+    /**
+     * 메뉴 그룹 Delete
+     * @returns
+     */
+    deleteGroup(): Promise<void>;
+    /**
+     * 메뉴 Create / Update
+     */
+    saveMenu(): Promise<void>;
+    exportMenu(record: any): Promise<void>;
+    /**
+     * 메뉴 Delete
+     * @returns
+     */
+    deleteMenu(): Promise<void>;
+    /**
+     * 메뉴 복사
+     */
+    copyMenu(): Promise<void>;
+    groupMenuQuery(record: any): void;
+    /**
+     * 메뉴 템플릿을 편집 할 수 있는 팝업을 오픈한다.
+     * @param {Object} record
+     */
+    openMenuTemplatePopup(record: any): Promise<void>;
+    /**
+     * 메뉴 템플릿을 생성 할 수 있는 화면으로 이동한다.
+     * @param {Object} record
+     */
+    navigateMetaGenerator(record: any): void;
+    /**
+     * LifeCycle - 화면 레더링 설정
+     */
+    pageInitialized(lifecycle: any): Promise<void>;
+}
 export {};

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

@@ -1,29 +1,22 @@
-import { __rest } from "tslib";
+import { __decorate, __metadata, __rest } from "tslib";
 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';
-class DynamicMenu extends p13n(localize(i18next)(PageView)) {
-    static get properties() {
-        return {
-            searchFields: Array,
-            groupConfig: Object,
-            detailConfig: Object,
-            menuGroupId: String
-        };
-    }
-    static get styles() {
-        return MetaApi.getBasicMasterDetailGristStyle('top-down');
-    }
-    // 화면
+import { DataGrist } from '@operato/data-grist';
+let DynamicMenu = class DynamicMenu extends p13n(localize(i18next)(PageView)) {
     render() {
         return html `
       <div slot="headroom" class="header">
@@ -49,7 +42,6 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
             .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
             .personalConfigProvider=${this.getPagePreferenceProvider('master-grist')}
             .fetchHandler=${this.fetchGroupHandler.bind(this)}
-            auto-fetch
           >
             <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
           </ox-grist>
@@ -88,21 +80,6 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
             title: TermsUtil.tTitle('dynamic_menu')
         };
     }
-    get searchForm() {
-        return this.shadowRoot.querySelector('ox-filters-form-base');
-    }
-    /**
-     * 메뉴 그룹 그리드
-     */
-    get groupGrist() {
-        return this.shadowRoot.querySelector('#master-grist');
-    }
-    /**
-     * 메뉴 그룹에 포함 된 메뉴 그리드
-     */
-    get detailGrist() {
-        return this.shadowRoot.querySelector('#detail-grist');
-    }
     /*******************************************/
     /* 조회 */
     /*******************************************/
@@ -163,9 +140,9 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
      */
     async fetchGroupHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
         // 선택된 부모 메뉴 ID 초기화
-        this.menuGroupId = null;
+        this.menuGroupId = '';
         if (this.detailGrist && this.detailGrist.data) {
-            this.detailGrist.data = {};
+            this.detailGrist.data = { records: [] };
         }
         let filters = [...(await this.searchForm.getQueryFilters()), { name: 'parentId', operator: 'is_null', value: '' }];
         let selectFields = `
@@ -235,17 +212,31 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
                 }
                 else {
                     patch.parent = { id: patch.parentId };
-                    delete patch.parentId;
                 }
+                delete patch.parentId;
                 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.detailGrist.fetch();
+            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();
+                }
             }
         }
     }
@@ -635,6 +626,34 @@ class DynamicMenu extends p13n(localize(i18next)(PageView)) {
             ]
         };
     }
-}
-customElements.define('dynamic-menu', DynamicMenu);
+};
+DynamicMenu.styles = [...MetaApi.getBasicMasterDetailGristStyle('top-down')];
+__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