From fef28d090dd37b767e2614e114f8e6eacb9ee1fa Mon Sep 17 00:00:00 2001
From: Edmond Teh <edmondtm@gmail.com>
Date: Wed, 2 Sep 2020 16:59:13 +0800
Subject: [PATCH] solved split error

---
 resources/assets/js/components/NewInvoice.vue | 256 ++++++++----------
 1 file changed, 115 insertions(+), 141 deletions(-)

diff --git a/resources/assets/js/components/NewInvoice.vue b/resources/assets/js/components/NewInvoice.vue
index 5196c5f8..95e024b9 100644
--- a/resources/assets/js/components/NewInvoice.vue
+++ b/resources/assets/js/components/NewInvoice.vue
@@ -13,19 +13,19 @@
           </div>
           <div class="form-group">
             <label for="marking">Marking</label>
-            <input id="marking" v-model="$v.formData.marking.$model" type="text" class="form-control" disabled>
+            <input id="marking" v-model="$v.form.formData.marking.$model" type="text" class="form-control" disabled>
           </div>
           <div class="form-group">
             <label for="buyer-company">Buyer's Company</label>
             <input id="buyer-company"
-                   v-model="$v.formData.buyer_company.$model"
+                   v-model="$v.form.formData.buyer_company.$model"
                    :class="{
-                     'is-invalid': $v.formData.buyer_company.$invalid && $v.formData.buyer_company.$dirty,
-                     'is-valid': !$v.formData.buyer_company.$invalid && $v.formData.buyer_company.$dirty
+                     'is-invalid': $v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty,
+                     'is-valid': !$v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty
                    }"
                    type="text"
                    class="form-control"
-                   @blur="$v.formData.buyer_company.$touch()">
+                   @blur="$v.form.formData.buyer_company.$touch()">
             <div class="invalid-feedback">
               Buyer Company Required
             </div>
@@ -37,14 +37,14 @@
           <div class="form-group">
             <label for="contact-number">Contact Number</label>
             <input id="contact-number"
-                   v-model.trim="$v.formData.contact_no.$model"
+                   v-model.trim="$v.form.formData.contact_no.$model"
                    :class="{
-                     'is-invalid': $v.formData.contact_no.$invalid && $v.formData.contact_no.$dirty,
-                     'is-valid': !$v.formData.contact_no.$invalid && $v.formData.contact_no.$dirty
+                     'is-invalid': $v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty,
+                     'is-valid': !$v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty
                    }"
                    type="tel"
                    class="form-control"
-                   @blur="$v.formData.contact_no.$touch()">
+                   @blur="$v.form.formData.contact_no.$touch()">
             <div class="invalid-feedback">
               Contact Number Required
             </div>
@@ -52,15 +52,15 @@
           <div class="form-group">
             <label for="address">Address</label>
             <textarea id="address"
-                      v-model="$v.formData.address.$model"
+                      v-model="$v.form.formData.address.$model"
                       :class="{
-                        'is-invalid': $v.formData.address.$invalid && $v.formData.address.$dirty,
-                        'is-valid': !$v.formData.address.$invalid && $v.formData.address.$dirty
+                        'is-invalid': $v.form.formData.address.$invalid && $v.form.formData.address.$dirty,
+                        'is-valid': !$v.form.formData.address.$invalid && $v.form.formData.address.$dirty
                       }"
                       class="form-control"
                       cols="30"
                       rows="4"
-                      @blur="$v.formData.address.$touch()"/>
+                      @blur="$v.form.formData.address.$touch()"/>
             <div class="invalid-feedback">
               Address Required
             </div>
@@ -94,14 +94,14 @@
               <td>&nbsp;</td>
               <td>
                 <div class="form-group">
-                  <input v-model="$v.addLine.stock_code.$model"
+                  <input v-model="$v.form.addLine.stock_code.$model"
                          :class="{
