Added add new agent button on user management screen

src/components/admin/status/userManagementPage.vue

         <br />
       </div>
     </div>
+    <button @click="addNewAgent" type="button" class="btn btn-b-n">Add New Agent</button>
+    <br />
+    <br />
     <div class="container">
       <table class="table table-bordered">
         <thead>
             <th>Telephone Number</th>
             <th>Email</th>
             <th>Role</th>
+            <th>Reset Password</th>
             <th></th>
             <th></th>
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <td colspan="10">
+              <h5>Private Users</h5>
+            </td>
+          </tr>
           <tr v-for="(item, i) in individuals" :key="i">
             <td>{{ item.id }}</td>
             <td>{{ item.name }}</td>
             <td>{{ item.email }}</td>
             <td v-if="item.user">{{ item.user.role }}</td>
             <td v-else></td>
+            <td></td>
+            <td>
+              <button
+                type="button"
+                @click="Edit(item)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Edit</button>
+            </td>
+            <td>
+              <button type="button" class="btn btn-b-n" style="width: 85px; height:40px">Delete</button>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="10">
+              <h5>Agents</h5>
+            </td>
+          </tr>
+          <tr v-for="(item, i) in agents" :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></td>
             <td>
               <button
                 type="button"
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import axios from 'axios';
 
 export default {
   name: 'userManagementPage',
     return {};
   },
   methods: {
-    ...mapActions('registerIndividual', ['getIndividuals']),
+    ...mapActions('registerIndividual', ['getIndividuals', 'getAgents']),
+    addNewAgent({ commit }) {
+      axios
+        .post('/api/agent')
+        .then(result => commit('saveAgent', result.data))
+        .catch(console.error);
+    },
   },
   mounted() {
     this.getIndividuals();
+    this.getAgents();
   },
   computed: {
-    ...mapState('registerIndividual', ['individuals']),
+    ...mapState('registerIndividual', ['individuals', 'agents']),
   },
 };
 </script>

src/components/shared/navBar.vue

 
             <li v-if="showLogout" class="nav-item dropdown">
               <a
-                v-if="showLogout"
                 class="nav-link dropdown-toggle"
                 href="#"
                 id="navbarDropdown"
                 aria-expanded="false"
               >Admin</a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')">Status</a>
                 <a
-                  v-if="showLogout"
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/status/list')"
-                >Status</a>
-                <a
-                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/timeshareAdmin')"
                 >Timeshare Week Admin</a>
                 <a
-                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/tenderWeekAdmin')"
                 >Tender Week Management</a>
                 <a
-                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/unitConfiguration/list')"
                 >Unit Configuration</a>
                 <a
-                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/userManagementPage')"
                 >User Management & Access</a>
                 <a
-                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/changeLogPage')"
                 >Changes Logs</a>
                 <a
-                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/userDefinedGroups/list')"
                 >Property User Defined Groups</a>
                 <a
-                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/propertyTypes/list')"
                 >Property Types</a>

src/store/modules/user/register.js

   namespaced: true,
   state: {
     individuals: [],
+    agents: [],
     registerIndividual: {
       name: '',
       surname: '',
     setIndividuals(state, type) {
       state.individuals = type;
     },
+    setAgents(state, type) {
+      state.agents = type;
+    },
     setAgency(state, type) {
       state.registerAgency = type;
     },
     addAgency(state, type) {
       state.registerAgency = type;
     },
+    addAgent(state, type) {
+      state.registerIndividual = type;
+    },
     updateIndividual(state, type) {
       state.registerIndividual.find(item => item.id === type.id).username = type.username;
       state.registerIndividual.find(item => item.id === type.id).password = type.password;
         .then(result => commit('setIndividuals', result.data))
         .catch(console.error);
     },
+    getAgents({
+      commit,
+    }) {
+      axios
+        .get('/api/agent')
+        .then(result => commit('setAgents', result.data))
+        .catch(console.error);
+    },
     // getAgency({
     //   commit,
     // }, id) {
         .then(result => commit('addAgency', result.data))
         .catch(console.error);
     },
+    saveAgent({
+      commit,
+    }, item) {
+      axios
+        .post('/api/agent', item)
+        .then(result => commit('addAgent', result.data))
+        .catch(console.error);
+    },
     // updateIndividual({
     //   commit,
     // }, item) {