diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/components/brands_table.vue | 2 | ||||
| -rw-r--r-- | src/components/customers_table.vue | 2 | ||||
| -rw-r--r-- | src/components/invoice_items_table.vue | 47 | ||||
| -rw-r--r-- | src/components/items_table.vue | 2 | ||||
| -rw-r--r-- | src/views/EditInvoice.vue | 43 |
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> |