Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

src/components/admin/property/propertyTypeEdit.vue

                 >
                   <option value="0">Residential</option>
                   <option value="1">Commercial</option>
-                  <option value="2">Both</option>
                 </select>
               </div>
             </div>

src/components/admin/property/propertyTypeList.vue

             <th>Description</th>
             <th>Property Type</th>
             <th></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(item, i) in propertyTypes" :key="i">
             <td>{{ item.description }}</td>
             <td v-if="item.usageType === 0">Residential</td>
-            <td v-else-if="item.usageType === 1">Commercial</td>
-            <td v-else>Both</td>
+            <td v-else>Commercial</td>
             <td>
               <button
                 type="button"
                 class="btn btn-b-n"
                 style="width: 85px; height:40px;"
               >Edit</button>
-              |
+            </td>
+            <td>
               <button
                 type="button"
                 @click="Delete(item.id)"

src/components/admin/property/userDefinedFieldPage.vue → src/components/admin/property/userDefinedField.vue

 <script>
 export default {
   name: 'UserField',
+  props: {
+    field: {},
+  },
   data() {
     return {
-      userField: {
-        fieldName: '',
-        fieldType: '',
-        rank: 0,
-      },
+      userField: {},
     };
   },
   mounted() {
-    this.userField = this.$route.query.field;
+    if (this.field) {
+      this.userField = this.field;
+    }
   },
   methods: {
     SubmitData() {
-      //this.$emit();
+      this.$emit('UpdateUserField', this.userField);
     },
   },
 };

src/components/admin/property/userDefinedGroupPage.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h2 class="title-single">User Defined Group</h2>
+    <div v-if="showField === false">
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h2 class="title-single">User Defined Group</h2>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <div class="container">
-      <div class="row mb-3">
-        <div class="col-md-12">
-          <form id="mainForm">
-            <div v-if="userDefinedGroup" class="form-group row">
-              <div class="col-md-4">
-                <label>Description</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="description"
-                  id="description"
-                  v-model="userDefinedGroup.description"
-                />
-              </div>
-              <div class="col-md-4">
-                <label>Property Type</label>
-                <select
-                  class="form-control"
-                  name="UsageType"
-                  id="UsageType"
-                  v-model="userDefinedGroup.usageType"
-                >
-                  <option value="0">Residential</option>
-                  <option value="1">Commercial</option>
-                  <option value="2">Both</option>
-                </select>
-              </div>
-              <div class="col-md-4">
-                <label>Order</label>
-                <input
-                  class="form-control"
-                  type="number"
-                  name="rank"
-                  id="rank"
-                  v-model="userDefinedGroup.rank"
-                />
-              </div>
-            </div>
-            <div v-if="!userDefinedGroup" class="form-group row">
-              <div class="col-md-4">
-                <label>Description</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="description"
-                  id="description"
-                  v-model="group.description"
-                />
-              </div>
-              <div class="col-md-4">
-                <label>Property Type</label>
-                <select
-                  class="form-control"
-                  name="UsageType"
-                  id="UsageType"
-                  v-model="group.usageType"
-                >
-                  <option value="0">Residential</option>
-                  <option value="1">Commercial</option>
-                  <option value="2">Both</option>
-                </select>
+      </section>
+      <div class="container">
+        <div class="row mb-3">
+          <div class="col-md-12">
+            <form id="mainForm">
+              <div v-if="userDefinedGroup" class="form-group row">
+                <div class="col-md-4">
+                  <label>Description</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="description"
+                    id="description"
+                    v-model="userDefinedGroup.description"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <label>Property Type</label>
+                  <select
+                    class="form-control"
+                    name="UsageType"
+                    id="UsageType"
+                    v-model="userDefinedGroup.usageType"
+                  >
+                    <option value="0">Residential</option>
+                    <option value="1">Commercial</option>
+                    <option value="2">Both</option>
+                  </select>
+                </div>
+                <div class="col-md-4">
+                  <label>Order</label>
+                  <input
+                    class="form-control"
+                    type="number"
+                    name="rank"
+                    id="rank"
+                    v-model="userDefinedGroup.rank"
+                  />
+                </div>
               </div>
-              <div class="col-md-4">
-                <label>Order</label>
-                <input
-                  class="form-control"
-                  type="number"
-                  name="rank"
-                  id="rank"
-                  v-model="group.rank"
-                />
+              <div v-if="!userDefinedGroup" class="form-group row">
+                <div class="col-md-4">
+                  <label>Description</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="description"
+                    id="description"
+                    v-model="group.description"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <label>Property Type</label>
+                  <select
+                    class="form-control"
+                    name="UsageType"
+                    id="UsageType"
+                    v-model="group.usageType"
+                  >
+                    <option value="0">Residential</option>
+                    <option value="1">Commercial</option>
+                    <option value="2">Both</option>
+                  </select>
+                </div>
+                <div class="col-md-4">
+                  <label>Order</label>
+                  <input
+                    class="form-control"
+                    type="number"
+                    name="rank"
+                    id="rank"
+                    v-model="group.rank"
+                  />
+                </div>
               </div>
-            </div>
-          </form>
+            </form>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="container">
+      <div class="container">
+        <button
+          type="button"
+          @click="newItem()"
+          class="btn btn-b-n"
+          style="width: 85px; height:40px;"
+        >New</button>
+        <br />
+        <table class="table table-bordered">
+          <thead>
+            <tr>
+              <th>Field Name</th>
+              <th>Field Type</th>
+              <th>Order</th>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, i) in userFields" :key="i">
+              <td>{{item.fieldName}}</td>
+              <td v-if="item.fieldType === 'text'">Text</td>
+              <td v-else-if="item.fieldType === 'number'">Number</td>
+              <td v-else>Yes / No</td>
+              <td>{{item.rank}}</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"
+                  @click="Delete(item)"
+                  class="btn btn-b-n"
+                  style="width: 85px; height:40px;"
+                >Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <button
+        type="button"
+        @click="SubmitData()"
+        class="btn btn-b-n"
+        style="width: 85px; height:40px;"
+      >Save</button>
       <button
         type="button"
-        @click="newItem()"
+        @click="Close()"
         class="btn btn-b-n"
         style="width: 85px; height:40px;"
-      >New</button>
-      <br />
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Field Name</th>
-            <th>Field Type</th>
-            <th>Order</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in userFields" :key="i">
-            <td>{{item.fieldName}}</td>
-            <td>{{item.fieldType}}</td>
-            <td>{{item.rank}}</td>
-            <td>
-              <router-link :to="{ name: 'UserDefinedField', query: { field: item }}">Edit</router-link>
-              <!-- <router-link :to="`/userField`">Edit</router-link>| Delete -->
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      >Close</button>
+    </div>
+    <div v-else>
+      <userFields @UpdateUserField="UpdateUserField" :field="item" />
     </div>
