3 files changed, 51 insertions, 37 deletions

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>