Roles Update Part 1

src/components/admin/property/propertyList.vue

   <section id="contact2">
     <div class="container">
       <div class="section-header">
-        <h1>Property Admin</h1>
+        <h2>Property Admin</h2>
+      </div>
+      <div v-if="ROLE === 'Agency'">
+        <h6>{{ curAgency }}</h6>
+      </div>
+      <div v-if="ROLE === 'Agent'">
+        <h6>{{ agent[0].name + " " + agent[0].surname }}</h6>
       </div>
       <div class="row">
         <div class="col-lg-6 offset-3">
           <div class="d-flex justify-content-between" v-if="showPager">
             <div class="p-1">
               {{
-              currentPage +
-              " / " +
-              PageCount +
-              (" - (" + FilteredProperties.length + " items)")
+                currentPage + " / " + PageCount + (" - (" + FilteredProperties.length + " items)")
               }}
             </div>
             <div class="p-1">
           <div class="p-2">
             <div class="d-flex flex-row">
               <div>
-                <button v-if="sortKey !== 'id'" class="btn-solid-blue" @click="ClearSort">Clear Sort</button>
+                <button v-if="sortKey !== 'id'" class="btn-solid-blue" @click="ClearSort">
+                  Clear Sort
+                </button>
               </div>
             </div>
           </div>
 
 export default {
   components: {
-    BasePagination,
+    BasePagination
   },
   data() {
     return {
         "Suburb",
         "Status",
         "Type",
-        "Publish",
+        "Publish"
       ],
       columns: [
         "owner",
         "suburb",
         "status",
         "type",
-        "isPublished",
-      ],
+        "isPublished"
+      ]
     };
   },
   methods: {
       "getAdminProperties",
       "deleteProperty",
       "publishProperty",
-      "unpublishProperty",
+      "unpublishProperty"
     ]),
