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

package/client/mixin/meta-master-detail-mixin.js

@@ -0,0 +1,395 @@
+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 MetaMasterDetailMixin = baseElement =>
+  class extends MetaButtonMixin(baseElement) {
+    /**
+     * @description 스타일 정의
+     **************************
+     * @returns {Array} 스타일
+     */
+    static get styles() {
+      return MetaApi.getBasicMasterDetailStyles()
+    }
+
+    /**
+     * @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 detail 엘리먼트
+         ******************************
+         * @type {Object}
+         */
+        detailElement: Object
+      }
+    }
+
+    /**
+     * @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() {
+      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 firstUpdated
+     **************************
+     */
+    async firstUpdated() {
+      if (super.firstUpdated) {
+        await super.firstUpdated()
+      }
+    }
+
+    /**
+     * @override pageInitialized
+     ****************************
+     */
+    async pageInitialized() {
+      if (this.isPage) {
+        await this.parseGristConfigs()
+      }
+
+      if (super.pageInitialized) {
+        await super.pageInitialized()
+      }
+    }
+
+    /**
+     * @override render
+     ********************
+     */
+    render() {
+      return MetaApi.getMasterDetailHtml(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)
+
+      // 마스터 그리드에 handlers > focus 이벤트를 등록
+      this.gristConfigSet.rows.handlers = this.gristConfigSet.rows.handlers || {}
+      let gristRowHandler = this.gristConfigSet.rows.handlers
+      gristRowHandler.focus = this.masterGridFocusEventHandler.bind(this)
+
+      // 마스터 그리드 옵션 처리
+      this.masterOption = JSON.parse(this.etcConfig.master_option || '{}')
+      let { split_filter = false } = this.masterOption
+      this.useMasterFilterForm = this.useFilterForm === true && split_filter === false ? true : false
+      this.useFilterForm = split_filter === true ? true : false
+
+      // 필터 폼 사용을 하지 않는다면
+      if (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
+          })
+      }
+    }
+
+    /**
+     * @descrtiption 마스터 그리드에 대한 포커스 이벤트 핸들러 정의
+     *****************************************************
+     * @param {Array} columns
+     * @param {Object} data
+     * @param {Object} column
+     * @param {Object} record
+     * @param {Number} rowIndex
+     */
+    masterGridFocusEventHandler(columns, data, column, record, rowIndex) {
+      if (record.id && this.detailElement) {
+        this.detailElement.setParentId(record.id)
+      }
+    }
+
+    /********************************************************************
+     *                          C R U D Functions
+     ********************************************************************/
+
+    /**
+     * @descrtiption 데이터 조회
+     **************************
+     */
+    async fetch() {
+      await this.grist.fetch()
+    }
+
+    /**
+     * @descrtiption 데이터 조회 전 액션
+     ********************************
+     */
+    async beforeFetch({ page = 0, limit = 0, sortings = [], filters = [] }) {
+      if (this.detailElement && this.detailElement.clear) {
+        await this.detailElement.clear()
+      }
+
+      return true
+    }
+
+    /**
+     * @descrtiption 저장 처리
+     **************************
+     */
+    async save() {
+      let patches = MetaApi.patchesForUpdateMultiple(this.grist)
+      let result = ValueUtil.isNotEmpty(patches) ? await this.updateMultiple(patches) : false
+      if (result) {
+        this.fetch()
+      }
+    }
+
+    /**
+     * @descrtiption id 리스트로 데이터 조회
+     ************************************
+     */
+    async find() {
+      let ids = MetaApi.getSelectedIdList(this.grist, true)
+      return ValueUtil.isNotEmpty(ids) ? await this.findOne(ids[0]) : {}
+    }
+
+    /**
+     * @descrtiption 삭제 처리
+     **************************
+     */
+    async delete() {
+      let ids = MetaApi.getSelectedIdList(this.grist, true)
+      let result = ValueUtil.isNotEmpty(ids) ? await this.deleteByIds(ids) : false
+      if (result) {
+        this.fetch()
+      }
+    }
+
+    /**
+     * @descrtiption 익스포트 처리
+     ****************************
+     */
+    async export() {
+      let exportTitle = TermsUtil.tTitle(ValueUtil.getParams(this.menuInfo, 'title'))
+      return await MetaApi.exportableData(this.isElement, exportTitle, this.grist)
+    }
+
+    /**
+     * @descrtiption 임포트 처리
+     **************************
+     */
+    async import() {
+      // TODO
+    }
+
+    /**
+     * @descrtiption 그리드 데이터 리턴
+     *******************************
+     * @returns {Object}
+     */
+    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 {
+        main: records,
+        detail: this.detailElement.getData()
+      }
+    }
+  }

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

