@things-factory/menu-ui 8.0.0-beta.1 → 8.0.0-beta.2

package/client/pages/menu-management.ts

@@ -1,286 +0,0 @@
-import '@things-factory/form-ui'
-import '@operato/data-grist'
-import './menu-management-detail'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { openPopup } from '@operato/layout'
-import { i18next, localize } from '@operato/i18n'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { isMobileDevice } from '@operato/utils'
-import { client, PageView } from '@things-factory/shell/client'
-import { gqlBuilder } from '@things-factory/utils/src'
-
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-import { DataGrist, FetchOption } from '@operato/data-grist'
-
-@customElement('menu-management')
-class MenuManagement extends localize(i18next)(PageView) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      search-form {
-        overflow: visible;
-      }
-
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: Array }) searchFields: any[] = []
-  @property({ type: Object }) config: any
-  @property({ type: Object }) data: any
-
-  @query('ox-grist') dataGrist!: DataGrist
-  @query('search-form') searchForm!: HTMLFormElement
-
-  render() {
-    return html`
-      <search-form .fields=${this.searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
-
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-      ></ox-grist>
-    `
-  }
-
-  get context() {
-    return {
-      title: i18next.t('title.menu_management'),
-      actions: [
-        {
-          title: i18next.t('button.save'),
-          action: this.save.bind(this),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.delete'),
-          action: this.delete.bind(this),
-          ...CommonButtonStyles.delete
-        }
-      ]
-    }
-  }
-
-  pageUpdated(_changes, _lifecycle) {
-    if (this.active) {
-      this.dataGrist.fetch()
-    }
-  }
-
-  pageInitialized() {
-    this.searchFields = [
-      {
-        name: 'name',
-        label: i18next.t('label.name'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        name: 'description',
-        label: i18next.t('label.description'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      }
-    ]
-
-    this.config = {
-      rows: { selectable: { multiple: true } },
-      columns: [
-        { type: 'gutter', gutterName: 'dirty' },
-        { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'reorder',
-          handlers: {
-            click: (_columns, _data, _column, record, _rowIndex) => {
-              if (record.id && record.name) this.openMenuDetail(record.id, record.name)
-            }
-          }
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: { editable: true, align: 'left' },
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'integer',
-          name: 'rank',
-          header: i18next.t('field.rank'),
-          record: { editable: true },
-          sortable: true,
-          width: 80
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: { editable: true, align: 'left' },
-          sortable: true,
-          width: 200
-        },
-        {
-          type: 'boolean',
-          name: 'hiddenFlag',
-          header: i18next.t('field.hidden_flag'),
-          record: { editable: false },
-          sortable: true,
-          width: 80
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
-          record: { editable: false },
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'object',
-          name: 'updater',
-          header: i18next.t('field.updater'),
-          record: { editable: false },
-          sortable: true,
-          width: 150
-        }
-      ]
-    }
-  }
-
-  async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {
-    const response = await client.query({
-      query: gql`
-        query {
-          menus(${gqlBuilder.buildArgs({
-            filters: [...this.searchForm.queryFilters, { name: 'menuType', operator: 'eq', value: 'MENU' }],
-            pagination: { page, limit },
-            sortings: sorters
-          })}) {
-            items {
-              id
-              name
-              rank
-              description
-              hiddenFlag
-              updatedAt
-              updater{
-                id
-                name
-                description
-              }
-            }
-            total
-          }
-        }
-      `
-    })
-
-    return {
-      total: response.data.menus.total || 0,
-      records: response.data.menus.items || []
-    }
-  }
-
-  async save() {
-    const patches = this.getPatches()
-    if (patches && patches.length) {
-      const response = await client.query({
-        query: gql`
-          mutation {
-            updateMultipleMenu(${gqlBuilder.buildArgs({
-              patches
-            })}) {
-              name
-            }
-          }
-        `
-      })
-
-      if (!response.errors) this.dataGrist.fetch()
-    } else {
-      OxPrompt.open({
-        title: i18next.t('text.nothing_changed'),
-        text: i18next.t('text.there_is_nothing_to_save')
-      })
-    }
-  }
-
-  async delete() {
-    const ids = this.dataGrist.selected.map(record => record.id)
-    if (ids && ids.length > 0) {
-      if (
-        await OxPrompt.open({
-          type: 'warning',
-          title: i18next.t('button.delete'),
-          text: i18next.t('text.are_you_sure'),
-          confirmButton: { text: i18next.t('button.delete') },
-          cancelButton: { text: i18next.t('button.cancel') }
-        })
-      ) {
-        const response = await client.query({
-          query: gql`
-            mutation {
-              deleteMenus(${gqlBuilder.buildArgs({ ids })})
-            }
-          `
-        })
-
-        if (!response.errors) {
-          this.dataGrist.fetch()
-        }
-      }
-    } else {
-      OxPrompt.open({
-        title: i18next.t('text.nothing_selected'),
-        text: i18next.t('text.there_is_nothing_to_delete')
-      })
-    }
-  }
-
-  getPatches() {
-    let patches = this.dataGrist.dirtyRecords
-
-    if (patches && patches.length) {
-      patches = patches.map(menu => {
-        let patchField: any = menu.id ? { id: menu.id } : {}
-        const dirtyFields = menu.__dirtyfields__
-        for (let key in dirtyFields) {
-          patchField[key] = dirtyFields[key].after
-        }
-
-        patchField.cuFlag = menu.__dirty__
-        patchField.menuType = 'MENU'
-
-        return patchField
-      })
-    }
-
-    return patches
-  }
-
-  openMenuDetail(menuId, menuName) {
-    openPopup(html` <menu-management-detail .menuId=${menuId}></menu-management-detail> `, {
-      backdrop: true,
-      size: 'large',
-      title: `${i18next.t('title.menu_management_detail')} - ${menuName}`
-    })
-  }
-}

package/client/pages/role-menus-management.ts

@@ -1,209 +0,0 @@
-import '@material/mwc-button'
-import '@things-factory/component-ui'
-import '../components/role-select-popup'
-import '../components/child-menus-selector'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { openPopup } from '@operato/layout'
-import { i18next, localize } from '@operato/i18n'
-import { client, PageView } from '@things-factory/shell/client'
-
-@customElement('role-menus-management')
-class RoleMenusManagement extends localize(i18next)(PageView) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-        overflow: auto;
-      }
-      [input-container] {
-        display: flex;
-        background-color: var(--md-sys-color-surface);
-        margin: var(--spacing-large) 0;
-        padding: var(--spacing-large);
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        clear: both;
-        gap: 10px;
-      }
-      mwc-buton {
-        margin: auto;
-      }
-      h2 {
-        margin: var(--title-margin);
-        font: var(--title-font);
-        color: var(--title-text-color);
-      }
-      [subtitle] {
-        padding: var(--subtitle-padding);
-        font: var(--subtitle-font);
-        color: var(--subtitle-text-color);
-      }
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        padding: var(--input-padding);
-        min-width: 250px;
-        font: var(--input-font);
-      }
-      label {
-        display: flex;
-      }
-      @media screen and (max-width: 480px) {
-        input {
-          min-width: 0;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) selectedRole: any
-  @property({ type: Array }) parentMenus: any[] = []
-  @property({ type: Array }) roleMenus: any
-  @property({ type: Object }) menuSet: any
-  @property({ type: Object }) targetRole: any
-
-  get context() {
-    return {
-      title: i18next.t('title.role_menus_management')
-    }
-  }
-
-  render() {
-    const data = { menus: this.parentMenus || [] }
-    const menuSet = this.menuSet || {}
-
-    return html`
-      <h2>${i18next.t('title.menus_by_role')}</h2>
-      <div subtitle>${i18next.t('field.role')}</div>
-      <div input-container>
-        <label><input name="name" type="text" disabled /></label>
-        <mwc-button @click=${() => this.onSelectRole()} label="${i18next.t('button.select')}" raised></mwc-button>
-      </div>
-
-      <div subtitle>${i18next.t('title.menus')}</div>
-      <div id="children-menus">
-        <div>
-          <quick-find-list
-            .data="${data}"
-            .contentRenderer="${(item, tabKey) =>
-              this.targetRole
-                ? html`<child-menus-selector
-                    @updateRoleMenus="${async () => {
-                      await this.getMenus(this.targetRole)
-                    }}"
-                    .parentMenu=${item}
-                    .roleMenus=${menuSet[item.name]}
-                    .targetRole=${this.targetRole}
-                  ></child-menus-selector>`
-                : this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.role') }))}"
-          ></quick-find-list>
-        </div>
-      </div>
-    `
-  }
-
-  get roleInput() {
-    return this.renderRoot.querySelector('input') as HTMLInputElement
-  }
-
-  async pageUpdated(changes) {
-    if (this.active) {
-      this.refresh()
-    }
-  }
-
-  async refresh() {
-    const response = await client.query({
-      query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          menus(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
-              name
-              description
-              children {
-                id
-                name
-              }
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters: [],
-        pagination: {},
-        sortings: [{ name: 'name' }]
-      }
-    })
-
-    if (!response.errors?.length) {
-      const menus = response.data.menus.items || []
-      this.parentMenus = menus.filter(menu => menu.children?.length)
-    }
-  }
-
-  async getMenus(targetRole) {
-    const response = await client.query({
-      query: gql`
-        query ($roleId: String!) {
-          roleMenus(roleId: $roleId) {
-            items {
-              id
-              name
-              description
-              parent {
-                id
-                name
-              }
-            }
-          }
-        }
-      `,
-      variables: {
-        roleId: targetRole.id
-      }
-    })
-
-    if (!response.errors?.length) {
-      this.roleMenus = response.data.roleMenus.items || []
-      this.menuSet = (this.roleMenus || []).reduce((menuSet, menu) => {
-        const parentMenu = menu.parent.name
-        if (!menuSet[parentMenu]) menuSet[parentMenu] = []
-        menuSet[parentMenu].push(menu)
-
-        return menuSet
-      }, {})
-    }
-  }
-
-  onSelectRole() {
-    openPopup(
-      html`
-        <role-select-popup
-          @selected="${e => {
-            this.selectedRole = e.detail
-            this.roleInput.value = this.selectedRole.name
-            this.targetRole = this.selectedRole || {}
-            this.getMenus(this.targetRole)
-          }}"
-        ></role-select-popup>
-      `,
-      {
-        size: 'large',
-        title: `${i18next.t('title.role_select')}`
-      }
-    )
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}

