@things-factory/product-ui 4.3.131 → 4.3.138

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

@@ -298,6 +298,7 @@ class ProductBundleLinkPopup extends localize(i18next)(LitElement) {
         records:
           items.map(itm => {
             return {
+              id: itm.id,
               productSku: itm.product.sku,
               productName: itm.product.name,
               productDescription: itm.product.description,

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

@@ -4,6 +4,7 @@ import '@things-factory/grist-ui'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import isEmpty from 'lodash-es/isEmpty'
 
 import { getCodeByName } from '@things-factory/code-base'
 import { i18next, localize } from '@things-factory/i18n-base'
@@ -107,7 +108,7 @@ class ProductBundleList extends localize(i18next)(PageView) {
       ]
 
       this.productGristConfig = {
-        pagination: { limit: 50, pages: [20, 50, 100, 500, 999] },
+        pagination: { limit: 50, pages: [50, 100, 200, 500] },
         list: { fields: ['sku', 'name', 'description', 'type', 'packingType'] },
         rows: {
           selectable: { multiple: true }
@@ -125,7 +126,7 @@ class ProductBundleList extends localize(i18next)(PageView) {
           {
             type: 'string',
             name: 'sku',
-            header: i18next.t('field.sku'),
+            header: `*${i18next.t('field.sku')}`,
             sortable: false,
             record: { editable: true },
             width: 150
@@ -141,7 +142,7 @@ class ProductBundleList extends localize(i18next)(PageView) {
           {
             type: 'string',
             name: 'name',
-            header: i18next.t('field.name'),
+            header: `*${i18next.t('field.name')}`,
             sortable: false,
             record: { editable: true },
             width: 200
@@ -182,7 +183,7 @@ class ProductBundleList extends localize(i18next)(PageView) {
           {
             type: 'select',
             name: 'packingType',
-            header: i18next.t('field.packing_type'),
+            header: `*${i18next.t('field.packing_type')}`,
             record: {
               editable: true,
               options: ['', ...Object.keys(packingType).map(key => packingType[key].name)]
@@ -274,34 +275,71 @@ class ProductBundleList extends localize(i18next)(PageView) {
   }
 
   async _saveProductBundles(patches) {
-    if (patches && patches.length) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation updateMultipleProductBundle($patches: [ProductBundlePatch!]!) {
-            updateMultipleProductBundle(patches: $patches) {
-              sku
-              refCode
-              name
-              description
-              type
-              packingType
-              status
+    try {
+      if (patches && patches.length) {
+        this._validate()
+        const response = await client.mutate({
+          mutation: gql`
+            mutation updateMultipleProductBundle($patches: [ProductBundlePatch!]!) {
+              updateMultipleProductBundle(patches: $patches) {
+                sku
+                refCode
+                name
+                description
+                type
+                packingType
+                status
+              }
             }
-          }
-        `,
-        variables: { patches },
-        context: gqlContext()
-      })
+          `,
+          variables: { patches },
+          context: gqlContext()
+        })
 
-      if (!response.errors) {
-        this.dataGrist.fetch()
-        this._showToast(i18next.t('text.data_updated_successfully'))
+        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')
+        })
       }
-    } else {
-      CustomAlert({
-        title: i18next.t('text.nothing_changed'),
-        text: i18next.t('text.there_is_nothing_to_save')
-      })
+    } catch (e) {
+      this._showToast(e.message)
+    }
+  }
+
+  _validate() {
+    let errors = []
+
+    let data = this.dataGrist._data.records.map(itm => {
+      itm.error = false
+
+      if (isEmpty(itm.sku) || '') {
+        itm.error = true
+        if (!errors.find(err => err.type == 'sku')) errors.push({ type: 'sku', value: 'SKU is required' })
+      }
+      if (isEmpty(itm.name) || '') {
+        itm.error = true
+        if (!errors.find(err => err.type == 'name')) errors.push({ type: 'name', value: 'name is required' })
+      }
+      if (isEmpty(itm.packingType) || '') {
+        itm.error = true
+        if (!errors.find(err => err.type == 'packingType'))
+          errors.push({ type: 'packingType', value: 'packing type is required' })
+      }
+      return itm
+    })
+
+    if (errors.length > 0) {
+      this._data = {
+        ...this.dataGrist.dirtyData,
+        records: data
+      }
+
+      throw new Error(errors.map(itm => itm.value).join(', '))
     }
   }
 

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

@@ -36,6 +36,18 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
           overflow-y: auto;
           flex: 1;
         }
+        .gtinGrist {
+          display: flex;
+          flex-direction: column;
+          overflow-y: auto;
+          padding-left: 5px;
+          padding-right: 5px;
+        }
+        .grist-container {
+          overflow-y: hidden;
+          display: flex;
+          flex: 1;
+        }
         .button-container {
           padding: 10px 0 12px 0;
           text-align: center;
@@ -71,18 +83,24 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
       _searchFields: Array,
       config: Object,
       _data: Object,
+      _gtin: Object,
       productId: String,
-      _gtins: Array
+      _selectedSeq: Number
     }
   }
 
   constructor() {
     super()
-    this._gtins = []
+    this._selectedSeq = 1
+    this._gtin = {}
   }
 
   get dataGrist() {
-    return this.shadowRoot.querySelector('data-grist')
+    return this.shadowRoot.querySelector('data-grist#productDetail')
+  }
+
+  get gtinGrist() {
+    return this.shadowRoot.querySelector('data-grist#productBarcode')
   }
 
   get buttonSave() {
@@ -91,13 +109,26 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <data-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .data=${this._data}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-        @field-change="${this._fieldChange.bind(this)}"
-      ></data-grist>
+      <div class="grist-container">
+        <data-grist
+          id="productDetail"
+          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+          .config=${this.config}
+          .data=${this._data}
+          .fetchHandler="${this.fetchHandler.bind(this)}"
+          @field-change="${this._fieldChange.bind(this)}"
+        ></data-grist>
+
+        <div class="gtinGrist">
+          <data-grist
+            id="productBarcode"
+            .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+            .config=${this.productBarcodeConfig}
+            .data=${this._gtin}
+            @field-change="${this._gtinFieldChange.bind(this)}"
+          ></data-grist>
+        </div>
+      </div>
 
       <div class="button-container">
         <mwc-button
@@ -131,6 +162,11 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
           return {
             emphasized: record.error || false
           }
+        },
+        handlers: {
+          click: (columns, data, column, record, rowIndex, field) => {
+            if (column.icon !== 'clear') this._selectProductDetail(record)
+          }
         }
       },
       pagination: { infinite: true },
@@ -145,7 +181,7 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
           icon: 'clear',
           handlers: {
             click: (_columns, _data, _column, record, _rowIndex) => {
-              if (record) this._removeGtin(record, _rowIndex)
+              if (record) this._removeProductDetail(record, _rowIndex)
             }
           }
         },
@@ -167,8 +203,8 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
         },
         {
           type: 'string',
-          name: 'gtin',
-          header: i18next.t('field.gtin'),
+          name: 'name',
+          header: i18next.t('field.name'),
           record: { editable: true },
           sortable: true,
           width: 180
@@ -184,7 +220,7 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
         {
           type: 'select',
           name: 'packingType',
-          header: i18next.t('field.packing_type'),
+          header: `*${i18next.t('field.packing_type')}`,
           record: {
             editable: true,
             options: ['', ...Object.keys(packingType).map(key => packingType[key].name)]
@@ -198,20 +234,20 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
             editable: true,
             options: ['', ...Object.keys(uom).map(key => uom[key].name)]
           },
-          header: `${i18next.t('field.uom')}`,
+          header: `*${i18next.t('field.uom')}`,
           width: 80
         },
         {
           type: 'float',
           name: 'uomValue',
           record: { editable: true, options: { min: 0 } },
-          header: `${i18next.t('field.uom_value')}`,
+          header: `*${i18next.t('field.uom_value')}`,
           width: 100
         },
         {
           type: 'select',
           name: 'childProductDetail',
-          header: i18next.t('field.child_gtin'),
+          header: i18next.t('field.child_product_detail'),
           record: { editable: true, rowOptionField: 'rowOptionProductDetail' },
           width: 180
         },
@@ -377,6 +413,44 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
         }
       ]
     }
+
+    this.productBarcodeConfig = {
+      rows: {
+        appendable: true,
+        classifier: record => {
+          return {
+            emphasized: record.error || false
+          }
+        }
+      },
+      pagination: { infinite: true },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'clear',
+          handlers: {
+            click: (_columns, _data, _column, record, _rowIndex) => {
+              if (record) {
+                const newData = _data.records.filter((_, idx) => idx !== _rowIndex)
+                this._gtin = { ...this._gtin, records: newData }
+                let targetProductDetailIndex = this._selectedSeq ? this._selectedSeq : this._data.records.length
+                this.dataGrist._data.records[targetProductDetailIndex - 1].productBarcodes = this._gtin.records
+              }
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'gtin',
+          header: i18next.t('field.gtin'),
+          record: { editable: true },
+          sortable: true,
+          width: 250
+        }
+      ]
+    }
   }
 
   async fetchHandler({ page, limit, sorters = [] }) {
@@ -395,7 +469,6 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
               items {
                 id
                 name
-                gtin
                 refCode
                 product {
                   id
@@ -413,6 +486,10 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
                   name
                   gtin
                 }
+                productBarcodes {
+                  id
+                  gtin
+                }
                 packingSize
                 bundleQty
                 weightUnit
@@ -461,6 +538,12 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
           total: response.data.productDetails.total || 0,
           records: data
         }
+
+        this._gtin = {
+          productDetailId: data[0].id,
+          name: data[0].name,
+          records: data[0].productBarcodes
+        }
       }
     } catch (e) {
       this._showToast(e)
@@ -471,16 +554,18 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
     try {
       this.buttonSave.disabled = true
       this.dataGrist.showSpinner()
-
-      let patches = this.dataGrist._data.records
-
       this._validate()
 
-      patches = this.dataGrist._data.records.map(itm => {
+      let patches = this.dataGrist._data.records.map(itm => {
         return {
           id: itm.id,
           name: itm.name,
-          gtin: itm.gtin,
+          productBarcodes: itm.productBarcodes.map(itm => {
+            return {
+              id: itm?.id,
+              gtin: itm.gtin
+            }
+          }),
           refCode: itm.refCode,
           isDefault: itm.isDefault,
           packingType: itm.packingType,
@@ -566,13 +651,34 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
       errors.push({ type: 'isDefault', value: 'Must have 1 default' })
     }
 
-    let data = this.dataGrist._data.records.map(itm => {
+    let names = this.dataGrist._data.records.map(itm => itm.name)
+
+    if (names.filter((item, index) => names.indexOf(item) !== index && names !== '').length > 0) {
+      throw new Error('Name cannot be duplicated')
+    }
+
+    let totalProductBarcodes = []
+
+    this.dataGrist._data.records.map(itm => {
+      itm.productBarcodes.map(itm2 => totalProductBarcodes.push(itm2.gtin))
+    })
+
+    let duplicateProductBarcode = totalProductBarcodes.find(
+      (item, index) => totalProductBarcodes.indexOf(item) !== index
+    )
+
+    if (duplicateProductBarcode) {
+      throw new Error('Gtin cannot be duplicated')
+    }
+
+    let data = this.dataGrist._data.records.map((itm, index) => {
       itm.error = false
 
-      if (isEmpty(itm.gtin) || '') {
+      if (itm.productBarcodes?.length <= 0 || !itm.productBarcodes) {
         itm.error = true
         if (!errors.find(err => err.type == 'gtin')) errors.push({ type: 'gtin', value: 'GTIN is required' })
       }
+
       if (isEmpty(itm.packingType) || '') {
         itm.error = true
         if (!errors.find(err => err.type == 'packingType'))
@@ -624,31 +730,7 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
           })
         }
         break
-      case 'gtin':
-        if (this.dataGrist._data.records.filter(x => x.gtin == after).length > 1) {
-          this.dataGrist._data.records[row].gtin = before
-
-          updatedRecords = {
-            ...this.dataGrist._data
-          }
-
-          this._showToast({ type: 'error', message: 'Duplicated GTIN' })
-          break
-        }
-
-        updatedRecords = {
-          ...this.dataGrist._data,
-          records: this._updateRowOption(
-            this.dataGrist._data.records.map((record, idx) => {
-              if (!isEmpty(record.childProductDetail) && record.childProductDetail == before) {
-                record.childProductDetail = after
-              }
-              return record
-            })
-          )
-        }
 
-        break
       case 'uomValue':
         if (isNaN(after)) {
           updatedRecords.records[row].uomValue = 1
@@ -668,21 +750,71 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
     }
 
     this._data = { ...updatedRecords }
+    this._gtin = this._gtin = record?.productBarcodes
+      ? {
+          id: record?.id,
+          name: record?.name,
+          records: record.productBarcodes
+        }
+      : {
+          records: []
+        }
+  }
+
+  _gtinFieldChange(e) {
+    var { after, before, column, record, row } = e.detail
+    let targetProductDetailIndex = this._selectedSeq ? this._selectedSeq : this._data.records.length
+    if (this.gtinGrist._data.records.filter(x => x.gtin == after).length > 1) {
+      this.gtinGrist._data.records[row].gtin = before
+
+      this._showToast({ type: 'error', message: 'Duplicated GTIN' })
+      return
+    }
+
+    if (targetProductDetailIndex) {
+      if (!this._selectedSeq && this._data.records[targetProductDetailIndex - 1]?.__dirty__ !== '+') {
+        this._gtin = {
+          records: []
+        }
+
+        this._showToast({ type: 'error', message: 'Please enter product detail first' })
+        return
+      }
+
+      this._gtin.records ? (this._gtin.records[row] = { gtin: after }) : (this._gtin.records = [{ gtin: after }])
+      this._data.records[targetProductDetailIndex - 1].productBarcodes = this._gtin.records
+      this.dataGrist.___data.records[targetProductDetailIndex - 1].productBarcodes = this._gtin.records
+    }
+  }
+
+  _selectProductDetail(record) {
+    this._selectedSeq = record?.__seq__
+
+    this._gtin = record?.productBarcodes
+      ? {
+          id: record?.id,
+          name: record?.name,
+          records: record.productBarcodes
+        }
+      : {
+          records: []
+        }
   }
 
-  _removeGtin(record, index) {
+  _removeProductDetail(record, index) {
+    this._selectedSeq = record?.__seq__
+
     let data = [...this.dataGrist._data.records]
+    if (data.length == 1) {
+      return
+    }
     data.splice(index, 1)
 
     data = data.map(itm => {
-      return { ...itm, childProductDetail: itm.childProductDetail == record.gtin ? '' : itm.childProductDetail }
+      return { ...itm, childProductDetail: itm.childProductDetail == record.name ? '' : itm.childProductDetail }
     })
 
-    if (
-      !data.find(itm => {
-        itm.isDefault
-      })
-    ) {
+    if (!data.find(itm => itm.isDefault)) {
       data[0].isDefault = true
     }
 
@@ -690,6 +822,10 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
       ...this._data,
       records: [...this._updateRowOption(data)]
     }
+
+    this._gtin = {
+      records: []
+    }
   }
 
   _updateRowOption(data) {
@@ -697,7 +833,7 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
       data.map(itm => {
         return {
           ...itm,
-          childProductDetail: itm?.childProductDetail?.gtin || itm?.childProductDetail || '',
+          childProductDetail: itm?.childProductDetail?.name || itm?.childProductDetail || '',
           rowOptionProductDetail: {
             options: [
               {
@@ -705,11 +841,11 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
                 value: ''
               },
               ...data
-                .filter(child => child.gtin != itm.gtin && !isEmpty(child.gtin))
+                .filter(child => child.name != itm.name && !isEmpty(child.name))
                 .map(x => {
                   const rowOption = {
-                    display: x.gtin,
-                    value: x.gtin
+                    display: x.name,
+                    value: x.name
                   }
                   return rowOption
                 })

package/client/pages/product-list.js

@@ -884,7 +884,7 @@ class ProductList extends localize(i18next)(PageView) {
         this.dataGrist.fetch()
       }
     } catch (error) {
-      this.showToast(error)
+      this.showToast(error.message)
     }
   }
 
@@ -903,7 +903,8 @@ class ProductList extends localize(i18next)(PageView) {
           maxQty: patch?.maxQty ? parseInt(patch.maxQty) : undefined,
           packingSize: patch?.packingSize ? parseInt(patch.packingSize) : undefined,
           expirationPeriod: patch?.expirationPeriod ? parseInt(patch.expirationPeriod) : undefined,
-          productRef: patch.productRef?.id ? { id: patch.productRef?.id } : undefined
+          productRef: patch.productRef?.id ? { id: patch.productRef?.id } : undefined,
+          pickingStrategy: patch?.pickingStrategy ? patch.pickingStrategy.toUpperCase() : undefined
         }
       })
 
@@ -926,7 +927,7 @@ class ProductList extends localize(i18next)(PageView) {
         this.dataGrist.fetch()
       }
     } catch (error) {
-      this.showToast(error)
+      this.showToast(error.message)
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/product-ui",
-  "version": "4.3.131",
+  "version": "4.3.138",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@things-factory/form-ui": "^4.3.131",
-    "@things-factory/grist-ui": "^4.3.131",
+    "@things-factory/grist-ui": "^4.3.138",
     "@things-factory/i18n-base": "^4.3.131",
-    "@things-factory/import-ui": "^4.3.131",
+    "@things-factory/import-ui": "^4.3.138",
     "@things-factory/layout-base": "^4.3.131",
-    "@things-factory/product-base": "^4.3.131",
+    "@things-factory/product-base": "^4.3.138",
     "@things-factory/shell": "^4.3.131"
   },
-  "gitHead": "3ae054257c32ac18b023913a313f784459581ea3"
+  "gitHead": "1d4e0a3ff6b8792c843b9735a28a3f5fb946b144"
 }

package/translations/en.json

@@ -20,6 +20,7 @@
   "field.case_weight": "case weight",
   "field.case_width": "case width",
   "field.child_gtin": "child GTIN",
+  "field.child_product_detail": "child product detail",
   "field.child_product_ref": "child product ref",
   "field.child_qty": "child qty",
   "field.cogs_account_code": "COGS account code",

package/translations/ko.json

@@ -76,5 +76,6 @@
   "title.product_bundle_setting": "[ko]product bundle setting",
   "title.product_bundle": "[ko]product bundle",
   "title.product_set": "[ko]product set",
-  "title.product": "[ko]product"
+  "title.product": "[ko]product",
+  "field.child_product_detail": "[ko] child product detail"
 }

package/translations/ms.json

@@ -76,5 +76,6 @@
   "title.product_bundle_setting": "[ms]product bundle setting",
   "title.product_bundle": "[ms]product bundle",
   "title.product_set": "[ms]product set",
-  "title.product": "[ms]product"
+  "title.product": "[ms]product",
+  "field.child_product_detail": "[ms] child product detail"
 }

package/translations/zh.json

@@ -76,5 +76,6 @@
   "title.product_bundle_setting": "[zh]product bundle setting",
   "title.product_bundle": "[zh]product bundle",
   "title.product_set": "[zh]product set",
-  "title.product": "[zh]product"
+  "title.product": "[zh]product",
+  "field.child_product_detail": "[zh] child product detail"
 }