API Post Merge Conflict

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/misc/contactUs.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div class="container">
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h1 class="title-single" style="text-align:left;">Contact Us</h1>
-            </div>
-          </div>
+    <div class="row">
+      <div class="col-sm-12">
+        <div class="faq-img-box">
+          <img
+            src="img/contact-us.jpg"
+            alt="Frequently Asked Questions"
+            class="img-fluid"
+            style="width:800px;height:400px;"
+          />
+        </div>
+        <div class="sinse-box">
+          <h3 class="sinse-title">
+            Contact Us
+            <span></span>
+          </h3>
         </div>
       </div>
-    </section>
-    <div class="map-wrapper">
-      <div class="map-canvas" id="map-canvas"></div>
-      <a
-        href="https://www.google.com/maps/dir/-25.8228224,28.3344896/vacation+recreational+services/@-25.8231034,28.3341882,16z/data=!3m1!4b1!4m9!4m8!1m1!4e1!1m5!1m1!1s0x1e955dadbb47bacd:0x3d299aff0be5b416!2m2!1d28.3426415!2d-25.8229739"
-        target="_blank"
-      ></a>
-      <iframe
-        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1216.2235430439846!2d28.360457474768342!3d-25.79363191616322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x445462e3d06f67fc!2sLombardy+Business+Park!5e0!3m2!1sen!2sza!4v1566222826763!5m2!1sen!2sza"
-        width="1100"
-        height="450"
-        frameborder="0"
-        style="border:0"
-        allowfullscreen
-      ></iframe>
-      <br />
-      <br />
-    </div>
+      <div class="container col-md-10">
+        <br />
+        <div class="map-wrapper">
+          <div class="map-canvas" id="map-canvas"></div>
+          <a
+            href="https://www.google.com/maps/dir/-25.8228224,28.3344896/vacation+recreational+services/@-25.8231034,28.3341882,16z/data=!3m1!4b1!4m9!4m8!1m1!4e1!1m5!1m1!1s0x1e955dadbb47bacd:0x3d299aff0be5b416!2m2!1d28.3426415!2d-25.8229739"
+            target="_blank"
+          ></a>
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1216.2235430439846!2d28.360457474768342!3d-25.79363191616322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x445462e3d06f67fc!2sLombardy+Business+Park!5e0!3m2!1sen!2sza!4v1566222826763!5m2!1sen!2sza"
+            width="900"
+            height="450"
+            frameborder="0"
+            style="border:0"
+            allowfullscreen
+          ></iframe>
+          <br />
+          <br />
+        </div>
 
-    <div class="row mb-8">
-      <div class="col-md-6">
-        <form action="mailto:info@univateproperties.co.za" method="post" enctype="text/plain">
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="yourname"></label>
-              <input
-                id="yourname"
-                name="yourname"
-                placeholder="Your Name"
-                type="text"
-                required="required"
-                class="form-control"
-              />
-            </div>
-            <div class="col-md-6">
-              <label for="youremail"></label>
-              <input
-                id="youremail"
-                name="youremail"
-                placeholder="Your Email"
-                type="text"
-                required="required"
-                class="form-control"
-              />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-12">
-              <label for="subject"></label>
-              <input
-                id="subject"
-                name="subject"
-                placeholder="Subject"
-                type="text"
-                class="form-control"
-                required="required"
-              />
-            </div>
+        <div class="row mb-8">
+          <div class="col-md-6">
+            <form action="mailto:info@univateproperties.co.za" method="post" enctype="text/plain">
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="yourname"></label>
+                    <input
+                      id="yourname"
+                      name="yourname"
+                      placeholder="Your Name"
+                      type="text"
+                      required="required"
+                      class="form-control"
+                    />
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="youremail"></label>
+                    <input
+                      id="youremail"
+                      name="youremail"
+                      placeholder="Your Email"
+                      type="text"
+                      required="required"
+                      class="form-control"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-12">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="bookmark-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="subject"></label>
+                    <input
+                      id="subject"
+                      name="subject"
+                      placeholder="Subject"
+                      type="text"
+                      class="form-control"
+                      required="required"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-12">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="message-square-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="message"></label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      placeholder="Message"
+                      cols="40"
+                      rows="8"
+                      class="form-control"
+                      required="required"
+                    ></textarea>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-1">
+                  <button name="submit" type="submit" class="btn btn-b-n">Send Message</button>
+                </div>
+              </div>
+            </form>
           </div>
