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

package/client/pages/menu/dynamic-menu.ts

@@ -0,0 +1,744 @@
+import '@material/web/icon/icon.js'
+import '@things-factory/form-ui'
+
+import gql from 'graphql-tag'
+import { html } from 'lit'
+import { customElement, property, state, query } from 'lit/decorators.js'
+
+import { PageView } from '@operato/shell'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { OxFiltersFormBase } from '@operato/form'
+
+import { TermsUtil } from './../../utils/terms-util'
+import { MetaApi } from '../../utils/meta-api'
+
+import './dynamic-menu-template.js'
+import './export-menu-popup.js'
+import { ValueUtil } from '../../utils/value-util'
+import { UiUtil } from '../../utils/ui-util'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+
+@customElement('dynamic-menu')
+export class DynamicMenu extends p13n(localize(i18next)(PageView)) {
+  static styles = [...MetaApi.getBasicMasterDetailGristStyle('top-down')]
+
+  @state() searchFields?: string[]
+  @state() groupConfig: any
+  @state() detailConfig: any
+
+  @query('ox-filters-form-base') searchForm!: OxFiltersFormBase
+  @query('#master-grist') groupGrist!: DataGrist
+  @query('#detail-grist') detailGrist!: DataGrist
+
+  private menuGroupId?: string
+
+  render() {
+    return html`
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form-base
+            .filters=${this.searchFields || []}
+            @filters-change=${e => {
+              this.groupGrist?.fetch()
+            }}
+          ></ox-filters-form-base>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="container_detail">
+          <!--h2>
+            <md-icon>list_alt</md-icon>${TermsUtil.tTitle('menu_group')}
+          </h2-->
+          <ox-grist
+            id="master-grist"
+            .config=${this.groupConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
+            .personalConfigProvider=${this.getPagePreferenceProvider('master-grist')!}
+            .fetchHandler=${this.fetchGroupHandler.bind(this)}
+          >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+          </ox-grist>
+          <div class="button-container">
+            <button @click=${e => this.saveGroup()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
+            <button danger @click=${e => this.deleteGroup()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
+          </div>
+        </div>
+
+        <div class="container_detail">
+          <ox-grist
+            id="detail-grist"
+            .config=${this.detailConfig}
+            .mode=${MetaApi.isMobileEnv() ? 'LIST' : 'GRID'}
+            .fetchHandler=${this.fetchDetailHandler.bind(this)}
+            .personalConfigProvider=${this.getPagePreferenceProvider('detail-grist')!}
+            explcit-fetch
+          >
+            <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+          </ox-grist>
+          <div class="button-container">
+            <button @click=${e => this.copyMenu()}><md-icon>content_copy</md-icon>${TermsUtil.tButton('copy')}</button>
+            <button @click=${e => this.saveMenu()}><md-icon>save</md-icon>${TermsUtil.tButton('save')}</button>
+            <button danger @click=${e => this.deleteMenu()}>
+              <md-icon>delete</md-icon>${TermsUtil.tButton('delete')}
+            </button>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  get context() {
+    return {
+      title: TermsUtil.tTitle('dynamic_menu')
+    }
+  }
+
+  /*******************************************/
+  /* 조회 */
+  /*******************************************/
+
+  /**
+   * @description 부모 메뉴 (메뉴 그룹) 선택시 하위 메뉴 리스트 조회
+   *********************************
+   * @param {Object} param0
+   */
+  async fetchDetailHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {
+    if (this.menuGroupId) {
+      let filters = [
+        {
+          name: 'parentId',
+          operator: 'eq',
+          value: this.menuGroupId
+        },
+        ...(await this.searchForm.getQueryFilters()).filter(x => ['templateCode', 'templateText'].includes(x.name))
+      ]
+
+      let selectFields = `
+        id
+        name
+        rank
+        description
+        menuType
+        category
+        resourceUrl
+        routingType
+        routing
+        hiddenFlag
+        iconPath
+        parent {
+          id
+          name
+          routing
+        }
+        role {
+          id
+          name
+          description
+        }
+      `
+
+      limit = 999999
+      let fetchResult = await MetaApi.searchByPagination('dynamicMenus', filters, sorters, page, limit, selectFields)
+
+      if (fetchResult && fetchResult.records) {
+        fetchResult.records.forEach(x => {
+          x.parentId = this.menuGroupId
+        })
+      }
+
+      return fetchResult
+    }
+  }
+
+  /**
+   * @description 부모 메뉴 (메뉴 그룹) 조회
+   ****************************************
+   * @param {Object} param0
+   * @returns
+   */
+  async fetchGroupHandler({ page, limit = 999999, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {
+    // 선택된 부모 메뉴 ID 초기화
+    this.menuGroupId = ''
+
+    if (this.detailGrist && this.detailGrist.data) {
+      this.detailGrist.data = { records: [] }
+    }
+
+    let filters = [...(await this.searchForm.getQueryFilters()), { name: 'parentId', operator: 'is_null', value: '' }]
+
+    let selectFields = `
+      id
+      name
+      rank
+      description
+      menuType
+      category
+      resourceUrl
+      routing
+      hiddenFlag
+      iconPath
+      role {
+        id
+        name
+        description
+      }
+    `
+    limit = 999999
+    return await MetaApi.searchByPagination('dynamicMenus', filters, sorters, page, limit, selectFields)
+  }
+
+  /*******************************************/
+  /*            트랜잭션 (저장 , 삭제)           */
+  /*******************************************/
+
+  /**
+   * 메뉴 그룹 Create / Update
+   */
+  async saveGroup() {
+    var patches = this.groupGrist.dirtyRecords
+
+    if (ValueUtil.isNotEmpty(patches)) {
+      patches = patches.map(patch => {
+        const {
+          creator,
+          updater,
+          createdAt,
+          updatedAt,
+          __dirty__,
+          __dirtyfields__,
+          __origin__,
+          __seq__,
+          __selected__,
+          ...others
+        } = patch
+
+        patch = others
+
+        if (patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
+          patch.hiddenFlag = false
+        }
+
+        patch.cuFlag = __dirty__
+
+        return patch
+      })
+
+      let result = await MetaApi.updateMultiple('updateMultipleMenu', patches)
+      if (result) {
+        this.groupGrist.fetch()
+      }
+    }
+  }
+
+  /**
+   * 메뉴 그룹 Delete
+   * @returns
+   */
+  async deleteGroup() {
+    await MetaApi.deleteListByGristSelected(this.groupGrist, 'deleteMenus')
+  }
+
+  /**
+   * 메뉴 Create / Update
+   */
+  async saveMenu() {
+    var patches = this.detailGrist.dirtyRecords
+
+    if (ValueUtil.isNotEmpty(patches)) {
+      patches = patches.map(patch => {
+        const {
+          creator,
+          updater,
+          createdAt,
+          updatedAt,
+          __dirty__,
+          __dirtyfields__,
+          __origin__,
+          __seq__,
+          __selected__,
+          ...others
+        } = patch
+
+        patch = others
+        patch.menuType = patch.menuType || 'SCREEN'
+
+        if (!patch.parentId) {
+          patch.parent = { id: this.menuGroupId }
+        } else {
+          patch.parent = { id: patch.parentId }
+        }
+
+        delete patch.parentId
+
+        if (patch.hiddenFlag === undefined || patch.hiddenFlag == null) {
+          patch.hiddenFlag = false
+        }
+
+        patch.cuFlag = __dirty__
+
+        return patch
+      })
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation UpdateMultipleMenu($patches: [MenuPatch!]!) {
+            updateMultipleMenu(patches: $patches) {
+              id
+            }
+          }
+        `,
+        variables: {
+          patches
+        }
+      })
+
+      if (!response.errors) {
+        const result = response.data.updateMultipleMenu
+
+        if (result) {
+          this.detailGrist.fetch()
+        }
+      }
+    }
+  }
+
+  async exportMenu(record) {
+    let exportMenuElement = MetaApi.createCustomElement('export-menu-popup', 'export-menu-popup')
+
+    exportMenuElement.title = TermsUtil.tLabel('export')
+    ;(exportMenuElement as any).recordId = record.id
+    ;(exportMenuElement as any).recordName = record.name
+
+    await MetaApi.openPopupByElement(record.name, 'large', exportMenuElement, true)
+  }
+
+  /**
+   * 메뉴 Delete
+   * @returns
+   */
+  async deleteMenu() {
+    await MetaApi.deleteListByGristSelected(this.detailGrist, 'deleteMenus')
+  }
+
+  /**
+   * 메뉴 복사
+   */
+  async copyMenu() {
+    let selectMenus = this.detailGrist.selected
+
+    if (!selectMenus || selectMenus.length == 0) {
+      UiUtil.showAlertPopup('text.nothing_selected', 'text.there_is_no_selected_items', 'info', 'confirm')
+      return
+    }
+
+    let copyMenu = selectMenus[0]
+
+    if (!copyMenu.id) {
+      return
+    }
+
+    Object.keys(copyMenu).forEach(x => {
+      if (x.startsWith('__')) {
+        delete copyMenu[x]
+      }
+    })
+
+    let menu = await MetaApi.findOne('menu', copyMenu.id, 'template')
+    copyMenu.template = menu ? menu.template || '' : ''
+
+    copyMenu.rank = 99999
+    copyMenu.cuFlag = '+'
+
+    copyMenu.name = copyMenu.name + '-copy'
+    copyMenu.routing = copyMenu.routing + '-copy'
+    copyMenu.parent = { id: copyMenu.parentId }
+    delete copyMenu.id
+    delete copyMenu.parentId
+
+    let result = await MetaApi.updateMultiple('updateMultipleMenu', [copyMenu])
+    if (result) {
+      this.detailGrist.fetch()
+    }
+  }
+
+  groupMenuQuery(record) {
+    this.menuGroupId = record.id
+    this.detailGrist.fetch()
+  }
+
+  /**
+   * 메뉴 템플릿을 편집 할 수 있는 팝업을 오픈한다.
+   * @param {Object} record
+   */
+  async openMenuTemplatePopup(record) {
+    let menuTemplateElement = MetaApi.createCustomElement('dynamic-menu-template', 'dynamic-menu-template')
+
+    menuTemplateElement.title = TermsUtil.tLabel('template')
+    ;(menuTemplateElement as any).recordId = record.id
+
+    await MetaApi.openPopupByElement(record.name, 'large', menuTemplateElement, true)
+  }
+
+  /**
+   * 메뉴 템플릿을 생성 할 수 있는 화면으로 이동한다.
+   * @param {Object} record
+   */
+  navigateMetaGenerator(record) {
+    MetaApi.pageNavigate(`meta-generator?menuId=${record.id}`)
+  }
+
+  /**
+   * LifeCycle - 화면 레더링 설정
+   */
+  async pageInitialized(lifecycle) {
+    // 조회 필드
+    this.searchFields = [
+      // name, type, label, operator, optionValues
+      MetaApi.getGristSearchColumnConfig('name', 'string', 'name', 'i_like'),
+      // name, type, label, operator, codeName
+      await MetaApi.getGristSearchCodeColumnConfig('menuType', 'select', 'menu_type', 'eq', 'MENU_TYPE'),
+      // name, type, label, operator
+      MetaApi.getGristSearchColumnConfig('hiddenFlag', 'checkbox', 'hidden', 'eq'),
+      await MetaApi.getGristSearchCodeColumnConfig(
+        'templateCode',
+        'select',
+        'menu_template_search_code',
+        'eq',
+        'MENU_TEXT_SEARCH_TYPE'
+      ),
+      MetaApi.getGristSearchColumnConfig('templateText', 'string', 'menu_template_search_text', 'i_like')
+    ]
+
+    // 메뉴 그룹 그리드 설정
+    this.groupConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      // 공간이 부족해서 페이지네이션 제거
+      pagination: { infinite: true },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(true, false),
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'menu_open',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.groupMenuQuery(record)
+              }
+            }
+          }
+        },
+        {
+          type: 'integer',
+          name: 'rank',
+          header: TermsUtil.tLabel('rank'),
+          record: {
+            align: 'left',
+            editable: true,
+            format: '#,###'
+          },
+          sortable: false,
+          width: 60
+        },
+        // type, name, align, editable, sortable, width
+        MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 200),
+        {
+          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: 200
+        },
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig('menuType', 'menu_type', 'left', false, 90, true, 'MENU_TYPE'),
+        // type, name, displayName, align, editable, sortable, width
+        MetaApi.getGristColumnConfig2('string', 'iconPath', 'icon', 'left', true, false, 115),
+        MetaApi.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden', 'center', true, false, 55),
+        MetaApi.getGristColumnConfig2('string', 'routing', 'routing', 'left', true, false, 135),
+        MetaApi.getGristColumnConfig2('string', 'category', 'tag', 'left', true, false, 135),
+        MetaApi.getGristColumnConfig2('string', 'resourceUrl', 'page_location', 'left', true, false, 350),
+        {
+          type: 'resource-object',
+          name: 'role',
+          label: true,
+          header: i18next.t('field.required role'),
+          record: {
+            editable: true,
+            options: {
+              title: i18next.t('title.lookup role'),
+              queryName: 'roles'
+            }
+          },
+          width: 200
+        }
+      ]
+    }
+
+    // 메뉴 그리드 설정
+    this.detailConfig = {
+      rows: MetaApi.getGristSelectableConfig(false),
+      // 공간이 부족해서 페이지네이션 제거
+      pagination: { infinite: true },
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(true, false),
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'download',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.exportMenu(record)
+              }
+            }
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'code',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.openMenuTemplatePopup(record)
+              }
+            }
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'construction',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record.id) {
+                this.navigateMetaGenerator(record)
+              }
+            }
+          }
+        },
+        {
+          type: 'integer',
+          name: 'rank',
+          header: TermsUtil.tLabel('rank'),
+          record: {
+            align: 'left',
+            editable: true,
+            format: '#,###'
+          },
+          sortable: false,
+          width: 60
+        },
+        MetaApi.getGristColumnConfig('string', 'name', 'left', true, false, 175),
+        {
+          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: 175
+        },
+        // name, displayName, align, sortable, width, mandatory, codeName
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'menuType',
+          'page_type',
+          'left',
+          false,
+          90,
+          true,
+          'MENU_PAGE_TYPE'
+        ),
+        await MetaApi.getGristCodeSelectorColumnConfig(
+          'routingType',
+          'routing_type',
+          'left',
+          false,
+          0,
+          false,
+          'MENU_PAGE_ROUTING_TYPE'
+        ),
+        // type, name, displayName, align, editable, sortable, width
+        MetaApi.getGristColumnConfig2('string', 'routing', 'routing', 'left', true, false, 175),
+        MetaApi.getGristColumnConfig2('string', 'category', 'tag', 'left', true, false, 175),
+        MetaApi.getGristColumnConfig2('string', 'resourceUrl', 'page_location', 'left', true, false, 450),
+        MetaApi.getGristColumnConfig2('string', 'iconPath', 'icon', 'left', true, false, 100),
+        MetaApi.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden', 'center', true, false, 55),
+        {
+          type: 'resource-object',
+          name: 'parent',
+          header: TermsUtil.tLabel('parent-menu'),
+          record: {
+            renderer: (value, column, record, rowIndex, field) => {
+              return value ? value.name + ' (' + TermsUtil.tMenu(value.name) + ')' : ''
+            },
+            editable: true,
+            options: {
+              title: TermsUtil.tLabel('parent-menu'),
+              queryName: 'menus',
+              pagination: { pages: [1000] },
+              basicArgs: {
+                filters: [
+                  {
+                    name: 'parentId',
+                    operator: 'is_null'
+                  }
+                ],
+                sortings: [
+                  {
+                    name: 'rank',
+                    desc: false
+                  }
+                ]
+              },
+              list: { fields: ['id', 'name'] },
+              columns: [
+                { name: 'id', hidden: true },
+                {
+                  name: 'rank',
+                  header: TermsUtil.tLabel('rank'),
+                  width: 75,
+                  record: {
+                    editable: false,
+                    format: '#,###',
+                    align: 'left'
+                  },
+                  sortable: true
+                },
+                {
+                  name: 'name',
+                  width: 300,
+                  header: TermsUtil.tLabel('name'),
+                  filter: 'search'
+                },
+                {
+                  name: 'description',
+                  width: 350,
+                  header: TermsUtil.tLabel('title'),
+                  record: {
+                    editable: false,
+                    renderer: function (value, column, record, rowIndex, field) {
+                      return TermsUtil.tMenu(record.name)
+                    }
+                  }
+                },
+                {
+                  type: 'code',
+                  name: 'menuType',
+                  width: 120,
+                  header: TermsUtil.tLabel('menu_type'),
+                  record: {
+                    editable: false,
+                    codeName: 'MENU_TYPE'
+                  }
+                },
+                {
+                  name: 'routing',
+                  width: 150,
+                  header: TermsUtil.tLabel('routing'),
+                  record: {
+                    editable: false
+                  }
+                }
+              ],
+              valueField: 'id',
+              nameField: 'name',
+              descriptionField: 'routing'
+            }
+          },
+          width: 200
+        },
+        {
+          type: 'resource-object',
+          name: 'role',
+          label: true,
+          header: i18next.t('field.required role'),
+          record: {
+            editable: true,
+            options: {
+              title: i18next.t('title.lookup role'),
+              queryName: 'roles'
+            }
+          },
+          width: 200
+        }
+        /*{
+          type: 'meta-code-selector',
+          header: TermsUtil.tLabel('parent-menu'),
+          name: 'parentId',
+          record: {
+            editable: true,
+            align: 'left',
+            options: {
+              codes: await ServiceUtil.getCodeByEntity({queryName:'menus', codeField:'id', dispField:'name', filters:[{ name: 'parentId', operator: 'is_null', value: '' }]}),
+              queryName: 'menus',
+              codeField: 'id',
+              dispField: 'name',
+              filterFields: [{name: 'name', operator: 'like'}],
+              selectorName: TermsUtil.tLabel('parent-menu'),
+              columns: [
+                {
+                  name: 'id',
+                  hidden: true
+                },
+                //MetaApi.getGristColumnConfig('integer', 'rank', 'right', false, true, 65),
+                {
+                  type: 'integer',
+                  name: 'rank',
+                  header: TermsUtil.tLabel('rank'),
+                  record: {
+                    align: 'left',
+                    editable: false,
+                    format: '#,###'
+                  },
+                  sortable: false,
+                  width: 65
+                },
+                MetaApi.getGristColumnConfig2('boolean', 'hiddenFlag', 'hidden', 'center', true, false, 60),
+                {
+                  type:'select',
+                  name: 'menuType',
+                  header: 'menu_type',
+                  record: {
+                    align:'left',
+                    editable: false
+                  },
+                  options:{
+                    type: 'code',
+                    name: 'MENU_TYPE'
+                  },
+                  sortable: false,
+                  width: 100
+                },
+                MetaApi.getGristColumnConfig('string', 'name', 'left', false, true, 450)
+              ],
+              filters: [{ name: 'parentId', operator: 'is_null', value: '' }],
+              sorters: [{ name: 'rank', desc: false }],
+            }
+          },
+          sortable: false,
+          width: 120
+        }*/
+      ]
+    }
+  }
+}