@things-factory/operato-tools 7.0.0-y.0 → 7.0.1-alpha.0

package/client/pages/generator/menu-config-tab-mixin.js

@@ -1,30 +1,116 @@
-import{html}from"lit-element";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";export const MenuConfigTabMixin=e=>class extends e{setMenuConfigTabValues(e){if(e){var{title:t="",name:l="",desc:i="",help:a=""}=e||{};this.viewMenuData={title:t,name:l,desc:i,help_doc:a},this.getElementById("title").value=t,this.getElementById("name").value=l,this.getElementById("desc").value=i,this.getElementById("help_doc").value=a}else this.setMenuConfigTabDefaultValue()}getMenuConfigTabValues(){let e={menu:{}},t=this.getElementValueById("title"),l=this.getElementValueById("name"),i=this.getElementValueById("desc"),a=this.getElementValueById("help_doc");return t&&(e.menu.title=t),l&&(e.menu.name=l),i&&(e.menu.desc=i),a&&(e.menu.help=a),e}setMenuConfigTabDefaultValue(){this.viewMenuData||(this.viewMenuData={title:"",name:"name",desc:"description",help_doc:""})}menuTitleChange(e){let t=this.getElementById("display");t&&(t.value=TermsUtil.tTitle(e.target.value))}renderMenuConfigTab(){return this.setMenuConfigTabDefaultValue(),html`
+import { html } from 'lit-element'
+
+import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
+
+
+export const MenuConfigTabMixin = (baseElement) => class extends baseElement {
+
+  setMenuConfigTabValues(data) {
+    if (data) {
+      var {
+        title = '',
+        name = '',
+        desc = '',
+        help = ''
+      } = data || {};
+
+      this.viewMenuData = {
+        title: title,
+        name: name,
+        desc: desc,
+        help_doc: help
+      };
+
+      this.getElementById('title').value = title;
+      this.getElementById('name').value = name;
+      this.getElementById('desc').value = desc;
+      this.getElementById('help_doc').value = help;
+
+    } else {
+      this.setMenuConfigTabDefaultValue();
+    }
+  }
+
+  getMenuConfigTabValues() {
+    let retObject = {
+      menu: {}
+    };
+
+    let title = this.getElementValueById('title');
+    let name = this.getElementValueById('name');
+    let desc = this.getElementValueById('desc');
+    let help_doc = this.getElementValueById('help_doc');
+
+    if (title) retObject.menu.title = title;
+    if (name) retObject.menu.name = name;
+    if (desc) retObject.menu.desc = desc;
+    if (help_doc) retObject.menu.help = help_doc;
+
+    return retObject;
+  }
+
+  /**
+   * 기본값 셋팅 
+   */
+  setMenuConfigTabDefaultValue() {
+    if (!this.viewMenuData) {
+      this.viewMenuData = {
+        title: '',
+        name: 'name',
+        desc: 'description',
+        help_doc: ''
+      }
+    }
+  }
+
+  /**
+   * 메뉴 타이틀 변경 시 다국어 변환 결과 보기 
+   * @param {Object} eventObj 
+   */
+  menuTitleChange(eventObj) {
+    let transResult = this.getElementById('display');
+    if (transResult) {
+      transResult.value = TermsUtil.tTitle(eventObj.target.value);
+    }
+  }
+
+
+
+  // 화면 
+  renderMenuConfigTab() {
+    this.setMenuConfigTabDefaultValue();
+
+    let renderHtml = html`
       <div field-2column>
         <div field>
-          <label>${TermsUtil.tLabel("menu_title")}
-            <input id="title" name="title" type="text" value=${this.viewMenuData.title} @change=${e=>this.menuTitleChange(e)}/>
+          <label>${TermsUtil.tLabel('menu_title')}
+            <input id="title" name="title" type="text" value=${this.viewMenuData.title} @change=${e =>
+            this.menuTitleChange(e)}/>
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("display")}
+          <label>${TermsUtil.tLabel('display')}
             <input id="display" name="display" value=${TermsUtil.tTitle(this.viewMenuData.title)} type="text" readonly
               disabled />
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("menu_name_field")}
+          <label>${TermsUtil.tLabel('menu_name_field')}
             <input id="name" name="name" type="text" value=${this.viewMenuData.name} />
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("menu_desc_field")}
+          <label>${TermsUtil.tLabel('menu_desc_field')}
             <input id="desc" name="desc" type="text" value=${this.viewMenuData.desc} />
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("help_doc")}
+          <label>${TermsUtil.tLabel('help_doc')}
             <input id="help_doc" name="help_doc" type="text" value=${this.viewMenuData.help_doc} />
           </label>
         </div>
       </div>
-    `}};
+    `
+    return renderHtml;
+  }
+}

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

@@ -1,4 +1,39 @@
-import{html,css}from"lit-element";import{merge}from"lodash";import gql from"graphql-tag";import{i18next,localize}from"@things-factory/i18n-base";import{PageView}from"@things-factory/shell";import{client}from"@operato/graphql";import{store}from"@operato/shell";import{CommonButtonStyles}from"@operato/styles";import{ButtonConfigTabMixin}from"./button-config-tab-mixin";import{MenuConfigTabMixin}from"./menu-config-tab-mixin";import{SearchConfigTabMixin}from"./search-config-tab-mixin";import{GridConfigTabMixin}from"./grid-config-tab-mixin";import{ColumnConfigTabMixin}from"./column-config-tab-mixin";import{GraphQlConfigTabMixin}from"./graphql-config-tab-mixin";import{FormConfigTabMixin}from"./form-config-tab-mixin";import{TabConfigTabMixin}from"./tab-config-tab-mixin";import{EtcConfigTabMixin}from"./etc-config-tab-mixin";import{GridEmphasizedConfigTabMixin}from"./grid-emphasized-config-tab-mixin";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";import{MetaApi}from"@things-factory/meta-ui/client/utils/meta-api";import{MetaCrypto}from"@things-factory/meta-ui/client/utils/meta-crypto";class MetaGeneratorPage extends(MenuConfigTabMixin(GraphQlConfigTabMixin(GridConfigTabMixin(ColumnConfigTabMixin(ButtonConfigTabMixin(SearchConfigTabMixin(FormConfigTabMixin(TabConfigTabMixin(EtcConfigTabMixin(GridEmphasizedConfigTabMixin(localize(i18next)(PageView)))))))))))){static get styles(){return[css`
+import { html, css } from 'lit-element'
+import { merge } from 'lodash'
+import gql from 'graphql-tag'
+
+import { i18next, localize } from '@things-factory/i18n-base'
+import { PageView } from '@things-factory/shell'
+
+import { client } from '@operato/graphql'
+import { store } from '@operato/shell'
+import { CommonButtonStyles } from '@operato/styles'
+
+import { ButtonConfigTabMixin } from './button-config-tab-mixin'
+import { MenuConfigTabMixin } from './menu-config-tab-mixin'
+import { SearchConfigTabMixin } from './search-config-tab-mixin'
+import { GridConfigTabMixin } from './grid-config-tab-mixin'
+import { ColumnConfigTabMixin } from './column-config-tab-mixin'
+import { GraphQlConfigTabMixin } from './graphql-config-tab-mixin'
+import { FormConfigTabMixin } from './form-config-tab-mixin'
+import { TabConfigTabMixin } from './tab-config-tab-mixin'
+import { EtcConfigTabMixin } from './etc-config-tab-mixin'
+import { GridEmphasizedConfigTabMixin } from './grid-emphasized-config-tab-mixin'
+
+import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
+import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
+import { MetaCrypto } from '@things-factory/meta-ui/client/utils/meta-crypto'
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author wryang
+ * @description 페이지 생성기 화면
+ */
+class MetaGeneratorPage extends MenuConfigTabMixin(GraphQlConfigTabMixin(GridConfigTabMixin(ColumnConfigTabMixin(ButtonConfigTabMixin(SearchConfigTabMixin(FormConfigTabMixin(TabConfigTabMixin(EtcConfigTabMixin(GridEmphasizedConfigTabMixin(localize(i18next)(PageView))))))))))){
+  static get styles() {
+    return [
+      css`
         :host {
           display: flex;
           flex-direction: column;
@@ -139,24 +174,489 @@ import{html,css}from"lit-element";import{merge}from"lodash";import gql from"grap
         ox-grist {
           overflow-y: auto;
           flex: 1;
-        }`]}static get properties(){return{menuId:String,menuName:String,metaTemplate:Object,currentTabKey:String,tabData:Object,dataStorage:Object,viewMenuData:Object,afterSetFieldsConfig:Object,skipFieldsConfig:Object,viewGraphqlData:Object,gridPageOptions:Array,gridViewModes:Array,viewGridData:Object,columnTabGridConfig:Object,viewColumnData:Array,buttonTabGridConfig:Object,viewButtonData:Array,searchTabGridConfig:Object,viewSearchData:Array}}get context(){return{title:TermsUtil.tTitle("meta_generator"),actions:[{title:TermsUtil.tButton("save"),action:this.save.bind(this),...CommonButtonStyles.save},{title:TermsUtil.tButton("back"),action:this.backToMenu.bind(this),...CommonButtonStyles.back},{title:TermsUtil.tButton("refresh"),action:this.refresh.bind(this),...CommonButtonStyles.refresh}]}}deleteRow(t,e){let a=t.dirtyData;a.records=a.records.filter((t=>t.id!=e.id)),t.data=a}async save(){if(0==store.getState().operatoTools.studioPermission)return void document.dispatchEvent(new CustomEvent("notify",{detail:{level:"error",message:i18next.t("error.invalid license key")}}));if((await client.query({query:gql`
+        }`
+    ]
+  }
+
+  static get properties() {
+    return {
+      menuId: String,
+      menuName: String,
+      metaTemplate: Object,
+      currentTabKey: String,
+      tabData: Object,
+      dataStorage: Object,
+      
+      viewMenuData: Object,
+
+      afterSetFieldsConfig: Object,
+      skipFieldsConfig: Object,
+      viewGraphqlData: Object,
+
+      gridPageOptions: Array,
+      gridViewModes: Array,
+      viewGridData: Object,
+
+      columnTabGridConfig: Object,
+      viewColumnData: Array,
+
+      buttonTabGridConfig: Object,
+      viewButtonData: Array,
+
+      searchTabGridConfig: Object,
+      viewSearchData: Array,
+    }
+  }
+
+  get context() {
+    return {
+      title: TermsUtil.tTitle('meta_generator'),
+      actions: [
+        {
+          title: TermsUtil.tButton('save'),
+          action: this.save.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: TermsUtil.tButton('back'),
+          action: this.backToMenu.bind(this),
+          ...CommonButtonStyles.back
+        },
+        {
+          title: TermsUtil.tButton('refresh'),
+          action: this.refresh.bind(this),
+          ...CommonButtonStyles.refresh
+        }
+      ]
+    }
+  }
+
+  /**
+   * @description 화면 내 그리드 데이터 삭제
+   *************************************
+   * @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;
+  }
+
+  /**
+   * @description 메타 생성 정보 저장
+   *******************************
+   */
+  async save() {
+    if(store.getState().operatoTools.studioPermission == false) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: i18next.t('error.invalid license key')
+          }
+        })
+      )
+      return;
+    }
+
+    let response = await client.query({
+      query: gql`
         query ($id: String!) {
           studioTemplateIsOverLimit(id: $id)
         }
-      `,variables:{id:this.menuId}})).errors)return;let t={},e={};Object.keys(this.tabData).forEach((a=>{let r=this.convertFirstCharUpperCase(a);t[a]=this[`get${r}ConfigTabValues`](),e=merge(e,t[a])})),e=JSON.stringify(e),e=MetaCrypto.enc(e),await MetaApi.updateMultiple("updateMultipleMenu",[{id:this.menuId,template:e,cuFlag:"M"}])&&await this.initData()}clear(){this.setTabData(),this.dataStorage={menu:{},graphql:{},button:[],column:[],grid:{},search:[],form:[],tab:[],etc:{},gridEmphasized:{}},Object.keys(this.tabData).forEach((t=>{let e=this.convertFirstCharUpperCase(t);if(this[`set${e}ConfigTabValues`])return this[`set${e}ConfigTabValues`](this.dataStorage[t])}))}async refresh(){this.clear(),await this.initData()}backToMenu(){history.back()}async initData(){let{menuId:t=""}=this.lifecycle?.params?this.lifecycle.params:{};if(this.menuId=t,!t||""==t)return void this.clear();let e=await MetaApi.findOne("menu",t,"\n      id\n      name\n      template\n    ");if(!e)return;try{JSON.parse(MetaCrypto.dec(e.template))}catch(t){return}this.menuName=TermsUtil.tMenu(e.name),this.metaTemplate=e.template?JSON.parse(MetaCrypto.dec(e.template)):{};let{menu:a={},gql:r={},button:i=[],grid_column:o=[],grid:n={},search:s=[],form:l=[],tab:d=[],etc:c={},gridEmphasized:m=[]}=this.metaTemplate?this.metaTemplate:{};this.setTabData(),this.dataStorage={},this.dataStorage.menu=a,this.dataStorage.graphql=r,this.dataStorage.grid=n,this.dataStorage.form=l,this.dataStorage.tab=d,this.dataStorage.etc=c,this.dataStorage.gridEmphasized=m,(n.option?.sorters||[]).forEach(((t,e)=>{t.rank=10*(e+1)})),this.dataStorage.column=o.map((t=>{let e=(n.option?.sorters||[]).filter((e=>e.name==t.name));return e&&e.length>0?(t.sort_rank=e[0].rank,t.sort_desc=!!e[0].desc&&e[0].desc):t.sort_rank=0,t.rep_field=(n.list?.fields||[]).includes(t.name),t.detail_field=(n.list?.details||[]).includes(t.name),t.thumbnail_field=n.list?.thumbnail==t.name,t})),s.push(...(r.query?.filters||[]).map((t=>(t.hidden=!0,t)))),this.dataStorage.search=s,i.push(...(n.button||[]).map((t=>(t.type=`grid-${t.type}`,t.style=t.icon,t)))),this.dataStorage.button=i,Object.keys(this.tabData).forEach((t=>{let e=this.convertFirstCharUpperCase(t);if(this[`set${e}ConfigTabValues`])return this[`set${e}ConfigTabValues`](this.dataStorage[t])}))}async pageInitialized(){this.setTabData();let t=Object.keys(this.tabData);for(let e=0;e<t.length;e++){let a=this.convertFirstCharUpperCase(t[e]);this[`set${a}ConfigTabConfig`]&&await this[`set${a}ConfigTabConfig`]()}}async pageUpdated(t,e,a){!0===this.active?(this.setTabData(),await this.initData(),this.setTabData()):(this.clear(),this.remove())}setTabData(){this.tabData||(this.tabData={menu:TermsUtil.tLabel("menu_config"),graphql:TermsUtil.tLabel("graphql_config"),grid:TermsUtil.tLabel("grid_config"),column:TermsUtil.tLabel("column_config"),gridEmphasized:TermsUtil.tLabel("grid_emphasized_config"),button:TermsUtil.tLabel("button_config"),search:TermsUtil.tLabel("search_config"),form:TermsUtil.tLabel("form_config"),tab:TermsUtil.tLabel("tab_config"),etc:TermsUtil.tLabel("etc_config")})}render(){this.currentTabKey||(this.currentTabKey="menu"),this.setTabData();let t=Object.keys(this.tabData);this.tabData[this.currentTabKey]?this.currentTabKey:t[0];return html`
+      `,
+      variables: { id: this.menuId }
+    })
+
+    if(response.errors) {
+      return;
+    }
+
+    let tabResults = {};
+    let template = {};
+
+    Object.keys(this.tabData).forEach(key => {
+      let convKey = this.convertFirstCharUpperCase(key);
+      tabResults[key] = this[`get${convKey}ConfigTabValues`]();
+      template = merge(template, tabResults[key])
+    })
+
+    template = JSON.stringify(template);
+    template = MetaCrypto.enc(template);
+
+    let result = await MetaApi.updateMultiple('updateMultipleMenu', [{ id: this.menuId , template: template, cuFlag: 'M' }]);
+    if (result) {
+      await this.initData();
+    }
+  }
+  
+  /**
+   * @description 기존 데이터 clear
+   *******************************
+   */
+   clear() {
+    this.setTabData();
+
+    this.dataStorage = {
+      menu: {},
+      graphql: {},
+      button: [],
+      column: [],
+      grid: {},
+      search: [],
+      form: [],
+      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]);
+      }
+    })
+  }
+
+  /**
+   * @description 초기화
+   *********************
+   */
+  async refresh() {
+    this.clear();
+    await this.initData();
+  }
+
+  /**
+   * @description 메뉴 화면으로 돌아가기
+   *********************************
+   */
+  backToMenu() {
+    history.back();
+  }
+
+  /**
+   * @description 메뉴 데이터 가져오기
+   ********************************
+   * @returns 
+   */
+  async initData() {
+    // 1. 파라미터에서 menuId 추출 
+    let { menuId = '' } = this.lifecycle?.params ? this.lifecycle.params : {};
+    this.menuId = menuId;
+
+    // 2. 메뉴 ID가 지정되지 않은 페이지 호출은 무시 
+    if(!menuId || menuId == '') {
+      this.clear();
+      return;
+    }
+
+    // 3. 메뉴 데이터 가져오기 
+    let selectFields = `
+      id
+      name
+      template
+    `
+    let response = await MetaApi.findOne('menu', menuId, selectFields);
+
+    if(!response) {
+      return;
+    }
+
+    try {
+      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)) : {};
+    let {
+      menu = {},
+      gql = {},
+      button = [],
+      grid_column = [],
+      grid = {},
+      search = [],
+      form = [],
+      tab = [],
+      etc = {},
+      gridEmphasized = []
+    } = 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;
+
+    // 6. 정렬 필드에 rank 추가
+    (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;
+      } else {
+        x.sort_rank = 0;
+      }
+
+      // 리스트 / 카드 대표 필드 설정 
+      x.rep_field = (grid.list?.fields || []).includes(x.name);
+
+      // 리스트 / 카드 상세 필드 설정 
+      x.detail_field = (grid.list?.details || []).includes(x.name);
+
+      // 썸네일 필드 
+      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;
+
+    // 9. 일반 버튼과 그리드 버튼을 병합
+    button.push(...(grid.button || []).map(x => {
+      x.type = `grid-${x.type}`;
+      x.style = x.icon;
+      return x;
+    }));
+
+    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]);
+      }
+    })
+  }
+
+  /**
+   * @override lifecycle
+   ***********************
+   */
+  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`]();
+      }
+    }
+  }
+  
+  /**
+   * @override lifecycle
+   ***********************
+   * @param {*} changes 
+   * @param {*} lifecycle 
+   * @param {*} before 
+   */
+  async pageUpdated(changes, lifecycle, before) {
+    // 1. 페이지 활성화 시 
+    if (this.active === true) {
+      // 1.1 탭에 데이터 설정
+      this.setTabData();
+      // 1.2 메뉴 템플릿 정보 조회 
+      await this.initData();
+      // 1.3 메뉴 구성 탭 정보 설정 
+      this.setTabData();
+
+    // 2. 페이지 비활성화 시 
+    } else {
+        this.clear();
+        this.remove();
+    }
+  }
+
+  /**
+   * @description 탭 데이터 생성
+   ***************************
+   */
+  setTabData() {
+    if (!this.tabData) {
+      this.tabData = {
+        menu: TermsUtil.tLabel('menu_config'),
+        graphql: TermsUtil.tLabel('graphql_config'),
+        grid: TermsUtil.tLabel('grid_config'),
+        column: TermsUtil.tLabel('column_config'),
+        gridEmphasized: TermsUtil.tLabel('grid_emphasized_config'),
+        button: TermsUtil.tLabel('button_config'),
+        search: TermsUtil.tLabel('search_config'),
+        form: TermsUtil.tLabel('form_config'),
+        tab: TermsUtil.tLabel('tab_config'),
+        etc: TermsUtil.tLabel('etc_config')
+      }
+    }
+  }
+
+  /**
+   * @override render
+   ********************
+   * @returns {HTML}
+   */
+  render() {
+    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 renderHtml = html`
       <h1>${this.menuName}</h1>
       <div class="tabs">