-          <div class="form-group row">
-            <div class="col-md-12">
-              <label for="message"></label>
-              <textarea
-                id="message"
-                name="message"
-                placeholder="Message"
-                cols="40"
-                rows="6"
-                class="form-control"
-                required="required"
-              ></textarea>
-            </div>
+          <div class="col-md-6">
+            <eva-icon name="pin-outline" fill="#60CBEB"></eva-icon>
+            <a style="font-size: 25px">Find us in</a>
+            <p></p>
+            <p>
+              105 Lombardy Business Park
+              <br />Cnr. Graham and Cole Rd.
+              <br />Shere, Pretoria, 0084
+            </p>
+            <br />
+            <eva-icon name="paper-plane-outline" fill="#60CBEB"></eva-icon>
+            <a style="font-size: 25px">Say Hello</a>
+            <p></p>
+            <p>
+              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+              <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
+              <br />
+              <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
+              <a href="tel:+27124921238">+27 (0) 12 492 1238</a>
+            </p>
+            <br />
+            <eva-icon name="share-outline" fill="#60CBEB"></eva-icon>
+            <a style="font-size: 25px">Social Networks</a>
+            <p>
+              <a href="https://www.facebook.com/univateproperties/">
+                <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
+              </a>
+            </p>
           </div>
-          <div class="form-group row">
-            <div class="col-md-1">
-              <button name="submit" type="submit" class="btn btn-b-n">Send Message</button>
+        </div>
+        <div
+          class="modal fade"
+          id="thankYouModal"
+          tabindex="-1"
+          role="dialog"
+          aria-labelledby="contactModalLabel"
+          aria-hidden="true"
+        >
+          <div class="modal-dialog" role="document">
+            <div class="modal-content px-0 px-md-4">
+              <div class="modal-header">
+                <h5 class="modal-title" id="contactModalLabel">Thank you</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <p>Thank you for contacting us. We will contact you as soon as possible.</p>
+              </div>
             </div>
           </div>
-        </form>
-      </div>
-      <div class="col-md-6">
-        <eva-icon name="pin-outline" fill="#60CBEB"></eva-icon>
-        <a style="font-size: 25px">Find us in</a>
-        <p></p>
-        <p>
-          105 Lombardy Business Park
-          <br />Cnr. Graham and Cole Rd.
-          <br />Shere, Pretoria, 0084
-        </p>
-        <br />
-        <eva-icon name="paper-plane-outline" fill="#60CBEB"></eva-icon>
-        <a style="font-size: 25px">Say Hello</a>
-        <p></p>
-        <p>
-          <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
-          <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
-          <br />
-          <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
-          <a href="tel:+27124921238">+27 (0) 12 492 1238</a>
-        </p>
-        <br />
-        <eva-icon name="share-outline" fill="#60CBEB"></eva-icon>
-        <a style="font-size: 25px">Social Networks</a>
-        <p>
-          <a href="https://www.facebook.com/univateproperties/">
-            <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
-          </a>
-        </p>
-      </div>
-    </div>
-    <div
-      class="modal fade"
-      id="thankYouModal"
-      tabindex="-1"
-      role="dialog"
-      aria-labelledby="contactModalLabel"
-      aria-hidden="true"
-    >
-      <div class="modal-dialog" role="document">
-        <div class="modal-content px-0 px-md-4">
-          <div class="modal-header">
-            <h5 class="modal-title" id="contactModalLabel">Thank you</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p>Thank you for contacting us. We will contact you as soon as possible.</p>
-          </div>
         </div>
       </div>
     </div>

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="col-sm-12">
-      <div class="about-img-box">
-        <img
-          src="img/Johannesburg-south-africa-1.jpg"
-          alt="Property Listing"
-          class="img-fluid"
-          style="width:800px;height:400px;"
-        />
-      </div>
-      <div class="sinse-box">
-        <h3 class="sinse-title">
-          Property Listing
-          <span></span>
-        </h3>
+    <div class="container col-md-12" v-if="propertyType === 'Residential'">
+      <div class="col-sm-12">
+        <div class="about-img-box">
+          <img
+            src="img/Pretoria-South-Africa.jpg"
+            alt="Property Listing"
+            class="img-fluid"
+            style="width:800px;height:400px;"
+          />
+        </div>
+        <div class="sinse-box">
+          <h3 class="sinse-title">
+            Property Listing
+            <span></span>
+          </h3>
+        </div>
       </div>
