update product management

pages/products/index.vue

-<!-- eslint-disable vue/require-v-for-key -->
-<!-- eslint-disable vue/valid-v-slot -->
 <template>
   <div>
     <div>
@@ -43,18 +41,16 @@
                     required
                   />
                 </v-col>
-                <v-col
-                  cols="12"
-                >
-                  <v-treeview
+                <v-col cols="12">
+                  <v-select
                     v-model="category_id"
                     :items="categories"
-                    :selection-type="independent"
-                    :multiple-active="false"
-                    shaped
-                    hoverable
-                    activatable
+                    item-text="name"
                     item-value="id"
+                    menu-props="auto"
+                    label="Select category"
+                    hide-details
+                    single-line
                   />
                 </v-col>
                 <v-col cols="12">
@@ -301,14 +297,15 @@
               <v-col
                 cols="12"
               >
-                <v-treeview
+                <v-select
                   v-model="eCategoryId"
                   :items="categories"
-                  :selection-type="independent"
-                  :multiple-active="false"
-                  shaped
-                  hoverable
-                  activatable
+                  item-text="name"
+                  item-value="id"
+                  menu-props="auto"
+                  label="Select category"
+                  hide-details
+                  single-line
                 />
               </v-col>
               <v-col cols="12">
@@ -389,7 +386,7 @@
                     dark
                     x-small
                     color="red"
-                    @click="removeVariant(index)"
+                    @click="removeVariant(index, variant.id)"
                   >
                     <v-icon dark>
                       mdi-minus
@@ -425,7 +422,7 @@
       <v-data-table
         :headers="headers"
         :items="products"
-        sort-by="calories"
+        sort-by="created_at"
         class="elevation-1"
       >
         <template #top>
@@ -435,6 +432,9 @@
             <v-spacer />
           </v-toolbar>
         </template>
+        <template #[`item.index`]="{ index }">
+          {{ index + 1 }}
+        </template>
         <template #[`item.actions`]="{ item }">
           <v-icon :id="item.id" small @click="editProduct(item)">
             mdi-pencil
@@ -464,7 +464,7 @@ export default {
     return {
       name: '',
       id: '',
-      category_id: [],
+      category_id: '',
       price: '',
       stock: '',
       description: '',
@@ -486,13 +486,13 @@ export default {
       options: [],
       headers: [
         {
-          text: 'Name',
+          text: '#',
           align: 'start',
           sortable: false,
-          value: 'name'
+          value: 'index'
         },
-        { text: 'id', value: 'id' },
-        { text: 'category ID', value: 'category_id' },
+        { text: 'name', value: 'name' },
+        { text: 'category', value: 'category.name' },
         { text: 'price', value: 'price', sortable: false },
         { text: 'description', value: 'description' },
         { text: 'stock', value: 'stock' },
@@ -530,7 +530,7 @@ export default {
       ],
       eId: '',
       eName: '',
-      eCategoryId: [],
+      eCategoryId: '',
       ePrice: '',
       eDescription: '',
       eStock: '',
@@ -587,7 +587,7 @@ export default {
       this.images = []
       this.products = []
       this.product = []
-      this.categories = []
+      this.categories = ''
       this.sName = ''
       this.sCategoryId = ''
       this.sPrice = ''
@@ -599,7 +599,6 @@ export default {
           color: '',
           size: '',
           quantity: ''
-
         }
       ]
     },
@@ -686,7 +685,7 @@ export default {
           ,
           {
             headers: {
-              'Content-Type': 'application/json; multipart/form-data ',
+              'Content-Type': 'multipart/form-data ',
               Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
               Accept: 'application/json; multipart/form-data'
             }
@@ -706,6 +705,7 @@ export default {
             duration: 3000
           })
         })
+      this.getProducts()
     },
     deleteProduct (ID, index) {
       const self = this
@@ -803,6 +803,7 @@ export default {
             this.editedItem = response.data.data
             Object.assign(this.products[currentPostIndex], this.editedItem)
           })
+        this.getProducts()
       } catch (error) {
         console.log(error)
       }
@@ -824,18 +825,32 @@ export default {
     remove (index) {
       this.variants.splice(index, 1)
     },
-    removeVariant (index) {
+    removeVariant (index, id = null) {
+      if (confirm('Do you really want to delete?')) {
+        const self = this
+        if (id !== null) {
+          try {
+            this.$axios.post(`/products/delete-variant/${id}`,
+              {
+                headers: {
+                  Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+                }
+              }
+            ).then((response) => {
+              self.$toast.success('Remove variant successfully!', {
+                duration: 3000
+              })
+            })
+            this.getProducts()
+          } catch (error) {
+            console.log(error)
+          }
+        }
         this.eVariants.splice(index, 1)
+      }
     },
     seeVariant () {
       console.log(this.variants)
-    },
-    fetchCategories (item) {
-      return this.$axios
-        .get('/categories/')
-        .then(res => res.json())
-        .then(json => (item.children.push(...json)))
-        .catch(err => console.warn(err))
     }
   }
 }