@things-factory/meta-ui 7.0.1-alpha.61 → 7.0.1-alpha.63

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/pages/personalize/{personal-column-selector.js → personal-column-selector.ts}

@@ -1,13 +1,18 @@
 import '@material/web/icon/icon.js'
 
+import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { DataGrist } from '@operato/data-grist'
 import { ScrollbarStyles, CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
 
 import { TermsUtil } from './../../utils/terms-util'
 import { MetaApi } from '../../utils/meta-api'
 import { ServiceUtil } from '../../utils/service-util'
+import { UiUtil } from '../../utils/ui-util'
 
 /**
  * @license
@@ -15,103 +20,91 @@ import { ServiceUtil } from '../../utils/service-util'
  * @author Yang <wryang@hatiolab.com>
  * @description 사용자 그리드 컬럼 개인화 팝업
  */
+
+@customElement('personal-column-selector')
 export class PersonalColumnSelector extends localize(i18next)(LitElement) {
   /**
    * @description 스타일 정의
    ***********************************
    * @returns {Object} 화면의 스타일 정의
    */
-  static get styles() {
-    let styles = [
-      ScrollbarStyles,
-      CommonGristStyles,
-      ButtonContainerStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-x: auto;
-        }
-        .container {
-          flex: 1;
-          display: grid;
-          overflow: hidden;
-        }
-        .container_detail {
-          background-color: var(--main-section-background-color);
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-x: auto;
+      }
 
-        h2 {
-          padding: var(--subtitle-padding);
-          font: var(--subtitle-font);
-          color: var(--subtitle-text-color);
-          border-bottom: var(--subtitle-border-bottom);
-        }
+      .container {
+        flex: 1;
+        display: grid;
+        overflow: hidden;
+      }
 
-        .container_detail h2 {
-          margin: var(--grist-title-margin);
-          border: var(--grist-title-border);
-          font: var(--grist-title-font);
-          color: var(--secondary-color);
-        }
+      .container_detail {
+        background-color: var(--main-section-background-color);
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow-y: auto;
+      }
 
-        .container_detail h2 md-icon {
-          --md-icon-size: var(--grist-title-icon-size);
-          vertical-align: middle;
-          margin: var(--grist-title-icon-margin);
-          color: var(--grist-title-icon-color);
-        }
+      h2 {
+        padding: var(--subtitle-padding);
+        font: var(--subtitle-font);
+        color: var(--subtitle-text-color);
+        border-bottom: var(--subtitle-border-bottom);
+      }
 
-        h2 {
-          padding-bottom: var(--grist-title-with-grid-padding);
-        }
+      .container_detail h2 {
+        margin: var(--grist-title-margin);
+        border: var(--grist-title-border);
+        font: var(--grist-title-font);
+        color: var(--secondary-color);
+      }
 
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
+      .container_detail h2 md-icon {
+        --md-icon-size: var(--grist-title-icon-size);
+        vertical-align: middle;
+        margin: var(--grist-title-icon-margin);
+        color: var(--grist-title-icon-color);
+      }
 
-        ox-filters-form {
-          flex: 1;
-        }
-      `
-    ]
-    return styles
-  }
+      h2 {
+        padding-bottom: var(--grist-title-with-grid-padding);
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    `
+  ]
 
   /**
-   * @description 프로퍼티 정의
-   ***********************************
-   * @returns {Object} 화면의 프로퍼티 정의
+   * @description 선택된 그리드
    */
-  static get properties() {
-    return {
-      /**
-       * @description 선택된 그리드
-       ****************************
-       * @type {Object}
-       */
-      configGrist: {
-        type: Object
-      },
-
-      /**
-       * @description 메뉴 ID
-       ******************************
-       * @type {String}
-       */
-      menuId: {
-        type: String
-      }
-    }
-  }
+  @property({ type: Object }) configGrist: any
+
+  /**
+   * @description 메뉴 ID
+   */
+  @property({ type: String }) menuId!: string
+
+  @query('ox-grist') private grist!: DataGrist
+
+  private gridConfig: any
 
   /**
-   * @description 라이트 사이클
+   * @description 라이프 사이클
    ***************************
    */
   async connectedCallback() {
@@ -128,9 +121,7 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
       ]
     }
 
-    if (super.connectedCallback) {
-      await super.connectedCallback()
-    }
+    await super.connectedCallback()
   }
 
   /**
@@ -140,27 +131,27 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
   render() {
     return html` <div id="container" class="container">
       <div class="container_detail">
-        <ox-grist id="ox-grist" .config=${this.gridConfig} .mode=${'GRID'} auto-fetch .fetchHandler=${this.fetchColumns.bind(this)}> </ox-grist>
+        <ox-grist
+          id="ox-grist"
+          .config=${this.gridConfig}
+          .mode=${'GRID'}
+          auto-fetch
+          .fetchHandler=${this.fetchColumns.bind(this)}
+        >
+        </ox-grist>
 
         <div class="button-container" style="margin-left:unset">
           <button @click=${this.reset.bind(this)}><md-icon>restart_alt</md-icon>${TermsUtil.tButton('reset')}</button>
           <div filler></div>
           <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
-          <button danger @click=${this.delete.bind(this)}><md-icon>delete</md-icon>${TermsUtil.tButton('delete')}</button>
+          <button danger @click=${this.delete.bind(this)}>
+            <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+          </button>
         </div>
       </div>
     </div>`
   }
 
-  /**
-   * @description 그리드 리턴
-   **************************
-   * @returns {Object} 그리드
-   */
-  get grist() {
-    return this.shadowRoot.querySelector('#ox-grist')
-  }
-
   /**
    * @description 컬럼 조회
    ***************************
@@ -186,8 +177,8 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
    ***************************
    * @returns
    */
