Merge branch 'feature/UI-vuetify' into 'dev'

Feature/ui vuetify

See merge request !19

components/Navbar.vue

@@ -9,28 +9,28 @@
       <v-app-bar-nav-icon />
 
       <v-toolbar-title>
-        <v-btn href="/users">
+        <v-btn to="/users">
           <span>USER</span>
           <v-icon dense>
             mdi-account
           </v-icon>
         </v-btn>
 
-        <v-btn href="/categories">
+        <v-btn to="/categories">
           <span>CATEGORY</span>
           <v-icon dense>
             mdi-heart
           </v-icon>
         </v-btn>
 
-        <v-btn href="/products">
+        <v-btn to="/products">
           <span>PRODUCT</span>
           <v-icon dense>
             mdi-briefcase
           </v-icon>
         </v-btn>
 
-        <v-btn href="/posts">
+        <v-btn to="/posts">
           <span>POST</span>
           <v-icon dense>
             mdi-newspaper
@@ -86,7 +86,7 @@ export default {
         const resp = await this.$axios.post('/logout', {
           token: this.$auth.$storage.getUniversal('token')
         })
-        if (resp.status == '200') {
+        if (resp.status === 200) {
           this.$toast.success('Logout!', {
             duration: 2000
           })

middleware/web.js

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

pages/home.vue

@@ -79,6 +79,6 @@
 <script>
 export default {
   layout: 'admin',
-  middleware: ['web'],  
+  middleware: ['web']
 }
 </script>

pages/login.vue

@@ -109,10 +109,15 @@ export default {
       this.password = ''
       this.checkbox = false
     },
-    async login() {
+    async login () {
       try {
-        const resp = await this.$axios.post('/login',
-          {
+        const resp = await fetch('http://127.0.0.1:8000/api/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+          },
+          body: JSON.stringify({
             email: this.email,
             password: this.password,
             status: this.status
@@ -132,13 +137,13 @@ export default {
           this.$router.push('home')
         }
       } catch (e) {
-        this.$toast.error("Username or Password not valid", {
-          duration: 2000,
-        });
-        this.$router.push("/login");
+        this.$toast.error('Username or Password not valid', {
+          duration: 2000
+        })
+        this.$router.push('/login')
+      }
     }
   }
-}
 }
 </script>
 <style scoped>

pages/users/index.vue

@@ -18,6 +18,7 @@
           </v-card-title>
           <v-card-text>
             <v-container>
+              <v-form ref="formEdit">
                 <v-row>
                   <v-col cols="12" sm="6" md="4">
                     <v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required />
@@ -35,12 +36,12 @@
                     />
                   </v-col>
                 </v-row>
+              </v-form>
             </v-container>
-            <small>*indicates required field</small>
           </v-card-text>
           <v-card-actions>
             <v-spacer />
-            <v-btn color="blue darken-1" text @click="dialog2 = false">
+            <v-btn color="blue darken-1" text @click="dialog2 = false; clearData();">
               Close
             </v-btn>
             <v-btn
@@ -48,8 +49,9 @@
               text
               type="submit"
               @click="
-                dialog2 = false;
+                // dialog2 = false;
                 updateUser();
+                validateForm();
               "
             >
               Save
@@ -85,25 +87,30 @@
       <v-data-table
         :headers="headers"
         :items="users"
+        :search="searchTable"
         sort-by="calories"
         class="elevation-1"
       >
         <template #top>
           <v-toolbar flat>
-            <v-toolbar-title>User Manage</v-toolbar-title>
-            <v-divider class="mx-4" inset vertical />
+            <v-text-field
+              v-model="searchTable"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+              hide-details
+            />
             <v-spacer />
             <v-toolbar-title style="float: right">
               <v-dialog
                 v-model="dialog1"
                 persistent
                 max-width="600px"
-                @submit.prevent="createUser"
                 lazy-validation
               >
                 <template #activator="{ on, attrs }">
                   <v-btn color="primary" dark v-bind="attrs" v-on="on">
-                    New USER
+                    CREATE NEW
                   </v-btn>
                 </template>
                 <v-card>
@@ -112,6 +119,7 @@
                   </v-card-title>
                   <v-card-text>
                     <v-container>
+                      <v-form ref="form">
                         <v-row>
                           <v-col cols="12" sm="6" md="4">
                             <v-text-field
@@ -139,8 +147,8 @@
                             />
                           </v-col>
                         </v-row>
+                      </v-form>
                     </v-container>
-                    <small>*indicates required field</small>
                   </v-card-text>
                   <v-card-actions>
                     <v-spacer />
@@ -152,8 +160,9 @@
                       text
                       type="submit"
                       @click="
-                        dialog1 = false;
+                        // dialog1 = false;
                         createUser();
+                        validateForm()
                       "
                     >
                       Save
@@ -167,10 +176,10 @@
         <template #[`item.index`]="{ index }">
           {{ index + 1 }}
         </template>
-        <template #item.created_at="{ item }">
+        <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 }">
@@ -211,6 +220,8 @@ export default {
   middleware: ['web'],
   data: () => {
     return {
+      searchTable: '',
+      valid: true,
       email: '',
       name: '',
       password: '',
@@ -224,9 +235,8 @@ export default {
           align: 'start',
           value: 'index'
         },
-        { text: 'Name', value: 'name' },
+        { text: 'Name', value: 'name', sortable: false },
         { text: 'email', value: 'email' },
-        { text: 'status', value: 'id', sortable: false },
         { text: 'created', value: 'created_at' },
         { text: 'updated', value: 'updated_at' },
         { text: 'Actions', value: 'actions', sortable: false }
@@ -378,6 +388,7 @@ export default {
           }
         )
         .then((response) => {
+          this.dialog1 = false
           self.$toast.success('User created successfully!', {
             duration: 3000
           })
@@ -385,8 +396,11 @@ export default {
           this.editedItem = response.data.data
           console.log(this.editedItem)
           this.users.push(this.editedItem)
+          this.clearData()
         })
         .catch((errors) => {
+          this.dialog1 = true
+          this.validate()
           console.log(errors.response.data.message)
           this.message = errors.response.data.message
           self.$toast.error('something went wrong while trying create!', {
@@ -443,6 +457,7 @@ export default {
           }
         )
         .then((response) => {
+          this.dialog2 = false
           self.$toast.success('User updated successfully!', {
             duration: 3000
           })
@@ -460,6 +475,21 @@ export default {
     getID (item) {
       this.eID = item.id
       this.editedIndex = this.users.indexOf(item)
+    },
+    clearData () {
+      this.name = ''
+      this.email = ''
+      this.password = ''
+    },
+    async validate (name) {
+      const { valid } = await this.$refs.form.validate()
+
+      if (valid) { alert('Form is valid') }
+    },
+    async validateForm (name) {
+      const { valid } = await this.$refs.formEdit.validate()
+
+      if (valid) { alert('Form is valid') }
     }
   }
 }

plugins/axios.js

@@ -12,6 +12,13 @@ export default function ({ $axios }, inject, redirect) {
     }
   })
 
+  $axios.onError((error) => {
+    const code = parseInt(error.response && error.response.status)
+    if (code === 403) {
+      redirect('/login')
+    }
+  })
+
   const api = $axios.create({
     headers: {
       common: {