Update Profile, User and Agent Mangement

src/components/admin/status/agentsUserManagementPage.vue

@@ -0,0 +1,132 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="container">
+    <br />
+    <br />
+    <div class="row">
+      <div class="col-md-12 col-lg-8">
+        <div class="title-box-d">
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Agent Management</h1>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-2 offset-1">
+        <button
+          @click="routerGoTo('/status/userManagementPage')"
+          type="button"
+          class="btn btn-b-n"
+        >Private Users</button>
+      </div>
+      <div class="col-md-2 offset-2">
+        <button type="button" class="btn btn-b-n">Agents</button>
+      </div>
+      <div class="col-md-2 offset-2">
+        <button type="button" class="btn btn-b-n">New Agent</button>
+      </div>
+    </div>
+    <br />
+    <br />
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <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></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <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"
+                @click="Edit(item)"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
+              >Edit</button>
+            </td>
+            <td>
+              <button
+                type="button"
+                class="btn"
+                style="width: 85px; height:40px; color:#60CBEB"
+              >Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <br />
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+import axios from 'axios';
+
+export default {
+  name: 'agentManagementPage',
+  data() {
+    return {};
+  },
+  methods: {
+    ...mapActions('registerIndividual', ['getAgents']),
+    addNewAgent({ commit }) {
+      axios
+        .post('/api/agent')
+        .then(result => commit('saveAgent', result.data))
+        .catch(console.error);
+    },
+    routerGoTo(goTo) {
+      this.$router.push(goTo);
+    },
+  },
+  mounted() {
+    this.getAgents();
+  },
+  computed: {
+    ...mapState('registerIndividual', ['agents']),
+  },
+};
+</script>
+
+
+<style>
+</style>

src/components/admin/status/userManagementPage.vue

@@ -1,8 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
-    <br />
-    <br />
     <br />
     <br />
     <div class="row">
@@ -10,24 +8,50 @@
         <div class="title-box-d">
           <h1 class="title-d" style="text-align:left; font-size: 250%">User Management</h1>
         </div>
-        <br />
       </div>
     </div>
-    <button @click="addNewAgent" type="button" class="btn btn-b-n">Add New Agent</button>
+    <div class="row">
+      <div class="col-md-2 offset-1">
+        <button type="button" class="btn btn-b-n">Private Users</button>
+      </div>
+      <div class="col-md-2 offset-2">
+        <button
+          @click="routerGoTo('/status/agentUserManagementPage')"
+          type="button"
+          class="btn btn-b-n"
+        >Agents</button>
+      </div>
+    </div>
     <br />
     <br />
     <div class="container">
       <table class="table table-bordered">
         <thead>
           <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Surname</th>
-            <th>Cell Number</th>
-            <th>Telephone Number</th>
-            <th>Email</th>
-            <th>Role</th>
-            <th>Reset Password</th>
+            <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></th>
             <th></th>
           </tr>
@@ -60,37 +84,6 @@
               <button type="button" class="btn" style="margin:2px; color: #60CBEB">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"
-                @click="Edit(item)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Edit</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                class="btn"
-                style="width: 85px; height:40px; color:#60CBEB"
-              >Delete</button>
-            </td>
-          </tr>
         </tbody>
       </table>
     </div>
