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

package/client/pages/{menu-management.js → menu-management.ts}

@@ -4,45 +4,46 @@ 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 { client, PageView } from '@things-factory/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
+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 get properties() {
-    return {
-      searchFields: Array,
-      config: Object,
-      data: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
+      search-form {
+        overflow: visible;
+      }
 
-        search-form {
-          overflow: visible;
-        }
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
 
-        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`
@@ -74,14 +75,6 @@ class MenuManagement extends localize(i18next)(PageView) {
     }
   }
 
-  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()
@@ -172,7 +165,7 @@ class MenuManagement extends localize(i18next)(PageView) {
     }
   }
 
-  async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
+  async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query {
@@ -267,11 +260,12 @@ class MenuManagement extends localize(i18next)(PageView) {
 
     if (patches && patches.length) {
       patches = patches.map(menu => {
-        let patchField = menu.id ? { id: menu.id } : {}
+        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'
 
@@ -290,5 +284,3 @@ class MenuManagement extends localize(i18next)(PageView) {
     })
   }
 }
-
-customElements.define('menu-management', MenuManagement)

package/client/pages/{role-menus-management.js → role-menus-management.ts}

@@ -5,73 +5,69 @@ 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'
+import { client, PageView } from '@things-factory/shell/client'
 
+@customElement('role-menus-management')
 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);
-        }
+  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 {
-          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;
-          }
+          min-width: 0;
         }
-      `
-    ]
-  }
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      selectedRole: Object,
-      parentMenus: Array,
-      roleMenus: Array,
-      menuSet: Object,
-      targetRole: Object
-    }
-  }
+  @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 {
@@ -114,7 +110,7 @@ class RoleMenusManagement extends localize(i18next)(PageView) {
   }
 
   get roleInput() {
-    return this.shadowRoot.querySelector('input')
+    return this.renderRoot.querySelector('input') as HTMLInputElement
   }
 
   async pageUpdated(changes) {
@@ -211,5 +207,3 @@ class RoleMenusManagement extends localize(i18next)(PageView) {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-window.customElements.define('role-menus-management', RoleMenusManagement)

package/client/viewparts/menu-bar.ts

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

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

@@ -0,0 +1,216 @@
+import '@material/web/icon/icon.js'
+import '@operato/oops'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('menu-tile-list')
+export default class MenuTileList extends LitElement {
+  static styles = [
+    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;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) menuId?: string
+  @property({ type: Array }) menus: any[] = []
+  @property({ type: Object }) routingTypes: any
+  @property({ type: Array }) favorites: any[] = []
+  @property({ type: Boolean }) showSpinner: boolean = false
+
+  render() {
+    var topmenus = this.menus || []
+    var menuId = this.menuId
+
+    if (!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 || ([] as any[])).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): string {
+    var { routingType, titleField, name, resourceUrl } = menu
+    if (routingType.toUpperCase() === 'STATIC') {
+      return resourceUrl
+    }
+
+    var { page } = this.routingTypes[routingType]
+    return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`
+  }
+}