Merge branch 'feature/UI-vuetify' of...

Merge branch 'feature/UI-vuetify' of https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt into feature/UI-vuetify

components/Navbar.vue

+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div>
     <v-toolbar
@@ -10,56 +11,106 @@
       <v-toolbar-title>
         <v-btn href="/users">
           <span>USER</span>
-          <v-icon dense>mdi-account</v-icon>
+          <v-icon dense>
+            mdi-account
+          </v-icon>
         </v-btn>
 
         <v-btn href="/categories">
           <span>CATEGORY</span>
-          <v-icon dense>mdi-heart</v-icon>
+          <v-icon dense>
+            mdi-heart
+          </v-icon>
         </v-btn>
 
         <v-btn href="/products">
           <span>PRODUCT</span>
-          <v-icon dense> mdi-briefcase</v-icon>
+          <v-icon dense>
+            mdi-briefcase
+          </v-icon>
         </v-btn>
 
         <v-btn href="/posts">
           <span>POST</span>
-          <v-icon dense>mdi-newspaper</v-icon>
+          <v-icon dense>
+            mdi-newspaper
+          </v-icon>
         </v-btn>
       </v-toolbar-title>
 
       <v-spacer />
 
-      <v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title>
-
-      <v-btn icon @click="logout">
-        <v-icon>mdi-export</v-icon>
-      </v-btn>
+      <v-toolbar-title class="profile">
+        {{ $auth.$storage.getUniversal("userName") }}
+      </v-toolbar-title>
+      <div class="text-center">
+        <v-menu offset-y>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              icon
+              dark
+              v-bind="attrs"
+              v-on="on"
+            >
+              <v-icon>mdi-menu-down</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item-group
+              color="primary"
+            >
+              <v-list-item
+                @click="logout()"
+              >
+                <v-list-item-icon>
+                  <v-icon>
+                    mdi-logout
+                  </v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>
+                  Logout
+                </v-list-item-title>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-menu>
+      </div>
     </v-toolbar>
   </div>
 </template>
 <script>
-
 export default {
   methods: {
-    logout () {
-      fetch('http://127.0.0.1:8000/api/logout', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          accept: 'application/json'
-        },
-        body: JSON.stringify({
+    async logout () {
+      try {
+        const resp = await this.$axios.post('/logout', {
           token: this.$auth.$storage.getUniversal('token')
         })
-      })
-      localStorage.setItem('token', '')
-      this.$auth.$storage.setUniversal('loggedIn', 'false')
-      this.$auth.$storage.setUniversal('token', '')
-      this.$auth.$storage.setUniversal('userName', '')
-      this.$router.push('/login')
+        if (resp.status === '200') {
+          this.$toast.success('Logout!', {
+            duration: 2000
+          })
+          this.$router.push('/login')
+          localStorage.setItem('token', '')
+          this.$auth.$storage.setUniversal('loggedIn', 'false')
+          this.$auth.$storage.setUniversal('token', '')
+          this.$auth.$storage.setUniversal('userName', '')
+        }
+      } catch (e) {
+        this.$toast.error('ERR !', {
+          duration: 2000
+        })
+      }
     }
   }
 }
 </script>
+<style scoped>
+.v-toolbar--prominent:not(.v-toolbar--bottom) .v-toolbar__title.profile {
+  align-self: baseline;
+  padding-top: 5px;
+}
+.v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
+    margin-right: 15px;
+}
+</style>

middleware/auth.js

-export default function(context) {
-   console.log('[LOG]: middleware is running ...')
-}
\ No newline at end of file
+export default function (context) {
+  console.log('[LOG]: middleware is running ...')
+}

middleware/web.js

-export default ({ redirect }) => {
+export default ({ redirect, store }) => {
   if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) {
     return redirect('/login')
   }

pages/categories/index.vue

@@ -82,6 +82,7 @@
                   <v-text-field
                     v-model="eName"
                     label="Name"
+                    :rules="nameRules"
                     required
                   />
                 </v-col>
@@ -90,6 +91,7 @@
                     v-model="eOrdering"
                     label="Ordering"
                     type="number"
+                    :rules="requiredRules"
                     required
                   />
                 </v-col>
@@ -146,7 +148,7 @@
                 v-model="dialog1"
                 persistent
                 max-width="600px"
-                @submit.prevent="createUser"
+                lazy-validation
               >
                 <template #activator="{ on, attrs }">
                   <v-btn
@@ -173,6 +175,8 @@
                           <v-text-field
                             v-model="name"
                             label="Name"
+                            :rules="nameRules"
+                            lazy-validation
                             required
                           />
                         </v-col>
@@ -181,6 +185,7 @@
                             v-model="ordering"
                             label="Ordering"
                             type="number"
+                            :rules="numberRules"
                             required
                           />
                         </v-col>
@@ -191,12 +196,12 @@
                             item-text="name"
                             item-value="id"
                             label="Parent*"
+                            :rules="requiredRules"
                           />
                         </v-col>
                         <v-col cols="12">
                           <v-file-input
                             v-model="image"
-                            accept="image/*"
                             label="Image"
                             prepend-icon="mdi-camera"
                           />
@@ -282,17 +287,20 @@
             </v-dialog>
           </v-toolbar>
         </template>
-        <template #item.created_at="{ item }">
+        <template #[`item.index`]="{ index }">
+          {{ index + 1 }}
+        </template>
+        <template #[`item.created_at`]="{ item }">
           <span>{{ formatDate(item.created_at) }}</span>
         </template>
-        <template #item.updated_at="{ item }">
+        <template #[`item.updated_at`]="{ item }">
           <span>{{ formatDate(item.updated_at) }}</span>
         </template>
-        <template #item.actions="{ item }">
+        <template #[`item.actions`]="{ item }">
           <v-icon :id="item.id" small @click="dialog2 = true; editCategory(item)">
             mdi-pencil
           </v-icon>
-          <v-icon :id="item.id" small @click="dialogDelete = true;getID(item)">
+          <v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
             mdi-delete
           </v-icon>
           <v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)">
