@things-factory/menu-ui 8.0.5 → 9.0.0-beta.12

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)