@things-factory/meta-ui 8.0.40 → 9.0.0-9.0.0-beta.59.0

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

@@ -1,356 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/**  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

@@ -1,17 +0,0 @@
-/**  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'