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

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

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

package/client/viewparts/menu-tree-bar.js

@@ -1,295 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { client, store } from '@things-factory/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-export default class MenuTreeBar extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          min-width: 200px;
-        }
-        [domain] {
-          background: var(--menu-domain-background-color);
-          background: linear-gradient(180deg, var(--md-sys-color-secondary) 0%, var(--md-sys-color-primary) 120%);
-          padding: var(--menu-domain-padding);
-          border-bottom: 1px solid var(--md-sys-color-primary);
-        }
-        [domain] md-icon {
-          margin-right: -8px;
-          font-size: 12px;
-          color: var(--menu-domain-icon-color);
-        }
-        [domain] * {
-          vertical-align: middle;
-        }
-        [domain] span {
-          padding-left: 7px;
-          font: var(--menu-domain-font);
-          color: var(--menu-domain-color);
-        }
-        [domain] select {
-          background-color: transparent;
-          width: -webkit-fill-available;
-          max-width: 175px;
-          border: none;
-
-          font: var(--menu-domain-font);
-          color: var(--menu-domain-color);
-        }
-        select:focus {
-          outline: 0;
-        }
-
-        ul {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-        }
-
-        ul[toplevel] {
-          overflow: auto;
-        }
-
-        li {
-          border-bottom: var(--menu-tree-toplevel-border-bottom);
-        }
-
-        [grouplevel] li {
-          border-bottom: var(--menu-tree-grouplevel-border-bottom);
-        }
-
-        li span,
-        li a {
-          display: block;
-          text-decoration: none;
-          position: relative;
-        }
-
-        [menutype] {
-          position: absolute;
-          font-size: 1.2em;
-          right: 0;
-          bottom: 50%;
-          transform: translate(-5px, 50%);
-        }
-
-        [favorite] {
-          color: var(--menu-tree-favorite-color, tomato);
-        }
-
-        [groupmenu] > span {
-          padding: 9px 9px 7px 10px;
-          font: var(--menu-tree-toplevel-font);
-          color: var(--menu-tree-toplevel-color);
-        }
-
-        a {
-          background-color: rgba(0, 0, 0, 0.4);
-          padding: 7px 7px 6px 15px;
-          font: var(--menu-tree-grouplevel-font);
-          color: var(--menu-tree-grouplevel-color);
-        }
-
-        [groupmenu] > span::before {
-          content: '';
-          display: inline-block;
-          width: var(--menu-tree-toplevel-icon-size);
-          height: var(--menu-tree-toplevel-icon-size);
-          border: var(--menu-tree-toplevel-icon-border);
-          border-radius: 50%;
-          margin-right: 5px;
-        }
-
-        a span::before {
-          content: '-';
-          margin-right: 4px;
-        }
-
-        [expanded] > span {
-          font-weight: bold;
-          color: var(--menu-tree-focus-color);
-        }
-
-        [grouplevel] {
-          overflow-y: hidden;
-          max-height: 0;
-
-          transition-property: all;
-          transition-duration: 0.7s;
-        }
-
-        [expanded] > [grouplevel] {
-          overflow-y: auto;
-          max-height: 500px;
-        }
-
-        li[active] a {
-          color: var(--menu-tree-focus-color);
-          font-weight: bold;
-          border-left: var(--menu-tree-grouplevel-active-border-left);
-          background-color: rgba(0, 0, 0, 0.6);
-          padding-left: 12px;
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      menuId: String,
-      menus: Array,
-      favorites: Array,
-      routingTypes: Object,
-      page: Object,
-      user: Object,
-      contextPath: String,
-      domains: Array,
-      domain: Object
-    }
-  }
-
-  render() {
-    var domains = this.domains || []
-    var domain = this.domain || {}
-    const currentRouting = decodeURIComponent(
-      location.pathname.substr(this.contextPath ? this.contextPath.length + 1 : 1)
-    )
-
-    return html`
-      <div domain>
-        <md-icon>beenhere</md-icon>
-        ${domains.length <= 1
-          ? html` <span>${domain.name}</span> `
-          : html`
-              <select
-                .value=${domain.subdomain}
-                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
-              >
-                ${domains.map(
-                  d => html`
-                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d.name}</option>
-                  `
-                )}
-              </select>
-            `}
-      </div>
-
-      <ul toplevel>
-        ${(this.menus || []).map(
-          menu => html`
-            <li groupmenu>
-              <span
-                @click=${e => {
-                  e.target.parentElement.toggleAttribute('expanded')
-                  this.renderRoot
-                    .querySelectorAll('[expanded]')
-                    .forEach(element => element !== e.target.parentElement && element.removeAttribute('expanded'))
-                }}
-                >${menu.name}</span
-              >
-
-              <ul grouplevel>
-                ${menu.children.map(subMenu => {
-                  const routing = this._getFullRouting(subMenu)
-                  const favorite = this.favorites.includes(routing)
-                  const { icon } = this.routingTypes[subMenu.routingType] || {}
-                  const typeIcon = icon ? icon : favorite ? 'star' : null
-
-                  return html`
-                    <li ?active=${routing === currentRouting}>
-                      <a href=${routing}>
-                        <span>${subMenu.name}</span>
-                        ${typeIcon ? html` <md-icon menutype ?favorite=${favorite}>${typeIcon}</md-icon> ` : html``}</a
-                      >
-                    </li>
-                  `
-                })}
-              </ul>
-            </li>
-          `
-        )}
-      </ul>
-    `
-  }
-
-  async updated(changes) {
-    if (changes.has('user')) {
-      this.menus = await this.getMenus()
-    }
-
-    await this.updateComplete
-
-    var active = this.shadowRoot.querySelector('[active]')
-    if (active) {
-      active.parentElement.parentElement.setAttribute('expanded', '')
-    }
-  }
-
-  stateChanged(state) {
-    this.contextPath = state.app.contextPath
-    this.routingTypes = state.menu.routingTypes
-    this.menuId = state.route.resourceId
-    this.page = state.route.page
-    this.user = state.auth.user
-    this.domains = state.app.domains
-    this.domain = state.app.domain
-    this.getMenus =
-      state.menu.provider && typeof state.menu.provider === 'function' ? state.menu.provider : this.getMenus
-    this.favorites = state.favorite.favorites
-  }
-
-  _getFullRouting(menu) {
-    var { routingType, resourceUrl, titleField, name, resourceType, resourceId } = menu
-    if (routingType.toUpperCase() === 'STATIC') {
-      if (resourceType?.toUpperCase() === 'BOARD') {
-        return `${resourceUrl || 'board-viewer'}/${resourceId}?title=${name}`
-      }
-      return resourceUrl
-    }
-
-    var { page } = this.routingTypes[routingType]
-    return titleField ? `${page}/${menu[titleField]}` : `${page}/${name}`
-  }
-
-  _onClickRefresh(e) {
-    this.dispatchEvent(new CustomEvent('refresh'))
-  }
-
-  async getMenus() {
-    const response = await client.query({
-      query: gql`
-        query {
-          userMenus {
-            id
-            name
-            children {
-              id
-              name
-              routingType
-              idField
-              titleField
-              resourceType
-              resourceId
-              resourceName
-              resourceUrl
-              template
-            }
-          }
-        }
-      `
-    })
-
-    return response.data.userMenus
-  }
-}
-
-window.customElements.define('menu-tree-bar', MenuTreeBar)