From 6c5259ceb2662fa8cabef67ea08c4c5d9e96a4f0 Mon Sep 17 00:00:00 2001
From: Edmond Teh <edmondtm@gmail.com>
Date: Thu, 3 Sep 2020 13:41:12 +0800
Subject: [PATCH] frontend create invoice

---
 resources/assets/js/components/NewInvoice.vue | 561 +++++++++---------
 1 file changed, 294 insertions(+), 267 deletions(-)

diff --git a/resources/assets/js/components/NewInvoice.vue b/resources/assets/js/components/NewInvoice.vue
index 95e024b9..64f7420a 100644
--- a/resources/assets/js/components/NewInvoice.vue
+++ b/resources/assets/js/components/NewInvoice.vue
@@ -4,276 +4,278 @@
     <h3 class="title">Purchase Order</h3>
 
     <div class="invoice-container">
-      <div class="buyer-detail card">
-        <div class="card-body">
-          <div class="card-title">
-            <h5>
-              My Infomation
-            </h5>
-          </div>
-          <div class="form-group">
-            <label for="marking">Marking</label>
-            <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.form.formData.buyer_company.$model"
-                   :class="{
-                     '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.form.formData.buyer_company.$touch()">
-            <div class="invalid-feedback">
-              Buyer Company Required
+      <form @submit.prevent="submitForm">
+        <div class="buyer-detail card">
+          <div class="card-body">
+            <div class="card-title">
+              <h5>
+                My Infomation
+              </h5>
             </div>
-          </div>
-          <!-- <div class="form-group">
-            <label for="gst-id">GST ID</label>
-            <input id="gst-id" type="text" class="form-control" disabled>
-          </div> -->
-          <div class="form-group">
-            <label for="contact-number">Contact Number</label>
-            <input id="contact-number"
-                   v-model.trim="$v.form.formData.contact_no.$model"
-                   :class="{
-                     '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.form.formData.contact_no.$touch()">
-            <div class="invalid-feedback">
-              Contact Number Required
+            <div class="form-group">
+              <label for="marking">Marking</label>
+              <input id="marking" v-model="$v.form.formData.marking.$model" type="text" class="form-control" disabled>
             </div>
