@things-factory/meta-ui 8.0.0 → 9.0.0-beta.3

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

@@ -1,744 +0,0 @@
-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
-        }*/
-      ]
-    }
-  }
-}