@things-factory/reference-app 5.0.0-zeta.7 → 5.0.0

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

@@ -0,0 +1,395 @@
+import '@things-factory/form-ui'
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { client, CustomAlert, gqlContext } from '@things-factory/shell'
+
+class ProductCombinationSettingsPopup extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      record: Object,
+      marketplace: Object,
+      productSetId: String,
+      searchFields: Array,
+      productConfig: Object,
+      productCombinationSettingConfig: Object,
+      productCombinationSettingData: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+        search-form {
+          overflow: visible;
+        }
+        ox-grist {
+          flex: 1;
+        }
+        .grist-container {
+          display: flex;
+          overflow: auto;
+          flex: 1;
+        }
+        .grist-column {
+          overflow: hidden;
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+        }
+        .button-container {
+          padding: 10px 0 12px 0;
+          text-align: center;
+        }
+        [danger] {
+          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+        }
+        .header {
+          display: grid;
+          grid-template-columns: repeat(24, 1fr);
+          grid-gap: var(--form-grid-gap);
+          grid-auto-rows: minmax(24px, auto);
+          max-width: var(--form-multi-column-max-width);
+          margin-top: var(--form-margin);
+          margin-left: var(--form-margin);
+          margin-right: var(--form-margin);
+        }
+        .header legend {
+          grid-column: span 24;
+          text-transform: capitalize;
+
+          padding: var(--legend-padding);
+          font: var(--legend-font);
+          color: var(--legend-text-color);
+          border-bottom: var(--legend-border-bottom);
+        }
+      `
+    ]
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('#search-form')
+  }
+
+  get productListGrist() {
+    return this.shadowRoot.querySelector('ox-grist#product_list_grist')
+  }
+
+  get productCombinationSettingGrist() {
+    return this.shadowRoot.querySelector('ox-grist#product_combination_setting_grist')
+  }
+
+  render() {
+    return html`
+      <div class="grist-container">
+        <div class="grist-column">
+          <search-form
+            id="search-form"
+            .fields=${this.searchFields}
+            @submit=${e => this.productListGrist.fetch()}
+          ></search-form>
+
+          <ox-grist
+            id="product_list_grist"
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .config=${this.productConfig}
+            .fetchHandler=${this._fetchMyBizplaceProducts.bind(this)}
+          >
+          </ox-grist>
+
+          <div class="header">
+            <legend>${i18next.t('title.linked_products')}</legend>
+          </div>
+
+          <ox-grist
+            id="product_combination_setting_grist"
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .config=${this.productCombinationSettingConfig}
+            .data=${this.productCombinationSettingData}
+          ></ox-grist>
+        </div>
+      </div>
+
+      <div class="button-container">
+        <mwc-button
+          @click=${this.linkProductCombination}
+          raised
+          label="${i18next.t('button.link_product')}"
+        ></mwc-button>
+      </div>
+    `
+  }
+
+  async updated(changedProps) {
+    if (changedProps.has('record')) this.productCombinationSettingData = await this._fetchProductCombinationLink()
+  }
+
+  async firstUpdated() {
+    this.searchFields = [
+      {
+        label: i18next.t('field.product_info'),
+        name: 'product_info',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.type'),
+        name: 'type',
+        props: {
+          searchOper: 'i_like'
+        }
+      }
+    ]
+
+    const _productColumns = [
+      {
+        type: 'string',
+        name: 'productSku',
+        header: i18next.t('field.sku'),
+        sortable: false,
+        record: { editable: false },
+        width: 150
+      },
+      {
+        type: 'string',
+        name: 'gtin',
+        header: i18next.t('field.gtin'),
+        sortable: false,
+        record: { editable: false },
+        width: 150
+      },
+      {
+        type: 'string',
+        name: 'productName',
+        header: i18next.t('field.name'),
+        sortable: true,
+        record: { editable: false, align: 'left' },
+        width: 220
+      },
+      {
+        type: 'string',
+        name: 'packingType',
+        header: i18next.t('field.packing_type'),
+        record: { editable: false },
+        width: 120
+      }
+    ]
+
+    this.productConfig = {
+      rows: {
+        selectable: { multiple: true },
+        appendable: false
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'add',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record) this.addProductLink(record)
+            }
+          }
+        },
+        ..._productColumns
+      ]
+    }
+
+    this.productCombinationSettingConfig = {
+      pagination: { infinite: true },
+      rows: { appendable: false },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'clear',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record) this.removeProductLink(_data.records, _rowIndex)
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'id', //id of product combination setting
+          hidden: true
+        },
+        {
+          type: 'number',
+          name: 'qty',
+          header: i18next.t('field.qty'),
+          record: { editable: true, align: 'left' },
+          width: 120
+        },
+        ..._productColumns
+      ]
+    }
+
+    this.productCombinationSettingData = await this._fetchProductCombinationLink()
+  }
+
+  async _fetchMyBizplaceProducts({ page, limit, sorters = [] }) {
+    return await this._fetchProducts({ page, limit, sorters, filters: [...this.searchForm.queryFilters] })
+  }
+
+  async _fetchProductCombinationLink() {
+    return await this._fetchProducts({ page: 1, limit: 1000, combinationId: true })
+  }
+
+  async _fetchProducts({ page, limit, sorters = [], filters = [], combinationId = false }) {
+    filters.push({
+      name: 'productCombinationId',
+      operator: combinationId ? 'eq' : 'noteq',
+      value: this.record?.id || ''
+    })
+    const response = await client.query({
+      query: gql`
+        query productCombinationSets($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+          productCombinationSets(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              productId
+              productName
+              productSku
+              productDescription
+              productType
+              qty
+              productDetailId
+              gtin
+              packingType
+              packingSize
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings: sorters
+      },
+      context: gqlContext()
+    })
+    if (!response.errors) {
+      return {
+        records: response.data.productCombinationSets.items || [],
+        total: response.data.productCombinationSets.total || 0
+      }
+    }
+  }
+
+  addProductLink(record) {
+    if (
+      this.productCombinationSettingData.records.findIndex(
+        x => x.productId === record.productId && x.productDetailId === record.productDetailId
+      ) < 0
+    ) {
+      // set qty to null because it is new item to be linked
+      record.qty = null
+      this.productCombinationSettingData = {
+        ...this.productCombinationSettingData,
+        records: [...this.productCombinationSettingGrist.dirtyData.records, record]
+      }
+    } else {
+      this._showToast({ level: 'error', message: i18next.t('text.existing_item_found') })
+    }
+  }
+
+  removeProductLink(records, index) {
+    records.splice(index, 1)
+
+    this.productCombinationSettingData = {
+      ...this.productCombinationSettingData,
+      records
+    }
+  }
+
+  async linkProductCombination() {
+    try {
+      let patches = this.productCombinationSettingGrist.dirtyData.records.map(record => {
+        const qty = record.qty
+        if (!qty || qty <= 0) {
+          throw new Error(i18next.t('text.invalid_qty_for_item_number', { number: record.__seq__ }))
+        }
+        return {
+          // only existing product combination will have id
+          id: record.id || '',
+          product: { id: record.productId } || {},
+          productDetail: { id: record.productDetailId } || {},
+          qty
+        }
+      })
+      const productCombinationId = this.record?.id
+      if (productCombinationId && patches) {
+        const response = await client.query({
+          query: gql`
+            mutation linkProductCombination(
+              $productCombinationId: String!
+              $patches: [ProductCombinationSettingPatch]!
+            ) {
+              linkProductCombination(productCombinationId: $productCombinationId, patches: $patches) {
+                id
+                productId
+                productSku
+                productName
+                productDescription
+                productType
+                qty
+                productDetailId
+                gtin
+                packingType
+                packingSize
+              }
+            }
+          `,
+          variables: {
+            productCombinationId,
+            patches
+          },
+          context: gqlContext()
+        })
+        if (!response.errors) {
+          this.productCombinationSettingData = await this._fetchProductCombinationLink()
+          await CustomAlert({
+            type: 'success',
+            title: i18next.t('text.success'),
+            text: ''
+          })
+        }
+      } else {
+        CustomAlert({
+          title: i18next.t('text.nothing_changed'),
+          text: i18next.t('text.there_is_nothing_to_save')
+        })
+      }
+    } catch (error) {
+      this._showToast(error)
+    }
+  }
+
+  _showToast({ type, level, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          level,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('product-combination-settings-popup', ProductCombinationSettingsPopup)