Added delete functionality and started login

Author: rafaelromon

package.json

@@ -1,9 +1,8 @@
 {
-  "name": "vuestic-admin",
-  "version": "2.0.0",
+  "name": "gamehoarder-admin",
+  "version": "0.0.1",
   "private": false,
-  "description": "Vue.js admin template",
-  "author": "smartapant <smartapant@gmail.com>",
+  "description": "Vue.js admin page for ",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/app/main.js

@@ -15,6 +15,7 @@ import VueClipboard from 'vue-clipboard2'
 import VeeValidate from 'vee-validate'
 
 import '../metrics'
+import Axios from 'axios'
 
 // NOTE: workaround for VeeValidate + vuetable-2
 Vue.use(VeeValidate, { fieldsBagName: 'formFields' })
@@ -48,3 +49,9 @@ new Vue({
   store,
   render: h => h(App),
 })
+
+Vue.prototype.$http = Axios
+const token = localStorage.getItem('token')
+if (token) {
+  Vue.prototype.$http.defaults.headers.common['Authorization'] = token
+}

src/components/admin/app-sidebar/NavigationRoutes.js

@@ -4,37 +4,12 @@ export const navigationRoutes = {
     displayName: 'navigationRoutes.home',
   },
   routes: [
-    {
-      name: 'dashboard',
-      displayName: 'menu.dashboard',
-      meta: {
-        iconClass: 'vuestic-iconset-dashboard',
-      },
-    },
     {
       name: 'user-table',
       displayName: 'menu.dataTables',
       meta: {
         iconClass: 'vuestic-iconset-tables',
       },
     },
-    {
-      name: 'pages',
-      displayName: 'menu.pages',
-      meta: {
-        iconClass: 'vuestic-iconset-files',
-      },
-      disabled: true,
-      children: [
-        {
-          name: 'login',
-          displayName: 'Login/Signup',
-        },
-        {
-          name: '404-pages',
-          displayName: '404 Pages',
-        },
-      ],
-    },
   ],
 }

src/components/auth/login/Login.vue

@@ -1,11 +1,9 @@
 <template>
 <form @submit.prevent="onsubmit">
   <va-input
-    v-model="email"
-    type="email"
-    :label="$t('auth.email')"
-    :error="!!emailErrors.length"
-    :error-messages="emailErrors"
+    v-model="username"
+    type="text"
+    :label="$t('username')"
   />
 
   <va-input
