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

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)

package/client/pages/menu-management.js

@@ -1,294 +0,0 @@
-import '@things-factory/form-ui'
-import '@operato/data-grist'
-import './menu-management-detail'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-
-import { openPopup } from '@operato/layout'
-import { i18next, localize } from '@operato/i18n'
-import { client, PageView } from '@things-factory/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
-
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-class MenuManagement extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      searchFields: Array,
-      config: Object,
-      data: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-
-        search-form {
-          overflow: visible;
-        }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <search-form .fields=${this.searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
-
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-      ></ox-grist>
-    `
-  }
-
-  get context() {
-    return {
-      title: i18next.t('title.menu_management'),
-      actions: [
-        {
-          title: i18next.t('button.save'),
-          action: this.save.bind(this),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.delete'),
-          action: this.delete.bind(this),
-          ...CommonButtonStyles.delete
-        }
-      ]
-    }
-  }
-
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
-  pageUpdated(_changes, _lifecycle) {
-    if (this.active) {
-      this.dataGrist.fetch()
-    }
-  }
-
-  pageInitialized() {
-    this.searchFields = [
-      {
-        name: 'name',
-        label: i18next.t('label.name'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        name: 'description',
-        label: i18next.t('label.description'),
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      }
-    ]
-
-    this.config = {
-      rows: { selectable: { multiple: true } },
-      columns: [
-        { type: 'gutter', gutterName: 'dirty' },
-        { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'reorder',
-          handlers: {
-            click: (_columns, _data, _column, record, _rowIndex) => {
-              if (record.id && record.name) this.openMenuDetail(record.id, record.name)
-            }
-          }
-        },
-        {
-          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: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: { editable: true, align: 'left' },
-          sortable: true,
-          width: 200
-        },
-        {
-          type: 'boolean',
-          name: 'hiddenFlag',
-          header: i18next.t('field.hidden_flag'),
-          record: { editable: false },
-          sortable: true,
-          width: 80
-        },
-        {
-          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: 'menuType', operator: 'eq', value: 'MENU' }],
-            pagination: { page, limit },
-            sortings: sorters
-          })}) {
-            items {
-              id
-              name
-              rank
-              description
-              hiddenFlag
-              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 } : {}
-        const dirtyFields = menu.__dirtyfields__
-        for (let key in dirtyFields) {
-          patchField[key] = dirtyFields[key].after
-        }
-        patchField.cuFlag = menu.__dirty__
-        patchField.menuType = 'MENU'
-
-        return patchField
-      })
-    }
-
-    return patches
-  }
-
-  openMenuDetail(menuId, menuName) {
-    openPopup(html` <menu-management-detail .menuId=${menuId}></menu-management-detail> `, {
-      backdrop: true,
-      size: 'large',
-      title: `${i18next.t('title.menu_management_detail')} - ${menuName}`
-    })
-  }
-}
-
-customElements.define('menu-management', MenuManagement)