aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--package.json2
-rw-r--r--src/components/brands_table.vue2
-rw-r--r--src/components/customers_table.vue2
-rw-r--r--src/components/invoice_items_table.vue47
-rw-r--r--src/components/items_table.vue2
-rw-r--r--src/views/EditInvoice.vue43
6 files changed, 46 insertions, 52 deletions
diff --git a/package.json b/package.json
index 8915981..9a80ec7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "openbills-web",
- "version": "0.2.2",
+ "version": "0.2.3",
"private": false,
"scripts": {
"dev": "vite",
diff --git a/src/components/brands_table.vue b/src/components/brands_table.vue
index 36cafa3..20429ec 100644
--- a/src/components/brands_table.vue
+++ b/src/components/brands_table.vue
@@ -57,7 +57,7 @@ const handleDelete = async (id) => {
<div class="dropdown">
<ul class="dropdown-menu">
<li>
- <button class="dropdown-item" v-on:click="console.log('Edit: ', brand.ID)">
+ <button class="dropdown-item disabled" v-on:click="console.log('Edit: ', brand.ID)">
Edit Item
</button>
</li>
diff --git a/src/components/customers_table.vue b/src/components/customers_table.vue
index 4ff23a8..163c6b1 100644
--- a/src/components/customers_table.vue
+++ b/src/components/customers_table.vue
@@ -99,7 +99,7 @@ onMounted(() => {
<div class="dropdown">
<ul class="dropdown-menu">
<li>
- <button class="dropdown-item" v-on:click="console.log('Edit: ', customer.ID)">
+ <button class="dropdown-item disabled" v-on:click="console.log('Edit: ', customer.ID)">
Edit Customer
</button>
</li>
diff --git a/src/components/invoice_items_table.vue b/src/components/invoice_items_table.vue
index 6a89f5a..8d6ea6a 100644
--- a/src/components/invoice_items_table.vue
+++ b/src/components/invoice_items_table.vue
@@ -1,57 +1,31 @@
<script setup lang="js">
-import { ref, onMounted, toRaw } from 'vue'
import axios from 'axios'
import { useToast } from 'vue-toast-notification'
-const props = defineProps(["invoiceId"])
+const props = defineProps(["items", "isLoading"])
+const emit = defineEmits(["refresh"])
const toast = useToast({
position: 'top-right'
})
-const items = ref([])
-const isLoading = ref(false)
-
-const getItems = async () => {
- items.value = []
- isLoading.value = true
-
- try {
- const res = await axios.get(`/invoice/${props.invoiceId}/item`)
- if (res.status === 200) {
- items.value = res.data.data
- }
- } catch (err) {
- toast.error('An unhandled exception occoured. Please check logs')
- console.error(err)
- }
-
- isLoading.value = false
-}
-
const handleDelete = async (id) => {
- alert("coming soon")
- return
try {
- const res = await axios.delete(`/item/${id}`)
+ const res = await axios.delete(`/invoice/item/${id}`)
if (res.status === 200) {
toast.success('Successfully deleted item')
}
- getAllItems()
+ emit("refresh")
} catch (err) {
toast.error('An unhandled exception occoured. Please check logs')
console.error(err)
}
}
-
-onMounted(() => {
- getItems()
-})
</script>
<template>
- <div v-if="isLoading" class="w-100 d-flex justify-content-center">
+ <div v-if="props.isLoading" class="w-100 d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only"></span>
</div>
@@ -70,12 +44,7 @@ onMounted(() => {
<th scope="col" class="table-action-column">
<div class="wrapper">
- <RouterLink to="/item/new">
- <button class="btn btn-dark">
- <i class="bi bi-plus-lg"></i>
- </button>
- </RouterLink>
- <button class="btn btn-dark" v-on:click="getAllItems">
+ <button class="btn btn-dark" v-on:click="emit('refresh')">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
@@ -84,7 +53,7 @@ onMounted(() => {
</thead>
<tbody>
- <tr v-for="(item, index) in items" :key="item['id']">
+ <tr v-for="(item, index) in props.items" :key="item['id']">
<td scope="row">{{ index + 1 }}</td>
<td>{{ item.Name }}</td>
<td>{{ item.Description }}</td>
@@ -102,7 +71,7 @@ onMounted(() => {
<div class="dropdown">
<ul class="dropdown-menu">
<li>
- <button class="dropdown-item" v-on:click="console.log('Edit: ', item.ID)">
+ <button class="dropdown-item disabled" v-on:click="console.log('Edit: ', item.ID)">
Edit Item
</button>
</li>
diff --git a/src/components/items_table.vue b/src/components/items_table.vue
index e9f103e..b18c91d 100644
--- a/src/components/items_table.vue
+++ b/src/components/items_table.vue
@@ -110,7 +110,7 @@ onMounted(() => {
<div class="dropdown">
<ul class="dropdown-menu">
<li>
- <button class="dropdown-item" v-on:click="console.log('Edit: ', item.ID)">
+ <button class="dropdown-item disabled" v-on:click="console.log('Edit: ', item.ID)">
Edit Item
</button>
</li>
diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue
index 7a508f8..958846e 100644
--- a/src/views/EditInvoice.vue
+++ b/src/views/EditInvoice.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-import { ref, toRaw, onMounted } from 'vue'
+import { ref, onMounted, toRaw } from 'vue'
import { useRoute } from "vue-router"
import { useToast } from 'vue-toast-notification'
import axios from 'axios'
@@ -18,24 +18,43 @@ const route = useRoute()
const invoiceId = route.params.id
const invoice = ref(new Invoice())
-const isLoading = ref(true)
+const items = ref([])
+
+const invoiceIsLoading = ref(true)
+const itemsTableIsLoading = ref(true)
const getInvoice = async () => {
- isLoading.value = true
+ invoiceIsLoading.value = true
+ itemsTableIsLoading.value = true
try {
const r = await axios.get(`/invoice/${invoiceId}`)
invoice.value = r.data.data
+ items.value = r.data.data.Items
} catch (err) {
toast.error('An unhandled exception occoured. Please check logs')
console.error(err)
}
- isLoading.value = false
+ invoiceIsLoading.value = false
+ itemsTableIsLoading.value = false
}
-const refreshItems = () => {
- toast.success("Item was added but what happens after that hasn't been implemented yet!")
+const refreshItems = async () => {
+ items.value = []
+ itemsTableIsLoading.value = true
+
+ try {
+ const res = await axios.get(`/invoice/${invoiceId}/item`)
+ if (res.status === 200) {
+ items.value = res.data.data
+ }
+ } catch (err) {
+ toast.error('An unhandled exception occoured. Please check logs')
+ console.error(err)
+ }
+
+ itemsTableIsLoading.value = false
}
onMounted(() => {
@@ -44,7 +63,13 @@ onMounted(() => {
</script>
<template>
- <invoiceHeader :invoice="invoice" />
- <itemSelector :invoiceId="invoiceId" @added="refreshItems()"/>
- <invoiceItemsTable :invoiceId="invoiceId" />
+ <invoiceHeader
+ :invoice="invoice" />
+ <itemSelector
+ :invoiceId="invoiceId"
+ @added="refreshItems()"/>
+ <invoiceItemsTable
+ :items="items"
+ :isLoading="itemsTableIsLoading"
+ @refresh="refreshItems()" />
</template>