Merge branch 'feature/update-product-UI' into 'feature/UI-vuetify'

Feature/update product ui

See merge request !16

pages/index.vue

@@ -78,6 +78,7 @@
 
 <script>
 export default {
-  name: 'IndexPage'
+  name: 'IndexPage',
+  middleware: ['web']
 }
 </script>

pages/login.vue

@@ -126,8 +126,8 @@ export default {
           return response.json()
         })
         console.log(resp.status)
-        localStorage.setItem('token', resp.data.bearer_token)
-        this.$auth.$storage.setUniversal('token', resp.data.bearer_token)
+        localStorage.setItem('token', 'Bearer ' + resp.data.bearer_token)
+        this.$auth.$storage.setUniversal('token', 'Bearer ' + resp.data.bearer_token)
         this.$auth.$storage.setUniversal('userName', resp.data.name)
         this.$auth.$storage.setUniversal('loggedIn', 'true')
         if (resp.status == 'success') {

pages/products/index.vue

-<!-- eslint-disable vue/require-v-for-key -->
-<!-- eslint-disable vue/valid-v-slot -->
 <template>
   <div>
     <div>
@@ -43,15 +41,16 @@
                     required
                   />
                 </v-col>
-                <v-col
-                  cols="12"
-                >
+                <v-col cols="12">
                   <v-select
                     v-model="category_id"
                     :items="categories"
                     item-text="name"
                     item-value="id"
-                    label="Category"
+                    menu-props="auto"
+                    label="Select category"
+                    hide-details
+                    single-line
                   />
                 </v-col>
                 <v-col cols="12">
@@ -302,7 +301,10 @@
                   :items="categories"
                   item-text="name"
                   item-value="id"
-                  label="Category"
+                  menu-props="auto"
+                  label="Select category"
+                  hide-details
+                  single-line
                 />
               </v-col>
               <v-col cols="12">
@@ -384,7 +386,7 @@
                     dark
                     x-small
                     color="red"
-                    @click="removeVariant(index)"
+                    @click="removeVariant(index, variant.id)"
                   >
                     <v-icon dark>
                       mdi-minus
@@ -416,12 +418,11 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <!-- table -->
     <div>
       <v-data-table
         :headers="headers"
         :items="products"
-        sort-by="calories"
+        sort-by="created_at"
         class="elevation-1"
       >
         <template #top>
@@ -431,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
@@ -460,7 +464,7 @@ export default {
     return {
       name: '',
       id: '',
-      category_id: null,
+      category_id: '',
       price: '',
       stock: '',
       description: '',
@@ -483,13 +487,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' },
@@ -584,7 +588,7 @@ export default {
       this.images = []
       this.products = []
       this.product = []
-      this.categories = []
+      this.categories = ''
       this.sName = ''
       this.sCategoryId = ''
       this.sPrice = ''
@@ -596,7 +600,6 @@ export default {
           color: '',
           size: '',
           quantity: ''
-
         }
       ]
     },
@@ -703,6 +706,7 @@ export default {
             duration: 3000
           })
         })
+      this.getProducts()
     },
     deleteProduct (ID, index) {
       const self = this
@@ -768,17 +772,19 @@ export default {
       fd.append('price', this.ePrice)
       fd.append('category_id', this.eCategoryId)
       fd.append('description', this.eDescription)
-      if (this.eVariants) {
       for (let i = 0; i < this.eVariants.length; i++) {
+        if (typeof this.eVariants[i].id !== 'undefined') {
           fd.append(`variants[${i}][id]`, this.eVariants[i].id)
+        }
         fd.append(`variants[${i}][color]`, this.eVariants[i].color)
         fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity)
         fd.append(`variants[${i}][size]`, this.eVariants[i].size)
       }
-      }
+      if (this.eImages) {
         for (let j = 0; j < this.eImages.length; j++) {
           fd.append(`images[${j}]`, this.eImages[j])
         }
+      }
       const currentPostIndex = this.editedIndex
       try {
         this.$axios
@@ -798,6 +804,7 @@ export default {
             this.editedItem = response.data.data
             Object.assign(this.products[currentPostIndex], this.editedItem)
           })
+        this.getProducts()
       } catch (error) {
         console.log(error)
       }
@@ -819,8 +826,29 @@ 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)