@things-factory/operato-wms 3.7.2 → 3.7.7

package/client/pages/order/release-order/release-order-detail.js

@@ -49,7 +49,10 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
       _mimetype: String,
       _doPath: String,
       _allowROAddProductSetting: Boolean,
-      _bizplaceName: String
+      _releaseOrder: Object,
+      _shippingOrder: Object,
+      _containerArrivalDate: Date,
+      _containerLeavingDate: Date
     }
   }
 
@@ -166,20 +169,40 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
                 type="checkbox"
                 name="ownTransport"
                 ?checked="${this._ownTransport}"
-                ?hidden="${this._exportOption}"
-                disabled
+                ?disabled="${this._disableTransport || !this?._editable}"
+                @change="${e => {
+                  this._ownTransport = e.currentTarget.checked
+                  if (this._ownTransport) {
+                    this._warehouseTransportInput.checked = false
+                    this._warehouseTransport = false
+                  } else {
+                    this._warehouseTransportInput.checked = true
+                    this._warehouseTransport = true
+                  }
+                  this._validateTransport()
+                }}"
               />
-              <label ?hidden="${this._exportOption}">${i18next.t('label.own_transport')}</label>
+              <label for="ownTransport">${i18next.t('label.own_transport')}</label>
 
               <input
                 id="warehouseTransport"
                 type="checkbox"
                 name="warehouseTransport"
                 ?checked="${!this._ownTransport}"
-                ?hidden="${this._exportOption}"
-                disabled
+                ?disabled="${this._disableTransport || !this?._editable}"
+                @change="${e => {
+                  this._warehouseTransport = e.currentTarget.checked
+                  if (this._warehouseTransport) {
+                    this._ownTransportInput.checked = false
+                    this._ownTransport = false
+                  } else {
+                    this._ownTransportInput.checked = true
+                    this._ownTransport = true
+                  }
+                  this._validateTransport()
+                }}"
               />
-              <label ?hidden="${this._exportOption}">${i18next.t('label.warehouse_transport')}</label>
+              <label for="warehouseTransport">${i18next.t('label.warehouse_transport')}</label>
 
               <input
                 id="courierOption"
@@ -199,8 +222,17 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
               />
               <label>${i18next.t('label.packing')}</label>
 
