1 files changed, 172 insertions, 0 deletions
diff --git a/src/components/new_customer.vue b/src/components/new_customer.vue
new file mode 100644
index 0000000..f6f8d9b
--- /dev/null
+++ b/src/components/new_customer.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { ref, toRaw } from 'vue'
+import axios from 'axios'
+import { useToast } from 'vue-toast-notification'
+import Customer from './../classes/customer'
+
+const toast = useToast({
+  position: 'top-right'
+})
+
+const sameShippingAddress = ref(true)
+const handleToggleSameShippingAddress = () => {
+  toast.warning('This action is coming soon.')
+  sameShippingAddress.value = true
+}
+
+const customer = ref(new Customer())
+
+const submit = async (e) => {
+  e.preventDefault()
+  try {
+    const c = toRaw(customer.value)
+    await axios.post('/customer', c)
+    toast.success('Successfully added a new customer.')
+    // TODO: refresh items list
+  } 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')
+    }
+  }
+}
+</script>
+
+<template>
+  <form class="row g-3" v-on:submit="submit">
+    <div class="col-md-4">
+      <label for="customer-name-input" class="form-label">Customer Name</label>
+      <input
+        type="text"
+        class="form-control"
+        id="customer-name-input"
+        placeholder="Firm Name"
+        v-model="customer.name"
+      />
+    </div>
+    <div class="col-md-4">
+      <label for="customer-gstin-input" class="form-label">GSTIN</label>
+      <input
+        type="text"
+        class="form-control"
+        id="customer-gstin-input"
+        placeholder="22AAAAA0000A1Z5"
+        v-model="customer.gstin"
+      />
+    </div>
+    <div class="col-md-4">
+      <label for="customer-contactname-input" class="form-label">Contact Name</label>
+      <input
+        type="text"
+        class="form-control"
+        id="customer-contactname-input"
+        placeholder="Contact Name"
+        v-model="customer.contactname"
+      />
+    </div>
+
+    <div class="col-md-4">
+      <label for="customer-phone-input" class="form-label">Phone Number</label>
+      <input
+        type="tel"
+        class="form-control"
+        id="customer-phone-input"
+        placeholder="Contact Number"
+        v-model="customer.phone"
+      />
+    </div>
+    <div class="col-md-4">
+      <label for="customer-email-input" class="form-label">E-Mail</label>
+      <input
+        type="email"
+        class="form-control"
+        id="customer-email-input"
+        placeholder="E-Mail Address"
+        v-model="customer.email"
+      />
+    </div>
+    <div class="col-md-4">
+      <label for="customer-website-input" class="form-label">Website</label>
+      <input
+        type="url"
+        class="form-control"
+        id="customer-website-input"
+        placeholder="Website"
+        v-model="customer.website"
+      />
+    </div>
+
+    <div class="col-12">
+      <label for="inputAddress" class="form-label">Billing Address</label>
+      <textarea
+        type="text"
+        class="form-control"
+        id="inputAddress"
+        placeholder="1234 Main St"
+        v-model="customer.billingaddress.addresstext"
+      ></textarea>
+    </div>
+    <div class="col-md-5">
+      <label for="inputCity" class="form-label">City</label>
+      <input
+        type="text"
+        class="form-control"
+        id="inputCity"
+        v-model="customer.billingaddress.city"
+      />
+    </div>
+    <div class="col-md-3">
+      <label for="inputState" class="form-label">State</label>
+      <input
+        type="text"
+        class="form-control"
+        id="inputState"
+        v-model="customer.billingaddress.state"
+      />
+    </div>
+    <div class="col-md-1">
+      <label for="inputZip" class="form-label">Zip</label>
+      <input
+        type="text"
+        class="form-control"
+        id="inputZip"
+        v-model="customer.billingaddress.postalcode"
+      />
+    </div>
+    <div class="col-md-3">
+      <label for="inputCountry" class="form-label">Country</label>
+      <input
+        type="text"
+        class="form-control"
+        id="inputCountry"
+        v-model="customer.billingaddress.country"
+      />
+    </div>
+
+    <div class="col-12">
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="gridCheck"
+          v-model="sameShippingAddress"
+          v-on:change="handleToggleSameShippingAddress"
+        />
+        <label class="form-check-label" for="gridCheck">
+          Shipping address same as billing address
+        </label>
+      </div>
+    </div>
+
+    <div class="col-12">
+      <input type="submit" value="Add New Client" class="btn btn-primary" />
+    </div>
+  </form>
+</template>