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