@things-factory/meta-ui 8.0.6 → 9.0.0-beta.12

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

@@ -1,955 +0,0 @@
-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)