-        ${t.map((t=>{let e=this.tabData[t];return html`
-            <div class="tab" ?activate="${t===this.currentTabKey}" @click="${()=>this.currentTabKey=t}">
-              <span>${e}</span>
+        ${tabKeys.map(key => {
+          let label = this.tabData[key]
+          return html`
+            <div class="tab" ?activate="${key === this.currentTabKey}" @click="${() => (this.currentTabKey = key)}">
+              <span>${label}</span>
             </div>
-          `}))}
+          `
+        })}
       </div>
       <div class="content-container">
-        ${t.map((t=>{let e="display:none";return t==this.currentTabKey&&(e="display:flex"),html`
-            <div class='tab-contents' style="${e}">
-              ${this.getConfigTab(t)}
+        ${tabKeys.map(key => {
+          let displayStyle = 'display:none';
+          if(key == this.currentTabKey) {
+            displayStyle = 'display:flex'
+          }
+
+          return html`
+            <div class='tab-contents' style="${ displayStyle }">
+              ${this.getConfigTab(key)}
             </div>
-          `}))}
+          `
+        })}
       </div>
-    `}getConfigTab(t){let e=this.convertFirstCharUpperCase(t);return this[`render${e}ConfigTab`]?this[`render${e}ConfigTab`]():html``}convertFirstCharUpperCase(t){return t.charAt(0).toUpperCase()+t.slice(1)}getElementById(t){return this.shadowRoot.querySelector(`#${t}`)}getElementValueById(t){let e=this.shadowRoot.querySelector(`#${t}`);if(!e)return;let a="";if("select"==e.tagName.toLowerCase()){if(!e.options||0==e.options.length)return;a=e.options[e.selectedIndex].value}else{if("ox-grist"==e.tagName.toLowerCase()){if(!e.dirtyData)return;if(!e.dirtyData.records)return;if(0==e.dirtyData.records.length)return;return e.dirtyData.records}if("ox-input-code"==e.tagName.toLowerCase())return e.value;if("radio"==e.type.toLowerCase()){let e=this.shadowRoot.querySelector(`#${t}:checked`);if(!e)return;return e.value}a=e.value}return a&&""!=a?a:void 0}sortRecordByRank(t){return t?this.sortRecordByField(t,"rank"):t}sortRecordByField(t,e){return t.sort(((t,a)=>t[e]-a[e])),t}}customElements.define("meta-generator-page",MetaGeneratorPage);
+    `
+    return renderHtml;
+  }
+
+  /**
+   * @description 탭 키로 탭 정보 리턴
+   ********************************
+   */
+  getConfigTab(key) {
+    let convKey = this.convertFirstCharUpperCase(key);
+
+    if(this[`render${convKey}ConfigTab`]) {
+      return this[`render${convKey}ConfigTab`]();
+    }
+
+    return html``
+  }
+
+  /**
+   * @description 탭 키로 탭 정보 리턴
+   ********************************
+   * @param {String} word
+   */
+  convertFirstCharUpperCase(word) {
+    let convWord = word.charAt(0).toUpperCase() + word.slice(1);
+    return convWord;
+  }
+
+  /**
+   * @description id로 엘리먼트 추출 리턴
+   ***********************************
+   * @param {String} id
+   * @returns {HTML}
+   */
+  getElementById(id) {
+    return this.shadowRoot.querySelector(`#${id}`);
+  }
+
+  /**
+   * @description id로 엘리먼트 값 추출 리턴
+   *************************************
+   * @param {String} id
+   * @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;
+
+    } 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;
+
+    } else if (element.tagName.toLowerCase() == 'ox-input-code') {
+      return element.value;
+
+    } else {
+      if(element.type.toLowerCase() == 'radio') {
+        let radioEle = this.shadowRoot.querySelector(`#${id}:checked`);
+        if(!radioEle) return undefined;
+        return radioEle.value;
+
+      } else {
+        elementValue = element.value;
+      }
+    }
+
+    if(!elementValue || elementValue == '') {
+      return undefined;
+    }
+
+    return elementValue;
+  }
+
+  /**
+   * @description 랭킹으로 소팅 처리
+   ******************************
+   * @param {Array} list
+   * @returns {Array}
+   */
+  sortRecordByRank(list) {
+    if(!list) {
+      return list;
+    } else {
+      return this.sortRecordByField(list, 'rank');
+    }
+  }
+  
+  /**
+   * @description 랭킹으로 소팅 처리 후 리턴
+   ************************************
+   * @param {Array} list
+   * @param {String} field
+   * @returns {Array}
+   */
+  sortRecordByField(list, field) {
+    list.sort((a, b) => {
+      return a[field] - b[field];
+    });
+    return list;
+  }
+}
+
+customElements.define('meta-generator-page', MetaGeneratorPage)