-    <button
-      type="button"
-      @click="SubmitData()"
-      class="btn btn-b-n"
-      style="width: 85px; height:40px;"
-    >Save</button>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import userFields from './userDefinedField.vue';
 
 export default {
   name: 'UserDefinedGroup',
+  components: {
+    userFields,
+  },
   data() {
     return {
-      group: {
-        description: '',
-        usageType: 0,
-        rank: 0,
-      },
+      item: {},
+      showField: false,
     };
   },
   mounted() {
+    this.clearUserFields();
+    this.clearUserGroup();
+
     if (this.$route.params.id > 0) {
-      this.getUserDefinedGroup(
-        Object.assign({}, { id: this.$route.params.id }),
-      );
-      this.getUserFields(Object.assign({}, { groupId: this.$route.params.id }));
+      this.getUserDefinedGroup(this.$route.params.id);
+      this.getUserFields(this.$route.params.id);
     }
   },
   computed: {
-    ...mapState('propertyAdmin', ['userDefinedGroup', 'userFields']),
+    ...mapState('propertyAdmin', [
+      'userDefinedGroup',
+      'userFields',
+      'userField',
+    ]),
   },
   methods: {
     ...mapActions('propertyAdmin', [
       'getUserFields',
       'saveUserDefinedGroup',
       'updateUserDefinedGroup',
+      'clearUserGroup',
+      'clearUserFields',
+      'clearUserField',
+      'saveUserField',
+      'updateUserField',
+      'deleteUserField',
     ]),
     SubmitData() {
+      this.userDefinedGroup.fields = [];
+      let reload = false;
       if (this.$route.params.id > 0) {
-        this.updateUserDefinedGroup(
-          Object.assign({}, { group: this.userDefinedGroup }),
-        );
+        this.updateUserDefinedGroup(this.userDefinedGroup);
+        this.userFields.forEach((fieldData) => {
+          if (fieldData.id === 0) {
+            fieldData.groupId = this.userDefinedGroup.id;
+            this.saveUserField(fieldData);
+          } else {
+            this.updateUserField(fieldData);
+          }
+        });
       } else {
-        this.saveUserDefinedGroup(Object.assign({}, { group: this.group }));
+        reload = true;
+        this.userFields.forEach((fieldData) => {
+          this.userDefinedGroup.fields.push({
+            fieldName: fieldData.fieldName,
+            fieldType: fieldData.fieldType,
+            rank: fieldData.rank,
+          });
+        });
+        this.saveUserDefinedGroup(this.userDefinedGroup);
       }
       this.$router.push('/userDefinedGroups/list');
+      // this.$router.push({
+      //   path: '/userDefinedGroups/list',
+      //   query: { reload },
+      // });
     },
     newItem() {
-      const newField = {
-        fieldName: '',
-        fieldType: 'Text',
-        rank: 0,
-      };
-      this.$router.push({
-        path: '/userField',
-        query: { field: newField },
-      });
+      this.clearUserField();
+      this.item = this.userField;
+      this.item.groupId = this.userDefinedGroup.id;
+      this.showField = true;
+    },
+    Edit(item) {
+      this.item = item;
+      this.showField = true;
+    },
+    Close() {
+      this.$router.push('/userDefinedGroups/list');
+    },
+    UpdateUserField(item) {
+      if (item.id === 0) {
+        this.userFields.push(item);
+      }
+      this.showField = false;
+    },
+    Delete(item) {
+      if (item.id === 0) {
+        this.userFields.pop(this.userFields.find(p => p.id === item.id));
+      } else {
+        this.deleteUserField(item.id);
+      }
     },
   },
 };

src/components/admin/property/userDefinedGroupsPage.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div>
     <section class="intro-single">
       <div class="container">
       </div>
     </section>
     <div class="container">
-      <router-link :to="`/userDefinedGroups/userDefinedGroup`">New</router-link>
+      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
       <table class="table table-bordered">
         <thead>
           <tr>
             <td v-else>Both</td>
             <td>{{item.rank}}</td>
             <td>
-              <router-link :to="`/userDefinedGroups/userDefinedGroup/${item.id}`">Edit</router-link>
+              <button
+                type="button"
+                @click="Edit(item.id)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Edit</button>
             </td>
             <td>
