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

package/client/apptools/favorite-tool.js

@@ -0,0 +1,130 @@
+import '@material/web/icon/icon.js'
+
+import { LitElement, html, css } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+import gql from 'graphql-tag'
+
+import { store, client } from '@things-factory/shell'
+import { UPDATE_FAVORITES } from '@things-factory/fav-base'
+
+export class FavoriteTool extends connect(store)(LitElement) {
+  static get properties() {
+    return {
+      favorites: Array,
+      user: Object,
+      page: String,
+      resourceId: String,
+      favored: Boolean,
+      routingTypes: Object,
+      blackList: Array
+    }
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 0;
+      }
+
+      [favorable] {
+        opacity: 0.5;
+      }
+    `
+  }
+
+  render() {
+    var renderable = (this.blackList || []).indexOf(this.page) == -1
+
+    return renderable
+      ? html`
+          <md-icon @click=${this.onclick.bind(this)} ?favorable=${!this.favored}
+            >${this.favored ? 'star' : 'star_border'}</md-icon
+          >
+        `
+      : html``
+  }
+
+  updated(changes) {
+    if (changes.has('user')) {
+      this.refreshFavorites()
+    }
+
+    this.favored = (this.favorites || []).includes(this.getFullRouting())
+  }
+
+  stateChanged(state) {
+    this.favorites = state.favorite.favorites
+    this.user = state.auth.user
+    this.page = state.route.page
+    this.resourceId = state.route.resourceId
+    this.routingTypes = state.menu.routingTypes
+  }
+
+  onclick(event) {
+    if (this.favored) {
+      this.removeFavorite(this.getFullRouting())
+    } else {
+      this.addFavorite(this.getFullRouting())
+    }
+  }
+
+  async refreshFavorites() {
+    if (!this.user || !this.user.email) {
+      return
+    }
+
+    const response = await client.query({
+      query: gql`
+        query {
+          myFavorites {
+            id
+            routing
+          }
+        }
+      `
+    })
+
+    store.dispatch({
+      type: UPDATE_FAVORITES,
+      favorites: response.data.myFavorites.map(favorite => favorite.routing)
+    })
+  }
+
+  async removeFavorite(routing) {
+    await client.query({
+      query: gql`
+        mutation {
+          deleteFavorite(routing: "${routing}")
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+
+  async addFavorite(routing) {
+    await client.query({
+      query: gql`
+        mutation {
+          createFavorite(favorite: {
+            routing: "${routing}"
+          }) {
+            id
+            routing
+          }
+        }
+      `
+    })
+
+    this.refreshFavorites()
+  }
+
+  getFullRouting() {
+    var routingType = Object.values(this.routingTypes).find(type => type.page == this.page)
+    return routingType ? `${this.page}/${this.resourceId}` : this.page
+  }
+}
+
+customElements.define('favorite-tool', FavoriteTool)

package/client/bootstrap.js

@@ -0,0 +1,57 @@
+import '@operato/i18n'
+import './apptools/favorite-tool'
+import './viewparts/menu-tree-bar'
+
+import { html } from 'lit-html'
+
+import { appendViewpart, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
+import { APPEND_APP_TOOL } from '@things-factory/apptool-base/client'
+import { auth } from '@things-factory/auth-base/dist-client'
+import { ADD_MORENDA } from '@things-factory/more-base/client'
+import { navigate, store } from '@operato/shell'
+import { isMobileDevice } from '@operato/utils'
+
+export default function bootstrap() {
+  if (!isMobileDevice()) {
+    appendViewpart({
+      name: 'menu-tree-bar',
+      viewpart: {
+        show: true,
+        template: html` <menu-tree-bar></menu-tree-bar> `
+      },
+      position: VIEWPART_POSITION.NAVBAR
+    })
+  }
+
+  store.dispatch({
+    type: APPEND_APP_TOOL,
+    tool: {
+      name: 'favorite-tool',
+      template: html` <favorite-tool .blackList=${['menu-list']}></favorite-tool> `,
+      position: TOOL_POSITION.REAR
+    }
+  })
+
+  auth.on('profile', ({ credential }) => {
+    if (credential.owner) {
+      appendRoleMenusManagementMorenda()
+    }
+  })
+}
+
+function appendRoleMenusManagementMorenda() {
+  const useRoleByMenusManagementMenu = store.getState()?.menu?.useRoleByMenusManagementMenu || false
+
+  if (useRoleByMenusManagementMenu) {
+    store.dispatch({
+      type: ADD_MORENDA,
+      morenda: {
+        icon: html` <md-icon>menu</md-icon> `,
+        name: html` <ox-i18n msgid="title.role_menus_management"></ox-i18n> `,
+        action: () => {
+          navigate('role-menus')
+        }
+      }
+    })
+  }
+}

package/client/components/child-menus-selector.js

@@ -0,0 +1,150 @@
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+class ChildMenusSelector extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          border: 1px solid var(--md-sys-color-primary);
+          font: normal 15px var(--theme-font);
+          color: var(--md-sys-color-secondary);
+        }
+        div {
+          margin: var(--spacing-medium);
+        }
+        ul {
+          flex: 1;
+          background-color: var(--md-sys-color-surface);
+          overflow: auto;
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          margin: 0;
+          padding: var(--spacing-medium);
+          list-style: none;
+          border: 1px dashed rgba(0, 0, 0, 0.1);
+          border-width: 1px 0;
+        }
+
+        input[type='checkbox'] {
+          display: inline;
+        }
+
+        li {
+          padding: var(--spacing-small);
+        }
+
+        #checkAll,
+        [for='checkAll'] {
+          margin-bottom: var(--spacing-medium);
+          padding-bottom: var(--spacing-small);
+          font-weight: bold;
+        }
+
+        @media screen and (max-width: 480px) {
+          ul {
+            grid-template-columns: 1fr;
+          }
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      parentMenu: Object,
+      roleMenus: Array,
+      targetRole: Object
+    }
+  }
+
+  render() {
+    const parentMenu = this.parentMenu || {}
+    const menus = parentMenu.children || []
+    const roleMenus = this.roleMenus || []
+
+    return html`
+      <div>
+        <input id="checkAll" type="checkbox" @change=${e => this.onCheckAll(e)} />
+        <label for="checkAll">Check all</label>
+      </div>
+
+      <ul menus>
+        ${menus?.map(
+          menu => html`
+            <li>
+              <label for="${menu.id}"
+                >${menu.name}
+                <input
+                  type="checkbox"
+                  id="${menu.id}"
+                  .checked=${roleMenus.map(p => p.id).indexOf(menu.id) > -1}
+                  .data-menu=${menu.id}
+                  @change=${e => this.onSave(e)}
+                />
+              </label>
+            </li>
+          `
+        )}
+      </ul>
+    `
+  }
+
+  get menuList() {
+    return this.renderRoot.querySelectorAll('ul[menus] input[type=checkbox]')
+  }
+
+  async onCheckAll(e) {
+    const checked = e.currentTarget.checked
+
+    Array.from(this.menuList).forEach(checkbox => (checkbox.checked = checked))
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($roleId: String!, $parentMenuId: String!, $isCheckedAll: Boolean!) {
+          updateRoleMenus(roleId: $roleId, parentMenuId: $parentMenuId, isCheckedAll: $isCheckedAll) {
+            name
+          }
+        }
+      `,
+      variables: { roleId: this.targetRole.id, parentMenuId: this.parentMenu.id, isCheckedAll: checked }
+    })
+
+    if (!response.errors) {
+      this.dispatchEvent(new CustomEvent('updateRoleMenus'))
+      this.showToast(i18next.t('text.data_updated_successfully'))
+    }
+  }
+
+  async onSave(e) {
+    const menuId = e.currentTarget.id
+    const isCheckedMenu = e.currentTarget.checked
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($roleId: String!, $targetMenuId: String!, $isCheckedMenu: Boolean!) {
+          updateRoleMenu(roleId: $roleId, targetMenuId: $targetMenuId, isCheckedMenu: $isCheckedMenu) {
+            id
+            name
+          }
+        }
+      `,
+      variables: { roleId: this.targetRole.id, targetMenuId: menuId, isCheckedMenu }
+    })
+
+    if (!response.errors) {
+      this.dispatchEvent(new CustomEvent('updateRoleMenus'))
+      this.showToast(i18next.t('text.data_updated_successfully'))
+    }
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}
+
+customElements.define('child-menus-selector', ChildMenusSelector)

