Merge Issues.

README.md

 
 ### Structure
 
-├── index.html
-├── main.js
-├── assets
-│ └── staticData
-│ ├── alertTypes.js
-│ ├── itemsPerPage.js
-│ ├── maritalStatus.js
-│  
-├── components
-│ ├── App.vue
-│ └── ...
-└── store
-├── index.js # where we assemble modules and export the store
-├── actions.js # root actions
-├── mutations.js # root mutations
-└── modules
-├── cart.js # cart module
-└── products.js # products module
+#### To Get All Classes
+
+http://localhost:57260/api/info/getAllClasses
+
+#### To Get Property from Class
+
+http://localhost:57260/api/info/UnivateProperties_API.Model.Users.User
+
+#### To Add Template
+
+http://localhost:57260/api/template
+{
+"Name": "WeekAuthorized",
+"Subject": "[Resort][unit] [Module]",
+"Body": "<h4>Dear [Username]</h4><p>Your week information has been confirmed.</p><p>Please log on to the Uni-Vate Website and publish your week.</p><p>This will allow all websites users to view your Week.</p><h4>Thank you</h4><h4><b>Uni-Vate Properties</b></h4>",
+"PlaceHolders": [
+{
+"Name": "[Resort]",
+"BoundTo": "ResortName",
+"BoundToClass": "UnivateProperties_API.Model.Timeshare.TimeshareWeek",
+"BoundToClassDisplay": "TimeshareWeek",
+},
+{
+"Name": "[Unit]",
+"BoundTo": "UnitNumber",
+"BoundToClass": "UnivateProperties_API.Model.Timeshare.TimeshareWeek",
+"BoundToClassDisplay": "TimeshareWeek",
+},
+{
+"Name": "[Module]",
+"BoundTo": "Module",
+"BoundToClass": "UnivateProperties_API.Model.Timeshare.TimeshareWeek",
+"BoundToClassDisplay": "TimeshareWeek",
+},
+{
+"Name": "[Username]",
+"BoundTo": "Username",
+"BoundToClass": "UnivateProperties_API.Model.Users.User",
+"BoundToClassDisplay": "User",
+}
+]
+}
 
 ### Tender Weeks
 

src/components/admin/property/propertyTypeList.vue

               <button
                 type="button"
                 @click="Edit(item.id)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
               >Edit</button>
             </td>
             <td>
               <button
                 type="button"
                 @click="Delete(item.id)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
               >Delete</button>
             </td>
           </tr>

src/components/admin/property/userDefinedGroupPage.vue

                 <button
                   type="button"
                   @click="Edit(item)"
-                  class="btn btn-b-n"
-                  style="width: 85px; height:40px;"
+                  class="btn"
+                  style="margin:2px; color: #60CBEB"
                 >Edit</button>
               </td>
               <td>
                 <button
                   type="button"
                   @click="Delete(item)"
-                  class="btn btn-b-n"
-                  style="width: 85px; height:40px;"
+                  class="btn"
+                  style="margin:2px; color: #60CBEB"
                 >Delete</button>
               </td>
             </tr>

src/components/admin/property/userDefinedGroupsPage.vue

               <button
                 type="button"
                 @click="Edit(item.id)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
               >Edit</button>
             </td>
             <td>
               <button
                 type="button"
                 @click="Delete(item)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
               >Delete</button>
             </td>
           </tr>

src/components/admin/status/agentsUserManagementPage.vue

+<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>
+    <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>
+      <br />
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <td colspan="10">
+              <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>
+          </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"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
+              >Edit</button>
+              <div :id="'myModal' + i" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <Agency name="Agency" :isAddAgent="false" :item="item" />
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td>
+              <button
+                type="button"
+                class="btn"
+                style="width: 85px; height:40px; color:#60CBEB"
+              >Delete</button>
+            </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>
+    </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';
+
+export default {
+  name: 'agentManagementPage',
+  components: {
+    BasePagination,
+    Agency,
+  },
+  data() {
+    return {
+      sortKey: '',
+      reverse: false,
+      searchItem: '',
+      itemsPerPageList: ItemsPerPageList,
+      visibleItemsPerPageCount: 0,
+      currentPage: 1,
+      item: {},
+    };
+  },
+  methods: {
+    ...mapActions('register', ['getAgents']),
+    addNewAgent({ commit }) {
+      axios
+        .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;
+      }
+    },
+  },
+  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']),
+
+    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);
+    },
+  },
+};
+</script>
+
+
+<style>
+</style>