-          </div>
-          <div class="form-group">
-            <label for="address">Address</label>
-            <textarea id="address"
-                      v-model="$v.form.formData.address.$model"
-                      :class="{
-                        '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.form.formData.address.$touch()"/>
-            <div class="invalid-feedback">
-              Address Required
+            <div class="form-group">
+              <label for="buyer-company">Buyer's Company</label>
+              <input id="buyer-company"
+                     v-model="$v.form.formData.buyer_company.$model"
+                     :class="{
+                       '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.form.formData.buyer_company.$touch()">
+              <div class="invalid-feedback">
+                Buyer Company Required
+              </div>
+            </div>
+            <!-- <div class="form-group">
+              <label for="gst-id">GST ID</label>
+              <input id="gst-id" type="text" class="form-control" disabled>
+            </div> -->
+            <div class="form-group">
+              <label for="contact-number">Contact Number</label>
+              <input id="contact-number"
+                     v-model.trim="$v.form.formData.contact_no.$model"
+                     :class="{
+                       '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.form.formData.contact_no.$touch()">
+              <div class="invalid-feedback">
+                Contact Number Required
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="address">Address</label>
+              <textarea id="address"
+                        v-model="$v.form.formData.address.$model"
+                        :class="{
+                          '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.form.formData.address.$touch()"/>
+              <div class="invalid-feedback">
+                Address Required
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="conversion-rate">
-        <h5>
-          Conversion: {{ rate }}
-        </h5>
-      </div>
-      <div class="billing-detail-title">
-        <h5>Billing Detail</h5>
-      </div>
-      <div class="billing-detail-lines">
-        <table class="table">
-          <thead>
-            <tr>
-              <th class="align-middle">#</th>
-              <th class="align-middle">Stock Code</th>
-              <th class="align-middle">Description</th>
-              <th class="text-center align-middle">Qty</th>
-              <th class="text-center align-middle">Unit Price (RMB)</th>
-              <th class="text-center align-middle">Unit Price (RM)</th>
-              <th class="text-center align-middle">Total Amount (RM)</th>
-              <th>&nbsp;</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>&nbsp;</td>
-              <td>
-                <div class="form-group">
-                  <input v-model="$v.form.addLine.stock_code.$model"
-                         :class="{
-                           '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.form.addLine.stock_code.$touch()">
-                  <div class="invalid-feedback">
-                    Stock Code Required
+        <div class="conversion-rate">
+          <h5>
+            Conversion: {{ rate }}
+          </h5>
+        </div>
+        <div class="billing-detail-title">
+          <h5>Billing Detail</h5>
+        </div>
+        <div class="billing-detail-lines">
+          <table class="table">
+            <thead>
+              <tr>
+                <th class="align-middle">#</th>
+                <th class="align-middle">Stock Code</th>
+                <th class="align-middle">Description</th>
+                <th class="text-center align-middle">Qty</th>
+                <th class="text-center align-middle">Unit Price (RMB)</th>
+                <th class="text-center align-middle">Unit Price (RM)</th>
+                <th class="text-center align-middle">Total Amount (RM)</th>
+                <th>&nbsp;</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>&nbsp;</td>
+                <td>
+                  <div class="form-group">
+                    <input v-model="$v.form.addLine.stock_code.$model"
+                           :class="{
+                             '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.form.addLine.stock_code.$touch()">
+                    <div class="invalid-feedback">
+                      Stock Code Required
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td>
-                <div class="form-group">
-                  <textarea id="description"
-                            v-model="$v.form.addLine.description.$model"
-                            :class="{
-                              '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.form.addLine.description.$touch()"/>
-                  <div class="invalid-feedback">
-                    Description Required
+                </td>
+                <td>
+                  <div class="form-group">
+                    <textarea id="description"
+                              v-model="$v.form.addLine.description.$model"
+                              :class="{
+                                '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.form.addLine.description.$touch()"/>
+                    <div class="invalid-feedback">
+                      Description Required
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td>
-                <div class="form-group">
-                  <input id="quantity"
-                         v-model="$v.form.addLine.quantity.$model"
-                         :class="{
-                           '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.form.addLine.quantity.$touch()">
-                  <div class="invalid-feedback">
-                    Quantity Required
+                </td>
+                <td>
+                  <div class="form-group">
+                    <input id="quantity"
+                           v-model="$v.form.addLine.quantity.$model"
+                           :class="{
+                             '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.form.addLine.quantity.$touch()">
+                    <div class="invalid-feedback">
+                      Quantity Required
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td>
-                <div class="form-group">
-                  <input id="rmb-unit-price"
-                         v-model="$v.form.addLine.unit_price_rmb.$model"
-                         :class="{
-                           '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.form.addLine.unit_price_rmb.$touch()">
-                  <div class="invalid-feedback">
-                    Unit Price Required
+                </td>
+                <td>
+                  <div class="form-group">
+                    <input id="rmb-unit-price"
+                           v-model="$v.form.addLine.unit_price_rmb.$model"
+                           :class="{
+                             '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.form.addLine.unit_price_rmb.$touch()">
+                    <div class="invalid-feedback">
+                      Unit Price Required
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td>
-                <div class="form-group">
-                  <input id="rm-unit-price"
-                         v-model="$v.form.addLine.unit_price_rm.$model"
-                         :class="{
-                           '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.form.addLine.unit_price_rm.$touch()">
-                  <div class="invalid-feedback">
-                    Unit Price Required
+                </td>
+                <td>
+                  <div class="form-group">
+                    <input id="rm-unit-price"
+                           v-model="$v.form.addLine.unit_price_rm.$model"
+                           :class="{
+                             '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.form.addLine.unit_price_rm.$touch()">
+                    <div class="invalid-feedback">
+                      Unit Price Required
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td>
-                <div class="form-group">
-                  <input id="total"
-                         v-model="$v.form.addLine.total.$model"
-                         type="number"
-                         min="0"
-                         name="subtotal"
-                         class="form-control"
-                         disabled>
-                </div>
-              </td>
-              <td>
-                <button class="btn btn-success" type="button" @click="onAddLine()">
-                  Add
-                </button>
-              </td>
-            </tr>
-            <tr v-for="(line, index) in form.formData.lines" :key="index">
-              <td class="line-number text-center align-middle">
-                {{ index + 1 }}
-              </td>
-              <td class="stock-code text-center align-middle">
-                {{ line.stock_code }}
-              </td>
-              <td class="description align-middle">
-                {{ line.description }}
-              </td>
-              <td class="quantity text-center align-middle">
-                {{ line.quantity }}
-              </td>
-              <td class="unit-price-rmb text-center align-middle">
-                {{ line.unit_price_rmb }}
-              </td>
-              <td class="unit-price-rm text-center align-middle">
-                {{ line.unit_price_rm }}
-              </td>
-              <td class="line-subtotal text-center align-middle">
-                {{ line.total }}
-              </td>
-              <td>
-                <button class="btn btn-danger" @click="onRemoveLine(index)">
-                  Remove
-                </button>
-              </td>
-            </tr>
-          </tbody>
-          <tfoot>
-            <tr class="subtotal-line">
-              <td colspan="5"/>
-              <td class="subtotal-title text-center">
-                Subtotal
-              </td>
-              <td class="subtotal text-center">
-                {{ subtotal }}
-              </td>
-              <td>
-                &nbsp;
-              </td>
-            </tr>
-            <tr v-if="tax > 0" class="gst-line">
-              <td colspan="5"/>
-              <td class="gst-title text-center">
-                GST
-              </td>
-              <td class="gst-total text-center">
-                {{ tax }}
-              </td>
-              <td>
-                &nbsp;
-              </td>
-            </tr>
-            <tr class="total-line">
-              <td colspan="5"/>
-              <td class="total-title text-center">
-                Total
-              </td>
-              <td class="total text-center">
-                {{ total }}
-              </td>
-              <td>
-                &nbsp;
-              </td>
-            </tr>
-            <tr>
-              <td colspan="5">&nbsp;</td>
-              <td colspan="2">
-                <button class="btn btn-success btn-block">
-                  Create PO
-                </button>
-              </td>
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-    </div>
+                </td>
+                <td>
+                  <div class="form-group">
+                    <input id="total"
+                           v-model="$v.form.addLine.total.$model"
+                           type="number"
+                           min="0"
+                           name="subtotal"
+                           class="form-control"
+                           disabled>
+                  </div>
+                </td>
+                <td>
+                  <button class="btn btn-success" type="button" @click="onAddLine()">
+                    Add
+                  </button>
+                </td>
+              </tr>
+              <tr v-for="(line, index) in form.formData.lines" :key="index">
+                <td class="line-number text-center align-middle">
+                  {{ index + 1 }}
+                </td>
+                <td class="stock-code text-center align-middle">
+                  {{ line.stock_code }}
+                </td>
+                <td class="description align-middle">
+                  {{ line.description }}
+                </td>
+                <td class="quantity text-center align-middle">
+                  {{ line.quantity }}
+                </td>
+                <td class="unit-price-rmb text-center align-middle">
+                  {{ line.unit_price_rmb }}
+                </td>
+                <td class="unit-price-rm text-center align-middle">
+                  {{ line.unit_price_rm }}
+                </td>
+                <td class="line-subtotal text-center align-middle">
+                  {{ line.total }}
+                </td>
+                <td>
+                  <button class="btn btn-danger" @click="onRemoveLine(index)">
+                    Remove
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr class="subtotal-line">
+                <td colspan="5"/>
+                <td class="subtotal-title text-center">
+                  Subtotal
+                </td>
+                <td class="subtotal text-center">
+                  {{ subtotal }}
+                </td>
+                <td>
+                  &nbsp;
+                </td>
+              </tr>
+              <tr v-if="tax > 0" class="gst-line">
+                <td colspan="5"/>
+                <td class="gst-title text-center">
+                  GST
+                </td>
+                <td class="gst-total text-center">
+                  {{ tax }}
+                </td>
+                <td>
+                  &nbsp;
+                </td>
+              </tr>
+              <tr class="total-line">
+                <td colspan="5"/>
+                <td class="total-title text-center">
+                  Total
+                </td>
+                <td class="total text-center">
+                  {{ total }}
+                </td>
+                <td>
+                  &nbsp;
+                </td>
+              </tr>
+              <tr>
+                <td colspan="5">&nbsp;</td>
+                <td colspan="2">
+                  <button class="btn btn-success btn-block" type="submit">
+                    Create PO
+                  </button>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </form>
+    </div> <!-- invoice-container -->
   </div>
 </template>
 <style>
