updating brands table upon addition/deletion0.1.1

1 files changed, 36 insertions, 2 deletions

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>