-              <button>Delete</button>
+              <button
+                type="button"
+                @click="Delete(item)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Delete</button>
             </td>
           </tr>
         </tbody>
 
 export default {
   name: 'UserDefinedGroup',
-  created() {
+  mounted() {
     this.getUserDefinedGroups();
   },
   computed: {
     ...mapState('propertyAdmin', ['userDefinedGroups']),
   },
   methods: {
-    ...mapActions('propertyAdmin', ['getUserDefinedGroups']),
+    ...mapActions('propertyAdmin', [
+      'getUserDefinedGroups',
+      'deleteUserDefinedGroup',
+    ]),
+    New() {
+      this.$router.push('/userDefinedGroups/userDefinedGroup');
+    },
+    Edit(id) {
+      this.$router.push(`/userDefinedGroups/userDefinedGroup/${id}`);
+    },
+    Delete(item) {
+      if (item.id === 0) {
+        this.userDefinedGroups.pop(item);
+      }
+      this.deleteUserDefinedGroup(item.id);
+    },
   },
 };
 </script>
-<style>
-</style>

src/components/home/propertySection.vue

           v-if="latestProperties.length > 0"
           name="propertyholder"
           :properties="latestProperties"
+          :showSort="false"
         />
       </div>
     </section>

src/components/property/propertyCard.vue

 <template>
-  <div class="form-group row">
-    <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
-      <div class="card-box-a card-shadow">
-        <div class="img-box-a">
-          <img
-            :src="currentProperty.displayImage"
-            alt
-            class="img-a img-fluid"
-            style="height:466px; width:350px; object-fit: cover;"
-          />
-        </div>
-        <div class="card-overlay">
-          <div class="card-overlay-a-content">
-            <div class="card-header-a">
-              <h4 class="card-title-a">
-                <router-link
-                  :to="`/property/property/${currentProperty.id}`"
-                  class="link-a"
-                >{{ currentProperty.shortDescription }}</router-link>
-              </h4>
-              <h4 class="card-title-c">
+  <div>
+    <div class="form-group row" v-if="showSort">
+      <button
+        type="button"
+        class="btn btn-link font-weight-bold color-b"
+        style="width: 150px; height:40px;"
+        @click="sortNewest()"
+      >Newest</button>
+      <button
+        type="button"
+        class="btn btn-link font-weight-bold color-b"
+        style="width: 150px; height:40px;"
+        @click="sortLowPrice()"
+      >Lowest Price</button>
+      <button
+        type="button"
+        class="btn btn-link font-weight-bold color-b"
+        style="width: 150px; height:40px;"
+        @click="sortHighPrice()"
+      >Highest Price</button>
+      <hr />
+    </div>
+    <div class="form-group row">
+      <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
+        <div class="card-box-a card-shadow">
+          <div class="img-box-a">
+            <img
+              :src="currentProperty.displayImage"
+              alt
+              class="img-a img-fluid"
+              style="height:466px; width:350px; object-fit: cover;"
+            />
+          </div>
+          <div class="card-overlay">
+            <div class="card-overlay-a-content">
+              <div class="card-header-a">
+                <h4 class="card-title-a">
+                  <router-link
+                    :to="`/property/property/${currentProperty.id}`"
+                    class="link-a"
+                  >{{ currentProperty.shortDescription }}</router-link>
+                </h4>
+                <h4 class="card-title-c">
+                  <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
+                    {{ currentProperty.province }}
+                    <br />
+                    {{ currentProperty.city }}
+                    <br />
+                    {{ currentProperty.suburb }}
+                  </router-link>
+                </h4>
+              </div>
+              <div class="card-body-a">
+                <div class="price-box d-flex">
+                  <span
+                    v-if="currentProperty.isSale"
+                    class="price-a"
+                  >sale | {{ currentProperty.displayPrice }}</span>
+                  <span
+                    v-if="!currentProperty.isSale"
+                    class="price-a"
+                  >rent | {{ currentProperty.displayPrice }}</span>
+                </div>
                 <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                  {{ currentProperty.province }}
-                  <br />
-                  {{ currentProperty.city }}
-                  <br />
-                  {{ currentProperty.suburb }}
+                  Click here to view
+                  <span class="ion-ios-arrow-forward"></span>
                 </router-link>
-              </h4>
-            </div>
-            <div class="card-body-a">
-              <div class="price-box d-flex">
-                <span
-                  v-if="currentProperty.isSale"
-                  class="price-a"
-                >sale | {{ currentProperty.displayPrice }}</span>
-                <span
-                  v-if="!currentProperty.isSale"
-                  class="price-a"
-                >rent | {{ currentProperty.displayPrice }}</span>
               </div>
-              <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                Click here to view
-                <span class="ion-ios-arrow-forward"></span>
-              </router-link>
-            </div>
-            <div class="card-footer-a" v-if="currentProperty.showFooter">
-              <ul class="card-info d-flex justify-content-around">
-                <li v-if="currentProperty.area !== null">
-                  <h4 class="card-info-title">Area</h4>
-                  <span v-html="currentProperty.area"></span>
-                </li>
-                <li v-if="currentProperty.beds !== null">
-                  <h4 class="card-info-title">Beds</h4>
-                  <span>{{ currentProperty.beds }}</span>
-                </li>
-                <li v-if="currentProperty.baths !== null">
-                  <h4 class="card-info-title">Baths</h4>
-                  <span>{{ currentProperty.baths }}</span>
-                </li>
-                <li v-if="currentProperty.garages !== null">
-                  <h4 class="card-info-title">Garages</h4>
-                  <span>{{ currentProperty.garages }}</span>
-                </li>
-              </ul>
+              <div class="card-footer-a" v-if="currentProperty.showFooter">
+                <ul class="card-info d-flex justify-content-around">
+                  <li v-if="currentProperty.area !== null">
+                    <h4 class="card-info-title">Area</h4>
+                    <span v-html="currentProperty.area"></span>
+                  </li>
+                  <li v-if="currentProperty.beds !== null">
+                    <h4 class="card-info-title">Beds</h4>
+                    <span>{{ currentProperty.beds }}</span>
+                  </li>
+                  <li v-if="currentProperty.baths !== null">
+                    <h4 class="card-info-title">Baths</h4>
+                    <span>{{ currentProperty.baths }}</span>
+                  </li>
+                  <li v-if="currentProperty.garages !== null">
+                    <h4 class="card-info-title">Garages</h4>
+                    <span>{{ currentProperty.garages }}</span>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>
+        <br />
       </div>
-      <br />
     </div>
   </div>
 </template>
 export default {
   props: {
     properties: { type: Array, default: () => [] },
+    showSort: { type: Boolean, default: true },
+  },
+  methods: {
+    sortHighPrice() {
+      function compare(a, b) {
+        if (a.price < b.price) return 1;
+        if (a.price > b.price) return -1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+    sortLowPrice() {
+      function compare(a, b) {
+        if (a.price < b.price) return -1;
+        if (a.price > b.price) return 1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+    sortNewest() {
+      function compare(a, b) {
+        if (a.dateCreated < b.dateCreated) return 1;
+        if (a.dateCreated > b.dateCreated) return -1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
   },
 };
 </script>

src/components/property/propertyImage.vue

     <br />
     <div class="form-group row">
       <div v-for="(img, i) in image" class="col-md-2" :key="i">
+        <input type="checkbox" id="checkbox" v-model="imagesDefault[i]" @change="updateList(i)" />
+        <label for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
         <a class="fa fa-times del" @click="removeImage(key)" />
 export default {
   props: {
     loadedImages: Function,
-    savedImages: { type: Array, default: () => [] },
   },
   data() {
     return {
       images: {},
       image: [],
+      imagesDefault: [],
     };
   },
-  mounted() {
-    if (this.savedImages.length > 0) {
-      this.image = this.savedImages;
-    }
-  },
+  // Commented out for now.
+  // created() {
+  //   if (this.savedImages && this.savedImages.length > 0) {
+  //     this.savedImages.forEach((element) => {
+  //       this.images.push(element);
+  //     });
+  //   }
+  // },
   methods: {
     imagesAdd(e) {
       const files = e.target.files || e.dataTransfer.files;
 
         reader.onload = (e) => {
           vm.image.push(e.target.result);
-          console.log(vm.image);
         };
         reader.readAsDataURL(file[i]);
       }
         this.$refs.im.value = '';
       }
     },
+
+    updateList(index) {
+      if (this.imagesDefault) {
+        for (let i = 0; i < this.imagesDefault.length; i++) {
+          if (i !== index) {
+            this.imagesDefault[i] = false;
+          }
+        }
+        this.$emit('DefaultImage', index);
+      }
+    },
   },
 };
 </script>

src/components/property/propertyList.vue

             <th>Type</th>
             <th>Publish</th>
             <th>Status</th>
-            <th>Edit</th>
-            <th>Delete</th>
+            <th></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(item, i) in properties" :key="i">
-            <td v-if="item.propertyType.usageType === 1">{{item.propertyName}}</td>
-            <td v-else>{{ item.shortDescription }}</td>
-            <td>{{item.id}}</td>
-            <td></td>
+            <td>{{ item.name }}</td>
+            <td>{{ item.id }}</td>
+            <td v-html="item.size" />
             <td>{{ item.price }}</td>
-            <td>{{ item.propertyType.description }}</td>
+            <td>{{ item.type }}</td>
             <td>{{ item.publish }}</td>
-            <td>Publish</td>
+            <td>{{ item.status }}</td>
             <td>
-              <router-link :to="`/property/${item.id}`">Edit</router-link>
+              <button
+                type="button"
+                @click="Edit(item)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Edit</button>
+            </td>
+            <td>
+              <button type="button" class="btn btn-b-n" style="width: 85px; height:40px;">Delete</button>
             </td>
-            <td>Delete</td>
           </tr>
         </tbody>
       </table>
   },
   methods: {
     ...mapActions('propertyList', ['getProperties']),
+    Edit(item) {
+      const salesType = item.isSale ? 'Sale' : 'Rental';
+      this.$router.push({
+        path: `/property/${this.propertyType}/${salesType}`,
+        query: { id: item.id },
+      });
+    },
   },
   mounted() {
     this.propertyType = this.$route.params.propertyType;
     this.user = this.$route.params.user;
 
+    if (this.user === 'MyListings') {
+      this.user = 'GeorgeW';
+    }
+
     this.getProperties(
       Object.assign(
         {},
         {
-          propertyType: this.$route.params.propertyType,
-          user: this.$route.params.user,
+          propertyType: this.propertyType,
+          user: this.user,
         },
       ),
     );

src/components/property/propertyPage.vue

                     </div>
                   </div>
                 </div>
-                <div class="property-description" v-html="property ? property.description : ''" />
+                <div class="property-description" v-html="property.description" />
                 <div v-for="display in property.displayData" :key="display.id">
                   <div class="row section-t3">
                     <div class="col-sm-12">
                     </div>
                     <div class="card-title-c align-self-center">
                       <h5 class="title-c">{{ formatPrice(property.price) }}</h5>
+                      <h6 v-if="property.pricePer">Per {{property.pricePer}}</h6>
                     </div>
                   </div>
                 </div>
     ...mapState('property', ['property', 'propertyImages']),
   },
   methods: {
-    ...mapActions('property', ['getProperty', 'getPropertyImages']),
+    ...mapActions('property', [
+      'getProperty',
+      'getPropertyImages',
+      'clearPropertyImages',
+    ]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
       return '';
     },
   },
+  beforeDestroy() {
+    this.clearPropertyImages();
+  },
 };
 </script>
 

src/components/property/propertySearchPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
-    <div class="container col-md-10" v-if="propertyType === 'Residential'">
+    <div class="container col-md-12" v-if="propertyType === 'Residential'">
       <div class="col-sm-12">
         <div class="about-img-box">
           <img
         <div class="col-md-12">
           <h1 class="my-4">About Residential Properties</h1>
         </div>
-        <div class="col-md-8 text-left">
+        <div class="container col-md-6 text-left">
           <p>
             Uni-Vate Properties understands the necessity in property-seekers
             to find that perfect fit;
             <router-link to="/property/Residential/Sale">Click Here</router-link>
           </p>
         </div>
-        <div class="col-md-4 text-center">
+        <div class="col-md-4">
           <p>
             <img class="img-fluid" src="./../../../public/img/residential.jpg" alt="About Resale" />
           </p>
       <br />
     </div>
 
-    <div class="container col-md-10" v-if="propertyType === 'Commercial'">
+    <div class="container col-md-12" v-if="propertyType === 'Commercial'">
       <div class="col-sm-12">
         <div class="about-img-box">
           <img
         <div class="col-md-12">
           <h1 class="my-4">About Commercial Properties</h1>
         </div>
-        <div class="col-md-8 text-left">
+        <div class="container col-md-6 text-left">
           <p>
             Commercial properties are characteristically any larger properties that
             generate profit through leasing or rental activities. These properties
             <router-link to="/property/Commercial/Sale">Click Here</router-link>
           </p>
         </div>
-        <div class="col-md-4 text-center">
+        <div class="col-md-4">
           <p>
             <img class="img-fluid" src="./../../../public/img/commercial.jpg" alt="About Resale" />
           </p>

src/components/property/propertyUserField.vue

   name: 'UserDefinedField',
   props: {
     fields: { type: Array, default: () => [] },
-    SetFieldValue: Function,
   },
   data() {
     return {

src/components/property/propertyeditPage.vue

                   id="propertyType"
                   v-model="property.propertyTypeId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select type</option>
                   <option
                     v-for="item in propertyTypes"
                     :value="item.id"
                   class="form-control"
                   type="text"
                   name="address1"
+                  placeholder="Apartment, suite, unit, building, floor, Po Box etc."
+                  style="font-size: 50%"
                   id="address1"
                   v-model="property.addressLine1"
                 />
                   class="form-control"
                   type="text"
                   name="address2"
+                  placeholder="Complex, estate, company name, etc."
+                  style="font-size: 50%"
                   id="address2"
                   v-model="property.addressLine2"
                 />
               </div>
               <div class="col-md-4">
-                <label>Address Line 3</label>
+                <label>Street</label>
                 <input
                   class="form-control"
                   type="text"
                   name="address3"
+                  placeholder="Street or c/o name"
+                  style="font-size: 50%"
                   id="address3"
                   v-model="property.addressLine3"
                 />
                   @change="ProvinceSelected"
                   v-model="property.provinceId"
                 >
-                  <option value="0">Please select</option>
+                  <option value="0">Please select province</option>
                   <option
                     v-for="province in provinces"
                     :value="province.id"
                   @change="CitySelected"
                   v-model="property.cityId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select city</option>
                   <option
                     v-for="city in cities"
                     :value="city.id"
                   id="suburbselector"
                   v-model="property.suburbId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select suburb</option>
                   <option
                     v-for="suburb in suburbs"
                     :value="suburb.id"
               <div class="col-md-4">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
-                <input
-                  class="form-control"
-                  type="number"
-                  name="price"
-                  id="price"
-                  placeholder="R"
-                  v-model="property.price"
-                />
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>R</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="number"
+                    name="price"
+                    id="price"
+                    placeholder="R"
+                    v-model="property.price"
+                  />
+                </div>
               </div>
               <div class="col-md-4" v-if="salesType === 'Rental'">
                 <label>Per</label>
                   class="form-control"
                   name="propertyType"
                   id="propertyType"
-                  v-model="property.per"
+                  v-model="property.pricePer"
                 >
                   <option value>Please select</option>
-                  <option value="month">Month</option>
-                  <option value="day">Day</option>
+                  <option value="Month">Month</option>
+                  <option value="Day">Day</option>
                 </select>
               </div>
             </div>
               v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
               :fields="propertyOverviewFields[0].fields"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :id="1"
             ></UserField>
             <div class="form-group row" />
-            <div v-for="item in propertyFields" :key="item.id">
+            <div v-for="(item, i) in propertyFields" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
               </div>
               <UserField
                 :fields="item.fields"
-                :id="item.id"
+                :id="item.name"
                 @UpdateUserDefinedFields="UpdateUserDefinedFields"
               />
             </div>
             </div>
             <ImageLoad :loadedImages="loadedImages" :savedImages="propertyImages" />
             <button
+              v-if="!wait"
               type="button"
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Save</button>
+            >
+              <!-- <span class="spinner-border" role="status" aria-hidden="true"></span>
+              <span class="sr-only">Loading...</span>-->
+              Save
+            </button>
+            <label v-if="wait">Please wait...</label>
           </form>
         </div>
       </div>
       selectedCity: '',
       images: [],
       propertyFieldValues: [],
+      defaultImage: 0,
+      wait: false,
     };
   },
   methods: {
       'saveProperty',
       'getProperty',
       'getPropertyImages',
+      'clearProperty',
+      'clearPropertyImages',
+      'getPropertyEditDisplay',
+      'getPropertySavedOverviewFields',
+      'getPropertySavedFields',
+      'getSavedPropertyData',
     ]),
     SubmitData() {
-      let isDefault = true;
-      this.images.forEach((imagedata) => {
+      this.wait = true;
+      for (let i = 0; i < this.images.length; i++) {
+        let setAsDefault = false;
+        if (i === this.defaultImage) {
+          setAsDefault = true;
+        }
         this.property.propertyImages.push({
-          image: imagedata,
-          isDefault,
+          image: this.images[i],
+          isDefault: setAsDefault,
         });
-        isDefault = false;
-      });
-      this.property.propertyUserFields = this.propertyFieldValues;
+      }
+      this.property.createdBy = 'GeorgeW';
 
       this.saveProperty(this.property);
 
-      this.$router.push({
-        path: '/property/search',
-        query: { type: this.salesType, propertyType: this.propertyType },
-      });
+      setTimeout(
+        () => this.$router.push({
+            path: '/property/search',
+            query: { type: this.salesType, propertyType: this.propertyType },
+          }),
+        3000,
+      );
     },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
         this.propertyFieldValues.push(item);
       }
     },
