@things-factory/product-ui 4.0.25 → 4.0.26

package/client/pages/product-bundle-link-popup.js

@@ -361,8 +361,8 @@ class ProductBundleLinkPopup extends localize(i18next)(LitElement) {
       const productBundleId = this.record?.id
 
       if (productBundleId && patches) {
-        const response = await client.query({
-          query: gql`
+        const response = await client.mutate({
+          mutation: gql`
             mutation linkProductBundle($productBundleId: String!, $patches: [ProductBundleSettingPatch!]!) {
               linkProductBundle(productBundleId: $productBundleId, patches: $patches)
             }

package/client/pages/product-combination-settings-popup.js

@@ -349,8 +349,8 @@ class ProductCombinationSettingsPopup extends localize(i18next)(LitElement) {
       })
       const productCombinationId = this.record?.id
       if (productCombinationId && patches) {
-        const response = await client.query({
-          query: gql`
+        const response = await client.mutate({
+          mutation: gql`
             mutation linkProductCombination(
               $productCombinationId: String!
               $patches: [ProductCombinationSettingPatch!]!

package/client/pages/product-combinations-popup.js

@@ -284,8 +284,8 @@ class ProductCombinationsPopup extends localize(i18next)(LitElement) {
 
       if (!answer.value) return
 
-      const response = await client.query({
-        query: gql`
+      const response = await client.mutate({
+        mutation: gql`
           mutation deleteProductCombination($id: String!) {
             deleteProductCombination(id: $id)
           }
@@ -320,8 +320,8 @@ class ProductCombinationsPopup extends localize(i18next)(LitElement) {
         }
       })
       if (patches) {
-        const response = await client.query({
-          query: gql`
+        const response = await client.mutate({
+          mutation: gql`
             mutation updateMultipleProductCombination(
               $productDetailId: String!
               $patches: [ProductCombinationPatch!]!

package/client/pages/product-set-link-popup.js

@@ -3,8 +3,8 @@ import '@things-factory/form-ui'
 import '@things-factory/grist-ui'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { client, CustomAlert, gqlContext } from '@things-factory/shell'
-import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit-element'
 
@@ -635,9 +635,9 @@ export class ProductSetLinkPopup extends localize(i18next)(LitElement) {
     })
     let productSetId = this.productSetId
     if (this.productSetId && patches) {
-      const response = await client.query({
-        query: gql`
-          mutation($productSetId: String!, $patches: [ProductPatch]!) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($productSetId: String!, $patches: [ProductPatch]!) {
             linkProduct(productSetId: $productSetId, patches: $patches)
           }
         `,

package/client/route.js

@@ -11,9 +11,5 @@ export default function route(page) {
     case 'products':
       import('./pages/product-list')
       return page
-
-    case 'product_option_list':
-      import('./pages/product-option-list')
-      return page
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/product-ui",
-  "version": "4.0.25",
+  "version": "4.0.26",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,13 +24,13 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@things-factory/form-ui": "^4.0.25",
-    "@things-factory/grist-ui": "^4.0.25",
-    "@things-factory/i18n-base": "^4.0.25",
-    "@things-factory/import-ui": "^4.0.25",
-    "@things-factory/layout-base": "^4.0.25",
-    "@things-factory/product-base": "^4.0.25",
-    "@things-factory/shell": "^4.0.25"
+    "@things-factory/form-ui": "^4.0.26",
+    "@things-factory/grist-ui": "^4.0.26",
+    "@things-factory/i18n-base": "^4.0.26",
+    "@things-factory/import-ui": "^4.0.26",
+    "@things-factory/layout-base": "^4.0.26",
+    "@things-factory/product-base": "^4.0.26",
+    "@things-factory/shell": "^4.0.26"
   },
-  "gitHead": "9c44141d651dab7b4a9c0f0b6fecb8d6937d116f"
+  "gitHead": "c4b39c74b9ce2472f30c26eb36ec62054c1ecf82"
 }

package/things-factory.config.js

@@ -15,10 +15,6 @@ export default {
     {
       tagname: 'product-list',
       page: 'products'
-    },
-    {
-      tagname: 'product-option-list',
-      page: 'product_option_list'
     }
   ],
   bootstrap

package/client/pages/product-option-list.js

@@ -1,254 +0,0 @@
-import '@things-factory/form-ui'
-import '@things-factory/grist-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { openPopup } from '@things-factory/layout-base'
-import { client, CustomAlert, PageView } from '@things-factory/shell'
-import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
-import gql from 'graphql-tag'
-import { css, html } from 'lit-element'
-import './product-option-values'
-
-class ProductOptionList extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      searchFields: Array,
-      config: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-        search-form {
-          overflow: visible;
-        }
-        data-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <search-form .fields=${this.searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
-
-      <data-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .data=${this.data}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-      ></data-grist>
-    `
-  }
-
-  get context() {
-    return {
-      title: i18next.t('title.product_option'),
-      actions: [
-        {
-          title: i18next.t('button.save'),
-          action: () => this._saveProductOption(this.dataGrist.exportPatchList({ flagName: 'cuFlag ' })),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.delete'),
-          action: this._deleteProductOption.bind(this),
-          ...CommonButtonStyles.delete
-        }
-      ]
-    }
-  }
-
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
-  get dataGrist() {
-    return this.shadowRoot.querySelector('data-grist')
-  }
-
-  pageInitialized() {
-    this.searchFields = [
-      {
-        label: i18next.t('field.name'),
-        name: 'name',
-        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) this._openProductOptionValue(record.id, record.name)
-            }
-          }
-        },
-        {
-          type: 'string',
-          name: 'name',
-          record: { editable: true },
-          header: i18next.t('field.name'),
-          sortable: true,
-          width: 200
-        },
-        {
-          type: 'string',
-          name: 'description',
-          record: { editable: true },
-          header: i18next.t('field.description'),
-          sortable: true,
-          width: 400
-        },
-        {
-          type: 'object',
-          name: 'updater',
-          record: { align: 'center', editable: false },
-          header: i18next.t('field.updater'),
-          width: 250
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          record: { align: 'center', editable: false },
-          header: i18next.t('field.updated_at'),
-          sortable: true,
-          width: 180
-        }
-      ]
-    }
-  }
-
-  pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      this.dataGrist.fetch()
-    }
-  }
-
-  async fetchHandler({ page, limit, sorters = [{ name: 'name' }] }) {
-    const response = await client.query({
-      query: gql`
-        query {
-          productOptions(${gqlBuilder.buildArgs({
-            filters: await this.searchForm.getQueryFilters(),
-            pagination: { page, limit },
-            sortings: sorters
-          })}) {
-            items {
-              id
-              name
-              description              
-              updater {
-                name
-                description
-              }
-              updatedAt
-            }
-            total
-          }
-        }
-        `
-    })
-
-    if (!response.errors) {
-      return {
-        total: response.data.productOptions.total || 0,
-        records: response.data.productOptions.items || []
-      }
-    }
-  }
-
-  async _saveProductOption(patches) {
-    if (patches && patches.length) {
-      const response = await client.query({
-        query: gql`
-            mutation {
-              updateMultipleProductOption(${gqlBuilder.buildArgs({
-                patches
-              })}) {
-                name
-              }
-            }
-          `
-      })
-
-      if (!response.errors) {
-        this.dataGrist.fetch()
-        this.showToast(i18next.t('text.data_updated_successfully'))
-      }
-    } else {
-      CustomAlert({
-        title: i18next.t('text.nothing_changed'),
-        text: i18next.t('text.there_is_nothing_to_save')
-      })
-    }
-  }
-
-  async _deleteProductOption() {
-    const ids = this.dataGrist.selected.map(record => record.id)
-    if (ids && ids.length) {
-      const anwer = await CustomAlert({
-        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') }
-      })
-
-      if (!anwer.value) return
-
-      const response = await client.query({
-        query: gql`
-          mutation {
-            deleteProductOptions(${gqlBuilder.buildArgs({ ids })})
-          }
-        `
-      })
-
-      if (!response.errors) {
-        this.dataGrist.fetch()
-        this.showToast(i18next.t('text.data_deleted_successfully'))
-      }
-    } else {
-      CustomAlert({
-        title: i18next.t('text.nothing_selected'),
-        text: i18next.t('text.there_is_nothing_to_delete')
-      })
-    }
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
-  }
-
-  _openProductOptionValue(id, name) {
-    openPopup(html` <product-option-values .productOptionId="${id}"></product-option-values> `, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.product_option_values') + '(' + name + ')'
-    })
-  }
-}
-
-window.customElements.define('product-option-list', ProductOptionList)

package/client/pages/product-option-values.js

@@ -1,261 +0,0 @@
-import '@things-factory/form-ui'
-import '@things-factory/grist-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client, CustomAlert } from '@things-factory/shell'
-import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit-element'
-
-export class ProductOptionValues extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          background-color: white;
-        }
-        search-form {
-          overflow: visible;
-        }
-        .grist {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-        data-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 {
-      productOptionId: String,
-      searchFields: Array,
-      config: Object
-    }
-  }
-
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
-  get dataGrist() {
-    return this.shadowRoot.querySelector('data-grist')
-  }
-
-  render() {
-    return html`
-      <search-form .fields=${this.searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
-
-      <div class="grist">
-        <data-grist
-          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-          .config=${this.config}
-          .fetchHandler=${this.fetchHandler.bind(this)}
-        ></data-grist>
-      </div>
-
-      <div class="button-container">
-        <mwc-button @click=${this._saveProductOptionValues}>${i18next.t('button.save')}</mwc-button>
-        <mwc-button @click=${this._deleteProductOptionValues}>${i18next.t('button.delete')}</mwc-button>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    this.searchFields = [
-      {
-        label: i18next.t('field.name'),
-        name: 'name',
-        type: 'text',
-        props: { searchOper: 'i_like' }
-      },
-      {
-        label: i18next.t('field.description'),
-        name: '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: 'string',
-          name: 'name',
-          record: { align: 'left', editable: true },
-          header: i18next.t('field.name'),
-          width: 120
-        },
-        {
-          type: 'string',
-          name: 'description',
-          record: { align: 'left', editable: true },
-          header: i18next.t('field.description'),
-          width: 220
-        },
-        {
-          type: 'object',
-          name: 'updater',
-          record: { align: 'left', editable: false },
-          header: i18next.t('field.updater'),
-          width: 150
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          record: { align: 'left', editable: false },
-          header: i18next.t('field.updated_at'),
-          width: 150
-        }
-      ]
-    }
-  }
-
-  async fetchHandler({ page, limit, sorters = [{ name: 'name' }] }) {
-    let filters = []
-    if (this.productOptionId) {
-      filters.push({
-        name: 'productOption',
-        operator: 'eq',
-        value: this.productOptionId
-      })
-    }
-
-    const response = await client.query({
-      query: gql`
-        query {
-          productOptionValues(${gqlBuilder.buildArgs({
-            filters: [...filters, ...this.searchForm.queryFilters],
-            pagination: { page, limit },
-            sortings: sorters
-          })}) {
-            items {
-              id
-              name
-              description              
-              updatedAt
-              updater{
-                name
-                description
-              }
-            }
-            total
-          }
-        }
-      `
-    })
-
-    return {
-      total: response.data.productOptionValues.total || 0,
-      records: response.data.productOptionValues.items || []
-    }
-  }
-
-  async _saveProductOptionValues() {
-    let patches = this.dataGrist.exportPatchList({ flagName: 'cuFlag' })
-    if (patches && patches.length) {
-      patches = patches.map(productOptionValue => {
-        return {
-          ...productOptionValue,
-          productOption: { id: this.productOptionId }
-        }
-      })
-
-      const response = await client.query({
-        query: gql`
-          mutation {
-            updateMultipleProductOptionValue(${gqlBuilder.buildArgs({
-              patches
-            })}) {
-              name
-              description
-            }
-          }
-        `
-      })
-
-      if (!response.errors) {
-        this.dataGrist.fetch()
-        this.showToast(i18next.t('text.data_updated_successfully'))
-      }
-    } else {
-      CustomAlert({
-        title: i18next.t('text.nothing_changed'),
-        text: i18next.t('text.there_is_nothing_to_save')
-      })
-    }
-  }
-
-  async _deleteProductOptionValues() {
-    const ids = this.dataGrist.selected.map(record => record.id)
-    if (ids && ids.length > 0) {
-      const anwer = await CustomAlert({
-        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') }
-      })
-
-      if (!anwer.value) return
-
-      const response = await client.query({
-        query: gql`
-            mutation {
-              deleteProductOptionValues(${gqlBuilder.buildArgs({ ids })})
-            }
-          `
-      })
-      if (!response.errors) {
-        this.dataGrist.fetch()
-        this.showToast(i18next.t('text.data_deleted_successfully'))
-      }
-    } else {
-      CustomAlert({
-        title: i18next.t('text.nothing_selected'),
-        text: i18next.t('text.there_is_nothing_to_delete')
-      })
-    }
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
-  }
-}
-
-window.customElements.define('product-option-values', ProductOptionValues)