@things-factory/meta-ui 7.0.1-alpha.24 → 7.0.1-alpha.29

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

@@ -1,6 +1,8 @@
+import '@material/web/icon/icon.js'
+
 import { css, html, LitElement } from 'lit'
 import { CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
-import { TermsUtil } from '../../utils/terms-util';
+import { TermsUtil } from '../../utils/terms-util'
 import { ValueUtil } from '../../utils/value-util'
 import { ServiceUtil } from '../../utils/service-util'
 import { MetaApi } from '../../utils/meta-api'
@@ -8,7 +10,6 @@ import { MetaUiUtil } from '../../utils/meta-ui-util'
 import { isMobileDevice } from '@operato/utils'
 import { closePopup } from '@operato/popup'
 
-
 export class MetaObjectSelectorPopup extends LitElement {
   static styles = [
     CommonGristStyles,
@@ -27,25 +28,17 @@ export class MetaObjectSelectorPopup extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
   async connectedCallback() {
-
     // 숨김 검색 조건
-    this.search_hidden_fields = this.options.filters 
-                              ? this.options.filters 
-                              : (this.basicArgs && this.basicArgs.filters ? this.basicArgs.filters : []);
+    this.search_hidden_fields = this.options.filters ? this.options.filters : this.basicArgs && this.basicArgs.filters ? this.basicArgs.filters : []
 
     this.search_hidden_fields = this.search_hidden_fields.map(x => {
-      let {name, operator, value} = x;
+      let { name, operator, value } = x
 
-      if(value.startsWith('::')) {
+      if (value.startsWith('::')) {
         value = ValueUtil.getParams(this.record, ...value.substring(2).split('.'))
       }
 
@@ -56,29 +49,27 @@ export class MetaObjectSelectorPopup extends LitElement {
       }
     })
 
+    // 기본 정렬
+    let sortFields = this.options.sorters ? this.options.sorters : this.basicArgs && this.basicArgs.sorters ? this.basicArgs.sorters : []
 
-    // 기본 정렬                          
-    let sortFields = this.options.sorters
-                  ? this.options.sorters 
-                  : (this.basicArgs && this.basicArgs.sorters ? this.basicArgs.sorters : []);
-
-                              
-    // 기본 검색 조건 
+    // 기본 검색 조건
     let filterFields = this.options.filterFields
-                     ? this.options.filterFields 
-                     : (this.options.menu_template?.search && this.options.menu_template?.search.length > 0 ? this.options.menu_template.search : []);
+      ? this.options.filterFields
+      : this.options.menu_template?.search && this.options.menu_template?.search.length > 0
+      ? this.options.menu_template.search
+      : []
 
-    // 그리드 컬럼                  
-    let gridColumns = this.options.select ;
+    // 그리드 컬럼
+    let gridColumns = this.options.select
 
     // 기본 검색 조건이 없으면 코드 (code-selector), 또는 이름 (object-selector)
-    if(!filterFields || filterFields.length == 0){
-      let defaultFilter = undefined;
-      
-      if(this.options.codeField) defaultFilter = this.options.codeField;
-      if(this.options.nameField) defaultFilter = this.options.nameField;
+    if (!filterFields || filterFields.length == 0) {
+      let defaultFilter = undefined
+
+      if (this.options.codeField) defaultFilter = this.options.codeField
+      if (this.options.nameField) defaultFilter = this.options.nameField
 
-      if(defaultFilter){
+      if (defaultFilter) {
         filterFields.push({
           name: defaultFilter,
           operator: 'eq'
@@ -86,97 +77,96 @@ export class MetaObjectSelectorPopup extends LitElement {
       }
     }
 
-    let selectFields = [...MetaApi.getGristGuttersConfig(true, false)];
+    let selectFields = [...MetaApi.getGristGuttersConfig(true, false)]
 
-    if(gridColumns && gridColumns.length > 0){
-      for(let idx = 0 ; idx < gridColumns.length; idx++){
+    if (gridColumns && gridColumns.length > 0) {
+      for (let idx = 0; idx < gridColumns.length; idx++) {
         let {
           type = 'string',
           name,
           hidden = false,
-          record = { align: 'left'},
+          record = { align: 'left' },
           header = undefined,
-          sortable= false,
-          width= 135,
+          sortable = false,
+          width = 135,
           options = undefined,
           select_opt = undefined,
           object_opt = undefined
-        } = gridColumns[idx];
+        } = gridColumns[idx]
 
-        if(select_opt) options = select_opt;
-        if(object_opt) options = object_opt;
+        if (select_opt) options = select_opt
+        if (object_opt) options = object_opt
 
-        if(['resource-object','object'].includes(type)){
-          type = 'meta-object-selector';
-        } else if (['resource-code-selector'].includes(type)){
-          type = 'meta-code-selector';
+        if (['resource-object', 'object'].includes(type)) {
+          type = 'meta-object-selector'
+        } else if (['resource-code-selector'].includes(type)) {
+          type = 'meta-code-selector'
         }
 
-        if(name == 'id'){
+        if (name == 'id') {
           selectFields.push({
             type: 'string',
             name: name,
             hidden: true
           })
         } else {
-          if(type == 'boolean-all'){
-            type = 'boolean';
+          if (type == 'boolean-all') {
+            type = 'boolean'
           }
 
-          let columnConfig =  MetaApi.getGristColumnConfig2(type, name, header?header:name, record.align ? record.align : 'left', false, sortable, width);
+          let columnConfig = MetaApi.getGristColumnConfig2(type, name, header ? header : name, record.align ? record.align : 'left', false, sortable, width)
 
-
-          if(type.startsWith('meta-') && object_opt && object_opt.menu){
-            options = await MetaUiUtil.getGristMetaObjectOptions(type, options);
+          if (type.startsWith('meta-') && object_opt && object_opt.menu) {
+            options = await MetaUiUtil.getGristMetaObjectOptions(type, options)
           }
 
-          if (type === 'select'){
+          if (type === 'select') {
             if (Array.isArray(options)) {
-              columnConfig.record.options = options;
+              columnConfig.record.options = options
             } else {
-              if (options.type === 'code') { // 공통 코드 
-                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);
-              } else if (options.type === 'entity'){ // 엔티티 
+              if (options.type === 'code') {
+                // 공통 코드
+                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)
+              } else if (options.type === 'entity') {
+                // 엔티티
                 columnConfig.record.options = await ServiceUtil.getCodeByEntity(options.args)
               }
             }
           } else if (type === 'meta-object-selector') {
             // object-option
-            columnConfig.record.options = {...options};
-
-          } else if( type == 'meta-code-selector'){
-            if(options.dispField){
-              options.codes = await ServiceUtil.getCodeByEntity(options);
+            columnConfig.record.options = { ...options }
+          } else if (type == 'meta-code-selector') {
+            if (options.dispField) {
+              options.codes = await ServiceUtil.getCodeByEntity(options)
             }
 
-            columnConfig.record.options = {...options};
+            columnConfig.record.options = { ...options }
           }
 
+          columnConfig.hidden = hidden
 
-          columnConfig.hidden = hidden;
-
-          selectFields.push(columnConfig);          
+          selectFields.push(columnConfig)
         }
       }
     } else {
-      selectFields.push(MetaApi.getGristColumnConfig2('string', this.options.codeField, this.options.codeField, 'left', false, true, 180));
+      selectFields.push(MetaApi.getGristColumnConfig2('string', this.options.codeField, this.options.codeField, 'left', false, true, 180))
 
-      if(this.options.dispField){
-        selectFields.push(MetaApi.getGristColumnConfig2('string', this.options.dispField, this.options.dispField, 'left', false, true, 300));
+      if (this.options.dispField) {
+        selectFields.push(MetaApi.getGristColumnConfig2('string', this.options.dispField, this.options.dispField, 'left', false, true, 300))
       }
     }
 
-    selectFields.forEach(x=>{
-      let filters = filterFields.filter(y => typeof y === 'string' ? x.name == y : x.name == y.name);
+    selectFields.forEach(x => {
+      let filters = filterFields.filter(y => (typeof y === 'string' ? x.name == y : x.name == y.name))
 
-      if(filters && filters.length > 0 ){
-        x.filter = typeof filters[0] === 'string' ? 'search' : filters[0];
+      if (filters && filters.length > 0) {
+        x.filter = typeof filters[0] === 'string' ? 'search' : filters[0]
       }
     })
 
-
     let gridConfig = {
       rows: MetaApi.getGristSelectableConfig(false),
       pagination: MetaApi.getGristPagination100Config(),
@@ -184,28 +174,27 @@ export class MetaObjectSelectorPopup extends LitElement {
       sorters: [...sortFields]
     }
 
-    gridConfig.rows.handlers = { 
+    gridConfig.rows.handlers = {
       click: 'select-row-toggle',
-      dblclick: ((columns, data, column, record, rowIndex, field) => {
+      dblclick: (columns, data, column, record, rowIndex, field) => {
         this.selectRecord(record)
-      })
-    } 
+      }
+    }
 
-    gridConfig.rows.appendable = false;  
+    gridConfig.rows.appendable = false
 
-    this.gridConfig = gridConfig;
+    this.gridConfig = gridConfig
 
-    await super.connectedCallback();
+    await super.connectedCallback()
   }
 
-  async firstUpdated(){
-    await super.firstUpdated();
+  async firstUpdated() {
+    await super.firstUpdated()
   }
 
-  render(){
+  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">
           <div id="filters">
             <ox-filters-form></ox-filters-form>
@@ -213,102 +202,93 @@ export class MetaObjectSelectorPopup extends LitElement {
         </div>
       </ox-grist>
       <div id="button-container" class="button-container">
-        <mwc-button raised label="${TermsUtil.tButton('empty')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickEmpty.bind(this)}>
-        </mwc-button>
-        <mwc-button raised label="${TermsUtil.tButton('cancel')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickCancel.bind(this)}>
-        </mwc-button>
-        <mwc-button raised label="${TermsUtil.tButton('select')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickSelect.bind(this)}>
-        </mwc-button>
+        <button @click=${this.clickEmpty.bind(this)}><md-icon>clear_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}</button>
+        <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>
       </div>
     `
   }
 
-
   /**
    * @description 그리드 리턴
    **************************
    * @returns {Object} 그리드
    */
-   get grist() {
+  get grist() {
     return this.shadowRoot.querySelector('#ox-grist')
   }
 
   /**
-   * @description 컬럼 조회 
+   * @description 컬럼 조회
    ***************************
-   * @returns 
+   * @returns
    */
-  async fetchHandler({ page= 0, limit= 0, sorters= [], filters= [] }) {
+  async fetchHandler({ page = 0, limit = 0, sorters = [], filters = [] }) {
+    let resFilter = [...this.search_hidden_fields]
 
-    let resFilter = [...this.search_hidden_fields];
-
-    filters.forEach(x=>{
-      let dupFilter = resFilter.filter(y=> x.name == y.name)
-      if(dupFilter && dupFilter.length > 0){
-        delete resFilter[x.name];
+    filters.forEach(x => {
+      let dupFilter = resFilter.filter(y => x.name == y.name)
+      if (dupFilter && dupFilter.length > 0) {
+        delete resFilter[x.name]
       }
 
-      resFilter.push(x);
+      resFilter.push(x)
     })
 
-
-    let queryAfterSetFields = ValueUtil.getParams((this.options.menu_template ? this.options.menu_template.gql||{} : {}), 'query', 'after_set_fields');
+    let queryAfterSetFields = ValueUtil.getParams(this.options.menu_template ? this.options.menu_template.gql || {} : {}, 'query', 'after_set_fields')
     let selectSkipFields = Object.keys(queryAfterSetFields || {})
 
     // 조회 컬럼 추출 후 조회
     let selectFields = MetaApi.getSelectColumns(this.gridConfig.columns.filter(x => !selectSkipFields.includes(x.name)))
 
-    // 조회 실행 
+    // 조회 실행
     let result = await MetaApi.searchByPagination(this.options.queryName, resFilter, sorters, page, limit, selectFields)
 
-    return result;
-  }  
+    return result
+  }
 
   /**
    * @description 비우기
    ***************************
-   * @returns 
+   * @returns
    */
-  async clickEmpty(e){
+  async clickEmpty(e) {
     this.confirmCallback && this.confirmCallback(null)
     closePopup(this)
   }
   /**
-   * @description 취소 
+   * @description 취소
    ***************************
-   * @returns 
+   * @returns
    */
-  async clickCancel(e){
+  async clickCancel(e) {
     closePopup(this)
   }
   /**
-   * @description 선택 
+   * @description 선택
    ***************************
-   * @returns 
+   * @returns
    */
-  async clickSelect(e){
-    let selected = this.grist.selected;
+  async clickSelect(e) {
+    let selected = this.grist.selected
 
-    if(!selected || selected.length == 0){
-      MetaApi.showToast('info', TermsUtil.tText('NOTHING_SELECTED'));
-      return;
+    if (!selected || selected.length == 0) {
+      MetaApi.showToast('info', TermsUtil.tText('NOTHING_SELECTED'))
+      return
     }
 
-    this.selectRecord(selected[0]);
+    this.selectRecord(selected[0])
   }
 
   /**
-   * @description 확정  
+   * @description 확정
    ***************************
-   * @param {*} record 
+   * @param {*} record
    */
-  async selectRecord(record){
+  async selectRecord(record) {
     this.confirmCallback && this.confirmCallback(record)
     closePopup(this)
   }
 }
-  
-customElements.define('meta-object-selector-popup', MetaObjectSelectorPopup)
+
+customElements.define('meta-object-selector-popup', MetaObjectSelectorPopup)

package/client/component/popup/record-based-code-editor-popup.js

@@ -1,8 +1,10 @@
+import '@material/web/icon/icon.js'
+
 import { css, html, LitElement } from 'lit'
 import { CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
-import { TermsUtil } from '../../utils/terms-util';
-import { MetaApi } from "../../utils/meta-api"
-import { ServiceUtil } from "../../utils/service-util"
+import { TermsUtil } from '../../utils/terms-util'
+import { MetaApi } from '../../utils/meta-api'
+import { ServiceUtil } from '../../utils/service-util'
 import '@operato/input/ox-input-code.js'
 import { closePopup } from '@operato/popup'
 
@@ -25,15 +27,10 @@ export class RecordBasedCodeEditorPopup extends LitElement {
       }
 
       ox-input-code {
-        margin:10px;
+        margin: 10px;
         overflow-y: auto;
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -61,52 +58,47 @@ export class RecordBasedCodeEditorPopup extends LitElement {
    }
    */
   async connectedCallback() {
-    this.value = this.record[this.config.value_field] ? this.record[this.config.value_field] : '';
+    this.value = this.record[this.config.value_field] ? this.record[this.config.value_field] : ''
 
-    if(typeof this.value === 'object') {
-      this.codeValue = JSON.stringify(this.value, 0, 2);
+    if (typeof this.value === 'object') {
+      this.codeValue = JSON.stringify(this.value, 0, 2)
     } else {
-      this.codeValue = this.value;
+      this.codeValue = this.value
     }
 
-    await super.connectedCallback();
+    await super.connectedCallback()
   }
 
   async firstUpdated() {
-    await super.firstUpdated();
+    await super.firstUpdated()
   }
 
   render() {
-    let addSaveBtn = this.config.save_action ? true : false;
+    let addSaveBtn = this.config.save_action ? true : false
 
-    if(addSaveBtn) {
+    if (addSaveBtn) {
       return html`
-      <ox-input-code mode="javascript" value=${this.codeValue} tab-size="2" tab-as-space="true"></ox-input-code>
-      <div id="button-container" class="button-container">
-        <mwc-button raised label="${TermsUtil.tButton('cancel')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickCancel.bind(this)}>
-        </mwc-button>
-        <mwc-button raised label="${TermsUtil.tButton('save')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickSave.bind(this)}>
-        </mwc-button>
-      </div>
-    `
+        <ox-input-code mode="javascript" value=${this.codeValue} tab-size="2" tab-as-space="true"></ox-input-code>
+
+        <div id="button-container" class="button-container">
+          <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
+          <button @click=${this.clickSave.bind(this)}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
+        </div>
+      `
     } else {
       return html`
-      <ox-input-code mode="javascript" value=${this.codeValue} tab-size="2" tab-as-space="true"></ox-input-code>
-      <div id="button-container" class="button-container">
-        <mwc-button raised label="${TermsUtil.tButton('cancel')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickCancel.bind(this)}>
-        </mwc-button>
-      </div>
-    `
+        <ox-input-code mode="javascript" value=${this.codeValue} tab-size="2" tab-as-space="true"></ox-input-code>
+        <div id="button-container" class="button-container">
+          <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
+        </div>
+      `
     }
   }
 
   /**
    * @description 코드편집기 엘리먼트
    ***************************
-   * @returns 
+   * @returns
    */
   get codeEditor() {
     return this.shadowRoot.querySelector('ox-input-code')
@@ -115,32 +107,31 @@ export class RecordBasedCodeEditorPopup extends LitElement {
   /**
    * @description 저장
    ***************************
-   * @returns 
+   * @returns
    */
   async clickSave(e) {
-    if(this.codeValue === this.codeEditor.value) {
-      MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'));
+    if (this.codeValue === this.codeEditor.value) {
+      MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'))
     } else {
       let saveAction = this.config.save_action
       let saveFuncName = saveAction.func_name
-      let patch = { id : this.record.id, cuFlag : 'M' }
+      let patch = { id: this.record.id, cuFlag: 'M' }
       patch[this.config.value_field] = this.codeEditor.value
       let response = await ServiceUtil.updateOne(saveFuncName, this.record.id, patch)
-      if(response) {
+      if (response) {
         closePopup(this)
       }
     }
   }
 
-
   /**
-   * @description 취소 
+   * @description 취소
    ***************************
-   * @returns 
+   * @returns
    */
   async clickCancel(e) {
     closePopup(this)
   }
 }
-  
-customElements.define('record-based-code-editor-popup', RecordBasedCodeEditorPopup)
+
+customElements.define('record-based-code-editor-popup', RecordBasedCodeEditorPopup)