From ae45ad12a5840348550078cb62042e813a3492b5 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Sun, 3 Dec 2023 22:32:59 +0530
Subject: updating brands table upon addition/deletion

---
 src/components/brands_table.vue | 39 ++++++++-------------------------------
 1 file changed, 8 insertions(+), 31 deletions(-)

(limited to 'src/components/brands_table.vue')

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">
-- 
cgit v1.2.3