@things-factory/meta-ui 7.0.1-alpha.1 → 7.0.1-alpha.11

package/client/pages/personalize/personal-column-selector.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element'
+import { css, html, LitElement } from 'lit'
 
 import { i18next, localize } from '@things-factory/i18n-base'
 import { ScrollbarStyles, CommonGristStyles } from '@operato/styles'
@@ -24,66 +24,67 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
       ScrollbarStyles,
       CommonGristStyles,
       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;
-      }
+        :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;
+        }
 
-      h2 {
-        padding: var(--subtitle-padding);
-        font: var(--subtitle-font);
-        color: var(--subtitle-text-color);
-        border-bottom: var(--subtitle-border-bottom);
-      }
+        h2 {
+          padding: var(--subtitle-padding);
+          font: var(--subtitle-font);
+          color: var(--subtitle-text-color);
+          border-bottom: var(--subtitle-border-bottom);
+        }
 
-      .container_detail h2 {
-        margin: var(--grist-title-margin);
-        border: var(--grist-title-border);
-        font: var(--grist-title-font);
-        color: var(--secondary-color);
-      }
+        .container_detail h2 {
+          margin: var(--grist-title-margin);
+          border: var(--grist-title-border);
+          font: var(--grist-title-font);
+          color: var(--secondary-color);
+        }
 
-      .container_detail h2 mwc-icon {
-        vertical-align: middle;
-        margin: var(--grist-title-icon-margin);
-        font-size: var(--grist-title-icon-size);
-        color: var(--grist-title-icon-color);
-      }
+        .container_detail h2 mwc-icon {
+          vertical-align: middle;
+          margin: var(--grist-title-icon-margin);
+          font-size: var(--grist-title-icon-size);
+          color: var(--grist-title-icon-color);
+        }
 
-      h2 {
-        padding-bottom: var(--grist-title-with-grid-padding);
-      }
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-      search-form {
-        overflow: visible;
-      }
+        h2 {
+          padding-bottom: var(--grist-title-with-grid-padding);
+        }
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+        search-form {
+          overflow: visible;
+        }
 
-      .button-container {
-        padding: var(--button-container-padding);
-        margin: var(--button-container-margin);
-        text-align: var(--button-container-align);
-        background-color: var(--button-container-background);
-        height: var(--button-container-height);
-        text-align: right;
-        padding-right: 12px;
-      }`
-    ];
+        .button-container {
+          padding: var(--button-container-padding);
+          margin: var(--button-container-margin);
+          text-align: var(--button-container-align);
+          background-color: var(--button-container-background);
+          height: var(--button-container-height);
+          text-align: right;
+          padding-right: 12px;
+        }
+      `
+    ]
     return styles
   }
 
@@ -104,7 +105,7 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
       },
 
       /**
-       * @description 메뉴 ID 
+       * @description 메뉴 ID
        ******************************
        * @type {String}
        */
@@ -119,7 +120,7 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
    ***************************
    */
   async connectedCallback() {
-    // 메뉴 그룹 그리드 설정  
+    // 메뉴 그룹 그리드 설정
     this.gridConfig = {
       rows: { selectable: false, appendable: false },
       pagination: { infinite: true },
@@ -127,7 +128,7 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
         ...MetaApi.getGristGuttersConfig(false, false),
         MetaApi.getGristColumnConfig('integer', 'rank', 'center', true, false, 80),
         MetaApi.getGristColumnConfig('string', 'name', 'left', false, false, 180),
-        MetaApi.getGristColumnConfig2('string','header', 'display', 'left', false, false, 180),
+        MetaApi.getGristColumnConfig2('string', 'header', 'display', 'left', false, false, 180),
         MetaApi.getGristColumnConfig('boolean', 'hidden', 'center', true, false, 60)
       ]
     }
@@ -142,25 +143,16 @@ 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>
-          <div id="button-container" class="button-container">
-            <mwc-button raised label="${TermsUtil.tButton('reset')}" style="margin-left:7px;margin-top:7px;"
-              @click=${this.reset.bind(this)}>
-            </mwc-button>
-            <mwc-button raised label="${TermsUtil.tButton('delete')}" style="margin-left:7px;margin-top:7px;"
-              @click=${this.delete.bind(this)}>
-            </mwc-button>
-            <mwc-button raised label="${TermsUtil.tButton('save')}" style="margin-left:7px;margin-top:7px;"
-              @click=${this.save.bind(this)}>
-            </mwc-button>
-          </div>
+    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>
+        <div id="button-container" class="button-container">
+          <mwc-button raised label="${TermsUtil.tButton('reset')}" style="margin-left:7px;margin-top:7px;" @click=${this.reset.bind(this)}> </mwc-button>
+          <mwc-button raised label="${TermsUtil.tButton('delete')}" style="margin-left:7px;margin-top:7px;" @click=${this.delete.bind(this)}> </mwc-button>
+          <mwc-button raised label="${TermsUtil.tButton('save')}" style="margin-left:7px;margin-top:7px;" @click=${this.save.bind(this)}> </mwc-button>
         </div>
