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

package/client/pages/menu-management.js

@@ -1,294 +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 { openPopup } from '@operato/layout'
-import { i18next, localize } from '@operato/i18n'
-import { client, PageView } from '@things-factory/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
-
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-class MenuManagement extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      searchFields: Array,
-      config: Object,
-      data: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-
-        search-form {
-          overflow: visible;
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-      `
-    ]
-  }
-
-  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
-        }
-      ]
-    }
-  }
-
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
-  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' }] }) {
-    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 = 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}`
-    })
-  }
-}
-
-customElements.define('menu-management', MenuManagement)

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

@@ -1,215 +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 { openPopup } from '@operato/layout'
-import { i18next, localize } from '@operato/i18n'
-import { client, PageView } from '@things-factory/shell'
-
-class RoleMenusManagement extends localize(i18next)(PageView) {
-  static get styles() {
-    return [
-      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;
-          }
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      selectedRole: Object,
-      parentMenus: Array,
-      roleMenus: Array,
-      menuSet: Object,
-      targetRole: Object
-    }
-  }
-
-  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.shadowRoot.querySelector('input')
-  }
-
-  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 } } }))
-  }
-}
-
-window.customElements.define('role-menus-management', RoleMenusManagement)

package/client/route.js

@@ -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/viewparts/menu-bar.js

@@ -1,114 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-
-import ScrollBooster from 'scrollbooster'
-
-export default class MenuBar extends LitElement {
-  static get styles() {
-    return [
-      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);
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      menus: Array,
-      menuId: String
-    }
-  }
-
-  render() {
-    var topmenus = this.menus || []
-
-    return html`
-      <ul>
-        <li ?active=${this.menuId !== 0 && !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.shadowRoot.querySelector('li[active]')
-      active && active.scrollIntoView()
-    }
-  }
-
-  firstUpdated() {
-    var scrollTarget = this.shadowRoot.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
-      }
-    })
-  }
-}
-
-window.customElements.define('menu-bar', MenuBar)