@@ -336,7 +338,8 @@
 <script>
 import Vue from 'vue'
 import Vuelidate from 'vuelidate'
-import { required, numeric, or, decimal } from 'vuelidate/lib/validators'
+import { required, numeric, decimal } from 'vuelidate/lib/validators'
+import axios from 'axios'
 Vue.use(Vuelidate)
 
 export default {
@@ -433,15 +436,15 @@ export default {
         },
         unit_price_rmb: {
           required,
-          mycustomval: or(numeric, decimal)
+          decimal
         },
         unit_price_rm: {
           required,
-          mycustomval: or(numeric, decimal)
+          decimal
         },
         total: {
           required,
-          mycustomval: or(numeric, decimal)
+          decimal
         }
       }
     }
@@ -469,7 +472,6 @@ export default {
       this.service_charge = service_charge
       this.amount = amount
       this.rate = rate
-
     }
   },
   created: {
@@ -478,7 +480,6 @@ export default {
   methods: {
     onAddLine: function () {
       if (this.$v.form.addLine.$invalid) {
-        console.log('invalid', this.$v.form.addLine.$invalid)
         this.$v.form.addLine.$touch()
         return
       }
@@ -523,13 +524,39 @@ export default {
     },
     clearAddLine: function () {
       this.form.addLine.order = null
-      this.formaddLine.description = null
+      this.form.addLine.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()
+    },
+    submitForm () {
+      if (this.$v.form.formData.$invalid) {
+        this.$v.form.formData.$touch()
+        console.log('form not valid')
+        return
+      }
+
+      if (this.amount != this.total) {
+        console.log('amount not matched')
+        alert(`PO Total RM${this.total} Does Not Match Expected RM${this.amount}`)
+        return
+      }
+
+      const url = '/api/invoice/' + this.booking_id
+
+      // create order in line
+      this.form.formData.lines
+        .forEach((el, i) => {
+          this.form.formData.lines[i].order = (i + 1)
+        })
+
+      axios
+        .post(url, this.form.formData)
+        .then(resp => console.log(resp))
+        .catch(err => console.error(err))
     }
   }
 }