package/client/route.ts

@@ -1,15 +0,0 @@
-export default function route(page) {
-  switch (page) {
-    case 'menu-list':
-      import('./pages/menu-list-page')
-      return page
-
-    case 'menus':
-      import('./pages/menu-management')
-      return page
-
-    case 'role-menus':
-      import('./pages/role-menus-management')
-      return page
-  }
-}

package/client/themes/menu-theme.css

@@ -1,31 +0,0 @@
-body {
-  --menu-bar-background-color: var(--md-sys-color-primary);
-  --menu-bar-textbutton: 16px/32px var(--theme-font);
-  --menu-bar-textbutton-active: bold var(--menu-bar-textbutton);
-  --menu-bar-active-line-color: var(--focus-color);
-  --menu-bar-line: solid 3px rgba(0, 0, 0, 0.2);
-
-  --menu-tools-background-color: var(--md-sys-color-secondary);
-  --menu-tools-iconbutton-size: var(--icon-tiny-size);
-  --menu-tools-color: #87cfd0;
-  --menu-tools-active-color: #fff;
-
-  --menu-tree-toplevel-color: #d0fdee;
-  --menu-tree-toplevel-font: normal 15px var(--theme-font);
-  --menu-tree-toplevel-icon-size: 5px;
-  --menu-tree-toplevel-icon-border: 2px solid var(--menu-tree-toplevel-color);
-  --menu-tree-toplevel-border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-  --menu-tree-grouplevel-font: normal 13px var(--theme-font);
-  --menu-tree-grouplevel-color: #d0d0d0;
-  --menu-tree-grouplevel-background-color: rgba(0, 0, 0, 0.3);
-  --menu-tree-grouplevel-border-bottom: 1px solid rgba(0, 0, 0, 0.5);
-  --menu-tree-grouplevel-active-border-left: 3px solid var(--md-sys-color-primary);
-  --menu-tree-focus-color: #fff;
-  --menu-tree-favorite-color: var(--menu-tree-toplevel-color);
-
-  --menu-domain-background-color: var(--md-sys-color-secondary);
-  --menu-domain-font: bold 14px var(--theme-font);
-  --menu-domain-color: #fff;
-  --menu-domain-icon-color: #d0fdee;
-  --menu-domain-padding: 0px 7px 4px 8px;
-}

