Individual

src/components/misc/address.vue

               name="propertyType"
               id="propertyType"
               @change="ProvinceSelected"
-              v-model="address.provinceId"
+              v-model="address.province"
             >
               <option value="0">Please select province</option>
               <option
                 v-for="province in provinces"
                 :value="province.id"
-                :key="province.id"
+                :key="province.description"
               >{{ province.description }}</option>
             </select>
           </div>
               name="propertyType"
               id="propertyType"
               @change="CitySelected"
-              v-model="address.cityId"
+              v-model="address.city"
             >
               <option value="0">Please select city</option>
-              <option v-for="city in cities" :value="city.id" :key="city.id">{{ city.description }}</option>
+              <option
+                v-for="city in cities"
+                :value="city.description"
+                :key="city.id"
+              >{{ city.description }}</option>
             </select>
           </div>
         </div>
               class="form-control"
               name="propertyType"
               id="suburbselector"
-              v-model="address.suburbId"
+              v-model="address.suburb"
               @change="getPostalCode"
             >
               <option value="0">Please select suburb</option>
               <option
                 v-for="suburb in suburbs"
-                :value="suburb.id"
-                :key="suburb.id"
+                :value="suburb.description"
+                :key="suburb.description"
               >{{ suburb.description }}</option>
             </select>
           </div>

src/components/shared/bankAccount.vue

             <span class="input-group-text">
               <eva-icon name="behance-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="bank" v-model="bankingDetails.bank" />
+            <input class="form-control" type="text" name="bank" v-model="bank.bank" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="navigation-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="accountnumber"
-              v-model="bankingDetails.accountNumber"
-            />
+            <input class="form-control" type="text" name="accountnumber" v-model="bank.accNumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="person-done-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="accountholder"
-              v-model="bankingDetails.accountHolder"
-            />
+            <input class="form-control" type="text" name="accountholder" v-model="bank.accHolder" />
           </div>
         </div>
       </div>
 
 <script>
 export default {
+  name: 'BankAccount',
   props: {
-    bankingDetails: {
+    bank: {
       bank: undefined,
-      accountNumber: undefined,
-      accountHolder: undefined,
+      accNumber: undefined,
+      accHolder: undefined,
     },
   },
 };

src/components/shared/listView.vue

         <input v-model="searchItem" class="form-control" placeholder="Search ..." />
       </div>
     </div>
-    <table id="table" class="table table-bordered table-hover">
-      <thead>
-        <tr class="dnd-moved">
-          <th v-for="(column, c) in Columns" :key="c">
-            <div @click="sortBy(column)">{{ column }}</div>
-          </th>
-          <th v-if="editable"></th>
-          <th v-if="deleteable"></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(item, i) in DisplayItems"
-          :key="i"
-          class="text-left dnd-moved"
-          @click="onRowClick(item)"
-        >
-          <td
-            v-for="(column, c) in Columns"
-            :key="c"
-          >{{ isObject(item[column]) ? item[column].display : item[column] }}</td>
-          <td v-if="editable" class="my-width">
-            <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
-          </td>
-          <td v-if="deleteable" class="my-width">
-            <button type="button" class="btn my-btn" @click="onDelete(item)">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 class="p-2">
-        <div class="d-flex flex-row">
-          <div>
-            <select
-              class="form-control"
-              v-model="visibleItemsPerPageCount"
-              @change="onChangeItemsPerPage()"
-            >
-              <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
-            </select>
+    <div v-if="items && items.length > 0">
+      <table id="table" class="table table-bordered table-hover">
+        <thead>
+          <tr class="dnd-moved">
+            <th v-for="(column, c) in Columns" :key="c">
+              <div @click="sortBy(column)">{{ column }}</div>
+            </th>
+            <th v-if="editable"></th>
+            <th v-if="deleteable"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, i) in DisplayItems"
+            :key="i"
+            class="text-left dnd-moved"
+            @click="onRowClick(item)"
+          >
+            <td
+              v-for="(column, c) in Columns"
+              :key="c"
+            >{{ isObject(item[column]) ? item[column].display : item[column] }}</td>
+            <td v-if="editable" class="my-width">
+              <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
+            </td>
+            <td v-if="deleteable" class="my-width">
+              <button type="button" class="btn my-btn" @click="onDelete(item)">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 class="p-2">
+          <div class="d-flex flex-row">
+            <div>
+              <select
+                class="form-control"
+                v-model="visibleItemsPerPageCount"
+                @change="onChangeItemsPerPage()"
+              >
+                <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
+              </select>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <div v-else>
+      <Alert :text="'No items found ^-^'" :type="'INFO'" />
+    </div>
   </div>
 </template>
 
 import _ from 'lodash';
 import ItemsPerPageList from '../../assets/staticData/itemsPerPage';
 import BasePagination from './basePagination.vue';
+import Alert from './alert.vue';
 
 export default {
   components: {
     BasePagination,
+    Alert,
   },
   mounted() {
     try {

src/components/timeshare/myWeeksPage.vue

 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
-import log from '../../assets/Log';
+import Log from '../../assets/Log';
 import ListView from '../shared/listView.vue';
 
 export default {
   },
   data() {
     return {
-      user: JSON.parse(log.getUser()),
+      user: Log.getUser(),
     };
   },
   mounted() {

src/components/timeshare/sell/sellPage.vue

               </div>
             </div>
 
-            <DetailIndividual :owner="sellItem.owner" />
-            <hr />
-            <Address :address="sellItem.owner.address" />
-            <hr />
-            <BankDetails :bankingDetails="sellItem.owner.bankingDetails" />
+            <DetailIndividual :currentUser="sellItem.owner" :showBank="true" />
             <hr />
           </div>
           <br />
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 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 {
   },
   components: {
     DetailIndividual,
-    BankDetails,
-    Address,
     Alert,
   },
   created() {
       'agents',
     ]),
     ...mapState('authentication', ['isLoggedIn']),
+    ...mapGetters({
+      user: 'authentication/getUser',
+      person: 'authentication/getPerson',
+    }),
     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
     },
       }
       return _.sortBy(list, x => x.resortName);
     },
