User management access display individual and agent seperately and pagination

src/components/admin/status/agentsUserManagementPage.vue

     <br />
     <br />
     <div class="container">
+      <div class="d-flex justify-content-between">
+        <div class="p-2">
+          <input v-model="searchItem" class="form-control" placeholder="Search ..." />
+        </div>
+      </div>
       <table class="table table-bordered">
         <thead>
           <tr>
         <tbody>
           <tr>
             <td colspan="10">
-              <h5>Agents</h5>
+              <div class="myWell">
+                <h4>Agents</h4>
+              </div>
             </td>
           </tr>
           <tr v-for="(item, i) in agents" :key="i">
           </tr>
         </tbody>
       </table>
+      <div class="d-flex justify-content-between">
+        <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
+        <div class="p-1">
+          <BasePagination
+            :currentPage="currentPage"
+            :pageCount="PageCount"
+            @nextPage="pageChangeHandle('next')"
+            @previousPage="pageChangeHandle('previous')"
+            @loadPage="pageChangeHandle"
+          />
+        </div>
+      </div>
     </div>
     <br />
   </div>
 </template>
+
 <script>
 import { mapState, mapActions } from 'vuex';
 import axios from 'axios';
+import _ from 'lodash';
+import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
+import BasePagination from '../../shared/basePagination.vue';
 
 export default {
   name: 'agentManagementPage',
+  components: {
+    BasePagination,
+  },
   data() {
-    return {};
+    return {
+      sortKey: '',
+      reverse: false,
+      searchItem: '',
+      itemsPerPageList: ItemsPerPageList,
+      visibleItemsPerPageCount: 0,
+      currentPage: 1,
+    };
   },
   methods: {
     ...mapActions('registerIndividual', ['getAgents']),
+
     addNewAgent({ commit }) {
       axios
         .post('/api/agent')
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
+    sortBy(sortKey) {
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
+      this.sortKey = sortKey;
+    },
+    async pageChangeHandle(value) {
+      console.log(value);
+      switch (value) {
+        case 'next':
+          this.currentPage += 1;
+          break;
+        case 'previous':
+          this.currentPage -= 1;
+          break;
+        default:
+          this.currentPage = value;
+      }
+    },
+    onChangeItemsPerPage() {
+      if (this.currentPage !== 1) {
+        this.currentPage = 1;
+      }
+    },
   },
   mounted() {
     this.getAgents();
+    try {
+      // to assign initial value to itemsPerPage
+      if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
+        const [startItem] = this.itemsPerPageList;
+        this.visibleItemsPerPageCount = startItem;
+      }
+    } catch (error) {
+      throw error;
+    }
   },
   computed: {
     ...mapState('registerIndividual', ['agents']),
+
+    SortDirection() {
+      return this.reverse ? 'desc' : 'asc';
+    },
+    PageCount() {
+      return this.visibleItemsPerPageCount !== 0
+        ? Math.ceil(this.FilteredItems.length / this.visibleItemsPerPageCount)
+        : 1;
+    },
+    FilteredItems() {
+      const list = _.filter(this.individuals, item => Object.values(item).some(
+          i => JSON.stringify(i)
+              .toLowerCase()
+              .indexOf(this.searchItem) > -1,
+        ),);
+      return _.orderBy(list, this.sortKey, this.SortDirection);
+    },
+    DisplayItems() {
+      const list = this.FilteredItems;
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      if (endSlice > list.length) {
+        endSlice = list.length;
+      }
+      return list.slice(startSlice, endSlice);
+    },
   },
 };
 </script>

src/components/admin/status/userManagementPage.vue

         >Agents</button>
       </div>
     </div>
-    <br />
-    <br />
     <div class="container">
+      <div class="d-flex justify-content-between">
+        <div class="p-2">
+          <input v-model="searchItem" class="form-control" placeholder="Search ..." />
+        </div>
+      </div>
       <table class="table table-bordered">
         <thead>
           <tr>
         <tbody>
           <tr>
             <td colspan="10">
-              <h5>Private Users</h5>
+              <div class="myWell">
+                <h4>Private Users</h4>
+              </div>
             </td>
           </tr>
-          <tr v-for="(item, i) in individuals" :key="i">
+          <tr v-for="(item, i) in DisplayItems" :key="i">
             <td>{{ item.id }}</td>
             <td>{{ item.name }}</td>
             <td>{{ item.surname }}</td>
           </tr>
         </tbody>
       </table>
+      <div class="d-flex justify-content-between">
+        <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
+        <div class="p-1">
+          <BasePagination
+            :currentPage="currentPage"
+            :pageCount="PageCount"
+            @nextPage="pageChangeHandle('next')"
+            @previousPage="pageChangeHandle('previous')"
+            @loadPage="pageChangeHandle"
+          />
+        </div>
+      </div>
+      <br />
     </div>
-    <br />
   </div>
 </template>
+
 <script>
 import { mapState, mapActions } from 'vuex';
+import _ from 'lodash';
+import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
+import BasePagination from '../../shared/basePagination.vue';
 
 export default {
   name: 'userManagementPage',
+  components: {
+    BasePagination,
+  },
   data() {
-    return {};
+    return {
+      sortKey: '',
+      reverse: false,
+      searchItem: '',
+      itemsPerPageList: ItemsPerPageList,
+      visibleItemsPerPageCount: 0,
+      currentPage: 1,
+    };
   },
   methods: {
     ...mapActions('registerIndividual', ['getIndividuals']),
+
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
+    sortBy(sortKey) {
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
+      this.sortKey = sortKey;
+    },
+    async pageChangeHandle(value) {
+      console.log(value);
+      switch (value) {
+        case 'next':
+          this.currentPage += 1;
+          break;
+        case 'previous':
+          this.currentPage -= 1;
+          break;
+        default:
+          this.currentPage = value;
+      }
+    },
+    onChangeItemsPerPage() {
+      if (this.currentPage !== 1) {
+        this.currentPage = 1;
+      }
+    },
   },
   mounted() {
     this.getIndividuals();
+    try {
+      // to assign initial value to itemsPerPage
+      if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
+        const [startItem] = this.itemsPerPageList;
+        this.visibleItemsPerPageCount = startItem;
+      }
+    } catch (error) {
+      throw error;
+    }
   },
   computed: {
     ...mapState('registerIndividual', ['individuals']),
+
+    SortDirection() {
+      return this.reverse ? 'desc' : 'asc';
+    },
+    PageCount() {
+      return this.visibleItemsPerPageCount !== 0
+        ? Math.ceil(this.FilteredItems.length / this.visibleItemsPerPageCount)
+        : 1;
+    },
+    FilteredItems() {
+      const list = _.filter(this.individuals, item => Object.values(item).some(
+          i => JSON.stringify(i)
+              .toLowerCase()
+              .indexOf(this.searchItem) > -1,
+        ),);
+      return _.orderBy(list, this.sortKey, this.SortDirection);
+    },
+    DisplayItems() {
+      const list = this.FilteredItems;
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      if (endSlice > list.length) {
+        endSlice = list.length;
+      }
+      return list.slice(startSlice, endSlice);
+    },
   },
 };
 </script>

src/components/shared/navBar.vue

               </span>
               <span v-else></span>
             </li>
-            <li class="nav-item dropdown" v-if="!isLoggedIn">
-              <a
-                class="nav-link"
-                @click="routerGoTo('/status/agentUserManagementPage')"
-                id="navbarDropdown"
-                role="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >Test</a>
-            </li>
           </ul>
         </div>
       </div>