update product ui

pages/products/index.vue

@@ -499,6 +499,15 @@
         <template #[`item.index`]="{ index }">
           {{ index + 1 }}
         </template>
+        <template #[`item.variants`]="{ item }">
+          {{ item.variants_count }}
+        </template>
+        <template #[`item.status`]="{ item }">
+          <v-switch
+            v-model="item.status"
+            @click="switchStatus(item)"
+          />
+        </template>
         <template #[`item.actions`]="{ item }">
           <v-icon :id="item.id" small @click="editProduct(item)">
             mdi-pencil
@@ -534,6 +543,7 @@ export default {
       stock: '',
       description: '',
       images: [],
+      status: '',
       variants: [
         {
           color: '',
@@ -562,6 +572,8 @@ export default {
         { text: 'Category', value: 'category.name' },
         { text: 'Price', value: 'price' },
         { text: 'Stock', value: 'stock' },
+        { text: 'Variants', value: 'variants' },
+        { text: 'Status', value: 'status' },
         { text: 'Actions', value: 'actions', sortable: false }
       ],
       items: [
@@ -870,7 +882,7 @@ export default {
             }
           )
           .then((response) => {
-            self.$toast.success('User updated successfully!', {
+            self.$toast.success('Product updated successfully!', {
               duration: 3000
             })
             console.log(response)
@@ -951,6 +963,30 @@ export default {
     },
     clearImage () {
       this.files.length = 0
+    },
+    switchStatus (item) {
+      const status = item.status ? 1 : 0
+      const self = this
+      const fd = new FormData()
+      fd.append('status', status)
+      try {
+        this.$axios
+          .post(`/products/update-status/${item.id}`,
+            fd, {
+              headers: {
+                Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+              }
+            }
+          )
+          .then((response) => {
+            console.log(response)
+            self.$toast.success('Updated status successfully!', {
+              duration: 3000
+            })
+          })
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }