@things-factory/meta-ui 7.0.1-alpha.56 → 7.0.1-alpha.58

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

@@ -14,419 +14,422 @@ import { MetaButtonMixin } from './meta-button-mixin'
  * @author Shortstop shortstop@hatiolab.com
  * @description 메뉴 메타 정보를 이용해 폼 화면 구성
  */
-export const MetaFormMixin = (baseElement) => class extends MetaButtonMixin(baseElement) {
-  /**
-  * @description 스타일 정의
-  **************************
-  * @returns {Array} 스타일
-  */
-  static get styles() {
-    return MetaApi.getBasicFormStyles();
-  }
+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 {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)
-  }
+    /**
+     * @description 컨텍스트
+     ***********************
+     * @returns {HTMLElement}
+     */
+    get context() {
+      return MetaUiUtil.getContextObject(this)
+    }
 
-  /******************************************************
-   *                      LifeCycle
-   ******************************************************/
+    /******************************************************
+     *                      LifeCycle
+     ******************************************************/
 
-  /**
-   * @override connectedCallback
-   *******************************
-   */
-  async connectedCallback() {
-    // 메뉴 메타 정보 조회 및 기본 파싱
-    await this.getAndParseMenuMeta()
+    /**
+     * @override connectedCallback
+     *******************************
+     */
+    async connectedCallback() {
+      // 메뉴 메타 정보 조회 및 기본 파싱
+      await this.getAndParseMenuMeta()
 
-    if (this.isElement) {
-      await this.parseFormConfigs()
-    }
+      if (this.isElement) {
+        await this.parseFormConfigs()
+      }
 
-    if (this.activityDataSet) {
-      this.dataSet = this.activityDataSet
-    }
+      if (this.activityDataSet) {
+        this.dataSet = this.activityDataSet
+      }
 
-    if (this.is_activity === true && !this.parent_id) {
-      this.parent_id = 'activity'
-    }
+      if (this.is_activity === true && !this.parent_id) {
+        this.parent_id = 'activity'
+      }
 
-    if (super.connectedCallback) {
-      await super.connectedCallback()
-    }
+      if (super.connectedCallback) {
+        await super.connectedCallback()
+      }
 
-    if (this.isElement) {
-      await this.fetch()
-    }
+      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()
+      // 인풋 키 이벤트 처리
+      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:
+        }
+      })
 
-          if (this.currentTarget) {
-            this.currentTarget.removeAttribute('editing')
-          }
+      // 인풋 클릭 처리 (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
-          break
-        default:
-      }
-    })
+          return
+        }
 
-    // 인풋 클릭 처리 (readOnly <> editing)
-    this.renderRoot.addEventListener('click', e => {
-      e.stopPropagation()
-      // target should be 'ox-grid-field'
-      let target = e.target;
+        this.currentTarget = target
+        target.setAttribute('editing', 'true')
+      })
 
-      if (this.currentTarget) {
-        this.focus()
-        this.currentTarget.removeAttribute('editing')
-      }
+      // 폼 뷰의 인풋에서 발생되는 변경 이벤트 처리
+      this.addEventListener('field-change', e => {
+        let { after, before, column, record, row } = e.detail
 
-      if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
-        this.focus()
-        this.currentTarget = null
-        return
-      }
+        // before, after 값으로 달라진 값이 없으면 스킵
+        if (ValueUtil.isEquals(after, before)) {
+          return
+        }
 
-      this.currentTarget = target
-      target.setAttribute('editing', 'true');
-    })
+        // 유효성 체크 함수가 있는 경우 해당 함수 호출
+        let validation = column.validation
+        if (validation && typeof validation == 'function') {
+          if (!validation.call(this, after, before, record, column)) {
+            return
+          }
+        }
 
