aboutsummaryrefslogtreecommitdiff
path: root/src/components/invoice_header.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/invoice_header.vue')
-rw-r--r--src/components/invoice_header.vue213
1 files changed, 105 insertions, 108 deletions
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>