-              <input id="exportOption" type="checkbox" name="exportOption" ?checked="${this._exportOption}" disabled />
-              <label>${i18next.t('label.export')}</label>
+              <input
+                id="exportOption"
+                type="checkbox"
+                name="exportOption"
+                ?checked="${this._exportOption}"
+                ?disabled="${!this?._editable}"
+                @change="${e => {
+                  this._exportOption = e.currentTarget.checked
+                }}"
+              />
+              <label for="exportOption">${i18next.t('label.export')}</label>
 
               ${this._crossDocking
                 ? html`
@@ -217,27 +249,36 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
             </div>
 
             <label>${i18next.t('label.company')}</label>
-            <input name="bizplaceName" value="${this._bizplaceName}" readonly />
+            <input name="bizplaceName" disabled />
 
             <label>${i18next.t('label.ref_no')}</label>
-            <input name="refNo" readonly />
+            <input name="refNo" ?readonly="${!this?._editable}" />
 
             <label>${i18next.t('label.ref_no_2')}</label>
-            <input name="refNo2" readonly />
+            <input name="refNo2" ?readonly="${!this?._editable}" />
 
             <label>${i18next.t('label.ref_no_3')}</label>
-            <input name="refNo3" readonly />
+            <input name="refNo3" ?readonly="${!this?._editable}" />
 
             <label>${i18next.t('label.release_date')}</label>
-            <input name="releaseDate" type="date" readonly />
+            <input name="releaseDate" type="date" ?readonly="${!this?._editable}" required />
 
             <label ?hidden="${!this._ownTransport}">${i18next.t('label.co_no')}</label>
-            <input name="collectionOrderNo" ?hidden="${!this._ownTransport}" readonly />
+            <input name="collectionOrderNo" ?hidden="${!this._ownTransport}" ?readonly="${!this?._editable}" />
+
+            <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.attention_to')}</label>
+            <input name="attentionTo" ?hidden="${this.roType === 'b2b'}" readonly />
+
+            <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.phone_no')}</label>
+            <input name="phone1" ?hidden="${this.roType === 'b2b'}" readonly />
+
+            <label ?hidden="${this.roType === 'b2b'}">${i18next.t('label.delivery_address')}</label>
+            <textarea name="deliveryAddress1" ?hidden="${this.roType === 'b2b'}" rows="5" readonly></textarea>
 
             ${this._crossDocking
               ? html`
                   <label for="ganNo">${i18next.t('label.arrival_notice')}</label>
-                  <input readonly name="ganNo" value="${this._ganNo}" />
+                  <input disabled name="ganNo" .value="${this._ganNo}" />
                 `
               : ''}
             ${this._attachments?.length > 0
@@ -263,24 +304,46 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
         <barcode-tag bcid="qrcode" .value=${this._releaseOrderNo}></barcode-tag>
       </div>
 
-      <div class="so-form-container" ?hidden="${!this._exportOption || (this._exportOption && !this._ownTransport)}">
-        <form name="shippingOrder" class="multi-column-form">
-          <fieldset>
-            <legend>${i18next.t('title.export_order')}</legend>
-            <label>${i18next.t('label.container_no')}</label>
-            <input name="containerNo" readonly />
-
-            <label>${i18next.t('label.container_arrival_date')}</label>
-            <input name="containerArrivalDate" type="date" readonly />
-
-            <label>${i18next.t('label.container_leaving_date')}</label>
-            <input name="containerLeavingDate" type="date" readonly />
-
-            <label>${i18next.t('label.ship_name')}</label>
-            <input name="shipName" readonly />
-          </fieldset>
-        </form>
-      </div>
+      ${this._exportOption
+        ? html`
+            <div class="so-form-container">
+              <form name="shippingOrder" class="multi-column-form">
+                <fieldset>
+                  <legend>${i18next.t('title.export_order')}</legend>
+                  <label>${i18next.t('label.container_no')}</label>
+                  <input name="containerNo" ?readonly="${!this?._editable}" required />
+
+                  <label>${i18next.t('label.container_arrival_date')}</label>
+                  <input
+                    name="containerArrivalDate"
+                    type="date"
+                    ?readonly="${!this?._editable}"
+                    .value="${this._containerArrivalDate}"
+                    @change="${e => {
+                      this._containerLeavingDateInput.setAttribute('min', e.currentTarget.value)
+                      required
+                    }}"
+                  />
+
+                  <label>${i18next.t('label.container_leaving_date')}</label>
+                  <input
+                    name="containerLeavingDate"
+                    type="date"
+                    ?readonly="${!this?._editable}"
+                    .value="${this._containerLeavingDate}"
+                    @change="${e => {
+                      this._containerArrivalDateInput.setAttribute('max', e.currentTarget.value)
+                      required
+                    }}"
+                  />
+
+                  <label>${i18next.t('label.ship_name')}</label>
+                  <input name="shipName" ?readonly="${!this?._editable}" required />
+                </fieldset>
+              </form>
+            </div>
+          `
+        : ''}
 
       <div class="container">
         <div class="grist">
@@ -309,6 +372,9 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
   constructor() {
     super()
     this._clearPage()
+    this._editable = false
+    this._disableTransport = false
+    this._shippingOrder = null
   }
 
   get context() {
@@ -328,6 +394,13 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
         ...CommonButtonStyles.back
       }
     ]
+    if (this._editable) {
+      actions.push({
+        title: i18next.t('button.update_order_details'),
+        action: this._updateReleaseGoodDetails.bind(this),
+        ...CommonButtonStyles.add
+      })
+    }
 
     if (this._status === ORDER_STATUS.PENDING.value) {
       actions.push(
@@ -386,6 +459,18 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     return this.shadowRoot.querySelector('input[name=ownTransport]')
   }
 
+  get _warehouseTransportInput() {
+    return this.shadowRoot.querySelector('input[name=warehouseTransport]')
+  }
+
+  get _containerArrivalDateInput() {
+    return this.shadowRoot.querySelector('input[name=containerArrivalDate]')
+  }
+
+  get _containerLeavingDateInput() {
+    return this.shadowRoot.querySelector('input[name=containerLeavingDate]')
+  }
+
   get inventoryGrist() {
     return this.shadowRoot.querySelector('data-grist#inventory-grist')
   }
@@ -409,7 +494,11 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
 
   async pageInitialized() {
     let [allowROAddProductSetting, userRoles] = [fetchSettingRule('allow-ro-add-product'), this.fetchUserRoleHandler()]
+    let [enableTransportationServiceSetting] = await Promise.all([fetchSettingRule('enable-transportation-service')])
+
+    this._enableTransportationServiceSetting = enableTransportationServiceSetting
 
+    this._validateTransport()
     this._clearPage()
 
     this.inventoryGristConfig = {
@@ -454,14 +543,12 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
           type: 'integer',
           name: 'releaseQty',
           header: i18next.t('field.release_qty'),
-          record: { options: { min: 0 } },
           width: 130
         },
         {
           type: 'string',
           name: 'releaseUomValueWithUom',
           header: i18next.t('field.release_uom_value'),
-          record: { options: { min: 0 } },
           width: 150
         },
         {
@@ -595,6 +682,9 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
             name
             truckNo
             type
+            attentionTo
+            phone1
+            deliveryAddress1
             bizplace {
               id
               name
@@ -641,6 +731,8 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
               packingType
               packingSize
               qty
+              lockedQty
+              lockedUomValue
               uomValue
               releaseQty
               releaseUomValue
@@ -652,6 +744,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
               status
             }
             shippingOrderInfo {
+              id
               containerNo
               containerLeavingDate
               containerArrivalDate
@@ -689,6 +782,7 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
     if (!response.errors) {
       const releaseOrder = response.data.releaseGoodDetail
       const shippingOrder = releaseOrder.shippingOrderInfo
+
       this.roType = releaseOrder.type
       const orderInventories = releaseOrder.inventoryInfos.map(inventoryInfo => {
         let roundedUomValue =
@@ -711,46 +805,63 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
             releaseUomValue: inventoryInfo.releaseUomValue,
             releaseUomValueWithUom: inventoryInfo.releaseUomValue + ' ' + inventoryInfo.uom
           },
-          qty: inventoryInfo.qty + inventoryInfo.releaseQty,
-          remainQty: inventoryInfo.qty,
-          uomValue: inventoryInfo.uomValue + inventoryInfo.releaseUomValue,
+          qty: inventoryInfo.qty,
+          remainQty: inventoryInfo.qty - inventoryInfo.lockedQty,
+          uomValue: inventoryInfo.uomValue, //total
           releaseUomValue: inventoryInfo.releaseUomValue,
-          remainUomValue: inventoryInfo.uomValue,
-          availableUomValueWithUom: `${inventoryInfo.uomValue + inventoryInfo.releaseUomValue} ${inventoryInfo.uom}`,
+          remainUomValue: inventoryInfo.uomValue - inventoryInfo.lockedUomValue,
+          availableUomValueWithUom: `${inventoryInfo.uomValue /*+ inventoryInfo.releaseUomValue*/} ${
+            inventoryInfo.uom
+          }`, //total
           releaseUomValueWithUom: inventoryInfo.releaseUomValue + ' ' + inventoryInfo.uom,
-          remainUomValueWithUom: `${inventoryInfo.uomValue} ${inventoryInfo.uom}`,
+          remainUomValueWithUom: `${inventoryInfo.uomValue - inventoryInfo.releaseUomValue} ${inventoryInfo.uom}`,
           status: inventoryInfo.status,
           existing: true,
-          roundedUomValue: `${roundedUomValue} ${inventoryInfo.uom}`
+          roundedUomValue: `${roundedUomValue} ${inventoryInfo.uom}`,
+          addableQty: inventoryInfo.qty - inventoryInfo.lockedQty,
+          addableUomValue: inventoryInfo.uomValue - inventoryInfo.lockedUomValue
         }
       })
 
       const orderVass = releaseOrder.orderVass
 
+      this._releaseOrderId = releaseOrder.id
       this.partnerBizplaceId = releaseOrder.bizplace.id
-      this._exportOption = response.data.releaseGoodDetail.exportOption
-      this._bizplaceName = response.data.releaseGoodDetail.bizplace.name
+      this._exportOption = releaseOrder.exportOption
       if (this._exportOption) {
         this._ownTransport = true
       } else if (!this._exportOption) {
-        this._ownTransport = response.data.releaseGoodDetail.ownTransport
+        this._ownTransport = releaseOrder.ownTransport
       }
 
-      this._courierOption = response.data.releaseGoodDetail.courierOption
-      this._packingOption = response.data.releaseGoodDetail.packingOption
-      this._crossDocking = response.data.releaseGoodDetail?.crossDocking
-      this._ganNo = response.data.releaseGoodDetail?.arrivalNotice?.name
+      this._courierOption = releaseOrder.courierOption
+      this._packingOption = releaseOrder.packingOption
+      this._crossDocking = releaseOrder?.crossDocking
+
+      await this.updateComplete
 
+      this._ganNo = releaseOrder?.arrivalNotice?.name
       this._status = releaseOrder.status
 
-      this._fillupRGForm(response.data.releaseGoodDetail)
+      this._fillupRGForm({
+        ...releaseOrder,
+        bizplaceName: releaseOrder.bizplace?.name
+      })
+
+      if (shippingOrder) {
+        this._shippingOrder = shippingOrder
+        this._fillupSOForm(shippingOrder)
+      }
 
       if (releaseOrder && releaseOrder?.attachment) {
         this._attachments = releaseOrder && releaseOrder.attachment
       }
 
-      if (this._exportOption) this._fillupSOForm(shippingOrder)
-
+      if (releaseOrder.status !== 'DONE') {
+        this._editable = true
+      } else {
+        this._editable = false
+      }
       this.inventoryData = { records: orderInventories }
       this.vasData = {
         records: orderVass
@@ -778,35 +889,37 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
   }
 
   _fillupForm(form, data) {
-    form.reset()
-    for (let key in data) {
-      Array.from(form.querySelectorAll('input')).forEach(field => {
-        if (field.name === key && field.type === 'checkbox') {
-          field.checked = data[key]
-        } else if (field.name === key && field.type === 'datetime-local') {
-          const datetime = Number(data[key])
-          const timezoneOffset = new Date(datetime).getTimezoneOffset() * 60000
-          field.value = new Date(datetime - timezoneOffset).toISOString().slice(0, -1)
-        } else if (field.name === key) {
-          if (data[key] instanceof Object) {
-            const objectData = data[key]
-            field.value = `${objectData.name} ${objectData.description ? `(${objectData.description})` : ''}`
-          } else {
-            field.value = data[key]
+    if (form) {
+      form.reset()
+      for (let key in data) {
+        Array.from(form.querySelectorAll('input, textarea')).forEach(field => {
+          if (field.name === key && field.type === 'checkbox') {
+            field.checked = data[key]
+          } else if (field.name === key && field.type === 'datetime-local') {
+            const datetime = Number(data[key])
+            const timezoneOffset = new Date(datetime).getTimezoneOffset() * 60000
+            field.value = new Date(datetime - timezoneOffset).toISOString().slice(0, -1)
+          } else if (field.name === key) {
+            if (data[key] instanceof Object) {
+              const objectData = data[key]
+              field.value = `${objectData.name} ${objectData.description ? `(${objectData.description})` : ''}`
+            } else {
+              field.value = data[key]
+            }
           }
-        }
-      })
+        })
+      }
     }
   }
 
   _clearPage() {
     this._status = null
+    this.roType = 'b2b'
     this._exportOption = false
     this._courierOption = false
     this._packingOption = false
     this._ownTransport = true
     this._downloadable = true
-    this._bizplaceName = ''
     this._attachments = []
     this.inventoryData = { records: [] }
     this.vasData = { records: [] }
@@ -1005,6 +1118,114 @@ class ReleaseOrderDetail extends connect(store)(localize(i18next)(PageView)) {
 
     return []
   }
+
+  async _updateReleaseGoodDetails() {
+    try {
+      this._validateTransport()
+      this._validateForm()
+
+      const result = await CustomAlert({
+        title: i18next.t('title.are_you_sure'),
+        text: i18next.t('text.update_release_order_details'),
+        confirmButton: { text: i18next.t('button.submit') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+
+      if (!result.value) return
+
+      let releaseOrder = this._getFormInfo()
+      delete releaseOrder.warehouseTransport
+      delete releaseOrder.bizplaceId
+      delete releaseOrder.bizplaceName
+      delete releaseOrder.status
+      delete releaseOrder.ganNo
+
+      let shippingOrder = this._exportOption ? this._serializeForm(this.shippingOrderForm) : null
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation updateReleaseGoodDetails($releaseOrder: ReleaseGoodPatch!, $shippingOrder: ShippingOrderPatch) {
+            updateReleaseGoodDetails(releaseGood: $releaseOrder, shippingOrder: $shippingOrder) {
+              id
+              name
+            }
+          }
+        `,
+        variables: {
+          releaseOrder: {
+            ...releaseOrder,
+            id: this._releaseOrderId,
+            name: this._releaseOrderNo,
+            ownTransport: this._importCargo ? true : this._ownTransport
+          },
+          shippingOrder
+        }
+      })
+
+      if (!response.errors) {
+        this._showToast({ message: i18next.t('text.release_order_details_updated') })
+        await this._fetchReleaseOrder()
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  _getFormInfo() {
+    const formData = this._serializeForm(this.releaseOrderForm)
+    delete formData.importedOrder
+    return formData
+  }
+
+  _serializeForm(form) {
+    let obj = {}
+    Array.from(form.querySelectorAll('input, select')).forEach(field => {
+      if (!field.hasAttribute('hidden') && field.value) {
+        obj[field.name] = field.type === 'checkbox' ? field.checked : field.value
+      }
+    })
+
+    return obj
+  }
+
+  _validateTransport() {
+    //Check if warehouse provide transport
+    if (this._enableTransportationServiceSetting != undefined && !this._enableTransportationServiceSetting) {
+      this._disableTransport = true
+      this._ownTransportInput.checked = true
+      this._ownTransport = true
+    }
+  }
+
+  _validateForm() {
+    if (!this.releaseOrderForm.checkValidity()) {
+      throw new Error(i18next.t('text.release_order_form_invalid'))
+    }
+
+    //    - condition: export is ticked
+    if (this.shippingOrderForm) {
+      if (!this.shippingOrderForm.checkValidity()) {
+        throw new Error(i18next.t('text.shipping_order_form_invalid'))
+      }
+    }
+  }
+
+  validateDate(e) {
+    let inputDate = e.currentTarget.value
+    let todayDate = this._getStdDate()
+    if (inputDate < todayDate) {
+      this._showToast({
+        message: 'Invalid date'
+      })
+    }
+    return inputDate
+  }
+
+  _getStdDate() {
+    let date = new Date()
+    date.setDate(date.getDate())
+    return date.toISOString().split('T')[0]
+  }
 }
 
 window.customElements.define('release-order-detail', ReleaseOrderDetail)