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

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

@@ -1,4 +1,118 @@
-import{html}from"lit-element";import{MetaApi}from"@things-factory/meta-ui/client/utils/meta-api";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";export const EtcConfigTabMixin=t=>class extends t{setEtcConfigTabValues(t){let e=1,i=Object.keys(t||{}).map((i=>{let a={};return a.id=100*e,a.key=i,a.value=t[i],e+=1,a}));this.viewEtcData=i||[],this.etcTabGrist?.fetch()}getEtcConfigTabValues(){let t={etc:{}};return this.getElementValueById("etc-tab-grid")?.forEach((e=>{var{key:i,value:a}=e;i&&a&&(t.etc[i]=a)})),t}renderEtcConfigTab(){return html`
+import { html } from 'lit-element'
+
+import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
+import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
+
+export const EtcConfigTabMixin = (baseElement) => class extends baseElement {
+  setEtcConfigTabValues(data) {
+    let id = 1;
+    let convData = Object.keys(data || {}).map(x=>{
+      let retData = {};
+
+      retData.id = id * 100;
+      retData.key = x;
+      retData.value = data[x];
+
+      id = id + 1;
+
+      return retData;
+    })
+
+    this.viewEtcData = convData || [];
+    this.etcTabGrist?.fetch();
+  }
+
+  getEtcConfigTabValues() {
+    // 기본 return object 
+    let retObject = {
+      etc: {}
+    };
+
+    // grid 에서 데이터 가져오기 
+    let gridValue = this.getElementValueById('etc-tab-grid');
+
+    // rank 로 정렬 
+    gridValue?.forEach(x => {
+      var {
+        key = undefined,
+        value = undefined
+      } = x;
+
+      if (!key) return;
+      if (!value) return;
+
+      retObject.etc[key] = value;
+    });
+
+    return retObject;
+  }
+
+  renderEtcConfigTab() {
+    return html`
       <ox-grist auto-fetch id="etc-tab-grid" .config=${this.etcTabGridConfig} .mode='GRID'
         .fetchHandler=${this.fetchEtcTabHandler.bind(this)}>
-      </ox-grist>`}get etcTabGrist(){return this.shadowRoot.querySelector("#etc-tab-grid")}async fetchEtcTabHandler(){return{total:0,records:this.viewEtcData||[]}}async setEtcConfigTabConfig(){this.etcTabGridConfig={rows:MetaApi.getGristSelectableConfig(!0),pagination:{infinite:!0},appendable:!0,columns:[...MetaApi.getGristGuttersConfig(!1,!1),{type:"gutter",gutterName:"button",icon:"delete",handlers:{click:(t,e,i,a,r)=>{a.id&&this.deleteRow(this.etcTabGrist,a)}}},{type:"string",name:"id",hidden:!0},{type:"string",name:"key",header:TermsUtil.tLabel("key"),sortable:!1,width:225,record:{align:"left",editable:!0,mandatory:!0}},{type:"string",name:"value",header:TermsUtil.tLabel("value"),sortable:!1,width:945,record:{align:"left",editable:!0,mandatory:!0}}]}}};
+      </ox-grist>`
+  }
+
+  get etcTabGrist() {
+    return this.shadowRoot.querySelector('#etc-tab-grid')
+  }
+
+  async fetchEtcTabHandler() {
+    return {
+      total: 0,
+      records: this.viewEtcData || []
+    }
+  }
+
+  async setEtcConfigTabConfig() {
+    // 그리드 설정
+    this.etcTabGridConfig = {
+      rows: MetaApi.getGristSelectableConfig(true),
+      pagination: { infinite: true },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(false, false),
+        {
+          type: 'gutter', gutterName: 'button', icon: 'delete',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.deleteRow(this.etcTabGrist, record);
+              }
+            }
+          },
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'key',
+          header: TermsUtil.tLabel('key'),
+          sortable: false,
+          width: 225,
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          }
+        },
+        {
+          type: 'string',
+          name: 'value',
+          header: TermsUtil.tLabel('value'),
+          sortable: false,
+          width: 945,
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          }
+        }
+      ]
+    }
+  }
+}

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

@@ -1,4 +1,166 @@
-import{html}from"lit-element";import{MetaApi}from"@things-factory/meta-ui/client/utils/meta-api";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";export const FormConfigTabMixin=t=>class extends t{setFormConfigTabValues(t){let e=t?.map(((t,e)=>{let r=e+1,i={};return i.rank=10*r,i.id=r,i.category=t.category,i.display=t.display,i.column=t.column,i.column_list=t.column_list.join(","),i}));this.viewFormData=e||[],this.formTabGrist?.fetch()}getFormConfigTabValues(){let t={form:[]},e=this.getElementValueById("form-tab-grid");return this.sortRecordByRank(e)?.forEach((e=>{var{category:r,display:i,column:a=1,column_list:o}=e;r&&o&&(i||(i=r),o=o.split(","),t.form.push({category:r,display:i,column:a,column_list:o}))})),t}renderFormConfigTab(){return html`
+import { html } from 'lit-element'
+
+import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
+import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
+
+export const FormConfigTabMixin = (baseElement) => class extends baseElement {
+  setFormConfigTabValues(data) {
+    let convData = data?.map((column, index) => {
+      let rank = index + 1;
+      let retData = {};
+
+      retData.rank = rank * 10;
+      retData.id = rank;
+      retData.category = column.category;
+      retData.display = column.display;
+      retData.column = column.column;
+      retData.column_list = column.column_list.join(",");
+
+      return retData;
+    })
+
+    this.viewFormData = convData || [];
+    this.formTabGrist?.fetch();
+  }
+
+  getFormConfigTabValues() {
+    // 기본 return object 
+    let retObject = {
+      form: []
+    };
+
+    // grid 에서 데이터 가져오기 
+    let gridValue = this.getElementValueById('form-tab-grid');
+
+    // rank 로 정렬 
+    this.sortRecordByRank(gridValue)?.forEach(x => {
+      var {
+        category = undefined,
+        display = undefined,
+        column = 1,
+        column_list = undefined
+      } = x;
+
+      if (!category) return;
+      if (!column_list) return;
+      if (!display) display = category;
+      column_list = column_list.split(",");
+
+      retObject.form.push({
+        category: category,
+        display: display,
+        column: column,
+        column_list: column_list
+      });
+    });
+
+    return retObject;
+  }
+
+
+
+  renderFormConfigTab() {
+    return html`
       <ox-grist auto-fetch id="form-tab-grid" .config=${this.formTabGridConfig} .mode='GRID'
         .fetchHandler=${this.fetchFormTabHandler.bind(this)}>
-      </ox-grist>`}get formTabGrist(){return this.shadowRoot.querySelector("#form-tab-grid")}async fetchFormTabHandler(){return{total:0,records:this.viewFormData||[]}}async setFormConfigTabConfig(){this.formTabGridConfig={rows:MetaApi.getGristSelectableConfig(!0),pagination:{infinite:!0},sorters:[{name:"rank",desc:!1}],appendable:!0,columns:[...MetaApi.getGristGuttersConfig(!1,!1),{type:"gutter",gutterName:"button",icon:"delete",handlers:{click:(t,e,r,i,a)=>{i.id&&this.deleteRow(this.formTabGrist,i)}}},{type:"string",name:"id",hidden:!0},{type:"integer",name:"rank",header:TermsUtil.tLabel("rank"),sortable:!1,width:50,record:{align:"right",editable:!0,mandatory:!0}},{type:"string",name:"category",header:TermsUtil.tLabel("category"),sortable:!1,width:155,record:{align:"left",editable:!0,mandatory:!0}},{type:"string",name:"display",header:TermsUtil.tLabel("display"),sortable:!1,width:155,record:{align:"left",editable:!0,mandatory:!0}},{type:"integer",name:"column",header:TermsUtil.tLabel("column_cnt"),sortable:!0,width:65,record:{align:"right",editable:!0}},{type:"string",name:"column_list",header:TermsUtil.tLabel("grid_column_list"),sortable:!1,width:735,record:{align:"left",editable:!0,mandatory:!0}}]}}};
+      </ox-grist>`
+  }
+
+  get formTabGrist() {
+    return this.shadowRoot.querySelector('#form-tab-grid')
+  }
+
+  async fetchFormTabHandler() {
+    return {
+      total: 0,
+      records: this.viewFormData || []
+    }
+  }
+
+  async setFormConfigTabConfig() {
+    // 그리드 설정
+    this.formTabGridConfig = {
+      rows: MetaApi.getGristSelectableConfig(true),
+      pagination: { infinite: true },
+      sorters: [{ name: 'rank', desc: false }],
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(false, false),
+        {
+          type: 'gutter', gutterName: 'button', icon: 'delete',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.deleteRow(this.formTabGrist, record);
+              }
+            }
+          },
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'integer',
+          name: 'rank',
+          header: TermsUtil.tLabel('rank'),
+          sortable: false,
+          width: 50,
+          record: {
+            align: 'right',
+            editable: true,
+            mandatory: true
+          }
+        },
+        {
+          type: 'string',
+          name: 'category',
+          header: TermsUtil.tLabel('category'),
+          sortable: false,
+          width: 155,
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          }
+        },
+        {
+          type: 'string',
+          name: 'display',
+          header: TermsUtil.tLabel('display'),
+          sortable: false,
+          width: 155,
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          }
+        },
+        {
+          type: 'integer',
+          name: 'column',
+          header: TermsUtil.tLabel('column_cnt'),
+          sortable: true,
+          width: 65,
+          record: {
+            align: 'right',
+            editable: true
+          }
+        },
+        {
+          type: 'string',
+          name: 'column_list',
+          header: TermsUtil.tLabel('grid_column_list'),
+          sortable: false,
+          width: 735,
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          }
+        }
+      ]
+    }
+  }
+}

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

@@ -1,29 +1,277 @@
-import{html}from"lit-element";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";import{MetaApi}from"@things-factory/meta-ui/client/utils/meta-api";export const GraphQlConfigTabMixin=t=>class extends t{setGraphqlConfigTabValues(t){if(t){var e={query:t.query||{},multiple:t.mutation?.multiple||{},delete:t.mutation?.delete||{}};this.viewGraphqlData={query_list:e.query.list_func||"",query_find:e.query.find_one_func||"",query_parent_id:e.query.parent_id||"",after_set_fields_data:e.query.after_set_fields||[],mutation_multiple:e.multiple.func||"",mutation_multiple_type:e.multiple.type||"",mutation_multiple_parent_id:e.multiple.parent_id||"",skip_fields_data:e.multiple.skip_fields||[],mutation_delete:e.delete.func||""};let i=1;this.viewGraphqlData.after_set_fields_data=Object.keys(this.viewGraphqlData.after_set_fields_data).map((t=>({id:i++,set_field:t,get_field:this.viewGraphqlData.after_set_fields_data[t]}))),this.viewGraphqlData.skip_fields_data=this.viewGraphqlData.skip_fields_data.map((t=>({id:i++,except_field:t}))),this.graphqlTabAfterSetFieldGrist?.fetch(),this.graphqlTabSkipFieldGrist?.fetch()}else this.setGraphqlConfigTabDefaultValues()}getGraphqlConfigTabValues(){let t={},e=this.getElementValueById("query_list"),i=this.getElementValueById("query_find"),l=this.getElementValueById("mutation_multiple"),a=this.getElementValueById("mutation_multiple_type"),d=this.getElementValueById("mutation_delete"),r=this.getElementValueById("query_parent_id"),s=this.getElementValueById("mutation_multiple_parent_id"),u=this.getElementValueById("after-set-fields-grist"),n=this.getElementValueById("skip-fields-grist");e&&(t.query_list=e),i&&(t.query_find=i),r&&(t.query_parent_id=r),u&&(t.query_after_set_fields_data=u),l&&(t.mutation_multiple=l),a&&(t.mutation_multiple_type=a),s&&(t.mutation_multiple_parent_id=s),n&&(t.mutation_multiple_skip_fields_data=n),d&&(t.mutation_delete=d);let _={gql:{}},p=Object.keys(t);return p.filter((t=>t.startsWith("query")))&&(_.gql.query={},t.query_list&&(_.gql.query.list_func=t.query_list),t.query_find&&(_.gql.query.find_one_func=t.query_find),t.query_parent_id&&(_.gql.query.parent_id=t.query_parent_id),t.query_after_set_fields_data&&(_.gql.query.after_set_fields={},t.query_after_set_fields_data.forEach((t=>{_.gql.query.after_set_fields[t.set_field]=t.get_field})))),p.filter((t=>t.startsWith("mutation")))&&(_.gql.mutation={},p.filter((t=>t.startsWith("mutation_multiple")))&&(_.gql.mutation.multiple={},t.mutation_multiple&&(_.gql.mutation.multiple.func=t.mutation_multiple),t.mutation_multiple_type&&(_.gql.mutation.multiple.type=t.mutation_multiple_type),t.mutation_multiple_parent_id&&(_.gql.mutation.multiple.parent_id=t.mutation_multiple_parent_id),t.mutation_multiple_skip_fields_data&&(_.gql.mutation.multiple.skip_fields=t.mutation_multiple_skip_fields_data.map((t=>t.except_field)))),p.filter((t=>t.startsWith("mutation_delete")))&&(_.gql.mutation.delete={},t.mutation_delete&&(_.gql.mutation.delete.func=t.mutation_delete))),_}get graphqlTabAfterSetFieldGrist(){return this.shadowRoot.querySelector("#after-set-fields-grist")}get graphqlTabSkipFieldGrist(){return this.shadowRoot.querySelector("#skip-fields-grist")}setGraphqlConfigTabConfig(){this.afterSetFieldsConfig={rows:MetaApi.getGristSelectableConfig(!1),pagination:{infinite:!0},appendable:!0,columns:[...MetaApi.getGristGuttersConfig(!1,!1),{type:"gutter",gutterName:"button",icon:"delete",handlers:{click:(t,e,i,l,a)=>{l.id&&this.deleteRow(this.graphqlTabAfterSetFieldGrist,l)}}},{type:"string",name:"id",hidden:!0},{type:"string",name:"set_field",header:TermsUtil.tLabel("set_field_name"),record:{align:"left",editable:!0,mandatory:!0},width:150},{type:"string",name:"get_field",header:TermsUtil.tLabel("get_field_name"),record:{align:"left",editable:!0,mandatory:!0},width:150}]},this.skipFieldsConfig={rows:MetaApi.getGristSelectableConfig(!1),pagination:{infinite:!0},appendable:!0,columns:[...MetaApi.getGristGuttersConfig(!1,!1),{type:"gutter",gutterName:"button",icon:"delete",handlers:{click:(t,e,i,l,a)=>{l.id&&this.deleteRow(this.graphqlTabSkipFieldGrist,l)}}},{type:"string",name:"id",hidden:!0},{type:"string",name:"except_field",header:TermsUtil.tLabel("field_name"),record:{align:"left",editable:!0,mandatory:!0},width:250}]}}setGraphqlConfigTabDefaultValues(){this.viewGraphqlData||(this.viewGraphqlData={query_list:"",query_find:"",mutation_multiple:"",mutation_multiple_type:"",mutation_delete:"",query_parent_id:"",mutation_multiple_parent_id:"",after_set_fields_data:[],skip_fields_data:[]})}renderGraphqlConfigTab(){return this.setGraphqlConfigTabDefaultValues(),html`
+import { html } from 'lit-element'
+
+import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
+import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
+
+
+export const GraphQlConfigTabMixin = (baseElement) => class extends baseElement {
+
+  setGraphqlConfigTabValues(data) {
+    // 1. 조회 데이터 설정 
+    if (data) {
+      var graphQl = {
+        query: data.query || {},
+        multiple: data.mutation?.multiple || {},
+        delete: data.mutation?.delete || {}
+      }
+
+      this.viewGraphqlData = {
+        query_list: graphQl.query.list_func || '',
+        query_find: graphQl.query.find_one_func || '',
+        query_parent_id: graphQl.query.parent_id || '',
+        after_set_fields_data: graphQl.query.after_set_fields || [],
+        mutation_multiple: graphQl.multiple.func || '',
+        mutation_multiple_type: graphQl.multiple.type || '',
+        mutation_multiple_parent_id: graphQl.multiple.parent_id || '',
+        skip_fields_data: graphQl.multiple.skip_fields || [],
+        mutation_delete: graphQl.delete.func || ''
+      }
+
+      let idx = 1;
+      this.viewGraphqlData.after_set_fields_data
+        = Object.keys(this.viewGraphqlData.after_set_fields_data).map(key => {
+          return {
+            id: idx++,
+            set_field: key,
+            get_field: this.viewGraphqlData.after_set_fields_data[key]
+          };
+        })
+
+      this.viewGraphqlData.skip_fields_data
+        = this.viewGraphqlData.skip_fields_data.map(x => {
+          return {
+            id: idx++,
+            except_field: x
+          };
+        })
+
+
+      this.graphqlTabAfterSetFieldGrist?.fetch();
+      this.graphqlTabSkipFieldGrist?.fetch();
+    } else {
+      this.setGraphqlConfigTabDefaultValues();
+    }
+
+  }
+
+  getGraphqlConfigTabValues() {
+    let valueSet = {};
+
+    // 설정 데이터 
+    let query_list = this.getElementValueById('query_list');
+    let query_find = this.getElementValueById('query_find');
+    let mutation_multiple = this.getElementValueById('mutation_multiple');
+    let mutation_multiple_type = this.getElementValueById('mutation_multiple_type');
+    let mutation_delete = this.getElementValueById('mutation_delete');
+    let query_parent_id = this.getElementValueById('query_parent_id');
+    let mutation_multiple_parent_id = this.getElementValueById('mutation_multiple_parent_id');
+    let after_set_fields_data = this.getElementValueById('after-set-fields-grist');
+    let skip_fields_data = this.getElementValueById('skip-fields-grist');
+
+    if (query_list) valueSet.query_list = query_list;
+    if (query_find) valueSet.query_find = query_find;
+    if (query_parent_id) valueSet.query_parent_id = query_parent_id;
+    if (after_set_fields_data) valueSet.query_after_set_fields_data = after_set_fields_data;
+
+    if (mutation_multiple) valueSet.mutation_multiple = mutation_multiple;
+    if (mutation_multiple_type) valueSet.mutation_multiple_type = mutation_multiple_type;
+    if (mutation_multiple_parent_id) valueSet.mutation_multiple_parent_id = mutation_multiple_parent_id;
+    if (skip_fields_data) valueSet.mutation_multiple_skip_fields_data = skip_fields_data;
+
+    if (mutation_delete) valueSet.mutation_delete = mutation_delete;
+
+
+    // 리턴 오브젝트로 가공 
+    let retObject = {
+      gql: {}
+    };
+    let valueKeys = Object.keys(valueSet);
+
+    // query 가 포함 되어 있으면 
+    if (valueKeys.filter(x => x.startsWith('query'))) {
+      retObject.gql.query = {};
+
+      if (valueSet.query_list) retObject.gql.query.list_func = valueSet.query_list;
+      if (valueSet.query_find) retObject.gql.query.find_one_func = valueSet.query_find;
+      if (valueSet.query_parent_id) retObject.gql.query.parent_id = valueSet.query_parent_id;
+      if (valueSet.query_after_set_fields_data) {
+        retObject.gql.query.after_set_fields = {};
+
+        valueSet.query_after_set_fields_data.forEach(x => {
+          retObject.gql.query.after_set_fields[x.set_field] = x.get_field;
+        });
+      }
+    }
+
+    // mutation 이 포함되어 있으면 
+    if (valueKeys.filter(x => x.startsWith('mutation'))) {
+      retObject.gql.mutation = {};
+
+      // multiple 이 포함 되어 있으면 
+      if (valueKeys.filter(x => x.startsWith('mutation_multiple'))) {
+        retObject.gql.mutation.multiple = {};
+
+        if (valueSet.mutation_multiple) retObject.gql.mutation.multiple.func = valueSet.mutation_multiple;
+        if (valueSet.mutation_multiple_type) retObject.gql.mutation.multiple.type = valueSet.mutation_multiple_type;
+        if (valueSet.mutation_multiple_parent_id) retObject.gql.mutation.multiple.parent_id = valueSet.mutation_multiple_parent_id;
+        if (valueSet.mutation_multiple_skip_fields_data) retObject.gql.mutation.multiple.skip_fields = valueSet.mutation_multiple_skip_fields_data.map(x => {
+          return x.except_field;
+        });
+      }
+
+      // delete 가 포함되어 있으면 
+      if (valueKeys.filter(x => x.startsWith('mutation_delete'))) {
+        retObject.gql.mutation.delete = {};
+
+        if (valueSet.mutation_delete) retObject.gql.mutation.delete.func = valueSet.mutation_delete;
+      }
+    }
+
+    return retObject;
+  }
+
+  get graphqlTabAfterSetFieldGrist() {
+    return this.shadowRoot.querySelector('#after-set-fields-grist')
+  }
+  get graphqlTabSkipFieldGrist() {
+    return this.shadowRoot.querySelector('#skip-fields-grist')
+  }
+
+
+  setGraphqlConfigTabConfig() {
+
+    // 1. 조회후 필드 변경 그리드 설정 
+    this.afterSetFieldsConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: { infinite: true },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(false, false),
+        {
+          type: 'gutter', gutterName: 'button', icon: 'delete',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.deleteRow(this.graphqlTabAfterSetFieldGrist, record);
+              }
+            }
+          },
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'set_field',
+          header: TermsUtil.tLabel('set_field_name'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'get_field',
+          header: TermsUtil.tLabel('get_field_name'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 150
+        }
+      ]
+    };
+
+    // 1. mutation 시 제외 필드 설정 
+    this.skipFieldsConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: { infinite: true },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(false, false),
+        {
+          type: 'gutter', gutterName: 'button', icon: 'delete',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.deleteRow(this.graphqlTabSkipFieldGrist, record);
+              }
+            }
+          },
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'except_field',
+          header: TermsUtil.tLabel('field_name'),
+          record: {
+            align: 'left',
+            editable: true,
+            mandatory: true
+          },
+          width: 250
+        }
+      ]
+    };
+  }
+
+
+  setGraphqlConfigTabDefaultValues() {
+    if (!this.viewGraphqlData) {
+      this.viewGraphqlData = {
+        query_list: '',
+        query_find: '',
+        mutation_multiple: '',
+        mutation_multiple_type: '',
+        mutation_delete: '',
+        query_parent_id: '',
+        mutation_multiple_parent_id: '',
+        after_set_fields_data: [],
+        skip_fields_data: []
+      }
+    }
+  }
+
+
+  // 화면 
+  renderGraphqlConfigTab() {
+    this.setGraphqlConfigTabDefaultValues();
+
+    let renderHtml = html`
       <div field-2column>
         <div field>
-          <label>${TermsUtil.tLabel("query_list_function")}
+          <label>${TermsUtil.tLabel('query_list_function')}
             <input id="query_list" name="query_list" type="text" value=${this.viewGraphqlData.query_list} />
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("query_find_function")}
+          <label>${TermsUtil.tLabel('query_find_function')}
             <input id="query_find" name="query_find" type="text" value=${this.viewGraphqlData.query_find} />
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("multiple_update_function")}
+          <label>${TermsUtil.tLabel('multiple_update_function')}
             <input id="mutation_multiple" name="mutation_multiple" type="text"
               value=${this.viewGraphqlData.mutation_multiple} />
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("multiple_update_type")}
+          <label>${TermsUtil.tLabel('multiple_update_type')}
             <input id="mutation_multiple_type" name="mutation_multiple_type" type="text"
               value=${this.viewGraphqlData.mutation_multiple_type} />
           </label>
         </div>
         <div field>
-          <label>${TermsUtil.tLabel("delete_function")}
+          <label>${TermsUtil.tLabel('delete_function')}
             <input id="mutation_delete" name="mutation_delete" type="text" value=${this.viewGraphqlData.mutation_delete} />
           </label>
         </div>
@@ -31,16 +279,16 @@ import{html}from"lit-element";import{TermsUtil}from"@things-factory/meta-ui/clie
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("query_option")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('query_option')}
           </h2>
           <div subfield>
-            <label>${TermsUtil.tLabel("parent_id")}
+            <label>${TermsUtil.tLabel('parent_id')}
               <input id="query_parent_id" name="query_parent_id" type="text" value=${this.viewGraphqlData.query_parent_id} />
             </label>
       
-            <label>${TermsUtil.tLabel("after_set_fields")}
+            <label>${TermsUtil.tLabel('after_set_fields')}
               <div style="display:flex;height:200px">
-                <ox-grist id="after-set-fields-grist" .config=${this.afterSetFieldsConfig} .mode=${"GRID"} auto-fetch
+                <ox-grist id="after-set-fields-grist" .config=${this.afterSetFieldsConfig} .mode=${'GRID'} auto-fetch
                   .fetchHandler=${this.fetchAfterSetFields.bind(this)}></ox-grist>
               </div>
             </label>
@@ -48,17 +296,17 @@ import{html}from"lit-element";import{TermsUtil}from"@things-factory/meta-ui/clie
         </div>
         <div field>
           <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel("multiple_update_option")}
+            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('multiple_update_option')}
           </h2>
           <div subfield>
-            <label>${TermsUtil.tLabel("parent_id")}
+            <label>${TermsUtil.tLabel('parent_id')}
               <input id="mutation_multiple_parent_id" name="mutation_multiple_parent_id" type="text"
                 value=${this.viewGraphqlData.mutation_multiple_parent_id} />
             </label>
       
-            <label>${TermsUtil.tLabel("skip_fields")}
+            <label>${TermsUtil.tLabel('skip_fields')}
               <div style="display:flex;height:200px">
-                <ox-grist id="skip-fields-grist" .config=${this.skipFieldsConfig} .mode=${"GRID"} auto-fetch
+                <ox-grist id="skip-fields-grist" .config=${this.skipFieldsConfig} .mode=${'GRID'} auto-fetch
                   .fetchHandler=${this.fetchSkipFields.bind(this)}></ox-grist>
               </div>
             </label>
@@ -66,4 +314,22 @@ import{html}from"lit-element";import{TermsUtil}from"@things-factory/meta-ui/clie
         </div>
       </div>
       
-    `}async fetchAfterSetFields(){return{records:this.viewGraphqlData.after_set_fields_data,total:0}}async fetchSkipFields(){return{records:this.viewGraphqlData.skip_fields_data,total:0}}};
+    `
+    return renderHtml;
+  }
+
+
+  async fetchAfterSetFields() {
+    return {
+      records: this.viewGraphqlData.after_set_fields_data,
+      total: 0
+    }
+  }
+
+  async fetchSkipFields() {
+    return {
+      records: this.viewGraphqlData.skip_fields_data,
+      total: 0
+    }
+  }
+}