@things-factory/meta-ui 8.0.0 → 9.0.0-beta.3

package/client/mixin/meta-grist-tab-mixin.js

@@ -1,335 +0,0 @@
-import { MetaApi } from '../utils/meta-api'
-import { MetaUiUtil } from '../utils/meta-ui-util'
-import { ValueUtil } from '../utils/value-util'
-import { TermsUtil } from '../utils/terms-util'
-
-import { MetaButtonMixin } from './meta-button-mixin'
-
-/**
- * @license
- * Copyright © HatioLab Inc. All rights reserved.
- * @author Shortstop shortstop@hatiolab.com
- * @description 메뉴 메타 정보를 기반으로 그리드 탭 구성
- */
-export const MetaGristTabMixin = baseElement =>
-  class extends MetaButtonMixin(baseElement) {
-    /**
-     * @description 스타일 정의
-     **************************
-     * @returns {Array} 스타일
-     */
-    static get styles() {
-      return MetaApi.getBasicGristTabStyles()
-    }
-
-    /**
-     * @description 프로퍼티 정의
-     ****************************
-     * @returns {Object} 프로퍼티
-     */
-    static get properties() {
-      return {
-        /**
-         * @description 그리드 구성 정보
-         *****************************
-         * @type {Object}
-         */
-        gridConfig: Object,
-        /**
-         * @description 그리드 컬럼 구성 정보
-         *********************************
-         * @type {Array}
-         */
-        gridColumnConfig: Array,
-        /**
-         * @description 검색 폼 구성 정보
-         *******************************
-         * @type {Array}
-         */
-        searchConfig: Array,
-        /**
-         * @description 화면에서 사용되는 서치 폼 : grist, filter, not
-         *********************************************************
-         * @type {String}
-         */
-        searchFormElement: String,
-        /**
-         * @description 메뉴 메타 정보로 부터 추출한 후 그리스트를 위해 설정 정보 구성
-         *****************************************************************
-         * @type {Object}
-         */
-        gristConfigSet: Object,
-        /**
-         * @description 필터 폼 사용 여부
-         *****************************
-         * @type {Boolean}
-         */
-        useFilterForm: Boolean,
-        /**
-         * @description 모바일 기기에서 그리드 모드 : GRID, LIST, CARD
-         *********************************************************
-         * @type {String}
-         */
-        gridMobileMode: String,
-        /**
-         * @description 데스크탑에서 그리드 모드 : GRID, LIST, CARD
-         ******************************************************
-         * @type {String}
-         */
-        gridDeskMode: String,
-        /**
-         * @description 그리드 뷰 모드 : GRID, LIST, CARD
-         **********************************************
-         * @type {Array}
-         */
-        gridViewOptions: Array,
-        /**
-         * @description 현재 그리드 뷰 모드 : GRID, LIST, CARD
-         ***************************************************
-         * @type {String}
-         */
-        gridMode: String,
-        /**
-         * @description Infinity Page 사용 여부
-         **************************************
-         * @type {Boolean}
-         */
-        infinityPage: Boolean,
-        /**
-         * @description 그리스트 엘리먼트 ID
-         ***************************
-         * @type {String}
-         */
-        gristId: String,
-        /**
-         * @description 필터 폼 엘리먼트 ID
-         ***************************
-         * @type {String}
-         */
-        filterFormId: String
-      }
-    }
-
-    /**
-     * @description 그리스트
-     ***********************
-     * @returns {HTMLElement}
-     */
-    get grist() {
-      return this.renderRoot.querySelector(this.gristId)
-    }
-
-    /**
-     * @description 필터 폼
-     ***********************
-     * @returns {HTMLElement}
-     */
-    get filterForm() {
-      return this.shadowRoot?.querySelector(this.filterFormId)
-    }
-
-    /**
-     * @description 디테일 Element
-     *****************************
-     * @returns {HTMLElement}
-     */
-    get detailElement() {
-      return this.shadowRoot.querySelector('#detail')
-    }
-
-    /**
-     * @description 컨텍스트
-     ***********************
-     * @returns {HTMLElement}
-     */
-    get context() {
-      let ctx = MetaUiUtil.getContextObject(this)
-
-      if (ctx.actions) delete ctx.actions
-      if (ctx.exportable) delete ctx.exportable
-      if (ctx.importable) delete ctx.importable
-      return ctx
-    }
-
-    /******************************************************
-     *                      LifeCycle
-     ******************************************************/
-
-    /**
-     * @override connectedCallback
-     ***************************
-     */
-    async connectedCallback() {
-      // 그리스트, 필터 폼 ID 설정
-      this.gristId = 'ox-grist'
-      this.filterFormId = 'ox-filters-form-base'
-
-      // 메뉴 메타 정보 조회 및 기본 파싱
-      await this.getAndParseMenuMeta()
-
-      if (this.isElement) {
-        await this.parseGristConfigs()
-      }
-
-      if (this.activityDataSet) {
-        this.dataSet = (this.activityDataSet || {}).main
-      }
-
-      if (super.connectedCallback) {
-        await super.connectedCallback()
-      }
-    }
-
-    /**
-     * @override pageUpdated
-     ***************************
-     * @param {Object} changes
-     * @param {Object} lifecycle
-     * @param {Object} before
-     */
-    async pageUpdated(changes, lifecycle, before) {
-      super.pageUpdated(changes, lifecycle, before)
-
-      if (this.isPage && before.active == false) {
-        // TODO 탭이 다른 탭으로 이동하는 경우에 현재 탭의 데이터에 dirty인 것이 있는지 체크해서 있다면 메시지 출력!!!
-        console.log('page updated!!!!')
-      }
-    }
-
-    async firstUpdated() {
-      if (super.firstUpdated) {
-        await super.firstUpdated()
-      }
-    }
-
-    async pageInitialized() {
-      if (this.isPage) {
-        await this.parseGristConfigs()
-      }
-
-      if (super.pageInitialized) {
-        await super.pageInitialized()
-      }
-    }
-
-    render() {
-      return MetaApi.getGristTabHtml(this)
-    }
-
-    /**
-     * @descrtiption 메뉴 메타에서 기본 그리드 정보 파싱 처리
-     ************************************************
-     * @param {Object} menuMeta 메뉴 메타 정보
-     */
-    parseBasicGridConfigs(menuMeta) {
-      this.gridConfig = menuMeta.grid
-      this.gridColumnConfig = menuMeta.grid_column
-      this.searchConfig = menuMeta.search
-      this.gridEmphasized = menuMeta.gridEmphasized
-    }
-
-    /**
-     * @descrtiption 그리스트 구성 정보 파싱 처리
-     ***************************************
-     */
-    async parseGristConfigs() {
-      this.gristConfigSet = await MetaApi.parseGridConfigSet(this)
-      this.useMasterFilterForm = this.useFilterForm === true ? true : false
-      this.useFilterForm = false
-      this.searchFieldValues = []
-      this.searchFields = this.gristConfigSet.columns
-        .filter(x => x.filter)
-        .map(x => {
-          let searchField = {
-            name: x.name,
-            type: x.filter.operator === 'search' ? 'search' : x.type,
-            label: x.header,
-            operator: x.filter.operator ? x.filter.operator : 'eq'
-          }
-
-          if (x.filter.options) {
-            searchField.options = x.filter.options
-          }
-
-          if (x.record.options) {
-            searchField.options = x.record.options
-          }
-
-          if (x.filter.value) {
-            this.searchFieldValues.push({
-              name: searchField.name,
-              operator: searchField.operator,
-              value: x.filter.value
-            })
-          }
-
-          delete x.filter
-          return searchField
-        })
-    }
-
-    /********************************************************************
-     *                          C R U D Functions
-     ********************************************************************/
-
-    async fetch() {
-      await this.grist.fetch()
-    }
-
-    async beforeFetch({ page = 0, limit = 0, sortings = [], filters = [] }) {
-      let detailContainer = this.renderRoot.querySelector('meta-tab-element')
-      await detailContainer.clear()
-
-      return true
-    }
-
-    async save() {
-      let patches = MetaApi.patchesForUpdateMultiple(this.grist)
-      let result = ValueUtil.isNotEmpty(patches) ? await this.updateMultiple(patches) : false
-      if (result) {
-        this.fetch()
-      }
-    }
-
-    async find() {
-      let ids = MetaApi.getSelectedIdList(this.grist, true)
-      return ValueUtil.isNotEmpty(ids) ? await this.findOne(ids[0]) : {}
-    }
-
-    async delete() {
-      let ids = MetaApi.getSelectedIdList(this.grist, true)
-      let result = ValueUtil.isNotEmpty(ids) ? await this.deleteByIds(ids) : false
-      if (result) {
-        this.fetch()
-      }
-    }
-
-    async export() {
-      let exportTitle = TermsUtil.tTitle(ValueUtil.getParams(this.menuInfo, 'title'))
-      return await MetaApi.exportableData(this.isElement, exportTitle, this.grist)
-    }
-
-    async import() {
-      // TODO
-    }
-
-    getData() {
-      let records = this.grist.___data.records
-      records = JSON.parse(JSON.stringify(records))
-
-      records.forEach(record => {
-        let keys = Object.keys(record)
-        keys.forEach(x => {
-          if (x.startsWith('__')) {
-            delete record[x]
-          }
-        })
-      })
-
-      let tabElement = this.renderRoot.querySelector('meta-tab-element')
-      return {
-        main: records,
-        detail: tabElement.getData()
-      }
-    }
-  }