-      </div>`
+      </div>
+    </div>`
   }
 
   /**
@@ -173,43 +165,42 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
   }
 
   /**
-   * @description 컬럼 조회 
+   * @description 컬럼 조회
    ***************************
-   * @returns 
+   * @returns
    */
   async fetchColumns() {
-    // 팝업 오프너에서 받아온 그리스트의 설정으로 보여준다 
-    let cols = this.configGrist.config.columns;
-    let filterCols = cols.filter(x => x.type != 'gutter' && x.name != 'id' && x.unusable !== true);
-    let rank = 0;
+    // 팝업 오프너에서 받아온 그리스트의 설정으로 보여준다
+    let cols = this.configGrist.config.columns
+    let filterCols = cols.filter(x => x.type != 'gutter' && x.name != 'id' && x.unusable !== true)
+    let rank = 0
 
     let items = filterCols.map(x => {
-      rank = rank + 10;
-      x.rank = rank;
-      return x;
+      rank = rank + 10
+      x.rank = rank
+      return x
     })
 
     return { total: 0, records: items }
   }
 
   /**
-   * @description 개인화 데이터 삭제 
+   * @description 개인화 데이터 삭제
    ***************************
-   * @returns 
+   * @returns
    */
   async delete(e) {
-    let personal = await MetaApi.findMenuGridPersnalTemplate(this.menuId);
-    let { id = undefined } = personal;
+    let personal = await MetaApi.findMenuGridPersnalTemplate(this.menuId)
+    let { id = undefined } = personal
 
     if (id) {
-      let result = await ServiceUtil.deleteListByIds([id], 'deleteGridPersonalizes');
+      let result = await ServiceUtil.deleteListByIds([id], 'deleteGridPersonalizes')
       if (result == true) {
-        history.back();
+        history.back()
       }
     } else {
-      await MetaApi.showToast('info', 'there_is_nothing_to_delete');
+      await MetaApi.showToast('info', 'there_is_nothing_to_delete')
     }
-
   }
 
   /**
@@ -217,59 +208,58 @@ export class PersonalColumnSelector extends localize(i18next)(LitElement) {
    ************************************************
    */
   async reset(e) {
-    await this.grist.fetch();
+    await this.grist.fetch()
   }
 
-
   /**
-   * @description 컬럼 변경 사항 저장 
+   * @description 컬럼 변경 사항 저장
    ************************************************
    */
   async save(e) {
-    // 변경 체크 
-    MetaApi.patchesForUpdateMultiple(this.grist);
+    // 변경 체크
+    MetaApi.patchesForUpdateMultiple(this.grist)
 
-    // 기존 데이터 조회 
-    let personal = await MetaApi.findMenuGridPersnalTemplate(this.menuId);
-    let { id = undefined, template = {} } = personal;
+    // 기존 데이터 조회
+    let personal = await MetaApi.findMenuGridPersnalTemplate(this.menuId)
+    let { id = undefined, template = {} } = personal
 
-    let tempName = "master";
+    let tempName = 'master'
     if (this.configGrist.configName) {
-      tempName = this.configGrist.configName;
+      tempName = this.configGrist.configName
     }
 
-    // 기존 데이터 삭제 
+    // 기존 데이터 삭제
     if (template[tempName]) {
-      delete template[tempName];
+      delete template[tempName]
     }
 
-    // 그리드 설정 데이터 숨김 필드 제외 후 정렬 
-    let records = this.grist.dirtyData.records;
-    let data = records.filter(x => x.hidden == false);
+    // 그리드 설정 데이터 숨김 필드 제외 후 정렬
+    let records = this.grist.dirtyData.records
+    let data = records.filter(x => x.hidden == false)
     data.sort((a, b) => {
-      return a.rank - b.rank;
-    });
+      return a.rank - b.rank
+    })
     template[tempName] = data.map(x => {
       return x.name
-    });
+    })
 
-    let patch = { template: JSON.stringify(template) };
+    let patch = { template: JSON.stringify(template) }
 
