@things-factory/meta-ui 7.0.1-alpha.62 → 7.0.1-alpha.64

package/client/bootstrap.ts

@@ -37,7 +37,6 @@ import { FilterGristMetaObjectSelect } from './component/filter/filter-grist-met
 import { FilterFormMetaCodeSelect } from './component/filter/filter-form-meta-code-select'
 import { FilterFormMetaObjectSelect } from './component/filter/filter-form-meta-object-select'
 
-import './pages/personalize/personal-column-selector'
 import './pages/history/history-copy-list-popup'
 import './pages/history/history-json-list-popup'
 

package/client/component/popup/meta-object-selector-popup.ts

@@ -65,7 +65,16 @@ export class MetaObjectSelectorPopup extends LitElement {
   private record: any
 
   async connectedCallback() {
-    const { select, sorters, filters, codeField, nameField, dispField, filterFields: optionFilterFields, menu_template } = this.options || {}
+    const {
+      select,
+      sorters,
+      filters,
+      codeField,
+      nameField,
+      dispField,
+      filterFields: optionFilterFields,
+      menu_template
+    } = this.options || {}
 
     // 숨김 검색 조건
     this.foundationFilters = filters ? filters : this.basicArgs && this.basicArgs.filters ? this.basicArgs.filters : []
@@ -88,7 +97,11 @@ export class MetaObjectSelectorPopup extends LitElement {
     let sortFields = sorters ? sorters : this.basicArgs && this.basicArgs.sorters ? this.basicArgs.sorters : []
 
     // 기본 검색 조건
-    let filterFields = optionFilterFields ? optionFilterFields : menu_template?.search && menu_template?.search.length > 0 ? menu_template.search : []
+    let filterFields = optionFilterFields
+      ? optionFilterFields
+      : menu_template?.search && menu_template?.search.length > 0
+        ? menu_template.search
+        : []
 
     // 그리드 컬럼
     let gridColumns = select
@@ -165,7 +178,9 @@ export class MetaObjectSelectorPopup extends LitElement {
             } else {
               if (options.type === 'code') {
                 // 공통 코드
-                columnConfig.record.options = await ServiceUtil.getCodeSelectorData(options.values ? options.values : options.name)
+                columnConfig.record.options = await ServiceUtil.getCodeSelectorData(
+                  options.values ? options.values : options.name
+                )
               } else if (options.type === 'scenario') {
                 // 시나리오
                 columnConfig.record.options = await ServiceUtil.getCodeByScenario(options.name, options.args)
@@ -233,7 +248,13 @@ export class MetaObjectSelectorPopup extends LitElement {
 
   render() {
     return html`
-      <ox-grist id="ox-grist" .config=${this.gridConfig} .mode=${isMobileDevice() ? 'LIST' : 'GRID'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist
+        id="ox-grist"
+        .config=${this.gridConfig}
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        auto-fetch
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
         <div slot="headroom" class="header">
           <div class="filters">
             <ox-filters-form></ox-filters-form>
@@ -242,7 +263,9 @@ export class MetaObjectSelectorPopup extends LitElement {
       </ox-grist>
 
       <div class="button-container" style="margin-left:unset;">
-        <button @click=${this.clickEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}</button>
+        <button @click=${this.clickEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}
+        </button>
         <div filler></div>
         <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
         <button @click=${this.clickSelect.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('select')}</button>
@@ -271,7 +294,11 @@ export class MetaObjectSelectorPopup extends LitElement {
 
     let resFilter = adjustFilters([...this.foundationFilters], filters)
 
-    let queryAfterSetFields = ValueUtil.getParams(menu_template ? menu_template.gql || {} : {}, 'query', 'after_set_fields')
+    let queryAfterSetFields = ValueUtil.getParams(
+      menu_template ? menu_template.gql || {} : {},
+      'query',
+      'after_set_fields'
+    )
     let selectSkipFields = Object.keys(queryAfterSetFields || {})
 
     // 조회 컬럼 추출 후 조회

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

@@ -1,5 +1,7 @@
 import { html } from 'lit'
 
+import { PagePreferenceProviderImpl } from '@things-factory/personalization/dist-client/page-preference-provider-impl.js'
+
 import { MetaApi } from '../utils/meta-api'
 import { MetaUiUtil } from '../utils/meta-ui-util'
 import { ValueUtil } from '../utils/value-util'
@@ -10,275 +12,274 @@ import { MetaButtonMixin } from './meta-button-mixin'
 /**
  * @description 메뉴 메타 정보를 이용해 그리드를 렌더링
  ******************************************************
- * @param {Object} MetaButtonMixin 
- * @returns 
+ * @param {Object} MetaButtonMixin
+ * @returns
  */
-export const MetaBasicGristMixin = (baseElement) => class extends MetaButtonMixin(baseElement) {
-
-  /**
-   * @description 스타일 정의
-   **************************
-   * @returns {Array} 스타일
-   */
-  static get styles() {
-    return MetaApi.getBasicGristStyles()
-  }
+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 {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 grist() {
+      return this.renderRoot?.querySelector(this.gristId)
+    }
 
-  /**
-   * @description 필터 폼
-   ***********************
-   * @returns {HTMLElement}
-   */
-  get filterForm() {
-    return this.shadowRoot?.querySelector(this.filterFormId)
-  }
+    /**
+     * @description 필터 폼
+     ***********************
+     * @returns {HTMLElement}
+     */
+    get filterForm() {
+      return this.shadowRoot?.querySelector(this.filterFormId)
+    }
 
-  /**
-   * @description 컨텍스트
-   ***********************
-   * @returns {HTMLElement}
-   */
-  get context() {
-    return MetaUiUtil.getContextObject(this)
-  }
+    /**
+     * @description 컨텍스트
+     ***********************
+     * @returns {HTMLElement}
+     */
+    get context() {
+      return MetaUiUtil.getContextObject(this)
+    }
 
-  /******************************************************
-   *                      LifeCycle
-   ******************************************************/
+    /******************************************************
+     *                      LifeCycle
+     ******************************************************/
 
-  async connectedCallback() {
-    // 그리스트, 필터 폼 ID 설정
-    this.gristId = 'ox-grist'
-    this.filterFormId = 'ox-filters-form'
+    async connectedCallback() {
+      // 그리스트, 필터 폼 ID 설정
+      this.gristId = 'ox-grist'
+      this.filterFormId = 'ox-filters-form'
 
-    // 메뉴 메타 정보 조회 및 기본 파싱
-    await this.getAndParseMenuMeta()
+      // 메뉴 메타 정보 조회 및 기본 파싱
+      await this.getAndParseMenuMeta()
 
-    if (this.isElement) {
-      await this.parseGristConfigs()
-    }
+      if (this.isElement) {
+        await this.parseGristConfigs()
+      }
 
-    if (this.activityDataSet){
-      this.dataSet = this.activityDataSet;
-    }
+      if (this.activityDataSet) {
+        this.dataSet = this.activityDataSet
+      }
 
-    if (super.connectedCallback) {
-      await super.connectedCallback()
+      if (super.connectedCallback) {
+        await super.connectedCallback()
+      }
     }
-  }
 
-  async firstUpdated() {
-    if (super.firstUpdated) {
-      await super.firstUpdated()
+    async firstUpdated() {
+      if (super.firstUpdated) {
+        await super.firstUpdated()
+      }
     }
-  }
 
-  async pageInitialized() {
-    if (this.isPage) {
-      await this.parseGristConfigs()
-    }
+    async pageInitialized(lifecycle) {
+      if (this.isPage) {
+        await this.parseGristConfigs()
+      }
 
-    if (super.pageInitialized) {
-      await super.pageInitialized()
-    }
-  }
+      this.personalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'meta::basic::ox-grist')
 
-  async pageUpdated(changes, lifecycle, before) {
-    if (this.active) {
-      /* this page is activated */
-      if(this.gridConfig.grid_refresh_when_page_activated) {
-        this.fetch();
+      if (super.pageInitialized) {
+        await super.pageInitialized()
       }
-    } else {
-      /* this page is deactivated */
     }
-  }
 
-  render() {
-    return html`
-      ${MetaApi.getBasicGristHtml(this)}
-      ${this.isPage ? html`` : MetaUiUtil.getButtonContainer(this)}
-    `
-  }
+    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 */
+      }
+    }
 
-  /**
-   * @descrtiption 메뉴 메타에서 기본 그리드 정보 파싱 처리
-   ************************************************
-   * @param {Object} menuMeta 메뉴 메타 정보
-   */
-  parseBasicGridConfigs(menuMeta) {
-    this.gridConfig = menuMeta.grid
-    this.gridColumnConfig = menuMeta.grid_column
-    this.searchConfig = menuMeta.search
-    this.gridEmphasized = menuMeta.gridEmphasized
-  }
+    render() {
+      return html` ${MetaApi.getBasicGristHtml(this)} ${this.isPage ? html`` : MetaUiUtil.getButtonContainer(this)} `
+    }
 
-  /**
-   * @descrtiption 그리스트 구성 정보 파싱 처리
-   ***************************************
-   */
-  async parseGristConfigs() {
-    this.gristConfigSet = await MetaApi.parseGridConfigSet(this)
-  }
+    /**
+     * @descrtiption 메뉴 메타에서 기본 그리드 정보 파싱 처리
+     ************************************************
+     * @param {Object} menuMeta 메뉴 메타 정보
+     */
+    parseBasicGridConfigs(menuMeta) {
+      this.gridConfig = menuMeta.grid
+      this.gridColumnConfig = menuMeta.grid_column
+      this.searchConfig = menuMeta.search
+      this.gridEmphasized = menuMeta.gridEmphasized
+    }
 
-  /********************************************************************
-   *                          C R U D Functions
-   ********************************************************************/
+    /**
+     * @descrtiption 그리스트 구성 정보 파싱 처리
+     ***************************************
+     */
+    async parseGristConfigs() {
+      this.gristConfigSet = await MetaApi.parseGridConfigSet(this)
+    }
 
-  async fetch() {
-    await this.grist.fetch()
-  }
+    /********************************************************************
+     *                          C R U D Functions
+     ********************************************************************/
 
-  back() {
-    history.back()
-  }
+    async fetch() {
+      await this.grist.fetch()
+    }
 
-  async save() {
-    let patches = MetaApi.patchesForUpdateMultiple(this.grist)
-    let result = ValueUtil.isNotEmpty(patches) ? await this.updateMultiple(patches) : false
-    if (result) {
-      this.fetch()
+    back() {
+      history.back()
     }
-  }
 
-  async find() {
-    let ids = MetaApi.getSelectedIdList(this.grist, true)
-    return ValueUtil.isNotEmpty(ids) ? await this.findOne(ids[0]) : {}
-  }
+    async save() {
+      let patches = MetaApi.patchesForUpdateMultiple(this.grist)
+      let result = ValueUtil.isNotEmpty(patches) ? await this.updateMultiple(patches) : false
+      if (result) {
+        this.fetch()
+      }
+    }
 
-  async delete() {
-    let ids = MetaApi.getSelectedIdList(this.grist, true)
-    let result = ValueUtil.isNotEmpty(ids) ? await this.deleteByIds(ids) : false
-    if (result) {
-      this.fetch()
+    async find() {
+      let ids = MetaApi.getSelectedIdList(this.grist, true)
+      return ValueUtil.isNotEmpty(ids) ? await this.findOne(ids[0]) : {}
     }
-  }
 
-  async export() {
-    let exportTitle = TermsUtil.tTitle(ValueUtil.getParams(this.menuInfo, 'title'))
-    return await MetaApi.exportableData(this.isElement, exportTitle, this.grist)
-  }
+    async delete() {
+      let ids = MetaApi.getSelectedIdList(this.grist, true)
+      let result = ValueUtil.isNotEmpty(ids) ? await this.deleteByIds(ids) : false
+      if (result) {
+        this.fetch()
+      }
+    }
 
-  async import() {
-    // TODO 
-  }
+    async export() {
+      let exportTitle = TermsUtil.tTitle(ValueUtil.getParams(this.menuInfo, 'title'))
+      return await MetaApi.exportableData(this.isElement, exportTitle, this.grist)
+    }
 
-  async clear() {
-    if(this.grist) {
-      this.grist.data = { page: 0, total: 0, limit: 0, records:[] };
+    async import() {
+      // TODO
     }
-  }
 
-  getData() {
-    let records = this.grist.___data.records;
-    records = JSON.parse(JSON.stringify(records));
+    async clear() {
+      if (this.grist) {
+        this.grist.data = { page: 0, total: 0, limit: 0, records: [] }
+      }
+    }
 
-    records.forEach(record => {
-      let keys = Object.keys(record);
-      keys.forEach(x => {
-        if(x.startsWith('__')) {
-          delete record[x];
-        }
+    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;
+      return records
+    }
   }
-}

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

@@ -1,3 +1,5 @@
+import { PagePreferenceProviderImpl } from '@things-factory/personalization/dist-client/page-preference-provider-impl.js'
+
 import { MetaApi } from '../utils/meta-api'
 import { MetaUiUtil } from '../utils/meta-ui-util'
 
@@ -184,6 +186,8 @@ export const MetaTabDetailMixin = baseElement =>
         await this.parseGristConfigs()
       }
 
+      this.personalConfigProvider = new PagePreferenceProviderImpl(lifecycle.page, 'meta::tab-detail::ox-grist')
+
       if (super.pageInitialized) {
         await super.pageInitialized()
       }