+    UpdateDefaultImage(item) {
+      this.defaultImage = item;
+    },
   },
   mounted() {
+    this.wait = false;
+    this.clearProperty();
+    this.clearPropertyImages();
+    this.images = [];
+    this.defaultImage = 0;
+
+    if (this.propertyOverviewFields.length > 0) {
+      this.propertyOverviewFields = [];
+    }
+    if (this.propertyFields.length > 0) {
+      this.propertyFields = [];
+    }
+
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    this.getProvince();
     this.getPropertyTypes(this.$route.params.propType);
-    this.getPropertyOverviewFields();
-    this.getPropertyFields(this.$route.params.propType);
 
+    this.getProvince();
+    if (this.$route.query.id) {
+      // this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      this.getSavedPropertyData(
+        Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
+      );
+    } else {
+      this.getPropertyOverviewFields();
+      this.getPropertyFields(this.$route.params.propType);
+    }
     // if (this.$route.params.id) {
+    //   this.getPropertyEditDisplay(4); // (this.$route.params.id);
+    //   this.propertyType = 'Residential'; // this.propertyEditDisplay.propertyType;
+    //   this.salesType = 'Rental'; // this.propertyEditDisplay.saleType;
+
+    //   this.getProvince();
+    //   this.getPropertyTypes('Residential');
+    //   this.getPropertySavedOverviewFields(4);
+    //   this.getPropertySavedFields(
+    //     Object.assign(
+    //       {},
+    //       {
+    //         type: 'Residential',
+    //         id: 4,
+    //       },
+    //     ),
+    //   );
+
     //   this.getProperty(this.$route.params.id);
-    //   this.getPropertyImages(this.$route.params.id);
+    // } else {
+
     // }
-    /*
-    if (this.$route.params.id) {
-      this.getProperty(this.$route.params.id);
-      this.getPropertyImages(this.$route.params.id);
-      if (this.property.propertyType.usageType === 0) {
-        this.propertyType = 'Residential';
-      } else {
-        this.propertyType = 'Commercial';
-      }
-      this.salesType = this.property.isSale ? 'Sale' : 'Rental';
-    } */
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
       this.propertyType = this.$route.params.propType;
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.salesType = this.$route.params.saleType;
-
-      this.getPropertyTypes(this.$route.params.propType);
-
-      this.getPropertyFields(this.$route.params.propType);
+      if (!this.$route.query.id) {
+        this.getPropertyTypes(this.$route.params.propType);
+        this.getPropertyFields(this.$route.params.propType);
+      }
 
       return this.propertyType;
     },

src/components/shared/navBar.vue

               >To Sell</div>
               <div
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Residential/GeorgeW')"
+                @click="routerGoTo('/property/list/Residential/MyListings')"
               >My Residential Properties</div>
               <div
                 class="dropdown-item cursor-pointer"
               >To Sell</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Commercial/GeorgeW')"
+                @click="routerGoTo('/property/list/Commercial/MyListings')"
               >My Commercial Properties</a>
               <a
                 class="dropdown-item cursor-pointer"

src/components/timeshare/sell/sellPage.vue

           <div class="form-group row">
             <div class="col-md-6">
               <label for="Module">Module</label>
-              <input
-                class="form-control"
-                placeholder="Module"
-                type="text"
-                name="module"
-                v-model="sellItem.module"
-              />
+              <input class="form-control" type="text" name="module" v-model="sellItem.module" />
             </div>
             <div class="col-md-6">
               <label for="Week number">Week Number</label>
