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

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

@@ -1,4 +1,4 @@
-import { html } from 'lit-element'
+import { html } from 'lit'
 
 import '@things-factory/component-ui/client/quick-find/quick-find-tabs'
 import '@things-factory/form-ui'
@@ -9,12 +9,12 @@ import { MetaApi } from '@things-factory/meta-ui/client/utils/meta-api'
 import { TermsUtil } from '@things-factory/meta-ui/client/utils/terms-util'
 
 // Object로 조회 되는 컬럼
-const objectTypes = ['object','resource-object', 'resource-code-selector', 'meta-object-selector', 'meta-code-selector'];
-// json 설정을 가지는 컬럼 
-const jsonConfigTypes = ['object', 'select', 'resource-object', 'resource-code-selector', 'meta-object-selector', 'meta-code-selector'];
-// json 설정 가이드 
+const objectTypes = ['object', 'resource-object', 'resource-code-selector', 'meta-object-selector', 'meta-code-selector']
+// json 설정을 가지는 컬럼
+const jsonConfigTypes = ['object', 'select', 'resource-object', 'resource-code-selector', 'meta-object-selector', 'meta-code-selector']
+// json 설정 가이드
 const typeConfigGuides = {
-  'object' : {
+  object: {
     queryName: '',
     referenceField: 'Object Mapping Entity reference Field Name',
     nameField: '',
@@ -27,7 +27,7 @@ const typeConfigGuides = {
       fields: ['', '']
     }
   },
-  'resource-object':{
+  'resource-object': {
     queryName: 'GraphQL query Name',
     referenceField: 'Object Mapping Entity reference Field Name',
     nameField: '',
@@ -53,7 +53,7 @@ const typeConfigGuides = {
     filters: 'filter values [{"name": "parentId", "operator": "eq", "value": "506134f8-8655-47ee-afdc-248b0de2f31c"}]',
     sorters: 'sort field [{"name": "boxTypeCd", "desc": false}]'
   },
-  'select': {
+  select: {
     type: 'code or scenario or entity',
     name: 'codeName or scenario Name',
     values: 'code type display select Array [{"code1","code2"}] OR [{"value":"code1","display":"CODE1"}, {"value":"code2","display":"CODE2"}]',
@@ -72,25 +72,25 @@ const typeConfigGuides = {
       referenceField: 'Object Mapping Entity reference Field Name',
       nameField: '',
       filterFields: '["code","display"] or [{"name":"code1","operator":"eq"},{"name":"display","operator":"eq"}]',
-      select:[
+      select: [
         { name: '', hidden: true },
         { name: '', hidden: false }
       ],
       filters: 'filter values [{"name": "parentId", "operator": "eq", "value": "506134f8-8655-47ee-afdc-248b0de2f31c"}]',
       sorters: 'sort field [{"name": "boxTypeCd", "desc": false}]',
       fieldMap: {
-        sourceField1 : 'targetField1',
-        sourceField2 : 'targetField2',
-        sourceField3 : 'targetField3'
+        sourceField1: 'targetField1',
+        sourceField2: 'targetField2',
+        sourceField3: 'targetField3'
       }
     },
     case_menu: {
       menu: 'route_name',
       referenceField: 'Object Mapping Entity reference Field Name',
       fieldMap: {
-        sourceField1 : 'targetField1',
-        sourceField2 : 'targetField2',
-        sourceField3 : 'targetField3'
+        sourceField1: 'targetField1',
+        sourceField2: 'targetField2',
+        sourceField3: 'targetField3'
       }
     }
   },
@@ -108,17 +108,17 @@ const typeConfigGuides = {
       filters: 'filter values [{"name": "parentId", "operator": "eq", "value": "506134f8-8655-47ee-afdc-248b0de2f31c"}]',
       sorters: 'sort field [{"name": "boxTypeCd", "desc": false}]',
       fieldMap: {
-        sourceField1 : 'targetField1',
-        sourceField2 : 'targetField2',
-        sourceField3 : 'targetField3'
+        sourceField1: 'targetField1',
+        sourceField2: 'targetField2',
+        sourceField3: 'targetField3'
       }
     },
     case_menu: {
       menu: 'route_name',
       fieldMap: {
-        sourceField1 : 'targetField1',
-        sourceField2 : 'targetField2',
-        sourceField3 : 'targetField3'
+        sourceField1: 'targetField1',
+        sourceField2: 'targetField2',
+        sourceField3: 'targetField3'
       }
     }
   }
@@ -130,520 +130,523 @@ const typeConfigGuides = {
  * @author wryang
  * @description 페이지 생성기 화면의 컬럼 구성 탭 화면
  */
-export const ColumnConfigTabMixin = (baseElement) => class extends baseElement {
-  /**
-   * @description 탭 데이터를 탭에 데이터를 설정
-   ***************************************
-   * @param {Object} data 
-   */
-  setColumnConfigTabValues(data) {
-    data?.forEach((column, index) => {
-      let rank = index + 1;
-      column.rank = rank * 10;
-      column.id = rank;
-
-      if (objectTypes.includes(column.type)) {
-        if (column.object_opt && !column.selector_args) {
-          let optString = JSON.stringify(column.object_opt, null, 2);
-          column.selector_args = { option : optString };
-        }
+export const ColumnConfigTabMixin = baseElement =>
+  class extends baseElement {
+    /**
+     * @description 탭 데이터를 탭에 데이터를 설정
+     ***************************************
+     * @param {Object} data
+     */
+    setColumnConfigTabValues(data) {
+      data?.forEach((column, index) => {
+        let rank = index + 1
+        column.rank = rank * 10
+        column.id = rank
 
-      } else if (column.type == 'select') {
-        if (column.select_opt && !column.selector_args) {
-          let optString = JSON.stringify(column.select_opt, null, 2);
-          column.selector_args = { option : optString };
+        if (objectTypes.includes(column.type)) {
+          if (column.object_opt && !column.selector_args) {
+            let optString = JSON.stringify(column.object_opt, null, 2)
+            column.selector_args = { option: optString }
+          }
+        } else if (column.type == 'select') {
+          if (column.select_opt && !column.selector_args) {
+            let optString = JSON.stringify(column.select_opt, null, 2)
+            column.selector_args = { option: optString }
+          }
         }
-      }
-    })
+      })
 
-    this.viewColumnData = data;
-    this.columnTabGrist?.fetch();
-  }
+      this.viewColumnData = data
+      this.columnTabGrist?.fetch()
+    }
 
-  /**
-   * @description 컬럼 탭에 대한 컬럼 설정 정보를 리턴
-   ********************************************
-   * @returns {Object}
-   */
-  getColumnConfigTabValues() {
-    // 기본 return object
-    let retObject = {
-      grid_column: [],
-      grid: {
-        list: {
-          fields: [],
-          details: [],
-          thumbnail: ''
-        },
-        option: {
-          sorters: []
+    /**
+     * @description 컬럼 탭에 대한 컬럼 설정 정보를 리턴
+     ********************************************
+     * @returns {Object}
+     */
+    getColumnConfigTabValues() {
+      // 기본 return object
+      let retObject = {
+        grid_column: [],
+        grid: {
+          list: {
+            fields: [],
+            details: [],
+            thumbnail: ''
+          },
+          option: {
+            sorters: []
+          }
         }
       }
-    };
 
-    // grid에서 데이터 가져오기
-    let gridValue = this.getElementValueById('column-tab-grid');
+      // grid에서 데이터 가져오기
+      let gridValue = this.getElementValueById('column-tab-grid')
 
-    if (gridValue) {
-      // rank 값으로 정렬 후 데이터 가공
-      this.sortRecordByRank(gridValue)?.forEach(x => {
-        let {
-          name = undefined,
-          header = undefined,
-          type = 'string',
-          editable = false,
-          sortable = false,
-          mandatory = false,
-          exportable = false,
-          rep_field = false,
-          detail_field = false,
-          thumbnail_field = false,
-          hidden = false,
-          accumulator = undefined,
-          align = 'left',
-          width = 0,
-          format = undefined,
-          change_event_handler = undefined,
-          default_value = undefined,
-          selector_args = undefined,
-          fixed = false
-        } = x;
+      if (gridValue) {
+        // rank 값으로 정렬 후 데이터 가공
+        this.sortRecordByRank(gridValue)?.forEach(x => {
+          let {
+            name = undefined,
+            header = undefined,
+            type = 'string',
+            editable = false,
+            sortable = false,
+            mandatory = false,
+            exportable = false,
+            rep_field = false,
+            detail_field = false,
+            thumbnail_field = false,
+            hidden = false,
+            accumulator = undefined,
+            align = 'left',
+            width = 0,
+            format = undefined,
+            change_event_handler = undefined,
+            default_value = undefined,
+            selector_args = undefined,
+            fixed = false
+          } = x
 
-        if (!name) return;
+          if (!name) return
 
-        let columnObj = {
-          name: name,
-          header: header ? header : name,
-          type: type,
-          editable: editable,
-          sortable: sortable,
-          mandatory: mandatory,
-          exportable: exportable,
-          hidden: hidden,
-          align: align,
-          width: width,
-          format: format,
-          change_event_handler: change_event_handler,
-          default_value: default_value,
-          fixed: fixed
-        }
+          let columnObj = {
+            name: name,
+            header: header ? header : name,
+            type: type,
+            editable: editable,
+            sortable: sortable,
+            mandatory: mandatory,
+            exportable: exportable,
+            hidden: hidden,
+            align: align,
+            width: width,
+            format: format,
+            change_event_handler: change_event_handler,
+            default_value: default_value,
+            fixed: fixed
+          }
 
-        // 누적 계산 처리
-        if(accumulator) {
-          columnObj.accumulator = accumulator;
-        }
+          // 누적 계산 처리
+          if (accumulator) {
+            columnObj.accumulator = accumulator
+          }
 
-        // 셀렉터 관련 정보 설정
-        if (selector_args && typeof selector_args === 'string') {
-          selector_args = JSON.parse(selector_args);
-        }
+          // 셀렉터 관련 정보 설정
+          if (selector_args && typeof selector_args === 'string') {
+            selector_args = JSON.parse(selector_args)
+          }
 
-        // object / select의 경우 args 값 설정
-        if (jsonConfigTypes.includes(type) && selector_args && selector_args.option) {
-          columnObj[type == 'select' ? 'select_opt' : 'object_opt'] = JSON.parse(selector_args.option);
-        }
+          // object / select의 경우 args 값 설정
+          if (jsonConfigTypes.includes(type) && selector_args && selector_args.option) {
+            columnObj[type == 'select' ? 'select_opt' : 'object_opt'] = JSON.parse(selector_args.option)
+          }
 
-        retObject.grid_column.push(columnObj);
+          retObject.grid_column.push(columnObj)
 
-        // 대표 필드 여부
-        if (rep_field) {
-          retObject.grid.list.fields.push(name);
-        }
+          // 대표 필드 여부
+          if (rep_field) {
+            retObject.grid.list.fields.push(name)
+          }
 
-        // 상세 필드 여부
-        if (detail_field) {
-          retObject.grid.list.details.push(name);
-        }
+          // 상세 필드 여부
+          if (detail_field) {
+            retObject.grid.list.details.push(name)
+          }
 
-        // 썸네일 여부
-        if (thumbnail_field) {
-          retObject.grid.list.thumbnail = name;
-        }
-      })
+          // 썸네일 여부
+          if (thumbnail_field) {
+            retObject.grid.list.thumbnail = name
+          }
+        })
 
-      // sort 필드 : sort_rank로 정렬 후 데이터 가공
-      this.sortRecordByField(gridValue.filter(x => x.sort_rank && x.sort_rank > 0), 'sort_rank').forEach(x => {
-        let { name = undefined, sort_desc = false } = x;
-        if (!name) return;
+        // sort 필드 : sort_rank로 정렬 후 데이터 가공
+        this.sortRecordByField(
+          gridValue.filter(x => x.sort_rank && x.sort_rank > 0),
+          'sort_rank'
+        ).forEach(x => {
+          let { name = undefined, sort_desc = false } = x
+          if (!name) return
 
-        retObject.grid.option.sorters.push({
-          name: name,
-          desc: sort_desc
+          retObject.grid.option.sorters.push({
+            name: name,
+            desc: sort_desc
+          })
         })
-      })
-    }
+      }
 
-    return retObject;
-  }
+      return retObject
+    }
 
-  /**
-   * @description 컬럼 설정 탭 렌더링
-   *******************************
-   * @returns {HTML}
-   */
-  renderColumnConfigTab() {
-    return html`
-      <ox-grist auto-fetch id="column-tab-grid" .config=${this.columnTabGridConfig} .mode='GRID'
-        .fetchHandler=${this.fetchColumnTabHandler.bind(this)}>
+    /**
+     * @description 컬럼 설정 탭 렌더링
+     *******************************
+     * @returns {HTML}
+     */
+    renderColumnConfigTab() {
+      return html` <ox-grist auto-fetch id="column-tab-grid" .config=${this.columnTabGridConfig} .mode="GRID" .fetchHandler=${this.fetchColumnTabHandler.bind(this)}>
       </ox-grist>`
-  }
+    }
 
-  /**
-   * @description 컬럼 탭 엘리먼트 추출
-   *********************************
-   * @returns {HTML}
-   */
-  get columnTabGrist() {
-    return this.shadowRoot.querySelector('#column-tab-grid')
-  }
+    /**
+     * @description 컬럼 탭 엘리먼트 추출
+     *********************************
+     * @returns {HTML}
+     */
+    get columnTabGrist() {
+      return this.shadowRoot.querySelector('#column-tab-grid')
+    }
 
-  /**
-   * @description 데이터 조회 결과
-   *****************************
-   * @returns {Object}
-   */
-  async fetchColumnTabHandler() {
-    return {
-      total: 0,
-      records: this.viewColumnData || []
+    /**
+     * @description 데이터 조회 결과
+     *****************************
+     * @returns {Object}
+     */
+    async fetchColumnTabHandler() {
+      return {
+        total: 0,
+        records: this.viewColumnData || []
+      }
     }
-  }
 
-  /**
-   * @description 컬럼 설정 탭에 설정 세팅
-   ***********************************
-   */
-  async setColumnConfigTabConfig() {
-    // 컬럼 리스트
-    let colTypeList = await MetaApi.getCodeSelectorData('GRIST_COLUMN_TYPES');
+    /**
+     * @description 컬럼 설정 탭에 설정 세팅
+     ***********************************
+     */
+    async setColumnConfigTabConfig() {
+      // 컬럼 리스트
+      let colTypeList = await MetaApi.getCodeSelectorData('GRIST_COLUMN_TYPES')
 
-    // 그리드 설정
-    this.columnTabGridConfig = {
-      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.columnTabGrist, record);
+      // 그리드 설정
+      this.columnTabGridConfig = {
+        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.columnTabGrist, record)
+                }
               }
             }
           },
-        },
-        {
-          type: 'integer',
-          name: 'rank',
-          header: TermsUtil.tLabel('rank'),
-          sortable: false,
-          width: 50,
-          record: {
-            align: 'right',
-            editable: true,
-            mandatory: true
-          }
-        },
-        {
-          type: 'string',
-          name: 'id',
-          hidden: true
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: TermsUtil.tLabel('name'),
-          sortable: false,
-          width: 135,
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
-          }
-        },
-        {
-          type: 'string',
-          name: 'header',
-          header: TermsUtil.tLabel('header'),
-          sortable: false,
-          width: 135,
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true
-          }
-        },
-        {
-          type: 'string',
-          name: 'display',
-          header: TermsUtil.tLabel('display'),
-          sortable: false,
-          width: 135,
-          record: {
-            align: 'left',
-            editable: false,
-            mandatory: false,
-            renderer: (value, column, record, rowIndex, field) => {
-              return record && record.header ? TermsUtil.tLabel(record.header) : '';
+          {
+            type: 'integer',
+            name: 'rank',
+            header: TermsUtil.tLabel('rank'),
+            sortable: false,
+            width: 50,
+            record: {
+              align: 'right',
+              editable: true,
+              mandatory: true
             }
-          }
-        },
-        {
-          type: 'select',
-          name: 'type',
-          header: TermsUtil.tLabel('type'),
-          sortable: false,
-          width: 100,
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: true,
-            options: colTypeList
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'editable',
-          header: TermsUtil.tLabel('editable'),
-          sortable: false,
-          width: 80,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'sortable',
-          header: TermsUtil.tLabel('sortable'),
-          sortable: false,
-          width: 80,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'mandatory',
-          header: TermsUtil.tLabel('mandatory'),
-          sortable: false,
-          width: 85,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'exportable',
-          header: TermsUtil.tLabel('exportable'),
-          sortable: false,
-          width: 90,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'rep_field',
-          header: TermsUtil.tLabel('rep_field'),
-          sortable: false,
-          width: 80,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'detail_field',
-          header: TermsUtil.tLabel('detail_field'),
-          sortable: false,
-          width: 80,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'fixed',
-          header: TermsUtil.tLabel('fixed_column'),
-          sortable: false,
-          width: 80,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'thumbnail_field',
-          header: TermsUtil.tLabel('thumbnail_field'),
-          sortable: false,
-          width: 70,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'hidden',
-          header: TermsUtil.tLabel('hidden'),
-          sortable: false,
-          width: 55,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'select',
-          name: 'accumulator',
-          header: TermsUtil.tLabel('accumulator'),
-          sortable: false,
-          width: 70,
-          record: {
-            align: 'center',
-            editable: true,
-            mandatory: false,
-            options: ['', 'sum', 'avg', 'count', 'min', 'max']
-          }
-        },
-        {
-          type: 'select',
-          name: 'align',
-          header: TermsUtil.tLabel('align'),
-          sortable: false,
-          width: 55,
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: false,
-            options: ['', 'left', 'center', 'right']
-          }
-        },
-        {
-          type: 'integer',
-          name: 'width',
-          header: TermsUtil.tLabel('width'),
-          sortable: false,
-          width: 55,
-          record: {
-            editable: true,
-            mandatory: true,
-            align: 'right'
-          }
-        },
-        {
-          type: 'integer',
-          name: 'sort_rank',
-          header: TermsUtil.tLabel('sort_rank'),
-          sortable: false,
-          width: 80,
-          record: {
-            editable: true,
-            mandatory: true,
-            align: 'right'
-          }
-        },
-        {
-          type: 'boolean',
-          name: 'sort_desc',
-          header: TermsUtil.tLabel('reverse_sort'),
-          sortable: false,
-          width: 65,
-          record: {
-            align: 'center',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'string',
-          name: 'format',
-          header: TermsUtil.tLabel('format'),
-          sortable: false,
-          width: 135,
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: false
-          }
-        },
-        {
-          type: 'string',
-          name: 'default_value',
-          header: TermsUtil.tLabel('default_value'),
-          sortable: false,
-          width: 135,
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: false
-          }
-        },
-        {
-          type: 'string',
-          name: 'change_event_handler',
-          header: TermsUtil.tLabel('change-event-handler'),
-          sortable: false,
-          width: 150,
-          record: {
-            align: 'left',
-            mandatory: false,
-            editable: true
-          }
-        },
-        {
-          type: 'parameters',
-          name: 'selector_args',
-          header: TermsUtil.tLabel('selector_args'),
-          sortable: false,
-          width: 150,
-          record: {
-            align: 'left',
-            editable: true,
-            mandatory: false,
-            renderer: (value, column, record, rowIndex, field) => {
-              if (!record.selector_args) {
-                let guideObject = typeConfigGuides[record.type];
-                if(guideObject) {
-                  record.selector_args = {
-                    option: JSON.stringify(guideObject, null, 2)
-                  };
-                } else {
-                  if (jsonConfigTypes.includes(record.type) == false) {
-                    record.selector_args = undefined;
+          },
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'name',
+            header: TermsUtil.tLabel('name'),
+            sortable: false,
+            width: 135,
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            }
+          },
+          {
+            type: 'string',
+            name: 'header',
+            header: TermsUtil.tLabel('header'),
+            sortable: false,
+            width: 135,
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true
+            }
+          },
+          {
+            type: 'string',
+            name: 'display',
+            header: TermsUtil.tLabel('display'),
+            sortable: false,
+            width: 135,
+            record: {
+              align: 'left',
+              editable: false,
+              mandatory: false,
+              renderer: (value, column, record, rowIndex, field) => {
+                return record && record.header ? TermsUtil.tLabel(record.header) : ''
+              }
+            }
+          },
+          {
+            type: 'select',
+            name: 'type',
+            header: TermsUtil.tLabel('type'),
+            sortable: false,
+            width: 100,
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: true,
+              options: colTypeList
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'editable',
+            header: TermsUtil.tLabel('editable'),
+            sortable: false,
+            width: 80,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'sortable',
+            header: TermsUtil.tLabel('sortable'),
+            sortable: false,
+            width: 80,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'mandatory',
+            header: TermsUtil.tLabel('mandatory'),
+            sortable: false,
+            width: 85,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'exportable',
+            header: TermsUtil.tLabel('exportable'),
+            sortable: false,
+            width: 90,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'rep_field',
+            header: TermsUtil.tLabel('rep_field'),
+            sortable: false,
+            width: 80,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'detail_field',
+            header: TermsUtil.tLabel('detail_field'),
+            sortable: false,
+            width: 80,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'fixed',
+            header: TermsUtil.tLabel('fixed_column'),
+            sortable: false,
+            width: 80,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'thumbnail_field',
+            header: TermsUtil.tLabel('thumbnail_field'),
+            sortable: false,
+            width: 70,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'hidden',
+            header: TermsUtil.tLabel('hidden'),
+            sortable: false,
+            width: 55,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'select',
+            name: 'accumulator',
+            header: TermsUtil.tLabel('accumulator'),
+            sortable: false,
+            width: 70,
+            record: {
+              align: 'center',
+              editable: true,
+              mandatory: false,
+              options: ['', 'sum', 'avg', 'count', 'min', 'max']
+            }
+          },
+          {
+            type: 'select',
+            name: 'align',
+            header: TermsUtil.tLabel('align'),
+            sortable: false,
+            width: 55,
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: false,
+              options: ['', 'left', 'center', 'right']
+            }
+          },
+          {
+            type: 'integer',
+            name: 'width',
+            header: TermsUtil.tLabel('width'),
+            sortable: false,
+            width: 55,
+            record: {
+              editable: true,
+              mandatory: true,
+              align: 'right'
+            }
+          },
+          {
+            type: 'integer',
+            name: 'sort_rank',
+            header: TermsUtil.tLabel('sort_rank'),
+            sortable: false,
+            width: 80,
+            record: {
+              editable: true,
+              mandatory: true,
+              align: 'right'
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'sort_desc',
+            header: TermsUtil.tLabel('reverse_sort'),
+            sortable: false,
+            width: 65,
+            record: {
+              align: 'center',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'string',
+            name: 'format',
+            header: TermsUtil.tLabel('format'),
+            sortable: false,
+            width: 135,
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: false
+            }
+          },
+          {
+            type: 'string',
+            name: 'default_value',
+            header: TermsUtil.tLabel('default_value'),
+            sortable: false,
+            width: 135,
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: false
+            }
+          },
+          {
+            type: 'string',
+            name: 'change_event_handler',
+            header: TermsUtil.tLabel('change-event-handler'),
+            sortable: false,
+            width: 150,
+            record: {
+              align: 'left',
+              mandatory: false,
+              editable: true
+            }
+          },
+          {
+            type: 'parameters',
+            name: 'selector_args',
+            header: TermsUtil.tLabel('selector_args'),
+            sortable: false,
+            width: 150,
+            record: {
+              align: 'left',
+              editable: true,
+              mandatory: false,
+              renderer: (value, column, record, rowIndex, field) => {
+                if (!record.selector_args) {
+                  let guideObject = typeConfigGuides[record.type]
+                  if (guideObject) {
+                    record.selector_args = {
+                      option: JSON.stringify(guideObject, null, 2)
+                    }
+                  } else {
+                    if (jsonConfigTypes.includes(record.type) == false) {
+                      record.selector_args = undefined
+                    }
                   }
                 }
+                return getRenderer('json5')(value, column, record, rowIndex, field)
+              },
+              options: (value, column, record, row, field) => {
+                let { name, help } = { name: TermsUtil.tLabel('selector_args'), help: '' }
+                let spec = [{ label: 'script', name: 'option', type: 'textarea' }]
+                const context = this.columnTabGrist
+                return { name, spec, help, context }
               }
-              return getRenderer('json5')(value, column, record, rowIndex, field)
-            },
-            options: (value, column, record, row, field) => {
-              let { name, help } = { name: TermsUtil.tLabel('selector_args'), help: '' };
-              let spec = [{ label: 'script', name: 'option', type: 'textarea' }];
-              const context = this.columnTabGrist
-              return { name, spec, help, context }
             }
           }
-        }
-      ]
+        ]
+      }
     }
   }
-}