added invoice edit page0.1.0

2 files changed, 49 insertions, 2 deletions

diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue
new file mode 100644
index 0000000..983e9ef
--- /dev/null
+++ b/src/views/EditInvoice.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, toRaw, onMounted } from 'vue'
+import { useRoute } from "vue-router"
+import { useToast } from 'vue-toast-notification'
+import axios from 'axios'
+
+import Invoice from "./../classes/invoice"
+
+import invoiceHeader from './../components/invoice_header.vue'
+import itemSelector from './../components/item_selector.vue'
+
+const toast = useToast({
+  position: 'top-right'
+})
+
+const route = useRoute()
+
+const invoice = ref(new Invoice())
+const isLoading = ref(true)
+
+const getInvoice = async () => {
+  isLoading.value = true
+
+  try {
+    const r = await axios.get(`/invoice/${route.params.id}`)
+    invoice.value = r.data.data
+  } catch (err) {
+    toast.error('An unhandled exception occoured. Please check logs')
+    console.error(err)
+  }
+
+  isLoading.value = false
+}
+
+const refreshItems = () => {
+   toast.success("Item was added but what happens after that hasn't been implemented yet!")
+}
+
+onMounted(() => {
+  getInvoice()
+})
+</script>
+
+<template>
+  <invoiceHeader :invoice="invoice" />
+  <itemSelector :invoiceId="invoice.ID" @added="refreshItems()"/>
+</template>
diff --git a/src/views/NewInvoice.vue b/src/views/NewInvoice.vue
index b2f32e2..06d3ec7 100644
--- a/src/views/NewInvoice.vue
+++ b/src/views/NewInvoice.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import invoiceHeader from './../components/invoice_header.vue'
+import invoiceHeaderEditor from './../components/invoice_header_editor.vue'
 </script>
 
 <template>
-  <invoiceHeader />
+  <invoiceHeaderEditor />
 </template>