@things-factory/meta-ui 8.0.0-beta.9 → 8.0.0

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

@@ -0,0 +1,356 @@
+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, 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,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+
+        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="footer">
+        <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)} done>
+          <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)
+  }
+}

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

@@ -0,0 +1,141 @@
+import '@material/web/icon/icon.js'
+import '@operato/input/ox-input-code.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import { OxInputCode } from '@operato/input'
+import { closePopup } from '@operato/popup'
+import { CommonHeaderStyles } from '@operato/styles'
+
+import { TermsUtil } from '../../utils/terms-util'
+import { MetaApi } from '../../utils/meta-api'
+import { ServiceUtil } from '../../utils/service-util'
+
+/**
+ * 레코드 기반 코드 편집기 팝업
+ */
+
+@customElement('record-based-code-editor-popup')
+export class RecordBasedCodeEditorPopup extends LitElement {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-input-code {
+        margin: 10px;
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() private config?: any
+  @state() private record?: any
+  @state() private value?: any
+  @state() private codeValue?: any
+
+  @query('ox-input-code') private codeEditor!: OxInputCode
+
+  /**
+   * 그리드 버튼 (grid-custom) 선택시 코드 편집기 팝업을 띄우는 버튼 로직
+   {
+    "type": "popup", -> 팝업 표시 (고정값)
+    "title": "template", -> 코드 에디터에서 팝업 타이틀에 표시할 타이틀 정보 (변수값)
+    "title_detail": "name", -> 코드 에디터에서 팝업 타이틀에 표시할 레코드의 필드 정보 (변수값)
+    "size": "large", -> 팝업 사이즈 (full, large, medium, small)
+    "popup_field": "record", -> 코드 에디터에서 레코드를 받을 필드명 (고정값)
+    "parent_field": "id", -> 부모 레코드 ID 필드 값 (고정값)
+    "value_field": "template", -> 코드 에디터에 표시할 레코드 필드 정보 (변수값)
+    "menu": "code-editor", -> 코드 에디터 이름 정보 (고정값)
+    "tagname": "record-code-editor-popup", -> 코드 에디터 태그 명 (고정값)
+    "location": "@things-factory/meta-ui/dist-client/component/popup/record-code-editor-popup", -> 코드 에디터 파일 위치 (고정값)
+    "save_action": {
+      "func_name": "updateDocTemplate", -> 업데이트 함수 명
+      "func_type": "DocTemplatePatch"
+    },
+    "param": [
+      "grist_one"  -> 파라미터 전달 모드 - 그리드 선택 값 전달 (고정값)
+    ],
+    "after": "fetch" -> 팝업 닫기 후 액션 (Optional)
+   }
+   */
+  async connectedCallback() {
+    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, null, 2)
+    } else {
+      this.codeValue = this.value
+    }
+
+    await super.connectedCallback()
+  }
+
+  async firstUpdated(changes: PropertyValues<this>) {
+    await super.firstUpdated(changes)
+  }
+
+  render() {
+    let addSaveBtn = this.config.save_action ? true : false
+
+    if (addSaveBtn) {
+      return html`
+        <ox-input-code mode="javascript" value=${this.codeValue} tab-size="2" tab-as-space="true"></ox-input-code>
+
+        <div class="footer">
+          <div filler></div>
+          <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
+          <button @click=${this.clickSave.bind(this)} done><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 class="footer">
+          <div filler></div>
+          <button @click=${this.clickCancel.bind(this)} done>
+            <md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}
+          </button>
+        </div>
+      `
+    }
+  }
+
+  /**
+   * @description 저장
+   ***************************
+   * @returns
+   */
+  async clickSave(e) {
+    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' }
+      patch[this.config.value_field] = this.codeEditor.value
+      let response = await ServiceUtil.updateOne(saveFuncName, this.record.id, patch)
+      if (response) {
+        closePopup(this)
+      }
+    }
+  }
+
+  /**
+   * @description 취소
+   ***************************
+   * @returns
+   */
+  async clickCancel(e) {
+    closePopup(this)
+  }
+}

package/client/dynamic-menus.ts

@@ -0,0 +1,38 @@
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+
+import { MetaApi } from './utils/meta-api'
+
+type Route = {
+  id?: string
+  parent?: boolean
+  parent_id?: string | null
+  title?: string
+  tagname?: string
+  page?: string
+  template?: string
+  routing_type?: string
+}
+
+var MENUS = getDynamicMenus()
+
+export function getDynamicMenus(update: boolean = false) {
+  if (!update && MENUS) {
+    return MENUS
+  }
+
+  MENUS = new Promise<{
+    menus: any
+    routes: Route[]
+  }>(resolve => {
+    auth.on('profile', async () => {
+      const menuRoutes: {
+        menus: any
+        routes: Route[]
+      } = await MetaApi.myDynamicMenus()
+
+      resolve(menuRoutes)
+    })
+  })
+
+  return MENUS
+}

package/client/index.ts

@@ -0,0 +1,18 @@
+/**  Utilities  **/
+export * from './utils/terms-util'
+export * from './utils/value-util'
+export * from './utils/ui-util'
+export * from './utils/meta-ui-util'
+export * from './utils/rest-service-util'
+export * from './utils/meta-api'
+
+/**  Mix In  **/
+export * from './mixin/meta-base-mixin'
+export * from './mixin/meta-service-mixin'
+export * from './mixin/meta-button-mixin'
+export * from './mixin/meta-basic-grist-mixin'
+export * from './mixin/meta-form-mixin'
+export * from './mixin/meta-tab-mixin'
+export * from './mixin/meta-grist-tab-mixin'
+export * from './mixin/meta-tab-detail-mixin'
+export * from './mixin/meta-main-tab-mixin'

package/client/load-components.ts

@@ -0,0 +1,17 @@
+/**  Page  **/
+import './pages/meta-form-element'
+import './pages/meta-grist-element'
+import './pages/meta-grist-page'
+import './pages/meta-grist-tab-element'
+import './pages/meta-grist-tab-page'
+import './pages/meta-master-detail-element'
+import './pages/meta-master-detail-page'
+import './pages/meta-tab-element'
+import './pages/meta-tab-detail-element'
+import './pages/meta-tab-detail-page'
+import './pages/meta-main-tab-page'
+import './pages/meta-main-tab-element'
+
+/* Component */
+import './component/popup/file-upload-popup'
+import './component/popup/record-based-code-editor-popup'