aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/brands_table.vue39
-rw-r--r--src/components/new_brand.vue11
-rw-r--r--src/views/AllBrands.vue38
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>