-    // 폼 뷰의 인풋에서 발생되는 변경 이벤트 처리 
-    this.addEventListener('field-change', e => {      
-      let { after, before, column, record, row } = e.detail
+        // 변경 값 셋팅
+        let colName = column.name
+        record[colName] = after
 
-      // before, after 값으로 달라진 값이 없으면 스킵
-      if (ValueUtil.isEquals(after, before)) {
-        return
-      }
+        // 변경 필드 정보
+        record.__dirtyfields__ = record.__dirtyfields__ || {}
+        record.__origin__ = record.__origin__ || {}
+        record.__dirtyfields__[colName] = {
+          before: record.__origin__[colName],
+          after: record[colName]
+        }
 
-      // 유효성 체크 함수가 있는 경우 해당 함수 호출
-      let validation = column.validation
-      if (validation && typeof validation == 'function') {
-        if (!validation.call(this, after, before, record, column)) {
-          return
+        // 같은 값으로 변경 되었다면
+        if (ValueUtil.isEquals(record.__dirtyfields__[colName].before, record.__dirtyfields__[colName].after)) {
+          delete record.__dirtyfields__[colName]
         }
-      }
 
-      // 변경 값 셋팅
-      let colName = column.name
-      record[colName] = after
+        // dirty flag 설정
+        record.__dirty__ = ValueUtil.isNotEmpty(record.__dirtyfields__) ? 'M' : ''
 
-      // 변경 필드 정보 
-      record.__dirtyfields__ = record.__dirtyfields__ || {}
-      record.__origin__ = record.__origin__ || {}
-      record.__dirtyfields__[colName] = {
-        before: record.__origin__[colName],
-        after: record[colName]
-      }
+        this.record = { ...record }
 
-      // 같은 값으로 변경 되었다면
-      if (ValueUtil.isEquals(record.__dirtyfields__[colName].before, record.__dirtyfields__[colName].after)) {
-        delete record.__dirtyfields__[colName]
-      }
+        // form-field-change 변경 이벤트 전파
+        this.dispatchEvent(
+          new CustomEvent('form-field-change', {
+            bubbles: true,
+            composed: true,
+            detail: e.detail
+          })
+        )
+      })
+    }
 
-      // dirty flag 설정
-      record.__dirty__ = ValueUtil.isNotEmpty(record.__dirtyfields__) ? 'M' : ''
+    /**
+     * @override firstUpdated
+     ***************************
+     */
+    async firstUpdated() {
+      if (super.firstUpdated) {
+        await super.firstUpdated()
+      }
+    }
 
-      this.record = { ...record }
+    /**
+     * @override pageInitialized
+     *****************************
+     */
+    async pageInitialized() {
+      if (this.isPage) {
+        await this.parseFormConfigs()
+      }
 
-      // form-field-change 변경 이벤트 전파
-      this.dispatchEvent(
-        new CustomEvent('form-field-change', {
-          bubbles: true,
-          composed: true,
-          detail: e.detail
-        })
-      )
-    })
-  }
+      if (super.pageInitialized) {
+        await super.pageInitialized()
+      }
 
-  /**
-   * @override firstUpdated
-   ***************************
-   */
-  async firstUpdated() {
-    if (super.firstUpdated) {
-      await super.firstUpdated()
+      if (this.isPage) {
+        await this.fetch()
+      }
     }
-  }
 