@@ -328,11 +336,12 @@ export default {
       options: [],
       headers: [
         {
-          text: 'Name',
+          text: '#',
           align: 'start',
-          value: 'name',
+          value: 'index',
           groupable: false
         },
+        { text: 'Name', value: 'name', groupable: false },
         { text: 'Odering', value: 'ordering', groupable: false },
         { text: 'Created', value: 'created_at', groupable: false },
         { text: 'Updated', value: 'updated_at', groupable: false },
@@ -374,6 +383,17 @@ export default {
           disabled: false,
           href: '/categories'
         }
+      ],
+      nameRules: [
+        v => !!v || 'Name is required',
+        v => (v && v.length <= 255) || 'Name must be less than 255 characters'
+      ],
+      requiredRules: [
+        v => !!v || 'This field is required'
+      ],
+      numberRules: [
+        v => !!v || 'This field is required',
+        v => v > 0 || 'value must be a positive integer'
       ]
     }
   },
@@ -442,13 +462,11 @@ export default {
       this.$axios
         .get('/categories/', {
           headers: {
-            'Content-Type': 'application/json',
             Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
           }
         })
         .then((response) => {
           this.categories = response.data.data
-          console.log(this.categories)
         })
         .catch(function (error) {
           console.log(error)
@@ -460,13 +478,14 @@ export default {
       fd.append('name', this.name)
       fd.append('ordering', this.ordering)
       fd.append('parent_id', this.parent_id)
-      fd.append('image', this.image)
+      if (this.image != null) {
+        fd.append('image', this.image)
+      }
       this.$axios
         .post('/categories/',
           fd,
           {
             headers: {
-              'Content-Type': 'multipart/form-data',
               Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
             }
           }
@@ -485,6 +504,8 @@ export default {
             duration: 3000
           })
         })
+      this.getCategories()
+      this.clearData()
     },
     deleteCategory () {
       const self = this
@@ -494,7 +515,6 @@ export default {
           .delete(`/categories/${this.eID}`,
             {
               headers: {
-                'Content-Type': 'multipart/form-data',
                 Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
               }
             })
@@ -519,7 +539,7 @@ export default {
       this.eName = item.name
       this.eOrdering = item.ordering
       this.eParentId = item.parent_id
-      this.eImage = item.images
+      this.eImage = item.image
       this.editedIndex = this.categories.indexOf(item)
       console.log(this.eID)
       console.log(this.eImage)
@@ -528,7 +548,7 @@ export default {
       this.eName = item.name
       this.eOrdering = item.ordering
       this.eParentId = item.parent_id
-      this.eImage = item.images
+      this.eImage = item.image
     },
     updateCategory (userID) {
       const self = this
@@ -540,7 +560,7 @@ export default {
       }
       fd.append('name', this.eName)
       fd.append('ordering', this.eOrdering)
-      if (typeof this.eImage !== 'string') {
+      if (typeof this.eImage !== 'string' && this.eImage != null) {
         fd.append('image', this.eImage)
       }
       try {
@@ -549,7 +569,6 @@ export default {
             fd,
             {
               headers: {
-                'Content-Type': 'multipart/form-data',
                 Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
               }
             }
@@ -564,6 +583,13 @@ export default {
       } catch (error) {
         console.log(error)
       }
+    },
+    clearData () {
+      // eslint-disable-next-line no-unused-expressions, no-sequences
+      this.parent_id = '',
+      this.name = '',
+      this.ordering = '',
+      this.image = null
     }
   }
 }
@@ -577,19 +603,19 @@ export default {
   padding-left: 30px !important;
   background-color:  rgba(211, 211, 211, 0.133);
 }
-.depth-1 > td:first-child {
+.depth-1 > td:nth-child(2) {
   padding-left: 30px !important;
 }
-.depth-2 > td:first-child {
-  padding-left: 45px !important;
-}
-.depth-3 > td:first-child {
+.depth-2 > td:nth-child(2) {
   padding-left: 60px !important;
 }
-.depth-4 > td:first-child {
-  padding-left: 75px !important;
-}
-.depth-5 > td:first-child {
+.depth-3 > td:nth-child(2) {
   padding-left: 90px !important;
 }
+.depth-4 > td:nth-child(2) {
+  padding-left: 120px !important;
+}
+.depth-5 > td:nth-child(2) {
+  padding-left: 150px !important;
+}
 </style>

pages/login.vue

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

plugins/axios.js

@@ -15,7 +15,8 @@ export default function ({ $axios }, inject, redirect) {
   const api = $axios.create({
     headers: {
       common: {
-        Accept: 'application/json, text/plain, */*'
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json, text/plain, */*'
       }
     }
   })

plugins/formatTime.js

 import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
 
 Vue.mixin({
   methods: {
@@ -12,6 +14,11 @@ Vue.mixin({
       if (day.length < 2) { day = '0' + day }
 
       return [year, month, day].join('-')
+    },
+    keepToken () {
+      const TOKEN = localStorage.getItem('token')
+      this.$auth.$storage.setUniversal('token', TOKEN)
     }
+
   }
 })

store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export const store = new Vuex.Store({
+  modules: {
+  }
+})