fix: fix users view

Author: woothu

src/views/users/User.vue

@@ -10,12 +10,12 @@
             striped
             small
             fixed
-            :items="items($route.params.id)"
+            :items="getUserData($route.params.id)"
             :fields="$options.fields"
           />
         </CCardBody>
         <CCardFooter>
-          <CButton @click="goBack">Back</CButton>
+          <CButton color="primary" @click="goBack">Back</CButton>
         </CCardFooter>
       </CCard>
     </CCol>
@@ -26,25 +26,18 @@
 import usersData from './UsersData'
 export default {
   name: 'User',
-  props: {
-    caption: {
-      type: String,
-      default: 'User id'
-    },
-  },
   fields: [
-    { key: 'key', _style:'width:150px'},
-    { key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
+    { key: 'key', _style: 'width:150px' },
+    { key: 'value' , _style: 'width:150px;' }
   ],
   methods: {
-    items (id) {
-      const user = usersData.find( user => user.id.toString() === id)
+    getUserData (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: key, value: value}})
+      return userDetails.map(([key, value]) => { return { key, value } })
     },
     goBack() {
       this.$router.go(-1)
-      // this.$router.replace({path: '/users'})
     }
   }
 }

src/views/users/Users.vue

@@ -2,28 +2,31 @@
   <CRow>
     <CCol col="12" xl="8">
       <transition name="slide">
-        <CCard header-html="users" body-wrapper>
+        <CCard header-html="Users" body-wrapper>
           <CTable
             hover
             striped
             :items="items"
             :fields="fields"
-            :current-page="currentPage"
-            :per-page="perPage"
+            :items-per-page="perPage"
             @row-clicked="rowClicked"
             :pagination="$options.paginationProps"
+            index-column
+            clickable-rows
           >
-            <td slot="id" slot-scope="data">
-              <strong>{{data.item.id}}</strong>
-            </td>
-            <td slot="name" slot-scope="data">
-              <strong>{{data.item.name}}</strong>
-            </td>
-            <td slot="status" slot-scope="data">
-              <CBadge :color="getBadge(data.item.status)">
-                {{data.item.status}}
-              </CBadge>
-            </td>
+            <template #username="data">
+              <td>
+                <strong>{{data.item.username}}</strong>
+              </td>
+            </template>
+           
+            <template #status="data">
+              <td>
+                <CBadge :color="getBadge(data.item.status)">
+                  {{data.item.status}}
+                </CBadge>
+              </td>
+            </template>
           </CTable>
         </CCard>
       </transition>
@@ -37,22 +40,19 @@ export default {
   name: 'Users',
   data: () => {
     return {
-      items: usersData.filter((user) => user.id < 42),
+      items: usersData,
       fields: [
-        {key: 'id'},
-        {key: 'name'},
-        {key: 'registered'},
-        {key: 'role'},
-        {key: 'status'}
+        { key: 'username', label: 'Name' },
+        { key: 'registered' },
+        { key: 'role' },
+        { key: 'status' }
       ],
-      currentPage: 1,
       perPage: 5,
-      totalRows: 0
     }
   },
   paginationProps: {
     align: 'center',
-    hideDoubleArrows: true,
+    doubleArrows: false,
     previousButtonHtml: 'prev',
     nextButtonHtml: 'next'
   },
@@ -66,11 +66,10 @@ export default {
     userLink (id) {
       return `users/${id.toString()}`
     },
-    rowClicked (item) {
-      const userLink = this.userLink(item.id)
+    rowClicked (item, index) {
+      const userLink = this.userLink(index + 1)
       this.$router.push({path: userLink})
     }
-
   }
 }
 </script>