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

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

@@ -1,116 +0,0 @@
-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')
-  }
-}

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

@@ -1,435 +0,0 @@
-import { closePopup } from '@operato/popup'
-
-import { MetaApi } from '../utils/meta-api'
-import { MetaUiUtil } from '../utils/meta-ui-util'
-import { ValueUtil } from '../utils/value-util'
-import { UiUtil } from '../utils/ui-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 MetaFormMixin = baseElement =>
-  class extends MetaButtonMixin(baseElement) {
-    /**
-     * @description 스타일 정의
-     **************************
-     * @returns {Array} 스타일
-     */
-    static get styles() {
-      return MetaApi.getBasicFormStyles()
-    }
-
-    /**
-     * @description 프로퍼티 정의
-     ***************************
-     * @returns {Object} 프로퍼티
-     */
-    static get properties() {
-      return {
-        /**
-         * @description 폽 컬럼 구성 정보
-         ******************************
-         * @type {Array}
-         */
-        formColumnConfig: Array,
-        /**
-         * @description 메뉴 메타 정보로 부터 추출한 후 폼을 위해 설정 정보 구성
-         ************************************************************
-         * @type {Object}
-         */
-        formConfigSet: Object,
-        /**
-         * @description 폼 상세 렌터링 정보
-         *******************************
-         * @type {Object}
-         */
-        formRenderConfig: Array,
-        /**
-         * @description 데이터 레코드
-         ***************************
-         * @type {Object}
-         */
-        record: Object
-      }
-    }
-
-    /**
-     * @description 컨텍스트
-     ***********************
-     * @returns {HTMLElement}
-     */
-    get context() {
-      return MetaUiUtil.getContextObject(this)
-    }
-
-    /******************************************************
-     *                      LifeCycle
-     ******************************************************/
-
-    /**
-     * @override connectedCallback
-     *******************************
-     */
-    async connectedCallback() {
-      // 메뉴 메타 정보 조회 및 기본 파싱
-      await this.getAndParseMenuMeta()
-
-      if (this.isElement) {
-        await this.parseFormConfigs()
-      }
-
-      if (this.activityDataSet) {
-        this.dataSet = this.activityDataSet
-      }
-
-      if (this.is_activity === true && !this.parent_id) {
-        this.parent_id = 'activity'
-      }
-
-      if (super.connectedCallback) {
-        await super.connectedCallback()
-      }
-
-      if (this.isElement) {
-        await this.fetch()
-      }
-
-      // 인풋 키 이벤트 처리
-      this.renderRoot.addEventListener('keydown', e => {
-        switch (e.key) {
-          case 'Esc':
-          case 'Escape':
-          // TODO 편집이 취소되어야 한다.
-          case 'Enter':
-            // 먼저 focus를 옮겨놓아야 focusout으로 인해서 popup이 닫히는 것을 방지할 수 있다.
-            this.focus()
-
-            if (this.currentTarget) {
-              this.currentTarget.removeAttribute('editing')
-            }
-
-            this.currentTarget = null
-            break
-          default:
-        }
-      })
-
-      // 인풋 클릭 처리 (readOnly <> editing)
-      this.renderRoot.addEventListener('click', e => {
-        e.stopPropagation()
-        // target should be 'ox-grid-field'
-        let target = e.target
-
-        if (this.currentTarget) {
-          this.focus()
-          this.currentTarget.removeAttribute('editing')
-        }
-
-        if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
-          this.focus()
-          this.currentTarget = null
-          return
-        }
-
-        this.currentTarget = target
-        target.setAttribute('editing', 'true')
-      })
-
-      // 폼 뷰의 인풋에서 발생되는 변경 이벤트 처리
-      this.addEventListener('field-change', e => {
-        let { after, before, column, record, row } = e.detail
-
-        // before, after 값으로 달라진 값이 없으면 스킵
-        if (ValueUtil.isEquals(after, before)) {
-          return
-        }
-
-        // 유효성 체크 함수가 있는 경우 해당 함수 호출
-        let validation = column.validation
-        if (validation && typeof validation == 'function') {
-          if (!validation.call(this, after, before, record, column)) {
-            return
-          }
-        }
-
-        // 변경 값 셋팅
-        let colName = column.name
-        record[colName] = after
-
-        // 변경 필드 정보
-        record.__dirtyfields__ = record.__dirtyfields__ || {}
-        record.__origin__ = record.__origin__ || {}
-        record.__dirtyfields__[colName] = {
-          before: record.__origin__[colName],
-          after: record[colName]
-        }
-
-        // 같은 값으로 변경 되었다면
-        if (ValueUtil.isEquals(record.__dirtyfields__[colName].before, record.__dirtyfields__[colName].after)) {
-          delete record.__dirtyfields__[colName]
-        }
-
-        // dirty flag 설정
-        record.__dirty__ = ValueUtil.isNotEmpty(record.__dirtyfields__) ? 'M' : ''
-
-        this.record = { ...record }
-
-        // form-field-change 변경 이벤트 전파
-        this.dispatchEvent(
-          new CustomEvent('form-field-change', {
-            bubbles: true,
-            composed: true,
-            detail: e.detail
-          })
-        )
-      })
-    }
-
-    /**
-     * @override firstUpdated
-     ***************************
-     */
-    async firstUpdated() {
-      if (super.firstUpdated) {
-        await super.firstUpdated()
-      }
-    }
-
-    /**
-     * @override pageInitialized
-     *****************************
-     */
-    async pageInitialized() {
-      if (this.isPage) {
-        await this.parseFormConfigs()
-      }
-
-      if (super.pageInitialized) {
-        await super.pageInitialized()
-      }
-
-      if (this.isPage) {
-        await this.fetch()
-      }
-    }
-
-    /**
-     * @description 화면 그리기
-     *************************
-     * @returns {HTMLElement}
-     */
-    render() {
-      return MetaApi.getBasicFormHtml(this)
-    }
-
-    /**
-     * @descrtiption 메뉴 메타 정보로 부터 기본 폼 정보 구성을 위한 Configuration
-     *******************************************************************
-     * @param {Object} menuMeta 메뉴 메타 정보
-     */
-    parseBasicFormConfigs(menuMeta) {
-      this.formColumnConfig = menuMeta.grid_column
-      this.formRenderConfig = menuMeta.form
-    }
-
-    /**
-     * @descrtiption 폼 구성 정보 Configuration
-     *****************************************
-     */
-    async parseFormConfigs() {
-      this.formConfigSet = await MetaApi.parseFormConfigSet(this)
-    }
-
-    /********************************************************************
-     *                          Data Filtering
-     ********************************************************************/
-
-    /**
-     * @description 최초 조회된 원본 데이터
-     ***********************************
-     * @returns {Object} 원본 데이터 (변경 값 무시)
-     */
-    get orgData() {
-      return this.removeGarbageData(this.record.__origin__)
-    }
-
-    /**
-     * @description 변경된 데이터
-     **************************
-     * @returns {Object} 변경된 데이터만
-     */
-    get dirtyData() {
-      if (ValueUtil.isEmpty((this.record || {}).__dirtyfields__)) {
-        return {}
-      }
-
-      let retData = {}
-
-      Object.entries(this.record.__dirtyfields__).map(([key, value]) => {
-        if (key.startsWith('__') == false) {
-          retData[key] = value.after
-        }
-      })
-
-      return retData
-    }
-
-    /**
-     * @description 현재 데이터
-     *************************
-     * @returns {Object} 화면에 표현되어 있는 현재 데이터 (수정된 값 반영)
-     */
-    get currentData() {
-      return this.removeGarbageData(this.record)
-    }
-
-    /**
-     * @description 레코드 데이터에서 쓰레기 데이터 정리
-     ********************************************
-     * @returns {Object} __dirty__,__dirtyfields__,__origin__ 등 (__ 로 시작되는 데이터 삭제)
-     */
-    removeGarbageData(data) {
-      if (!data) return undefined
-
-      let retData = {}
-
-      Object.entries(data).map(([key, value]) => {
-        if (key.startsWith('__') == false) {
-          retData[key] = value
-        }
-      })
-
-      return retData
-    }
-
-    /**
-     * @description 트랜잭션을 위한 변경 데이터 + cuFlag 가져오기
-     *****************************************************
-     * @returns {Object}
-     */
-    get patchData() {
-      let dirtyData = this.dirtyData
-      let recordData = this.record
-      // 코드 인풋 타입
-      let codeInputColumns = (this.formColumnConfig || []).filter(x => x.type === 'code-input').map(x => x.name)
-
-      if (ValueUtil.isEmpty(dirtyData)) {
-        return undefined
-      }
-
-      // 기존 데이터 존재 여부 - 변경 플래그 판단
-      if (ValueUtil.isNotEmpty(recordData.id)) {
-        dirtyData.id = recordData.id
-        dirtyData.cuFlag = 'M'
-      } else {
-        dirtyData.cuFlag = '+'
-      }
-
-      // object 타입은 id만 전송되도록 변경
-      Object.keys(dirtyData).forEach(key => {
-        if (typeof dirtyData[key] === 'object' && codeInputColumns.includes(key) == false) {
-          dirtyData[key] = { id: dirtyData[key].id }
-        }
-      })
-
-      return [dirtyData]
-    }
-
-    /********************************************************************
-     *                          C R U D Functions
-     ********************************************************************/
-    /**
-     * @description 폼 데이터 조회
-     ***************************
-     */
-    async fetch() {
-      // 부모 ID가 없다면 리턴
-      if (ValueUtil.isEmpty(this.parent_id)) return
-
-      // 단건 조회 함수
-      let findOneFunc = ValueUtil.getParams(this.gqlInfo, 'query', 'find_one_func')
-      if (!findOneFunc) return
-
-      // 부모 ID로 조회
-      let data = await this.findOne(this.parent_id)
-
-      // 데이터 형식 맞추기
-      data['__seq__'] = 1
-      let orgData = {}
-      Object.assign(orgData, data)
-      data['__origin__'] = orgData
-      this.record = { ...data }
-    }
-
-    /**
-     * @description 폼 데이터 저장
-     *****************************
-     * @returns {Boolean} 저장 여부
-     */
-    async save() {
-      let patches = this.patchData
-
-      // 변경 여부 메시지 처리
-      if (ValueUtil.isEmpty(patches)) {
-        MetaApi.showAlertPopup('title.info', 'text.NOTHING_CHANGED', 'warning', 'confirm')
-        return
-      }
-
-      // 필수 입력 컬럼
-      let mandatoryColumns = {}
-      ;(this.formColumnConfig || [])
-        .filter(x => x.mandatory === true)
-        .forEach(x => {
-          mandatoryColumns[x.name] = x.header
-        })
-
-      // 필수 입력 값 체크
-      let allFields = this.currentData
-      for (let key in mandatoryColumns) {
-        if (allFields[key] === undefined || allFields[key] == '') {
-          UiUtil.showAlertPopup('text.check-mandatory', TermsUtil.tText('check-mandatory-field', { x: TermsUtil.tLabel(mandatoryColumns[key]) }), 'info', 'confirm')
-          return
-        }
-      }
-
-      // 저장 서비스 호출
-      let isRes = await this.updateMultiple(patches)
-      if (isRes) {
-        // 폼 데이터 조회
-        await this.fetch()
-
-        // 저장이 잘 되었고 팝업이라면 팝업 닫기
-        if (this.isPopup) {
-          closePopup(this)
-        }
-      }
-
-      // 저장 결과 리턴
-      return isRes
-    }
-
-    /**
-     * @description 데이터 클리어
-     ***************************
-     */
-    async clear() {
-      if (this.record) {
-        this.record = {}
-      }
-    }
-
-    /**
-     * @description 데이터 리턴
-     *************************
-     * @returns {Object}
-     */
-    getData() {
-      return this.currentData || {}
-    }
-  }