Amended user management list views

src/components/admin/status/agentsUserManagementPage.vue

       </div>
     </div>
     <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>
-      <div v-if="Delete === true">
-        <alert :text="'Private User removed successfully'" :type="'SUCCESS'" />
-      </div>
-      <br />
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <td colspan="11">
-              <div class="myWell">
-                <h4>Agents</h4>
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <th>
-              <b>ID</b>
-            </th>
-            <th>
-              <b>Name</b>
-            </th>
-            <th>
-              <b>Surname</b>
-            </th>
-            <th>
-              <b>Cell Number</b>
-            </th>
-            <th>
-              <b>Telephone Number</b>
-            </th>
-            <th>
-              <b>Email</b>
-            </th>
-            <th>
-              <b>Role</b>
-            </th>
-            <th>
-              <b>Reset Password</b>
-            </th>
-            <th>
-              <b>Modify</b>
-            </th>
-            <th>
-              <b>Remove</b>
-            </th>
-            <th>
-              <b>Soft Delete</b>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in DisplayItems" :key="i">
-            <td>{{ item.id }}</td>
-            <td>{{ item.name }}</td>
-            <td>{{ item.surname }}</td>
-            <td>{{ item.cellNumber }}</td>
-            <td>{{ item.telephone }}</td>
-            <td>{{ item.email }}</td>
-            <td v-if="item.user">{{ item.user.role }}</td>
-            <td v-else></td>
-            <td>
-              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Reset</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-                @click="routerGoTo('/user/updateProfileInfo')"
-              >Edit</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                @click="Delete(item.id)"
-                class="btn"
-                style="width: 85px; height:40px; color:#60CBEB"
-              >Delete</button>
-            </td>
-            <td>{{ item.isDeleted}}</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>
+      <ListView
+        :items="agents"
+        :showNew="false"
+        :editable="true"
+        :deleteable="true"
+        :showCustomAction="true"
+        :showColumnChooser="false"
+        :CustomActionHeading="'Reset Password'"
+        :displayColumns="columns"
+        :displayHeaders="headers"
+        @onEdit="Edit"
+        @onDelete="Delete"
+        @onResetPassword="PasswordReset"
+      />
     </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';
-import Agency from '../../user/registerAgencySection.vue';
-import alert from '../../shared/alert.vue';
+import { mapState, mapActions } from "vuex";
+import axios from "axios";
+import Agency from "../../user/registerAgencySection.vue";
+import alert from "../../shared/alert.vue";
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'agentManagementPage',
+  name: "agentManagementPage",
   components: {
-    BasePagination,
+    ListView,
     Agency,
-    alert,
+    alert
   },
   props: {
-    delete: Boolean,
+    delete: Boolean
   },
   data() {
     return {
-      sortKey: '',
-      reverse: false,
-      searchItem: '',
-      itemsPerPageList: ItemsPerPageList,
-      visibleItemsPerPageCount: 0,
-      currentPage: 1,
-      item: {},
+      columns: [
+        "id",
+        "name",
+        "surname",
+        "cellNumber",
+        "telephone",
+        "email",
+        "isDeleted"
+      ],
+      headers: ["", "", "", "", "", "", "", "ResetPwd", "Modify", "Remove"],
+      item: {}
     };
   },
   methods: {
-    ...mapActions('register', ['getAgents', 'deleteAgent']),
+    ...mapActions("register", ["getAgents", "deleteAgent"]),
     addNewAgent({ commit }) {
       axios
-        .post('/api/agent')
-        .then(result => commit('saveAgent', result.data))
+        .post("/api/agent")
+        .then(result => commit("saveAgent", result.data))
         .catch(console.error);
     },
     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;
-      }
-    },
-    Delete(id) {
-      this.deleteAgent(id);
+    Edit(item) {
+      this.$router.push({
+        path: "/user/updateProfileInfo",
+        query: { id: item.id }
+      });
     },
+    Delete(item) {
+      this.deleteAgent(item.id);
+    }
   },
   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('register', ['agents', 'removeAgent']),
-
-    SortDirection() {
-      return this.reverse ? 'desc' : 'asc';
-    },
-    PageCount() {
-      return this.visibleItemsPerPageCount !== 0
-        ? Math.ceil(this.FilteredItems.length / this.visibleItemsPerPageCount)
-        : 1;
-    },
-    FilteredItems() {
-      const list = _.filter(this.agents, 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);
-    },
-  },
+    ...mapState("register", ["agents", "removeAgent"])
+  }
 };
 </script>
 
-
-<style>
-</style>
+<style></style>

src/components/admin/status/userManagementPage.vue

       </div>
     </div>
     <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>