-  /**
-   * @override pageInitialized
-   *****************************
-   */
-  async pageInitialized() {
-    if (this.isPage) {
-      await this.parseFormConfigs()
+    /**
+     * @description 화면 그리기
+     *************************
+     * @returns {HTMLElement}
+     */
+    render() {
+      return MetaApi.getBasicFormHtml(this)
     }
 
-    if (super.pageInitialized) {
-      await super.pageInitialized()
+    /**
+     * @descrtiption 메뉴 메타 정보로 부터 기본 폼 정보 구성을 위한 Configuration
+     *******************************************************************
+     * @param {Object} menuMeta 메뉴 메타 정보
+     */
+    parseBasicFormConfigs(menuMeta) {
+      this.formColumnConfig = menuMeta.grid_column
+      this.formRenderConfig = menuMeta.form
     }
 
-    if (this.isPage) {
-      await this.fetch()
+    /**
+     * @descrtiption 폼 구성 정보 Configuration
+     *****************************************
+     */
+    async parseFormConfigs() {
+      this.formConfigSet = await MetaApi.parseFormConfigSet(this)
     }
-  }
 
-  /**
-   * @description 화면 그리기 
-   *************************
-   * @returns {HTMLElement}
-   */
-  render() {
-    return MetaApi.getBasicFormHtml(this)
-  }
+    /********************************************************************
+     *                          Data Filtering
+     ********************************************************************/
+
+    /**
+     * @description 최초 조회된 원본 데이터
+     ***********************************
+     * @returns {Object} 원본 데이터 (변경 값 무시)
+     */
+    get orgData() {
+      return this.removeGarbageData(this.record.__origin__)
+    }
 
-  /**
-   * @descrtiption 메뉴 메타 정보로 부터 기본 폼 정보 구성을 위한 Configuration
-   *******************************************************************
-   * @param {Object} menuMeta 메뉴 메타 정보
-   */
-  parseBasicFormConfigs(menuMeta) {
-    this.formColumnConfig = menuMeta.grid_column
-    this.formRenderConfig = menuMeta.form
-  }
+    /**
+     * @description 변경된 데이터
+     **************************
+     * @returns {Object} 변경된 데이터만
+     */
+    get dirtyData() {
+      if (ValueUtil.isEmpty((this.record || {}).__dirtyfields__)) {
+        return {}
+      }
 
-  /**
-   * @descrtiption 폼 구성 정보 Configuration
-   *****************************************
-   */
-  async parseFormConfigs() {
-    this.formConfigSet = await MetaApi.parseFormConfigSet(this)
-  }
+      let retData = {}
 
-  /********************************************************************
-   *                          Data Filtering
-   ********************************************************************/
-
-  /**
-   * @description 최초 조회된 원본 데이터 
-   ***********************************
-   * @returns {Object} 원본 데이터 (변경 값 무시)
-   */
-  get orgData() {
-    return this.removeGarbageData(this.record.__origin__)
-  }
+      Object.entries(this.record.__dirtyfields__).map(([key, value]) => {
+        if (key.startsWith('__') == false) {
+          retData[key] = value.after
+        }
+      })
 
-  /**
-   * @description 변경된 데이터 
-   **************************
-   * @returns {Object} 변경된 데이터만
-   */
-  get dirtyData() {
-    if (ValueUtil.isEmpty((this.record || {}).__dirtyfields__)) {
-      return {}
+      return retData
     }
 
-    let retData = {};
+    /**
+     * @description 현재 데이터
+     *************************
+     * @returns {Object} 화면에 표현되어 있는 현재 데이터 (수정된 값 반영)
+     */
+    get currentData() {
+      return this.removeGarbageData(this.record)
+    }
 
-    Object.entries(this.record.__dirtyfields__).map(([key, value]) => {
-      if (key.startsWith('__') == false) {
-        retData[key] = value.after
-      }
-    })
+    /**
+     * @description 레코드 데이터에서 쓰레기 데이터 정리
+     ********************************************
+     * @returns {Object} __dirty__,__dirtyfields__,__origin__ 등 (__ 로 시작되는 데이터 삭제)
+     */
+    removeGarbageData(data) {
+      if (!data) return undefined
 
-    return retData
-  }
+      let retData = {}
 
-  /**
-   * @description 현재 데이터 
-   *************************
-   * @returns {Object} 화면에 표현되어 있는 현재 데이터 (수정된 값 반영)
-   */
-  get currentData() {
-    return this.removeGarbageData(this.record)
-  }
+      Object.entries(data).map(([key, value]) => {
+        if (key.startsWith('__') == false) {
+          retData[key] = value
+        }
+      })
 
-  /**
-   * @description 레코드 데이터에서 쓰레기 데이터 정리 
-   ********************************************
-   * @returns {Object} __dirty__,__dirtyfields__,__origin__ 등 (__ 로 시작되는 데이터 삭제)
-   */
-  removeGarbageData(data) {
-    if(!data) return undefined
+      return retData
+    }
 
-    let 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
+      }
 
-    Object.entries(data).map(([key, value]) => {
-      if (key.startsWith('__') == false) {
-        retData[key] = value
+      // 기존 데이터 존재 여부 - 변경 플래그 판단
+      if (ValueUtil.isNotEmpty(recordData.id)) {
+        dirtyData.id = recordData.id
+        dirtyData.cuFlag = 'M'
+      } else {
+        dirtyData.cuFlag = '+'
       }
-    })
 
-    return retData
-  }
+      // object 타입은 id만 전송되도록 변경
+      Object.keys(dirtyData).forEach(key => {
+        if (typeof dirtyData[key] === 'object' && codeInputColumns.includes(key) == false) {
+          dirtyData[key] = { id: dirtyData[key].id }
+        }
+      })
 
-  /**
-   * @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
+      return [dirtyData]
     }
 
-    // 기존 데이터 존재 여부 - 변경 플래그 판단 
-    if (ValueUtil.isNotEmpty(recordData.id)) {
-      dirtyData.id = recordData.id
-      dirtyData.cuFlag = 'M'
-    } else {
-      dirtyData.cuFlag = '+'
+    /********************************************************************
+     *                          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 }
     }
 
-    // object 타입은 id만 전송되도록 변경 
-    Object.keys(dirtyData).forEach(key => {
-      if(typeof dirtyData[key] === 'object' && codeInputColumns.includes(key) == false) {
-        dirtyData[key] = { id: dirtyData[key].id }
+    /**
+     * @description 폼 데이터 저장
+     *****************************
+     * @returns {Boolean} 저장 여부
+     */
+    async save() {
+      let patches = this.patchData
+
+      // 변경 여부 메시지 처리
+      if (ValueUtil.isEmpty(patches)) {
+        MetaApi.showAlertPopup('title.info', 'text.NOTHING_CHANGED', 'warning', 'confirm')
+        return
       }
-    })
 
-    return [dirtyData]
-  }
+      // 필수 입력 컬럼
+      let mandatoryColumns = {}
+      ;(this.formColumnConfig || [])
+        .filter(x => x.mandatory === true)
+        .forEach(x => {
+          mandatoryColumns[x.name] = x.header
+        })
 
-  /********************************************************************
-   *                          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 }
-  }
+      // 필수 입력 값 체크
+      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
+        }
+      }
 
-  /**
-   * @description 폼 데이터 저장
-   *****************************
-   * @returns {Boolean} 저장 여부
-   */
-  async save() {
-    let patches = this.patchData
-
-    // 변경 여부 메시지 처리
-    if (ValueUtil.isEmpty(patches)) {
-      MetaApi.showAlertPopup('title.info', 'text.NOTHING_CHANGED')
-      return
-    }
+      // 저장 서비스 호출
+      let isRes = await this.updateMultiple(patches)
+      if (isRes) {
+        // 폼 데이터 조회
+        await this.fetch()
 
-    // 필수 입력 컬럼
-    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
+        // 저장이 잘 되었고 팝업이라면 팝업 닫기
+        if (this.isPopup) {
+          closePopup(this)
+        }
       }
-    }
 
-    // 저장 서비스 호출
-    let isRes = await this.updateMultiple(patches)
-    if (isRes) {
-      // 폼 데이터 조회
-      await this.fetch()
+      // 저장 결과 리턴
+      return isRes
+    }
 
-      // 저장이 잘 되었고 팝업이라면 팝업 닫기
-      if(this.isPopup) {
-        closePopup(this)
+    /**
+     * @description 데이터 클리어
+     ***************************
+     */
+    async clear() {
+      if (this.record) {
+        this.record = {}
       }
     }
 
-    // 저장 결과 리턴
-    return isRes
-  }
-
-  /**
-   * @description 데이터 클리어
-   ***************************
-   */
-  async clear() {
-    if(this.record) {
-      this.record = {};
+    /**
+     * @description 데이터 리턴
+     *************************
+     * @returns {Object}
+     */
+    getData() {
+      return this.currentData || {}
     }
   }
-
-  /**
-   * @description 데이터 리턴
-   *************************
-   * @returns {Object}
-   */
-  getData() {
-    return this.currentData || {}
-  }
-}