@things-factory/meta-ui 7.0.1-alpha.8 → 7.0.1-alpha.81

package/client/component/popup/code-input-editor-popup.js

@@ -1,7 +1,9 @@
+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 { ButtonContainerStyles } from '@operato/styles'
+import { TermsUtil } from '../../utils/terms-util'
+import { MetaApi } from '../../utils/meta-api'
 import '@operato/input/ox-input-code.js'
 import { closePopup } from '@operato/popup'
 
@@ -10,7 +12,6 @@ import { closePopup } from '@operato/popup'
  */
 export class CodeInputEditorPopup extends LitElement {
   static styles = [
-    CommonGristStyles,
     ButtonContainerStyles,
     css`
       :host {
@@ -24,47 +25,36 @@ export class CodeInputEditorPopup extends LitElement {
       }
 
       ox-input-code {
-        margin:10px;
+        margin: 10px;
         overflow-y: auto;
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
-  async connectedCallback(){
-    
-    if(typeof this.value === 'object'){
-      this.codeVlaue = JSON.stringify(this.value, 0, 2);
+  async connectedCallback() {
+    if (typeof this.value === 'object') {
+      this.codeVlaue = JSON.stringify(this.value, 0, 2)
     } else {
-      this.codeVlaue = this.value;
-
+      this.codeVlaue = this.value
     }
 
-    await super.connectedCallback();
+    await super.connectedCallback()
   }
 
-  async firstUpdated(){
-    await super.firstUpdated();
+  async firstUpdated() {
+    await super.firstUpdated()
   }
 
-  render(){
+  render() {
     return html`
       <ox-input-code mode="javascript" value=${this.codeVlaue} tab-size="2" tab-as-space="true"></ox-input-code>
-      <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('confirm')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickConfirm.bind(this)}>
-        </mwc-button>
+
+      <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>
+        <div filler></div>
+        <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
+        <button @click=${this.clickConfirm.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('confirm')}</button>
       </div>
     `
   }
@@ -76,42 +66,42 @@ export class CodeInputEditorPopup extends LitElement {
   /**
    * @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 clickConfirm(e){
-    if(this.codeVlaue === this.codeEditor.value){
-      MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'));
-      return;
+  async clickConfirm(e) {
+    if (this.codeVlaue === this.codeEditor.value) {
+      MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'))
+      return
     }
-    this.changedValue(this.codeEditor.value);
+    this.changedValue(this.codeEditor.value)
   }
 
   /**
-   * @description 확정  
+   * @description 확정
    ***************************
-   * @param {*} record 
+   * @param {*} record
    */
-  async changedValue(value){
+  async changedValue(value) {
     this.confirmCallback && this.confirmCallback(value)
     closePopup(this)
   }
 }
-  
-customElements.define('code-input-editor-popup', CodeInputEditorPopup)
+
+customElements.define('code-input-editor-popup', CodeInputEditorPopup)

package/client/component/popup/file-upload-popup.js

@@ -1,19 +1,18 @@
+import '@material/web/icon/icon.js'
+
 import { client, gqlContext } from '@things-factory/shell'
 import { css, html, LitElement } from 'lit'
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
-import { CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
+import { ButtonContainerStyles } from '@operato/styles'
 import gql from 'graphql-tag'
-import { TermsUtil } from '../../utils/terms-util';
-import { ValueUtil } from '../../utils/value-util'
+import { TermsUtil } from '../../utils/terms-util'
 import { ServiceUtil } from '../../utils/service-util'
-import { MetaApi } from "../../utils/meta-api"
-import { MetaUiUtil } from "../../utils/meta-ui-util"
-import { isMobileDevice } from '@operato/utils'
-import { closePopup } from '@operato/popup'
+import { MetaApi } from '../../utils/meta-api'
 
 class FileUploadPopup extends LitElement {
   static get styles() {
     return [
+      ButtonContainerStyles,
       SingleColumnFormStyles,
       css`
         :host {
@@ -23,27 +22,10 @@ class FileUploadPopup extends LitElement {
           overflow-x: overlay;
           background-color: var(--main-section-background-color);
         }
+
         .input-container {
           display: flex;
         }
-        .button-container {
-          padding: 10px 0 12px 0;
-          text-align: center;
-        }
-        .button-container > button {
-          background-color: var(--button-background-color);
-          border: var(--button-border);
-          border-radius: var(--button-border-radius);
-          margin: var(--button-margin);
-          padding: var(--button-padding);
-          color: var(--button-color);
-          font: var(--button-font);
-          text-transform: var(--button-text-transform);
-        }
-        .button-container > button:hover,
-        .button-container > button:active {
-          background-color: var(--button-background-focus-color);
-        }
       `
     ]
   }
@@ -84,7 +66,7 @@ class FileUploadPopup extends LitElement {
       </div>
 
       <div class="button-container">
-        <mwc-button raised @click="${this._createAttachment}" label="${TermsUtil.tButton('create')}"></mwc-button>
+        <button @click=${this._createAttachment}><md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}</button>
       </div>
     `
   }

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

@@ -0,0 +1,355 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { closePopup } from '@operato/popup'
+import { isMobileDevice, adjustFilters } from '@operato/utils'
+import { CommonGristStyles, ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
+import { ColumnConfig, DataGrist, FetchOption, FetchResult, GristRecord, QueryFilter } from '@operato/data-grist'
+
+import { TermsUtil } from '../../utils/terms-util'
+import { ValueUtil } from '../../utils/value-util'
+import { ServiceUtil } from '../../utils/service-util'
+import { MetaApi } from '../../utils/meta-api'
+import { MetaUiUtil } from '../../utils/meta-ui-util'
+
+@customElement('meta-object-selector-popup')
+export class MetaObjectSelectorPopup extends LitElement {
+  static styles = [
+    CommonGristStyles,
+    CommonHeaderStyles,
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) gridConfig: any
+  @property({ type: Object }) basicArgs?: FetchOption
+  @property({ type: Object }) options!: FetchOption & {
+    menu_template?: any
+    filterFields?: any[]
+    codeField?: string
+    nameField?: string
+    dispField?: string
+    queryName: string
+    select?: (ColumnConfig & {
+      options: any
+      select_opt: any
+      object_opt: any
+    })[]
+  }
+  @property({ type: Object }) confirmCallback?: (record?: Partial<GristRecord>) => void
+  @property({ type: Array }) selectedRecords: GristRecord[] = []
+
+  @query('ox-grist') private grist!: DataGrist
+
+  private foundationFilters: QueryFilter[] = []
+  private record: any
+
+  async connectedCallback() {
+    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 : []
+
+    this.foundationFilters = this.foundationFilters.map(x => {
+      let { name, operator, value } = x
+
+      if (value.startsWith('::')) {
+        value = ValueUtil.getParams(this.record, ...value.substring(2).split('.'))
+      }
+
+      return {
+        name,
+        operator,
+        value
+      }
+    })
+
+    // 기본 정렬
+    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 gridColumns = select
+
+    // 기본 검색 조건이 없으면 코드 (code-selector), 또는 이름 (object-selector)
+    if (!filterFields || filterFields.length == 0) {
+      let defaultFilter
+
+      if (codeField) defaultFilter = codeField
+      if (nameField) defaultFilter = nameField
+
+      if (defaultFilter) {
+        filterFields.push({
+          name: defaultFilter,
+          operator: 'eq'
+        })
+      }
+    }
+
+    let selectFields = [...MetaApi.getGristGuttersConfig(true, false)]
+
+    if (gridColumns && gridColumns.length > 0) {
+      for (let idx = 0; idx < gridColumns.length; idx++) {
+        let {
+          type = 'string',
+          name,
+          hidden = false,
+          record = { align: 'left' },
+          header = undefined,
+          sortable = false,
+          width = 135,
+          options = undefined,
+          select_opt = undefined,
+          object_opt = undefined
+        } = gridColumns[idx]
+
+        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 (name == 'id') {
+          selectFields.push({
+            type: 'string',
+            name: name,
+            hidden: true
+          })
+        } else {
+          if (type == 'boolean-all') {
+            type = 'boolean'
+          }
+
+          let columnConfig = MetaApi.getGristColumnConfig2(
+            type,
+            name,
+            header ? (header as unknown as string) : name,
+            record.align ? record.align : 'left',
+            false,
+            sortable,
+            Number(width)
+          )
+
+          if (type.startsWith('meta-') && object_opt && object_opt.menu) {
+            options = await MetaUiUtil.getGristMetaObjectOptions(type, options)
+          }
+
+          if (type === 'select') {
+            if (Array.isArray(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') {
+                // 엔티티
+                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 }
+          }
+
+          columnConfig.hidden = hidden
+
+          selectFields.push(columnConfig)
+        }
+      }
+    } else {
+      selectFields.push(MetaApi.getGristColumnConfig2('string', codeField!, codeField!, 'left', false, true, 180))
+
+      if (dispField) {
+        selectFields.push(MetaApi.getGristColumnConfig2('string', dispField, dispField, 'left', false, true, 300))
+      }
+    }
+
+    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]
+      }
+    })
+
+    let gridConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: MetaApi.getGristPagination100Config(),
+      columns: selectFields,
+      sorters: [...sortFields]
+    }
+
+    gridConfig.rows.handlers = {
+      click: 'select-row-toggle',
+      dblclick: (columns, data, column, record, rowIndex, field) => {
+        this.selectRecord(record)
+      }
+    }
+
+    gridConfig.rows.appendable = false
+
+    this.gridConfig = gridConfig
+
+    await super.connectedCallback()
+  }
+
+  async firstUpdated(changes: PropertyValues<this>) {
+    await super.firstUpdated(changes)
+  }
+
+  render() {
+    return html`
+      <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>
+          </div>
+        </div>
+      </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>
+        <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>
+      </div>
+    `
+  }
+
+  /**
+   * @description 컬럼 조회
+   ***************************
+   * @returns
+   */
+  async fetchHandler({ page = 0, limit = 0, sorters = [], filters = [] }: FetchOption): Promise<FetchResult> {
+    const { menu_template, queryName } = this.options || {}
+
+    // let resFilter = [...this.foundationFilters]
+
+    // filters.forEach((x: any) => {
+    //   let dupFilter = resFilter.filter(y => x.name == y.name)
+    //   if (dupFilter && dupFilter.length > 0) {
+    //     delete resFilter[x.name]
+    //   }
+
+    //   resFilter.push(x)
+    // })
+
+    let resFilter = adjustFilters([...this.foundationFilters], filters)
+
+    let queryAfterSetFields = ValueUtil.getParams(
+      menu_template ? 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(queryName, resFilter, sorters, page, limit, selectFields)
+
+    return result
+  }
+
+  /**
+   * @description 비우기
+   ***************************
+   * @returns
+   */
+  async clickEmpty(e) {
+    this.confirmCallback && this.confirmCallback()
+    closePopup(this)
+  }
+  /**
+   * @description 취소
+   ***************************
+   * @returns
+   */
+  async clickCancel(e) {
+    closePopup(this)
+  }
+  /**
+   * @description 선택
+   ***************************
+   * @returns
+   */
+  async clickSelect(e) {
+    let selected = this.grist.selected
+
+    if (!selected || selected.length == 0) {
+      MetaApi.showToast('info', TermsUtil.tText('NOTHING_SELECTED'))
+      return
+    }
+
+    this.selectRecord(selected[0])
+  }
+
+  /**
+   * @description 확정
+   ***************************
+   * @param {*} record
+   */
+  async selectRecord(record) {
+    this.confirmCallback && this.confirmCallback(record)
+    closePopup(this)
+  }
+}