@things-factory/meta-ui 8.0.0-beta.9 → 8.0.2

package/client/mixin/meta-base-mixin.js

@@ -0,0 +1,323 @@
+import { MetaApi } from './../utils/meta-api'
+import { ValueUtil } from './../utils/value-util'
+import { TermsUtil } from './../utils/terms-util'
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Shortstop shortstop@hatiolab.com
+ * @description 메타 기반의 화면 생성을 위한 기본 믹스인
+ *   화면에 필요한 프로퍼티 정의, 메타 데이터 조회 및 파싱, 기본 데이터 조회, 변경 이벤트 핸들러 등록 등
+ */
+export const MetaBaseMixin = baseElement =>
+  class extends baseElement {
+    /**
+     * @override properties
+     ***************************
+     * @returns {Object} 프로퍼티 오브젝트
+     */
+    static get properties() {
+      return {
+        /**
+         * @description 메뉴 메타 정보
+         ****************************
+         * @type {Object}
+         */
+        menuInfo: Object,
+
+        /**
+         * @description 화면 라우팅 정보, 상세 뷰는 호출시에 route_name 변수를 설정하여 넘겨준다.
+         ****************************
+         * @type {String}
+         */
+        route_name: String,
+
+        /**
+         * 상세 폼 뷰 상위 데이터 ID, 상세 뷰는 호출시에 parent_id 변수를 설정하여 넘겨준다.
+         ****************************
+         * @type {String}
+         */
+        parent_id: String,
+
+        /**
+         * @description 페이지 내 컴포넌트 여부, 상세 뷰는 호출시에 is_detail 변수를 설정하여 넘겨준다.
+         ****************************
+         * @type {Boolean}
+         */
+        is_detail: {
+          type: Boolean,
+          converter(value) {
+            return Boolean(value)
+          }
+        },
+
+        /**
+         * @description 팝업 여부, 팝업 뷰는 호출시에 is_popup 변수를 설정하여 넘겨준다.
+         ****************************
+         * @type {Boolean}
+         */
+        is_popup: {
+          type: Boolean,
+          converter(value) {
+            return Boolean(value)
+          }
+        },
+
+        /**
+         * @description 작업, 결제 관련 화면에서 호출 된 경우
+         ****************************
+         * @type {Boolean}
+         */
+        is_activity: {
+          type: Boolean,
+          converter(value) {
+            return Boolean(value)
+          }
+        },
+
+        /**
+         * @description 수정 불가 페이지
+         ****************************
+         * @type {Boolean}
+         */
+        is_readonly: {
+          type: Boolean,
+          converter(value) {
+            return Boolean(value)
+          }
+        }
+      }
+    }
+
+    /**
+     * @description 엘리먼트 (페이지 내 컴포넌트 혹은 팝업인 경우) 여부
+     ********************************************************
+     * @returns {Boolean} 엘리먼트 여부
+     */
+    get isElement() {
+      return this.is_detail === true || this.is_popup === true
+    }
+
+    /**
+     * @description 페이지 내 포함된 하나의 컴포넌트 여부
+     *******************************************
+     * @returns {Boolean} 컴포넌트 여부
+     */
+    get isDetail() {
+      return ValueUtil.isEmpty(this.is_detail) ? false : this.is_detail
+    }
+
+    /**
+     * @description 시나리오 기반 데이터 변경 이벤트 핸들러
+     **********************************************
+     */
+    async dataChangeEventHandler(e) {
+      // 이벤트 디테일 추출
+      let { after, before, column, record, row } = e.detail
+
+      // 데이터 변경 컬럼 명
+      let columnName = column.name
+      // 해당 컬럼에 컬럼 변경 핸들러가 등록되어 있다면 해당 컬럼 변경 이벤트 핸들러 (시나리오)를 실행
+      if (Object.keys(this.fieldChangeHandlers || {}).includes(columnName)) {
+        let response = await MetaApi.callScenario(
+          columnName,
+          this.fieldChangeHandlers[columnName],
+          {
+            columnName,
+            column,
+            record,
+            after,
+            before,
+            row,
+            parentId: this.parent_id ? this.parent_id : ''
+          },
+          false
+        )
+        let result = response.data.runScenario.result.result
+        if (!result) return
+
+        // 이벤트 타겟 추출
+        let eventTarget = this.grist ? this.grist.grist.body : this
+        // 이벤트 타겟에 필드 변경 이벤트 전파
+        Object.keys(result).forEach(key => {
+          eventTarget.dispatchEvent(
+            new CustomEvent('field-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                record,
+                row,
+                after: result[key],
+                before: record[key],
+                column: { name: key }
+              }
+            })
+          )
+        })
+      }
+
+      // 데이터 변경 이벤트 전파
+      this.dispatchEvent(
+        new CustomEvent('data-changed', {
+          bubbles: true,
+          composed: true,
+          detail: e.detail
+        })
+      )
+    }
+
+    /**
+     * @override connectedCallback
+     ********************************
+     */
+    async connectedCallback() {
+      if (super.connectedCallback) {
+        await super.connectedCallback()
+      }
+
+      // meta-form 계열인 경우 form-field-change 이벤트에 대한 핸들러를 등록
+      if (this.tagName.toLowerCase().startsWith('meta-form-')) {
+        this.addEventListener('form-field-change', async e => {
+          await this.dataChangeEventHandler(e)
+        })
+        // 그렇지 않으면 field-change 이벤트에 대한 핸들러를 등록
+      } else {
+        this.addEventListener('field-change', async e => {
+          await this.dataChangeEventHandler(e)
+        })
+      }
+    }
+
+    /**
+     * @override pageUpdated : URL 파라미터에 대한 triggering
+     ******************************************************
+     * @returns
+     */
+    async pageUpdated(changes, lifecycle, before) {
+      let navParams = this.lifecycle?.params ? this.lifecycle.params : {}
+      if (this.isPage && this.active && before.active == false && ValueUtil.isNotEmpty(navParams)) {
+        this.fetch()
+      }
+    }
+
+    /**
+     * @description 팝업으로 오픈되었는지 여부
+     *************************************
+     * @returns {Boolean} 팝업 오픈 여부
+     */
+    get isPopup() {
+      return ValueUtil.isEmpty(this.is_popup) ? false : this.is_popup
+    }
+
+    /**
+     * @description 페이지 여부 리턴 (마스터 디테일의 디테일 엘리먼트나 팝업 화면은 페이지가 아니다.)
+     *   - 페이지란 라우트 정보를 가지는 페이지를 뜻한다.
+     ******************************************
+     * @returns {Boolean} 페이지 여부
+     */
+    get isPage() {
+      return !this.is_detail && !this.is_popup
+    }
+
+    /**
+     * @description 메뉴 메타 정보 조회 && 화면 생성을 위한 Configuration 구성
+     *****************************************************************
+     * @returns {Object} 화면 생성을 위한 메타 정보 리턴
+     */
+    async getAndParseMenuMeta() {
+      let menuMeta = await MetaApi.getMenuMeta(this)
+
+      if (menuMeta) {
+        // 기본 메뉴 정보
+        this.menuInfo = menuMeta.menu
+        // 기타 설정
+        this.etcConfig = menuMeta.etc
+
+        // 그리드 정보 파싱
+        if (this.parseBasicGridConfigs) {
+          this.parseBasicGridConfigs(menuMeta)
+        }
+
+        // GraphQL 이용을 위한 서비스 Configuration
+        if (this.parseBasicServiceConfigs) {
+          this.parseBasicServiceConfigs(menuMeta)
+        }
+
+        // 폼 정보 구성을 위한 폼 Configuration
+        if (this.parseBasicFormConfigs) {
+          this.parseBasicFormConfigs(menuMeta)
+        }
+
+        // MetaTabMixin
+        if (this.parseBasicTabConfigs) {
+          this.parseBasicTabConfigs(menuMeta)
+        }
+
+        // 버튼 정보 파싱
+        if (this.parseBasicButtonConfigs) {
+          this.parseBasicButtonConfigs(menuMeta)
+        }
+      }
+    }
+
+    /**
+     * @description 화면에 구성된 콤포넌트에 따라 조회를 호출
+     ***********************************************
+     */
+    async fetch() {
+      if (ValueUtil.isNotEmpty(this.grist)) {
+        this.grist.fetch()
+      } else if (ValueUtil.isNotEmpty(this.filterForm)) {
+        await this.fetchHandler()
+      } else if (this.fetchHandler) {
+        await this.fetchHandler()
+      }
+    }
+
+    /**
+     * @description 팝업 오픈 버튼 처리
+     ********************************
+     * @param {Object} action
+     * @param {Object} record
+     * @param {Function} closeCallback
+     */
+    async excuteOpenPopupButtonClick(action, record, closeCallback) {
+      // 타이틀 변환
+      let title = TermsUtil.tTitle(action.title)
+
+      // 타이틀 상세 필드 정의 확인
+      if (ValueUtil.isNotEmpty(action.title_detail)) {
+        title = `${title}-${ValueUtil.getParams(record, ...action.title_detail.split('.'))}`
+      }
+
+      // 팝업 오픈
+      MetaApi.openDynamicPopup(title, action, record, closeCallback)
+    }
+
+    /**
+     * @description 시나리오 호출 버튼 처리
+     ***********************************
+     * @param {Object} action
+     * @param {Object or Array} params
+     * @param {Function} afterCallback
+     */
+    async executeCallScenarioButtonClick(action, params, afterCallback) {
+      // 시나리오 호출
+      let response = await MetaApi.callScenario(action.name, action.name, params)
+
+      // 처리 중 에러가 발생했으면 시나리오 호출 후 처리가 없으면 return
+      if (response !== false && !response.errors && ValueUtil.isNotEmpty(action.after)) {
+        afterCallback()
+      }
+    }
+
+    /**
+     * @description 상위 페이지 에서 하위 엘리먼트로 전달하는 ID 저장 및 조회 실행
+     ***********************************
+     * @param {String} id
+     */
+    setParentId(id) {
+      this.parent_id = id
+      this.fetch()
+    }
+  }

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

