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

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

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

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