fix: fix user view routing, refactor users view

Author: woothu

Diff for: src/views/users/User.vue

@@ -26,6 +26,16 @@
 import usersData from './UsersData'
 export default {
   name: 'User',
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.usersOpened = from.fullPath.includes('users')
+    })
+  },
+  data () {
+    return {
+      usersOpened: null
+    }
+  },
   computed: {
     fields () {
       return [
@@ -48,7 +58,7 @@ export default {
   },
   methods: {
     goBack() {
-      this.$router.go(-1)
+      this.usersOpened ? this.$router.go(-1) : this.$router.push({path: '/users'})
     }
   }
 }

Diff for: src/views/users/Users.vue

@@ -1,40 +1,33 @@
 <template>
   <CRow>
     <CCol col="12" xl="8">
-      <transition name="slide">
-        <CCard>
-          <CCardHeader>
-            Users
-          </CCardHeader>
-          <CCardBody>
-            <CDataTable
-              hover
-              striped
-              :items="items"
-              :fields="fields"
-              :items-per-page="5"
-              clickable-rows
-              :active-page="activePage"
-              @row-clicked="rowClicked"
-            >
-              <template #status="data">
-                <td>
-                  <CBadge :color="getBadge(data.item.status)">
-                    {{data.item.status}}
-                  </CBadge>
-                </td>
-              </template>
-            </CDataTable>
-            <CPagination
-              align="center"
-              :double-arrows="false"
-              :active-page="activePage"
-              :pages="5"
-              @update:activePage="pageChange"
-            />
-          </CCardBody>
-        </CCard>
-      </transition>
+      <CCard>
+        <CCardHeader>
+          Users
+        </CCardHeader>
+        <CCardBody>
+          <CDataTable
+            hover
+            striped
+            :items="items"
+            :fields="fields"
+            :items-per-page="5"
+            clickable-rows
+            :active-page="activePage"
+            @row-clicked="rowClicked"
+            :pagination="{ doubleArrows: false, align: center}"
+            @page-change="pageChange"
+          >
+            <template #status="data">
+              <td>
+                <CBadge :color="getBadge(data.item.status)">
+                  {{data.item.status}}
+                </CBadge>
+              </td>
+            </template>
+          </CDataTable>
+        </CCardBody>
+      </CCard>
     </CCol>
   </CRow>
 </template>

Diff for: tests/unit/views/users/__snapshots__/User.spec.js.snap

@@ -22,45 +22,45 @@ exports[`User.vue renders correctly 1`] = `
         class="card-body"
       >
         <div
-          data-v-31168812=""
+          data-v-ceef3348=""
           small=""
         >
           <!---->
           <div
             class="position-relative table-responsive"
-            data-v-31168812=""
+            data-v-ceef3348=""
           >
             <table
               class="table table-striped b-table-fixed"
-              data-v-31168812=""
+              data-v-ceef3348=""
             >
               <thead
-                data-v-31168812=""
+                data-v-ceef3348=""
               >
                 <tr
-                  data-v-31168812=""
+                  data-v-ceef3348=""
                 >
                   <th
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                     style="width: 150px;"
                   >
                     <div
                       class="d-inline"
-                      data-v-31168812=""
+                      data-v-ceef3348=""
                     >
                       Samppa Nori
                     </div>
                     <!---->
                   </th>
                   <th
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                     style="width: 150px;"
                   >
                     <div
                       class="d-inline"
-                      data-v-31168812=""
+                      data-v-ceef3348=""
                     >
                       
                     </div>
@@ -71,54 +71,54 @@ exports[`User.vue renders correctly 1`] = `
               </thead>
               <tbody
                 class="position-relative"
-                data-v-31168812=""
+                data-v-ceef3348=""
               >
                 <tr
-                  data-v-31168812=""
+                  data-v-ceef3348=""
                 >
                   <td
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                   >
                      registered 
                   </td>
                   <td
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                   >
                      2012/01/01 
                   </td>
                 </tr>
                 <!---->
                 <tr
-                  data-v-31168812=""
+                  data-v-ceef3348=""
                 >
                   <td
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                   >
                      role 
                   </td>
                   <td
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                   >
                      Member 
                   </td>
                 </tr>
                 <!---->
                 <tr
-                  data-v-31168812=""
+                  data-v-ceef3348=""
                 >
                   <td
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                   >
                      status 
                   </td>
                   <td
                     class=""
-                    data-v-31168812=""
+                    data-v-ceef3348=""
                   >
                      Active 
                   </td>

Diff for: tests/unit/views/users/__snapshots__/Users.spec.js.snap

@@ -10,13 +10,11 @@ exports[`Users.vue renders correctly 1`] = `
     tag="div"
     xl="8"
   >
-    <ccard-stub
-      name="slide"
-    >
+    <ccard-stub>
       <ccardheader-stub>
         
-          Users
-        
+        Users
+      
       </ccardheader-stub>
        
       <ccardbody-stub>
@@ -28,19 +26,11 @@ exports[`Users.vue renders correctly 1`] = `
           hover="true"
           items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
           itemsperpage="5"
+          pagination="[object Object]"
           responsive="true"
           sortervalue="[object Object]"
           striped="true"
         />
-         
-        <cpagination-stub
-          activepage="1"
-          align="center"
-          arrows="true"
-          dots="true"
-          limit="5"
-          pages="5"
-        />
       </ccardbody-stub>
     </ccard-stub>
   </ccol-stub>