diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/components/brands_table.vue | 39 | ||||
| -rw-r--r-- | src/components/new_brand.vue | 11 | ||||
| -rw-r--r-- | src/views/AllBrands.vue | 38 |
4 files changed, 52 insertions, 38 deletions
diff --git a/package.json b/package.json index 3990276..73155b0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openbills-web", - "version": "0.1.0", + "version": "0.1.1", "private": false, "scripts": { "dev": "vite", diff --git a/src/components/brands_table.vue b/src/components/brands_table.vue index d81e143..36cafa3 100644 --- a/src/components/brands_table.vue +++ b/src/components/brands_table.vue @@ -1,34 +1,15 @@ <script setup lang="js"> -import { ref, onMounted } from 'vue' +import { ref } from 'vue' import axios from 'axios' import { useToast } from 'vue-toast-notification' +const props = defineProps(["brands", "isLoading"]) +const emit = defineEmits(["refresh"]) + const toast = useToast({ position: 'top-right' }) -const allBrands = ref([]) -const isLoading = ref(false) - -const getAllBrands = async () => { - allBrands.value = [] - isLoading.value = true - - try { - const res = await axios.get('/brand') - if (res.status === 200) { - allBrands.value = res.data.data - } else if (res.status === 204) { - toast.warning('No records found') - } - } catch (err) { - toast.error('An unhandled exception occoured. Please check logs') - console.error(err) - } - - isLoading.value = false -} - const handleDelete = async (id) => { try { const res = await axios.delete(`/brand/${id}`) @@ -36,20 +17,16 @@ const handleDelete = async (id) => { toast.success('Successfully deleted brand') } - getAllBrands() + emit("refresh") } catch (err) { toast.error('An unhandled exception occoured. Please check logs') console.error(err) } } - -onMounted(() => { - getAllBrands() -}) </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> @@ -61,7 +38,7 @@ onMounted(() => { <th scope="col">#</th> <th scope="col">Brand Name</th> <th scope="col" class="table-action-column"> - <button class="btn btn-dark" v-on:click="getAllBrands"> + <button class="btn btn-dark" v-on:click="emit('refresh')"> <i class="bi bi-arrow-clockwise"></i> </button> </th> @@ -69,7 +46,7 @@ onMounted(() => { </thead> <tbody> - <tr v-for="(brand, index) in allBrands"> + <tr v-for="(brand, index) in props.brands" :key="brand['id']"> <td scope="row">{{ index + 1 }}</td> <td>{{ brand.Name }}</td> <td class="table-action-column"> diff --git a/src/components/new_brand.vue b/src/components/new_brand.vue index 8b4893a..77d83da 100644 --- a/src/components/new_brand.vue +++ b/src/components/new_brand.vue @@ -1,8 +1,10 @@ <script setup lang="js"> -import { ref } from 'vue' +import { ref, toRaw } from 'vue' import axios from 'axios' import { useToast } from 'vue-toast-notification' +const emit = defineEmits(["added"]) + const toast = useToast({ position: 'top-right' }) @@ -12,12 +14,13 @@ const brandName = ref('') const submit = async (e) => { e.preventDefault() try { - const res = await axios.post('/brand', { - name: brandName._value + await axios.post('/brand', { + name: toRaw(brandName.value) }) + toast.success('Successfully added a new brand.') + emit("added") brandName.value = '' - // TODO: refresh items list } catch (err) { toast.error('An unhandled exception occoured. Please check logs') console.error(err) diff --git a/src/views/AllBrands.vue b/src/views/AllBrands.vue index d07e316..ad456cd 100644 --- a/src/views/AllBrands.vue +++ b/src/views/AllBrands.vue @@ -1,9 +1,43 @@ <script setup lang="ts"> +import { ref, onMounted } from 'vue' +import { useToast } from 'vue-toast-notification' +import axios from 'axios' + import brandsTable from './../components/brands_table.vue' import newBrand from './../components/new_brand.vue' + +const toast = useToast({ + position: 'top-right' +}) + +const isLoading = ref(false) +const allBrands = ref([]) + +const getAllBrands = async () => { + allBrands.value = [] + isLoading.value = true + + try { + const res = await axios.get('/brand') + if (res.status === 200) { + allBrands.value = res.data.data + } else if (res.status === 204) { + toast.warning('No records found') + } + } catch (err) { + toast.error('An unhandled exception occoured. Please check logs') + console.error(err) + } + + isLoading.value = false +} + +onMounted(() => { + getAllBrands() +}) </script> <template> - <newBrand /> - <brandsTable /> + <newBrand @added="getAllBrands()" /> + <brandsTable :brands="allBrands" @refresh="getAllBrands()" /> </template> |