@things-factory/meta-ui 8.0.0-beta.8 → 8.0.0

package/client/pages/entity/config-entity.js

@@ -0,0 +1,955 @@
+import '@material/web/icon/icon.js'
+
+import { html } from 'lit'
+import gql from 'graphql-tag'
+
+import { PageView, store } from '@operato/shell'
+import { client, gqlContext } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+
+import { EXPORT } from '@things-factory/export-base'
+import { IMPORT } from '@things-factory/import-base'
+
+import '@things-factory/form-ui'
+import '@things-factory/import-ui'
+
+import { TermsUtil } from './../../utils/terms-util'
+import { ValueUtil } from '../../utils/value-util'
+import { MetaApi } from '../../utils/meta-api'
+
+import './main-menu-selector'
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Shortstop <shortstop@hatiolab.com>
+ * @description 엔티티 정의 화면
+ */
+class ConfigEntity extends p13n(localize(i18next)(PageView)) {
+  /**
+   * @description 프로퍼티 정의
+   ***********************************
+   * @returns {Object} 화면의 프로퍼티 정의
+   */
+  static get properties() {
+    return {
+      searchFields: Array,
+      masterConfig: Object,
+      detailConfig: Object,
+      importConfig: Object,
+      entityId: String,
+      selectedEntity: Object
+    }
+  }
+
+  /**
+   * @description 스타일 정의
+   *********************************
+   * @returns {Object} 화면 스타일 정의
+   */
+  static get styles() {
+    return MetaApi.getBasicMasterDetailGristStyle('left-right')
+  }
+
+  /**
+   * @description 화면 컨텍스트 정보
+   *******************************
+   * @returns {Object} 컨텍스트 정보
+   */
+  get context() {
+    return {
+      title: TermsUtil.tTitle('entity')
+    }
+  }
+
+  /**
+   * @description 검색 폼
+   ***************************
+   * @returns {Object} 검색 폼
+   */
+  get searchForm() {
+    return this.shadowRoot.querySelector('ox-filters-form-base')
+  }
+
+  /**
+   * @description 엔티티 마스터 그리드
+   ********************************
+   * @returns {Object} 그리스트
+   */
+  get masterGrist() {
+    return this.shadowRoot.querySelector('#master-grist')
+  }
+
+  /**
+   * @description 엔티티 컬럼 그리드
+   ********************************
+   * @returns {Object} 그리스트
+   */
+  get detailGrist() {
+    return this.shadowRoot.querySelector('#detail-grist')
+  }
+
+  /*********************************************************************/
+  /*                            조 회                                   */
+  /*********************************************************************/
+
+  /**
+   * @description 엔티티 리스트 조회
+   *******************************************
+   * @param {Object} { page, limit, sorters }
+   * @returns {Array}
+   */
+  async fetchEntities({ page, limit, sorters = [{ name: 'bundle' }, { name: 'name' }] }) {
+    // 선택된 엔티티 ID 초기화
+    this.entityId = null
+    this.selectedEntity = null
+
+    if (this.detailGrist && this.detailGrist.data) {
+      this.detailGrist.data = {}
+    }
+
+    let filters = [...(await this.searchForm.getQueryFilters())]
+    let selectFields = `
+      id
+      bundle
+      name
+      tableName
+      dataProp
+      delStrategy
+      description
+    `
+    return await MetaApi.searchByPagination('entities', filters, sorters, page, limit, selectFields)
+  }
+
+  /**
+   * @description 엔티티 선택시 엔티티 컬럼 조회
+   *******************************************
+   * @param {Object} { page, limit, sorters }
+   * @returns {Array}
+   */
+  async fetchEntityColumns({ page, limit, sorters = [{ name: 'rank' }] }) {
+    if (this.entityId) {
+      let filters = [
+        {
+          name: 'entityId',
+          operator: 'eq',
+          value: this.entityId
+        }
+      ]
+
+      let selectFields = `
+        id
+        name
+        rank
+        description
+        term
+        colType
+        colSize
+        nullable
+        uniqRank
+        searchRank
+        searchOper
+        gridRank
+        gridWidth
+        gridEditor
+        refType
+        refName
+        refUrl
+        defVal
+      `
+      return await MetaApi.searchByPagination('entityColumns', filters, sorters, page, limit, selectFields)
+    }
+  }
+
+  /**
+   * @description 엔티티 컬럼 조회
+   *****************************
+   * @param {Object} record 선택한 엔티티 마스터 레코드
+   */
+  async searchEntityColumns(record) {
+    this.entityId = record.id
+    this.selectedEntity = record
+    await this.detailGrist.fetch()
+  }
+
+  /**
+   * @description 메인 메뉴 선택기 오픈
+   *********************************
+   */
+  async openMainMenuSelectorPopup() {
+    let menuSelector = MetaApi.createCustomElement('main-menu-selector', 'main-menu-selector')
+    menuSelector.selectCallback = this.createMenuTo.bind(this)
+    await MetaApi.openPopupByElement(TermsUtil.tButton('create-menu'), 'large', menuSelector, true)
+  }
+
+  /*********************************************************************/
+  /*                            버튼 트랜잭션                             */
+  /*********************************************************************/
+
+  /**
+   * @description 엔티티 저장 / 업데이트
+   **********************************
+   */
+  async saveMasters() {
+    let patches = MetaApi.patchesForUpdateMultiple(this.masterGrist)
+    if (ValueUtil.isNotEmpty(patches)) {
+      patches.forEach(x => {
+        if (!x.tableName || x.tableName.length == 0) {
+          x.tableName = x.name
+        }
+      })
+      let result = await MetaApi.updateMultiple('updateMultipleEntity', patches)
+      if (result) {
+        this.masterGrist.fetch()
+      }
+    }
+  }
+
+  /**
+   * @description 엔티티 삭제
+   *************************
+   */
+  async deleteMasters() {
+    await MetaApi.deleteListByGristSelected(this.masterGrist, 'deleteEntities')
+  }
+
+  /**
+   * @description 엔티티 컬럼 생성, 업데이트
+   *************************************
+   */
+  async saveEntityColumns() {
+    if (this.entityId) {
+      let patches = MetaApi.patchesForUpdateMultiple(this.detailGrist)
+      if (ValueUtil.isNotEmpty(patches)) {
+        let idx = 0
+        patches.forEach(patch => {
+          idx += 10
+          patch.entity = { id: this.entityId }
+          patch.nullable = patch.nullable === undefined || patch.nullable == null ? false : patch.nullable
+          patch.rank = !patch.rank || patch.rank == 0 ? idx : patch.rank
+          patch.gridRank = patch.gridRank ? patch.gridRank : 0
+          patch.term = patch.term ? patch.term : patch.name
+          patch.colType = !patch.colType ? 'string' : patch.colType
+          patch.colSize = patch.colType == 'string' && !patch.colSize ? 50 : patch.colSize
+        })
+
+        let result = await MetaApi.updateMultiple('updateMultipleEntityColumn', patches)
+        if (result) {
+          this.detailGrist.fetch()
+        }
+      }
+    }
+  }
+
+  /**
+   * @description 엔티티 컬럼 삭제
+   ****************************
+   */
+  async deleteEntityColumns() {
+    await MetaApi.deleteListByGristSelected(this.detailGrist, 'deleteEntityColumns')
+  }
+
+  /**
+   * @description 엔티티 / 서비스 자동 생성
+   ************************************
+   */
+  async createService() {
+    const answer = await MetaApi.showAlertPopup(
+      'button.create-service',
+      'text.are_you_sure',
+      'question',
+      'confirm',
+      'cancel'
+    )
+    if (answer.value) {
+      let ids = MetaApi.getSelectedIdList(this.masterGrist, true)
+      if (ids) {
+        let selectedId = ids[0]
+        const res = await client.query({
+          query: gql`
+            query ($id: String!) {
+              toolCreateService(id: $id)
+            }
+          `,
+          variables: { id: selectedId },
+          context: gqlContext()
+        })
+
+        if (res && res.data && res.data.toolCreateService) {
+          MetaApi.showToast('info', TermsUtil.tText('success to process'))
+        }
+      }
+    }
+  }
+
+  /**
+   * @description 엔티티 기반 메뉴 자동 생성
+   ************************************
+   */
+  async createMenu() {
+    if (this.entityId) {
+      // 메인 메뉴를 선택하는 팝업을 실행하여 어떤 메뉴 하위에 엔티티 메뉴를 생성할 지 결정
+      const answer = await MetaApi.showAlertPopup(
+        'button.create-menu',
+        'text.are_you_sure',
+        'question',
+        'confirm',
+        'cancel'
+      )
+      if (answer.value) {
+        if (MetaApi.getSelectedIdList(this.masterGrist, true)) {
+          await this.openMainMenuSelectorPopup()
+        }
+      }
+    } else {
+      MetaApi.showAlertPopup('text.nothing_selected', 'text.nothing_selected', 'info', 'confirm')
+    }
+  }
+
+  /**
+   * @description mainMenuId에 해당하는 메인 메뉴 하위에 현재 선택된 엔티티의 메뉴 생성
+   ************************************************************************
+   * @param {String} mainMenuId
+   */
+  async createMenuTo(mainMenuId) {
+    const res = await client.query({
+      query: gql`
+        mutation ($id: String!, $parent_menu_id: String!) {
+          toolCreateMenu(id: $id, parent_menu_id: $parent_menu_id)
+        }
+      `,
+      variables: { id: this.entityId, parent_menu_id: mainMenuId },
+      context: gqlContext()
+    })
+
+    if (res && res.data && res.data.toolCreateMenu) {
+      MetaApi.showToast('info', TermsUtil.tText('success to process'))
+      return { success: true }
+    } else {
+      return { success: false }
+    }
+  }
+
+  /**
+   * @description 등록되지 않은 용어 자동 등록
+   **************************************
+   */
+  async createUnregisteredTerms() {
+    try {
+      if (this.entityId) {
+        const terms = this.detailGrist.data.records
+          .filter(record => TermsUtil.tLabel(record.term) === record.term)
+          .map(r => `label.${r.term}`)
+        const bundle = this.selectedEntity.bundle
+
+        if (terms.length) {
+          const response = await client.query({
+            query: gql`
+              query setTranslations($bundle: String!, $terms: [String!]!) {
+                setTranslations(bundle: $bundle, terms: $terms)
+              }
+            `,
+            variables: { bundle, terms }
+          })
+
+          if (!response.errors) {
+            MetaApi.showToast('info', TermsUtil.tText('success to register terms'))
+          }
+        }
+      }
+    } catch (e) {
+      MetaApi.showToast('error', e.message)
+    }
+  }
+
+  /**
+   * @description 엔티티 컬럼 내보내기
+   ********************************
+   */
+  async exportEntityColumns() {
+    let headerSetting = this.detailGrist._config.columns
+      .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+      .map(column => {
+        return column.imex
+      })
+
+    let records = this.detailGrist.data.records
+    let data = records.map(item => {
+      return {
+        id: item.id,
+        ...this.detailGrist._config.columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .reduce((record, column) => {
+            record[column.imex.key] = column.imex.key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    store.dispatch({
+      type: EXPORT,
+      exportable: {
+        extension: 'xlsx',
+        name: `${TermsUtil.tTitle('entity-column')}-${this.selectedEntity.name}`,
+        data: { header: headerSetting, data: data }
+      }
+    })
+  }
+
+  /**
+   * @description 임포트 대상 엑셀 파일 열기 (파일 셀렉트)
+   **************************************
+   */
+  async importXlsxFile() {
+    let _self = this
+    const fileTypes = ['xlsx']
+    const fileUpload = document.createElement('input')
+    fileUpload.setAttribute('type', 'file')
+    fileUpload.setAttribute('accept', fileTypes)
+    fileUpload.hidden = true
+
+    fileUpload.addEventListener('change', event => {
+      //임포트 대상 엑셀 파일 읽기
+      const fileObj = event.currentTarget.files[0]
+      const extension = fileObj.name.split('.').pop()
+      const reader = new FileReader()
+
+      // Ready The Event For When A File Gets Selected
+      reader.onload = function (e) {
+        const data = e.target.result
+        store.dispatch({
+          type: IMPORT,
+          importable: {
+            extension,
+            handler: _self.importEntityColumns.bind(_self)
+          },
+          data
+        })
+      }
+      reader.readAsArrayBuffer(fileObj)
+    })
+
+    document.body.appendChild(fileUpload)
+    fileUpload.click()
+  }
+
+  /**
+   * @description 엔티티 컬럼 엑셀 임포트 처리
+   **************************************
+   */
+  importEntityColumns(records) {
+    let importList = records.header ? records.data : records
+
+    if (importList && importList.length > 0) {
+      importList.forEach(i => {
+        i.__selected__ = true
+      })
+      let cols = this.importConfig.columns.filter(column => !!column.imex)
+      setTimeout(() => {
+        MetaApi.openPopupByElement(
+          TermsUtil.tTitle('import'),
+          'large',
+          html` <import-pop-up
+            .records=${importList}
+            .config=${{
+              rows: importList,
+              columns: [
+                {
+                  type: 'gutter',
+                  gutterName: 'sequence'
+                },
+                ...cols
+              ]
+            }}
+            .importHandler="${this.importHandler.bind(this)}"
+          >
+          </import-pop-up>`
+        )
+      }, 500)
+    }
+  }
+
+  /**
+   * @description 엔티티 컬럼 엑셀 임포트 처리
+   **************************************
+   */
+  async importHandler(patches) {
+    if (!patches || patches.length == 0) {
+      MetaApi.showToast('info', 'text.no_data')
+      history.back()
+    } else {
+      let idx = 0
+      patches.forEach(patch => {
+        idx += 10
+        patch.colSize = ValueUtil.isNotEmpty(patch.colSize)
+          ? ValueUtil.toInteger(patch.colSize)
+          : patch.colType == 'string'
+            ? 50
+            : 0
+        patch.rank = ValueUtil.toInteger(patch.rank, 0)
+        patch.uniqRank = ValueUtil.toInteger(patch.uniqRank, 0)
+        patch.searchRank = ValueUtil.toInteger(patch.searchRank, 0)
+        patch.gridRank = ValueUtil.toInteger(patch.gridRank, 0)
+        patch.gridWidth = ValueUtil.toInteger(patch.gridWidth, 0)
+        patch.entity = { id: this.entityId }
+        patch.nullable = ValueUtil.toBoolean(patch.nullable)
+        patch.term = patch.term ? patch.term : patch.name
+        patch.colType = !patch.colType ? 'string' : patch.colType
+        delete patch['string']
+      })
+
+      let result = await MetaApi.updateMultiple('updateMultipleEntityColumn', patches)
+      if (result) {
+        this.detailGrist.fetch()
+        history.back()
+      }
+    }
+  }
+
+  /**
+   * @description 체크 컬럼
+   ************************
+   */
+  async checkEntityColumns() {
+    if (this.entityId) {
+      let records = this.detailGrist.data.records
+      let lastIdx = records && records.length ? records.length * 10 : 0
+      let idExist = false
+      let domainIdExist = false
+      let createdAtExist = false
+      let updatedAtExist = false
+      let creatorIdExist = false
+      let updaterIdExist = false
+
+      if (records && records.length > 0) {
+        idExist =
+          records.findIndex(i => {
+            return i.name == 'id'
+          }) >= 0
+        domainIdExist =
+          records.findIndex(i => {
+            return i.name == 'domain_id'
+          }) >= 0
+        createdAtExist =
+          records.findIndex(i => {
+            return i.name == 'created_at'
+          }) >= 0
+        updatedAtExist =
+          records.findIndex(i => {
+            return i.name == 'updated_at'
+          }) >= 0
+        creatorIdExist =
+          records.findIndex(i => {
+            return i.name == 'creator_id'
+          }) >= 0
+        updaterIdExist =
+          records.findIndex(i => {
+            return i.name == 'updater_id'
+          }) >= 0
+      }
+
+      let defaultList = []
+      if (!idExist) {
+        lastIdx += 10
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'id',
+          colType: 'string',
+          colSize: 0,
+          nullable: false,
+          term: 'id',
+          rank: lastIdx,
+          cuFlag: '+'
+        })
+      }
+
+      if (!domainIdExist) {
+        lastIdx += 10
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'domain_id',
+          colType: 'string',
+          colSize: 0,
+          nullable: false,
+          term: 'domain',
+          rank: lastIdx,
+          cuFlag: '+'
+        })
+      }
+
+      if (!createdAtExist) {
+        lastIdx += 10
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'created_at',
+          colType: 'timestamp',
+          colSize: 0,
+          nullable: true,
+          term: 'created_at',
+          rank: lastIdx,
+          gridRank: 0,
+          gridWidth: 140,
+          cuFlag: '+'
+        })
+      }
+
+      if (!updatedAtExist) {
+        lastIdx += 10
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'updated_at',
+          colType: 'timestamp',
+          colSize: 0,
+          nullable: true,
+          term: 'updated_at',
+          rank: lastIdx,
+          gridRank: lastIdx,
+          gridWidth: 140,
+          cuFlag: '+'
+        })
+      }
+
+      if (!creatorIdExist) {
+        lastIdx += 10
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'creator_id',
+          colType: 'string',
+          colSize: 40,
+          nullable: true,
+          term: 'creator',
+          rank: lastIdx,
+          gridRank: 0,
+          gridWidth: 100,
+          cuFlag: '+'
+        })
+      }
+
+      if (!updaterIdExist) {
+        lastIdx += 10
+        defaultList.push({
+          entity: { id: this.entityId },
+          name: 'updater_id',
+          colType: 'string',
+          colSize: 40,
+          nullable: true,
+          term: 'updater',
+          rank: lastIdx,
+          gridRank: 0,
+          gridWidth: 100,
+          cuFlag: '+'
+        })
+      }
+
+      let result = await MetaApi.updateMultiple('updateMultipleEntityColumn', defaultList)
+      if (result) {
+        this.detailGrist.fetch()
+      }
+    }
+  }
+
+  /*********************************************************************/
+  /*                            라이프 사이클                             */
+  /*********************************************************************/
+
+  /**
+   * @description 라이프 사이클 - 페이지 초기화
+   ***************************************
+   */
+  async pageInitialized(lifecycle) {
+    // 조회 필드
+    this.searchFields = [
+      // name, type, label, operator, optionValues
+      MetaApi.getGristSearchColumnConfig('name', 'string', 'name', 'i_like'),
+      MetaApi.getGristSearchColumnConfig('table_name', 'string', 'table_name', 'i_like'),
+      // name, type, label, operator, codeName
+      await MetaApi.getGristSearchCodeColumnConfig('bundle', 'select', 'bundle', 'eq', 'BUNDLE')
+    ]
+
+    // 엔티티 마스터 그리드 설정
+    this.masterConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: { pages: [1000] },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(true, false),
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'edit',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.searchEntityColumns(record)
+              }
+            }
+          }
+        },
+        // type, name, align, editable, sortable, width
+        MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 175),
+        MetaApi.getGristColumnConfig2('string', 'tableName', 'table_name', 'left', true, false, 180),
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig('bundle', 'bundle', 'left', false, 100, true, 'BUNDLE'),
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'dataProp',
+          'entity_manage_hist',
+          'left',
+          false,
+          90,
+          true,
+          'ENTITY_HIST_TYPE'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'delStrategy',
+          'entity_del_strategy',
+          'left',
+          false,
+          90,
+          true,
+          'ENTITY_DEL_STRATEGY'
+        ),
+        // type, name, align, editable, sortable, width
+        MetaApi.getGristColumnConfig('string', 'description', 'left', true, false, 250)
+      ]
+    }
+
+    // 엔티티 컬럼 그리드 설정
+    this.detailConfig = {
+      rows: MetaApi.getGristSelectableConfig(true),
+      pagination: { pages: [1000] },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(true, true),
+        MetaApi.getGristColumnConfig('integer', 'rank', 'center', true, false, 50),
+        MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 135),
+        {
+          type: 'string',
+          name: 'term',
+          header: TermsUtil.tLabel('term'),
+          sortable: false,
+          width: 135,
+          record: {
+            editable: true,
+            align: 'left',
+            renderer: (value, column, record, rowIndex, field) => {
+              return record.term ? TermsUtil.tLabel(record.term, null, record.term) : ''
+            }
+          }
+        },
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'colType',
+          'col_type',
+          'left',
+          false,
+          75,
+          true,
+          'ENTITY_COLUMN_TYPES'
+        ),
+        // type, name, displayName, align, editable, sortable, width
+        MetaApi.getGristColumnConfig2('integer', 'colSize', 'size', 'right', true, false, 60),
+        MetaApi.getGristColumnConfig2('boolean', 'nullable', 'nullable', 'center', true, false, 70),
+        MetaApi.getGristColumnConfig2('integer', 'uniqRank', 'uniq_rank', 'right', true, false, 70),
+        MetaApi.getGristColumnConfig2('string', 'description', 'description', 'left', true, false, 135),
+        MetaApi.getGristColumnConfig2('integer', 'searchRank', 'search_rank', 'right', true, false, 70),
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'searchOper',
+          'search_oper',
+          'left',
+          false,
+          85,
+          true,
+          'FILTER_OPERATORS'
+        ),
+        MetaApi.getGristColumnConfig2('integer', 'gridRank', 'grid_rank', 'right', true, false, 80),
+        MetaApi.getGristColumnConfig2('integer', 'gridWidth', 'grid_width', 'right', true, false, 75),
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'gridEditor',
+          'grid_editor',
+          'left',
+          false,
+          90,
+          true,
+          'ENTITY_GRIST_COLUMN_TYPES'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'refType',
+          'ref_type',
+          'left',
+          false,
+          85,
+          true,
+          'COLUMN_REF_TYPE'
+        ),
+        // type, name, displayName, align, editable, sortable, width
+        MetaApi.getGristColumnConfig2('string', 'refName', 'ref_name', 'left', true, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'defVal', 'id_rule', 'left', true, false, 100)
+      ]
+    }
+
+    this.importConfig = {
+      rows: MetaApi.getGristSelectableConfig(true),
+      pagination: { pages: [1000] },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(true, true),
+        MetaApi.getGristColumnConfig('integer', 'rank', 'center', true, false, 50),
+        MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 115),
+        {
+          type: 'string',
+          name: 'term',
+          header: TermsUtil.tLabel('term'),
+          sortable: false,
+          width: 135,
+          record: {
+            editable: false,
+            align: 'left',
+            renderer: (value, column, record, rowIndex, field) => {
+              return record.term ? TermsUtil.tLabel(record.term, null, record.term) : ''
+            }
+          }
+        },
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'colType',
+          'col_type',
+          'left',
+          false,
+          75,
+          true,
+          'ENTITY_COLUMN_TYPES'
+        ),
+        // type, name, displayName, align, editable, sortable, width
+        MetaApi.getGristColumnConfig2('integer', 'colSize', 'size', 'right', true, false, 60),
+        MetaApi.getGristColumnConfig2('boolean', 'nullable', 'nullable', 'center', true, false, 70),
+        MetaApi.getGristColumnConfig2('integer', 'uniqRank', 'uniq_rank', 'right', true, false, 70),
+        MetaApi.getGristColumnConfig2('string', 'description', 'description', 'left', true, false, 135),
+        MetaApi.getGristColumnConfig2('integer', 'searchRank', 'search_rank', 'right', true, false, 70),
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'string',
+          'search_oper',
+          'left',
+          false,
+          85,
+          true,
+          'FILTER_OPERATORS'
+        ),
+        MetaApi.getGristColumnConfig2('integer', 'gridRank', 'grid_rank', 'right', true, false, 80),
+        MetaApi.getGristColumnConfig2('integer', 'gridWidth', 'grid_width', 'right', true, false, 75),
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'gridEditor',
+          'grid_editor',
+          'left',
+          false,
+          90,
+          true,
+          'GRIST_COLUMN_TYPES'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'refType',
+          'ref_type',
+          'left',
+          false,
+          85,
+          true,
+          'COLUMN_REF_TYPE'
+        ),
+        // type, name, displayName, align, editable, sortable, width
+        MetaApi.getGristColumnConfig2('string', 'refName', 'ref_name', 'left', true, false, 100)
+      ]
+    }
+  }
+
+  /**
+   * @description 라이프 사이클 - 렌더링
+   *********************************
+   * @returns {HTML} HTML
+   */
+  render() {
+    return html`
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form-base
+            .filters=${this.searchFields || []}
+            @filters-change=${e => {
+              this.masterGrist?.fetch()
+            }}
+          ></ox-filters-form-base>
+        </div>
+      </div>
+
+      <div class="container" style="grid-template-columns: 37% 63%">
+        <div class="container_detail">
+          <h2><md-icon>list_alt</md-icon>${TermsUtil.tTitle('entity')}</h2>
+          <ox-grist
+            id="master-grist"
+            .config=${this.masterConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
+            .personalConfigProvider=${this.getPagePreferenceProvider('master-grist')}
+            .fetchHandler=${this.fetchEntities.bind(this)}
+            auto-fetch
+          >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+          </ox-grist>
+
+          <div class="button-container">
+            <button @click=${e => this.createService()}>
+              <md-icon>add_box</md-icon>${TermsUtil.tButton('create-service')}
+            </button>
+            <button @click=${e => this.createMenu()}>
+              <md-icon>menu_open</md-icon>${TermsUtil.tButton('create-menu')}
+            </button>
+            <button @click=${e => this.saveMasters()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
+            <button danger @click=${e => this.deleteMasters()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
+          </div>
+        </div>
+
+        <div class="container_detail">
+          <h2><md-icon>list_alt</md-icon>${TermsUtil.tTitle('entity-column')}</h2>
+
+          <ox-grist
+            id="detail-grist"
+            .config=${this.detailConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
+            explcit-fetch
+            .fetchHandler=${this.fetchEntityColumns.bind(this)}
+            .personalConfigProvider=${this.getPagePreferenceProvider('detail-grist')}
+          >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+          </ox-grist>
+
+          <div class="button-container">
+            <button @click=${e => this.exportEntityColumns()}>
+              <md-icon>cloud_download</md-icon>${TermsUtil.tButton('export')}
+            </button>
+            <button @click=${e => this.importXlsxFile()}>
+              <md-icon>cloud_upload</md-icon>${TermsUtil.tButton('import')}
+            </button>
+            <button @click=${e => this.checkEntityColumns()}>
+              <md-icon>fact_check</md-icon>${TermsUtil.tButton('check-columns')}
+            </button>
+            <button @click=${e => this.createUnregisteredTerms()}>
+              <md-icon>abc</md-icon>${TermsUtil.tButton('register-terms')}
+            </button>
+            <button @click=${e => this.saveEntityColumns()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
+            <button danger @click=${e => this.deleteEntityColumns()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
+          </div>
+        </div>
+      </div>
+    `
+  }
+}
+
+customElements.define('config-entity', ConfigEntity)