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

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)

package/client/pages/menu-management-detail.js

@@ -1,384 +0,0 @@
-import '@things-factory/form-ui'
-import '@operato/data-grist'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-
-import { getEditor, getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@operato/i18n'
-import { client } from '@operato/graphql'
-import { ScrollbarStyles } from '@operato/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
-
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-class MenuManagementDetail extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          background-color: var(--md-sys-color-surface);
-        }
-        search-form {
-          overflow: visible;
-        }
-        .grist {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-        ox-grist {
-          overflow-y: hidden;
-          flex: 1;
-        }
-        .button-container {
-          padding: 10px 0 12px 0;
-          text-align: center;
-        }
-        .button-container > button {
-          background-color: var(--button-background-color);
-          border: var(--button-border);
-          border-radius: var(--button-border-radius);
-          margin: var(--button-margin);
-          padding: var(--button-padding);
-          color: var(--button-color);
-          font: var(--button-font);
-          text-transform: var(--button-text-transform);
-        }
-        .button-container > button:hover,
-        .button-container > button:active {
-          background-color: var(--button-background-focus-color);
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      menuId: String,
-      searchFields: Object,
-      config: Object
-    }
-  }
-
-  render() {
-    return html`
-      <search-form .fields=${this.searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
-
-      <div class="grist">
-        <ox-grist
-          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-          .config=${this.config}
-          .fetchHandler=${this.fetchHandler.bind(this)}
-        ></ox-grist>
-      </div>
-
-      <div class="button-container">
-        <button @click=${this.save}>${i18next.t('button.save')}</button>
-        <button @click=${this.delete}>${i18next.t('button.delete')}</button>
-      </div>
-    `
-  }
-
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
-  firstUpdated() {
-    this.searchFields = [
-      {
-        name: 'name',
-        label: i18next.t('field.name'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        name: 'description',
-        label: i18next.t('field.description'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        name: 'template',
-        label: i18next.t('field.template'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        name: 'category',
-        label: i18next.t('field.category'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        name: 'resourceUrl',
-        label: i18next.t('field.resource_url'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        name: 'hiddenFlag',
-        label: i18next.t('field.hidden_flag'),
-        type: 'checkbox',
-        props: { searchOper: 'eq' },
-        attrs: ['indeterminate']
-      }
-    ]
-
-    this.config = {
-      rows: { selectable: { multiple: true } },
-      pagination: { infinite: true },
-      columns: [
-        { type: 'gutter', gutterName: 'dirty' },
-        { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: { editable: true, align: 'left' },
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'integer',
-          name: 'rank',
-          header: i18next.t('field.rank'),
-          record: { editable: true },
-          sortable: true,
-          width: 80
-        },
-        {
-          type: 'select',
-          name: 'resourceType',
-          header: i18next.t('field.type'),
-          record: {
-            editable: true,
-            options: ['', 'board']
-          },
-          width: 80
-        },
-        {
-          type: 'string',
-          name: 'resourceId',
-          header: i18next.t('field.value'),
-          record: {
-            editable: true,
-            editor: function (value, column, record, rowIndex, field) {
-              const type = record.resourceType || 'string'
-              if (value && type !== 'board') {
-                delete record.resourceId
-                value = ''
-              }
-              return getEditor(type)(value, column, record, rowIndex, field)
-            },
-            renderer: function (value, column, record, rowIndex, field) {
-              const type = record.resourceType || 'string'
-              if (value && type !== 'board') {
-                delete record.resourceId
-                value = ''
-              }
-              return getRenderer(type)(value, column, record, rowIndex, field)
-            }
-          },
-          width: 140
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: { editable: true, align: 'left' },
-          sortable: true,
-          width: 200
-        },
-        {
-          type: 'string',
-          name: 'template',
-          header: i18next.t('field.template'),
-          record: { editable: true, align: 'left' },
-          sortable: true,
-          width: 160
-        },
-        {
-          type: 'string',
-          name: 'resourceUrl',
-          header: i18next.t('field.resource_url'),
-          record: { editable: true, align: 'left' },
-          sortable: true,
-          width: 160
-        },
-        {
-          type: 'boolean',
-          name: 'hiddenFlag',
-          header: i18next.t('field.hidden_flag'),
-          record: { editable: true },
-          sortable: true,
-          width: 80
-        },
-        {
-          type: 'resource-object',
-          name: 'role',
-          label: true,
-          header: i18next.t('field.required role'),
-          record: {
-            editable: true,
-            options: {
-              title: i18next.t('title.lookup role'),
-              queryName: 'roles'
-            }
-          },
-          width: 200
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
-          record: { editable: false },
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'object',
-          name: 'updater',
-          header: i18next.t('field.updater'),
-          record: { editable: false },
-          sortable: true,
-          width: 150
-        }
-      ]
-    }
-  }
-
-  async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
-    const response = await client.query({
-      query: gql`
-        query {
-          menus(${gqlBuilder.buildArgs({
-            filters: [...this.searchForm.queryFilters, { name: 'parentId', operator: 'eq', value: this.menuId }],
-            pagination: { page, limit },
-            sortings: sorters
-          })}) {
-            items {
-              id
-              name
-              rank
-              description
-              category
-              template
-              resourceUrl
-              resourceType
-              resourceId
-              hiddenFlag
-              role {
-                id
-                name
-                description
-              }
-              updatedAt
-              updater{
-                id
-                name
-                description
-              }
-            }
-            total
-          }
-        }
-      `
-    })
-
-    return {
-      total: response.data.menus.total || 0,
-      records: response.data.menus.items || []
-    }
-  }
-
-  async save() {
-    const patches = this.getPatches()
-    if (patches && patches.length) {
-      const response = await client.query({
-        query: gql`
-          mutation {
-            updateMultipleMenu(${gqlBuilder.buildArgs({
-              patches
-            })}) {
-              name
-            }
-          }
-        `
-      })
-
-      if (!response.errors) this.dataGrist.fetch()
-    } else {
-      OxPrompt.open({
-        title: i18next.t('text.nothing_changed'),
-        text: i18next.t('text.there_is_nothing_to_save')
-      })
-    }
-  }
-
-  async delete() {
-    const ids = this.dataGrist.selected.map(record => record.id)
-    if (ids && ids.length > 0) {
-      if (
-        await OxPrompt.open({
-          type: 'warning',
-          title: i18next.t('button.delete'),
-          text: i18next.t('text.are_you_sure'),
-          confirmButton: { text: i18next.t('button.delete') },
-          cancelButton: { text: i18next.t('button.cancel') }
-        })
-      ) {
-        const response = await client.query({
-          query: gql`
-            mutation {
-              deleteMenus(${gqlBuilder.buildArgs({ ids })})
-            }
-          `
-        })
-
-        if (!response.errors) {
-          this.dataGrist.fetch()
-        }
-      }
-    } else {
-      OxPrompt.open({
-        title: i18next.t('text.nothing_selected'),
-        text: i18next.t('text.there_is_nothing_to_delete')
-      })
-    }
-  }
-
-  getPatches() {
-    let patches = this.dataGrist.dirtyRecords
-    if (patches && patches.length) {
-      patches = patches.map(menu => {
-        let patchField = menu.id ? { id: menu.id } : {}
-        patchField = { ...patchField, routingType: menu.routingType, menuType: menu.menuType }
-        const dirtyFields = menu.__dirtyfields__
-        for (let key in dirtyFields) {
-          patchField[key] = dirtyFields[key].after
-        }
-        patchField.parent = { id: this.menuId }
-        patchField.routingType = patchField.routingType || 'STATIC'
-        patchField.menuType = patchField.menuType || 'SCREEN'
-        patchField.cuFlag = menu.__dirty__
-
-        return patchField
-      })
-    }
-
-    return patches
-  }
-}
-
-customElements.define('menu-management-detail', MenuManagementDetail)