feat: Users: add query param for current page, refactor code

Author: woothu

src/router/index.js

@@ -111,21 +111,28 @@ function configRoutes () {
         },
         {
           path: 'users',
-          meta: { label: 'Users'},
+          meta: {
+            label: 'Users'
+          },
           component: {
-            render (c) { return c('router-view') }
+            render(c) {
+              return c('router-view')
+            }
           },
           children: [
             {
               path: '',
-              component: Users,
+              name: 'Users',
+              component: Users
             },
             {
               path: ':id',
-              meta: { label: 'User Details'},
+              meta: {
+                label: 'User Details'
+              },
               name: 'User',
-              component: User,
-            },
+              component: User
+            }
           ]
         },
         {

src/views/users/User.vue

@@ -10,8 +10,8 @@
             striped
             small
             fixed
-            :items="getUserData($route.params.id)"
-            :fields="$options.fields"
+            :items="visibleData"
+            :fields="fields"
           />
         </CCardBody>
         <CCardFooter>
@@ -26,16 +26,28 @@
 import usersData from './UsersData'
 export default {
   name: 'User',
-  fields: [
-    { key: 'key', _style: 'width:150px' },
-    { key: 'value' , _style: 'width:150px;' }
-  ],
-  methods: {
-    getUserData (id) {
+  computed: {
+    fields () {
+      return [
+        { 
+          key: 'key', 
+          label: this.userData.filter(param => param.key === 'username')[0].value,
+          _style: 'width:150px'
+        },
+        { key: 'value', label: '', _style: 'width:150px;' }
+      ]
+    },
+    userData () {
+      const id = this.$route.params.id
       const user = usersData.find((user, index) => index + 1 == id)
       const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
       return userDetails.map(([key, value]) => { return { key, value } })
     },
+    visibleData () {
+      return this.userData.filter(param => param.key !== 'username')
+    }
+  },
+  methods: {
     goBack() {
       this.$router.go(-1)
     }

src/views/users/Users.vue

@@ -12,18 +12,11 @@
               striped
               :items="items"
               :fields="fields"
-              :items-per-page="perPage"
-              @row-clicked="rowClicked"
-              :pagination="$options.paginationProps"
-              index-column
+              :items-per-page="5"
               clickable-rows
+              :active-page="activePage"
+              @row-clicked="rowClicked"
             >
-              <template #username="data">
-                <td>
-                  <strong>{{data.item.username}}</strong>
-                </td>
-              </template>
-            
               <template #status="data">
                 <td>
                   <CBadge :color="getBadge(data.item.status)">
@@ -32,6 +25,13 @@
                 </td>
               </template>
             </CDataTable>
+            <CPagination
+              align="center"
+              :double-arrows="false"
+              :active-page="activePage"
+              :pages="5"
+              @update:activePage="pageChange"
+            />
           </CCardBody>
         </CCard>
       </transition>
@@ -43,37 +43,43 @@
 import usersData from './UsersData'
 export default {
   name: 'Users',
-  data: () => {
+  data () {
     return {
       items: usersData,
       fields: [
-        { key: 'username', label: 'Name' },
+        { key: 'username', label: 'Name', _classes: 'font-weight-bold' },
         { key: 'registered' },
         { key: 'role' },
         { key: 'status' }
       ],
-      perPage: 5,
+      activePage: 1
     }
   },
-  paginationProps: {
-    align: 'center',
-    doubleArrows: false,
-    previousButtonHtml: 'prev',
-    nextButtonHtml: 'next'
+  watch: {
+    $route: {
+      immediate: true,
+      handler (route) {
+        if (route.query && route.query.page) {
+          this.activePage = Number(route.query.page)
+        }
+      }
+    }
   },
   methods: {
     getBadge (status) {
-      return status === 'Active' ? 'success'
-        : status === 'Inactive' ? 'secondary'
-          : status === 'Pending' ? 'warning'
-            : status === 'Banned' ? 'danger' : 'primary'
-    },
-    userLink (id) {
-      return `users/${id.toString()}`
+      switch (status) {
+        case 'Active': return 'success'
+        case 'Inactive': return 'secondary'
+        case 'Pending': return 'warning'
+        case 'Banned': return 'danger'
+        default: 'primary'
+      }
     },
     rowClicked (item, index) {
-      const userLink = this.userLink(index + 1)
-      this.$router.push({path: userLink})
+      this.$router.push({path: `users/${index + 1}`})
+    },
+    pageChange (val) {
+      this.$router.push({ query: { page: val }})
     }
   }
 }