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

package/client/pages/menu/export-menu-popup.js

@@ -0,0 +1,468 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles, CommonGristStyles, CommonHeaderStyles } from '@operato/styles'
+
+import { TermsUtil } from './../../utils/terms-util'
+import { MetaUiUtil } from './../../utils/meta-ui-util'
+import { MetaApi } from '../../utils/meta-api'
+import { MetaCrypto } from '../../utils/meta-crypto'
+
+import snakeCase from 'lodash-es/snakeCase'
+import upperFirst from 'lodash-es/upperFirst'
+import { singular } from 'pluralize'
+
+const i18nextEn = i18next.getFixedT('en', null, null)
+const i18nextKo = i18next.getFixedT('ko', null, null)
+const colTypes = {
+  'character varying': 'VARCHAR',
+  numeric: 'NUMERIC',
+  boolean: 'BOOLEAN',
+  uuid: 'VARCHAR',
+  timestamp: 'TIMESTAMP',
+  date: 'DATE',
+  datetime: 'DATETIME',
+  integer: 'INT'
+}
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Yang
+ * @description
+ */
+export class ExportMenuPopup extends localize(i18next)(LitElement) {
+  /**
+   * @description 스타일 정의
+   ***********************************
+   * @returns {Object} 화면의 스타일 정의
+   */
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      CommonGristStyles,
+      CommonHeaderStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--md-sys-color-background);
+        }
+
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+
+        ox-filters-form {
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  /**
+   * @description 라이트 사이클
+   ***************************
+   */
+  async connectedCallback() {
+    this.gridConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: { infinite: true },
+      columns: [
+        MetaApi.getGristColumnConfig2('integer', 'seq', 'seq', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'column_ko', 'column_display_ko', 'left', false, false, 150),
+        MetaApi.getGristColumnConfig2('string', 'column_en', 'column_display_en', 'left', false, false, 150),
+        MetaApi.getGristColumnConfig2('string', 'group_cd', 'screen_group_cd', 'left', false, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'group_nm_en', 'screen_group_display_en', 'left', false, false, 150),
+        MetaApi.getGristColumnConfig2('string', 'group_nm_ko', 'screen_group_display_ko', 'left', false, false, 150),
+        MetaApi.getGristColumnConfig2('string', 'group_type', 'screen_group_type', 'left', false, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'column_id', 'column_id', 'left', false, false, 150),
+        MetaApi.getGristColumnConfig2('string', 'search_field', 'is_search_field', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2(
+          'string',
+          'entity_ref',
+          'entity_object_reference_field',
+          'left',
+          false,
+          false,
+          100
+        ),
+        MetaApi.getGristColumnConfig2(
+          'string',
+          'entity_code_ref',
+          'entity_code_reference_field',
+          'left',
+          false,
+          false,
+          100
+        ),
+        MetaApi.getGristColumnConfig2('string', 'code_ref', 'code_reference_field', 'left', false, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'main_column', 'is_main_list_field', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'editable', 'is_editable', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'hidden', 'hidden', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'grid_align', 'grid_align', 'center', false, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'export_field', 'is_export_field', 'center', false, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'grid_width', 'field_width', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'column_type', 'column_type', 'center', false, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'column_length', 'column_size', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'column_not_null', 'is_not_null', 'center', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'default_value', 'default_value', 'left', false, false, 80),
+        MetaApi.getGristColumnConfig2('string', 'index', 'table_index', 'left', false, false, 100),
+        MetaApi.getGristColumnConfig2('string', 'unique', 'is_unique', 'center', false, false, 100)
+      ]
+    }
+
+    if (super.connectedCallback) {
+      await super.connectedCallback()
+    }
+  }
+
+  /**
+   * @description 라이프 사이클
+   ***************************
+   */
+  render() {
+    return html`
+      <ox-grist
+        id="ox-grist"
+        .config=${this.gridConfig}
+        .mode=${'GRID'}
+        auto-fetch
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
+      </ox-grist>
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.export.bind(this)} done>
+          <md-icon>export_notes</md-icon>${TermsUtil.tButton('export')}
+        </button>
+      </div>
+    `
+  }
+
+  /**
+   * @description 그리드 리턴
+   **************************
+   * @returns {Object} 그리드
+   */
+  get grist() {
+    return this.shadowRoot.querySelector('#ox-grist')
+  }
+
+  async export() {
+    let exportTitle = TermsUtil.tTitle(this.recordName)
+    return await MetaApi.exportableData(true, exportTitle, this.grist)
+  }
+
+  /**
+   * @description 이력 조회
+   ***************************
+   * @returns
+   */
+  async fetchHandler({ page = 0, limit = 0, sortings = [], filters = [] }) {
+    let selectFields = `
+      id
+      menu{
+        id
+        name
+        routing
+        template
+      }
+      entity {
+        id
+        bundle
+        name
+        tableName
+        dataProp
+        delStrategy
+        description
+      }
+      entityColumns{
+        id
+        name
+        rank
+        description
+        term
+        colType
+        colSize
+        nullable
+        uniqRank
+        searchRank
+        searchOper
+        gridRank
+        gridWidth
+        gridEditor
+        refType
+        refName
+        refUrl
+        defVal
+      },
+      indices{
+        name
+        isUnique
+        columns
+      }
+      columns{
+        name
+        isNullable
+        length
+        type
+        default
+      }
+      parentMenu{
+        id
+        name
+      }
+    `
+
+    let res = await MetaApi.findOne('exportMenuInfo', this.recordId, selectFields)
+
+    // table 컬럼 정보
+    let records = res.columns
+      .filter(column => ['id', 'data_revision_no', 'deleted_at'].includes(column.name) === false)
+      .map(column => {
+        let record = {
+          column_id: column.name,
+          column_type: column.type,
+          column_length: column.length,
+          column_not_null: column.isNullable === true ? '' : 'O',
+          default_value: column.default
+        }
+
+        let entityIdx = res.entityColumns.findIndex(col => col.name == column.name)
+        if (entityIdx > -1) {
+          record.rank = res.entityColumns[entityIdx].rank
+        }
+
+        return record
+      })
+    let total = records.length
+
+    // entity Column 기반 정렬
+    records = records.sort((a, b) => a.rank - b.rank)
+
+    // index
+    for (let idx = 0; idx < res.indices.length; idx++) {
+      records[idx].unique = res.indices[idx].isUnique === true ? 'O' : ''
+      records[idx].index = res.indices[idx].columns.filter(x => x != 'deleted_at').join(',')
+    }
+
+    let mainMenu = JSON.parse(MetaCrypto.dec(res.menu.template))
+
+    // 메인 메뉴 컬럼 정보
+    mainMenu.grid_column.forEach(x => {
+      let mainColName = snakeCase(x.name)
+
+      if (['object', 'meta-object-selector', 'resource-object'].includes(x.type)) {
+        mainColName = mainColName + '_id'
+      }
+
+      let recIdx = records.findIndex(rec => rec.column_id == mainColName)
+
+      if (recIdx > -1) {
+        records[recIdx].main_column = 'O'
+        records[recIdx].editable = x.editable === true ? 'O' : ''
+        records[recIdx].hidden = x.hidden === true ? 'O' : ''
+        records[recIdx].grid_align = x.align
+        records[recIdx].export_field = x.exportable === true ? 'O' : ''
+        records[recIdx].grid_width = x.width
+        records[recIdx].entity_ref = ''
+        records[recIdx].entity_code_ref = ''
+        records[recIdx].code_ref = ''
+
+        if (x.select_opt) {
+          let opt = x.select_opt
+
+          if (opt.type == 'code') {
+            records[recIdx].code_ref = opt.name
+          } else if (opt.type == 'entity') {
+            records[recIdx].entity_code_ref = `${opt.name},${opt.args.codeField},${opt.args.dispField}`
+          }
+        } else if (x.object_opt) {
+          let opt = x.object_opt
+
+          if (opt.menu) {
+            records[recIdx].entity_ref = `menu,${opt.menu}`
+          } else {
+            records[recIdx].entity_ref = `${upperFirst(singular(opt.queryName))},${opt.nameField}`
+
+            if (opt.descriptionField && opt.descriptionField.length > 0) {
+              records[recIdx].entity_ref += `,${opt.descriptionField}`
+            }
+          }
+        }
+      }
+    })
+
+    // 메인메뉴 검색 정보
+    let searchFields = [...mainMenu.gql.query.filters, ...mainMenu.search]
+    searchFields.forEach(x => {
+      let searchName = snakeCase(x.name)
+
+      let recIdx = records.findIndex(rec => rec.column_id == searchName)
+
+      if (recIdx > -1) {
+        records[recIdx].search_field = 'O'
+      }
+    })
+
+    // tab etc
+    let tabs = [...mainMenu.tab]
+    if (mainMenu.etc.master_detail_element) {
+      tabs.push(JSON.parse(mainMenu.etc.master_detail_element))
+    }
+
+    // tab 설정 검색 ....
+    for (let tabIdx = 0; tabIdx < tabs.length; tabIdx++) {
+      // name, tagname, menu(routing), display,
+
+      let tab = tabs[tabIdx]
+      let tabNmEn = await this.getTerms('en-US', ['label', 'field'], tab.display)
+      let tabNmKo = await this.getTerms('ko-KR', ['label', 'field'], tab.display)
+
+      let data = await MetaUiUtil.getMenuMetaData(tab.menu ? tab.menu : tab.routing)
+
+      if (!data || !data.records || data.records.length == 0) {
+        continue
+      }
+
+      let tabMenuConfig = JSON.parse(MetaCrypto.dec(data.records[0].template))
+
+      for (let idx in tabMenuConfig.grid_column) {
+        let x = tabMenuConfig.grid_column[idx]
+
+        let colName = snakeCase(x.name)
+
+        if (['object', 'meta-object-selector', 'resource-object'].includes(x.type)) {
+          colName = colName + '_id'
+        }
+
+        let recIdx = records.findIndex(rec => rec.column_id == colName)
+
+        if (recIdx > -1) {
+          console.log(tab.tagName)
+          records[recIdx].group_cd = tab.name
+          records[recIdx].group_nm_en = tabNmEn
+          records[recIdx].group_nm_ko = tabNmKo
+          records[recIdx].group_type = tab.tagname == 'meta-form-element' ? 'Form' : 'Grist'
+
+          records[recIdx].editable = x.editable === true ? 'O' : ''
+          records[recIdx].hidden = x.hidden === true ? 'O' : ''
+          records[recIdx].grid_align = x.align
+          records[recIdx].export_field = x.exportable === true ? 'O' : ''
+          records[recIdx].grid_width = x.width
+          records[recIdx].entity_ref = ''
+          records[recIdx].entity_code_ref = ''
+          records[recIdx].code_ref = ''
+
+          if (x.select_opt) {
+            let opt = x.select_opt
+
+            if (opt.type == 'code') {
+              records[recIdx].code_ref = opt.name
+            } else if (opt.type == 'entity') {
+              records[recIdx].entity_code_ref = `${opt.name},${opt.args.codeField},${opt.args.dispField}`
+            }
+          } else if (x.object_opt) {
+            let opt = x.object_opt
+            if (opt.menu) {
+              records[recIdx].entity_ref = `menu,${opt.menu}`
+            } else {
+              records[recIdx].entity_ref = `${upperFirst(singular(opt.queryName))},${opt.nameField}`
+
+              if (opt.descriptionField && opt.descriptionField.length > 0) {
+                records[recIdx].entity_ref += `,${opt.descriptionField}`
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // 최종 ~~
+    for (let recIdx in records) {
+      let x = records[recIdx]
+      x.seq = Number(recIdx) + 1
+
+      // 컬럼 명칭 termionologies 에 없으면 i18next 에서 찾는다 .
+      x.column_ko = await this.getTerms(
+        'ko-KR',
+        ['label', 'field'],
+        x.column_id.endsWith('_id') ? x.column_id.substring(0, x.column_id.length - 3) : x.column_id
+      )
+      x.column_en = await this.getTerms(
+        'en-US',
+        ['label', 'field'],
+        x.column_id.endsWith('_id') ? x.column_id.substring(0, x.column_id.length - 3) : x.column_id
+      )
+
+      x.column_id = x.column_id.toUpperCase()
+      x.column_type = colTypes[x.column_type]
+    }
+
+    return {
+      records,
+      total
+    }
+  }
+
+  async getTerms(locale, category, name) {
+    let filters = [
+      { name: 'name', operator: 'eq', value: name },
+      { name: 'locale', operator: 'eq', value: locale }
+    ]
+
+    if (Array.isArray(category)) {
+      filters.push({ name: 'category', operator: 'in', value: category })
+    } else {
+      filters.push({ name: 'category', operator: 'eq', value: category })
+    }
+
+    let res = await MetaApi.searchByPagination('terminologies', filters, [], 0, 0, 'display')
+
+    if (res.records.length > 0) {
+      return res.records[0].display
+    }
+
+    if (Array.isArray(category)) {
+      for (let catIdx in category) {
+        let disp = this.getI18t(locale, category[catIdx], name)
+
+        if (disp) {
+          return disp
+        }
+      }
+    } else {
+      let disp = this.getI18t(locale, category, name)
+
+      if (disp) {
+        return disp
+      }
+    }
+
+    return ''
+  }
+
+  getI18t(locale, category, name) {
+    let tName = `${category}.${name}`
+    let disp = ''
+
+    if (locale == 'en-US') {
+      disp = i18nextEn(tName)
+    } else {
+      disp = i18nextKo(tName)
+    }
+
+    if (disp == tName) {
+      return undefined
+    }
+
+    return disp
+  }
+}
+
+customElements.define('export-menu-popup', ExportMenuPopup)

package/client/pages/meta-form-element.js

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { MetaFormMixin } from './../mixin/meta-form-mixin.js'
+
+export class MetaFormElement extends MetaFormMixin(p13n(localize(i18next)(LitElement))) {}
+
+customElements.define('meta-form-element', MetaFormElement)

package/client/pages/meta-grist-element.js

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+
+import { MetaBasicGristMixin } from './../mixin/meta-basic-grist-mixin.js'
+
+/**
+ * @description Meta API로 엘리먼트 생성 테스트 용
+ */
+export class MetaGristElement extends MetaBasicGristMixin(p13n(localize(i18next)(LitElement))) {}
+
+customElements.define('meta-grist-element', MetaGristElement)

package/client/pages/meta-grist-page.js

@@ -0,0 +1,16 @@
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { PageView } from '@operato/shell'
+
+import { MetaBasicGristMixin } from './../mixin/meta-basic-grist-mixin.js'
+
+import './meta-grist-element'
+import './meta-form-element'
+import './meta-tab-element'
+
+/**
+ * @description Meta API로 페이지 생성 테스트 용
+ */
+export class MetaGristPage extends MetaBasicGristMixin(p13n(localize(i18next)(PageView))) {}
+
+customElements.define('meta-grist-page', MetaGristPage)

package/client/pages/meta-grist-tab-element.js

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+
+import { MetaGristTabMixin } from './../mixin/meta-grist-tab-mixin'
+
+import './meta-grist-element'
+import './meta-form-element'
+import './meta-tab-element'
+
+/**
+ * @description Meta API로 엘리먼트 생성 테스트 용
+ */
+export class MetaGristTabElement extends MetaGristTabMixin(p13n(localize(i18next)(LitElement))) {}
+
+customElements.define('meta-grist-tab-element', MetaGristTabElement)

package/client/pages/meta-grist-tab-page.js

@@ -0,0 +1,16 @@
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { PageView } from '@operato/shell'
+
+import { MetaGristTabMixin } from './../mixin/meta-grist-tab-mixin'
+
+import './meta-grist-element'
+import './meta-form-element'
+import './meta-tab-element'
+
+/**
+ * @description Meta API로 페이지 생성 테스트 용
+ */
+export class MetaGristTabPage extends MetaGristTabMixin(p13n(localize(i18next)(PageView))) {}
+
+customElements.define('meta-grist-tab-page', MetaGristTabPage)

package/client/pages/meta-main-tab-element.js

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+
+import { MetaMainTabMixin } from './../mixin/meta-main-tab-mixin'
+
+/**
+ * @description Meta API로 엘리먼트 생성 테스트 용
+ */
+export class MetaMainTabElement extends MetaMainTabMixin(p13n(localize(i18next)(LitElement))) {}
+
+customElements.define('meta-main-tab-element', MetaMainTabElement)

package/client/pages/meta-main-tab-page.js

@@ -0,0 +1,16 @@
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { PageView } from '@operato/shell'
+
+import { MetaMainTabMixin } from './../mixin/meta-main-tab-mixin'
+
+import './meta-grist-element'
+import './meta-form-element'
+import './meta-tab-element'
+
+/**
+ * @description Meta API로 페이지 생성 테스트 용
+ */
+export class MetaMainTabPage extends MetaMainTabMixin(p13n(localize(i18next)(PageView))) {}
+
+customElements.define('meta-main-tab-page', MetaMainTabPage)

package/client/pages/meta-master-detail-element.js

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+
+import { MetaMasterDetailMixin } from './../mixin/meta-master-detail-mixin'
+
+/**
+ * @description Meta API로 엘리먼트 생성 테스트 용
+ */
+export class MetaMasterDetailElement extends MetaMasterDetailMixin(p13n(localize(i18next)(LitElement))) {}
+
+customElements.define('meta-master-detail-element', MetaMasterDetailElement)

package/client/pages/meta-master-detail-page.js

@@ -0,0 +1,16 @@
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { PageView } from '@operato/shell'
+
+import { MetaMasterDetailMixin } from './../mixin/meta-master-detail-mixin'
+
+import './meta-grist-element'
+import './meta-form-element'
+import './meta-tab-element'
+
+/**
+ * @description Meta API로 페이지 생성 테스트 용
+ */
+export class MetaMasterDetailPage extends MetaMasterDetailMixin(p13n(localize(i18next)(PageView))) {}
+
+customElements.define('meta-master-detail-page', MetaMasterDetailPage)

package/client/pages/meta-tab-detail-element.js

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+
+import { MetaTabDetailMixin } from './../mixin/meta-tab-detail-mixin'
+
+/**
+ * @description Meta API로 엘리먼트 생성 테스트 용
+ */
+export class MetaTabDetailElement extends MetaTabDetailMixin(p13n(localize(i18next)(LitElement))) {}
+
+customElements.define('meta-tab-detail-element', MetaTabDetailElement)

package/client/pages/meta-tab-detail-page.js

@@ -0,0 +1,16 @@
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { PageView } from '@operato/shell'
+
+import { MetaTabDetailMixin } from './../mixin/meta-tab-detail-mixin'
+
+import './meta-grist-element'
+import './meta-form-element'
+import './meta-tab-element'
+
+/**
+ * @description Meta API로 페이지 생성 테스트 용
+ */
+export class MetaTabDetailPage extends MetaTabDetailMixin(p13n(localize(i18next)(PageView))) {}
+
+customElements.define('meta-tab-detail-page', MetaTabDetailPage)

package/client/pages/meta-tab-element.js

@@ -0,0 +1,15 @@
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { LitElement } from 'lit'
+
+import { MetaTabMixin } from './../mixin/meta-tab-mixin'
+
+import './meta-grist-element'
+import './meta-form-element'
+
+/**
+ * @description Meta API로 페이지 생성 테스트 용
+ */
+export class MetaTabElement extends MetaTabMixin(p13n(localize(i18next)(LitElement))) {}
+
+customElements.define('meta-tab-element', MetaTabElement)