@@ -0,0 +1,306 @@
+import { adjustFilters } from '@operato/utils'
+
+import { MetaApi } from './../utils/meta-api'
+import { ValueUtil } from './../utils/value-util'
+
+import { MetaBaseMixin } from './meta-base-mixin'
+
+/**
+ * @description 서비스 관련 믹스인
+ *******************************
+ */
+export const MetaServiceMixin = (baseElement) => class extends MetaBaseMixin(baseElement) {
+
+  /**
+   * @description 프로퍼티 정의
+   ******************************
+   * @returns {Object} 프로퍼티
+   */
+  static get properties() {
+    return {
+      /**
+       * @description 메뉴 메타 정보에 설정한 Graphql 정보
+       **********************************************
+       * @type {Object}
+       */
+      gqlInfo: Object
+    }
+  }
+
+  /**
+   * @description 메뉴 메타 정보로 부터 서비스 구성 정보 파싱
+   **************************************************
+   * @param {Object} menuMeta 
+   */
+  parseBasicServiceConfigs(menuMeta) {
+    this.gqlInfo = menuMeta.gql
+  }
+
+  /**
+   * @description 데이터 fetch 함수 정의
+   ***********************************
+   * @param {Object} { page : Number, limit : Number, sortings : Array, filters : Array)
+   * @returns {Object} { total : Number, records : Array }
+   */
+  async fetchHandler({ page = 0, limit = 0, sortings = [], filters = [] }) {
+    if(this.is_activity) {
+      return {
+        total: 0, 
+        records: this.dataSet || []
+      };
+    }
+
+    if(this.infinityPage === true) {
+      page = 0;
+      limit = 0;
+    }
+
+    // 조회 전처리 
+    if(this.beforeFetch) {
+      // return 이 false 이면 이 후 동작 취소 
+      if(await this.beforeFetch({ page:page, limit:limit, sortings:sortings, filters:filters}) == false) {
+        return;
+      }
+    }
+
+    // 그리스트 구성 설정이 없으면 리턴
+    if (!this.gristConfigSet) return { total: 0, records: [] }
+
+    // 필터 처리
+    let formFilters = ValueUtil.isEmpty(filters) 
+    ? (this.mainFilterForm ? ((await this.mainFilterForm.getQueryFilters()) || []) 
+                           : ((await this.filterForm?.getQueryFilters()) || []))
+    : filters
+
+    // 조회 함수 
+    let queryFunc = ValueUtil.getParams(this.gqlInfo, 'query', 'list_func')
+    let queryFilters = ValueUtil.getParams(this.gqlInfo, 'query', 'filters')
+
+    // 조회 결과 에서 다른 필드로 변환 될 필드 ( ex) parent.name ==> parentName )
+    // 객체 조회 후 내용을 리스트에 표현 할때 사용 ...
+    let queryAfterSetFields = ValueUtil.getParams(this.gqlInfo, 'query', 'after_set_fields')
+
+    // 기본 조회 조건이 지정되어 있으면 filter에 추가
+    if (ValueUtil.isNotEmpty(queryFilters)) {
+      formFilters = adjustFilters(formFilters, queryFilters)
+    }
+
+    // 화면 이동으로 호출된 경우 filter 조건 추가 
+    formFilters.push(...this.getPageNavigateParams());
+
+    // 엘리먼트의 경우 상위 데이터 parentId가 있다. 
+    if (this.isElement && !this.mainFilterForm) {
+      let parentId = ValueUtil.getParams(this.gqlInfo, 'query', 'parent_id')
+
+      if (ValueUtil.isNotEmpty(parentId) && ValueUtil.isNotEmpty(this.parent_id)) {
+        formFilters = adjustFilters(formFilters, [{
+          name: parentId,
+          operator: 'eq',
+          value: this.parent_id
+        }])
+      } else {
+        return {
+          total:0, 
+          records: []
+        }
+      }
+    }
+
+    // 그리스트 설정을 이용 한 조회 필드 생성시 skip 대상 필드 
+    let selectSkipFields = Object.keys(queryAfterSetFields || {})
+
+    // 조회 컬럼 추출 후 조회
+    let selectFields = MetaApi.getSelectColumns(this.gristConfigSet.columns.filter(x => !selectSkipFields.includes(x.name)))
+
+    // 조회 실행 
+    let result = {};
+
+    if(queryFunc.includes('$')) {
+      let scenarioName = queryFunc.replace('$', '');
+      let response = await MetaApi.callScenario(undefined, scenarioName, {
+        filters:formFilters, 
+        pagination: { page, limit },
+        sortings
+      }, false)
+
+      result = response.data.runScenario.result.result;
+    } else {
+      result = await MetaApi.searchByPagination(queryFunc, formFilters, sortings, page, limit, selectFields);
+    }
+    
+    // 조회 결과 가공 
+    if (ValueUtil.isNotEmpty(queryAfterSetFields)) {
+      if (ValueUtil.isNotEmpty(result) && ValueUtil.isNotEmpty(result.records)) {
+        result.records.map(record => {
+          selectSkipFields.forEach(key => {
+            record[key] = ValueUtil.getParams(record, ...(queryAfterSetFields[key].split('.')))
+          })
+
+          return record
+        })
+      }
+    }
+
+    // 조회 후 처리 
+    if(this.afterFetch) {
+      // return 이 false 이면 이 후 동작 취소 
+      let afterFetchResult = await this.afterFetch({ page: page, limit: limit, sortings: sortings, filters: filters }, result);
+
+      if(afterFetchResult) {
+        return afterFetchResult;
+      }
+    }
+
+    return result
+  }
+
+  /**
+   * @description 페이지 이동 파라미터에 대한 처리 
+   *****************************************
+   * @returns {Array} [{ name: '', operator: 'eq', value: '' }]
+   */
+  getPageNavigateParams() {
+    if(this.isPage == false) return [];
+
+    // 페이지의 경우만 URL 파라미터 추출 
+    let navParams = this.lifecycle?.params ? this.lifecycle.params : {};
+    if(!navParams.pass) return [];
+
+    let passParams = navParams.pass;
+    let passObj = JSON.parse(passParams);
+
+    // Operator 결정 
+    let operator = passObj.length == 1 ? 'eq' : 'in';
+
+    let paramFilterObj = {};
+    let paramFilters = [];
+
+    // passObj 0번 인덱스를 기준으로 필터 생성 
+    Object.keys(passObj[0]).forEach(key => {
+      paramFilterObj[key] = {
+        name: key,
+        operator: operator, 
+        value: operator === 'eq' ? passObj[0][key] : []
+      };
+    })
+
+    // 여러 Row 의 Parameter 처리 
+    if(passObj.length > 1) {
+      passObj.forEach(record => {
+        Object.keys(record).forEach(key => {
+          paramFilterObj[key].value.push(record[key]);
+        })
+      })
+    }
+
+    // paramObj를 리스트로 변환
+    Object.keys(paramFilterObj).forEach(x => {
+      paramFilters.push(paramFilterObj[x]);
+    })
+
+    return paramFilters;
+  }
+
+  /**
+   * @description 레코드 ID로 데이터 조회
+   ***********************************
+   * @param {String} id 
+   * @returns 
+   */
+  async findOne(id) {
+    if(this.is_activity) {
+      return this.dataSet || {};
+    }
+
+    let findOneFunc = ValueUtil.getParams(this.gqlInfo, 'query', 'find_one_func')
+    // 조회 결과 에서 다른 필드로 변환 될 필드 ( ex) parent.name ==> parentName )
+    // 객체 조회 후 내용을 리스트에 표현 할때 사용 ...
+    let queryAfterSetFields = ValueUtil.getParams(this.gqlInfo, 'query', 'after_set_fields')
+
+    // 그리스트 설정을 이용 한 조회 필드 생성시 skip 대상 필드 
+    let selectSkipFields = Object.keys(queryAfterSetFields || {})
+    let selectFields = MetaApi.getSelectColumns((this.gristConfigSet ? this.gristConfigSet : { columns: this.formConfigSet }).columns.filter(x => !selectSkipFields.includes(x.name)))
+
+    // 조회 
+    let result = {};
+
+    if(findOneFunc.includes('$')) {
+      let scenarioName = findOneFunc.replace('$', '');
+      let response = await MetaApi.callScenario(undefined, scenarioName, {
+        id
+      }, false)
+
+      result = response.data.runScenario.result.result;
+    } else {
+      result = await MetaApi.findOne(findOneFunc, id, selectFields)
+    }
+    
+    // 조회 결과 가공 
+    if (ValueUtil.isNotEmpty(queryAfterSetFields)) {
+      if (ValueUtil.isNotEmpty(result)) {
+        selectSkipFields.forEach(key => {
+          result[key] = ValueUtil.getParams(result, ...(queryAfterSetFields[key].split('.')))
+        })
+      }
+    }
+
+    return result
+  }
+
+  /**
+   * @description 레코드 ID들(ids)로 부터 레코드 한꺼번에 삭제
+   ****************************************************
+   * @param {String} ids
+   * @returns {Boolean} 삭제 여부
+   */
+  async deleteByIds(ids) {
+    let deleteFunc = ValueUtil.getParams(this.gqlInfo, 'mutation', 'delete', 'func')
+    return await MetaApi.deleteListByIds(ids, deleteFunc)
+  }
+
+  /**
+   * @description 변경 데이터들 한꺼번에 추가 혹은 업데이트
+   ****************************************************
+   * @param {Array} params 
+   */
+  async updateMultiple(params) {
+    let mutationFunc = ValueUtil.getParams(this.gqlInfo, 'mutation', 'multiple', 'func')
+    let skipToSaveFields = ValueUtil.getParams(this.gqlInfo, 'mutation', 'multiple', 'skip_fields')
+    let mutationType = ValueUtil.getParams(this.gqlInfo, 'mutation', 'multiple', 'type')
+    let patches = mutationType == 'ScalarObject' ? params.patches : params
+
+    // 저장시 필터링 되어야 될 필드 삭제 
+    if (ValueUtil.isNotEmpty(skipToSaveFields)) {
+      skipToSaveFields = skipToSaveFields.map(f => { return f.includes('.') ? f.split('.') : f })
+
+      patches = patches.map(patch => {
+        skipToSaveFields.forEach(field => {
+          if (Array.isArray(field)) {
+            delete patch[field[0]][field[1]]
+          } else {
+            delete patch[field]
+          }
+        })
+        return patch
+      })
+    }
+
+    // 엘리먼트의 경우 상위 데이터 parentId가 있다. 
+    if (this.isElement && ValueUtil.isNotEmpty(this.parent_id)) {
+      let parentId = ValueUtil.getParams(this.gqlInfo, 'mutation', 'multiple', 'parent_id')
+      if (ValueUtil.isNotEmpty(parentId)) {
+        patches.forEach(patch => {
+          if (parentId.includes('.')) {
+            let objFields = parentId.split('.')
+            patch[objFields[0]] = {};
+            patch[objFields[0]][objFields[1]] = this.parent_id
+          } else {
+            patch[parentId] = this.parent_id
+          }
+        })
+      }
+    }
+
+    return await MetaApi.updateMultiple(mutationFunc, params)
+  }
+}