-                           'is-invalid': $v.addLine.stock_code.$invalid && $v.addLine.stock_code.$dirty,
-                           'is-valid': !$v.addLine.stock_code.$invalid && $v.addLine.stock_code.$dirty
+                           'is-invalid': $v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty,
+                           'is-valid': !$v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty
                          }"
                          name="stockcode" type="text"
                          class="form-control"
-                         @blur="$v.addLine.stock_code.$touch()">
+                         @blur="$v.form.addLine.stock_code.$touch()">
                   <div class="invalid-feedback">
                     Stock Code Required
                   </div>
@@ -110,13 +110,13 @@
               <td>
                 <div class="form-group">
                   <textarea id="description"
-                            v-model="$v.addLine.description.$model"
+                            v-model="$v.form.addLine.description.$model"
                             :class="{
-                              'is-invalid': $v.addLine.description.$invalid && $v.addLine.description.$dirty,
-                              'is-valid': !$v.addLine.description.$invalid && $v.addLine.description.$dirty
+                              'is-invalid': $v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty,
+                              'is-valid': !$v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty
                             }"
                             name="description" cols="20" rows="2"
-                            @blur="$v.addLine.description.$touch()"/>
+                            @blur="$v.form.addLine.description.$touch()"/>
                   <div class="invalid-feedback">
                     Description Required
                   </div>
@@ -125,17 +125,17 @@
               <td>
                 <div class="form-group">
                   <input id="quantity"
-                         v-model="$v.addLine.quantity.$model"
+                         v-model="$v.form.addLine.quantity.$model"
                          :class="{
-                           'is-invalid': $v.addLine.quantity.$invalid && $v.addLine.quantity.$dirty,
-                           'is-valid': !$v.addLine.quantity.$invalid && $v.addLine.quantity.$dirty
+                           'is-invalid': $v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty,
+                           'is-valid': !$v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty
                          }"
                          type="number"
                          min="1"
                          class="form-control"
                          name="quantity"
                          @change="onUnitPriceRM()"
-                         @blur="$v.addLine.quantity.$touch()">
+                         @blur="$v.form.addLine.quantity.$touch()">
                   <div class="invalid-feedback">
                     Quantity Required
                   </div>
@@ -144,17 +144,17 @@
               <td>
                 <div class="form-group">
                   <input id="rmb-unit-price"
-                         v-model="$v.addLine.unit_price_rmb.$model"
+                         v-model="$v.form.addLine.unit_price_rmb.$model"
                          :class="{
-                           'is-invalid': $v.addLine.unit_price_rmb.$invalid && $v.addLine.unit_price_rmb.$dirty,
-                           'is-valid': !$v.addLine.unit_price_rmb.$invalid && $v.addLine.unit_price_rmb.$dirty
+                           'is-invalid': $v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty,
+                           'is-valid': !$v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty
                          }"
                          type="number"
                          min="0"
                          name="rmb-unit-price"
                          class="form-control"
                          @change="onUnitPriceRMB()"
-                         @blur="$v.addLine.unit_price_rmb.$touch()">
+                         @blur="$v.form.addLine.unit_price_rmb.$touch()">
                   <div class="invalid-feedback">
                     Unit Price Required
                   </div>
@@ -163,17 +163,17 @@
               <td>
                 <div class="form-group">
                   <input id="rm-unit-price"
-                         v-model="$v.addLine.unit_price_rm.$model"
+                         v-model="$v.form.addLine.unit_price_rm.$model"
                          :class="{
-                           'is-invalid': $v.addLine.unit_price_rm.$invalid && $v.addLine.unit_price_rm.$dirty,
-                           'is-valid': !$v.addLine.unit_price_rm.$invalid && $v.addLine.unit_price_rm.$dirty
+                           'is-invalid': $v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty,
+                           'is-valid': !$v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty
                          }"
                          type="number"
                          min="0"
                          name="rm-unit-price"
                          class="form-control"
                          @change="onUnitPriceRM()"
