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

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

@@ -0,0 +1,372 @@
+import '@things-factory/form-ui'
+import '@operato/data-grist'
+import './product-combination-settings-popup'
+
+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 ProductCombinationsPopup extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      searchFields: Array,
+      productCombinationConfig: Object,
+      productCombinationData: Object,
+      productDetailId: String,
+      selectedProductCombination: Object,
+      productCombination: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          background-color: white;
+        }
+        search-form {
+          overflow: visible;
+        }
+        ox-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+        .grist {
+          background-color: var(--main-section-background-color);
+          display: flex;
+          flex-direction: row;
+          flex: 1;
+          overflow-y: auto;
+        }
+        .grist-column {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: auto;
+        }
+        .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);
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+    this.selectedProductCombination = {}
+    this.productCombinationData = { records: [] }
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('#search-form')
+  }
+
+  get productCombinationGrist() {
+    return this.shadowRoot.querySelector('ox-grist#product_combination_grist')
+  }
+
+  render() {
+    return html`
+      <div class="grist">
+        <div class="grist-column">
+          <div class="header">
+            <legend>${i18next.t('title.combination')}</legend>
+          </div>
+
+          <search-form
+            id="search-form"
+            .fields=${this.searchFields}
+            @submit=${e => this.productCombinationGrist.fetch()}
+          ></search-form>
+
+          <ox-grist
+            id="product_combination_grist"
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .config=${this.productCombinationConfig}
+            .data=${this.productCombinationData}
+            .fetchHandler="${this.fetchHandler.bind(this)}"
+          ></ox-grist>
+
+          <div class="button-container">
+            <mwc-button @click=${this.saveProductCombinations} raised label="${i18next.t('button.save')}"></mwc-button>
+            <mwc-button
+              danger
+              @click=${() => {
+                history.back()
+              }}
+              raised
+              label="${i18next.t('button.cancel')}"
+            ></mwc-button>
+          </div>
+        </div>
+        ${Object.keys(this.selectedProductCombination).length > 0
+          ? html`<div class="grist-column">
+              <div class="header">
+                <legend>${i18next.t('title.combination_sets')}</legend>
+              </div>
+              <product-combination-settings-popup
+                .record="${this.selectedProductCombination}"
+              ></product-combination-settings-popup>
+            </div>`
+          : html``}
+      </div>
+    `
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('productCombination')) {
+      if (Object.keys(this.productCombination).length > 0) {
+        this.selectedProductCombination = this.productCombination
+      } else {
+        this.selectedProductCombination = {}
+      }
+    }
+  }
+
+  async firstUpdated() {
+    this.searchFields = [
+      {
+        label: i18next.t('field.combination'),
+        name: 'name',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.status'),
+        name: 'status',
+        props: {
+          searchOper: 'i_like'
+        }
+      }
+    ]
+
+    this.productCombinationConfig = {
+      pagination: { infinite: true },
+      rows: {
+        appendable: true,
+        handlers: {
+          click: (_columns, _data, _column, record, _rowIndex) => {
+            if (record && !record?.__dirty__) {
+              this.productCombination = record
+            } else {
+              this.productCombination = {}
+            }
+          }
+        }
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'clear',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record) this.deleteProductCombination(record)
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.combination'),
+          sortable: false,
+          record: { editable: true },
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'status',
+          header: i18next.t('field.status'),
+          sortable: true,
+          width: 100
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    try {
+      if (!this.productDetailId) return
+
+      const pagination = { page, limit }
+      const sortings = sorters
+      let filters = await this.searchForm.getQueryFilters()
+      filters = [
+        ...filters,
+        { name: 'productDetail', operator: 'eq', value: this.productDetailId },
+        { name: 'deletedAt', operator: 'is_null', value: '' }
+      ]
+
+      const response = await client.query({
+        query: gql`
+          query productCombinations($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+            productCombinations(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
+                id
+                name
+                status
+                product {
+                  id
+                  sku
+                  name
+                  description
+                }
+                productDetail {
+                  id
+                  name
+                  gtin
+                }
+              }
+              total
+            }
+          }
+        `,
+        variables: { filters, pagination, sortings },
+        context: gqlContext()
+      })
+
+      if (!response.errors) {
+        this.productCombinationData = {
+          total: response.data.productCombinations.total || 0,
+          records: response.data.productCombinations.items || []
+        }
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  async deleteProductCombination(record) {
+    try {
+      const answer = 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 (!answer.value) return
+
+      const response = await client.query({
+        query: gql`
+          mutation deleteProductCombination($id: String!) {
+            deleteProductCombination(id: $id)
+          }
+        `,
+        variables: {
+          id: record.id
+        },
+        context: gqlContext()
+      })
+      if (!response.errors) {
+        this.selectedProductCombination = []
+        this.productCombinationGrist.fetch()
+        await CustomAlert({
+          type: 'success',
+          title: i18next.t('text.success'),
+          text: ''
+        })
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  async saveProductCombinations() {
+    try {
+      let patches = this.productCombinationGrist._data.records.map(record => {
+        return {
+          // only existing product combination will have id
+          id: record.id || '',
+          name: record.name,
+          status: record.status || 'ACTIVE'
+        }
+      })
+      if (patches) {
+        const response = await client.query({
+          query: gql`
+            mutation updateMultipleProductCombination($productDetailId: String!, $patches: [ProductCombinationPatch]!) {
+              updateMultipleProductCombination(productDetailId: $productDetailId, patches: $patches) {
+                id
+                name
+                description
+              }
+            }
+          `,
+          variables: {
+            productDetailId: this.productDetailId,
+            patches
+          },
+          context: gqlContext()
+        })
+        if (!response.errors) {
+          this.selectedProductCombination = []
+          this.productCombinationGrist.fetch()
+          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-combinations-popup', ProductCombinationsPopup)