+    isLoggedIn() {
+      return this.user && this.person;
+    },
   },
   methods: {
     submitSale() {

src/components/user/timeshareIndividual.vue

       <div class="myWell">
         <h4>Detailed Individual Information</h4>
       </div>
-      <div class="form-group row"></div>
       <div class="row" style="text-align:left">
         <div class="col-md-6">
           <label>Name *</label>
             <span class="input-group-text">
               <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="name" v-model="owner.name" />
+            <input class="form-control" type="text" name="name" v-model="currentUser.name" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="surname" v-model="owner.surname" />
+            <input class="form-control" type="text" name="surname" v-model="currentUser.surname" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="archive" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="idnumber" v-model="owner.idNumber" />
+            <input class="form-control" type="text" name="idnumber" v-model="currentUser.idNumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
               class="form-control"
               type="text"
               name="companyregnumber"
-              v-model="owner.companyRegNumber"
+              v-model="currentUser.companyRegNumber"
             />
           </div>
         </div>
             <span class="input-group-text">
               <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <select class="form-control" name="maritalstatus" v-model="owner.maritalstatus">
+            <select class="form-control" name="maritalstatus" v-model="currentUser.maritalStatus">
               <option v-for="(item, i) in maritalStatus" :key="i">{{item}}</option>
             </select>
           </div>
             <span class="input-group-text">
               <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="email" v-model="owner.email" />
+            <input class="form-control" type="text" name="email" v-model="currentUser.emailAddress" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="cellnumber" v-model="owner.cellNumber" />
+            <input
+              class="form-control"
+              type="text"
+              name="cellnumber"
+              v-model="currentUser.cellNumber"
+            />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="landline" v-model="owner.telephone" />
+            <input
+              class="form-control"
+              type="text"
+              name="landline"
+              v-model="currentUser.landlineNumber"
+            />
           </div>
         </div>
       </div>
     </div>
+    <div v-if="showAddress">
+      <hr />
+      <Address :address="currentUser ? currentUser.address : {}" />
+    </div>
+    <div v-if="showBank">
+      <hr />
+      <BankAccount :bank="currentUser ? currentUser.bankingDetails : {}" />
+    </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
+import BankAccount from '../shared/bankAccount.vue';
+import Address from '../misc/address.vue';
 
 export default {
-  component: {},
+  components: {
+    BankAccount,
+    Address,
+  },
   props: {
-    owner: {},
+    currentUser: {
+      name: undefined,
+      surname: undefined,
+      idNumber: undefined,
+      companyRegNumber: undefined,
+      emailAddress: undefined,
+      cellNumber: undefined,
+      landlineNumber: undefined,
+      bankingDetails: {},
+      address: {},
+    },
+    showChangeCurrentUser: {
+      default: false,
+    },
+    showBank: {
+      default: false,
+    },
+    showAddress: {
+      default: false,
+    },
+  },
+  mounted() {
+    if (!this.currentUser) {
+      if (this.user) {
+        this.getIndividual(this.user.id);
+      }
+    }
   },
   computed: {
     ...mapState('timeshare', ['maritalStatus']),
+    ...mapGetters({
+      user: 'authentication/getUser',
+    }),
+  },
+  methods: {
+    ...mapActions('individual', ['getIndividual']),
   },
 };
 </script>

src/store/index.js

 import Info from './modules/communication/info';
 import PropertyEdit from './modules/property/propertyEdit';
 import Carousel from './modules/misc/carousel';
+import Individual from './modules/user/individual';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     info: Info,
     propertyEdit: PropertyEdit,
     carousel: Carousel,
+    individual: Individual,
   },
 });

src/store/modules/user/authentication.js

 export default {
   namespaced: true,
   state: {
-    username: 'UniVate2018',
-    password: 'UniVate2018',
+    username: 'kobusb',
+    password: '123123',
     isLoggedIn: log.isLoggedIn(),
     flag: false,
     status: undefined,
   },
   getters: {
     authStatus: state => state.status,
+    getPerson: () => log.getPerson(),
+    getUser: () => log.getUser(),
   },
   actions: {
-    init({ commit }) {
+    init({
+      commit,
+    }) {
       if (!log.isLoggedIn() && log.tokenExpired) {
         log.clearValues();
       } else log.updateTokenExpiry();
         agency: log.getJSONObject('agency'),
       });
     },
-    login({ commit, state }) {
+    login({
+      commit,
+      state,
+    }) {
       axios({
         url: '/api/register/authenticate',
         data: {
         });
       /* }); */
     },
-    logout({ commit }) {
+    logout({
+      commit,
+    }) {
       return new Promise(() => {
         commit('logout');
         log.clearValues();

src/store/modules/user/individual.js

+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    items: [],
+    item: undefined,
+  },
+  mutations: {
+    addItem(state, item) {
+      state[item.name].push(item.value);
+    },
+    setItem(state, item) {
+      state[item.name] = item.value;
+    },
+  },
+  getters: {},
+  actions: {
+    getIndividual({
+      commit,
+    }, userId) {
+      axios
+        .get(`/api/individual/getIndividual/${userId}`)
+        .then(r => commit('setItem', {
+          name: 'item',
+          value: r.data,
+        })).catch(console.error);
+    },
+  },
+};