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

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

@@ -0,0 +1,435 @@
+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 || {}
+    }
+  }