-              <input
-                class="form-control"
-                placeholder="Week Number"
-                type="text"
-                name="week"
-                v-model="sellItem.weekNumber"
-              />
+              <input class="form-control" type="text" name="week" v-model="sellItem.weekNumber" />
             </div>
           </div>
           <div class="form-group row">
           <div class="form-group row">
             <div class="col-md-6">
               <label for="Unit number">Unit Number</label>
-              <input
-                class="form-control"
-                placeholder="Unit Number"
-                type="text"
-                name="unit"
-                v-model="sellItem.unitNumber"
-              />
+              <input class="form-control" type="text" name="unit" v-model="sellItem.unitNumber" />
             </div>
             <div class="col-md-6">
               <label for="Owner">Owner</label>
-              <input
-                class="form-control"
-                placeholder="Owner"
-                type="text"
-                name="owner"
-                v-model="sellItem.owner"
-              />
+              <input class="form-control" type="text" name="owner" v-model="sellItem.owner" />
             </div>
           </div>
           <div class="form-group row">
               <label for="Levy">Levy Amount</label>
               <input
                 class="form-control"
-                placeholder="Levy"
                 type="number"
                 step="any"
                 name="levy"
               >
                 <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
               </select>
+              <br />
+              <br />
+              <br />
+              <DetailIndividual />
             </div>
           </div>
-          <br />
           <hr />
           <br />
           <h3>Share transfer information</h3>
             <div class="col-md-4">
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
-                  <span class="input-group-text">R</span>
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>R</b>
+                  </span>
                 </div>
                 <input
                   class="form-control"
                   type="number"
                   step="any"
                   name="purchasePrice"
-                  placeholder="R"
                   v-model="sellItem.originalPurchasePrice"
                 />
               </div>
             <div class="col-md-4">
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
-                  <span class="input-group-text">R</span>
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>R</b>
+                  </span>
                 </div>
                 <input
                   class="form-control"
                   type="number"
                   step="any"
                   name="sellingPrice"
-                  placeholder="R"
                   v-model="sellItem.sellingPrice"
                 />
               </div>
             <div class="col-md-4">
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
-                  <span class="input-group-text">R</span>
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>R</b>
+                  </span>
                 </div>
                 <input
                   class="form-control"
                   type="number"
                   step="any"
                   name="commission"
-                  placeholder="R"
                   v-model="sellItem.agentCommission"
                 />
               </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import DetailIndividual from '../../user/timeshareIndividual.vue';
 
 export default {
   name: 'TimeshareToSell',
+  components: { DetailIndividual },
   created() {
     this.initTimeshare();
   },

src/components/user/loginPage.vue

   },
   methods: {
     Login() {
-      console.log(this.username + this.password);
       axios
-        .post('http://localhost:57260/api/register/authenticate', {
+        .post('/api/register/authenticate', {
           username: this.username,
           password: this.password,
         })
-        .then(response => console.log(response.data));
+        .then(response => console.log(response.data))
+        .catch(error => console.log(error.push));
       this.$router.push('/');
     },
     togglePassword() {
       this.showPassword = false;
       this.isPasswordShown = 'password';
     },
-    authHeader() {
-      const user = JSON.parse(localStorage.getItem('user'));
-
-      if (user && user.token) {
-        return { Authoriztion: `Bearer ${user.token}` };
-      }
-      return {};
-    },
     SendMail() {},
   },
 };

src/components/user/registerAgencySection.vue

       <div class="reg-page">
         <div class="regform" style="text-align:left">
           <h4>Agency Details</h4>
+          <div class="row">
           <div class="row" style="text-align:left">
             <div class="col-md-8" style="margin-bottom: 1em">
               <div class="input-group-prepend">
               </div>
             </div>
           </div>
+          </div>
           <hr />
           <div class="col-md-10" style="text-align:left">
             <h5 style="margin-bottom: 1em">Agency Administrator</h5>

src/components/user/registerPage.vue

       <div class="regform">
         <div class="col-md-10" style="text-align:left">
           <h4>Private Individual</h4>
+          <div class="form-group row"></div>
           <div class="row" style="text-align:left">
             <div class="col-md-8" style="margin-bottom: 1em">
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="people" fill="#60CBEB"></eva-icon>
+                  <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                 </span>
                 <input
                   class="form-control"
             <div class="col-md-8" style="margin-bottom: 1em">
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="book" fill="#60CBEB"></eva-icon>
+                  <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
                 </span>
                 <input
                   class="form-control"
                 />
               </div>
             </div>
-          </div>
-
-          <div class="row" style="text-align:left">
-            <div class="col-md-7" style="text-align:left">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="email" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="email"
-                    placeholder="Email Address"
-                    v-model="registerIndividual.email"
-                  />
-                  <div class="form-group row"></div>
-                </div>
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="email"
+                  placeholder="Email Address"
+                  v-model="registerIndividual.email"
+                />
               </div>
             </div>
-
-            <div class="col-md-8" style="text-align:left">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="number"
-                    name="cellnumber"
-                    placeholder="Cellphone Number"
-                    v-model="registerIndividual.cellNumber"
-                  />
-                </div>
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="cellnumber"
+                  placeholder="Cellphone Number"
+                  v-model="registerIndividual.cellNumber"
+                />
               </div>
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="number"
-                    name="landline"
-                    placeholder="Landline Number"
-                    v-model="registerIndividual.telephone"
-                  />
-                </div>
+            </div>
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="landline"
+                  placeholder="Landline Number"
+                  v-model="registerIndividual.telephone"
+                />
               </div>
             </div>
           </div>
           <hr />
           <div class="row">
             <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="username"
-                    placeholder="Username"
-                    v-model="registerIndividual.username"
-                  />
-                </div>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="username"
+                  placeholder="Username"
+                  v-model="registerIndividual.username"
+                />
               </div>
             </div>
             <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    :type="isPasswordShown"
-                    v-model="registerIndividual.password"
-                    id="password"
-                    placeholder="Password"
-                    name="password"
-                    value
-                  />
-                </div>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  :type="isPasswordShown"
+                  v-model="registerIndividual.password"
+                  id="password"
+                  placeholder="Password"
+                  name="password"
+                  value
+                />
               </div>
             </div>
             <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    :type="isPasswordShown"
-                    v-model="registerIndividual.password"
-                    id="password"
-                    placeholder="Confirm Password"
-                    name="confirmpassword"
-                    value
-                  />
-                  <div>
-                    <div class="input-group-append">
-                      <span class="input-group-text">
-                        <eva-icon
-                          v-if="!showPassword"
-                          name="eye-off"
-                          fill="#60CBEB"
-                          @click="togglePassword()"
-                        ></eva-icon>
-                        <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
-                      </span>
-                    </div>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  :type="isPasswordShown"
+                  v-model="registerIndividual.password"
+                  id="password"
+                  placeholder="Confirm Password"
+                  name="confirmpassword"
+                  value
+                />
+                <div>
+                  <div class="input-group-append">
+                    <span class="input-group-text">
+                      <eva-icon
+                        v-if="!showPassword"
+                        name="eye-off"
+                        fill="#60CBEB"
+                        @click="togglePassword()"
+                      ></eva-icon>
+                      <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                    </span>
                   </div>
                 </div>
               </div>

src/components/user/timeshareIndividual.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div class="reg-page">
+    <hr />
+    <div class="form-group row"></div>
+    <div class="col-md-12" style="text-align:left">
+      <h4>Detailed Individual Information</h4>
+      <div class="form-group row"></div>
+      <div class="row" style="text-align:left">
+        <div class="col-md-6">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="person" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="name"
+              placeholder="Name"
+              v-model="registerIndividual.name"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="book" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="surname"
+              placeholder="Surname"
+              v-model="registerIndividual.surname"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="archive" fill="#60CBEB"></eva-icon>
+            </span>
+            <input class="form-control" type="text" name="idnumber" placeholder="ID Number" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="npm" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="companyregnumber"
+              placeholder="Company Reg Number"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="people" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="maritalstatus"
+              placeholder="Marital Status"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="email" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="email"
+              placeholder="Email Address"
+              v-model="registerIndividual.email"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="cellnumber"
+              placeholder="Cellphone Number"
+              v-model="registerIndividual.cellNumber"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="phone" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="landline"
+              placeholder="Landline Number"
+              v-model="registerIndividual.telephone"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="home" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="address"
+              placeholder="Address"
+              v-model="registerIndividual.telephone"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  props: {
+    RegisterHeader: { type: String, default: undefined },
+  },
+  name: 'PrivateIndividual',
+  data() {
+    return {
+      user: null,
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
+      select: null,
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
+    };
+  },
+  computed: {
+    ...mapState('registerIndividual', ['registerIndividual']),
+
+    Header() {
+      return this.RegisterHeader
+        ? 'Agency Administrator Details'
+        : 'Private Individual';
+    },
+  },
+  methods: {
+    ...mapActions('registerIndividual', [
+      'getIndividual',
+      'saveIndividual',
+      'updateIndividual',
+      'clearIndividual',
+    ]),
+
+    togglePassword() {
+      this.showPassword = true;
+      this.isPasswordShown = 'text';
+    },
+    passwordToggled() {
+      this.showPassword = false;
+      this.isPasswordShown = 'password';
+    },
+    SubmitData() {
+      this.saveIndividual(this.registerIndividual);
+
+      this.$router.push('/registerIndividual/');
+    },
+    Close() {
+      this.$router.push('/registerIndividual/');
+    },
+  },
+};
+</script>
+
+<style>
+.goDown {
+  margin-top: 150px;
+}
+</style>

