@things-factory/menu-ui 8.0.0-beta.9 → 8.0.0

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

@@ -0,0 +1,215 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,114 @@
+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)

package/client/viewparts/menu-tile-list.js

@@ -0,0 +1,222 @@
+import '@material/web/icon/icon.js'
+import '@operato/oops'
+
+import { css, html, LitElement } from 'lit'
+
+export default class MenuTileList extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          box-sizing: border-box;
+
+          position: relative;
+        }
+
+        ul {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          grid-auto-rows: 110px;
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        ul > li {
+          margin: var(--menu-tile-list-item-margin);
+          padding: 10px;
+
+          position: relative;
+        }
+
+        md-icon {
+          cursor: pointer;
+          position: absolute;
+          right: 8px;
+          top: 8px;
+
+          color: var(--menu-tile-list-favorite-color);
+          font-size: 1em;
+        }
+
+        md-icon[selected] {
+          color: white;
+          text-shadow: 1px 1px 1px var(--menu-tile-list-favorite-color);
+        }
+
+        li.text a {
+          color: #fff;
+          text-decoration: none;
+
+          font-size: 1.4em;
+          line-height: 1.3;
+          word-wrap: break-word;
+          word-break: keep-all;
+
+          margin: 0px;
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+
+        li.text:nth-child(7n + 1) {
+          background-color: #4397de;
+        }
+
+        li.text:nth-child(7n + 2) {
+          background-color: #33b8d0;
+        }
+
+        li.text:nth-child(7n + 3) {
+          background-color: #4ab75f;
+        }
+
+        li.text:nth-child(7n + 4) {
+          background-color: #93796f;
+        }
+
+        li.text:nth-child(7n + 5) {
+          background-color: #f1ac42;
+        }
+
+        li.text:nth-child(7n + 6) {
+          background-color: #ea6361;
+        }
+
+        li.text:nth-child(7n + 7) {
+          background-color: #7386c3;
+        }
+
+        ox-oops-note {
+          display: block;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+
+        ox-oops-spinner {
+          display: none;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+
+        ox-oops-spinner[show] {
+          display: block;
+        }
+
+        @media (min-width: 600px) {
+          ul {
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-auto-rows: 120px;
+          }
+        }
+        @media (min-width: 1200px) {
+          ul {
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            grid-auto-rows: 130px;
+          }
+        }
+        @media (min-width: 1800px) {
+          ul {
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            grid-auto-rows: 140px;
+          }
+        }
+        @media (min-width: 2400px) {
+          ul {
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+            grid-auto-rows: 150px;
+          }
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      menuId: String,
+      menus: Array,
+      routingTypes: Object,
+      favorites: Array,
+      showSpinner: Boolean
+    }
+  }
+
+  render() {
+    var topmenus = this.menus || []
+    var menuId = this.menuId
+
+    if (menuId !== 0 && !menuId) {
+      /* favorite menus */
+      var submenus = topmenus.reduce((allmenu, topmenu) => {
+        let menus = (topmenu && topmenu.children) || []
+        menus.forEach(menu => {
+          if (this.favorites.includes(this._getFullRouting(menu))) {
+            allmenu.push(menu)
+          }
+        })
+        return allmenu
+      }, [])
+    } else {
+      var menu = topmenus[menuId]
+      var submenus = (menu && menu.children) || []
+    }
+
+    return html`
+      <ul>
+        ${submenus.map(subMenu => {
+          const routing = this._getFullRouting(subMenu)
+
+          return html`
+            <li
+              class="${subMenu.class} text"
+              style="grid-row: span ${subMenu.routingType.toUpperCase() === 'STATIC' ? 1 : 2}"
+            >
+              <a href=${routing}>${subMenu.name}</a>
+
+              <md-icon ?selected=${(this.favorites || []).includes(routing)}
+                >${this.favorites || [].includes(routing) ? 'star' : 'star_border'}</md-icon
+              >
+            </li>
+          `
+        })}
+      </ul>
+
+      ${submenus.length == 0 && !this.showSpinner
+        ? typeof menuId == 'number'
+          ? html`
+              <ox-oops-note
+                icon="apps"
+                title="No Menu Found"
+                description="Seems like you are not authorised to view this menu"
+              ></ox-oops-note>
+            `
+          : html`
+              <ox-oops-note
+                icon="star_border"
+                title="No Favourite Found"
+                description="Click ☆ icon to add new favourite menu"
+              ></ox-oops-note>
+            `
+        : html``}
+
+      <ox-oops-spinner ?show=${this.showSpinner}></ox-oops-spinner>
+    `
+  }
+
+  _getFullRouting(menu) {
+    var { routingType, titleField, name, resourceUrl } = menu
+    if (routingType.toUpperCase() === 'STATIC') {
+      return resourceUrl
+    }
+
+    var { page } = this.routingTypes[routingType]
+    return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`
+  }
+}
+
+window.customElements.define('menu-tile-list', MenuTileList)