+    ...mapActions("register", ["getAgentById"]),
+    ...mapActions("timeshare", ["getAgencies"]),
     Publish(item) {
       this.publishProperty(item);
     },
     ClearSort() {
       this.reverse = true;
       this.sortKey = "id";
-    },
+    }
   },
   computed: {
     ...mapState("propertyList", ["properties"]),
+    ...mapState("register", ["agent"]),
+    ...mapState("timeshare", ["agencies"]),
     FilteredProperties() {
       if (this.filter) {
-        const list = _.filter(this.properties, (item) =>
+        const list = _.filter(this.properties, item =>
           Object.values(item).some(
-            (i) =>
+            i =>
               JSON.stringify(i)
                 .toLowerCase()
                 .indexOf(this.filter.toLowerCase()) > -1
     },
     PageCount() {
       return this.visibleItemsPerPageCount !== 0
-        ? Math.ceil(
-            this.FilteredProperties.length / this.visibleItemsPerPageCount
-          )
+        ? Math.ceil(this.FilteredProperties.length / this.visibleItemsPerPageCount)
         : 1;
     },
+    curAgency() {
+      var selAgency = "";
+      this.agencies.forEach(agency => {
+        if (this.agent[0].agencyId === agency.id) {
+          selAgency = agency.agencyName;
+        }
+      });
+      return selAgency;
+    },
     DisplayItems() {
       const list = this.FilteredProperties;
       const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
     SortDirection() {
       return this.reverse ? "desc" : "asc";
     },
+    ROLE() {
+      return Log.getUser().role;
+    }
+  },
+  created() {
+    this.getAgentById(Log.getUser().id);
+    this.getAgencies();
   },
   mounted() {
     this.wait = true;
-    this.getAdminProperties(this.userId).then((fulfuilled) => {
+    this.getAdminProperties(this.userId).then(fulfuilled => {
       this.wait = false;
       if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
         const [startItem] = this.itemsPerPageList;
         if (val != oldVal) {
           this.currentPage = 1;
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 

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>
+  <main id="main">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="section-header">
+            <h2>Agent Management</h2>
+          </div>
         </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" data-toggle="modal" :data-target="'#myModal' + i">
-          New Agent
-        </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 class="row">
+        <div class="col-md-2 offset-1">
+          <button
+            @click="routerGoTo('/status/userManagementPage')"
+            type="button"
+            class="btn-solid-blue"
+          >
+            USERS
+          </button>
+        </div>
+        <div class="col-md-2 offset-2">
+          <button type="button" class="btn-solid-blue">AGENTS</button>
+        </div>
+        <div class="col-md-2 offset-2">
+          <button
+            type="button"
+            class="btn-solid-blue"
+            data-toggle="modal"
+            :data-target="'#myModal' + i"
+          >
+            NEW AGENT
+          </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>
-              <Agency name="Agency" :isAddAgent="false" :item="item" />
             </div>
           </div>
         </div>
       </div>
+      <div class="container">
+        <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>
     </div>
-    <div class="container">
-      <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>
+  </main>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import axios from "axios";
 import Agency from "../../user/registerAgencySection.vue";

src/components/admin/status/userManagementPage.vue

       </div>
       <div class="row">
         <div class="col-md-2 offset-1">
-          <button type="button" class="btn btn-b-n">Private Users</button>
+          <button type="button" class="btn-solid-blue">USERS</button>
         </div>
         <div class="col-md-2 offset-2">
           <button
             @click="routerGoTo('/status/agentUserManagementPage')"
             type="button"
-            class="btn btn-b-n"
+            class="btn-solid-blue"
           >
-            Agents
+            AGENTS
           </button>
         </div>
       </div>
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 // import alert from '../../shared/alert.vue';
 import ListView from "../../shared/listView.vue";
 
   props: {},
   methods: {
     ...mapActions("register", ["getIndividuals", "deleteIndividual"]),
+    ...mapActions("role", ["retrieveRoles"]),
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
     Edit(item) {
-      this.$router.push({
-        path: "/user/updateProfileInfo",
-        query: { id: item.id }
-      });
+      this.$router.push({ name: "UpdateInfo", params: { indivParam: item } });
     },
     Delete(item) {
       this.deleteIndividual(item.id);
     this.getIndividuals();
   },
   computed: {
-    ...mapState("register", ["individuals", "removeIndividual"])
+    ...mapState("register", ["individuals", "removeIndividual"]),
+    ...mapGetters("role", ["getRoles"])
   }
 };
 </script>

src/components/property/ListProperty/listPropertyPage.vue

   components: {
     contentSection
   },
+
   created() {
     if (!Log.getPerson().name) {
       this.$router.push({

src/components/property/commercial/createProperty/commercialCreateNew.vue

       //     item.value = "no";
       //   }
       // });
-
+      if (Log.getUser().role === "Agency" || Log.getUser().role === "Agent") {
+        this.retrieveAgency().then(() => {
+          this.property.agentId = this.agent[0].id;
+          this.property.agencyId = this.agent[0].agencyId;
+        });
+      }
       console.log(this.property);
 
       this.saveProperty(this.property)

src/components/property/residential/createProperty/residentialCreateNew.vue

       "getPropertySavedFields",
       "getSavedPropertyData"
     ]),
+    ...mapActions("register", ["getAgentById"]),
     updateLocation(place) {
       this.addressSet = true;
       this.property.streetNumber = place.streetNumber;
       //     item.value = "no";
       //   }
       // });
-
+      if (Log.getUser().role === "Agency" || Log.getUser().role === "Agent") {
+        this.retrieveAgency().then(() => {
+          this.property.agentId = this.agent[0].id;
+          this.property.agencyId = this.agent[0].agencyId;
+        });
+      }
+      //console.log(this.property);
       this.saveProperty(this.property)
         .then(fulfilled => {
           this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
           console.log(error.message);
         });
     },
+    async retrieveAgency() {
+      await this.getAgentById(Log.getUser().id);
+    },
     Close() {
       this.$router.push("/property/admin/list/my");
     },
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
+    ...mapState("register", ["agent"]),
     sortFields() {
       return this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
     },

src/components/shared/navBar.vue

                     <a href="#" class="sf-with-ul">Property Management</a>
                     <ul style="margin-top:-10px; text-align:left" :class="propManClass">
                       <li>
-                        <router-link to="/propertyManagement">Sectional Title and HOA Management</router-link>
+                        <router-link to="/propertyManagement"
+                          >Sectional Title and HOA Management</router-link
+                        >
                       </li>
                       <li>
-                        <router-link
-                          to="/rentalPropertyManagement"
-                        >Rental Property Portfolio Management</router-link>
+                        <router-link to="/rentalPropertyManagement"
+                          >Rental Property Portfolio Management</router-link
+                        >
                       </li>
                     </ul>
                   </li>
                         <router-link to="/status/timeshareAdmin">Timeshare Week Admin</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/status/tenderWeekAdmin">Tender Week Management</router-link>
-                      </li>
-                      <!-- <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/unitConfiguration/list">Unit Configuration</router-link>
-                      </li>-->
-                      <!-- <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/communication/template">Templates</router-link>
-                      </li>-->
-                      <!-- <hr />
-                      <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/status/userManagementPage"
-                          >User Management & Access</router-link
+                        <router-link to="/status/tenderWeekAdmin"
+                          >Tender Week Management</router-link
                         >
-                      </li>-->
-                      <!-- <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/status/changeLogPage">Changes Logs</router-link>
-                      </li>
-                      <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/userDefinedGroups/list"
-                          >Property User Defined Groups</router-link
-                        >
-                      </li>
-                      <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/propertyTypes/list">Property Types</router-link>
                       </li>
-                      <hr />
-                      <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/searchLog">Search Logs</router-link>
+                      <li>
+                        <router-link to="/PropertyAdmin">Property Admin</router-link>
                       </li>
-                      <li v-if="ROLE === 'Super Admin'">
-                        <hr />
-                      </li>-->
                       <hr v-if="ROLE === 'Super Admin'" />
                       <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
                         <div
                             <router-link to="/status/list">Status</router-link>
                           </li>
                           <li>
-                            <router-link to="/unitConfiguration/list">Unit Configuration</router-link>
+                            <router-link to="/unitConfiguration/list"
+                              >Unit Configuration</router-link
+                            >
                           </li>
                           <li>
                             <router-link to="/communication/template">Templates</router-link>
                           </li>
                           <li>
-                            <router-link to="/status/userManagementPage">User Management & Access</router-link>
-                          </li>
-                          <li>
-                            <router-link to="/userDefinedGroups/list">Property User Defined Groups</router-link>
+                            <router-link to="/status/userManagementPage"
+                              >User Management & Access</router-link
+                            >
                           </li>
                           <li>
-                            <router-link to="/PropertyAdmin">Property Admin</router-link>
+                            <router-link to="/userDefinedGroups/list"
+                              >Property User Defined Groups</router-link
+                            >
                           </li>
                           <li>
                             <router-link to="/propertyTypes/list">Property Types</router-link>
                             <router-link to="/fees">Fees</router-link>
                           </li>
                           <li>
-                            <router-link to="/termsConditions">Edit Terms and Conditions</router-link>
-                          </li>
-                          <li>
-                            <router-link to="/UserRoles">User Roles</router-link>
+                            <router-link to="/termsConditions"
+                              >Edit Terms and Conditions</router-link
+                            >
                           </li>
                         </ul>
                       </li>
                           :class="submenu1Class"
                         >
                           <li>
-                            <router-link to="/status/changeLogPage">Changes Logs</router-link>
+                            <router-link to="/status/changeLogPage">Change Logs</router-link>
                           </li>
                           <li>
                             <router-link to="/searchLog">Search Logs</router-link>
                           </li>
                         </ul>
                       </li>
-                      <hr v-if="ROLE === 'Super Admin'" />
+                      <hr />
                       <li>
                         <router-link to="/Offers">Offers</router-link>
                       </li>
                       <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/Carousel">Carousel</router-link>
                       </li>-->
-                      <li v-if="ROLE === 'Super Admin'">
+                      <li>
                         <router-link to="/user/updateProfileInfo">Update Info</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/landingPages">Landing Pages / Campaignes</router-link>
                       </li>
                       <li>
-                        <router-link class="btn-white-border p-2" to="/user/login">Logout</router-link>
+                        <router-link class="btn-white-border p-2" to="/user/login"
+                          >Logout</router-link
+                        >
                       </li>
                     </ul>
                   </li>
 
                   <li v-if="!USER">
-                    <router-link class="btn-white-border p-2 ml-1 mr-1" to="/user/login">Login</router-link>
+                    <router-link class="btn-white-border p-2 ml-1 mr-1" to="/user/login"
+                      >Login</router-link
+                    >
                   </li>
 
                   <li v-if="!USER">
-                    <router-link class="btn-solid-blue pt-2 pb-2" to="/user/register">Register</router-link>
+                    <router-link class="btn-solid-blue pt-2 pb-2" to="/user/register"
+                      >Register</router-link
+                    >
                   </li>
                   <!-- <li v-if="!isLoggedIn" class="menu-has-children">
                     <div
     this.retrieveListingFee();
   },
   computed: {
-    ...mapState("authentication", [
-      "user",
-      "flag",
-      "status",
-      "person",
-      "token"
-    ]),
+    ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
     isLoggedIn() {
       return Log.isLoggedIn();
     },

src/components/user/Roles/contentSection.vue

 <template>
-  <main id="main" style="margin-top:-20px; padding-bottom:50px">
-    <!-- eslint-disable max-len -->
-    <div class="container">
-      <br />
-      <br />
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="section-header">
-            <h2>User Roles</h2>
-          </div>
-        </div>
-      </div>
+  <div>
+    <div v-if="wait" id="preloader"></div>
+    <main id="main" style="margin-top:-20px; padding-bottom:50px">
+      <!-- eslint-disable max-len -->
       <div class="container">
-        <ListView
-          :items="individuals"
-          :showNew="false"
-          :editable="true"
-          :showCustomAction="true"
-          :showColumnChooser="false"
-          :displayColumns="columns"
-          :displayHeaders="headers"
-          @onEdit="Edit"
-        />
         <br />
+        <br />
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="section-header">
+              <h2>User Roles</h2>
+            </div>
+          </div>
+        </div>
+        <div class="container">
+          <ListView
+            :items="individuals"
+            :showNew="false"
+            :editable="true"
+            :showCustomAction="true"
+            :showColumnChooser="false"
+            :displayColumns="columns"
+            :displayHeaders="headers"
+            @onEdit="Edit"
+          />
+          <br />
+        </div>
       </div>
-    </div>
-  </main>
+    </main>
+  </div>
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
-// import alert from '../../shared/alert.vue';
+/* eslint-disable */
+import { mapState, mapActions, mapGetters } from "vuex";
 import ListView from "../../shared/listView.vue";
 
 export default {
   },
   data() {
     return {
-      columns: [
-        "id",
-        "name",
-        "surname",
-        "cellNumber",
-        "telephone",
-        "email",
-        "isDeleted",
-        "role"
-      ],
+      columns: ["id", "name", "surname", "cellNumber", "telephone", "email", "isDeleted", "role"],
       headers: ["", "", "", "", "", "", "", ""],
-      item: {}
+      item: {},
+      wait: true
     };
   },
   props: {},
+  created() {
+    this.retrieveUserRoles().then(() => {
+      this.wait = false;
+    });
+  },
   methods: {
-    ...mapActions("register", ["getIndividuals", "deleteIndividual"]),
+    ...mapActions("role", ["retrieveUserRoles"]),
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
     this.getIndividuals();
   },
   computed: {
-    ...mapState("register", ["individuals", "removeIndividual"])
+    ...mapGetters("role", ["getRoles"])
   }
 };
 </script>

src/components/user/updateProfileInfo.vue

         </div>
       </div>
       <div class="row mb-4">
-        <div class="container col-md-10">
-          <form
-            id="mainForm"
-            method="POST"
-            action="/to-sell"
-            accept-charset="UTF-8"
-            enctype="multipart/form-data"
+        <div class="col">
+          <div class="section-header">
+            <h2>Detailed Individual Information</h2>
+          </div>
+        </div>
+      </div>
+      <!-- <DetailIndividual :currentUser="user" :showBank="true" :showAddress="true" /> -->
+      <div class="row mb-2">
+        <div class="form-group col-md-6">
+          <float-label>
+            <input
+              type="text"
+              name="name"
+              class="form-control uniInput"
+              id="name"
+              placeholder="Name"
+              data-rule="minlen:4"
+              data-msg="Please enter your name"
+              v-model="individual.name"
+            />
+          </float-label>
+
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <float-label>
+            <input
+              type="text"
+              class="form-control uniInput"
+              name="surname"
+              id="surname"
+              placeholder="Surname"
+              data-msg="Please enter your surname"
+              v-model="individual.surname"
+            />
+          </float-label>
+
+          <div class="validation"></div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="form-group col-md-6">
+          <float-label>
+            <input
+              type="text"
+              name="idnum"
+              class="form-control uniInput"
+              id="idnum"
+              placeholder="ID Number"
+              data-rule="minlen:4"
+              data-msg="Please enter your ID number"
+              v-model="individual.idNumber"
+            />
+          </float-label>
+
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <float-label>
+            <input
+              type="text"
+              class="form-control uniInput"
+              name="company"
+              id="company"
+              placeholder="Company Reg Number"
+              data-rule="minlen:4"
+              data-msg="Please enter your company reg number"
+              v-model="individual.companyRegNumber"
+            />
+          </float-label>
+
+          <div class="validation"></div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="form-group col-md-6">
+          <div class="input-group">
+            <span v-if="!individual.howMarried">
+              <label v-if="!individual.howMarried" for="howMarried" class="uniSelectLabel"
+                >Marital Status</label
+              >
+            </span>
+
+            <float-label label="Marital Status" style="width:100%">
+              <select
+                class="form-control uniSelect"
+                id="howMarried"
+                v-model="individual.howMarried"
+              >
+                <option value="N/A">N/A</option>
+                <option value="In Community Of Property">In Community Of Property</option>
+                <option value="Out of Community Of Property">Out of Community Of Property</option>
+                <option value="Other">Other</option>
+                <option value="Traditional Wedding">Traditional Wedding</option>
+                <option value="Single">Single</option>
+                <option value="Divorced">Divorced</option>
+                <option value="Widow">Widow</option>
+                <option value="Committed Relationship">Committed Relationship</option>
+                <option value="Partner">Partner</option>
+              </select>
+            </float-label>
+          </div>
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <float-label>
+            <input
+              type="text"
+              class="form-control uniInput"
+              name="email"
+              id="email"
+              placeholder="EMAIL ADDRESS"
+              data-msg="Please enter your email address"
+              v-model="individual.emailAddress"
+            />
+          </float-label>
+
+          <div class="validation"></div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="form-group col-md-6">
+          <float-label>
+            <input
+              type="text"
+              name="cell"
+              class="form-control uniInput"
+              id="cell"
+              placeholder="CELL NUMBER"
+              data-rule="minlen:4"
+              data-msg="Please enter your cell number"
+              v-model="individual.cellNumner"
+            />
+          </float-label>
+
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <float-label>
+            <input
+              type="text"
+              class="form-control uniInput"
+              name="landline"
+              id="landline"
+              placeholder="LANDLINE NUMBER"
+              data-msg="Please enter your landline number"
+              v-model="individual.landlineNumber"
+            />
+          </float-label>
+
+          <div class="validation"></div>
+        </div>
+      </div>
+
+      <div v-if="individual.howMarried === 'In Community Of Property'" class="section-header">
+        <h2>Spouse Details</h2>
+      </div>
+      <div v-if="individual.howMarried === 'In Community Of Property'" class="form">
+        <div class="form-row mb-2">
+          <div class="form-group col-md-6 mt-2">
+            <float-label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="SPOUSE NAME"
+                data-msg="Please enter your spouse's name"
+                v-model="individual.spouseName"
+              />
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-6 mt-2">
+            <float-label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="SPOUSE SURNAME"
+                data-msg="Please enter your spouse's surname"
+                v-model="individual.spouseSurname"
+              />
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-6 mt-2">
+            <float-label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="SPOUSE EMAIL"
+                data-rule="minlen:4"
+                data-msg="Please enter your spouse's email"
+                v-model="individual.spouseEmail"
+              />
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-6 mt-2">
+            <float-label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="SPOUSE TELEPHONE"
+                data-rule="minlen:4"
+                data-msg="Please enter your spouse's telephone number"
+                v-model="individual.spouseTelephone"
+              />
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-6 mt-2">
+            <float-label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="SPOUSE CELL NUMBER"
+                data-rule="minlen:4"
+                data-msg="Please enter your spouse's cellphone number"
+                v-model="individual.spouseCellnumber"
+              />
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Address</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="form-group col-md-12">
+          <addressAutoComplete @GoogleAddress="UpdateAddress" />
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="street-nr"
+            class="form-control"
+            id="street-nr"
+            placeholder="Street Number"
+            data-rule="minlen:4"
+            data-msg="Please enter your street number"
+            v-model="individual.address.streetNumber"
+            disabled
+          />
+
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="street"
+            id="street"
+            placeholder="Street Name"
+            data-msg="Please enter your street name"
+            disabled
+            v-model="individual.address.street"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="province"
+            class="form-control"
+            id="province"
+            placeholder="Province"
+            data-rule="minlen:4"
+            data-msg="Please enter your province"
+            disabled
+            v-model="individual.address.province"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="city"
+            id="city"
+            placeholder="City"
+            data-rule="minlen:4"
+            data-msg="Please enter your city"
+            v-model="individual.address.city"
+            disabled
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="suburb"
+            class="form-control"
+            id="suburb"
+            placeholder="Suburb"
+            data-rule="minlen:4"
+            data-msg="Please enter your suburb"
+            v-model="individual.address.suburb"
+            disabled
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="postal"
+            id="postal"
+            placeholder="Postal Code"
+            data-msg="Please enter your postal code"
+            v-model="individual.address.postalCode"
+            disabled
+          />
+          <div class="validation"></div>
+        </div>
+      </div>
+      <div v-if="pullUserRole === 'Super Admin'">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Access Control</h2>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6">
+            <float-label label="User Role" style="width:100%">
+              <select class="form-control uniSelect" id="howMarried" v-model="individual.user.role">
+                <option v-for="role in getRoles" :key="role.id" :value="role.roleName">
+                  {{ role.roleName }}
+                </option>
+              </select>
+            </float-label>
+          </div>
+          <div class="col-md-6">
+            <input
+              class="mr-2 mt-3"
+              name="changePass"
+              type="checkbox"
+              v-model="individual.user.loginPasswordChange"
+            />
+            <label for="changePass">Change Password on Next Login</label>
+          </div>
+        </div>
+        <div
+          v-if="
+            individual.user.role.toUpperCase() === 'AGENCY' ||
+              individual.user.role.toUpperCase() === 'AGENT' ||
+              individual.user.role.toUpperCase() === 'MANAGING AGENT'
+          "
+          class="row mt-4"
+        >
+          <div class="col-md-6">
+            <float-label fixed label="AGENCY" style="width:100%">
+              <select class="form-control uniSelect" v-model="individual.agencyId">
+                <option value="">Private User</option>
+                <option v-for="(item, i) in agencies" :key="i" :value="item.id">{{
+                  item.agencyName
+                }}</option>
+              </select>
+            </float-label>
+          </div>
+        </div>
+      </div>
+      <div class="row mt-5">
+        <div class="col">
+          <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
+        </div>
+        <div class="col">
+          <router-link
+            v-if="pullUserRole === 'Super Admin'"
+            class="btn-solid-blue"
+            to="/status/userManagementPage"
+            >CANCEL</router-link
           >
-            <div class="col-md-12" style="text-align:left"></div>
-            <DetailIndividual :currentUser="user" :showBank="true" :showAddress="true" />
-            <br />
-          </form>
         </div>
       </div>
     </div>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions, mapGetters } from "vuex";
 import DetailIndividual from "./timeshareIndividual.vue";
+import addressAutoComplete from "../shared/addressAutoComplete";
+import Log from "../../assets/Log";
 
 export default {
   name: "UpdateInfo",
   },
   props: {},
   components: {
-    DetailIndividual
+    DetailIndividual,
+    addressAutoComplete
   },
   mounted() {
     this.selectedItem = this.currentUser;
   },
+  created() {
+    this.retrieveUserRoles();
+    this.getIndividual(Log.getUser().id).then(() => {
+      if (this.$route.params.indivParam) {
+        this.individual = this.$route.params.indivParam;
+
+        if (this.individual.address === null) {
+          this.individual.address = {};
+        }
+
+        if (this.individual.user.role === "Agent" || this.individual.user.role === "Agency") {
+          this.getAgentById(this.individual.userId);
+          this.individual.agencyId = this.agent[0].agencyId;
+        }
+      } else {
+        console.log(this.indiv);
+        this.individual = this.indiv;
+        this.individual.user = Log.getUser();
+      }
+      this.getAgencies();
+    });
+  },
   computed: {
     ...mapState("timeshare", [
       "resorts",
     ]),
     ...mapState("individual", ["indiv"]),
     ...mapState("authentication", ["isLoggedIn", "user"]),
+    ...mapState("register", ["agent"]),
     ...mapGetters({
       user: "authentication/getUser",
       person: "authentication/getPerson"
     }),
+    ...mapGetters("role", ["getRoles"]),
     isLoggedIn() {
       return this.user && this.person;
+    },
+    pullUserRole() {
+      return Log.getUser().role;
     }
   },
   methods: {
     ...mapActions("individual", ["getIndividual", "updateIndividual"]),
+    ...mapActions("role", ["retrieveUserRoles"]),
+    ...mapActions("register", ["getAgentById", "saveAgent"]),
+    ...mapActions("timeshare", ["getAgencies"]),
     onSelectedItemItemChange(item) {
       this.currentUser = item;
+    },
+    UpdateAddress(address) {
+      this.individual.address.streetNumber = address.streetNumber;
+      this.individual.address.street = address.streetName;
+      this.individual.address.province = address.province;
+      this.individual.address.city = address.city;
+      this.individual.address.suburb = address.suburb;
+      this.individual.address.postalCode = address.postalCode;
+    },
+    sendToApi() {
+      if (
+        this.individual.user.role === "Agency" ||
+        this.individual.user.role === "Agent" ||
+        this.individual.user.role === "Managing Agent"
+      ) {
+        this.saveAgent(this.individual);
+      } else {
+        this.updateIndividual(this.individual).then(() => {
+          if (this.individual.user.role === "Super Admin") {
+            this.$router.push("/status/userManagementPage");
+          } else {
+            this.$router.push("/");
+          }
+        });
+      }
     }
   }
 };

src/router/index.js

     {
       path: "/user/updateProfileInfo",
       name: "UpdateInfo",
+      props: route => ({
+        ...route.params
+      }),
       component: UpdateInfo
     },
     {

src/store/index.js

 import bank from "./modules/user/bank";
 import Fees from "./modules/financial/fees";
 import TermsConditions from "./modules/misc/termsConditions";
+import Roles from './modules/user/role'
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     placeHolderFormat: PlaceHolderFormat,
     fees: Fees,
     termsConditions: TermsConditions,
-    bank: bank
+    bank: bank,
+    role: Roles
   }
 });

src/store/modules/user/individual.js

   },
   getters: {},
   actions: {
-    getIndividual({ commit, rootGetters }, userId) {
+    async getIndividual({ commit, rootGetters }, userId) {
       let id = 0;
       if (!userId || userId === 0) {
         const rootItem = rootGetters["authentication/getUser"];
         id = 0;
       }
 
-      axios
+
+      await axios
         .get(`/api/individual/getIndividual/${id}`)
         .then(r => {
-          console.log(JSON.stringify(r));
           commit("setItem", {
             name: "indiv",
             value: r.data
         })
         .catch(console.error);
     },
-    updateIndividual({ commit }, item) {
-      axios
+    async updateIndividual({ commit }, item) {
+      await axios
         .put("/api/individual", item)
         .then(result => commit("setItem", item))
         .catch(console.error);

src/store/modules/user/register.js

+/* eslint-disable */
 import axios from "axios";
 
 export default {
   state: {
     individuals: [],
     agents: [],
+    agent: {},
     registerIndividual: {
       name: "",
       surname: "",
     setAgents(state, type) {
       state.agents = type;
     },
+    setSingleAgent(state, agent){
+      state.agent = agent
+    },
     setAgency(state, type) {
       state.registerAgency = type;
     },
         .then(result => commit("setAgents", result.data))
         .catch(console.error);
     },
+    async getAgentById({commit}, userId){
+      await axios
+        .get('/api/agent/single/' +  userId)
+        .then((result) => {
+          console.log(result);
+          commit("setSingleAgent", result.data)
+        })
+        .catch((e) => {
+          console.log(e);
+        })
+    },
     // getAgency({
     //   commit,
     // }, id) {
     },
     saveAgent({ commit }, item) {
       axios
-        .post("/api/agent", item)
+        .post("/api/agent/AgentFromUser", item)
         .then(result => commit("addAgent", result.data))
         .catch(console.error);
     },
     async updateIndividual({ commit }, userParam) {
       await axios
-        .put("/api/user", userParam)
+        .put("/api/user/", userParam)
         .then(result => console.log(result))
         .catch(console.error);
     },

src/store/modules/user/role.js

+/* eslint-disable */
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    roles: [],
+  },
+  mutations: {
+    getRoles(state, roles) {
+      state.roles = roles;
+    },
+  },
+  getters: {
+    getRoles: (state) => state.roles
+  },
+  actions: {
+    async retrieveUserRoles({commit}){
+        await axios.get('/api/userRole')
+        .then((result) => {
+            commit('getRoles', result.data)
+        })
+        .catch((e) => console.log(e))
+    }
+  },
+};