package/client/components/role-select-popup.js

@@ -0,0 +1,179 @@
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { isMobileDevice } from '@operato/utils'
+import '@operato/data-grist'
+import { CommonHeaderStyles } from '@operato/styles'
+
+class RoleSelectPopup extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      CommonHeaderStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          background-color: var(--md-sys-color-surface);
+        }
+
+        .container {
+          flex: 1;
+          display: flex;
+          overflow-y: auto;
+          min-height: 20vh;
+        }
+
+        .grist {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          overflow-y: auto;
+        }
+
+        ox-grist {
+          overflow-y: hidden;
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _searchFields: Array,
+      config: Object
+    }
+  }
+
+  render() {
+    return html`
+      <search-form .fields=${this._searchFields} @submit=${async () => this.dataGrist.fetch()}></search-form>
+
+      <div class="container">
+        <div class="grist">
+          <ox-grist
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .config=${this.config}
+            .fetchHandler="${this.fetchHandler.bind(this)}"
+          ></ox-grist>
+        </div>
+      </div>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this._selectRole.bind(this)} label=${i18next.t('button.select')} done></button>
+      </div>
+    `
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('ox-grist')
+  }
+
+  firstUpdated() {
+    this._searchFields = [
+      {
+        name: 'name',
+        type: 'text',
+        props: {
+          placeholder: i18next.t('field.name'),
+          searchOper: 'i_like'
+        }
+      },
+      {
+        name: 'description',
+        type: 'text',
+        props: {
+          placeholder: i18next.t('field.description'),
+          searchOper: 'i_like'
+        }
+      }
+    ]
+
+    this.config = {
+      rows: {
+        appendable: false
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: false },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: false
+          },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          width: 250
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          width: 180
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    const filters = this.searchForm?.queryFilters || []
+
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          roles(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings: sorters
+      }
+    })
+
+    return {
+      total: response.data.roles.total || 0,
+      records: response.data.roles.items || []
+    }
+  }
+
+  _selectRole() {
+    const selectedRole = this.dataGrist.selected[0]
+    if (selectedRole) {
+      this.dispatchEvent(new CustomEvent('selected', { detail: this.dataGrist.selected[0] }))
+      history.back()
+    } else {
+      this.showToast(i18next.t('text.target_is_not_selected'))
+    }
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
+  }
+}
+
+window.customElements.define('role-select-popup', RoleSelectPopup)

