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

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

@@ -1,216 +0,0 @@
-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}`
-  }
-}

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

@@ -1,289 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { client, store } from '@things-factory/shell/client'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('menu-tree-bar')
-export default class MenuTreeBar extends connect(store)(LitElement) {
-  static styles = [
-    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;
-      }
-    `
-  ]
-
-  @property({ type: String }) menuId?: string
-  @property({ type: Array }) menus: any[] = []
-  @property({ type: Array }) favorites: string[] = []
-  @property({ type: Array }) routingTypes: string[] = []
-  @property({ type: String }) page?: string
-  @property({ type: Object }) user?: any
-  @property({ type: String }) contextPath?: string
-  @property({ type: Array }) domains: any[] = []
-  @property({ type: Object }) domain?: any
-
-  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] || ({} as any)
-                  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.renderRoot.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] as any
-    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
-  }
-}