@things-factory/meta-ui 10.1.248 → 10.1.249

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

@@ -0,0 +1,804 @@
+// @ts-nocheck
+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.mutate({
+                    mutation: gql `
+            mutation ($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);
+//# sourceMappingURL=config-entity.js.map