-    </div>
-    <br />
-    <div class="container col-md-10" v-if="propertyType === 'Residential'">
+      <br />
       <div class="row">
         <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>
       </div>
       <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
+            src="img/Johannesburg-south-africa-1.jpg"
+            alt="Property Listing"
+            class="img-fluid"
+            style="width:800px;height:400px;"
+          />
+        </div>
+        <div class="sinse-box">
+          <h3 class="sinse-title">
+            Property Listing
+            <span></span>
+          </h3>
+        </div>
+      </div>
+      <br />
       <div class="row">
         <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

                   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/searchTimeshare.vue

 <template>
-  <div>
+  <div class="container">
     <form
       id="mainForm"
       method="POST"
       accept-charset="UTF-8"
       enctype="multipart/form-data"
     >
-      <div class="form-group">
+      <div class="form-group text-left">
+        <label>Region</label>
         <select class="form-control" name="region" id="region" v-model="selectedRegion">
           <option v-for="(item, i) in regions" :key="i">{{item.regionName}}</option>
         </select>
       </div>
-      <div class="form-group">
+      <div class="form-group text-left">
+        <label>Resort Name</label>
         <select class="form-control" name="resort" id="resort" v-model="selectedResort">
           <option v-for="(item, i) in filteredResorts" :key="i">{{item.resortName}}</option>
         </select>
       </div>
-      <div class="form-group">
-        <select class="form-control" id="resort" name="resort">
-          <option value>Resort</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <select class="form-control" name="season">
-          <option value>
-            <span style="color:white;">Season</span>
-          </option>
-        </select>
-      </div>
-      <div class="form-group">
-        <select class="form-control" name="bedrooms">
-          <option value>Bedrooms</option>
+      <div class="form-group text-left">
+        <label>Bedrooms</label>
+        <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
+          <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
         </select>
       </div>
-
-      <div class="form-group">
-        <input
-          class="form-control"
-          type="number"
-          step="any"
-          id="minPrice"
-          name="minPrice"
-          placeholder="Minimum Price"
-        />
-      </div>
+      <hr />
       <div class="form-group">
-        <input
-          class="form-control"
-          type="number"
-          step="any"
-          id="maxPrice"
-          name="maxPrice"
-          placeholder="Maximum Price"
-        />
+        <div class="row">
+          <div class="col-md-6 text-left">
+            <label>Minimum Price</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text">R</span>
+              </div>
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="minPrice"
+                name="minPrice"
+                placeholder="Minimum Price"
+              />
+            </div>
+          </div>
+          <div class="col-md-6 text-left">
+            <label>Maximum Price</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text">R</span>
+              </div>
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="maxPrice"
+                name="maxPrice"
+                placeholder="Maximum Price"
+              />
+            </div>
+          </div>
+        </div>
       </div>
+      <hr />
       <div class="form-group">