src/router/index.js

 import PropertyType from '../components/admin/property/propertyTypeEdit.vue';
 import UserDefinedGroups from '../components/admin/property/userDefinedGroupsPage.vue';
 import UserDefinedGroup from '../components/admin/property/userDefinedGroupPage.vue';
-import UserField from '../components/admin/property/userDefinedFieldPage.vue';
 
 import AboutUs from '../components/about/aboutUsPage.vue';
 import AboutTimeshare from '../components/about/aboutTimeshare.vue';
 Vue.use(Router);
 
 export default new Router({
-  routes: [{
-    path: '/',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/about/us',
-    name: 'aboutus',
-    component: AboutUs,
-  },
-  {
-    path: '/about/timeshare',
-    name: 'abouttimeshare',
-    component: AboutTimeshare,
-  },
-  {
-    path: '/timeshare/sell',
-    name: 'TimeshareSell',
-    component: TimeshareSell,
-  },
-  {
-    path: '/timeshare/buy',
-    name: 'TimeshareBuy',
-    component: TimeshareBuy,
-  },
-  {
-    path: '/timeshare/faq',
-    name: 'TimeshareFAQ',
-    component: TimeshareFAQ,
-  },
-  {
-    path: '/user/login',
-    name: 'Login',
-    component: Login,
-  },
-  {
-    path: '/user/register',
-    name: 'PrivateIndividual',
-    component: PrivateIndividual,
-  },
-  {
-    path: '/user/registeragency',
-    name: 'Agency',
-    component: Agency,
-  },
-  {
-    path: '/property/property/:id',
-    name: 'PropertyPage',
-    component: PropertyPage,
-  },
-  {
-    path: '/property/:propertyType/search',
-    name: 'PropertySearch',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/search',
-    name: 'PropertySearchTab',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/:propType/:saleType',
-    name: 'PropertyNew',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/:id',
-    name: 'PropertyEdit',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/list/:propertyType/:user',
-    name: 'PropertyList',
-    component: PropertyList,
-  },
-  {
-    path: '/propertyTypes/list',
-    name: 'PropertyTypeList',
-    component: PropertyTypeList,
-  },
-  {
-    path: '/propertyType/new',
-    name: 'PropertyTypeNew',
-    component: PropertyType,
-  },
-  {
-    path: '/propertyType/:id',
-    name: 'PropertyTypeEdit',
-    component: PropertyType,
-  },
-  {
-    path: '/userDefinedGroups/list',
-    name: 'UserDefinedGroupsList',
-    component: UserDefinedGroups,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup/:id',
-    name: 'UserDefinedGroupEdit',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup',
-    name: 'UserDefinedGroupNew',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userField',
-    name: 'UserDefinedField',
-    component: UserField,
-  },
-  {
-    path: '/status/list',
-    name: 'StatusList',
-    component: Status,
-  },
-  {
-    path: '/status/timeshareAdmin',
-    name: 'TimeshareAdmin',
-    component: timeshareAdminPage,
-  },
-  {
-    path: '/status/tenderWeekAdmin',
-    name: 'TenderWeekAdmin',
-    component: tenderWeekAdminPage,
-  },
-  {
-    path: '/status/userManagementPage',
-    name: 'userManagementPage',
-    component: userManagementPage,
-  },
-  {
-    path: '/status/changeLogPage',
-    name: 'changeLogPage',
-    component: changeLogPage,
-  },
-  {
-    path: '/unitConfiguration/list',
-    name: 'UnitConfiguration',
-    component: UnitConfiguration,
-  },
-  {
-    path: '/contactus',
-    name: 'ContactUs',
-    component: ContactUs,
-  },
-  {
-    path: '/privacypolicy',
-    name: 'PrivacyPolicy',
-    component: PrivacyPolicy,
-  },
-  {
-    path: '/resort/:resortCode',
-    name: 'ResortPage',
-    component: ResortPage,
-    props: true,
-  },
-  {
-    path: '/resort/:resortCode/:weekId',
-    name: 'UnitPage',
-    component: UnitPage,
-    props: true,
-  },
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: HomePage,
+    },
+    {
+      path: '/about/us',
+      name: 'aboutus',
+      component: AboutUs,
+    },
+    {
+      path: '/about/timeshare',
+      name: 'abouttimeshare',
+      component: AboutTimeshare,
+    },
+    {
+      path: '/timeshare/sell',
+      name: 'TimeshareSell',
+      component: TimeshareSell,
+    },
+    {
+      path: '/timeshare/buy',
+      name: 'TimeshareBuy',
+      component: TimeshareBuy,
+    },
+    {
+      path: '/timeshare/faq',
+      name: 'TimeshareFAQ',
+      component: TimeshareFAQ,
+    },
+    {
+      path: '/user/login',
+      name: 'Login',
+      component: Login,
+    },
+    {
+      path: '/user/register',
+      name: 'PrivateIndividual',
+      component: PrivateIndividual,
+    },
+    {
+      path: '/user/registeragency',
+      name: 'Agency',
+      component: Agency,
+    },
+    {
+      path: '/property/property/:id',
+      name: 'PropertyPage',
+      component: PropertyPage,
+    },
+    {
+      path: '/property/:propertyType/search',
+      name: 'PropertySearch',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/search',
+      name: 'PropertySearchTab',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/:propType/:saleType',
+      name: 'PropertyNew',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/edit/:id/:propType/:saleType',
+      name: 'PropertyEdit',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/list/:propertyType/:user',
+      name: 'PropertyList',
+      component: PropertyList,
+    },
+    {
+      path: '/propertyTypes/list',
+      name: 'PropertyTypeList',
+      component: PropertyTypeList,
+    },
+    {
+      path: '/propertyType/new',
+      name: 'PropertyTypeNew',
+      component: PropertyType,
+    },
+    {
+      path: '/propertyType/:id',
+      name: 'PropertyTypeEdit',
+      component: PropertyType,
+    },
+    {
+      path: '/userDefinedGroups/list',
+      name: 'UserDefinedGroupsList',
+      component: UserDefinedGroups,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup/:id',
+      name: 'UserDefinedGroupEdit',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup',
+      name: 'UserDefinedGroupNew',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/status/list',
+      name: 'StatusList',
+      component: Status,
+    },
+    {
+      path: '/status/timeshareAdmin',
+      name: 'TimeshareAdmin',
+      component: timeshareAdminPage,
+    },
+    {
+      path: '/status/tenderWeekAdmin',
+      name: 'TenderWeekAdmin',
+      component: tenderWeekAdminPage,
+    },
+    {
+      path: '/status/userManagementPage',
+      name: 'userManagementPage',
+      component: userManagementPage,
+    },
+    {
+      path: '/status/changeLogPage',
+      name: 'changeLogPage',
+      component: changeLogPage,
+    },
+    {
+      path: '/unitConfiguration/list',
+      name: 'UnitConfiguration',
+      component: UnitConfiguration,
+    },
+    {
+      path: '/contactus',
+      name: 'ContactUs',
+      component: ContactUs,
+    },
+    {
+      path: '/privacypolicy',
+      name: 'PrivacyPolicy',
+      component: PrivacyPolicy,
+    },
+    {
+      path: '/resort/:resortCode',
+      name: 'ResortPage',
+      component: ResortPage,
+      props: true,
+    },
+    {
+      path: '/resort/:resortCode/:weekId',
+      name: 'UnitPage',
+      component: UnitPage,
+      props: true,
+    },
   ],
 });

