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

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

@@ -1,4 +1,649 @@
-import{html}from"lit-element";import"@things-factory/component-ui/client/quick-find/quick-find-tabs";import"@things-factory/form-ui";import{getRenderer}from"@operato/data-grist";import{MetaApi}from"@things-factory/meta-ui/client/utils/meta-api";import{TermsUtil}from"@things-factory/meta-ui/client/utils/terms-util";const objectTypes=["object","resource-object","resource-code-selector","meta-object-selector","meta-code-selector"],jsonConfigTypes=["object","select","resource-object","resource-code-selector","meta-object-selector","meta-code-selector"],typeConfigGuides={object:{queryName:"",referenceField:"Object Mapping Entity reference Field Name",nameField:"",descriptionField:"",select:[{name:"",hidden:!0},{name:"",hidden:!1}],list:{fields:["",""]}},"resource-object":{queryName:"GraphQL query Name",referenceField:"Object Mapping Entity reference Field Name",nameField:"",descriptionField:"",select:[{name:"",hidden:!0},{name:"",hidden:!1}],list:{fields:["",""]}},"resource-code-selector":{queryName:"graphQL Query",selectorName:"popup Title",codeField:"code Field",dispField:"disp Field",filterFields:'["code","display"] or [{"name":"code1","operator":"eq"},{"name":"display","operator":"eq"}]',select:[{name:"",hidden:!0},{name:"",hidden:!1}],filters:'filter values [{"name": "parentId", "operator": "eq", "value": "506134f8-8655-47ee-afdc-248b0de2f31c"}]',sorters:'sort field [{"name": "boxTypeCd", "desc": false}]'},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"}]',args:{queryName:"entity type graphQL Query",codeField:"entity type code Field",dispField:"entity type disp Field",filters:'entity type filter values [{"name": "parentId", "operator": "eq", "value": "506134f8-8655-47ee-afdc-248b0de2f31c"}]',sorters:'entity type sort field [{"name": "boxTypeCd", "desc": false}]'}},"meta-object-selector":{case_custom:{queryName:"GraphQL query Name",selectorName:"popup Title",referenceField:"Object Mapping Entity reference Field Name",nameField:"",filterFields:'["code","display"] or [{"name":"code1","operator":"eq"},{"name":"display","operator":"eq"}]',select:[{name:"",hidden:!0},{name:"",hidden:!1}],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"}},case_menu:{menu:"route_name",referenceField:"Object Mapping Entity reference Field Name",fieldMap:{sourceField1:"targetField1",sourceField2:"targetField2",sourceField3:"targetField3"}}},"meta-code-selector":{case_custom:{queryName:"graphQL Query",selectorName:"popup Title",codeField:"code Field",dispField:"disp Field",filterFields:'["code","display"] or [{"name":"code1","operator":"eq"},{"name":"display","operator":"eq"}]',select:[{name:"",hidden:!0},{name:"",hidden:!1}],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"}},case_menu:{menu:"route_name",fieldMap:{sourceField1:"targetField1",sourceField2:"targetField2",sourceField3:"targetField3"}}}};export const ColumnConfigTabMixin=e=>class extends e{setColumnConfigTabValues(e){e?.forEach(((e,t)=>{let a=t+1;if(e.rank=10*a,e.id=a,objectTypes.includes(e.type)){if(e.object_opt&&!e.selector_args){let t=JSON.stringify(e.object_opt,null,2);e.selector_args={option:t}}}else if("select"==e.type&&e.select_opt&&!e.selector_args){let t=JSON.stringify(e.select_opt,null,2);e.selector_args={option:t}}})),this.viewColumnData=e,this.columnTabGrist?.fetch()}getColumnConfigTabValues(){let e={grid_column:[],grid:{list:{fields:[],details:[],thumbnail:""},option:{sorters:[]}}},t=this.getElementValueById("column-tab-grid");return t&&(this.sortRecordByRank(t)?.forEach((t=>{let{name:a,header:r,type:l="string",editable:i=!1,sortable:o=!1,mandatory:d=!1,exportable:n=!1,rep_field:s=!1,detail_field:c=!1,thumbnail_field:m=!1,hidden:p=!1,accumulator:b,align:u="left",width:h=0,format:g,change_event_handler:y,default_value:f,selector_args:_,fixed:F=!1}=t;if(!a)return;let T={name:a,header:r||a,type:l,editable:i,sortable:o,mandatory:d,exportable:n,hidden:p,align:u,width:h,format:g,change_event_handler:y,default_value:f,fixed:F};b&&(T.accumulator=b),_&&"string"==typeof _&&(_=JSON.parse(_)),jsonConfigTypes.includes(l)&&_&&_.option&&(T["select"==l?"select_opt":"object_opt"]=JSON.parse(_.option)),e.grid_column.push(T),s&&e.grid.list.fields.push(a),c&&e.grid.list.details.push(a),m&&(e.grid.list.thumbnail=a)})),this.sortRecordByField(t.filter((e=>e.sort_rank&&e.sort_rank>0)),"sort_rank").forEach((t=>{let{name:a,sort_desc:r=!1}=t;a&&e.grid.option.sorters.push({name:a,desc:r})}))),e}renderColumnConfigTab(){return html`
+import { html } from 'lit-element'
+
+import '@things-factory/component-ui/client/quick-find/quick-find-tabs'
+import '@things-factory/form-ui'
+
+import { getRenderer } from '@operato/data-grist'
+
+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 typeConfigGuides = {
+  'object' : {
+    queryName: '',
+    referenceField: 'Object Mapping Entity reference Field Name',
+    nameField: '',
+    descriptionField: '',
+    select: [
+      { name: '', hidden: true },
+      { name: '', hidden: false }
+    ],
+    list: {
+      fields: ['', '']
+    }
+  },
+  'resource-object':{
+    queryName: 'GraphQL query Name',
+    referenceField: 'Object Mapping Entity reference Field Name',
+    nameField: '',
+    descriptionField: '',
+    select: [
+      { name: '', hidden: true },
+      { name: '', hidden: false }
+    ],
+    list: {
+      fields: ['', '']
+    }
+  },
+  'resource-code-selector': {
+    queryName: 'graphQL Query',
+    selectorName: 'popup Title',
+    codeField: 'code Field',
+    dispField: 'disp Field',
+    filterFields: '["code","display"] or [{"name":"code1","operator":"eq"},{"name":"display","operator":"eq"}]',
+    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}]'
+  },
+  '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"}]',
+    args: {
+      queryName: 'entity type graphQL Query',
+      codeField: 'entity type code Field',
+      dispField: 'entity type disp Field',
+      filters: 'entity type filter values [{"name": "parentId", "operator": "eq", "value": "506134f8-8655-47ee-afdc-248b0de2f31c"}]',
+      sorters: 'entity type sort field [{"name": "boxTypeCd", "desc": false}]'
+    }
+  },
+  'meta-object-selector': {
+    case_custom: {
+      queryName: 'GraphQL query Name',
+      selectorName: 'popup Title',
+      referenceField: 'Object Mapping Entity reference Field Name',
+      nameField: '',
+      filterFields: '["code","display"] or [{"name":"code1","operator":"eq"},{"name":"display","operator":"eq"}]',
+      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'
+      }
+    },
+    case_menu: {
+      menu: 'route_name',
+      referenceField: 'Object Mapping Entity reference Field Name',
+      fieldMap: {
+        sourceField1 : 'targetField1',
+        sourceField2 : 'targetField2',
+        sourceField3 : 'targetField3'
+      }
+    }
+  },
+  'meta-code-selector': {
+    case_custom: {
+      queryName: 'graphQL Query',
+      selectorName: 'popup Title',
+      codeField: 'code Field',
+      dispField: 'disp Field',
+      filterFields: '["code","display"] or [{"name":"code1","operator":"eq"},{"name":"display","operator":"eq"}]',
+      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'
+      }
+    },
+    case_menu: {
+      menu: 'route_name',
+      fieldMap: {
+        sourceField1 : 'targetField1',
+        sourceField2 : 'targetField2',
+        sourceField3 : 'targetField3'
+      }
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @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 };
+        }
+
+      } 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();
+  }
+
+  /**
+   * @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');
+
+    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;
+
+        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 (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);
+        }
+
+        retObject.grid_column.push(columnObj);
+
+        // 대표 필드 여부
+        if (rep_field) {
+          retObject.grid.list.fields.push(name);
+        }
+
+        // 상세 필드 여부
+        if (detail_field) {
+          retObject.grid.list.details.push(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;
+
+        retObject.grid.option.sorters.push({
+          name: name,
+          desc: sort_desc
+        })
+      })
+    }
+
+    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)}>
-      </ox-grist>`}get columnTabGrist(){return this.shadowRoot.querySelector("#column-tab-grid")}async fetchColumnTabHandler(){return{total:0,records:this.viewColumnData||[]}}async setColumnConfigTabConfig(){let e=await MetaApi.getCodeSelectorData("GRIST_COLUMN_TYPES");this.columnTabGridConfig={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:(e,t,a,r,l)=>{r.id&&this.deleteRow(this.columnTabGrist,r)}}},{type:"integer",name:"rank",header:TermsUtil.tLabel("rank"),sortable:!1,width:50,record:{align:"right",editable:!0,mandatory:!0}},{type:"string",name:"id",hidden:!0},{type:"string",name:"name",header:TermsUtil.tLabel("name"),sortable:!1,width:135,record:{align:"left",editable:!0,mandatory:!0}},{type:"string",name:"header",header:TermsUtil.tLabel("header"),sortable:!1,width:135,record:{align:"left",editable:!0,mandatory:!0}},{type:"string",name:"display",header:TermsUtil.tLabel("display"),sortable:!1,width:135,record:{align:"left",editable:!1,mandatory:!1,renderer:(e,t,a,r,l)=>a&&a.header?TermsUtil.tLabel(a.header):""}},{type:"select",name:"type",header:TermsUtil.tLabel("type"),sortable:!1,width:100,record:{align:"left",editable:!0,mandatory:!0,options:e}},{type:"boolean",name:"editable",header:TermsUtil.tLabel("editable"),sortable:!1,width:80,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"sortable",header:TermsUtil.tLabel("sortable"),sortable:!1,width:80,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"mandatory",header:TermsUtil.tLabel("mandatory"),sortable:!1,width:85,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"exportable",header:TermsUtil.tLabel("exportable"),sortable:!1,width:90,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"rep_field",header:TermsUtil.tLabel("rep_field"),sortable:!1,width:80,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"detail_field",header:TermsUtil.tLabel("detail_field"),sortable:!1,width:80,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"fixed",header:TermsUtil.tLabel("fixed_column"),sortable:!1,width:80,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"thumbnail_field",header:TermsUtil.tLabel("thumbnail_field"),sortable:!1,width:70,record:{align:"center",mandatory:!1,editable:!0}},{type:"boolean",name:"hidden",header:TermsUtil.tLabel("hidden"),sortable:!1,width:55,record:{align:"center",mandatory:!1,editable:!0}},{type:"select",name:"accumulator",header:TermsUtil.tLabel("accumulator"),sortable:!1,width:70,record:{align:"center",editable:!0,mandatory:!1,options:["","sum","avg","count","min","max"]}},{type:"select",name:"align",header:TermsUtil.tLabel("align"),sortable:!1,width:55,record:{align:"left",editable:!0,mandatory:!1,options:["","left","center","right"]}},{type:"integer",name:"width",header:TermsUtil.tLabel("width"),sortable:!1,width:55,record:{editable:!0,mandatory:!0,align:"right"}},{type:"integer",name:"sort_rank",header:TermsUtil.tLabel("sort_rank"),sortable:!1,width:80,record:{editable:!0,mandatory:!0,align:"right"}},{type:"boolean",name:"sort_desc",header:TermsUtil.tLabel("reverse_sort"),sortable:!1,width:65,record:{align:"center",mandatory:!1,editable:!0}},{type:"string",name:"format",header:TermsUtil.tLabel("format"),sortable:!1,width:135,record:{align:"left",editable:!0,mandatory:!1}},{type:"string",name:"default_value",header:TermsUtil.tLabel("default_value"),sortable:!1,width:135,record:{align:"left",editable:!0,mandatory:!1}},{type:"string",name:"change_event_handler",header:TermsUtil.tLabel("change-event-handler"),sortable:!1,width:150,record:{align:"left",mandatory:!1,editable:!0}},{type:"parameters",name:"selector_args",header:TermsUtil.tLabel("selector_args"),sortable:!1,width:150,record:{align:"left",editable:!0,mandatory:!1,renderer:(e,t,a,r,l)=>{if(!a.selector_args){let e=typeConfigGuides[a.type];e?a.selector_args={option:JSON.stringify(e,null,2)}:0==jsonConfigTypes.includes(a.type)&&(a.selector_args=void 0)}return getRenderer("json5")(e,t,a,r,l)},options:(e,t,a,r,l)=>{let{name:i,help:o}={name:TermsUtil.tLabel("selector_args"),help:""};return{name:i,spec:[{label:"script",name:"option",type:"textarea"}],help:o,context:this.columnTabGrist}}}}]}}};
+      </ox-grist>`
+  }
+
+  /**
+   * @description 컬럼 탭 엘리먼트 추출
+   *********************************
+   * @returns {HTML}
+   */
+  get columnTabGrist() {
+    return this.shadowRoot.querySelector('#column-tab-grid')
+  }
+
+  /**
+   * @description 데이터 조회 결과
+   *****************************
+   * @returns {Object}
+   */
+  async fetchColumnTabHandler() {
+    return {
+      total: 0,
+      records: this.viewColumnData || []
+    }
+  }
+
+  /**
+   * @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);
+              }
+            }
+          },
+        },
+        {
+          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: '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 }
+            }
+          }
+        }
+      ]
+    }
+  }
+}