@@ -27,7 +25,7 @@ export default {
   name: 'login',
   data () {
     return {
-      email: '',
+      username: '',
       password: '',
       keepLoggedIn: false,
       emailErrors: [],
@@ -41,12 +39,32 @@ export default {
   },
   methods: {
     onsubmit () {
-      this.emailErrors = this.email ? [] : ['Email is required']
       this.passwordErrors = this.password ? [] : ['Password is required']
       if (!this.formReady) {
         return
       }
-      this.$router.push({ name: 'dashboard' })
+
+      this.$http.post('http://localhost:8000/en/api/login', { username: this.username, password: this.password })
+        .then(res => {
+          if (res.data.token) {
+            this.loginSuccessful(res)
+          }
+        }).catch(() => {
+          this.loginFailed()
+        })
+    },
+    loginSuccessful (req) {
+      if (!req.data.token) {
+        this.loginFailed()
+        return
+      }
+      localStorage.setItem('token', req.data.token)
+      this.error = false
+      this.$router.replace(this.$route.query.redirect || '/')
+    },
+    loginFailed () {
+      this.error = 'Login failed!'
+      localStorage.removeItem('token')
     },
   },
 }

src/components/data-tables/DataTables.vue

@@ -1,29 +1,35 @@
 <template>
-  <va-card :title="$t('tables.serverSidePagination')">
+  <va-card :title="$t('Users')" :key="tableKey"> <!-- TODO should be update when something is deleted -->
     <va-data-table
       :fields="fields"
       :data="users"
-      :loading="loading"
-      @page-selected="readItems"
-      api-mode
+      :per-page="10"
     >
-      <template slot="avatar" slot-scope="props">
-        <img :src="props.rowData.avatar" class="data-table-server-pagination---avatar">
+      <template slot="actions" slot-scope="props">
+
+        <va-popover :message="`${$t('tables.edit')} ${props.rowData.username}`" placement="top">
+          <router-link :to="{ name: 'change group', params: {username} }">
+            <va-button flat small color="gray" icon="fa fa-pencil"/>
+          </router-link>
+        </va-popover>
+
+        <va-popover :message="`${$t('tables.delete')} ${props.rowData.username}`" placement="top">
+          <va-button flat small color="gray" icon="fa fa-trash" v-on:click="deleteUser(props.rowData.username)"/>
+        </va-popover>
       </template>
     </va-data-table>
   </va-card>
 </template>
 
 <script>
+
 import axios from 'axios'
 
 export default {
   data () {
     return {
-      perPage: 3,
-      totalPages: 0,
       users: [],
-      loading: false,
+      tableKey: 1,
     }
   },
   computed: {
@@ -39,6 +45,9 @@ export default {
       }, {
         name: 'groups__name',
         title: 'groups',
+      }, {
+        name: '__slot:actions',
+        dataClass: 'text-right',
       }]
     },
   },
@@ -47,22 +56,23 @@ export default {
   },
   methods: {
     readItems () {
-      this.loading = true
-
-      axios.get('http://192.168.0.4:8000/en/api/users')
+      this.$http.get('http://localhost:8000/en/api/users')
         .then(response => {
-          this.users = response.data
-          this.loading = false
+          this.users = response.data.data
+          console.log(this.users)
         })
     },
+
+    deleteUser: function (username) {
+      this.$http.post('http://localhost:8000/en/api/users/delete', { username: username })
+
+      alert(username + ' deleted')
+      this.readItems()
+      this.tableKey += 1
+    },
   },
 }
 </script>
 
 <style lang="scss">
-  .data-table-server-pagination---avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
 </style>

src/components/data-tables/scenarios/DataTableServerPagination.vue

@@ -2,15 +2,11 @@
   <va-card :title="$t('tables.serverSidePagination')">
     <va-data-table
       :fields="fields"
-      :data="items"
+      :data="users"
       :loading="loading"
-      :totalPages="totalPages"
       @page-selected="readItems"
       api-mode
     >
-      <template slot="avatar" slot-scope="props">
-        <img :src="props.rowData.avatar" class="data-table-server-pagination---avatar">
-      </template>
     </va-data-table>
   </va-card>
 </template>
@@ -23,45 +19,36 @@ export default {
     return {
       perPage: 3,
       totalPages: 0,
-      items: [],
+      users: [],
       loading: false,
     }
   },
   computed: {
     fields () {
       return [{
-        name: '__slot:avatar',
-        width: '60px',
-      }, {
-        name: 'first_name',
-        title: this.$t('tables.headings.firstName'),
+        name: 'username',
+        title: 'username',
         width: '20%',
       }, {
-        name: 'last_name',
-        title: this.$t('tables.headings.lastName'),
+        name: 'email',
+        title: 'email',
         width: '20%',
       }, {
-        name: 'email',
-        title: this.$t('tables.headings.email'),
+        name: 'groups__name',
+        title: 'groups',
       }]
     },
   },
   created () {
     this.readItems()
   },
   methods: {
-    readItems (page = 0) {
+    readItems () {
       this.loading = true
 
-      const params = {
-        per_page: this.perPage,
-        page: page,
-      }
-
-      axios.get('https://reqres.in/api/users', { params })
+      axios.get('http://127.0.0.1:8000/en/api/users')
         .then(response => {
-          this.items = response.data.data
-          this.totalPages = response.data.total_pages
+          this.users = response.data
           this.loading = false
         })
     },