@things-factory/meta-ui 7.0.1-alpha.31 → 7.0.1-alpha.34

package/client/bootstrap.ts

@@ -11,7 +11,7 @@ import {
 } from '@operato/data-grist'
 import { registerFilterRenderer as formRegisterFilterRenderer } from '@operato/form'
 
-import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+import { auth } from '@things-factory/auth-base/dist-client'
 import { ADD_MORENDA } from '@things-factory/more-base/client'
 
 import { updateMenuTemplate } from './actions/main'

package/client/component/filter/filter-form-meta-code-select.ts

@@ -0,0 +1,99 @@
+import '@material/web/icon/icon.js'
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterSelectRenderer } from '@operato/form'
+import { TermsUtil } from './../../utils/terms-util'
+
+function openMetaCodeSelector(filter, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${filter.options} .confirmCallback=${confirmCallback}> </meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? String(TermsUtil.tMenu(filter.options.selectorName)) : String(TermsUtil.tTitle('select_item'))
+  })
+}
+
+export const FilterFormMetaCodeSelect: FilterSelectRenderer = (filter, value, owner) => {
+  const options = filter.options || {}
+  const codes = options.codes && options.codes.length > 0 ? options.codes : undefined
+  const { operator = 'eq' } = filter
+  const hiddenText = value ? value : ''
+
+  var text = value ? value : ''
+
+  if (options.dispField && value && codes) {
+    let dispCode = codes.filter(x => x.value == value)
+
+    if (dispCode && dispCode.length > 0) {
+      text = dispCode[0].display
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${filter.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${filter.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected[options.codeField] : ''
+              let disp = code
+
+              if (selected && options.dispField) {
+                let fields = options.dispField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: filter.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaCodeSelector(filter, value, confirmCallback)
+          }}
+        />
+        <md-icon style="--md-icon-size: 18px;margin-left: -24px;">manage_search</md-icon>
+      `
+    : html``
+}

package/client/component/filter/filter-form-meta-object-select.ts

@@ -0,0 +1,104 @@
+import '@material/web/icon/icon.js'
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterSelectRenderer } from '@operato/form'
+import { TermsUtil } from '../../utils/terms-util'
+
+function openMetaObjectSelector(filter, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${filter.options} .confirmCallback=${confirmCallback}></meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: filter.options.selectorName ? String(TermsUtil.tMenu(filter.options.selectorName)) : String(TermsUtil.tTitle('select_item'))
+  })
+}
+
+export const FilterFormMetaObjectSelect: FilterSelectRenderer = (filter, value, owner) => {
+  const options = filter.options
+  const { operator = 'eq' } = filter
+  const hiddenText = value ? value.id : ''
+
+  var text = ''
+
+  if (value) {
+    let fields = options!.nameField.split(',')
+    text = value[fields[0]]
+
+    if (fields.length > 1) {
+      text += `(${fields
+        .splice(1)
+        .map(field => {
+          return value[field]
+        })
+        .join(',')})`
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${filter.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${filter.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected.id : ''
+              let disp = ''
+
+              if (selected) {
+                let fields = options!.nameField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: filter.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaObjectSelector(filter, value, confirmCallback)
+          }}
+        />
+        <md-icon style="--md-icon-size: 18px;margin-left: -24px;">manage_search</md-icon>
+      `
+    : html``
+}

package/client/component/filter/filter-grist-meta-code-select.ts

@@ -0,0 +1,97 @@
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'
+import { TermsUtil } from '../../utils/terms-util'
+
+function openMetaCodeSelector(column, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${column.record.options} .confirmCallback=${confirmCallback}></meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? String(TermsUtil.tMenu(column.record.options.selectorName)) : String(TermsUtil.tTitle('select_item'))
+  })
+}
+
+export const FilterGristMetaCodeSelect: FilterSelectRenderer = (column, value, owner) => {
+  const filter = column.filter
+  const options = column.record.options
+  const codes = options.codes && options.codes.length > 0 ? options.codes : undefined
+  const { operator = 'eq' } = filter as FilterConfigObject
+  const hiddenText = value ? value : ''
+
+  var text = value ? value : ''
+
+  if (options.dispField && value && codes) {
+    let dispCode = codes.filter(x => x.value == value)
+
+    if (dispCode && dispCode.length > 0) {
+      text = dispCode[0].display
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${column.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${column.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected[options.codeField] : ''
+              let disp = code
+
+              if (selected && options.dispField) {
+                let fields = options.dispField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaCodeSelector(column, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}

package/client/component/filter/filter-grist-meta-object-select.ts

@@ -0,0 +1,102 @@
+import '../popup/meta-object-selector-popup'
+
+import { html } from 'lit-html'
+
+import { openPopup } from '@operato/layout'
+import { FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'
+import { TermsUtil } from '../../utils/terms-util'
+
+function openMetaObjectSelector(column, value, confirmCallback) {
+  var template = html` <meta-object-selector-popup .value=${value} .options=${column.record.options} .confirmCallback=${confirmCallback}></meta-object-selector-popup> `
+
+  openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: column.record.options.selectorName ? String(TermsUtil.tMenu(column.record.options.selectorName)) : String(TermsUtil.tTitle('select_item'))
+  })
+}
+
+export const FilterGristMetaObjectSelect: FilterSelectRenderer = (column, value, owner) => {
+  const filter = column.filter
+  const { operator = 'eq' } = filter as FilterConfigObject
+  const options = column.record.options
+  const hiddenText = value ? value.id : ''
+
+  var text = ''
+
+  if (value) {
+    let fields = options.nameField.split(',')
+    text = value[fields[0]]
+
+    if (fields.length > 1) {
+      text += `(${fields
+        .splice(1)
+        .map(field => {
+          return value[field]
+        })
+        .join(',')})`
+    }
+  }
+
+  return operator === 'eq'
+    ? html`
+        <input name='${column.name}' .value=${hiddenText} type="text" hidden></input>
+        <input
+          type="text"
+          readonly
+          name='${column.name}_disp'
+          .value=${text}
+          @click=${e => {
+            e.stopPropagation()
+
+            const input = e.target
+
+            const confirmCallback = selected => {
+              let code = selected ? selected.id : ''
+              let disp = ''
+
+              if (selected) {
+                let fields = options.nameField.split(',')
+                disp = selected[fields[0]]
+
+                if (fields.length > 1) {
+                  disp += `(${fields
+                    .splice(1)
+                    .map(field => {
+                      return selected[field]
+                    })
+                    .join(',')})`
+                }
+              }
+
+              input.value = disp
+
+              let codeInput =
+                owner.tagName.toLowerCase() == 'ox-grid-header'
+                  ? //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`[name="${filter.name}"]`)
+                  : //@ts-ignore owner element를 전제하지 않는 방법이 필요할 것이다.
+                    owner.renderRoot.querySelector(`form [name="${filter.name}"]`)
+              codeInput.value = code
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
+
+              input.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: code
+                  }
+                })
+              )
+            }
+
+            openMetaObjectSelector(column, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}

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

@@ -52,7 +52,7 @@ export class CodeInputEditorPopup extends LitElement {
       <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" style="margin-left:unset;">
-        <button @click=${this.clickEmpty.bind(this)}><md-icon>clear_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.clickConfirm.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('confirm')}</button>

package/client/component/popup/{meta-object-selector-popup.js → meta-object-selector-popup.ts}

@@ -1,15 +1,19 @@
 import '@material/web/icon/icon.js'
 
-import { css, html, LitElement } from 'lit'
+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 } 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'
-import { isMobileDevice } from '@operato/utils'
-import { closePopup } from '@operato/popup'
 
+@customElement('meta-object-selector-popup')
 export class MetaObjectSelectorPopup extends LitElement {
   static styles = [
     CommonGristStyles,
@@ -31,11 +35,37 @@ export class MetaObjectSelectorPopup extends LitElement {
     `
   ]
 
+  @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.search_hidden_fields = this.options.filters ? this.options.filters : this.basicArgs && this.basicArgs.filters ? this.basicArgs.filters : []
+    this.foundationFilters = filters ? filters : this.basicArgs && this.basicArgs.filters ? this.basicArgs.filters : []
 
-    this.search_hidden_fields = this.search_hidden_fields.map(x => {
+    this.foundationFilters = this.foundationFilters.map(x => {
       let { name, operator, value } = x
 
       if (value.startsWith('::')) {
@@ -50,24 +80,20 @@ export class MetaObjectSelectorPopup extends LitElement {
     })
 
     // 기본 정렬
-    let sortFields = this.options.sorters ? this.options.sorters : this.basicArgs && this.basicArgs.sorters ? this.basicArgs.sorters : []
+    let sortFields = sorters ? 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
-      : []
+    let filterFields = optionFilterFields ? optionFilterFields : menu_template?.search && menu_template?.search.length > 0 ? menu_template.search : []
 
     // 그리드 컬럼
-    let gridColumns = this.options.select
+    let gridColumns = select
 
     // 기본 검색 조건이 없으면 코드 (code-selector), 또는 이름 (object-selector)
     if (!filterFields || filterFields.length == 0) {
-      let defaultFilter = undefined
+      let defaultFilter
 
-      if (this.options.codeField) defaultFilter = this.options.codeField
-      if (this.options.nameField) defaultFilter = this.options.nameField
+      if (codeField) defaultFilter = codeField
+      if (nameField) defaultFilter = nameField
 
       if (defaultFilter) {
         filterFields.push({
@@ -114,7 +140,15 @@ export class MetaObjectSelectorPopup extends LitElement {
             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 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)
@@ -152,10 +186,10 @@ export class MetaObjectSelectorPopup extends LitElement {
         }
       }
     } else {
-      selectFields.push(MetaApi.getGristColumnConfig2('string', this.options.codeField, this.options.codeField, 'left', false, true, 180))
+      selectFields.push(MetaApi.getGristColumnConfig2('string', codeField!, 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 (dispField) {
+        selectFields.push(MetaApi.getGristColumnConfig2('string', dispField, dispField, 'left', false, true, 300))
       }
     }
 
@@ -188,8 +222,8 @@ export class MetaObjectSelectorPopup extends LitElement {
     await super.connectedCallback()
   }
 
-  async firstUpdated() {
-    await super.firstUpdated()
+  async firstUpdated(changes: PropertyValues<this>) {
+    await super.firstUpdated(changes)
   }
 
   render() {
@@ -203,7 +237,7 @@ export class MetaObjectSelectorPopup extends LitElement {
       </ox-grist>
 
       <div id="button-container" class="button-container" style="margin-left:unset;">
-        <button @click=${this.clickEmpty.bind(this)}><md-icon>clear_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>
@@ -211,40 +245,35 @@ export class MetaObjectSelectorPopup extends LitElement {
     `
   }
 
-  /**
-   * @description 그리드 리턴
-   **************************
-   * @returns {Object} 그리드
-   */
-  get grist() {
-    return this.shadowRoot.querySelector('#ox-grist')
-  }
-
   /**
    * @description 컬럼 조회
    ***************************
    * @returns
    */
-  async fetchHandler({ page = 0, limit = 0, sorters = [], filters = [] }) {
-    let resFilter = [...this.search_hidden_fields]
+  async fetchHandler({ page = 0, limit = 0, sorters = [], filters = [] }: FetchOption): Promise<FetchResult> {
+    const { menu_template, queryName } = this.options || {}
 
-    filters.forEach(x => {
-      let dupFilter = resFilter.filter(y => x.name == y.name)
-      if (dupFilter && dupFilter.length > 0) {
-        delete resFilter[x.name]
-      }
+    // let resFilter = [...this.foundationFilters]
 
-      resFilter.push(x)
-    })
+    // 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 queryAfterSetFields = ValueUtil.getParams(this.options.menu_template ? this.options.menu_template.gql || {} : {}, 'query', 'after_set_fields')
+    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(this.options.queryName, resFilter, sorters, page, limit, selectFields)
+    let result = await MetaApi.searchByPagination(queryName, resFilter, sorters, page, limit, selectFields)
 
     return result
   }
@@ -255,7 +284,7 @@ export class MetaObjectSelectorPopup extends LitElement {
    * @returns
    */
   async clickEmpty(e) {
-    this.confirmCallback && this.confirmCallback(null)
+    this.confirmCallback && this.confirmCallback()
     closePopup(this)
   }
   /**
@@ -275,7 +304,7 @@ export class MetaObjectSelectorPopup extends LitElement {
     let selected = this.grist.selected
 
     if (!selected || selected.length == 0) {
-      MetaApi.showToast('info', TermsUtil.tText('NOTHING_SELECTED'))
+      MetaApi.showToast('info', String(TermsUtil.tText('NOTHING_SELECTED')))
       return
     }
 
@@ -292,5 +321,3 @@ export class MetaObjectSelectorPopup extends LitElement {
     closePopup(this)
   }
 }
-
-customElements.define('meta-object-selector-popup', MetaObjectSelectorPopup)