@things-factory/operato-tools 7.0.1-alpha.3 → 7.0.1-alpha.4

package/client/pages/generator/meta-generator-page.js

@@ -1,4 +1,4 @@
-import { html, css } from 'lit-element'
+import { html, css } from 'lit'
 import { merge } from 'lodash'
 import gql from 'graphql-tag'
 
@@ -30,7 +30,15 @@ import { MetaCrypto } from '@things-factory/meta-ui/client/utils/meta-crypto'
  * @author wryang
  * @description 페이지 생성기 화면
  */
-class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridConfigTabMixin(ColumnConfigTabMixin(ButtonConfigTabMixin(SearchConfigTabMixin(FormConfigTabMixin(TabConfigTabMixin(EtcConfigTabMixin(GridEmphasizedConfigTabMixin(localize(i18next)(PageView))))))))))){
+class MetaGeneratorPage extends MenuConfigTabMixin(
+  GraphQlConfigTabMixin(
+    GridConfigTabMixin(
+      ColumnConfigTabMixin(
+        ButtonConfigTabMixin(SearchConfigTabMixin(FormConfigTabMixin(TabConfigTabMixin(EtcConfigTabMixin(GridEmphasizedConfigTabMixin(localize(i18next)(PageView)))))))
+      )
+    )
+  )
+) {
   static get styles() {
     return [
       css`
@@ -53,14 +61,14 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
           padding-bottom: var(--grist-title-with-grid-padding);
           border-bottom: var(--subtitle-border-bottom);
         }
-  
+
         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);
         }
-        
+
         .tabs {
           display: flex;
         }
@@ -80,7 +88,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
           box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
           opacity: 1;
           font-weight: bold;
-        }        
+        }
         .content-container {
           flex: 1;
           display: flex;
@@ -93,8 +101,8 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
           overflow: auto;
         }
         .tab-contents {
-          display:flex;
-          flex:1;
+          display: flex;
+          flex: 1;
           flex-direction: column;
           overflow-x: overlay;
           background-color: var(--main-section-background-color);
@@ -144,27 +152,27 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
         label {
           display: flex;
           flex-direction: column;
-  
+
           font: var(--label-font);
           color: var(--label-color);
-        }               
-        input[type=checkbox]{
-          min-width:25px
         }
-        input[type=radio]{
-          min-width:25px
+        input[type='checkbox'] {
+          min-width: 25px;
+        }
+        input[type='radio'] {
+          min-width: 25px;
         }
         select {
           flex: 1;
         }
-    
+
         select {
           border: 0;
           border-bottom: var(--border-dark-color);
           padding: var(--input-padding);
           font: var(--input-font);
           color: var(--primary-text-color);
-    
+
           max-height: 35px;
         }
         select:focus {
@@ -174,7 +182,8 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
         ox-grist {
           overflow-y: auto;
           flex: 1;
-        }`
+        }
+      `
     ]
   }
 
@@ -186,7 +195,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
       currentTabKey: String,
       tabData: Object,
       dataStorage: Object,
-      
+
       viewMenuData: Object,
 
       afterSetFieldsConfig: Object,
@@ -204,7 +213,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
       viewButtonData: Array,
 
       searchTabGridConfig: Object,
-      viewSearchData: Array,
+      viewSearchData: Array
     }
   }
 
@@ -234,13 +243,13 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
   /**
    * @description 화면 내 그리드 데이터 삭제
    *************************************
-   * @param {Object} grist 
-   * @param {Object} record 
+   * @param {Object} grist
+   * @param {Object} record
    */
   deleteRow(grist, record) {
-    let gristData = grist.dirtyData;
-    gristData.records = gristData.records.filter(x => x.id != record.id);
-    grist.data = gristData;
+    let gristData = grist.dirtyData
+    gristData.records = gristData.records.filter(x => x.id != record.id)
+    grist.data = gristData
   }
 
   /**
@@ -248,7 +257,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    *******************************
    */
   async save() {
-    if(store.getState().operatoTools.studioPermission == false) {
+    if (store.getState().operatoTools.studioPermission == false) {
       document.dispatchEvent(
         new CustomEvent('notify', {
           detail: {
@@ -257,7 +266,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
           }
         })
       )
-      return;
+      return
     }
 
     let response = await client.query({
@@ -269,34 +278,34 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
       variables: { id: this.menuId }
     })
 
-    if(response.errors) {
-      return;
+    if (response.errors) {
+      return
     }
 
-    let tabResults = {};
-    let template = {};
+    let tabResults = {}
+    let template = {}
 
     Object.keys(this.tabData).forEach(key => {
-      let convKey = this.convertFirstCharUpperCase(key);
-      tabResults[key] = this[`get${convKey}ConfigTabValues`]();
+      let convKey = this.convertFirstCharUpperCase(key)
+      tabResults[key] = this[`get${convKey}ConfigTabValues`]()
       template = merge(template, tabResults[key])
     })
 
-    template = JSON.stringify(template);
-    template = MetaCrypto.enc(template);
+    template = JSON.stringify(template)
+    template = MetaCrypto.enc(template)
 
-    let result = await MetaApi.updateMultiple('updateMultipleMenu', [{ id: this.menuId , template: template, cuFlag: 'M' }]);
+    let result = await MetaApi.updateMultiple('updateMultipleMenu', [{ id: this.menuId, template: template, cuFlag: 'M' }])
     if (result) {
-      await this.initData();
+      await this.initData()
     }
   }
-  
+
   /**
    * @description 기존 데이터 clear
    *******************************
    */
-   clear() {
-    this.setTabData();
+  clear() {
+    this.setTabData()
 
     this.dataStorage = {
       menu: {},
@@ -309,12 +318,12 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
       tab: [],
       etc: {},
       gridEmphasized: {}
-    };
+    }
 
     Object.keys(this.tabData).forEach(key => {
-      let convKey = this.convertFirstCharUpperCase(key);
-      if(this[`set${convKey}ConfigTabValues`]) {
-        return this[`set${convKey}ConfigTabValues`](this.dataStorage[key]);
+      let convKey = this.convertFirstCharUpperCase(key)
+      if (this[`set${convKey}ConfigTabValues`]) {
+        return this[`set${convKey}ConfigTabValues`](this.dataStorage[key])
       }
     })
   }
@@ -324,8 +333,8 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    *********************
    */
   async refresh() {
-    this.clear();
-    await this.initData();
+    this.clear()
+    await this.initData()
   }
 
   /**
@@ -333,46 +342,46 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    *********************************
    */
   backToMenu() {
-    history.back();
+    history.back()
   }
 
   /**
    * @description 메뉴 데이터 가져오기
    ********************************
-   * @returns 
+   * @returns
    */
   async initData() {
-    // 1. 파라미터에서 menuId 추출 
-    let { menuId = '' } = this.lifecycle?.params ? this.lifecycle.params : {};
-    this.menuId = menuId;
-
-    // 2. 메뉴 ID가 지정되지 않은 페이지 호출은 무시 
-    if(!menuId || menuId == '') {
-      this.clear();
-      return;
+    // 1. 파라미터에서 menuId 추출
+    let { menuId = '' } = this.lifecycle?.params ? this.lifecycle.params : {}
+    this.menuId = menuId
+
+    // 2. 메뉴 ID가 지정되지 않은 페이지 호출은 무시
+    if (!menuId || menuId == '') {
+      this.clear()
+      return
     }
 
-    // 3. 메뉴 데이터 가져오기 
+    // 3. 메뉴 데이터 가져오기
     let selectFields = `
       id
       name
       template
     `
-    let response = await MetaApi.findOne('menu', menuId, selectFields);
+    let response = await MetaApi.findOne('menu', menuId, selectFields)
 
-    if(!response) {
-      return;
+    if (!response) {
+      return
     }
 
     try {
-      JSON.parse(MetaCrypto.dec(response.template));
-    } catch(e) {
-      return;
+      JSON.parse(MetaCrypto.dec(response.template))
+    } catch (e) {
+      return
     }
 
-    // 4. 조회 값 셋팅 
-    this.menuName = TermsUtil.tMenu(response.name);
-    this.metaTemplate = response.template ? JSON.parse(MetaCrypto.dec(response.template)) : {};
+    // 4. 조회 값 셋팅
+    this.menuName = TermsUtil.tMenu(response.name)
+    this.metaTemplate = response.template ? JSON.parse(MetaCrypto.dec(response.template)) : {}
     let {
       menu = {},
       gql = {},
@@ -384,67 +393,71 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
       tab = [],
       etc = {},
       gridEmphasized = []
-    } = this.metaTemplate ? this.metaTemplate : {};
-    this.setTabData();
+    } = this.metaTemplate ? this.metaTemplate : {}
+    this.setTabData()
 
     // 5. dataStorage 생성
     this.dataStorage = {}
-    this.dataStorage.menu = menu;
-    this.dataStorage.graphql = gql;
-    this.dataStorage.grid = grid;
-    this.dataStorage.form = form;
-    this.dataStorage.tab = tab;
-    this.dataStorage.etc = etc;
-    this.dataStorage.gridEmphasized = gridEmphasized;
+    this.dataStorage.menu = menu
+    this.dataStorage.graphql = gql
+    this.dataStorage.grid = grid
+    this.dataStorage.form = form
+    this.dataStorage.tab = tab
+    this.dataStorage.etc = etc
+    this.dataStorage.gridEmphasized = gridEmphasized
 
     // 6. 정렬 필드에 rank 추가
-    (grid.option?.sorters || []).forEach((value, index) => {
-      value.rank = ((index + 1) * 10);
+    ;(grid.option?.sorters || []).forEach((value, index) => {
+      value.rank = (index + 1) * 10
     })
 
     // 7. 정렬 필드, 리스트, 카드 대표, 상세 필드, 썸네일 필드, 누적 계산 등 설정
     this.dataStorage.column = grid_column.map(x => {
-      // 정렬 필드 추가 
-      let sortField = (grid.option?.sorters || []).filter(y => y.name == x.name);
-      if(sortField && sortField.length > 0) {
-        x.sort_rank = sortField[0].rank;
-        x.sort_desc = sortField[0].desc ? sortField[0].desc : false;
+      // 정렬 필드 추가
+      let sortField = (grid.option?.sorters || []).filter(y => y.name == x.name)
+      if (sortField && sortField.length > 0) {
+        x.sort_rank = sortField[0].rank
+        x.sort_desc = sortField[0].desc ? sortField[0].desc : false
       } else {
-        x.sort_rank = 0;
+        x.sort_rank = 0
       }
 
-      // 리스트 / 카드 대표 필드 설정 
-      x.rep_field = (grid.list?.fields || []).includes(x.name);
+      // 리스트 / 카드 대표 필드 설정
+      x.rep_field = (grid.list?.fields || []).includes(x.name)
 
-      // 리스트 / 카드 상세 필드 설정 
-      x.detail_field = (grid.list?.details || []).includes(x.name);
+      // 리스트 / 카드 상세 필드 설정
+      x.detail_field = (grid.list?.details || []).includes(x.name)
 
-      // 썸네일 필드 
-      x.thumbnail_field = (grid.list?.thumbnail == x.name);
-      return x;
-    }); 
+      // 썸네일 필드
+      x.thumbnail_field = grid.list?.thumbnail == x.name
+      return x
+    })
 
     // 8. 검색 설정과 Gql 쿼리의 기본 검색값을 병합
-    search.push(...(gql.query?.filters || []).map(x => {
-      // GraphQL에 있는 숨겨진 검색 조건 추가
-      x.hidden = true;
-      return x;
-    }));
-    this.dataStorage.search = search;
+    search.push(
+      ...(gql.query?.filters || []).map(x => {
+        // GraphQL에 있는 숨겨진 검색 조건 추가
+        x.hidden = true
+        return x
+      })
+    )
+    this.dataStorage.search = search
 
     // 9. 일반 버튼과 그리드 버튼을 병합
-    button.push(...(grid.button || []).map(x => {
-      x.type = `grid-${x.type}`;
-      x.style = x.icon;
-      return x;
-    }));
+    button.push(
+      ...(grid.button || []).map(x => {
+        x.type = `grid-${x.type}`
+        x.style = x.icon
+        return x
+      })
+    )
 
-    this.dataStorage.button = button;
+    this.dataStorage.button = button
 
     Object.keys(this.tabData).forEach(key => {
-      let convKey = this.convertFirstCharUpperCase(key);
-      if(this[`set${convKey}ConfigTabValues`]) {
-        return this[`set${convKey}ConfigTabValues`](this.dataStorage[key]);
+      let convKey = this.convertFirstCharUpperCase(key)
+      if (this[`set${convKey}ConfigTabValues`]) {
+        return this[`set${convKey}ConfigTabValues`](this.dataStorage[key])
       }
     })
   }
@@ -455,39 +468,39 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    */
   async pageInitialized() {
     // 탭에 데이터 설정
-    this.setTabData();
-    
-    // 각 탭 별 config set 설정 호출 
-    let keys = Object.keys(this.tabData);
-    for(let idx = 0 ; idx < keys.length ; idx++) {
-      let key = this.convertFirstCharUpperCase(keys[idx]);
-      if(this[`set${key}ConfigTabConfig`]) {
-        await this[`set${key}ConfigTabConfig`]();
+    this.setTabData()
+
+    // 각 탭 별 config set 설정 호출
+    let keys = Object.keys(this.tabData)
+    for (let idx = 0; idx < keys.length; idx++) {
+      let key = this.convertFirstCharUpperCase(keys[idx])
+      if (this[`set${key}ConfigTabConfig`]) {
+        await this[`set${key}ConfigTabConfig`]()
       }
     }
   }
-  
+
   /**
    * @override lifecycle
    ***********************
-   * @param {*} changes 
-   * @param {*} lifecycle 
-   * @param {*} before 
+   * @param {*} changes
+   * @param {*} lifecycle
+   * @param {*} before
    */
   async pageUpdated(changes, lifecycle, before) {
-    // 1. 페이지 활성화 시 
+    // 1. 페이지 활성화 시
     if (this.active === true) {
       // 1.1 탭에 데이터 설정
-      this.setTabData();
-      // 1.2 메뉴 템플릿 정보 조회 
-      await this.initData();
-      // 1.3 메뉴 구성 탭 정보 설정 
-      this.setTabData();
+      this.setTabData()
+      // 1.2 메뉴 템플릿 정보 조회
+      await this.initData()
+      // 1.3 메뉴 구성 탭 정보 설정
+      this.setTabData()
 
-    // 2. 페이지 비활성화 시 
+      // 2. 페이지 비활성화 시
     } else {
-        this.clear();
-        this.remove();
+      this.clear()
+      this.remove()
     }
   }
 
@@ -518,11 +531,11 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    * @returns {HTML}
    */
   render() {
-    if (!this.currentTabKey) this.currentTabKey = 'menu';
-    this.setTabData();
+    if (!this.currentTabKey) this.currentTabKey = 'menu'
+    this.setTabData()
 
-    let tabKeys = Object.keys(this.tabData);
-    const currentTabKey = this.tabData[this.currentTabKey] ? this.currentTabKey : tabKeys[0];
+    let tabKeys = Object.keys(this.tabData)
+    const currentTabKey = this.tabData[this.currentTabKey] ? this.currentTabKey : tabKeys[0]
 
     let renderHtml = html`
       <h1>${this.menuName}</h1>
@@ -538,20 +551,16 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
       </div>
       <div class="content-container">
         ${tabKeys.map(key => {
-          let displayStyle = 'display:none';
-          if(key == this.currentTabKey) {
+          let displayStyle = 'display:none'
+          if (key == this.currentTabKey) {
             displayStyle = 'display:flex'
           }
 
-          return html`
-            <div class='tab-contents' style="${ displayStyle }">
-              ${this.getConfigTab(key)}
-            </div>
-          `
+          return html` <div class="tab-contents" style="${displayStyle}">${this.getConfigTab(key)}</div> `
         })}
       </div>
     `
-    return renderHtml;
+    return renderHtml
   }
 
   /**
@@ -559,10 +568,10 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    ********************************
    */
   getConfigTab(key) {
-    let convKey = this.convertFirstCharUpperCase(key);
+    let convKey = this.convertFirstCharUpperCase(key)
 
-    if(this[`render${convKey}ConfigTab`]) {
-      return this[`render${convKey}ConfigTab`]();
+    if (this[`render${convKey}ConfigTab`]) {
+      return this[`render${convKey}ConfigTab`]()
     }
 
     return html``
@@ -574,8 +583,8 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    * @param {String} word
    */
   convertFirstCharUpperCase(word) {
-    let convWord = word.charAt(0).toUpperCase() + word.slice(1);
-    return convWord;
+    let convWord = word.charAt(0).toUpperCase() + word.slice(1)
+    return convWord
   }
 
   /**
@@ -585,7 +594,7 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    * @returns {HTML}
    */
   getElementById(id) {
-    return this.shadowRoot.querySelector(`#${id}`);
+    return this.shadowRoot.querySelector(`#${id}`)
   }
 
   /**
@@ -595,39 +604,35 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    * @returns {HTML}
    */
   getElementValueById(id) {
-    let element = this.shadowRoot.querySelector(`#${id}`);
-    if(!element) return undefined;
-    
-    let elementValue = '';
-    if(element.tagName.toLowerCase() == 'select') {
-      if(!element.options || element.options.length == 0) return undefined;
-      elementValue = element.options[element.selectedIndex].value;
+    let element = this.shadowRoot.querySelector(`#${id}`)
+    if (!element) return undefined
 
+    let elementValue = ''
+    if (element.tagName.toLowerCase() == 'select') {
+      if (!element.options || element.options.length == 0) return undefined
+      elementValue = element.options[element.selectedIndex].value
     } else if (element.tagName.toLowerCase() == 'ox-grist') {
-      if(!element.dirtyData) return undefined;
-      if(!element.dirtyData.records) return undefined;
-      if(element.dirtyData.records.length == 0) return undefined;
-      return element.dirtyData.records;
-
+      if (!element.dirtyData) return undefined
+      if (!element.dirtyData.records) return undefined
+      if (element.dirtyData.records.length == 0) return undefined
+      return element.dirtyData.records
     } else if (element.tagName.toLowerCase() == 'ox-input-code') {
-      return element.value;
-
+      return element.value
     } else {
-      if(element.type.toLowerCase() == 'radio') {
-        let radioEle = this.shadowRoot.querySelector(`#${id}:checked`);
-        if(!radioEle) return undefined;
-        return radioEle.value;
-
+      if (element.type.toLowerCase() == 'radio') {
+        let radioEle = this.shadowRoot.querySelector(`#${id}:checked`)
+        if (!radioEle) return undefined
+        return radioEle.value
       } else {
-        elementValue = element.value;
+        elementValue = element.value
       }
     }
 
-    if(!elementValue || elementValue == '') {
-      return undefined;
+    if (!elementValue || elementValue == '') {
+      return undefined
     }
 
-    return elementValue;
+    return elementValue
   }
 
   /**
@@ -637,13 +642,13 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    * @returns {Array}
    */
   sortRecordByRank(list) {
-    if(!list) {
-      return list;
+    if (!list) {
+      return list
     } else {
-      return this.sortRecordByField(list, 'rank');
+      return this.sortRecordByField(list, 'rank')
     }
   }
-  
+
   /**
    * @description 랭킹으로 소팅 처리 후 리턴
    ************************************
@@ -653,10 +658,10 @@ class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridCon
    */
   sortRecordByField(list, field) {
     list.sort((a, b) => {
-      return a[field] - b[field];
-    });
-    return list;
+      return a[field] - b[field]
+    })
+    return list
   }
 }
 
-customElements.define('meta-generator-page', MetaGeneratorPage)
+customElements.define('meta-generator-page', MetaGeneratorPage)