-    // 기존에 ID 가 있으면 update 
+    // 기존에 ID 가 있으면 update
     if (id) {
-      patch.id = id;
-      patch.cuFlag = "M";
+      patch.id = id
+      patch.cuFlag = 'M'
     } else {
       patch.menu = {
         id: this.menuId
-      };
-      patch.cuFlag = "+";
+      }
+      patch.cuFlag = '+'
     }
-    await MetaApi.updateMultiple("updateMultipleGridpersonalize", [patch]);
+    await MetaApi.updateMultiple('updateMultipleGridpersonalize', [patch])
 
-    MetaApi.showToast('info', TermsUtil.tText('success to save'));
-    history.back();
+    MetaApi.showToast('info', TermsUtil.tText('success to save'))
+    history.back()
   }
 }
 
-customElements.define('personal-column-selector', PersonalColumnSelector)
+customElements.define('personal-column-selector', PersonalColumnSelector)

package/client/utils/meta-ui-util.js

@@ -13,10 +13,6 @@ import { ServiceUtil } from './service-util'
 import { UiUtil } from './ui-util'
 import { MetaApi } from './meta-api'
 
-import './../pages/personalize/personal-column-selector'
-import './../pages/history/history-copy-list-popup'
-import './../pages/history/history-json-list-popup'
-
 /**
  * @license
  * Copyright © HatioLab Inc. All rights reserved.

package/client/utils/service-util.js

@@ -56,7 +56,7 @@ export class ServiceUtil {
     const response = await client.query({
       query: gql`
         query workCodeByName($name: String!) {
-          workCodeByName(name: $name) {
+          commonCode: workCodeByName(name: $name) {
             details {
               rank
               name
@@ -872,9 +872,9 @@ export class ServiceUtil {
    */
   static async callService(action, filterParam, dataParams) {
     if (action.graphql_type == 'query') {
-      return await this.callQueryService(action, filterParam, dataParams)
+      return await ServiceUtil.callQueryService(action, filterParam, dataParams)
     } else {
-      return await this.callMutationService(action, filterParam, dataParams)
+      return await ServiceUtil.callMutationService(action, filterParam, dataParams)
     }
   }
 
