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

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

@@ -1,335 +1,339 @@
-import { html } from 'lit-element'
+import { html } from 'lit'
 
 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 || {}
+        }
 
-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 || ''
-      }
+        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 => {
+        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 => {
+        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();
+        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);
+    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 = {};
+      // 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 = {};
+        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;
-        });
+          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 = {};
+      // 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
+            })
+        }
 
-      // multiple 이 포함 되어 있으면 
-      if (valueKeys.filter(x => x.startsWith('mutation_multiple'))) {
-        retObject.gql.mutation.multiple = {};
+        // delete 가 포함되어 있으면
+        if (valueKeys.filter(x => x.startsWith('mutation_delete'))) {
+          retObject.gql.mutation.delete = {}
 
-        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;
-        });
+          if (valueSet.mutation_delete) retObject.gql.mutation.delete.func = valueSet.mutation_delete
+        }
       }
 
-      // 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
     }
 
-    return retObject;
-  }
-
-  get graphqlTabAfterSetFieldGrist() {
-    return this.shadowRoot.querySelector('#after-set-fields-grist')
-  }
-  get graphqlTabSkipFieldGrist() {
-    return this.shadowRoot.querySelector('#skip-fields-grist')
-  }
-
-
-  setGraphqlConfigTabConfig() {
+    get graphqlTabAfterSetFieldGrist() {
+      return this.shadowRoot.querySelector('#after-set-fields-grist')
+    }
+    get graphqlTabSkipFieldGrist() {
+      return this.shadowRoot.querySelector('#skip-fields-grist')
+    }
 
-    // 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);
+    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
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
           },
-          width: 150
-        },
-        {
-          type: 'string',
-          name: 'get_field',
-          header: TermsUtil.tLabel('get_field_name'),
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
+          {
+            type: 'string',
+            name: 'set_field',
+            header: TermsUtil.tLabel('set_field_name'),
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            },
+            width: 150
           },
-          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);
+      // 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
+          {
+            type: 'string',
+            name: 'id',
+            hidden: 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: []
+          {
+            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();
+    // 화면
+    renderGraphqlConfigTab() {
+      this.setGraphqlConfigTabDefaultValues()
 
-    let renderHtml = html`
-      <div field-2column>
-        <div field>
-          <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')}
-            <input id="query_find" name="query_find" type="text" value=${this.viewGraphqlData.query_find} />
-          </label>
-        </div>
-        <div field>
-          <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')}
-            <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')}
-            <input id="mutation_delete" name="mutation_delete" type="text" value=${this.viewGraphqlData.mutation_delete} />
-          </label>
-        </div>
-        <div field>
-        </div>
-        <div field>
-          <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('query_option')}
-          </h2>
-          <div subfield>
-            <label>${TermsUtil.tLabel('parent_id')}
-              <input id="query_parent_id" name="query_parent_id" type="text" value=${this.viewGraphqlData.query_parent_id} />
+      let renderHtml = html`
+        <div field-2column>
+          <div field>
+            <label
+              >${TermsUtil.tLabel('query_list_function')}
+              <input id="query_list" name="query_list" type="text" value=${this.viewGraphqlData.query_list} />
             </label>
-      
-            <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
-                  .fetchHandler=${this.fetchAfterSetFields.bind(this)}></ox-grist>
-              </div>
+          </div>
+          <div field>
+            <label
+              >${TermsUtil.tLabel('query_find_function')}
+              <input id="query_find" name="query_find" type="text" value=${this.viewGraphqlData.query_find} />
             </label>
           </div>
-        </div>
-        <div field>
-          <h2>
-            <mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('multiple_update_option')}
-          </h2>
-          <div subfield>
-            <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} />
+          <div field>
+            <label
+              >${TermsUtil.tLabel('multiple_update_function')}
+              <input id="mutation_multiple" name="mutation_multiple" type="text" value=${this.viewGraphqlData.mutation_multiple} />
             </label>
-      
-            <label>${TermsUtil.tLabel('skip_fields')}
-              <div style="display:flex;height:200px">
-                <ox-grist id="skip-fields-grist" .config=${this.skipFieldsConfig} .mode=${'GRID'} auto-fetch
-                  .fetchHandler=${this.fetchSkipFields.bind(this)}></ox-grist>
-              </div>
+          </div>
+          <div field>
+            <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')}
+              <input id="mutation_delete" name="mutation_delete" type="text" value=${this.viewGraphqlData.mutation_delete} />
             </label>
           </div>
+          <div field></div>
+          <div field>
+            <h2><mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('query_option')}</h2>
+            <div subfield>
+              <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')}
+                <div style="display:flex;height:200px">
+                  <ox-grist
+                    id="after-set-fields-grist"
+                    .config=${this.afterSetFieldsConfig}
+                    .mode=${'GRID'}
+                    auto-fetch
+                    .fetchHandler=${this.fetchAfterSetFields.bind(this)}
+                  ></ox-grist>
+                </div>
+              </label>
+            </div>
+          </div>
+          <div field>
+            <h2><mwc-icon>list_alt</mwc-icon>${TermsUtil.tLabel('multiple_update_option')}</h2>
+            <div subfield>
+              <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')}
+                <div style="display:flex;height:200px">
+                  <ox-grist
+                    id="skip-fields-grist"
+                    .config=${this.skipFieldsConfig}
+                    .mode=${'GRID'}
+                    auto-fetch
+                    .fetchHandler=${this.fetchSkipFields.bind(this)}
+                  ></ox-grist>
+                </div>
+              </label>
+            </div>
+          </div>
         </div>
-      </div>
-      
-    `
-    return renderHtml;
-  }
-
+      `
+      return renderHtml
+    }
 
-  async fetchAfterSetFields() {
-    return {
-      records: this.viewGraphqlData.after_set_fields_data,
-      total: 0
+    async fetchAfterSetFields() {
+      return {
+        records: this.viewGraphqlData.after_set_fields_data,
+        total: 0
+      }
     }
-  }
 
-  async fetchSkipFields() {
-    return {
-      records: this.viewGraphqlData.skip_fields_data,
-      total: 0
+    async fetchSkipFields() {
+      return {
+        records: this.viewGraphqlData.skip_fields_data,
+        total: 0
+      }
     }
   }
-}