-        <label>Filter Arrival Date From</label>
-        <input type="date" class="form-control" name="arrivaldate" value />
+        <div class="row">
+          <div class="col-md-6 text-left">
+            <label>Filter Arrival Date From</label>
+            <input type="date" class="form-control" name="arrivaldate" value />
+          </div>
+          <div class="col-md-6 text-left">
+            <label>Filter Arrival Date To</label>
+            <input type="date" class="form-control" name="arrivaldate" value />
+          </div>
+        </div>
       </div>
-      <div class="form-group">
-        <label>Filter Arrival Date To</label>
-        <input type="date" class="form-control" name="arrivaldate" value />
-      </div>
-
-      <br />
-
-      <button class="btn btn-b-n" type="submit">Search</button>
     </form>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import _ from 'lodash';
 
 export default {
   data() {

src/components/timeshare/sell/sellPage.vue

         <hr />
       </div>
     </div>
-    <div v-for="(item, i) in sellItem" :key="i">{{item}}</div>
     <div class="row mb-4">
       <div class="container col-md-10">
         <form
             <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>

src/components/user/loginPage.vue

             <h4>Login</h4>
           </div>
           <div class="row">
-            <div>
-              <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-            </div>
-            <div class="col-md-11">
-              <input
-                class="form-control"
-                v-model="username"
-                placeholder="Username"
-                type="text"
-                name="username"
-                value
-              />
-            </div>
-            <div>
-              <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>
-            </div>
-            <div class="col-md-11">
-              <input
-                class="form-control"
-                :type="isPasswordShown"
-                v-model="password"
-                id="password"
-                placeholder="Password"
-                name="password"
-                value
-              />
+            <div class="col-md-11" 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"
+                    value
+                  />
+                </div>
+              </div>
+              <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="password"
+                    id="password"
+                    placeholder="Password"
+                    name="password"
+                    value
+                  />
+                  <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>
             </div>
           </div>
           <div class="form-group row"></div>
           <h5>Trouble signing in?</h5>
           <div>
             <div class="row">
-              <eva-icon name="email" fill="#60CBEB"></eva-icon>
-
-              <div class="col-md-11">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                </span>
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
               </div>
             </div>

src/components/user/registerAgencySection.vue

       <div class="reg-page">
         <div class="regform" style="text-align:left">
           <h4>Agency Details</h4>
-          <div class="col-md-8" style="margin-bottom: 1em">
-            <eva-icon name="people" fill="#60CBEB"></eva-icon>
-            <input
-              class="form-control"
-              type="text"
-              name="agencyname"
-              placeholder="Agency Name"
-              v-model="registerAgency.name"
-            />
-          </div>
-          <div class="col-md-8" style="margin-bottom: 1em">
-            <eva-icon name="book" fill="#60CBEB"></eva-icon>
-            <input
-              class="form-control"
-              type="text"
-              name="eaabffcnumber"
-              placeholder="EAAB FFC Number"
-              v-model="registerAgency.eaabeffcNumber"
-            />
-          </div>
-          <div class="col-md-8">
-            <eva-icon name="clipboard" fill="#60CBEB"></eva-icon>
-            <input
-              class="form-control"
-              type="text"
-              name="companyregnumber"
-              placeholder="Company Registration Number"
-              v-model="registerAgency.companyRegNumber"
-            />
+          <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>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="agencyname"
+                  placeholder="Agency Name"
+                  v-model="registerAgency.name"
+                />
+              </div>
+            </div>
+            <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>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="eaabffcnumber"
+                  placeholder="EAAB FFC Number"
+                  v-model="registerAgency.eaabeffcNumber"
+                />
+              </div>
+            </div>
+            <div class="col-md-8">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="clipboard" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="companyregnumber"
+                  placeholder="Company Registration Number"
+                  v-model="registerAgency.companyRegNumber"
+                />
+              </div>
+            </div>
           </div>
           <hr />
           <div class="col-md-10" style="text-align:left">
             <h5 style="margin-bottom: 1em">Agency Administrator</h5>
             <div class="row" style="text-align:left">
-              <div class="col-md-6" 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>
                 </div>
               </div>
 
-              <div class="col-md-6" 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"
+                    type="number"
                     name="cellnumber"
-                    placeholder="Contact Number"
+                    placeholder="Cellphone Number"
                     v-model="registerAgency.user.cellNumber"
                   />
                 </div>
               </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="landlinenumber"
+                    placeholder="Landline Number"
+                    v-model="registerAgency.user.telephone"
+                  />
+                </div>
+              </div>
             </div>
-
+            <hr />
             <div class="row">
               <div class="input-group mb-3">
                 <div class="input-group-prepend">

src/components/user/registerPage.vue

 <template>
+  <!-- eslint-disable max-len -->
   <form>
-    <!-- eslint-disable max-len -->
     <div class="reg-page">
       <div class="regform">
         <div class="col-md-10" style="text-align:left">
-          <h5 style="margin-bottom: 1em">{{ Header }}</h5>
+          <h4>Private Individual</h4>
           <div class="row" style="text-align:left">
-            <div class="col-md-6" style="margin-bottom: 1em">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="name"
-                placeholder="Name"
-                v-model="registerIndividual.name"
-              />
+            <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>
+                </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">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="surname"
-                placeholder="Surname"
-                v-model="registerIndividual.surname"
-              />
+            <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>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="surname"
+                  placeholder="Surname"
+                  v-model="registerIndividual.surname"
+                />
+              </div>
             </div>
           </div>
 
           <div class="row" style="text-align:left">
-            <div class="col-md-8">
-              <eva-icon name="email" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="email"
-                placeholder="Email Address"
-                v-model="registerIndividual.email"
-              />
-              <div class="form-group row"></div>
+            <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>
             </div>
 
-            <div class="col-md-6" style="text-align:left">
-              <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="cellnumber"
-                placeholder="Contact Number"
-                v-model="registerIndividual.cellNumber"
-              />
+            <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>
+              <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>
           </div>
           <hr />
           <div class="row">
-            <div class="col-md-7" style="margin-bottom: 1em">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="username"
-                placeholder="Username"
-                v-model="registerIndividual.username"
-              />
+            <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>
             </div>
-            <div class="col-md-7" style="margin-bottom: 1em">
-              <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                :type="isPasswordShown"
-                v-model="registerIndividual.password"
-                id="password"
-                placeholder="Password"
-                name="password"
-                value
-              />
+            <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>
             </div>
-            <div class="col-md-7" style="margin-bottom: 1em">
-              <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                :type="isPasswordShown"
-                v-model="registerIndividual.password"
-                id="password"
-                placeholder="Confirm Password"
-                name="confirmpassword"
-                value
-              />
-              <div>
-                <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>
+            <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>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="form-group row"></div>
-        <div class="row offset-md-1">
-          <div class="col-md-2">
-            <button @click="SubmitData()" class="btn btn-b-n" type="submit">Submit</button>
-          </div>
-          <div class="col-md-2 offset-md-1">
-            <button @click="Cancel()" class="btn btn-b-n" type="submit">Cancel</button>
+          <div class="form-group row"></div>
+          <div class="row offset-md-1">
+            <div class="col-md-2">
+              <button @click="SubmitData()" class="btn btn-b-n" type="submit">Submit</button>
+            </div>
+            <div class="col-md-2 offset-md-1">
+              <button @click="Cancel()" class="btn btn-b-n" type="submit">Cancel</button>
+            </div>
           </div>
         </div>
       </div>

src/main.js

 import Vue from 'vue';
 import EvaIcons from 'vue-eva-icons';
-import FileUpload from 'v-file-upload';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
 Vue.use(EvaIcons);
-Vue.use(FileUpload);
 
 Vue.config.productionTip = false;
 

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/timeshare/status.js

   },
   getters: {},
   actions: {
-    getStatusList({
-      commit,
-    }) {
-      axios.get('/api/status')
+    getStatusList({ commit }) {
+      axios
+        .get('/api/status')
         .then(result => commit('setStatusList', result.data))
         .catch(console.error);
     },

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);
     // },

vue.config.js

   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:57260',
+        target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
     },