From 37ef1ab2f544a05b5878c5bdaafd37155a054289 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Sun, 3 Dec 2023 22:16:22 +0530
Subject: added invoice edit page

---
 src/components/invoice_header.vue | 213 +++++++++++++++++++-------------------
 1 file changed, 105 insertions(+), 108 deletions(-)

(limited to 'src/components/invoice_header.vue')

diff --git a/src/components/invoice_header.vue b/src/components/invoice_header.vue
index 2c62f15..2c3c515 100644
--- a/src/components/invoice_header.vue
+++ b/src/components/invoice_header.vue
@@ -1,118 +1,115 @@
 <script setup lang="ts">
-import { ref, toRaw, onMounted } from 'vue'
-import axios from 'axios'
-import { useToast } from 'vue-toast-notification'
-
-const toast = useToast({
-  position: 'top-right'
-})
-
-const isLoading = ref(true)
-const allCustomers = ref([])
-
-const invoiceCustomer = ref(null)
-const invoiceNumber = ref(0)
-const invoiceDate = ref(new Date().toISOString().substr(0, 10))
-
-const handleDateChange = e => {
-  invoiceDate.value = e
-}
-
-const getAllCustomers = async () => {
-  allCustomers.value = []
-  isLoading.value = true
-
-  try {
-    const r = await axios.get('/customer')
-    if (r.status === 200) {
-      allCustomers.value = r.data.data
-    } else if (r.status === 204) {
-      toast.warning('No customers found')
-    }
-  } catch (err) {
-    toast.error('An unhandled exception occoured. Please check logs')
-    console.error(err)
-  }
-
-  isLoading.value = false
-}
-
-const submit = async (e) => {
-  e.preventDefault()
-  isLoading.value = true
-
-  try {
-    const c = toRaw(invoiceCustomer.value)
-
-    await axios.post('/invoice', {
-      "invoicenumber": toRaw(invoiceNumber.value),
-      "invoicedate": new Date(toRaw(invoiceDate.value)).toISOString(),
-      "isdraft": true,
-      "billingaddress": c.BillingAddress,
-      "shippingaddress": c.BillingAddress, // TODO
-      "customername": c.Name,
-      "customergstin": c.Gstin,
-      "customercontactname": c.ContactName,
-      "customerphone": c.Phone,
-      "customeremail": c.Email,
-      "customerwebsite": c.Website,
-    })
-  } catch (err) {
-    const statusCode = err.request.status
-    const res = JSON.parse(err.request.response)
-
-    switch (statusCode) {
-      case (400, 409):
-        toast.error(res.error)
-        break
-      default:
-        console.error(err)
-        toast.error('An unhandled exception occoured. Please check logs')
-    }
-  }
-
-  isLoading.value = false
-}
-
-onMounted(() => {
-  getAllCustomers()
-})
+import { toRaw, defineProps } from 'vue'
+const props = defineProps(["invoice"])
 </script>
 
 <template>
-  <form class="row g-12" v-on:submit="submit">
-    <div class="col-md-4">
-      <label for="item-brand-input" class="form-label">Customer</label>
-      <select
-        v-model="invoiceCustomer"
-        class="form-select"
-        aria-label="Select Brand"
-        id="item-brand-input"
-      >
-        <option selected disabled value="null">Select Customer</option>
-        <option v-for="customer in allCustomers" :value="customer" :key="customer.id">
-          {{ customer.Name }}
-        </option>
-      </select>
+  <div class="row g-3">
+    <div class="col-md-2"><!-- spacer --></div>
+
+    <!-- customer details -->
+    <div class="col-md-3">
+      <table class="table">
+        <tr>
+          <td>Invoice Number</td>
+          <td>{{ props.invoice.InvoiceNumber }}</td>
+        </tr>
+
+        <tr>
+          <td>Invoice Date</td>
+          <td>{{ props.invoice.InvoiceDate }}</td>
+        </tr>
+
+        <tr>
+          <td>Customer</td>
+          <td>{{ props.invoice.CustomerName }}</td>
+        </tr>
+
+        <tr>
+          <td>GSTIN</td>
+          <td>{{ props.invoice.CustomerGstin }}</td>
+        </tr>
+
+        <tr>
+          <td>Contact Name</td>
+          <td>{{ props.invoice.CustomerContactName }}</td>
+        </tr>
+
+        <tr>
+          <td>Phone</td>
+          <td>{{ props.invoice.CustomerPhone }}</td>
+        </tr>
+
+        <tr>
+          <td>Email</td>
+          <td>{{ props.invoice.CustomerEmail }}</td>
+        </tr>
+
+        <tr>
+          <td>Website</td>
+          <td>{{ props.invoice.CustomerWebsite }}</td>
+        </tr>
+      </table>
     </div>
 
-    <div class="col-md-4">
-      <label for="invoice-number" class="form-label">Invoice Number</label>
-      <input id="invoice-number" class="form-control" type="number" v-model="invoiceNumber" min="0"/>
+    <!-- billing address -->
+    <div class="col-md-3">
+      <table class="table">
+        <tr>
+          <td>Address</td>
+          <td>{{ props.invoice.BillingAddress.AddressText }}</td>
+        </tr>
+
+        <tr>
+          <td>City</td>
+          <td>{{ props.invoice.BillingAddress.City }}</td>
+        </tr>
+
+        <tr>
+          <td>State</td>
+          <td>{{ props.invoice.BillingAddress.State }}</td>
+        </tr>
+
+        <tr>
+          <td>Postal Code</td>
+          <td>{{ props.invoice.BillingAddress.PostalCode }}</td>
+        </tr>
+
+        <tr>
+          <td>Country</td>
+          <td>{{ props.invoice.BillingAddress.Country }}</td>
+        </tr>
+      </table>
     </div>
 
-    <div class="col-md-4">
-      <label for="invoice-date" class="form-label">Invoice Date</label>
-      <input
-        type="date"
-        id="invoice-date"
-        class="form-control"
-        :value="new Date().toISOString().substr(0, 10)"
-        @input="handleDateChange($event.target.value)" />
+    <!-- shipping address -->
+    <div class="col-md-3">
+      <table class="table">
+        <tr>
+          <td>Address</td>
+          <td>{{ props.invoice.ShippingAddress.AddressText }}</td>
+        </tr>
+
+        <tr>
+          <td>City</td>
+          <td>{{ props.invoice.ShippingAddress.City }}</td>
+        </tr>
+
+        <tr>
+          <td>State</td>
+          <td>{{ props.invoice.ShippingAddress.State }}</td>
+        </tr>
+
+        <tr>
+          <td>Postal Code</td>
+          <td>{{ props.invoice.ShippingAddress.PostalCode }}</td>
+        </tr>
+
+        <tr>
+          <td>Country</td>
+          <td>{{ props.invoice.ShippingAddress.Country }}</td>
+        </tr>
+      </table>
     </div>
-
-    <div class="col-12">
-      <input type="submit" value="Continue" class="btn btn-primary" />
-    </div>
-  </form>
+  </div>
 </template>
-- 
cgit v1.2.3