@@ -0,0 +1,283 @@
+import '@operato/data-grist'
+
+import { html } from 'lit'
+
+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'
+
+/**
+ * @description 메뉴 메타 정보를 이용해 그리드를 렌더링
+ ******************************************************
+ * @param {Object} MetaButtonMixin
+ * @returns
+ */
+export const MetaBasicGristMixin = baseElement =>
+  class extends MetaButtonMixin(baseElement) {
+    /**
+     * @description 스타일 정의
+     **************************
+     * @returns {Array} 스타일
+     */
+    static get styles() {
+      return MetaApi.getBasicGristStyles()
+    }
+
+    /**
+     * @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 컨텍스트
+     ***********************
+     * @returns {HTMLElement}
+     */
+    get context() {
+      return MetaUiUtil.getContextObject(this)
+    }
+
+    /******************************************************
+     *                      LifeCycle
+     ******************************************************/
+
+    async connectedCallback() {
+      // 그리스트, 필터 폼 ID 설정
+      this.gristId = 'ox-grist'
+      this.filterFormId = 'ox-filters-form'
+
+      // 메뉴 메타 정보 조회 및 기본 파싱
+      await this.getAndParseMenuMeta()
+
+      if (this.isElement) {
+        await this.parseGristConfigs()
+      }
+
+      if (this.activityDataSet) {
+        this.dataSet = this.activityDataSet
+      }
+
+      if (super.connectedCallback) {
+        await super.connectedCallback()
+      }
+    }
+
+    async firstUpdated() {
+      if (super.firstUpdated) {
+        await super.firstUpdated()
+      }
+    }
+
+    async pageInitialized(lifecycle) {
+      if (this.isPage) {
+        await this.parseGristConfigs()
+      }
+
+      if (super.pageInitialized) {
+        await super.pageInitialized()
+      }
+    }
+
+    async pageUpdated(changes, lifecycle, before) {
+      if (this.active) {
+        /* this page is activated */
+        if (this.gridConfig.grid_refresh_when_page_activated) {
+          this.fetch()
+        }
+      } else {
+        /* this page is deactivated */
+      }
+    }
+
+    render() {
+      return html` ${MetaApi.getBasicGristHtml(this)} ${this.isPage ? html`` : MetaUiUtil.getButtonContainer(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)
+    }
+
+    /********************************************************************
+     *                          C R U D Functions
+     ********************************************************************/
+
+    async fetch() {
+      await this.grist.fetch()
+    }
+
+    back() {
+      history.back()
+    }
+
+    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
+    }
+
+    async clear() {
+      if (this.grist) {
+        this.grist.data = { page: 0, total: 0, limit: 0, records: [] }
+      }
+    }
+
+    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]
+          }
+        })
+      })
+
+      return records
+    }
+  }

package/client/mixin/meta-button-mixin.js

@@ -0,0 +1,116 @@
+import { html } from 'lit'
+
+import { MetaUiUtil } from '../utils/meta-ui-util'
+
+import { MetaServiceMixin } from './meta-service-mixin'
+
+/**
+* @license
+* Copyright © HatioLab Inc. All rights reserved.
+* @author Shortstop shortstop@hatiolab.com
+* @description 메뉴 메타 기반 버튼 렌더링 & 이벤트 처리
+*/
+export const MetaButtonMixin = (baseElement) => class extends MetaServiceMixin(baseElement) {
+  /** 
+   * @description 프로퍼티 
+   ***********************
+   */
+  static get properties() {
+    return {
+      /**
+       * @description 버튼 구성 정보
+       ***************************
+       * @type {Array}
+       */
+      buttonConfig: Array,
+      /**
+       * @description 내보내기 버튼 사용 여부
+       **********************************
+       * @type {Array}
+       */
+      useButtonExport: Boolean,
+      /**
+       * @description 가져오기 버튼 사용 여부
+       **********************************
+       * @type {Array}
+       */
+      useButtonImport: Boolean,
+      /**
+       * @description 추가 버튼 사용 여부
+       *******************************
+       * @type {Boolean}
+       */
+      useButtonAdd: Boolean
+    }
+  }
+
+  /** 
+   * @description 커스텀 버튼 컨테이너 스타일 리턴
+   *****************************************
+   */
+  getCustomButtonContainerStyle() {
+    return MetaUiUtil.getCustomButtonContainerStyles()
+  }
+
+  /** 
+   * @description 메뉴 컨텍스트에서 사용할 버튼 정보 추출
+   **********************************************
+   * @returns {Array}
+   */
+  getContextButtons() {
+    return MetaUiUtil.getContextButtons(this)
+  }
+
+  /**
+   * @description 버튼 컨테이너 HTML 리턴
+   ***********************************
+   * @returns {HTML}
+   */
+  getButtonContainer() {
+    return this.isPage ? html`` : MetaUiUtil.getButtonContainer(this)
+  }
+
+  /**
+   * @description 버튼과 연결될 핸들러를 리턴 - TODO 사용 안 하는 거 같으므로 확인 후 삭제 필요
+   *************************************
+   * @param {String} type
+   * @param {String} action
+   * @param {Object} logic
+   * @returns {Object}
+   */
+  async getBasicButtonHandler(type, action, logic) {
+    return await MetaUiUtil.getButtonActionHandler(this, type, action, logic)
+  }
+
+  /**
+   * @description 커스텀 버튼에 대한 액션 분기 - TODO 사용 안 하는 거 같으므로 확인 후 삭제 필요
+   **************************************
+   * @param {Object} logic
+   */
+  async customButtonHandler(logic) {
+    await MetaUiUtil.customButtonHandler(this, null, logic)
+  }
+
+  /**
+   * @description 그리스트 버튼에 대한 커스텀 액션 분기 - TODO 사용 안 하는 거 같으므로 확인 후 삭제 필요
+   ********************************************
+   * @param {Object} actionInfo
+   * @param {Object} record
+   */
+  async gristButtonHandler(actionInfo, record) {
+    await MetaUiUtil.gristButtonHandler(this, actionInfo, record)
+  }
+
+  /**
+   * @description 그리스트 버튼에 대한 파싱 처리
+   ***************************************
+   * @param {Object} menuMeta
+   */
+  parseBasicButtonConfigs(menuMeta) {
+    this.buttonConfig = menuMeta.button
+
+    this.useButtonImport = MetaUiUtil.isButtonExist(this.buttonConfig, 'import')
+    this.useButtonExport = MetaUiUtil.isButtonExist(this.buttonConfig, 'export')
+    this.useButtonAdd = MetaUiUtil.isButtonExist(this.buttonConfig, 'add')
+  }
+}