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

package/client/pages/product/product-master.js

@@ -0,0 +1,888 @@
+import '@material/mwc-icon'
+import '@things-factory/form-ui'
+import '@things-factory/import-ui'
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/data-grist/ox-sorters-control.js'
+import '@operato/data-grist/ox-record-creator.js'
+import '../product-details-popup'
+
+import { css, html } from 'lit'
+
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { CommonButtonStyles, CommonGristStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { getCodeByName } from '@things-factory/code-base'
+import { CustomAlert, PageView } from '@things-factory/shell'
+
+import { createProduct, deleteProducts, fetchProducts, saveProducts } from './product-api'
+
+class ProductMaster extends localize(i18next)(PageView) {
+  static get styles() {
+    return [
+      CommonGristStyles,
+      css`
+        :host {
+          display: flex;
+
+          width: 100%;
+
+          --grid-record-emphasized-background-color: red;
+          --grid-record-emphasized-color: yellow;
+        }
+      `
+    ]
+  }
+
+  constructor() {
+    super()
+    this.mode = isMobileDevice() ? 'LIST' : 'GRID'
+  }
+
+  static get properties() {
+    return {
+      config: Object,
+      data: Object,
+      mode: String,
+      importHandler: Object
+    }
+  }
+
+  render() {
+    let mode = this.mode
+
+    return html`
+      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+
+          <ox-record-creator id="add" .callback=${this.productCreationCallback.bind(this)}>
+            <button><mwc-icon>add</mwc-icon></button>
+          </ox-record-creator>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.product'),
+      help: 'operato-fnb/products',
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this._saveProducts.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: i18next.t('button.delete'),
+          action: this._deleteProducts.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ],
+      exportable: {
+        name: i18next.t('title.product'),
+        data: this._exportableData.bind(this)
+      },
+      importable: {
+        handler: this._importableData.bind(this)
+      },
+      help: 'master/product-master'
+    }
+  }
+
+  async pageInitialized() {
+    const [productType, packingType, uom, weightUnit, lengthUnit] = await Promise.all([
+      getCodeByName('PRODUCT_TYPES'),
+      getCodeByName('PACKING_TYPES'),
+      getCodeByName('UOM'),
+      getCodeByName('WEIGHT_UNITS'),
+      getCodeByName('LENGTH_UNITS')
+    ])
+
+    this.config = {
+      list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['sku', 'type', 'packingType', 'primaryUnit', 'primaryValue']
+      },
+      rows: {
+        selectable: {
+          multiple: true
+        },
+        handlers: {
+          click: 'select-row-toggle'
+        },
+        classifier: function (record, rowIndex) {}
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'dirty' },
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'id',
+          header: i18next.t('field.id'),
+          hidden: true,
+          record: { editable: false },
+          imex: { header: i18next.t('field.id'), key: 'id', width: 100, type: 'string' },
+          width: 70
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'drive_file_rename_outline',
+          handlers: {
+            click: 'record-view'
+          }
+        },
+        {
+          type: 'string',
+          name: 'sku',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.product_code'), key: 'sku', width: 30, type: 'string' },
+          header: i18next.t('field.product_code'),
+          label: true,
+          filter: 'search',
+          sortable: true,
+          width: 100
+        },
+        {
+          type: 'string',
+          name: 'name',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.product_name'), key: 'name', width: 30, type: 'string' },
+          header: i18next.t('field.product_name'),
+          filter: 'search',
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'string',
+          name: 'description',
+          record: { editable: true },
+          imex: { header: i18next.t('field.description'), key: 'description', width: 50, type: 'string' },
+          header: i18next.t('field.description'),
+          width: 250
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          label: true,
+          record: {
+            editable: true,
+            mandatory: true,
+            options: ['', ...Object.keys(productType).map(key => productType[key].description)]
+          },
+          filter: true,
+          imex: {
+            header: i18next.t('field.type'),
+            key: 'type',
+            width: 50,
+            type: 'array',
+            arrData: productType.map(productType => {
+              return {
+                name: productType.name,
+                id: productType.name
+              }
+            })
+          },
+          sortable: true,
+          width: 100
+        },
+        {
+          type: 'object',
+          name: 'routing',
+          header: i18next.t('field.routing'),
+          record: { editable: true, options: { queryName: 'routings' }, mandatory: true },
+          width: 180
+        },
+        {
+          type: 'string',
+          name: 'auxUnit1',
+          record: { editable: true, align: 'right', format: '##0.###' },
+          imex: { header: i18next.t('field.primary_value'), key: 'auxUnit1', width: 20, type: 'string' },
+          header: i18next.t('field.primary_value'),
+          width: 100
+        },
+        {
+          type: 'float',
+          name: 'uomValue',
+          record: { editable: true, mandatory: true, align: 'right', format: '##0.###' },
+          imex: { header: i18next.t('field.uom_value'), key: 'uomValue', width: 15, type: 'float' },
+          header: i18next.t('field.uom_value'),
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'uom',
+          record: {
+            editable: true,
+            mandatory: true,
+            options: ['', ...Object.keys(uom).map(key => uom[key].name)]
+          },
+          imex: {
+            header: i18next.t('field.uom'),
+            key: 'uom',
+            width: 10,
+            type: 'array',
+            arrData: uom.map(uom => {
+              return {
+                name: uom.name,
+                id: uom.name
+              }
+            })
+          },
+          header: i18next.t('field.uom'),
+          width: 80
+        },
+        {
+          type: 'select',
+          name: 'packingType',
+          header: i18next.t('field.packing_type'),
+          label: true,
+          record: {
+            editable: true,
+            mandatory: true,
+            options: ['', ...Object.keys(packingType).map(key => packingType[key].name)]
+          },
+          imex: {
+            header: i18next.t('field.packing_type'),
+            key: 'packingType',
+            width: 50,
+            type: 'array',
+            arrData: packingType.map(packingType => {
+              return {
+                name: packingType.name,
+                id: packingType.name
+              }
+            })
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'brand',
+          record: { editable: true },
+          imex: { header: i18next.t('field.brand'), key: 'brand', width: 40, type: 'string' },
+          header: i18next.t('field.brand'),
+          width: 150,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'subBrand',
+          record: { editable: true },
+          imex: { header: i18next.t('field.sub_brand'), key: 'subBrand', width: 30, type: 'string' },
+          header: i18next.t('field.sub_brand'),
+          width: 200,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'inventoryAccountCode',
+          header: i18next.t('field.inventory_account_code'),
+          record: { editable: true },
+          imex: {
+            header: i18next.t('field.inventory_account_code'),
+            key: 'inventoryAccountCode',
+            width: 30,
+            type: 'string'
+          },
+          width: 200,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'cogsAccountCode',
+          header: i18next.t('field.cogs_account_code'),
+          record: { editable: true },
+          imex: { header: i18next.t('field.cogs_account_code'), key: 'cogsAccountCode', width: 30, type: 'string' },
+          width: 200,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'bufferQty',
+          record: { editable: true, align: 'left', options: { min: 0 } },
+          imex: { header: i18next.t('field.buffer_qty'), key: 'bufferQty', width: 20, type: 'float' },
+          header: i18next.t('field.buffer_qty'),
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'minQty',
+          record: { editable: true, align: 'left', options: { min: 0 } },
+          imex: { header: i18next.t('field.min_qty'), key: 'minQty', width: 20, type: 'float' },
+          header: i18next.t('field.min_qty'),
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'maxQty',
+          record: { editable: true, align: 'left', options: { min: 0 } },
+          imex: { header: i18next.t('field.max_qty'), key: 'maxQty', width: 20, type: 'float' },
+          header: i18next.t('field.max_qty'),
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'integer',
+          name: 'expirationPeriod',
+          record: { editable: true },
+          imex: { header: i18next.t('field.expiration_period'), key: 'expirationPeriod', width: 30, type: 'integer' },
+          header: i18next.t('field.expiration_period'),
+          width: 140
+        },
+        {
+          type: 'boolean',
+          name: 'isRequiredCheckExpiry',
+          header: i18next.t('field.required_checking_expiry'),
+          record: { editable: true, align: 'center' },
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'object',
+          name: 'productRef',
+          record: {
+            editable: true,
+            options: {
+              queryName: 'myBizplaceProducts',
+              nameField: 'name',
+              descriptionField: 'description',
+              select: [
+                { name: 'id', hidden: true },
+                { name: 'sku', header: i18next.t('field.sku') },
+                { name: 'name', header: i18next.t('field.name') },
+                { name: 'description', header: i18next.t('field.description') },
+                { name: 'packingType', header: i18next.t('field.packing_type') },
+                { name: 'uom', header: i18next.t('field.uom') },
+                { name: 'uomValue', header: i18next.t('field.uom_value') }
+              ],
+              list: { fields: ['sku', 'name', 'description', 'packingType'] }
+            }
+          },
+          imex: {
+            header: i18next.t('field.product_ref'),
+            key: 'productRef.name',
+            width: 30,
+            type: 'array',
+            arrData: []
+          },
+          header: i18next.t('field.product_ref'),
+          width: 230,
+          hidden: true
+        },
+        {
+          type: 'object',
+          name: 'parentProductRef',
+          record: {
+            editable: true,
+            options: {
+              queryName: 'myBizplaceProducts',
+              nameField: 'name',
+              descriptionField: 'description',
+              select: [
+                { name: 'id', hidden: true },
+                { name: 'sku', header: i18next.t('field.sku') },
+                { name: 'name', header: i18next.t('field.name') },
+                { name: 'description', header: i18next.t('field.description') },
+                { name: 'packingType', header: i18next.t('field.packing_type') },
+                { name: 'primaryUnit', header: i18next.t('field.uom') },
+                { name: 'primaryValue', header: i18next.t('field.uom_value') }
+              ],
+              list: { fields: ['sku', 'name', 'description', 'packingType'] }
+            }
+          },
+          header: i18next.t('field.parent_product_ref'),
+          width: 230,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'bundleQty',
+          record: { editable: true },
+          header: i18next.t('field.bundle_qty'),
+          width: 80,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'gtin',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.gtin'), key: 'gtin', width: 20, type: 'string' },
+          header: i18next.t('field.gtin'),
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'refCode',
+          record: { editable: true },
+          imex: { header: i18next.t('field.ref_code'), key: 'refCode', width: 20, type: 'string' },
+          header: i18next.t('field.ref_code'),
+          width: 120,
+          hidden: true
+        },
+        {
+          type: 'select',
+          name: 'weightUnit',
+          record: {
+            editable: true,
+            mandatory: true,
+            options: ['', ...Object.keys(weightUnit).map(key => weightUnit[key].name)]
+          },
+          imex: {
+            header: i18next.t('field.weight_unit'),
+            key: 'weightUnit',
+            width: 20,
+            type: 'array',
+            arrData: weightUnit.map(weightUnit => {
+              return {
+                name: weightUnit.name,
+                id: weightUnit.name
+              }
+            })
+          },
+          header: i18next.t('field.weight_unit'),
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'grossWeight',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.gross_weight'), key: 'grossWeight', width: 20, type: 'float' },
+          header: i18next.t('field.gross_weight'),
+          width: 160,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'nettWeight',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.nett_weight'), key: 'nettWeight', width: 20, type: 'float' },
+          header: i18next.t('field.nett_weight'),
+          width: 160,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'density',
+          record: { editable: true },
+          imex: { header: i18next.t('field.density'), key: 'density', width: 10, type: 'float' },
+          header: i18next.t('field.density'),
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'lengthUnit',
+          record: {
+            editable: true,
+            mandatory: true,
+            options: ['', ...Object.keys(lengthUnit).map(key => lengthUnit[key].name)]
+          },
+          imex: {
+            header: i18next.t('field.length_unit'),
+            key: 'lengthUnit',
+            width: 20,
+            type: 'array',
+            arrData: lengthUnit.map(lengthUnit => {
+              return {
+                name: lengthUnit.name,
+                id: lengthUnit.name
+              }
+            })
+          },
+          header: i18next.t('field.length_unit'),
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'width',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.width'), key: 'width', width: 15, type: 'float' },
+          header: i18next.t('field.width'),
+          width: 80,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'depth',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.depth'), key: 'depth', width: 15, type: 'float' },
+          header: i18next.t('field.depth'),
+          width: 80,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'height',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.height'), key: 'height', width: 15, type: 'float' },
+          header: i18next.t('field.height'),
+          width: 80,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'volume',
+          record: { editable: true, mandatory: true },
+          imex: { header: i18next.t('field.volume'), key: 'volume', width: 15, type: 'float' },
+          header: i18next.t('field.volume'),
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'float',
+          name: 'volumeSize',
+          record: { editable: true },
+          imex: { header: i18next.t('field.volume_size'), key: 'volumeSize', width: 20, type: 'float' },
+          header: i18next.t('field.volume_size'),
+          width: 160,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxValue1',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_value')} 1`, key: 'auxValue1', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_value')} 1`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxUnit2',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_unit')} 2`, key: 'auxUnit2', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_unit')} 2`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxValue2',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_value')} 2`, key: 'auxValue2', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_value')} 2`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxUnit3',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_unit')} 3`, key: 'auxUnit3', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_unit')} 3`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxValue3',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_value')} 3`, key: 'auxValue3', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_value')} 3`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxUnit4',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_unit')} 4`, key: 'auxUnit4', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_unit')} 4`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxValue4',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_value')} 4`, key: 'auxValue4', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_value')} 4`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxUnit5',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_unit')} 5`, key: 'auxUnit5', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_unit')} 5`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'auxValue5',
+          record: { editable: true },
+          imex: { header: `${i18next.t('field.aux_value')} 5`, key: 'auxValue5', width: 20, type: 'string' },
+          header: `${i18next.t('field.aux_value')} 5`,
+          width: 100,
+          hidden: true
+        },
+        {
+          type: 'object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          width: 80
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          header: i18next.t('field.thumbnail'),
+          record: { editable: true },
+          width: 70
+        }
+      ],
+      sorters: [
+        {
+          name: 'name',
+          desc: false
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.grist.fetch()
+    }
+  }
+
+  get grist() {
+    return this.renderRoot.querySelector('ox-grist')
+  }
+
+  _importableData(records) {
+    setTimeout(() => {
+      openPopup(
+        html`
+          <import-pop-up
+            .records=${records}
+            .config=${{
+              rows: this.config.rows,
+              columns: [...this.config.columns.filter(column => !!column.imex)]
+            }}
+            .importHandler=${this.importHandler.bind(this)}
+          ></import-pop-up>
+        `,
+        {
+          backdrop: true,
+          size: 'large',
+          title: i18next.t('title.import')
+        }
+      )
+    }, 500)
+  }
+
+  async fetchHandler() {
+    const response = await fetchProducts(...arguments)
+
+    return {
+      total: response.total || 0,
+      records: response.records || []
+    }
+  }
+
+  async importHandler(patches) {
+    const response = await saveProducts(patches)
+
+    if (!response.errors) {
+      history.back()
+      this.grist.fetch()
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.data_imported_successfully')
+          }
+        })
+      )
+    }
+  }
+
+  async productCreationCallback(product) {
+    try {
+      const response = await createProduct(product)
+
+      if (!response.errors) {
+        this.grist.fetch()
+        document.dispatchEvent(
+          new CustomEvent('notify', {
+            detail: {
+              message: i18next.t('text.data_created_successfully')
+            }
+          })
+        )
+      }
+
+      return true
+    } catch (ex) {
+      console.error(ex)
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            type: 'error',
+            message: i18next.t('text.error')
+          }
+        })
+      )
+      return false
+    }
+  }
+
+  async _saveProducts() {
+    let patches = this.grist.exportPatchList({ flagName: 'cuFlag' })
+    if (patches && patches.length) {
+      const response = await saveProducts(patches)
+
+      if (!response.errors) {
+        this.grist.fetch()
+        document.dispatchEvent(
+          new CustomEvent('notify', {
+            detail: {
+              message: i18next.t('text.data_updated_successfully')
+            }
+          })
+        )
+      }
+    }
+  }
+
+  async _deleteProducts() {
+    CustomAlert({
+      title: i18next.t('text.are_you_sure'),
+      text: i18next.t('text.you_wont_be_able_to_revert_this'),
+      type: 'warning',
+      confirmButton: { text: i18next.t('button.delete'), color: '#22a6a7' },
+      cancelButton: { text: 'cancel', color: '#cfcfcf' },
+      callback: async result => {
+        if (result.value) {
+          const ids = this.grist.selected.map(record => record.id)
+          if (ids && ids.length > 0) {
+            const response = await deleteProducts(ids)
+
+            if (!response.errors) {
+              this.grist.fetch()
+              document.dispatchEvent(
+                new CustomEvent('notify', {
+                  detail: {
+                    message: i18next.t('text.data_deleted_successfully')
+                  }
+                })
+              )
+            }
+          }
+        }
+      }
+    })
+  }
+
+  get _columns() {
+    return this.config.columns
+  }
+
+  _exportableData() {
+    let records = []
+    if (this.grist.selected && this.grist.selected.length > 0) {
+      records = this.grist.selected
+    } else {
+      records = this.grist.data.records
+    }
+
+    var headerSetting = this.grist.compiledConfig.columns
+      .filter(column => column.type !== 'gutter' && !!column.imex)
+      .map(column => {
+        return column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this._columns
+          .filter(column => column.type !== 'gutter' && !!column.imex)
+          .reduce((record, column) => {
+            record[column.imex.key] = column.imex.key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+
+  _validate(data) {
+    let errors = []
+    data = data.map(itm => {
+      if (_.isEmpty(itm.sku) || '') {
+        if (!errors.find(err => err.type == 'sku')) errors.push({ type: 'sku', value: 'Product SKU is required' })
+      }
+      if (_.isEmpty(itm.name) || '') {
+        if (!errors.find(err => err.type == 'name')) errors.push({ type: 'name', value: 'Product name is required' })
+      }
+      if (_.isEmpty(itm.type) || '') {
+        if (!errors.find(err => err.type == 'type')) errors.push({ type: 'type', value: 'Product type is required' })
+      }
+      if (_.isEmpty(itm.packingType) || '') {
+        if (!errors.find(err => err.type == 'packingType'))
+          errors.push({ type: 'packingType', value: 'Packing type is required' })
+      }
+      if (_.isEmpty(itm.uom) || '') {
+        if (!errors.find(err => err.type == 'uom')) errors.push({ type: 'uom', value: 'UOM is required' })
+      }
+      if (!_.isNumber(itm.uomValue) || _.isNaN(itm.uomValue) || '' || itm?.uomValue < 0) {
+        if (!errors.find(err => err.type == 'uomValue'))
+          errors.push({ type: 'uomValue', value: 'UOM Value is required' })
+      }
+      return itm
+    })
+
+    if (errors.length > 0) {
+      throw new Error(errors.map(itm => itm.value).join(', '))
+    }
+  }
+}
+
+window.customElements.define('product-master', ProductMaster)