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

package/client/pages/entity/main-menu-selector.js

@@ -0,0 +1,245 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles, CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
+
+import { TermsUtil } from './../../utils/terms-util'
+import { UiUtil } from '../../utils/ui-util'
+import { MetaApi } from '../../utils/meta-api'
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Shortstop <shortstop@hatiolab.com>
+ * @description 메인 메뉴 선택 화면
+ */
+export class MainMenuSelector extends localize(i18next)(LitElement) {
+  /**
+   * @description 스타일 정의
+   ***********************************
+   * @returns {Object} 화면의 스타일 정의
+   */
+  static get styles() {
+    let styles = [
+      ScrollbarStyles,
+      CommonGristStyles,
+      ButtonContainerStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow-x: auto;
+        }
+
+        .container {
+          flex: 1;
+          display: grid;
+          overflow: hidden;
+        }
+
+        .container_detail {
+          background-color: var(--md-sys-color-background);
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
+
+        h2 {
+          padding: var(--subtitle-padding);
+          font: var(--subtitle-font);
+          color: var(--subtitle-text-color);
+          border-bottom: var(--subtitle-border-bottom);
+        }
+
+        .container_detail h2 {
+          margin: var(--grist-title-margin);
+          border: var(--grist-title-border);
+          font: var(--grist-title-font);
+          color: var(--md-sys-color-secondary);
+        }
+
+        .container_detail h2 md-icon {
+          --md-icon-size: var(--grist-title-icon-size);
+          vertical-align: middle;
+          margin: var(--grist-title-icon-margin);
+          color: var(--grist-title-icon-color);
+        }
+
+        h2 {
+          padding-bottom: var(--grist-title-with-grid-padding);
+        }
+
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+
+        ox-filters-form {
+          flex: 1;
+        }
+      `
+    ]
+    return styles
+  }
+
+  /**
+   * @description 프로퍼티 정의
+   ***********************************
+   * @returns {Object} 화면의 프로퍼티 정의
+   */
+  static get properties() {
+    return {
+      /**
+       * @description 메인 메뉴 리스트
+       ****************************
+       * @type {Array}
+       */
+      items: {
+        type: Array
+      },
+
+      /**
+       * @description 총 메인 메뉴 건수
+       ******************************
+       * @type {Number}
+       */
+      total: {
+        type: Number
+      },
+
+      /**
+       * @description 메인 메뉴 선택 이후 콜백 함수
+       ***************************************
+       * @type {Function}
+       */
+      selectCallback: {
+        type: Function
+      }
+    }
+  }
+
+  /**
+   * @description 라이트 사이클
+   ***************************
+   */
+  async connectedCallback() {
+    // 메뉴 그룹 그리드 설정
+    this.gridConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      pagination: { pages: [1000] },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(true, false),
+        {
+          name: 'rank',
+          header: TermsUtil.tLabel('rank'),
+          width: 80,
+          record: {
+            editable: false,
+            format: '#,###',
+            align: 'left'
+          },
+          sortable: true
+        },
+        MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 300),
+        {
+          type: 'string',
+          name: 'title',
+          header: TermsUtil.tLabel('title'),
+          record: {
+            editable: false,
+            align: 'left',
+            renderer: (value, column, record, rowIndex, field) => {
+              return record.name ? TermsUtil.tMenu(record.name) : ''
+            }
+          },
+          sortable: false,
+          width: 350
+        },
+        await MetaApi.getGristCodeSelectorColumnConfig('menuType', 'menu_type', 'left', false, 100, true, 'MENU_TYPE')
+      ]
+    }
+
+    if (super.connectedCallback) {
+      await super.connectedCallback()
+    }
+  }
+
+  /**
+   * @description 라이프 사이클
+   ***************************
+   */
+  render() {
+    return html` <div id="container" class="container">
+      <div class="container_detail">
+        <ox-grist
+          id="ox-grist"
+          .config=${this.gridConfig}
+          .mode=${'GRID'}
+          auto-fetch
+          .fetchHandler=${this.fetchMainMenus.bind(this)}
+        >
+        </ox-grist>
+        <div class="button-container">
+          <button hidden id="receive" @click=${this.selectMainMenu.bind(this)}>
+            <md-icon>menu_open</md-icon>${TermsUtil.tButton('create-menu')}
+          </button>
+        </div>
+      </div>
+    </div>`
+  }
+
+  /**
+   * @description 그리드 리턴
+   **************************
+   * @returns {Object} 그리드
+   */
+  get grist() {
+    return this.shadowRoot.querySelector('#ox-grist')
+  }
+
+  /**
+   * @description 메인 메뉴 조회
+   ***************************
+   * @returns
+   */
+  async fetchMainMenus() {
+    let filters = [{ name: 'parentId', operator: 'is_null', value: '' }]
+    let sorters = [{ name: 'rank' }]
+    let selectFields = `
+      id
+      name
+      rank
+      description
+      menuType
+      category
+    `
+    let result = await MetaApi.searchByPagination('menus', filters, sorters, 0, 0, selectFields)
+    this.items = result.records
+    this.total = result.total
+    return { total: this.total, records: this.items }
+  }
+
+  /**
+   * @description 메인 메뉴 선택 시 액션 - 콜백 함수 호출
+   ************************************************
+   */
+  async selectMainMenu(e) {
+    const records = this.grist.selected
+    if (!records || records.length == 0) {
+      UiUtil.showCustomAlert('title.info', 'text.NOTHING_SELECTED', 'info', 'button.confirm')
+    } else {
+      if (this.selectCallback) {
+        let res = await this.selectCallback(records[0].id)
+        if (res.success) {
+          history.back()
+        }
+      }
+    }
+  }
+}
+
+customElements.define('main-menu-selector', MainMenuSelector)

package/client/pages/history/history-copy-list-popup.js

@@ -0,0 +1,145 @@
+import { css, html, LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles, CommonGristStyles } from '@operato/styles'
+
+import { MetaApi } from '../../utils/meta-api'
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Yang
+ * @description 변경 이력 (COPY) 타입 조회 팝업
+ */
+export class HistoryCopyListPopup extends localize(i18next)(LitElement) {
+  /**
+   * @description 스타일 정의
+   ***********************************
+   * @returns {Object} 화면의 스타일 정의
+   */
+  static get styles() {
+    let styles = [
+      ScrollbarStyles,
+      CommonGristStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow-x: auto;
+        }
+
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+
+        ox-filters-form {
+          flex: 1;
+        }
+      `
+    ]
+    return styles
+  }
+
+  /**
+   * @description 프로퍼티 정의
+   ***********************************
+   * @returns {Object} 화면의 프로퍼티 정의
+   */
+  static get properties() {
+    return {
+      parent_id: String
+    }
+  }
+
+  /**
+   * @description 라이트 사이클
+   ***************************
+   */
+  async connectedCallback() {
+    // 메뉴 그룹 그리드 설정
+    let parentGristConfig = this.open_param.gristConfig
+    this.gqlFunc = this.open_param.gqlFunc
+
+    delete parentGristConfig.list
+    delete parentGristConfig.rows
+
+    parentGristConfig.rows = {
+      appendable: false,
+      selectable: false
+    }
+
+    parentGristConfig.sorters = [{ name: 'dataRevisionNo', desc: true }]
+
+    let gristColumns = parentGristConfig.columns.filter(x => x.type != 'gutter' && x.unusable !== true)
+    gristColumns.forEach(x => {
+      if (x.filter) delete x.filter
+      if (!x.record) x.record = {}
+
+      x.sortable = false
+      x.record.editable = false
+    })
+
+    parentGristConfig.columns = [
+      { type: 'gutter', gutterName: 'dirty' },
+      MetaApi.getGristColumnConfig2('integer', 'dataRevisionNo', 'data_revision_no', 'center', false, true, 90),
+      MetaApi.getGristColumnConfig2('string', 'dataRevisionAction', 'data_revision_action', 'center', false, false, 90),
+      ...gristColumns
+    ]
+
+    this.gridConfig = parentGristConfig
+
+    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>
+    `
+  }
+
+  /**
+   * @description 그리드 리턴
+   **************************
+   * @returns {Object} 그리드
+   */
+  get grist() {
+    return this.shadowRoot.querySelector('#ox-grist')
+  }
+
+  /**
+   * @description 이력 조회
+   ***************************
+   * @returns
+   */
+  async fetchHandler({ page = 0, limit = 0, sortings = [], filters = [] }) {
+    let filter = [{ name: 'originalId', operator: 'eq', value: this.parent_id }, ...filters]
+
+    let selectFields = MetaApi.getSelectColumns(this.gridConfig.columns)
+
+    let result = await MetaApi.searchByPagination(
+      `${this.gqlFunc}Histories`,
+      filter,
+      sortings,
+      page,
+      limit,
+      selectFields
+    )
+    return result
+  }
+}
+
+customElements.define('history-copy-list-popup', HistoryCopyListPopup)

package/client/pages/history/history-json-list-popup.js

@@ -0,0 +1,159 @@
+import { css, html, LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles, CommonGristStyles } from '@operato/styles'
+
+import { TermsUtil } from './../../utils/terms-util'
+import { UiUtil } from '../../utils/ui-util'
+import { MetaApi } from '../../utils/meta-api'
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Yang
+ * @description 변경 이력 (JSON) 타입 조회 팝업
+ */
+export class HistoryJsonListPopup extends localize(i18next)(LitElement) {
+  /**
+   * @description 스타일 정의
+   ***********************************
+   * @returns {Object} 화면의 스타일 정의
+   */
+  static get styles() {
+    let styles = [
+      ScrollbarStyles,
+      CommonGristStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow-x: auto;
+        }
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+
+        ox-filters-form {
+          flex: 1;
+        }
+      `
+    ]
+    return styles
+  }
+
+  /**
+   * @description 프로퍼티 정의
+   ***********************************
+   * @returns {Object} 화면의 프로퍼티 정의
+   */
+  static get properties() {
+    return {
+      parent_id: String
+    }
+  }
+
+  /**
+   * @description 라이트 사이클
+   ***************************
+   */
+  async connectedCallback() {
+    // 메뉴 그룹 그리드 설정
+    let parentGristConfig = this.open_param.gristConfig
+    this.gqlFunc = this.open_param.gqlFunc
+
+    delete parentGristConfig.list
+    delete parentGristConfig.rows
+
+    parentGristConfig.rows = {
+      appendable: false,
+      selectable: false
+    }
+
+    parentGristConfig.sorters = [{ name: 'dataRevisionNo', desc: true }]
+
+    let gristColumns = parentGristConfig.columns.filter(x => x.type != 'gutter' && x.unusable !== true)
+    gristColumns.forEach(x => {
+      if (x.filter) delete x.filter
+      if (!x.record) x.record = {}
+
+      x.sortable = false
+      x.record.editable = false
+    })
+
+    parentGristConfig.columns = [
+      { type: 'gutter', gutterName: 'dirty' },
+      MetaApi.getGristColumnConfig2('integer', 'dataRevisionNo', 'data_revision_no', 'center', false, true, 90),
+      MetaApi.getGristColumnConfig2('string', 'dataRevisionAction', 'data_revision_action', 'center', false, false, 90),
+      ...gristColumns
+    ]
+
+    this.gridConfig = parentGristConfig
+
+    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>
+    `
+  }
+
+  /**
+   * @description 그리드 리턴
+   **************************
+   * @returns {Object} 그리드
+   */
+  get grist() {
+    return this.shadowRoot.querySelector('#ox-grist')
+  }
+
+  /**
+   * @description 이력 조회
+   ***************************
+   * @returns
+   */
+  async fetchHandler({ page = 0, limit = 0, sortings = [], filters = [] }) {
+    let filter = [{ name: 'originalId', operator: 'eq', value: this.parent_id }, ...filters]
+
+    let selectFields = `
+      id
+      originalId
+      dataRevisionNo
+      dataRevisionAction
+      historyJson
+    `
+
+    let result = await MetaApi.searchByPagination(
+      `${this.gqlFunc}Histories`,
+      filter,
+      sortings,
+      page,
+      limit,
+      selectFields
+    )
+
+    result.records = result.records.map(x => {
+      return {
+        ...JSON.parse(x.historyJson),
+        ...x
+      }
+    })
+    return result
+  }
+}
+
+customElements.define('history-json-list-popup', HistoryJsonListPopup)

package/client/pages/menu/dynamic-menu-template.js

@@ -0,0 +1,92 @@
+import { css, html, LitElement } from 'lit'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+import '@operato/input/ox-input-code.js'
+
+import { MetaApi } from '../../utils/meta-api'
+
+class DynamicMenuTemplate extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      title: String,
+      recordId: String
+    }
+  }
+
+  static get styles() {
+    let styles = [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow-x: overlay;
+          background-color: var(--md-sys-color-background);
+        }
+        legend {
+          margin: 10px;
+          text-transform: capitalize;
+          padding: var(--legend-padding);
+          font: var(--legend-font);
+          color: var(--legend-text-color);
+          border-bottom: var(--legend-border-bottom);
+        }
+        ox-input-code {
+          margin: 10px;
+          overflow-y: auto;
+          flex: 1;
+        }
+        .button-container {
+          padding: var(--button-container-padding);
+          margin: var(--button-container-margin);
+          text-align: var(--button-container-align);
+          background-color: var(--button-container-background);
+          height: var(--button-container-height);
+          text-align: right;
+          padding-right: 12px;
+        }
+      `
+    ]
+
+    return styles
+  }
+
+  async firstUpdated() {
+    if (super.firstUpdated) {
+      await super.firstUpdated()
+    }
+
+    let menu = await MetaApi.findOne('menu', this.recordId, 'template')
+    let codeData = menu ? menu.template || '' : ''
+    this.codeEditor.value = codeData
+    this.codeEditor.orgValue = this.codeEditor.value
+  }
+
+  render() {
+    return html` <legend>${this.title}</legend>
+      <ox-input-code mode="javascript" value=${this.codeValueNew}></ox-input-code>
+      <div class="button-container"></div>`
+  }
+
+  get codeEditor() {
+    return this.shadowRoot.querySelector('ox-input-code')
+  }
+
+  async save() {
+    if (this.codeEditor.orgValue == this.codeEditor.value) {
+      MetaApi.showAlertPopup('text.nothing_changed', 'text.there_is_nothing_to_save', 'info', 'confirm')
+      return
+    }
+
+    let template = this.codeEditor.value
+
+    let patches = [{ id: this.recordId, template: template, cuFlag: 'M' }]
+    let result = await MetaApi.updateMultiple('updateMultipleMenu', patches)
+    if (result) {
+      history.back()
+    }
+  }
+}
+
+customElements.define('dynamic-menu-template', DynamicMenuTemplate)