package/client/viewparts/menu-bar.ts

@@ -1,110 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import ScrollBooster from 'scrollbooster'
-
-@customElement('menu-bar')
-export default class MenuBar extends LitElement {
-  static styles = [
-    css`
-      :host {
-        background-color: var(--menu-bar-background-color, #242d30);
-
-        overflow-x: hidden;
-      }
-
-      ul {
-        display: flex;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        white-space: nowrap;
-      }
-
-      li {
-        display: inline-block;
-        padding: 0px 3px;
-
-        border-bottom: var(--menu-bar-line);
-      }
-
-      li[active] {
-        border-color: var(--menu-bar-active-line-color, red);
-      }
-
-      li a {
-        display: block;
-        padding: 5px 4px 1px 4px;
-        text-decoration: none;
-        font: var(--menu-bar-textbutton);
-        color: rgba(255, 255, 255, 0.8);
-      }
-
-      li[active] a {
-        font: var(--menu-bar-textbutton-active);
-        color: rgba(255, 255, 255, 1);
-      }
-    `
-  ]
-
-  @property({ type: Array }) menus: any[] = []
-  @property({ type: String }) menuId?: string
-
-  private __sb: any
-
-  render() {
-    var topmenus = this.menus || []
-
-    return html`
-      <ul>
-        <li ?active=${!this.menuId}>
-          <a href="menu-list"><md-icon>star</md-icon></a>
-        </li>
-
-        ${topmenus.map(
-          (menu, idx) => html`
-            <li ?active=${this.menuId === String(idx)}>
-              <a href=${`${menu.routing || 'menu-list'}/${idx}`}>${menu.name}</a>
-            </li>
-          `
-        )}
-      </ul>
-    `
-  }
-
-  _onWheelEvent(e) {
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    this.scrollLeft -= delta * 40
-
-    e.preventDefault()
-  }
-
-  updated(change) {
-    if (change.has('menus')) {
-      /* menus가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
-      this.__sb && this.__sb.updateMetrics()
-    }
-
-    if (change.has('menuId')) {
-      var active = this.renderRoot.querySelector('li[active]')
-      active && active.scrollIntoView()
-    }
-  }
-
-  firstUpdated() {
-    var scrollTarget = this.renderRoot.querySelector('ul')
-
-    scrollTarget?.addEventListener('mousewheel', this._onWheelEvent.bind(this), false)
-
-    this.__sb = new ScrollBooster({
-      viewport: this,
-      content: scrollTarget,
-      mode: 'x',
-      onUpdate: data => {
-        this.scrollLeft = data.position.x
-      }
-    })
-  }
-}