-      <div v-if="Delete === true">
-        <alert :text="'Private User removed successfully'" :type="'SUCCESS'" />
-      </div>
-      <br />
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <td colspan="11">
-              <div class="myWell">
-                <h4>Private Users</h4>
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <th>
-              <b>ID</b>
-            </th>
-            <th>
-              <b>Name</b>
-            </th>
-            <th>
-              <b>Surname</b>
-            </th>
-            <th>
-              <b>Cell Number</b>
-            </th>
-            <th>
-              <b>Telephone Number</b>
-            </th>
-            <th>
-              <b>Email</b>
-            </th>
-            <th>
-              <b>Role</b>
-            </th>
-            <th>
-              <b>Reset Password</b>
-            </th>
-            <th>
-              <b>Modify</b>
-            </th>
-            <th>
-              <b>Remove</b>
-            </th>
-            <th>
-              <b>Soft Delete</b>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in DisplayItems" :key="i">
-            <td>{{ item.id }}</td>
-            <td>{{ item.name }}</td>
-            <td>{{ item.surname }}</td>
-            <td>{{ item.cellNumber }}</td>
-            <td>{{ item.telephone }}</td>
-            <td>{{ item.email }}</td>
-            <td v-if="item.user">{{ item.user.role }}</td>
-            <td v-else></td>
-            <td>
-              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Reset</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-                @click="routerGoTo('/user/updateProfileInfo')"
-              >Edit</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                @click="Delete(item.id)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Delete</button>
-            </td>
-            <td>{{ item.isDeleted }}</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>
+      <ListView
+        :items="individuals"
+        :showNew="false"
+        :editable="true"
+        :deleteable="true"
+        :showCustomAction="true"
+        :showColumnChooser="false"
+        :CustomActionHeading="'Reset Password'"
+        :displayColumns="columns"
+        :displayHeaders="headers"
+        @onEdit="Edit"
+        @onDelete="Delete"
+        @onResetPassword="PasswordReset"
+      />
       <br />
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import _ from 'lodash';
-import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
-import BasePagination from '../../shared/basePagination.vue';
-import alert from '../../shared/alert.vue';
+import { mapState, mapActions } from "vuex";
+import alert from "../../shared/alert.vue";
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'userManagementPage',
+  name: "userManagementPage",
   components: {
-    BasePagination,
-    alert,
+    ListView,
+    alert
   },
   data() {
     return {
-      sortKey: '',
-      reverse: false,
-      searchItem: '',
-      itemsPerPageList: ItemsPerPageList,
-      visibleItemsPerPageCount: 0,
-      currentPage: 1,
-      item: {},
+      columns: [
+        "id",
+        "name",
+        "surname",
+        "cellNumber",
+        "telephone",
+        "email",
+        "isDeleted"
+      ],
+      headers: ["", "", "", "", "", "", ""],
+      item: {}
     };
   },
   props: {},
   methods: {
-    ...mapActions('register', ['getIndividuals', 'deleteIndividual']),
+    ...mapActions("register", ["getIndividuals", "deleteIndividual"]),
     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;
-      }
-    },
-    Delete(id) {
-      this.deleteIndividual(id);
+    Edit(item) {
+      this.$router.push({
+        path: "/user/updateProfileInfo",
+        query: { id: item.id }
+      });
     },
+    Delete(item) {
+      this.deleteIndividual(item.id);
+    }
   },
   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('register', ['individuals', 'removeIndividual']),
-
-    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);
-    },
-  },
+    ...mapState("register", ["individuals", "removeIndividual"])
+  }
 };
 </script>
 

src/store/modules/user/authentication.js