-                         @blur="$v.addLine.unit_price_rm.$touch()">
+                         @blur="$v.form.addLine.unit_price_rm.$touch()">
                   <div class="invalid-feedback">
                     Unit Price Required
                   </div>
@@ -182,7 +182,7 @@
               <td>
                 <div class="form-group">
                   <input id="total"
-                         v-model="$v.addLine.total.$model"
+                         v-model="$v.form.addLine.total.$model"
                          type="number"
                          min="0"
                          name="subtotal"
@@ -196,7 +196,7 @@
                 </button>
               </td>
             </tr>
-            <tr v-for="(line, index) in formData.lines" :key="index">
+            <tr v-for="(line, index) in form.formData.lines" :key="index">
               <td class="line-number text-center align-middle">
                 {{ index + 1 }}
               </td>
@@ -371,22 +371,24 @@ export default {
   },
   data: function () {
     return {
-      formData: {
-        buyer_company: '',
-        address: '',
-        contact_no: '',
-        marking: this.booking_details.marking,
-        gst_id: '',
-        lines: []
-      },
-      addLine: {
-        order: null,
-        description: null,
-        quantity: null,
-        unit_price_rmb: null,
-        unit_price_rm: null,
-        stock_code: null,
-        total: null
+      form: {
+        formData: {
+          buyer_company: '',
+          address: '',
+          contact_no: '',
+          marking: this.booking_details.marking,
+          gst_id: '',
+          lines: []
+        },
+        addLine: {
+          order: null,
+          description: null,
+          quantity: null,
+          unit_price_rmb: null,
+          unit_price_rm: null,
+          stock_code: null,
+          total: null
+        }
       },
       rate: 0,
       service_charge: 0,
@@ -400,71 +402,47 @@ export default {
   computed: {
   },
   validations: {
-    formData: {
-      buyer_company: {
-        required
-      },
-      address: {
-        required
-      },
-      contact_no: {
-        required
-      },
-      marking: {
-        required
-      },
-      gst_id: {
+    form: {
+      formData: {
+        buyer_company: {
+          required
+        },
+        address: {
+          required
+        },
+        contact_no: {
+          required
+        },
+        marking: {
+          required
+        },
+        gst_id: {
 
-      },
-      lines: [
-        {
-          stock_code: {
-            required
-          },
-          description: {
-            required
-          },
-          quantity: {
-            required,
-            numeric
-          },
-          unit_price_rmb: {
-            required,
-            mycustomval: or(numeric, decimal)
-          },
-          unit_price_rm: {
-            required,
-            mycustomval: or(numeric, decimal)
-          },
-          total: {
-            required,
-            mycustomval: or(numeric, decimal)
-          }
         }
-      ]
-    },
-    addLine: {
-      stock_code: {
-        required
       },
-      description: {
-        required
-      },
-      quantity: {
-        required,
-        numeric
-      },
-      unit_price_rmb: {
-        required,
-        mycustomval: or(numeric, decimal)
-      },
-      unit_price_rm: {
-        required,
-        mycustomval: or(numeric, decimal)
-      },
-      total: {
-        required,
-        mycustomval: or(numeric, decimal)
+      addLine: {
+        stock_code: {
+          required
+        },
+        description: {
+          required
+        },
+        quantity: {
+          required,
+          numeric
+        },
+        unit_price_rmb: {
+          required,
+          mycustomval: or(numeric, decimal)
+        },
+        unit_price_rm: {
+          required,
+          mycustomval: or(numeric, decimal)
+        },
+        total: {
+          required,
+          mycustomval: or(numeric, decimal)
+        }
       }
     }
   },
@@ -482,11 +460,11 @@ export default {
         rate
       } = this.booking_details
 
-      this.formData.buyer_company = buyer_company
-      this.formData.reg_no = reg_no
-      this.formData.address = address
-      this.formData.contact_no = contact_no
-      this.formData.marking = marking
+      this.form.formData.buyer_company = buyer_company
+      this.form.formData.reg_no = reg_no
+      this.form.formData.address = address
+      this.form.formData.contact_no = contact_no
+      this.form.formData.marking = marking
       this.tax = tax
       this.service_charge = service_charge
       this.amount = amount
@@ -499,9 +477,9 @@ export default {
   },
   methods: {
     onAddLine: function () {
-      if (this.$v.addLine.$invalid) {
-        console.log('invalid', this.$v.addLine.$invalid)
-        this.$v.addLine.$touch()
+      if (this.$v.form.addLine.$invalid) {
+        console.log('invalid', this.$v.form.addLine.$invalid)
+        this.$v.form.addLine.$touch()
         return
       }
       const {
@@ -512,7 +490,7 @@ export default {
         unit_price_rmb,
         unit_price_rm,
         total
-      } = this.addLine
+      } = this.form.addLine
       const data = {
         order: order,
         description,
@@ -523,39 +501,35 @@ export default {
         total
       }
       
-      this.formData.lines.push(data)
+      this.form.formData.lines.push(data)
       this.setTotal()
       this.clearAddLine()
     },
     onUnitPriceRMB: function () {
-      console.log(this.addLine.unit_price_rmb)
-      this.addLine.unit_price_rm = (+this.addLine.unit_price_rmb * +this.rate).toFixed(2)
-      this.addLine.total = (+this.addLine.unit_price_rm * +this.addLine.quantity).toFixed(2)
+      this.form.addLine.unit_price_rm = (+this.form.addLine.unit_price_rmb * +this.rate).toFixed(2)
+      this.form.addLine.total = (+this.form.addLine.unit_price_rm * +this.form.addLine.quantity).toFixed(2)
     },
     onUnitPriceRM: function () {
-      this.addLine.unit_price_rmb = (this.addLine.unit_price_rm / this.rate).toFixed(2)
-      this.addLine.total = (+this.addLine.unit_price_rm * +this.addLine.quantity).toFixed(2)
+      this.form.addLine.unit_price_rmb = (this.form.addLine.unit_price_rm / this.rate).toFixed(2)
+      this.form.addLine.total = (+this.form.addLine.unit_price_rm * +this.form.addLine.quantity).toFixed(2)
     },
     onRemoveLine: function (line) {
-      this.formData.lines.splice(line)
+      this.form.formData.lines.splice(line)
       this.setTotal()
     },
     setTotal: function () {
-      console.log(this.formData.lines)
-      console.log(this.formData.lines.map(line => line.total))
-      console.log(this.formData.lines.map(line => line.total).reduce((a, b) => +a + +b))
-      this.subtotal = parseFloat(this.formData.lines.map(line => line.total).reduce((a, b) => parseFloat(a) + parseFloat(b))).toFixed(2)
+      this.subtotal = parseFloat(this.form.formData.lines.map(line => line.total).reduce((a, b) => parseFloat(a) + parseFloat(b))).toFixed(2)
       this.total = parseFloat(+this.subtotal + (+this.subtotal * (+this.tax || 0) / 100)).toFixed(2)
     },
     clearAddLine: function () {
-      this.addLine.order = null
-      this.addLine.description = null
-      this.addLine.quantity = null
-      this.addLine.unit_price_rmb = null
-      this.addLine.unit_price_rm = null
-      this.addLine.stock_code = null
-      this.addLine.total = null
-      this.$v.addLine.$reset()
+      this.form.addLine.order = null
+      this.formaddLine.description = null
+      this.form.addLine.quantity = null
+      this.form.addLine.unit_price_rmb = null
+      this.form.addLine.unit_price_rm = null
+      this.form.addLine.stock_code = null
+      this.form.addLine.total = null
+      this.$v.form.addLine.$reset()
     }
   }
 }