@@ -99,7 +92,6 @@
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
-import axios from 'axios';
 
 export default {
   name: 'userManagementPage',
@@ -107,20 +99,16 @@ export default {
     return {};
   },
   methods: {
-    ...mapActions('registerIndividual', ['getIndividuals', 'getAgents']),
-    addNewAgent({ commit }) {
-      axios
-        .post('/api/agent')
-        .then(result => commit('saveAgent', result.data))
-        .catch(console.error);
+    ...mapActions('registerIndividual', ['getIndividuals']),
+    routerGoTo(goTo) {
+      this.$router.push(goTo);
     },
   },
   mounted() {
     this.getIndividuals();
-    this.getAgents();
   },
   computed: {
-    ...mapState('registerIndividual', ['individuals', 'agents']),
+    ...mapState('registerIndividual', ['individuals']),
   },
 };
 </script>

src/components/shared/navBar.vue

@@ -166,17 +166,6 @@
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
               </div>
             </li>
-            <li v-if="isLoggedIn">
-              <a
-                class="nav-link"
-                @click="routerGoTo('/user/updateProfileInfo')"
-                id="navbarDropdown"
-                role="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >Update Profile</a>
-            </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">
               <a
                 class="nav-link"
@@ -192,11 +181,10 @@
               <span>
                 <a class="nav-link" @click="logout(routerGoTo('/user/login'))">Logout</a>
               </span>
-              <!-- <span v-else></span> -->
             </li>
             <li>
               <span v-if="isLoggedIn">
-                <a>
+                <a @click="routerGoTo('/user/updateProfileInfo')">
                   Welcome!
                   <br />
                   {{ NAME }}
@@ -204,6 +192,17 @@
               </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>

src/router/index.js

@@ -33,6 +33,7 @@ import tenderWeekAdminPage from '../components/admin/status/tenderWeekAdminPage.
 import userManagementPage from '../components/admin/status/userManagementPage.vue';
 import changeLogPage from '../components/admin/status/changeLogPage.vue';
 import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue';
+import agentManagementPage from '../components/admin/status/agentsUserManagementPage.vue';
 
 import ResortPage from '../components/timeshare/resort/resortPage.vue';
 import UnitPage from '../components/timeshare/resort/unitPage.vue';
@@ -57,197 +58,208 @@ export default new Router({
       y: 0,
     };
   },
-  routes: [{
-    path: '/',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/about/us',
-    name: 'aboutus',
-    component: AboutUs,
-  },
-  {
-    path: '/about/timeshare',
-    name: 'abouttimeshare',
-    component: AboutTimeshare,
-  },
-  {
-    path: '/communication/template',
-    name: 'template',
-    component: TemplatePage,
-  },
-  {
-    path: '/timeshare/sell',
-    name: 'TimeshareSell',
-    component: TimeshareSell,
-  },
-  {
-    path: '/timeshare/buy',
-    name: 'TimeshareBuy',
-    component: TimeshareBuy,
-  },
-  {
-    path: '/timeshare/faq',
-    name: 'TimeshareFAQ',
-    component: TimeshareFAQ,
-  },
-  {
-    path: '/timeshare/myWeeks',
-    name: 'MyWeeks',
-    component: MyWeeksPage,
-  },
-  {
-    path: '/user/login',
-    name: 'Login',
-    component: Login,
-  },
-  {
-    path: '/user/register',
-    name: 'PrivateIndividual',
-    component: PrivateIndividual,
-  },
-  {
-    path: '/user/registeragency',
-    name: 'Agency',
-    component: Agency,
-  },
-  {
-    path: '/property/property/:id',
-    name: 'PropertyPage',
-    component: PropertyPage,
-  },
-  {
-    path: '/property/:propertyUsageType/search',
-    name: 'PropertySearch',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/search',
-    name: 'PropertySearchTab',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/new/:saleType',
-    name: 'PropertyNew',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/new/:propertyUsageType/:saleType',
-    name: 'PropertyNewFromSearch',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/edit/:id/:propType/:saleType',
-    name: 'PropertyEdit',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/admin/list/:by',
-    name: 'PropertyListAdmin',
-    component: PropertyList,
-  },
-  {
-    path: '/propertyTypes/list',
-    name: 'PropertyTypeList',
-    component: PropertyTypeList,
-  },
-  {
-    path: '/propertyType/new',
-    name: 'PropertyTypeNew',
-    component: PropertyType,
-  },
-  {
-    path: '/propertyType/:id',
-    name: 'PropertyTypeEdit',
-    component: PropertyType,
-  },
-  {
-    path: '/userDefinedGroups/list',
-    name: 'UserDefinedGroupsList',
-    component: UserDefinedGroups,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup/:id',
-    name: 'UserDefinedGroupEdit',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup',
-    name: 'UserDefinedGroupNew',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/status/list',
-    name: 'StatusList',
-    component: Status,
-  },
-  {
-    path: '/status/timeshareAdmin',
-    name: 'TimeshareAdmin',
-    component: timeshareAdminPage,
-  },
-  {
-    path: '/status/tenderWeekAdmin',
-    name: 'TenderWeekAdmin',
-    component: tenderWeekAdminPage,
-  },
-  {
-    path: '/status/userManagementPage',
-    name: 'userManagementPage',
-    component: userManagementPage,
-  },
-  {
-    path: '/status/changeLogPage',
-    name: 'changeLogPage',
-    component: changeLogPage,
-  },
-  {
-    path: '/unitConfiguration/list',
-    name: 'UnitConfiguration',
-    component: UnitConfiguration,
-  },
-  {
-    path: '/contactus',
-    name: 'ContactUs',
-    component: ContactUs,
-  },
-  {
-    path: '/privacypolicy',
-    name: 'PrivacyPolicy',
-    component: PrivacyPolicy,
-  },
-  {
-    path: '/resort/:resortCode',
-    name: 'ResortPage',
-    component: ResortPage,
-    props: true,
-  },
-  {
-    path: '/resort/:resortCode/:weekId',
-    name: 'UnitPage',
-    component: UnitPage,
-    props: true,
-  },
-  {
-    path: '/MakeOffer',
-    name: 'MakeOffer',
-    component: MakeOffer,
-  },
-  {
-    path: '/Offers',
-    name: 'Offers',
-    component: Offer,
-  },
-  {
-    path: '/timeshare/search',
-    name: 'TimeshareSearch',
-    component: TimeshareSearch,
-  },
-  {
-    path: '/searchLog',
-    name: 'SearchLog',
-    component: searchLog,
-  },
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: HomePage,
+    },
+    {
+      path: '/about/us',
+      name: 'aboutus',
+      component: AboutUs,
+    },
+    {
+      path: '/about/timeshare',
+      name: 'abouttimeshare',
+      component: AboutTimeshare,
+    },
+    {
+      path: '/communication/template',
+      name: 'template',
+      component: TemplatePage,
+    },
+    {
+      path: '/timeshare/sell',
+      name: 'TimeshareSell',
+      component: TimeshareSell,
+    },
+    {
+      path: '/timeshare/buy',
+      name: 'TimeshareBuy',
+      component: TimeshareBuy,
+    },
+    {
+      path: '/timeshare/faq',
+      name: 'TimeshareFAQ',
+      component: TimeshareFAQ,
+    },
+    {
+      path: '/timeshare/myWeeks',
+      name: 'MyWeeks',
+      component: MyWeeksPage,
+    },
+    {
+      path: '/user/login',
+      name: 'Login',
+      component: Login,
+    },
+    {
+      path: '/user/updateProfileInfo',
+      name: 'UpdateInfo',
+      component: UpdateInfo,
+    },
+    {
+      path: '/user/register',
+      name: 'PrivateIndividual',
+      component: PrivateIndividual,
+    },
+    {
+      path: '/user/registeragency',
+      name: 'Agency',
+      component: Agency,
+    },
+    {
+      path: '/property/property/:id',
+      name: 'PropertyPage',
+      component: PropertyPage,
+    },
+    {
+      path: '/property/:propertyUsageType/search',
+      name: 'PropertySearch',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/search',
+      name: 'PropertySearchTab',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/new/:saleType',
+      name: 'PropertyNew',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/new/:propertyUsageType/:saleType',
+      name: 'PropertyNewFromSearch',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/edit/:id/:propType/:saleType',
+      name: 'PropertyEdit',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/admin/list/:by',
+      name: 'PropertyListAdmin',
+      component: PropertyList,
+    },
+    {
+      path: '/propertyTypes/list',
+      name: 'PropertyTypeList',
+      component: PropertyTypeList,
+    },
+    {
+      path: '/propertyType/new',
+      name: 'PropertyTypeNew',
+      component: PropertyType,
+    },
+    {
+      path: '/propertyType/:id',
+      name: 'PropertyTypeEdit',
+      component: PropertyType,
+    },
+    {
+      path: '/userDefinedGroups/list',
+      name: 'UserDefinedGroupsList',
+      component: UserDefinedGroups,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup/:id',
+      name: 'UserDefinedGroupEdit',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup',
+      name: 'UserDefinedGroupNew',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/status/list',
+      name: 'StatusList',
+      component: Status,
+    },
+    {
+      path: '/status/timeshareAdmin',
+      name: 'TimeshareAdmin',
+      component: timeshareAdminPage,
+    },
+    {
+      path: '/status/tenderWeekAdmin',
+      name: 'TenderWeekAdmin',
+      component: tenderWeekAdminPage,
+    },
+    {
+      path: '/status/userManagementPage',
+      name: 'userManagementPage',
+      component: userManagementPage,
+    },
+    {
+      path: '/status/agentUserManagementPage',
+      name: 'agentManagementPage',
+      component: agentManagementPage,
+    },
+    {
+      path: '/status/changeLogPage',
+      name: 'changeLogPage',
+      component: changeLogPage,
+    },
+    {
+      path: '/unitConfiguration/list',
+      name: 'UnitConfiguration',
+      component: UnitConfiguration,
+    },
+    {
+      path: '/contactus',
+      name: 'ContactUs',
+      component: ContactUs,
+    },
+    {
+      path: '/privacypolicy',
+      name: 'PrivacyPolicy',
+      component: PrivacyPolicy,
+    },
+    {
+      path: '/resort/:resortCode',
+      name: 'ResortPage',
+      component: ResortPage,
+      props: true,
+    },
+    {
+      path: '/resort/:resortCode/:weekId',
+      name: 'UnitPage',
+      component: UnitPage,
+      props: true,
+    },
+    {
+      path: '/MakeOffer',
+      name: 'MakeOffer',
+      component: MakeOffer,
+    },
+    {
+      path: '/Offers',
+      name: 'Offers',
+      component: Offer,
+    },
+    {
+      path: '/timeshare/search',
+      name: 'TimeshareSearch',
+      component: TimeshareSearch,
+    },
+    {
+      path: '/searchLog',
+      name: 'SearchLog',
+      component: searchLog,
+    },
   ],
 });