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

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

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

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