package/client/pages/menu-list-page.js

@@ -0,0 +1,200 @@
+import '../viewparts/menu-bar'
+import '../viewparts/menu-tile-list'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { client, navigate, PageView, store } from '@things-factory/shell'
+import { ScrollbarStyles } from '@operato/styles'
+import { pulltorefresh, swipe } from '@things-factory/utils'
+
+class MenuListPage extends connect(store)(PageView) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+
+        menu-bar {
+          z-index: 1;
+        }
+
+        menu-tile-list {
+          flex: 1;
+          overflow-y: auto;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      menuId: String,
+      menus: Array,
+      routingTypes: Object,
+      favorites: Array,
+      user: Object,
+      showSpinner: Boolean
+    }
+  }
+
+  render() {
+    return html`
+      <menu-bar .menus=${this.menus} .menuId=${this.menuId}></menu-bar>
+
+      <menu-tile-list
+        .menus=${this.menus}
+        .routingTypes=${this.routingTypes}
+        .menuId=${this.menuId}
+        .favorites=${this.favorites}
+        .showSpinner=${this.showSpinner}
+      ></menu-tile-list>
+    `
+  }
+
+  get context() {
+    return {
+      title: 'Menu'
+    }
+  }
+
+  async fetchMenus() {
+    const response = await client.query({
+      query: gql`
+        query {
+          userMenus {
+            id
+            name
+            role {
+              id
+              name
+              description
+            }
+            children {
+              id
+              name
+              routingType
+              idField
+              titleField
+              resourceName
+              resourceUrl
+              template
+              role {
+                id
+                name
+                description
+              }
+            }
+          }
+        }
+      `
+    })
+
+    return response.data.userMenus
+  }
+
+  async updated(changes) {
+    if (changes.has('user')) {
+      if (this.user && this.user.email) {
+        this.refresh()
+      }
+    }
+  }
+
+  stateChanged(state) {
+    this.page = state.route.page
+    this.routingTypes = state.menu.routingTypes
+    this.menuId = state.route.resourceId
+    this.favorites = state.favorite.favorites
+    this.user = state.auth.user
+
+    var provider = state.menu.provider
+    this.getMenus = typeof provider === 'function' ? provider.bind(this) : this.fetchMenus
+  }
+
+  async refresh() {
+    this.showSpinner = true
+    this.menus = await this.getMenus()
+    this.showSpinner = false
+  }
+
+  async firstUpdated() {
+    var list = this.shadowRoot.querySelector('menu-tile-list')
+
+    pulltorefresh({
+      container: this.shadowRoot,
+      scrollable: list,
+      refresh: () => {
+        return this.refresh()
+      }
+    })
+
+    swipe({
+      container: this.shadowRoot.querySelector('menu-tile-list'),
+      animates: {
+        dragging: async (d, opts) => {
+          var currentIndex = Number(this.menuId)
+          var isHome = this.menuId === '' || this.menuId === undefined
+
+          if ((d > 0 && isHome) || (d < 0 && currentIndex >= this.menus.length - 1)) {
+            /* TODO blocked gesture */
+            return false
+          }
+
+          list.style.transform = `translate3d(${d}px, 0, 0)`
+        },
+        aborting: async opts => {
+          list.style.transition = 'transform 0.3s'
+          list.style.transform = `translate3d(0, 0, 0)`
+
+          setTimeout(() => {
+            list.style.transition = ''
+          }, 300)
+        },
+        swiping: async (d, opts) => {
+          var currentIndex = Number(this.menuId)
+          var isHome = this.menuId === '' || this.menuId === undefined
+
+          if ((d > 0 && isHome) || (d < 0 && currentIndex >= this.menus.length - 1)) {
+            list.style.transform = `translate3d(0, 0, 0)`
+
+            return
+          }
+
+          list.style.transition = 'transform 0.3s'
+          list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`
+
+          setTimeout(() => {
+            if (isHome) {
+              navigate(`${this.page}/0`)
+            } else if (d > 0 && currentIndex == 0) {
+              navigate(`${this.page}`)
+            } else {
+              navigate(`${this.page}/${currentIndex + (d < 0 ? 1 : -1)}`)
+            }
+
+            list.style.transition = ''
+            list.style.transform = `translate3d(${d < 0 ? '100%' : '-100%'}, 0, 0)`
+
+            requestAnimationFrame(() => {
+              list.style.transition = 'transform 0.3s'
+              list.style.transform = `translate3d(0, 0, 0)`
+            })
+          }, 300)
+        }
+      }
+    })
+
+    await this.updateComplete
+
+    this.refresh()
+  }
+}
+
+window.customElements.define('menu-list-page', MenuListPage)