src/store/modules/property/property.js

   namespaced: true,
   state: {
     property: {
-      id: 0,
+      createdBy: '',
       propertyTypeId: 0,
       propertyName: '',
       unit: '',
+      operationalCosts: 0.0,
+      price: 0,
+      pricePer: '',
+      isSale: false,
+      description: '',
+      shortDescription: '',
       addressLine1: '',
       addressLine2: '',
       addressLine3: '',
       suburbId: 0,
       cityId: 0,
       provinceId: 0,
-      price: '',
-      per: '',
-      description: '',
-      isSale: false,
+      published: false,
       propertyUserFields: [],
       propertyImages: [],
+      id: 0,
     },
     propertyImages: [],
     propertyTypes: [],
     setLatestProperties(state, properties) {
       state.latestProperties = properties;
     },
+    clearProperty(state) {
+      state.property = {
+        createdBy: '',
+        propertyTypeId: 0,
+        propertyName: '',
+        unit: '',
+        operationalCosts: 0.0,
+        price: 0,
+        pricePer: '',
+        isSale: false,
+        description: '',
+        shortDescription: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        suburbId: 0,
+        cityId: 0,
+        provinceId: 0,
+        published: false,
+        propertyUserFields: [],
+        propertyImages: [],
+        id: 0,
+      };
+    },
+    clearPropertyImages(state) {
+      state.propertyImages = [];
+    },
+    setProperties(state, properties) {
+      state.properties = properties;
+    },
   },
   getters: {},
   actions: {
     getProperty({ commit }, id) {
-      console.log(id);
       axios
-        .get(`http://localhost:57260/Property/Property/${id}`)
+        .get(`/api/Property/${id}`)
         .then(result => commit('setProperty', result.data))
         .catch(console.error);
     },
     getPropertyImages({ commit }, id) {
       axios
-        .get(`http://localhost:57260/property/PropertyImage/getpropertyimages/${id}`)
+        .get(`/api/PropertyImage/getPropertyImages/${id}`)
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
     },
     getPropertyTypes({ commit }, propertyType) {
       axios
-        .get(`http://localhost:57260/Property/PropertyType/type/${propertyType}`)
+        .get(`/api/PropertyType/type/${propertyType}`)
         .then(result => commit('setPropertyTypes', result.data))
         .catch(console.error);
     },
     getPropertyTypesRes({ commit }) {
       axios
-        .get('http://localhost:57260/Property/PropertyType/type/Residential')
+        .get('/api/PropertyType/type/Residential')
         .then(result => commit('setPropertyTypesRes', result.data))
         .catch(console.error);
     },
     getPropertyTypesCom({ commit }) {
       axios
-        .get('http://localhost:57260/Property/PropertyType/type/Commercial')
+        .get('/api/PropertyType/type/Commercial')
         .then(result => commit('setPropertyTypesCom', result.data))
         .catch(console.error);
     },
     getPropertyOverviewFields({ commit }) {
       axios
-        .get('http://localhost:57260/Property/PropertyFields/Property Overview')
+        .get('/api/PropertyFields/Property Overview')
         .then(response => commit('setPropertyOverviewFields', response.data));
     },
     getPropertyFields({ commit }, propertyType) {
       axios
-        .get(`http://localhost:57260/property/propertyfields/Propertytype/${propertyType}`)
+        .get(`/api/propertyFields/PropertyType/${propertyType}`)
         .then(response => commit('setPropertyFields', response.data));
     },
+    getPropertySavedOverviewFields({ commit }, id) {
+      axios
+        .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
+        .then(response => commit('setPropertyOverviewFields', response.data))
+        .catch(console.error);
+    },
+    getPropertySavedFields({ commit }, item) {
+      axios
+        .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
+        .then(response => commit('setPropertyFields', response.data))
+        .catch(console.error);
+    },
     saveProperty({ commit }, item) {
       axios
-        .post('http://localhost:57260/Property/Property', item)
+        .post('/api/Property', item)
         .then(result => commit('updateCurrentProperty', result.data))
         .catch(console.error);
     },
     searchPropertiesParams({ commit }, item) {
       axios
         .get(
-          `http://localhost:57260/Property/Property/Search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
+          `/api/property/search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
         )
         .then(response => commit('updateSearch', response.data))
         .catch(console.error);
     },
     searchPropertiesKeyword({ commit }, item) {
       axios
-        .get(`http://localhost:57260/Property/Property/Search/${item.keyword}`)
+        .get(`/api/Property/Search/${item.keyword}`)
         .then(response => commit('updateSearch', response.data))
         .catch(console.error);
     },
     searchLatestProperties({ commit }) {
       axios
-        .get('http://localhost:57260/property/property/latestProperties')
+        .get('/api/property/latestProperties')
         .then(response => commit('setLatestProperties', response.data))
         .catch(console.error);
     },
+    clearProperty({ commit }) {
+      commit('clearProperty');
+    },
+    clearPropertyImages({ commit }) {
+      commit('clearPropertyImages');
+    },
+    getSavedPropertyData({ commit }, item) {
+      commit('clearProperty');
+      commit('clearPropertyImages');
+
+      axios
+        .get(`/api/Property/${item.id}`)
+        .then(result => commit('setProperty', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyImage/getPropertyImages/${item.id}`)
+        .then(result => commit('setPropertyImages', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${item.id}`)
+        .then(response => commit('setPropertyOverviewFields', response.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
+        .then(response => commit('setPropertyFields', response.data))
+        .catch(console.error);
+    },
   },
 };

src/store/modules/property/propertyAdmin.js

   namespaced: true,
   state: {
     userDefinedGroups: [],
-    userDefinedGroup: null,
+    userDefinedGroup: {
+      id: 0,
+      description: '',
+      usageType: 0,
+      rank: 0,
+      fields: [],
+    },
     userFields: [],
-    userField: null,
+    userField: {
+      id: 0,
+      groupId: 0,
+      fieldName: '',
+      fieldType: '',
+      rank: 0,
+    },
   },
   mutations: {
     setUserDefinedGroups(state, groups) {
     setUserField(state, field) {
       state.userField = field;
     },
-    updateUserDefinedGroups(state, field) {
+    addUserDefinedGroups(state, field) {
       state.userDefinedGroups.push(field);
     },
+    updateUserDefinedGroups(state, field) {
+      state.userDefinedGroups.find(item => item.id === field.id).description = field.description;
+      state.userDefinedGroups.find(item => item.id === field.id).usageType = field.usageType;
+      state.userDefinedGroups.find(item => item.id === field.id).rank = field.rank;
+    },
+    addUserField(state, field) {
+      state.userFields.push(field);
+    },
+    updateUserFields(state, field) {
+      state.userFields.find(item => item.id === field.id).fieldName = field.fieldName;
+      state.userFields.find(item => item.id === field.id).fieldType = field.fieldType;
+      state.userFields.find(item => item.id === field.id).rank = field.rank;
+    },
+    removeUserDefinedGroup(state, id) {
+      state.userDefinedGroups.pop(state.userDefinedGroups.find(p => p.id === id));
+    },
+    removeUserField(state, id) {
+      state.userFields.pop(state.userFields.find(p => p.id === id));
+    },
+    clearUserGroup(state) {
+      state.userDefinedGroup = {
+        id: 0,
+        description: '',
+        usageType: 0,
+        rank: 0,
+      };
+    },
+    clearUserField(state) {
+      state.userField = {
+        id: 0,
+        fieldName: '',
+        fieldType: '',
+        rank: 0,
+      };
+    },
+    clearUserFields(state) {
+      state.userFields = [];
+    },
   },
   getters: {},
   actions: {
     getUserDefinedGroups({ commit }) {
       axios
-        .get('http://localhost:57260/Property/UserDefinedGroup')
+        .get('/api/UserDefinedGroup')
         .then(result => commit('setUserDefinedGroups', result.data))
         .catch(console.error);
     },
-    getUserDefinedGroup({ commit }, item) {
+    getUserDefinedGroup({ commit }, id) {
       axios
-        .get(`http://localhost:57260/Property/UserDefinedGroup/${item.id}`)
+        .get(`/api/UserDefinedGroup/${id}`)
         .then(result => commit('setUserDefinedGroup', result.data))
         .catch(console.error);
     },
-    getUserFields({ commit }, item) {
+    getUserFields({ commit }, groupId) {
       axios
-        .get(`http://localhost:57260/Property/UserDefinedField/group/${item.groupId}`)
+        .get(`/api/UserDefinedField/group/${groupId}`)
         .then(result => commit('setUserFields', result.data))
         .catch(console.error);
     },
-    getUserField({ commit }, item) {
+    getUserField({ commit }, id) {
       axios
-        .get(`http://localhost:57260/Property/UserDefinedField/${item.id}`)
+        .get(`/api/UserDefinedField/${id}`)
         .then(result => commit('setUserField', result.data))
         .catch(console.error);
     },
     saveUserDefinedGroup({ commit }, item) {
       axios
-        .post('http://localhost:57260/Property/UserDefinedGroup', item.group)
-        .then(response => commit('updateUserDefinedGroups', response.data))
+        .post('/api/UserDefinedGroup', item)
+        .then(response => commit('addUserDefinedGroups', response.data))
         .catch(console.error);
     },
     updateUserDefinedGroup({ commit }, item) {
       axios
-        .put('http://localhost:57260/Property/UserDefinedGroup', item.group)
+        .put('/api/UserDefinedGroup', item)
         .then(response => commit('updateUserDefinedGroups', response.data))
         .catch(console.error);
     },
-    // deleteUserDefinedGroup(item) {
-    //   axios
-    //     .delete(`http://localhost:57260/Property/UserDefinedField/${item.id}`)
-    //     .then((response) => {})
-    //     .catch(console.error);
-    // },
+    saveUserField({ commit }, item) {
+      axios
+        .post('/api/UserDefinedField', item)
+        .then(response => commit('addUserField', response.data))
+        .catch(console.error);
+    },
+    updateUserField({ commit }, item) {
+      axios
+        .put('/api/UserDefinedField', item)
+        .then(response => commit('updateUserFields', response.data))
+        .catch(console.error);
+    },
+    deleteUserDefinedGroup({ commit }, id) {
+      axios
+        .delete(`/api/UserDefinedGroup/${id}`)
+        .then(result => commit('removeUserDefinedGroup', id))
+        .catch(console.error);
+    },
+    deleteUserField({ commit }, id) {
+      axios
+        .delete(`/api/UserDefinedField/${id}`)
+        .then(result => commit('removeUserField', id))
+        .catch(console.error);
+    },
+    clearUserGroup({ commit }) {
+      commit('clearUserGroup');
+    },
+    clearUserField({ commit }) {
+      commit('clearUserField');
+    },
+    clearUserFields({ commit }) {
+      commit('clearUserFields');
+    },
   },
 };

src/store/modules/property/propertyLists.js

   actions: {
     getProperties({ commit }, item) {
       axios
-        .get(`http://localhost:57260/Property/property/${item.propertyType}/${item.user}`)
+        .get(`/api/property/${item.propertyType}/${item.user}`)
         .then(result => commit('setProperties', result.data))
         .catch(console.error);
     },

src/store/modules/property/propertyTypes.js

   actions: {
     getPropertyTypes({ commit }) {
       axios
-        .get('http://localhost:57260/Property/PropertyType')
+        .get('/api/PropertyType')
         .then(result => commit('setPropertyTypes', result.data))
         .catch(console.error);
     },
     getPropertyType({ commit }, id) {
       axios
-        .get(`http://localhost:57260/Property/PropertyType/${id}`)
+        .get(`/api/PropertyType/${id}`)
         .then(result => commit('setPropertyType', result.data))
         .catch(console.error);
     },
     savePropertyType({ commit }, item) {
       axios
-        .post('http://localhost:57260/Property/PropertyType', item)
+        .post('/api/PropertyType', item)
         .then(result => commit('addToPropertyTypes', result.data))
         .catch(console.error);
     },
     updatePropertyType({ commit }, item) {
       axios
-        .put('http://localhost:57260/Property/PropertyType', item)
+        .put('/api/PropertyType', item)
         .then(result => commit('updatePropertyTypes', item))
         .catch(console.error);
     },
     },
     deletePropertyType({ commit }, id) {
       axios
-        .delete(`http://localhost:57260/Property/PropertyType/${id}`)
+        .delete(`/api/PropertyType/${id}`)
         .then(result => commit('removePropertyType', id))
         .catch(console.error);
     },

src/store/modules/searchTab.js

   actions: {
     getProvince({ commit }) {
       axios
-        .get('http://localhost:57260/region/province')
+        .get('/api/province')
         .then(result => commit('setProvince', result.data))
         .catch(console.error);
     },
     getCities({ commit }, item) {
       axios
-        .get(`http://localhost:57260/region/city/getby/${item.province}`)
+        .get(`/api/city/getBy/${item.province}`)
         .then(result => commit('setCities', result.data));
     },
     getSuburbs({ commit }, item) {
       axios
-        .get(`http://localhost:57260/region/Suburb/${item.province}/${item.city}`)
+        .get(`/api/Suburb/${item.province}/${item.city}`)
         .then(result => commit('setSuburbs', result.data));
     },
   },

src/store/modules/user/register.js

     //   commit,
     // }, id) {
     //   axios
-    //     .get(`http://localhost:57260/api/user/${id}`)
+    //     .get(`http://192.168.6.188:5000/api/user/${id}`)
     //     .then(result => commit('setIndividual', result.data))
     //     .catch(console.error);
     // },
     //   commit,
     // }, id) {
     //   axios
-    //     .get(`http://localhost:57260/api/agency/${id}`)
+    //     .get(`http://192.168.6.188:5000/api/agency/${id}`)
     //     .then(result => commit('setAgency', result.data))
     //     .catch(console.error);
     // },
       commit,
     }, item) {
       axios
-        .post('http://localhost:57260/api/register/register', item)
+        .post('http://192.168.6.188:5000/api/register/register', item)
         .then(result => commit('addIndividual', result.data))
         .catch(console.error);
     },
       commit,
     }, item) {
       axios
-        .post('http://localhost:57260/api/register/registeragency', item)
+        .post('http://192.168.6.188:5000/api/register/registeragency', item)
         .then(result => commit('addAgency', result.data))
         .catch(console.error);
     },
     //   commit,
     // }, item) {
     //   axios
-    //     .put('http://localhost:57260/api/individual', item)
+    //     .put('http://192.168.6.188:5000/api/individual', item)
     //     .then(result => commit('updateIndividual', item))
     //     .catch(console.error);
     // },
     //   commit,
     // }, item) {
     //   axios
-    //     .put('http://localhost:57260/api/agency', item)
+    //     .put('http://192.168.6.188:5000/api/agency', item)
     //     .then(result => commit('updateAgency', item))
     //     .catch(console.error);
     // },
     //   commit,
     // }, id) {
     //   axios
-    //     .delete(`http://localhost:57260/api/individual/${id}`)
+    //     .delete(`http://192.168.6.188:5000/api/individual/${id}`)
     //     .then(result => commit('removeIndividual', id))
     //     .catch(console.error);
     // },
     //   commit,
     // }, id) {
     //   axios
-    //     .delete(`http://localhost:57260/api/agency/${id}`)
+    //     .delete(`http://192.168.6.188:5000/api/agency/${id}`)
     //     .then(result => commit('removeAgency', id))
     //     .catch(console.error);
     // },