src/components/admin/status/userManagementPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
-    <br />
-    <br />
     <br />
     <br />
     <div class="row">
         <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>
-    <br />
-    <br />
+    <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>
     <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>
+      <br />
       <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></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.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 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>
+              <div class="myWell">
+                <h4>Private Users</h4>
+              </div>
             </td>
           </tr>
           <tr>
-            <td colspan="10">
-              <h5>Agents</h5>
-            </td>
+            <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>
           </tr>
-          <tr v-for="(item, i) in agents" :key="i">
+        </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.email }}</td>
             <td v-if="item.user">{{ item.user.role }}</td>
             <td v-else></td>
-            <td></td>
+            <td>
+              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Reset</button>
+            </td>
             <td>
               <button
                 type="button"
-                @click="Edit(item)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
               >Edit</button>
+              <div :id="'myModal' + i" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div padding-left="20px">
+                      <Individual name="PrivateIndividual" :isAddIndividual="false" :item="item" />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </td>
             <td>
-              <button type="button" class="btn btn-b-n" style="width: 85px; height:40px">Delete</button>
+              <button type="button" class="btn" style="margin:2px; color: #60CBEB">Delete</button>
             </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 axios from 'axios';
+import _ from 'lodash';
+import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
+import BasePagination from '../../shared/basePagination.vue';
+import Individual from '../../user/registerPage.vue';
 
 export default {
   name: 'userManagementPage',
+  components: {
+    BasePagination,
+    Individual,
+  },
   data() {
-    return {};
+    return {
+      sortKey: '',
+      reverse: false,
+      searchItem: '',
+      itemsPerPageList: ItemsPerPageList,
+      visibleItemsPerPageCount: 0,
+      currentPage: 1,
+      item: {},
+    };
   },
   methods: {
-    ...mapActions('registerIndividual', ['getIndividuals', 'getAgents']),
-    addNewAgent({ commit }) {
-      axios
-        .post('/api/agent')
-        .then(result => commit('saveAgent', result.data))
-        .catch(console.error);
+    ...mapActions('register', ['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();
-    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', ['individuals', 'agents']),
+    ...mapState('register', ['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/processFlow/offers.vue

 <template>
-  <!-- eslint-disable max-len -->
   <div>
+    <!-- <section class="intro-single"> -->
     <div class="container">
-      <section class="intro-single">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12 col-lg-8">
-              <div class="title-single-box">
-                <h1 class="title-single">Bid Offers</h1>
-              </div>
-            </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <!-- <div class="title-single-box"> -->
+          <!-- <h2 class="title-single">Status List</h2> -->
+          <!-- </div> -->
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Bid Offers</h1>
           </div>
+          <br />
         </div>
-      </section>
+      </div>
     </div>
+    <!-- </section> -->
     <div class="container">
       <table class="table table-bordered">
         <thead>

src/components/property/propertyList.vue

               <button
                 type="button"
                 @click="Edit(item)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
               >Edit</button>
             </td>
             <td>

src/components/shared/alert.vue

     </div>
     <div class="alert alert-warning" v-if="type === 'WARNING'">
       <eva-icon name="alert-circle-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+      <strong class="color-black">{{ text }}</strong>
     </div>
     <div class="alert alert-danger" v-if="type === 'ERROR'">
       <eva-icon name="slash-outline"></eva-icon>
 </script>
 
 <style>
+.color-black {
+  color: black;
+}
 </style>

src/components/shared/navBar.vue

                 <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"
               <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 }}

src/components/timeshare/buy/weekListComponent.vue

     </div>
     <div v-else>
       <div class="row">
-        <div class="col-md-12">
-          <hr />No Results Found
-          <hr />
+        <hr />
+        <div class="col-md-12" v-if="status !== '' && status !== undefined">
+          <b>{{status}}</b>
         </div>
+        <div class="col-md-12" v-if="status !== '' && status !== undefined">
+          <img
+            class="img-fluid"
+            src="/img/kloader.gif"
+            alt="UVProp logo"
+            style="width:128px;height:128px;"
+          />
+        </div>
+        <div v-else>No Results Found</div>
+        <hr />
       </div>
     </div>
   </div>
   },
   components: {},
   computed: {
-    ...mapState('weekList', ['weeks']),
+    ...mapState('weekList', ['weeks', 'status']),
     ...mapGetters({
       filteredWeeks: 'weekList/filteredWeeks',
+      getRegions: 'weekList/getRegions',
     }),
   },
   mounted() {
   },
   methods: {
     View(item) {
-      console.log(item);
       this.$router.push(`/resort/${item.resort.resortCode}/${item.id}`);
     },
     ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),

src/components/timeshare/sell/sellPage.vue

             <div style="float: right;" class="btn btn-link color-b"></div>
           </div>
           <br />
-          <br />
-          <p>* You need to be logged in to submit your listing. Please register and log in if you have not done so already.</p>
+          <div v-if="!isLoggedIn">
+            <hr />
+            <Alert
+              :text="'* You need to be logged in to submit your listing. Please register and log in if you have not done so already.'"
+              :type="'WARNING'"
+            />
+          </div>
           <hr />
+          <br />
           <div class="form-group row">
             <div class="col-md-4">
               <div class="form-group">
                     >
                       <option value="Other">Other</option>
                       <option
-                        v-for="(resort, r) in resorts"
+                        v-for="(resort, r) in filteredResort"
                         :key="r"
                         :value="resort"
                       >{{resort.resortName}}</option>
 import DetailIndividual from '../../user/timeshareIndividual.vue';
 import BankDetails from '../../shared/bankAccount.vue';
 import Address from '../../misc/address.vue';
+import Alert from '../../shared/alert.vue';
 
 export default {
   name: 'TimeshareToSell',
-  components: { DetailIndividual, BankDetails, Address },
+  components: {
+    DetailIndividual,
+    BankDetails,
+    Address,
+    Alert,
+  },
   created() {
     this.initTimeshare();
   },
       'agencies',
       'agents',
     ]),
+    ...mapState('authentication', ['isLoggedIn']),
     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
     },
+    filteredResort() {
+      let list = [];
+      if (
+        this.sellItem
+        && this.sellItem.region
+        && this.sellItem.region.regionCode
+      ) {
+        const item = this.detailedRegion.find(
+          region => region.region.regionCode === this.sellItem.region.regionCode,
+        );
+        if (item) {
+          list = item.children;
+        }
+      } else {
+        list = this.resorts;
+      }
+      return _.sortBy(list, x => x.resortName);
+    },
   },
   methods: {
     submitSale() {
-      this.saveWeek(this.sellItem);
+      if (this.isLoggedIn) {
+        this.saveWeek(this.sellItem);
+      } else this.$router.push('/user/login');
     },
     previewFiles(event) {
       console.log(event.target.files);

src/components/user/registerAgencySection.vue

           <div class="form-group row"></div>
           <div class="row offset-md-1">
             <div class="col-md-2">
-              <button @click="SubmitData()" class="btn btn-b-n" type="button">Submit</button>
+              <button
+                @click="SubmitData()"
+                class="btn btn-b-n"
+                type="button"
+                data-dismiss="modal"
+              >Submit</button>
             </div>
             <div class="col-md-2 offset-md-1">
               <button
                 @click="Close(routerGoTo('/user/login'))"
                 class="btn btn-b-n"
                 type="button"
+                data-dismiss="modal"
               >Cancel</button>
             </div>
           </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
-// import RegisterPage from './registerPage.vue';
 
 export default {
-  // data() {
-  //   return {
-  //     RegisterHeader: 'Agency Administrator Details',
-  //   };
-  // },
   name: 'Agency',
-  // components: { RegisterPage },
   data() {
     return {
       user: null,
     };
   },
   computed: {
-    ...mapState('registerAgency', ['registerAgency']),
+    ...mapState('register', ['registerAgency']),
   },
   methods: {
-    ...mapActions('registerAgency', [
+    ...mapActions('register', [
       'getAgency',
       'saveAgency',
       'updateAgency',

src/components/user/registerPage.vue

           <div class="form-group row"></div>
           <div class="row offset-md-1">
             <div class="col-md-2">
-              <button @click="SubmitData()" class="btn btn-b-n" type="submit">Submit</button>
+              <button
+                @click="SubmitData()"
+                class="btn btn-b-n"
+                type="submit"
+                data-dismiss="modal"
+              >Submit</button>
             </div>
             <div class="col-md-2 offset-md-1">
-              <button @click="Close()" class="btn btn-b-n" type="submit">Cancel</button>
+              <button @click="Close()" class="btn btn-b-n" type="submit" data-dismiss="modal">Cancel</button>
             </div>
           </div>
         </div>
     };
   },
   computed: {
-    ...mapState('registerIndividual', ['registerIndividual']),
+    ...mapState('register', ['registerIndividual']),
 
     Header() {
       return this.RegisterHeader
     },
   },
   methods: {
-    ...mapActions('registerIndividual', [
+    ...mapActions('register', [
       'getIndividual',
       'saveIndividual',
       'updateIndividual',

src/components/user/updateProfileInfo.vue

             <td>
               <button
                 type="button"
-                @click="Edit(item)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
               >Edit</button>
+              <div :id="'myModal' + i" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div padding-left="20px">
+                      <Individual name="PrivateIndividual" :isAddIndividual="false" :item="item" />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </td>
           </tr>
         </tbody>
 
 <script>
 import { mapState, mapActions } from 'vuex';
-// import axios from 'axios';
+import Individual from './registerPage.vue';
 
 export default {
   name: 'UpdateInfo',
+  components: {
+    Individual,
+  },
   data() {
-    return {};
+    return {
+      item: {},
+    };
   },
   methods: {
-    ...mapActions('registerIndividual', ['getIndividuals']),
+    ...mapActions('register', ['getIndividuals']),
   },
   mounted() {
     this.getIndividuals();
   },
   computed: {
-    ...mapState('registerIndividual', ['individuals']),
+    ...mapState('register', ['individuals']),
   },
 };
 </script>

src/router/index.js

 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';
       name: 'Login',
       component: Login,
     },
+    {
+      path: '/user/updateProfileInfo',
+      name: 'UpdateInfo',
+      component: UpdateInfo,
+    },
     {
       path: '/user/register',
       name: 'PrivateIndividual',
       name: 'userManagementPage',
       component: userManagementPage,
     },
+    {
+      path: '/status/agentUserManagementPage',
+      name: 'agentManagementPage',
+      component: agentManagementPage,
+    },
     {
       path: '/status/changeLogPage',
       name: 'changeLogPage',

src/store/index.js

     propertyAdmin: PropertyAdminModule,
     propertyList: PropertyList,
     propertyTypes: PropertyTypes,
-    registerIndividual: Register,
-    registerAgency: Register,
+    register: Register,
     weekList: WeekList,
     bid: Bid,
     authentication: Authentication,

src/store/modules/timeshare/timeshare.js

     },
   },
   getters: {
-
+    getRegionCode(state) {
+      return (value) => {
+        const reg = state.detailedRegion.find(region => region.children.some(resort => resort
+          .resortCode === value));
+        if (reg && reg.region) {
+          return reg.region.regionCode;
+        }
+        return '';
+      };
+    },
+    getResortName(state) {
+      return (value) => {
+        const res = state.resorts.find(resort => resort.resortCode === value);
+        if (res) {
+          return res.resortName;
+        }
+      };
+    },
   },
   actions: {
     initTimeshare({

src/store/modules/timeshare/weekList.js

+/* eslint-disable no-unused-expressions */
 /* eslint-disable eqeqeq */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
   namespaced: true,
   state: {
     weeks: [],
+    status: undefined,
     filter: {
+      status: undefined,
       region: undefined,
       resort: undefined,
       bedrooms: undefined,
     difFilter: undefined,
   },
   mutations: {
+    onLoading(state) {
+      state.status = 'Loading...';
+    },
+    onError(state) {
+      state.status = 'Error occurred getting data.';
+    },
     onClearFilter(state, filter) {
       state.filter[filter] = undefined;
     },
     setWeeks(state, weeks) {
       state.weeks = weeks;
+      state.status = '';
     },
     addWeek(state, week) {
       state.weeks.push(week);
       const {
         filter,
       } = state;
-      // console.log(JSON.stringify(weekList));
       if (filter) {
         if (filter.keyword) {
           const list = [];
             const item = weekList[i];
             for (const r in item) {
               const innerItem = item[r];
-              if (innerItem && JSON.stringify(innerItem).toLowerCase().includes(filter.keyword
-                .toLowerCase())) {
+              if (
+                innerItem
+                && JSON.stringify(innerItem)
+                  .toLowerCase()
+                  .includes(filter.keyword.toLowerCase())
+              ) {
                 list.push(item);
                 break;
               }
           weekList = list;
         }
         if (filter.region) {
-          weekList = _.filter(weekList, x => x.region && x.region.regionCode === filter.region
-            .regionCode);
+          weekList = _.filter(
+            weekList,
+            x => x.region && x.region.regionCode === filter.region.regionCode,
+          );
         }
         if (filter.resort) {
-          weekList = _.filter(weekList, x => x.resort.resortCode
-            && x.resort.resortCode === filter.resort.resortCode);
+          weekList = _.filter(
+            weekList,
+            x => x.resort.resortCode && x.resort.resortCode === filter.resort.resortCode,
+          );
         }
         if (filter.bedrooms) {
           weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms == filter.bedrooms);
           minDate.setDate(minDate.getDate() - 7);
           const maxDate = new Date(filter.date);
           maxDate.setDate(maxDate.getDate() + 7);
-          weekList = _.filter(weekList, x => new Date(x.arrivalDate)
+          weekList = _.filter(
+            weekList,
+            x => new Date(x.arrivalDate)
             && new Date(x.departureDate)
             && new Date(x.arrivalDate) >= minDate
-            && new Date(x.arrivalDate) <= maxDate);
+            && new Date(x.arrivalDate) <= maxDate,
+          );
         }
         if (filter.minPrice && filter.minPrice !== 0) {
-          weekList = _.filter(weekList, x => x.sellPrice
-            && x.sellPrice >= filter.minPrice);
+          weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice >= filter.minPrice);
         }
         if (filter.maxPrice && filter.maxPrice !== 0) {
-          weekList = _.filter(weekList, x => x.sellPrice
-            && x.sellPrice <= filter.maxPrice);
+          weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice <= filter.maxPrice);
         }
       }
-      return weekList;
+      return _.sortBy((_.sortBy(weekList, 'arrivalDate')), 'resort.resortName');
+    },
+    getRegions(state, getters, rootState, rootGetters) {
+      return rootGetters['timeshare/getRegionCode']('KK');
     },
   },
   actions: {
     },
     getWeeks({
       commit,
+      rootGetters,
     }) {
+      commit('onLoading');
       axios
         .get('/api/timeshareweek')
-        .then(result => commit('setWeeks', result.data))
+        .then((result) => {
+          const arr2 = result.data.filter(x => x.region !== null);
+          const arr3 = result.data.filter(x => x.region === null);
+          for (const item in arr3) {
+            const myItem = arr3[item];
+            if (myItem !== undefined) {
+              const code = myItem.resort.resortCode;
+              myItem.region = {
+                regionName: rootGetters['timeshare/getRegionCode'](code),
+              };
+              myItem.resort = {
+                resortName: rootGetters['timeshare/getResortName'](code),
+                resortCode: code,
+              };
+              arr2.push(myItem);
+            }
+          }
+          commit('setWeeks', arr2);
+        })
         .catch(console.error);
     },
     clearFilter({

vue.config.js

         target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
+      '/nph-srep': {
+        target: 'http://www.unipoint-consoft.co.za',
+        changeOrigin: true,
+      },
     },
   },
 };