package/client/mixin/meta-main-tab-mixin.js

@@ -1,267 +0,0 @@
-import { MetaApi } from '../utils/meta-api'
-import { MetaUiUtil } from '../utils/meta-ui-util'
-
-import { MetaButtonMixin } from './meta-button-mixin'
-
-/**
- * @license
- * Copyright © HatioLab Inc. All rights reserved.
- * @author Shortstop shortstop@hatiolab.com
- * @description 메뉴 메타 정보를 기반으로 메인 탭 화면을 구성
- */
-export const MetaMainTabMixin = baseElement =>
-  class extends MetaButtonMixin(baseElement) {
-    /**
-     * @description 스타일 정의
-     **************************
-     * @returns {Array} 스타일
-     */
-    static get styles() {
-      return MetaApi.getBasicMainTabStyles()
-    }
-
-    /**
-     * @description 프로퍼티 정의
-     ***************************
-     * @returns {Object} 프로퍼티
-     */
-    static get properties() {
-      return {
-        /**
-         * @description 그리드 구성 정보
-         *****************************
-         * @type {Object}
-         */
-        gridConfig: Object,
-        /**
-         * @description 그리드 컬럼 구성 정보
-         *********************************
-         * @type {Array}
-         */
-        gridColumnConfig: Array,
-        /**
-         * @description 검색 폼 구성 정보
-         *******************************
-         * @type {Array}
-         */
-        searchConfig: Array,
-        /**
-         * @description 화면에서 사용되는 서치 폼 : grist, filter, not
-         *********************************************************
-         * @type {String}
-         */
-        searchFormElement: String,
-        /**
-         * @description 메뉴 메타 정보로 부터 추출한 후 그리스트를 위해 설정 정보 구성
-         *****************************************************************
-         * @type {Object}
-         */
-        gristConfigSet: Object,
-        /**
-         * @description 필터 폼 사용 여부
-         *****************************
-         * @type {Boolean}
-         */
-        useFilterForm: Boolean,
-        /**
-         * @description 모바일 기기에서 그리드 모드 : GRID, LIST, CARD
-         *********************************************************
-         * @type {String}
-         */
-        gridMobileMode: String,
-        /**
-         * @description 데스크탑에서 그리드 모드 : GRID, LIST, CARD
-         ******************************************************
-         * @type {String}
-         */
-        gridDeskMode: String,
-        /**
-         * @description 그리드 뷰 모드 : GRID, LIST, CARD
-         **********************************************
-         * @type {Array}
-         */
-        gridViewOptions: Array,
-        /**
-         * @description 현재 그리드 뷰 모드 : GRID, LIST, CARD
-         ***************************************************
-         * @type {String}
-         */
-        gridMode: String,
-        /**
-         * @description Infinity Page 사용 여부
-         **************************************
-         * @type {Boolean}
-         */
-        infinityPage: Boolean,
-        /**
-         * @description 그리스트 엘리먼트 ID
-         ***************************
-         * @type {String}
-         */
-        gristId: String,
-        /**
-         * @description 필터 폼 엘리먼트 ID
-         ***************************
-         * @type {String}
-         */
-        filterFormId: String
-      }
-    }
-
-    /**
-     * @description 그리스트
-     ***********************
-     * @returns {HTMLElement}
-     */
-    get grist() {
-      return this.masterElement.getMainGrist()
-    }
-
-    /**
-     * @description 필터 폼
-     ***********************
-     * @returns {HTMLElement}
-     */
-    get filterForm() {
-      return this.shadowRoot?.querySelector(this.filterFormId)
-    }
-
-    /**
-     * @description 컨텍스트
-     ***********************
-     * @returns {HTMLElement}
-     */
-    get context() {
-      let ctx = MetaUiUtil.getContextObject(this)
-
-      if (ctx.actions) delete ctx.actions
-      if (ctx.exportable) delete ctx.exportable
-      if (ctx.importable) delete ctx.importable
-      return ctx
-    }
-
-    /******************************************************
-     *                      LifeCycle
-     ******************************************************/
-
-    async connectedCallback() {
-      // 그리스트, 필터 폼 ID 설정
-      this.gristId = 'ox-grist'
-      this.filterFormId = 'ox-filters-form-base'
-
-      // 메뉴 메타 정보 조회 및 기본 파싱
-      await this.getAndParseMenuMeta()
-
-      if (this.isElement) {
-        await this.parseGristConfigs()
-      }
-
-      if (this.activityDataSet) {
-        this.dataSet = (this.activityDataSet || {}).main
-      }
-
-      if (super.connectedCallback) {
-        await super.connectedCallback()
-      }
-    }
-
-    async firstUpdated() {
-      if (super.firstUpdated) {
-        await super.firstUpdated()
-      }
-    }
-
-    async pageInitialized() {
-      if (this.isPage) {
-        await this.parseGristConfigs()
-      }
-
-      if (super.pageInitialized) {
-        await super.pageInitialized()
-      }
-    }
-
-    render() {
-      return MetaApi.getMainTabHtml(this)
-    }
-
-    /**
-     * @descrtiption 메뉴 메타 정보로 부터 메인 그리드 Configuration
-     ********************************************************
-     * @param {Object} menuMeta 메뉴 메타 정보
-     */
-    parseBasicGridConfigs(menuMeta) {
-      this.gridConfig = menuMeta.grid
-      this.gridColumnConfig = menuMeta.grid_column
-      this.searchConfig = menuMeta.search
-      this.gridEmphasized = menuMeta.gridEmphasized
-    }
-
-    /**
-     * @descrtiption 그리스트 구성 정보로 부터 화면 구성 정보 추출
-     ****************************************************
-     */
-    async parseGristConfigs() {
-      this.gristConfigSet = await MetaApi.parseGridConfigSet(this)
-      this.useMasterFilterForm = this.useFilterForm === true ? true : false
-      this.useFilterForm = false
-      this.buttonConfig = undefined
-      this.useButtonExport = false
-      this.useButtonImport = false
-      this.searchFieldValues = []
-
-      this.searchFields = this.gristConfigSet.columns
-        .filter(x => x.filter)
-        .map(x => {
-          let searchField = {
-            name: x.name,
-            type: x.filter.operator === 'search' ? 'search' : x.type,
-            label: x.header,
-            operator: x.filter.operator ? x.filter.operator : 'eq'
-          }
-
-          if (x.filter.options) {
-            searchField.options = x.filter.options
-          }
-
-          if (x.record.options) {
-            searchField.options = x.record.options
-          }
-
-          if (x.filter.value) {
-            this.searchFieldValues.push({
-              name: searchField.name,
-              operator: searchField.operator,
-              value: x.filter.value
-            })
-          }
-
-          delete x.filter
-          return searchField
-        })
-    }
-
-    /********************************************************************
-     *                          C R U D Functions
-     ********************************************************************/
-
-    async fetch() {
-      await this.grist.fetch()
-    }
-
-    async beforeFetch({ page = 0, limit = 0, sortings = [], filters = [] }) {
-      if (this.masterElement) {
-        if (this.masterElement.clear) {
-          await this.masterElement.clear()
-        }
-      }
-
-      return true
-    }
-
-    getData() {
-      return {
-        master: this.masterElement.getData()
-      }
-    }
-  }