@@ -1226,7 +1226,7 @@ export class ServiceUtil {
         })
 
         if (!response.errors) {
-          if (this.checkClientError(response)) {
+          if (ServiceUtil.checkClientError(response)) {
             if (useMessage === true) UiUtil.showToast('info', TermsUtil.tText('success to process'))
             return response
           }

package/client/utils/terms-util.js

@@ -11,9 +11,9 @@ import { i18next } from '@operato/i18n'
  */
 export class TermsUtil {
   /**
-   * 용어 : 용어 키 - 용어 표현 값 
+   * 용어 : 용어 키 - 용어 표현 값
    */
-  META_TERMS = null
+  static META_TERMS = null
 
   /**
    * @description 서버에 현재 로케일에 맞는 용어를 모두 조회
@@ -24,11 +24,11 @@ export class TermsUtil {
     let res = await TermsUtil.fetchTerminologies(locale)
     let records = res.records
 
-    if(records && records.length > 0) {
-      this.META_TERMS = {};
+    if (records && records.length > 0) {
+      TermsUtil.META_TERMS = {}
       records.forEach(r => {
-        let name = `${r.category}.${r.name}`;
-        this.META_TERMS[name] = r.display;
+        let name = `${r.category}.${r.name}`
+        TermsUtil.META_TERMS[name] = r.display
       })
     }
   }
@@ -40,10 +40,10 @@ export class TermsUtil {
    * @returns {Array} 용어 리스트
    */
   static async fetchTerminologies(locale) {
-    let filters = [{ name : 'locale', operator: 'eq', value : locale }];
-    let sortings = [ { name : 'category' }, { name : 'name' } ];
-    let page = 0; 
-    let limit = 0;
+    let filters = [{ name: 'locale', operator: 'eq', value: locale }]
+    let sortings = [{ name: 'category' }, { name: 'name' }]
+    let page = 0
+    let limit = 0
 
     const response = await client.query({
       query: gql`
@@ -55,14 +55,14 @@ export class TermsUtil {
               category
               display
             }
-  
+
             total
           }
         }
       `,
       variables: { filters, sortings, pagination: { page, limit } }
     })
-  
+
     if (!response.errors) {
       return {
         records: response.data.terminologies.items || [],
@@ -79,8 +79,8 @@ export class TermsUtil {
    * @returns 번역된 라벨 (필드) 명
    */
   static tLabel(labelName, params) {
-    let labelValue = TermsUtil.translate('label', labelName, params, null);
-    return labelValue ? labelValue : TermsUtil.translate('field', labelName, params, labelName);
+    let labelValue = TermsUtil.translate('label', labelName, params, null)
+    return labelValue ? labelValue : TermsUtil.translate('field', labelName, params, labelName)
   }
 
   /**
@@ -91,8 +91,8 @@ export class TermsUtil {
    * @returns 번역된 필드 명
    */
   static tField(fieldName, params) {
-    let fieldValue = TermsUtil.translate('field', fieldName, params, null);
-    return fieldValue ? fieldValue : TermsUtil.translate('field', fieldName, params, fieldName);
+    let fieldValue = TermsUtil.translate('field', fieldName, params, null)
+    return fieldValue ? fieldValue : TermsUtil.translate('field', fieldName, params, fieldName)
   }
 
   /**
@@ -101,8 +101,8 @@ export class TermsUtil {
    * @param {String} buttonName
    * @returns 번역된 버튼 명
    */
-   static tButton(buttonName) {
-    return TermsUtil.translate('button', buttonName, null, buttonName);
+  static tButton(buttonName) {
+    return TermsUtil.translate('button', buttonName, null, buttonName)
   }
 
   /**
@@ -113,8 +113,8 @@ export class TermsUtil {
    * @returns 번역된 타이틀 명
    */
   static tTitle(titleName, params) {
-    let titleValue = TermsUtil.translate('title', titleName, params, null);
-    return titleValue ? titleValue : TermsUtil.translate('menu', titleName, params, titleName);
+    let titleValue = TermsUtil.translate('title', titleName, params, null)
+    return titleValue ? titleValue : TermsUtil.translate('menu', titleName, params, titleName)
   }
 
   /**
@@ -123,12 +123,11 @@ export class TermsUtil {
    * @param {String} menuName
    * @returns 번역된 메뉴 명
    */
-   static tMenu(menuName) {
-    let menuValue = TermsUtil.translate('menu', menuName, null, null);
-    return menuValue ? menuValue : TermsUtil.translate('title', menuName, null, menuName);
+  static tMenu(menuName) {
+    let menuValue = TermsUtil.translate('menu', menuName, null, null)
+    return menuValue ? menuValue : TermsUtil.translate('title', menuName, null, menuName)
   }
 
-
   /**
    * @description 텍스트 textName을 다국어 변환하여 리턴
    ***********************************************
@@ -137,7 +136,7 @@ export class TermsUtil {
    * @returns 번역된 텍스트 값
    */
   static tText(textName, params) {
-    return TermsUtil.translate('text', textName, params, textName);
+    return TermsUtil.translate('text', textName, params, textName)
   }
 
   /**
@@ -147,8 +146,8 @@ export class TermsUtil {
    * @param {Object} params
    * @returns 번역된 에러 메시지
    */
-   static tError(errorName, params) {
-    return TermsUtil.translate('error', errorName, params, errorName);
+  static tError(errorName, params) {
+    return TermsUtil.translate('error', errorName, params, errorName)
   }
 
   /**
@@ -161,33 +160,33 @@ export class TermsUtil {
    * @returns termKey 다국어 변환 값
    */
   static translate(termCategory, termName, parameters, defaultValue) {
-    let termKey = termCategory + '.' + termName;
-    return TermsUtil.t(termKey, parameters, defaultValue);
+    let termKey = termCategory + '.' + termName
+    return TermsUtil.t(termKey, parameters, defaultValue)
   }
 
   /**
    * @description termKey로 다국어 변환하여 parameters로 파라미터 처리하여 리턴, 변환값이 없다면 defaultValue 리턴, defaultValue가 없다면 null 리턴
    ***********************************************
-   * @param {String} termKey 용어 키 : {용어 카테고리}'.'{용어 이름} 
+   * @param {String} termKey 용어 키 : {용어 카테고리}'.'{용어 이름}
    * @param {Object} parameters 용어 이름에 파라미터가 있는 경우 파라미터 치환 처리할 오브젝트 데이터 {key1 : value1, key2 : value2} 형식 ...
    * @param {String} defaultValue
    * @returns termKey 다국어 변환 값
    */
-   static t(termKey, parameters, defaultValue) {
-    let translated = this.META_TERMS ? this.META_TERMS[termKey] : null;
-    translated = translated ? translated : i18next.t(termKey);
-
-    if (translated && (termKey != translated)) {
-      if(parameters) {
-        Object.keys(parameters).forEach(function(param) {
-          var bracedData = '\\' + '{' + param.replace(/\$/, '\\$') + '\\' + '}';
-          var regEx = new RegExp(bracedData, "gi");
-          translated = translated.replace(regEx, parameters[param]);
-        });
+  static t(termKey, parameters, defaultValue) {
+    let translated = TermsUtil.META_TERMS ? TermsUtil.META_TERMS[termKey] : null
+    translated = translated ? translated : i18next.t(termKey)
+
+    if (translated && termKey != translated) {
+      if (parameters) {
+        Object.keys(parameters).forEach(function (param) {
+          var bracedData = '\\' + '{' + param.replace(/\$/, '\\$') + '\\' + '}'
+          var regEx = new RegExp(bracedData, 'gi')
+          translated = translated.replace(regEx, parameters[param])
+        })
       }
       return translated
     } else {
       return defaultValue
     }
   }
-}
+}

package/client/utils/ui-util.js

@@ -7,7 +7,6 @@ import { getEditor } from '@operato/data-grist'
 
 import { TermsUtil } from './terms-util'
 import { ValueUtil } from './value-util'
-import { MetaUiUtil } from './meta-ui-util'
 
 /**
  * @license
@@ -102,9 +101,7 @@ export class UiUtil {
    */
   static async openDynamicPopup(title, popupConfig, paramData, popupCloseCallback) {
     // 부모 필드
-    let parentValue = ValueUtil.isNotEmpty(popupConfig.parent_field)
-      ? ValueUtil.getParams(paramData, ...popupConfig.parent_field.split('.'))
-      : undefined
+    let parentValue = ValueUtil.isNotEmpty(popupConfig.parent_field) ? ValueUtil.getParams(paramData, ...popupConfig.parent_field.split('.')) : undefined
 
     // 팝업 엘리먼트 생성
     let htmlText = `<${popupConfig.tagname} route_name='${popupConfig.menu}' parent_id='${parentValue}' is_popup=true></${popupConfig.tagname}>`
@@ -255,7 +252,7 @@ export class UiUtil {
    * @returns {Object} 필터 폼 내의 에디터들이 가지고 있는 값을 키-값 형태로 추출
    */
   static getFilterFormData(filterForm) {
-    let formValues = {};
+    let formValues = {}
 
     if (ValueUtil.isNotEmpty(filterForm)) {
       let filters = filterForm.filters()

package/client/viewparts/dynamic-menu-part.js

@@ -1,6 +1,6 @@
 import '@material/mwc-icon'
-import './dynamic-menu-portrait'
-import './dynamic-menu-landscape'
+import '@operato/menu/ox-menu-portrait.js'
+import '@operato/menu/ox-menu-landscape.js'
 
 import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers'
@@ -9,10 +9,7 @@ import { store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
 function isActiveMenu(menu, path) {
-  return (
-    menu.path?.split('?')[0] === path ||
-    (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))
-  )
+  return menu.path?.split('?')[0] === path || (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))
 }
 
 export class DynamicMenuPart extends connect(store)(LitElement) {
@@ -42,14 +39,6 @@ export class DynamicMenuPart extends connect(store)(LitElement) {
           background-color: var(--theme-white-color);
         }
 
-        :host::before {
-          content: '';
-          position: absolute;
-          width: 100%;
-          height: 3px;
-          background-color: rgba(0, 0, 0, 0.1);
-        }
-
         :host([landscape]) {
           overflow-x: auto;
           flex-direction: row;
@@ -57,8 +46,8 @@ export class DynamicMenuPart extends connect(store)(LitElement) {
           min-height: 20px;
         }
 
-        dynamic-menu-portrait,
-        dynamic-menu-landscape {
+        ox-menu-portrait,
+        ox-menu-landscape {
           flex: 1;
         }
       `
@@ -69,18 +58,8 @@ export class DynamicMenuPart extends connect(store)(LitElement) {
     return html`
       <slot name="head"></slot>
       ${this.orientation !== 'landscape'
-        ? html`<dynamic-menu-portrait
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></dynamic-menu-portrait>`
-        : html`<dynamic-menu-landscape
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></dynamic-menu-landscape>`}
+        ? html`<ox-menu-portrait .menus=${this.menus} .activeTopLevel=${this._activeTopLevel} .activeMenu=${this._activeMenu} .path=${this._path}></ox-menu-portrait>`
+        : html`<ox-menu-landscape .menus=${this.menus} .activeTopLevel=${this._activeTopLevel} .activeMenu=${this._activeMenu} .path=${this._path}></ox-menu-landscape>`}
       <slot name="tail"></slot>
     `
   }