-  async delete(e) {
-    let personal = await MetaApi.findMenuGridPersnalTemplate(this.menuId)
+  async delete(e: MouseEvent) {
+    let personal = await MetaApi.getMyMenuGridPersnal(this.menuId)
     let { id = undefined } = personal
 
     if (id) {
@@ -204,7 +195,7 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
    * @description 개인화 그리드 초기화
    ************************************************
    */
-  async reset(e) {
+  async reset(e: MouseEvent) {
     await this.grist.fetch()
   }
 
@@ -212,13 +203,12 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
    * @description 컬럼 변경 사항 저장
    ************************************************
    */
-  async save(e) {
+  async save(e: MouseEvent) {
     // 변경 체크
     MetaApi.patchesForUpdateMultiple(this.grist)
 
     // 기존 데이터 조회
-    let personal = await MetaApi.findMenuGridPersnalTemplate(this.menuId)
-    let { id = undefined, template = {} } = personal
+    const { template = {} } = (await MetaApi.getMyMenuGridPersnal(this.menuId)) || {}
 
     let tempName = 'master'
     if (this.configGrist.configName) {
@@ -240,23 +230,30 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
       return x.name
     })
 
-    let patch = { template: JSON.stringify(template) }
+    try {
+      const response = await client.query({
+        query: gql`
+          mutation ($menuId: String!, $template: Object!) {
+            saveMyGridpersonalize(menuId: $menuId, template: $template) {
+              id
+            }
+          }
+        `,
+        variables: {
+          menuId: this.menuId,
+          template
+        }
+      })
 
-    // 기존에 ID 가 있으면 update
-    if (id) {
-      patch.id = id
-      patch.cuFlag = 'M'
-    } else {
-      patch.menu = {
-        id: this.menuId
+      if (!response.errors) {
+        UiUtil.showToast('info', TermsUtil.tText('success to save'))
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
       }
-      patch.cuFlag = '+'
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
     }
-    await MetaApi.updateMultiple('updateMultipleGridpersonalize', [patch])
 
-    MetaApi.showToast('info', TermsUtil.tText('success to save'))
     history.back()
   }
 }
-
-customElements.define('personal-column-selector', PersonalColumnSelector)

package/client/utils/meta-api.js

@@ -349,7 +349,7 @@ export class MetaApi {
   /**
    * @description 그리스트에서 변경, 추가된 내용 추출
    ********************************************
-   * @param {Array} grist 그리스트
+   * @param {Object} grist 그리스트
    * @returns {Array} 그리스트에서 변경, 추가된 데이터 리스트
    */
   static patchesForUpdateMultiple(grist) {
@@ -403,8 +403,8 @@ export class MetaApi {
    * @param {String} menuId 메뉴 ID 값
    * @returns {Object} 그리드 컬럼 개인화 정보
    */
-  static async findMenuGridPersnalTemplate(menuId) {
-    return await ServiceUtil.searchMenuGridPersnalTemplate(menuId)
+  static async getMyMenuGridPersnal(menuId) {
+    return await ServiceUtil.getMyMenuGridPersnal(menuId)
   }
 
   /**
@@ -593,7 +593,15 @@ export class MetaApi {
    * @returns {Object} 그리스트 기본 컬럼 설정
    */
   static async getGristCodeSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, codeName) {
-    return await MetaUiUtil.getGristCodeSelectorColumnConfig(name, displayName, align, sortable, width, mandatory, codeName)
+    return await MetaUiUtil.getGristCodeSelectorColumnConfig(
+      name,
+      displayName,
+      align,
+      sortable,
+      width,
+      mandatory,
+      codeName
+    )
   }
 
   /**