-import Vue from 'vue';
-import Vuex from 'vuex';
-import axios from 'axios';
-import log from '../../../assets/Log';
+import Vue from "vue";
+import Vuex from "vuex";
+import axios from "axios";
+import log from "../../../assets/Log";
 
 Vue.use(Vuex);
 export default {
     token: undefined,
     user: undefined,
     person: undefined,
-    agency: undefined,
+    agency: undefined
   },
   mutations: {
     auth_request(state) {
-      state.status = 'loading';
+      state.status = "loading";
     },
     auth_success(state, user) {
-      state.status = 'success';
+      state.status = "success";
       state.token = user.token;
       state.user = user.user;
       state.person = user.person;
       state.agency = user.agency;
     },
     auth_error(state) {
-      state.status = 'error';
+      state.status = "error";
     },
     logout(state) {
       state.status = undefined;
     },
     updateFlag(state) {
       state.flag = true;
-    },
+    }
   },
   getters: {
     authStatus: state => state.status,
     getPerson: () => log.getPerson(),
-    getUser: () => log.getUser(),
+    getUser: () => log.getUser()
   },
   actions: {
     init({ commit }) {
+      console.log(log);
       if (!log.isLoggedIn() && log.tokenExpired) {
         log.clearValues();
       } else log.updateTokenExpiry();
-      commit('runInit', {
-        user: log.getJSONObject('user'),
-        token: log.getJSONObject('token'),
-        person: log.getJSONObject('person'),
-        agency: log.getJSONObject('agency'),
+      commit("runInit", {
+        user: log.getJSONObject("user"),
+        token: log.getJSONObject("token"),
+        person: log.getJSONObject("person"),
+        agency: log.getJSONObject("agency")
       });
     },
     login({ commit }, user) {
       axios({
-        url: '/api/register/authenticate',
+        url: "/api/register/authenticate",
         data: {
           username: user.username,
-          password: user.password,
+          password: user.password
         },
-        method: 'POST',
+        method: "POST"
       })
-        .then((resp) => {
+        .then(resp => {
           log.clearValues();
           log.setValues(resp.data);
 
-          commit('auth_success', resp.data);
+          commit("auth_success", resp.data);
+          console.log(JSON.stringify(resp.data));
         })
-        .catch((err) => {
-          commit('auth_error');
+        .catch(err => {
+          commit("auth_error");
           log.clearValues();
-          commit('auth_error', err.data);
+          commit("auth_error", err.data);
         });
     },
     logout({ commit }) {
       return new Promise(() => {
-        commit('logout');
+        commit("logout");
         log.clearValues();
         delete axios.defaults.headers.common.Authorization;
       });
-    },
-  },
+    }
+  }
 };

src/store/modules/user/register.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
     individuals: [],
     agents: [],
     registerIndividual: {
-      name: '',
-      surname: '',
-      email: '',
-      cellNumber: '',
-      username: '',
-      password: '',
+      name: "",
+      surname: "",
+      email: "",
+      cellNumber: "",
+      username: "",
+      password: ""
     },
     registerAgency: {
-      name: '',
-      eaabeffcNumber: '',
-      companyRegNumber: '',
+      name: "",
+      eaabeffcNumber: "",
+      companyRegNumber: "",
       user: {
-        name: '',
-        surname: '',
-        email: '',
-        cellNumber: '',
-        username: '',
-        password: '',
-      },
-    },
+        name: "",
+        surname: "",
+        email: "",
+        cellNumber: "",
+        username: "",
+        password: "",
+        role: ""
+      }
+    }
   },
   mutations: {
     setIndividual(state, type) {
     },
     updateAgency(state, type) {
       state.registerAgency.find(item => item.id === type.id).eaabeffcNumber = type.eaabeffcNumber;
-      state.registerAgency.find(item => item.id === type.id).companyRegNumber =        type.companyRegNumber;
+      state.registerAgency.find(item => item.id === type.id).companyRegNumber =
+        type.companyRegNumber;
     },
     clearIndividual(state) {
       state.registerIndividual = {
-        name: '',
-        surname: '',
-        email: '',
-        cellNumber: '',
-        username: '',
-        password: '',
+        name: "",
+        surname: "",
+        email: "",
+        cellNumber: "",
+        username: "",
+        password: ""
       };
     },
     clearAgency(state) {
       state.registerAgency = {
-        name: '',
-        eaabeffcNumber: '',
-        companyRegNumber: '',
+        name: "",
+        eaabeffcNumber: "",
+        companyRegNumber: "",
         user: {
-          name: '',
-          surname: '',
-          email: '',
-          cellNumber: '',
-          username: '',
-          password: '',
-        },
+          name: "",
+          surname: "",
+          email: "",
+          cellNumber: "",
+          username: "",
+          password: ""
+        }
       };
     },
     removeIndividual(state, id) {
     },
     removeAgent(state, id) {
       state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
-    },
+    }
   },
   getters: {},
   actions: {
     getIndividuals({ commit }) {
       axios
-        .get('/api/individual')
-        .then(result => commit('setIndividuals', result.data))
+        .get("/api/individual")
+        .then(result => commit("setIndividuals", result.data))
         .catch(console.error);
     },
     getAgents({ commit }) {
       axios
-        .get('/api/agent')
-        .then(result => commit('setAgents', result.data))
+        .get("/api/agent")
+        .then(result => commit("setAgents", result.data))
         .catch(console.error);
     },
     // getAgency({
 
     saveIndividual({ commit }, item) {
       axios
-        .post('/api/register/register', item)
-        .then(result => commit('addIndividual', result.data))
+        .post("/api/register/register", item)
+        .then(result => commit("addIndividual", result.data))
         .catch(console.error);
     },
     saveAgency({ commit }, item) {
       axios
-        .post('/api/register/registeragency', item)
-        .then(result => commit('addAgency', result.data))
+        .post("/api/register/registeragency", item)
+        .then(result => commit("addAgency", result.data))
         .catch(console.error);
     },
     saveAgent({ commit }, item) {
       axios
-        .post('/api/agent', item)
-        .then(result => commit('addAgent', result.data))
+        .post("/api/agent", item)
+        .then(result => commit("addAgent", result.data))
         .catch(console.error);
     },
     // updateIndividual({
     deleteIndividual({ commit }, id) {
       axios
         .delete(`/api/individual/${id}`)
-        .then(result => commit('removeIndividual', id))
+        .then(result => commit("removeIndividual", id))
         .catch(console.error);
     },
     deleteAgent({ commit }, id) {
       axios
         .delete(`/api/agent/${id}`)
-        .then(result => commit('removeAgent', id))
+        .then(result => commit("removeAgent", id))
         .catch(console.error);
-    },
+    }
     // deleteAgency({
     //   commit,
     // }, id) {
     //     .then(result => commit('removeAgency', id))
     //     .catch(console.error);
     // },
-  },
+  }
 };