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

src/App.vue

   height: 100%;
   margin: 0;
 }
+.isSelected {
+  border-color: white white #60cbeb white;
+}
+.isUnSelected {
+  border-color: white white white white;
+}
+.tabButton {
+  display: block;
+  padding: 0.5rem 1rem;
+  background-color: white;
+  border-style: none none solid none;
+  width: 100px;
+}
+.top-left {
+  position: absolute;
+  top: 8px;
+  width: 350px;
+  color: white;
+}
+.normalText {
+  background-color: #60cbeb;
+}
+.pendingOffer {
+  background-color: #ff8344;
+}
 </style>
 
 <style scoped>

src/assets/staticData/maritalStatus.js

-const items = ['ICOP (In Community of Property)', 'OCOP (Out of Community of Property)', 'Other',
-  'Traditional Wedding', 'Single', 'Divorced', 'Widow', 'Committed Relationship', 'Partner',
+const items = [
+  { id: 1, description: 'ICOP (In Community of Property)' },
+  { id: 2, description: 'OCOP (Out of Community of Property)' },
+  { id: 3, description: 'Other' },
+  { id: 4, description: 'Traditional Wedding' },
+  { id: 5, description: 'Single' },
+  { id: 6, description: 'Divorced' },
+  { id: 7, description: 'Widow' },
+  { id: 8, description: 'Committed Relationship' },
+  { id: 9, description: 'Partner' },
 ];
 export default items;

src/components/admin/status/agentsUserManagementPage.vue

       <table class="table table-bordered">
         <thead>
           <tr>
-            <td colspan="10">
+            <td colspan="11">
               <div class="myWell">
                 <h4>Agents</h4>
               </div>
             <th>
               <b>Remove</b>
             </th>
+            <th>
+              <b>Soft Delete</b>
+            </th>
           </tr>
         </thead>
         <tbody>
                 style="width: 85px; height:40px; color:#60CBEB"
               >Delete</button>
             </td>
+            <td>{{ item.isDeleted}}</td>
           </tr>
         </tbody>
       </table>
       visibleItemsPerPageCount: 0,
       currentPage: 1,
       item: {},
-      delete: false,
     };
   },
   methods: {

src/components/admin/status/userManagementPage.vue

       <table class="table table-bordered">
         <thead>
           <tr>
-            <td colspan="10">
+            <td colspan="11">
               <div class="myWell">
                 <h4>Private Users</h4>
               </div>
             <th>
               <b>Remove</b>
             </th>
+            <th>
+              <b>Soft Delete</b>
+            </th>
           </tr>
         </thead>
         <tbody>
                 style="margin:2px; color: #60CBEB"
               >Delete</button>
             </td>
+            <td>{{ item.isDeleted }}</td>
           </tr>
         </tbody>
       </table>

src/components/misc/address.vue

       <div class="row" style="text-align:left">
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Street Number *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="streetnumber"
-              v-model="address.streetNumber"
-            />
-          </div>
+          <prop-field
+            :display="address.streetNumber"
+            :editType="'text'"
+            :propertyName="'streetNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Street Name *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="streetname" v-model="address.streetName" />
-          </div>
+          <prop-field
+            :display="address.street"
+            :editType="'text'"
+            :propertyName="'street'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Province *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <select
-              class="form-control"
-              name="propertyType"
-              id="propertyType"
-              @change="ProvinceSelected"
-              v-model="address.province"
-            >
-              <option value="0">Please select province</option>
-              <option
-                v-for="province in provinces"
-                :value="province.id"
-                :key="province.description"
-              >{{ province.description }}</option>
-            </select>
-          </div>
+          <propField
+            :display="address.province"
+            :editType="'selector'"
+            :arrayObject="provinces"
+            :propertyName="'province'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
 
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>City *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <select
-              class="form-control"
-              name="propertyType"
-              id="propertyType"
-              @change="CitySelected"
-              v-model="address.city"
-            >
-              <option value="0">Please select city</option>
-              <option
-                v-for="city in cities"
-                :value="city.description"
-                :key="city.id"
-              >{{ city.description }}</option>
-            </select>
-          </div>
+          <propField
+            :display="address.city"
+            :editType="'selector'"
+            :arrayObject="cities"
+            :propertyName="'city'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Suburb *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <select
-              class="form-control"
-              name="propertyType"
-              id="suburbselector"
-              v-model="address.suburb"
-              @change="getPostalCode"
-            >
-              <option value="0">Please select suburb</option>
-              <option
-                v-for="suburb in suburbs"
-                :value="suburb.description"
-                :key="suburb.description"
-              >{{ suburb.description }}</option>
-            </select>
-          </div>
+          <propField
+            :display="address.suburb"
+            :editType="'selector'"
+            :arrayObject="suburbs"
+            :propertyName="'suburb'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Postal Code *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="postalcode" v-model="address.postalCode" />
-          </div>
+          <propField
+            :display="address.postalCode"
+            :editType="'text'"
+            :propertyName="'postalCode'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
       </div>
     </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import propField from '../property/propertyFieldEditor.vue';
 
 export default {
+  components: {
+    propField,
+  },
   data() {
     return {
       propertyType: 'Residential',
         item.target.options.selectedIndex - 1
       ].postalCode;
     },
+    UpdateValue(item) {
+      if (item.fieldName) {
+        if (item.fieldName === 'streetNumber') {
+          this.address.streetNumber = item.value;
+        }
+        if (item.fieldName === 'street') {
+          this.address.street = item.value;
+        }
+        if (item.fieldName === 'province') {
+          if (item.value !== '') {
+            this.address.province = item.value;
+            this.getCities(Object.assign({}, { province: item.value }));
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.province = null;
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.cities = [];
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'city') {
+          if (item.value !== '') {
+            this.address.city = item.value;
+            // this.address.city = newCity;
+            // this.address.cityId = newCity.id;
+            this.getSuburbs(
+              Object.assign(
+                {},
+                {
+                  province: item.value,
+                  city: item.value,
+                },
+              ),
+            );
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'suburb') {
+          if (item.value !== '') {
+            // const newSuburb = this.suburbs.find(
+            //   p => p.description === item.value,
+            // );
+            // this.address.suburb = newSuburb;
+            // this.address.suburbId = newSuburb.id;
+            console.log(item.value);
+            this.address.suburb = item.value;
+            this.address.postalCode = this.address.suburb.postalCode;
+          } else {
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          }
+        }
+      }
+    },
   },
   mounted() {
     this.getProvince();

src/components/property/propertyCard.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div>
     <div class="form-group row" v-if="showSort">
       <button
         style="width: 150px; height:40px;"
         @click="sortHighPrice()"
       >Highest Price</button>
+      <button
+        v-if="salesType === 'Rent'"
+        type="button"
+        class="btn btn-link font-weight-bold color-b"
+        style="width: 150px; height:40px;"
+        @click="sortDateAvailable()"
+      >Date Available</button>
       <hr />
     </div>
     <div class="form-group row">
                 class="img-a img-fluid"
                 style="height:466px; width:350px; object-fit: cover;"
               />
+              <p
+                v-if="!currentProperty.isSale"
+                :class="[currentProperty.hasPendingOffer ? 'top-left pendingOffer' : 'top-left normalText']"
+              >
+                <strong>{{ currentProperty.available }}</strong>
+              </p>
+              <p
+                v-if="currentProperty.isSale  && currentProperty.hasPendingOffer"
+                class="top-left pendingOffer"
+              >
+                <strong>{{ currentProperty.available }}</strong>
+              </p>
             </div>
             <div class="card-overlay">
               <div class="card-overlay-a-content">
                       :to="`/property/property/${currentProperty.id}`"
                       class="link-a"
                     >{{ currentProperty.shortDescription }}</router-link>
+                    <router-link
+                      v-if="!currentProperty.isSale"
+                      :to="`/property/property/${currentProperty.id}`"
+                      class="link-a"
+                    ></router-link>
                   </h4>
                   <h4 class="card-title-c">
                     <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
+    salesType: { type: String, default: 'Rent' },
   },
   methods: {
     sortHighPrice() {
         return 0;
       }
 
+      return this.properties.sort(compare);
+    },
+    sortDateAvailable() {
+      function compare(a, b) {
+        if (a.dateAvailable > b.dateAvailable) return 1;
+        if (a.dateAvailable < b.dateAvailable) return -1;
+        return 0;
+      }
+
       return this.properties.sort(compare);
     },
   },

src/components/property/propertyCreate.vue

                     @change="PropertyTypeSelected"
                   >
                     <option value="0">Please select type</option>
-                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
+                      {{
                       item.description
-                    }}</option>
+                      }}
+                    </option>
                   </select>
                 </div>
                 <div v-if="showPropertyTypeError">
                     v-model="property.provinceId"
                   >
                     <option value="0">Please select province</option>
-                    <option v-for="province in provinces" :value="province.id" :key="province.id">{{
+                    <option v-for="province in provinces" :value="province.id" :key="province.id">
+                      {{
                       province.description
-                    }}</option>
+                      }}
+                    </option>
                   </select>
                 </div>
                 <div v-if="showProvinceError">
                     v-model="property.cityId"
                   >
                     <option value="0">Please select city</option>
-                    <option v-for="city in cities" :value="city.id" :key="city.id">{{
+                    <option v-for="city in cities" :value="city.id" :key="city.id">
+                      {{
                       city.description
-                    }}</option>
+                      }}
+                    </option>
                   </select>
                 </div>
                 <div v-if="showCityError">
                     @change="getPostalCode"
                   >
                     <option value="0">Please select suburb</option>
-                    <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">{{
+                    <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">
+                      {{
                       suburb.description
-                    }}</option>
+                      }}
+                    </option>
                   </select>
                 </div>
                 <div v-if="showSuburbError">
                 </div>
               </div>
             </div>
+            <div class="form-group row" v-if="salesType === 'Rental'">
+              <div class="col-md-12">
+                <input
+                  type="date"
+                  class="form-control"
+                  name="date"
+                  v-model="property.dateAvailable"
+                />
+              </div>
+            </div>
             <div class="form-group row">
               <div class="col-md-12">
                 <label for="Property Description">Description</label>
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >
-              Save
-            </button>
+            >Save</button>
             <div
               v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
             >
-              <p class="alert myError">
-                Missing fields. Please fill in all required fields. Marked with *
-              </p>
+              <p
+                class="alert myError"
+              >Missing fields. Please fill in all required fields. Marked with *</p>
             </div>
             <div v-if="wait" id="preloader"></div>
           </form>
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ['bold', 'italic', 'underline', 'strike'],
-        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
+        [
+          { align: '' },
+          { align: 'center' },
+          { align: 'right' },
+          { align: 'justify' },
+        ],
         [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
         [{ script: 'sub' }, { script: 'super' }],
         [{ indent: '-1' }, { indent: '+1' }],
       showProvinceError: false,
       showCityError: false,
       showSuburbError: false,
+      showDateError: false,
     };
   },
   methods: {
         this.showSuburbError = true;
       }
 
+      if (
+        this.salesType === 'Rental'
+        && this.property.dateAvailable === 'undef'
+      ) {
+        this.showDateError = true;
+      }
+
       if (
         this.showPropertyTypeError
         || this.showProvinceError
         || this.showCityError
         || this.showSuburbError
+        || this.showDateError
       ) {
         return;
       }
       this.wait = true;
       if (this.salesType === 'Sale') {
         this.property.isSale = true;
+        this.property.dateAvailable = new Date();
       }
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.images.length; i++) {
     },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
+        this.selectedProvince = this.provinces[
+          item.target.options.selectedIndex - 1
+        ].description;
         this.getCities(Object.assign({}, { province: this.selectedProvince }));
         this.showProvinceError = false;
       } else {
     },
     CitySelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
+        this.selectedCity = this.cities[
+          item.target.options.selectedIndex - 1
+        ].description;
         this.getSuburbs(
-          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity }),
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
         );
         this.showCityError = false;
       } else {
       }
     },
     getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
+      this.property.addressLine3 = this.suburbs[
+        item.target.options.selectedIndex - 1
+      ].postalCode;
       if (item.target.options.selectedIndex > 0) {
         this.showSuburbError = false;
       } else {

src/components/property/propertyPage.vue

       <div class="row">
         <div class="col-md-12 col-lg-8">
           <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">
-              {{ property.shortDescription }}
-            </h1>
+            <h1
+              class="title-d"
+              style="text-align:left; font-size: 250%"
+            >{{ property.shortDescription }}</h1>
           </div>
         </div>
       </div>
                   </div>
                   <div class="summary-list">
                     <ul class="list">
+                      <li v-if="!property.isSale" class="d-flex justify-content-between">
+                        <strong>Available:</strong>
+                        <span
+                          v-if="property.dateAvailable < date"
+                        >{{ property.dateAvailable | toDate }}</span>
+                        <span v-else>Now</span>
+                      </li>
                       <li class="d-flex justify-content-between">
                         <strong>Property ID:</strong>
                         <span>{{ property.id }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Status:</strong>
-                        <span v-if="property.status"
-                          >{{ property.status.code }} - {{ property.status.description }}</span
-                        >
+                        <span
+                          v-if="property.status"
+                        >{{ property.status.code }} - {{ property.status.description }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Address:</strong>
                     </ul>
                   </div>
                 </div>
-                <div class="col-md-12">
+                <div class="col-md-12" v-if="mayEdit">
                   <button
                     type="button"
                     class="btn btn-b-n"
                     data-toggle="modal"
                     data-target="#myModal"
-                  >
-                    Make an Offer
-                  </button>
+                  >Make an Offer</button>
                   <div id="myModal" class="modal fade" role="dialog">
                     <div class="modal-dialog modal-lg">
                       <!-- Modal content-->
                     </div>
                   </div>
                 </div>
+                <div
+                  class="col-md-12"
+                  v-if="!mayEdit"
+                  style="background-color: #ff8344; color: white;"
+                >
+                  <p>
+                    <b>Offer Pending</b>
+                  </p>
+                </div>
                 <div class="col-md-12">
                   <div class="row section-t3">
                     <div class="col-sm-12">
         </div>
         <!-- Tab Control -->
         <div class="row">
-          <div class="col-sm-12">
+          <div class="col-md-12">
             <div v-if="property.virtualTour" class="row justify-content-between">
-              <div class="col-md-7 col-lg-7 section-md-t3">
+              <div class="col-md-12 col-lg-12 section-md-t3">
                 <div class="row">
-                  <div class="col-sm-12">
+                  <div class="col-md-12">
                     <div class="title-box-d">
                       <h3 class="title-d" style="text-align:left">Virtual Tour</h3>
                     </div>
                 <iframe
                   :src="property.virtualTour"
                   width="100%"
-                  height="500"
+                  height="700"
                   frameborder="0"
                   webkitallowfullscreen
                   mozallowfullscreen
               <br />
             </div>
             <div v-if="property.video" class="row justify-content-between">
-              <div class="col-md-7 col-lg-7 section-md-t3">
+              <div class="col-md-12 col-lg-12 section-md-t3">
                 <div class="row">
-                  <div class="col-sm-12">
+                  <div class="col-md-12">
                     <div class="title-box-d">
                       <h3 class="title-d" style="text-align:left">Video</h3>
                     </div>
                 <iframe
                   :src="`https://www.youtube.com/embed/${property.video}`"
                   width="100%"
-                  height="500"
+                  height="700"
                   frameborder="0"
                   style="border:0"
                   allowfullscreen
   data() {
     return {
       index: null,
+      date: new Date(),
     };
   },
   mounted() {
     this.getProperty(this.$route.params.id);
     this.getPropertyImages(this.$route.params.id);
+    this.mayEditProperty(this.$route.params.id);
   },
   computed: {
     ...mapState('property', ['property', 'propertyImages']),
+    ...mapState('propertyEdit', ['mayEdit']),
   },
   methods: {
-    ...mapActions('property', ['getProperty', 'getPropertyImages', 'clearPropertyImages']),
+    ...mapActions('property', [
+      'getProperty',
+      'getPropertyImages',
+      'clearPropertyImages',
+    ]),
+    ...mapActions('propertyEdit', ['mayEditProperty']),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');

src/components/property/propertySearchFields.vue

               <b>P</b>
             </span>
           </div>
-          <select class="form-control" v-model="propertySearch.province">
+          <select class="form-control" v-model="propertySearch.province" @change="ProvinceSelected">
             <option>All</option>
             <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
           </select>
           </div>
         </div>
       </div>
-    </div>
-    <div class="container text-left">
       <div class="form-group">
         <label for="city">City</label>
         <div class="input-group mb-3">
               <b>C</b>
             </span>
           </div>
-          <select class="form-control" v-model="propertySearch.city">
+          <select class="form-control" v-model="propertySearch.city" @change="CitySelected">
             <option>All</option>
             <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
           </select>
           </div>
         </div>
       </div>
-    </div>
-    <div class="container text-left">
       <div class="form-group">
         <label for="suburb">Suburb</label>
         <div class="input-group mb-3">
           </div>
         </div>
       </div>
-    </div>
-    <div class="container text-left">
       <div class="form-group">
         <div class="row">
           <div class="col-md-6 text-left">
           </div>
         </div>
       </div>
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-12 text-left">
+            <label>Available From</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>R</b>
+                </span>
+              </div>
+              <input
+                class="form-control"
+                type="date"
+                setp="any"
+                v-model="propertySearch.availableFrom"
+              />
+              <div class="input-group-append" @click="clearFilter('availableFrom')">
+                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+                  <b>X</b>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="propertytype">Property ID</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>T</b>
+            </span>
+          </div>
+          <input class="form-control" v-model="propertySearch.propertyId" type="number" />
+          <div class="input-group-append" @click="clearFilter('propertyId')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
     this.getProvince();
     this.getPropertyTypesRes();
     this.getPropertyTypesCom();
-    setTimeout(() => {
-      this.propertySearch.propertyUsageType = this.propertyType;
-    }, 100);
+    this.propertySearch.propertyUsageType = this.propertyType;
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
     },
     PropertyTypeSelected(item) {
       this.propertySearch.propertyType = item.target.value;
+      let typeitem = this.propertyTypesCom.find(
+        t => t.description === item.target.value,
+      );
+      if (typeof typeitem === 'undefined') {
+        typeitem = this.propertyTypesRes.find(
+          t => t.description === item.target.value,
+        );
+      }
+      if (typeitem.usageType === 1) {
+        this.propertySearch.propertyUsageType = 'Commercial';
+      } else {
+        this.propertySearch.propertyUsageType = 'Residential';
+      }
     },
     ProvinceSelected(item) {
       if (item.target.value !== 'All') {

src/components/property/propertySearchPage.vue

       <br />
       <div class="row">
         <div class="col-md-2 offset-4">
-          <button type="button" @click="SetType('Residential')" class="btn btn-b-n">
-            Residential
-          </button>
+          <button type="button" @click="SetType('Residential')" class="btn btn-b-n">Residential</button>
         </div>
         <div class="col-md-2">
-          <button type="button" @click="SetType('Commercial')" class="btn btn-b-n">
-            Commercial
-          </button>
+          <button type="button" @click="SetType('Commercial')" class="btn btn-b-n">Commercial</button>
         </div>
       </div>
       <br />
               aria-controls="pills-video"
               aria-selected="true"
               v-on:click="SetSalesType('Sale')"
-              >For Sale</a
-            >
+            >For Sale</a>
           </li>
           <li class="nav-item">
             <a
               aria-controls="pills-plans"
               aria-selected="false"
               v-on:click="SetSalesType('Rent')"
-              >To Rent</a
-            >
+            >To Rent</a>
           </li>
         </ul>
       </div>
             class="input-group-text fa fa-search"
             style="color: #60CBEB"
             @click="SearchClick"
-          >
-            Search
-          </button>
+          >Search</button>
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
-          <h1 class="my-4" v-if="propertyUsageType === 'Residential'">
-            About Residential Properties
-          </h1>
+          <h1 class="my-4" v-if="propertyUsageType === 'Residential'">About Residential Properties</h1>
           <h1 class="my-4" v-else>About Commercial Properties</h1>
         </div>
         <div class="container col-md-6 text-left" v-if="propertyUsageType === 'Residential'">
     },
     SearchClick() {
       const item = this.suburbs.find(s => s.display === this.searchText);
-      console.log(JSON.stringify(item));
       this.propertySearch.province = item.province;
       this.propertySearch.city = item.city;
       this.propertySearch.suburb = item.suburb;

src/components/property/propertySearchResults.vue

       </div>
       <br />
       <div>
-        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
+        <propertyCard
+          v-if="properties.length > 0"
+          name="propertyholder"
+          :properties="properties"
+          :salesType="propertySearch.salesType"
+        />
+        <!-- <div v-if="loading">
+          <img
+            class="img-fluid"
+            src="/img/kloader.gif"
+            alt="UVProp logo"
+            style="width:128px;height:128px;"
+          />
+        </div>-->
         <div v-if="properties.length === 0">
           <img src="../../../public/img/no-homes.png" />
           <br />
         </div>
       </div>
       <br />
+      <div class="row">
+        <div class="col-md-2 offset-5">
+          <button type="button" @click="SearchPage" class="btn btn-b-n">Back to Search</button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
     if (typeof this.propertySearch.propertyUsageType === 'undefined') {
       this.propertySearch.propertyUsageType = 'Residential';
     }
+    if (this.user) {
+      this.propertySearch.userName = this.user.username;
+    }
     this.searchProperties(this.propertySearch);
   },
   methods: {
-    ...mapActions('propertySearch', ['searchProperties']),
+    ...mapActions('propertySearch', [
+      'searchProperties',
+      'clearProperties',
+      'updateResultsShowing',
+    ]),
     SetType(item) {
       this.propertySearch.propertyUsageType = item;
     },
+    SearchPage() {
+      this.clearProperties();
+      this.$router.push('/property/search');
+    },
   },
   computed: {
-    ...mapState('propertySearch', ['properties', 'propertySearch']),
-    ...mapState('authentication', ['username']),
+    ...mapState('propertySearch', [
+      'properties',
+      'propertySearch',
+      'resultsShowing',
+    ]),
+    ...mapState('authentication', ['user']),
     ParamsChanged() {
-      if (typeof this.propertySearch.propertyUsageType === 'undefined') {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.propertySearch.propertyUsageType = 'Residential';
+      if (this.resultsShowing) {
+        if (typeof this.propertySearch.propertyUsageType === 'undefined') {
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+          this.propertySearch.propertyUsageType = 'Residential';
+        }
+        this.searchProperties(this.propertySearch);
       }
-      this.searchProperties(this.propertySearch);
       return null;
     },
   },

src/components/property/propertyeditPage.vue

       <div class="row mb-3">
         <div class="container col-md-10" style="text-align:left">
           <form id="mainForm">
-            <div class="form-goup row">
+            <!-- <div class="form-goup row">
               <div class="col-md-4">
                 <field :type="'datetime'" :mayEdit="true" />
               </div>
-            </div>
+            </div>-->
             <div class="form-goup row">
               <div class="col-md-4">
                 <label>Usage Type</label>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Province *</label>
-                <!-- <propField
-                  :display="property.province ? property.province.description : ''"
-                  :editType="'selector'"
-                  :arrayObject="provinces"
-                  :propertyName="'province'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />-->
                 <field
                   :type="'select'"
                   :selectOptions="provinces"
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>City *</label>
-                <!-- <propField
-                  :display="property.city ? property.city.description : ''"
-                  :editType="'selector'"
-                  :arrayObject="cities"
-                  :propertyName="'city'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />-->
                 <field
                   :type="'select'"
                   :selectOptions="cities"
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Suburb *</label>
-                <!-- <propField
-                  :display="property.suburb ? property.suburb.description : ''"
-                  :editType="'selector'"
-                  :arrayObject="suburbs"
-                  :propertyName="'suburb'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />-->
                 <field
                   :type="'select'"
                   :selectOptions="suburbs"
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
                 <field :type="'number'" v-model="property.price" :mayEdit="mayEdit" />
-                <!-- <propField
-                  :display="String(property.price)"
-                  :editType="'number'"
-                  :propertyName="'price'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />-->
               </div>
               <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <!-- <propField
-                  :display="property.pricePer"
-                  :editType="'selector'"
-                  :propertyName="'pricePer'"
-                  :arrayObject="pricePerArr"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />-->
                 <field
                   :type="'selectlist'"
                   :selectOptions="pricePerArr"
                 />
               </div>
             </div>
+            <div class="form-group row" v-if="salesType === 'Rental'">
+              <div class="col-md-6">
+                <label>Available From</label>
+                <field :type="'date'" :mayEdit="mayEdit" v-model="property.dateAvailable" />
+              </div>
+            </div>
             <div class="form-group row">
               <div class="col-md-12">
                 <label for="Property Description">Description</label>
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
               :disabled="!mayEdit"
-            >
-              Save
-            </button>
+            >Save</button>
             <button
               type="button"
               @click="Close()"
               :disabled="
                 showPropertyTypeError || showProvinceError || showCityError || showSuburbError
               "
-            >
-              Close
-            </button>
+            >Close</button>
             <div
               v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
             >
-              <p class="alert myError">
-                Missing fields. Please fill in all required fields. Marked with *
-              </p>
+              <p
+                class="alert myError"
+              >Missing fields. Please fill in all required fields. Marked with *</p>
             </div>
             <div v-if="wait" id="preloader"></div>
           </form>
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ['bold', 'italic', 'underline', 'strike'],
-        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
+        [
+          { align: '' },
+          { align: 'center' },
+          { align: 'right' },
+          { align: 'justify' },
+        ],
         [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
         [{ script: 'sub' }, { script: 'super' }],
         [{ indent: '-1' }, { indent: '+1' }],
       'getListsForPropertyEdit',
     ]),
     ...mapActions('property', ['getPropertyTypes']),
-    ...mapActions('propertyEdit', ['getSavedPropertyData', 'updateProperty', 'mayEditProperty']),
+    ...mapActions('propertyEdit', [
+      'getSavedPropertyData',
+      'updateProperty',
+      'mayEditProperty',
+    ]),
     provChanged(item) {
       this.getCities(Object.assign({}, { province: item.description }));
       this.property.city = null;
       this.showSuburbError = true;
     },
     suburbChanged(item) {
-      const newSuburb = this.suburbs.find(p => p.description === item.description);
+      const newSuburb = this.suburbs.find(
+        p => p.description === item.description,
+      );
       this.property.addressLine3 = newSuburb.postalCode;
       this.showSuburbError = false;
     },
     UpdateValue(item) {
       if (item.isUDF) {
         if (item.isPropOverview) {
-          this.propertyOverviewFields[0].fields[item.arrayIndex].value = item.value;
+          this.propertyOverviewFields[0].fields[item.arrayIndex].value =            item.value;
         } else if (item.isPropOverview === false) {
-          this.propertyFields[item.arrayIndex].fields[item.arrayItemIndex].value = item.value;
+          this.propertyFields[item.arrayIndex].fields[
+            item.arrayItemIndex
+          ].value = item.value;
         }
       } else if (!item.isUDF) {
         if (item.fieldName) {

src/components/shared/bankAccount.vue

       <div class="row" style="text-align:left">
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Bank *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="behance-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="bank" v-model="bank.bank" />
-          </div>
+          <prop-field
+            :display="bank.bank"
+            :editType="'text'"
+            :propertyName="'bankID'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Account Number *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="navigation-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="accountnumber" v-model="bank.accNumber" />
-          </div>
+          <prop-field
+            :display="bank.accNumber"
+            :editType="'text'"
+            :propertyName="'accountNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Account Holder *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="person-done-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="accountholder" v-model="bank.accHolder" />
-          </div>
+          <prop-field
+            :display="bank.accHolder"
+            :editType="'text'"
+            :propertyName="'accountHolder'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
       </div>
     </div>
 </template>
 
 <script>
+import propField from '../property/propertyFieldEditor.vue';
+
 export default {
   name: 'BankAccount',
+  components: {
+    propField,
+  },
   props: {
     bank: {
       bank: undefined,
       accHolder: undefined,
     },
   },
+  methods: {
+    UpdateValue(item) {
+      if (item.fieldName) {
+        if (item.fieldName === 'bank') {
+          this.bank.bank = item.value;
+        }
+        if (item.fieldName === 'accNumber') {
+          this.bank.accNumber = item.value;
+        }
+        if (item.fieldName === 'accHolder') {
+          this.bank.accHolder = item.value;
+        }
+      }
+    },
+  },
 };
 </script>
 

src/components/shared/fieldEditor.vue

     <div v-if="edit" class="input-group-prepend">
       <input v-if="type === 'text'" class="form-control" v-model="value" />
       <input v-if="type === 'number'" type="number" class="form-control" v-model="value" />
+      <input v-if="type === 'date'" type="date" class="form-control" v-model="value" />
       <select v-if="type === 'select'" class="form-control" @change="selectionClick">
         <option>Please select</option>
         <option
           v-for="option in selectOptions"
           :value="option[selectValue]"
           :key="option[selectValue]"
-          >{{ option[selectText] }}</option
-        >
+        >{{ option[selectText] }}</option>
       </select>
       <select v-if="type === 'selectlist'" class="form-control" v-model="value">
         <option v-for="item in selectOptions" :value="item" :key="item">{{ item }}</option>
 
 <script>
 export default {
-  props: ['value', 'type', 'mayEdit', 'selectOptions', 'selectValue', 'selectText', 'display'],
+  props: [
+    'value',
+    'type',
+    'mayEdit',
+    'selectOptions',
+    'selectValue',
+    'selectText',
+    'display',
+  ],
   data() {
     return {
       edit: false,
     selectionClick(item) {
       if (item.target.options.selectedIndex > 0) {
         if (!this.value) {
-          this.myDisplay = this.selectOptions[item.target.options.selectedIndex - 1][
-            this.selectText
-          ];
+          this.myDisplay = this.selectOptions[
+            item.target.options.selectedIndex - 1
+          ][this.selectText];
         }
         if (this.selectOptions[item.target.options.selectedIndex - 1]) {
-          this.$emit('input', this.selectOptions[item.target.options.selectedIndex - 1]);
-          this.$emit('change', this.selectOptions[item.target.options.selectedIndex - 1]);
+          this.$emit(
+            'input',
+            this.selectOptions[item.target.options.selectedIndex - 1],
+          );
+          this.$emit(
+            'change',
+            this.selectOptions[item.target.options.selectedIndex - 1],
+          );
         }
       }
     },
     if (this.display) {
       this.myDisplay = this.display;
     }
+    if (this.type === 'date') {
+      this.myDisplay = this.$options.filters.toDate(this.value);
+    }
   },
   computed: {
     // eslint-disable-next-line vue/return-in-computed-property

src/components/shared/gallerySlideShow.vue

 <template>
   <transition name="modal">
     <div v-if="imgIndex !== null" class="vgs" @click="close">
-      <button type="button" class="vgs__close" @click="close">
-        &times;
-      </button>
-      <button v-if="isMultiple" type="button" class="vgs__prev" @click.stop="onPrev">
-        &lsaquo;
-      </button>
+      <button type="button" class="vgs__close" @click="close">&times;</button>
+      <button v-if="isMultiple" type="button" class="vgs__prev" @click.stop="onPrev">&lsaquo;</button>
       <div v-if="images" class="vgs__container" @click.stop="onNext">
         <img class="vgs__container__img" :src="imageUrl" :alt="alt" @click.stop="onNext" />
         <slot></slot>
       </div>
-      <button v-if="isMultiple" type="button" class="vgs__next" @click.stop="onNext">
-        &rsaquo;
-      </button>
+      <button v-if="isMultiple" type="button" class="vgs__next" @click.stop="onNext">&rsaquo;</button>
       <div v-if="isMultiple" ref="gallery" class="vgs__gallery">
-        <div v-if="images" class="vgs__gallery__title">
-          {{ imgIndex + 1 }} / {{ images.length }}
-        </div>
+        <div v-if="images" class="vgs__gallery__title">{{ imgIndex + 1 }} / {{ images.length }}</div>
         <div
           v-if="images"
           class="vgs__gallery__container"
       const galleryWidth = this.$refs.gallery.clientWidth;
       const currThumbsWidth = this.imgIndex * this.thumbnailWidth;
       const maxThumbsWidth = this.images.length * this.thumbnailWidth;
-      const centerPos = Math.floor(galleryWidth / (this.thumbnailWidth * 2)) * this.thumbnailWidth;
+      const centerPos =        Math.floor(galleryWidth / (this.thumbnailWidth * 2))
+        * this.thumbnailWidth;
 
       // Prevent scrolling of images if not needed
       if (maxThumbsWidth < galleryWidth) {
         currThumbsWidth
         > this.images.length * this.thumbnailWidth - galleryWidth + centerPos
       ) {
-        this.galleryXPos = -(this.images.length * this.thumbnailWidth - galleryWidth - 20);
+        this.galleryXPos = -(
+          this.images.length * this.thumbnailWidth
+          - galleryWidth
+          - 20
+        );
       } else {
         this.galleryXPos = -(this.imgIndex * this.thumbnailWidth) + centerPos;
       }
     overflow: hidden;
     cursor: pointer;
     overflow: hidden;
-    max-width: 100vh;
-    margin: 0.5rem auto 0;
+    max-width: 180vh;
+    margin: 2rem auto 0;
     left: 0.5rem;
     right: 0.5rem;
-    height: 60vh;
+    height: 85vh;
     border-radius: $radius-large;
     background-color: $black;
     @include respond-to(xs) {
   &__container {
     overflow: visible;
     display: block;
-    height: 250px;
+    height: 50px;
     white-space: nowrap;
     transition: all 200ms ease-in-out;
     width: 100%;
     &__img {
-      width: 250px;
-      height: 250px;
+      width: 50px;
+      height: 50px;
       object-fit: cover;
       display: inline-block;
       float: none;

src/components/shared/listView.vue

     title: {
       default: undefined
     },
+    sortKey: {
+      default: "id"
+    },
     hideItemCount: {
       default: false
     },

src/components/shared/searchTab.vue

               </div>
             </div>
           </div>
-          <div class="col-md-12">
-            <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  id="pills-video-tab"
-                  data-toggle="pill"
-                  href="#pills-video"
-                  role="tab"
-                  aria-controls="pills-video"
-                  aria-selected="true"
-                  v-on:click="updateType('Timeshare')"
-                  >Timeshare</a
-                >
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link"
-                  id="pills-plans-tab"
-                  data-toggle="pill"
-                  href="#pills-plans"
-                  role="tab"
-                  aria-controls="pills-plans"
-                  aria-selected="false"
-                  v-on:click="updateType('Residential')"
-                  >Residential</a
-                >
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link"
-                  id="pills-map-tab"
-                  data-toggle="pill"
-                  href="#pills-map"
-                  role="tab"
-                  aria-controls="pills-map"
-                  aria-selected="false"
-                  v-on:click="updateType('Commercial')"
-                  >Commercial</a
-                >
-              </li>
-            </ul>
-            <div class="tab-content" id="pills-tabContent">
-              <div
-                class="tab-pane fade show active"
-                id="pills-video"
-                role="tabpanel"
-                aria-labelledby="pills-video-tab"
-              >
-                <timeshareSearch :keyword="keyword" />
-              </div>
-              <div
-                class="tab-pane fade"
-                id="pills-plans"
-                role="tabpanel"
-                aria-labelledby="pills-plans-tab"
-              >
-                <propertySearch propertyType="Residential" />
-              </div>
-              <div
-                class="tab-pane fade"
-                id="pills-map"
-                role="tabpanel"
-                aria-labelledby="pills-map-tab"
-              >
-                <propertySearch propertyType="Commercial" />
-              </div>
-            </div>
+          <div class="col-md-2">
+            <button
+              type="button"
+              :class="[selectedPropertyType === 'Timeshare' ? 'tabButton isSelected' : 'tabButton isUnSelected']"
+              @click="setTypeTimeshare"
+            >
+              <b>Timeshare</b>
+            </button>
+          </div>
+          <div class="col-md-2">
+            <button
+              type="button"
+              :class="[selectedPropertyType === 'Residential' ? 'tabButton isSelected' : 'tabButton isUnSelected']"
+              @click="setTypeResidential"
+            >
+              <b>Residential</b>
+            </button>
+          </div>
+          <div class="col-md-2">
+            <button
+              type="button"
+              :class="[selectedPropertyType === 'Commercial' ? 'tabButton isSelected' : 'tabButton isUnSelected']"
+              @click="setTypeCommercial"
+            >
+              <b>Commercial</b>
+            </button>
+          </div>
+          <div class="col-md-12" v-if="selectedPropertyType === 'Timeshare'">
+            <timeshareSearch :keyword="keyword" />
+          </div>
+          <div class="col-md-12" v-else>
+            <propertySearch :propertyType="selectedPropertyType" />
           </div>
           <div class="col-md-12">
-            <button type="submit" class="btn btn-b-n" @click="Search">Search</button>
+            <button type="button" class="btn btn-b-n" @click="Search">Search</button>
           </div>
         </div>
       </form>
   },
   data() {
     return {
-      selectedPropertyType: 'timeshare',
+      selectedPropertyType: 'Timeshare',
       keyword: '',
     };
   },
       this.selectedPropertyType = item;
     },
     Search() {
-      if (this.selectedPropertyType === 'timeshare') {
+      if (this.selectedPropertyType === 'Timeshare') {
         this.$router.push('/timesharesearch');
       } else {
-        this.propertySearch.propertyUsageType = this.selectedPropertyType;
         this.$router.push('/property/propertySearch/results');
       }
     },
+    setTypeTimeshare() {
+      this.selectedPropertyType = 'Timeshare';
+    },
+    setTypeResidential() {
+      this.selectedPropertyType = 'Residential';
+    },
+    setTypeCommercial() {
+      this.selectedPropertyType = 'Commercial';
+    },
   },
 };
 </script>

src/components/user/loginPage.vue

                   <input
                     class="form-control"
                     type="text"
-                    name="username"
                     placeholder="Username"
                     v-model="username"
                     value
                     v-model="password"
                     id="password"
                     placeholder="Password"
-                    name="password"
                     value
                   />
                   <div class="input-group-append">
           if (this.$store.state.authentication.status === 'error') {
             this.$router.push('/user/login');
           } else {
-            this.$router.push('/about/us');
+            this.$router.push('/');
           }
         },
       );

src/components/user/timeshareIndividual.vue

       <div class="row" style="text-align:left">
         <div class="col-md-6">
           <label>Name *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="name" v-model="currentUser.name" />
-          </div>
+          <prop-field
+            :display="currentUser.name"
+            :editType="'text'"
+            :propertyName="'name'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Surname *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="surname" v-model="currentUser.surname" />
-          </div>
+          <prop-field
+            :display="currentUser.surname"
+            :editType="'text'"
+            :propertyName="'surname'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>ID Number *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="archive" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="idnumber" v-model="currentUser.idNumber" />
-          </div>
+          <prop-field
+            :display="currentUser.idNumber"
+            :editType="'text'"
+            :propertyName="'idNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Company Reg Number *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="npm-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="companyregnumber"
-              v-model="currentUser.companyRegNumber"
-            />
-          </div>
+          <prop-field
+            :display="currentUser.companyRegNumber"
+            :editType="'text'"
+            :propertyName="'companyRegNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Marital Status *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <select class="form-control" name="maritalstatus" v-model="currentUser.maritalStatus">
-              <option v-for="(item, i) in maritalStatus" :key="i">{{item}}</option>
-            </select>
-          </div>
+          <prop-field
+            :display="currentUser.maritalStatus"
+            :arrayObject="maritalStatus"
+            :editType="'selector'"
+            :propertyName="'maritalStatus'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Email Address *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="email" v-model="currentUser.emailAddress" />
-          </div>
+          <prop-field
+            :display="currentUser.emailAddress"
+            :editType="'text'"
+            :propertyName="'email'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Cell Number *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="cellnumber"
-              v-model="currentUser.cellNumber"
-            />
-          </div>
+          <prop-field
+            :display="currentUser.cellNumber"
+            :editType="'text'"
+            :propertyName="'cellNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Landline Number *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="landline"
-              v-model="currentUser.landlineNumber"
-            />
-          </div>
+          <prop-field
+            :display="currentUser.landlineNumber"
+            :editType="'text'"
+            :propertyName="'landlineNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
       </div>
     </div>
       <hr />
       <BankAccount :bank="currentUser ? currentUser.bankingDetails : {}" />
     </div>
+    <div class="row">
+      <div class="col-md-2 offset-3">
+        <button @click="SubmitData()" type="button" class="btn btn-b-n">Save</button>
+      </div>
+      <div class="col-md-2 offset-3">
+        <button @click="Close()" type="button" class="btn btn-b-n">Close</button>
+      </div>
+    </div>
   </div>
 </template>
 
 import BankAccount from '../shared/bankAccount.vue';
 import Address from '../misc/address.vue';
 import SelectIndividual from './selectIndividual.vue';
+import propField from '../property/propertyFieldEditor.vue';
+import items from '../../assets/staticData/itemsPerPage';
 
 export default {
   components: {
     BankAccount,
     Address,
     SelectIndividual,
+    propField,
   },
   data() {
     return {
   },
   computed: {
     ...mapState('timeshare', ['maritalStatus']),
+    ...mapState('individual', ['indiv']),
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
     ...mapGetters({
       user: 'authentication/getUser',
     }),
   },
   methods: {
-    ...mapActions('individual', ['getIndividual']),
+    ...mapActions('individual', ['getIndividual', 'updateIndividual']),
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
     onSelectedItemItemChange(item) {
       this.currentUser = item;
     },
+    ProvinceSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedProvince = this.provinces[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      }
+    },
+    CitySelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedCity = this.cities[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
+      }
+    },
+    getPostalCode(item) {
+      this.address.postalCode = this.suburbs[
+        item.target.options.selectedIndex - 1
+      ].postalCode;
+    },
+    UpdateValue(item) {
+      if (item.fieldName) {
+        if (item.fieldName === 'name') {
+          this.currentUser.name = item.value;
+        }
+        if (item.fieldName === 'surname') {
+          this.currentUser.surname = item.value;
+        }
+        if (item.fieldName === 'idNumber') {
+          this.currentUser.idNumber = item.value;
+        }
+        if (item.fieldName === 'companyRegNumber') {
+          this.currentUser.companyRegNumber = item.value;
+        }
+        if (item.fieldName === 'maritalStatus') {
+          this.currentUser.maritalStatus = item.value;
+        }
+        if (item.fieldName === 'email') {
+          this.currentUser.emailAddress = item.value;
+        }
+        if (item.fieldName === 'cellNumber') {
+          this.currentUser.cellNumber = item.value;
+        }
+        if (item.fieldName === 'landlineNumber') {
+          this.currentUser.landlineNumber = item.value;
+        }
+        if (item.fieldName === 'streetNumber') {
+          this.currentUser.address.streetNumber = item.value;
+        }
+        if (item.fieldName === 'street') {
+          this.currentUser.address.street = item.value;
+        }
+        if (item.fieldName === 'province') {
+          if (item.value !== '') {
+            this.address.province = this.provinces.find(
+              p => p.description === item.value,
+            );
+            this.address.provinceId = this.address.province.id;
+            this.getCities(Object.assign({}, { province: item.value }));
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.province = null;
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.cities = [];
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'city') {
+          if (item.value !== '') {
+            const newCity = this.cities.find(p => p.description === item.value);
+            this.address.city = newCity;
+            this.address.cityId = newCity.id;
+            this.getSuburbs(
+              Object.assign(
+                {},
+                {
+                  province: this.address.province.description,
+                  city: item.value,
+                },
+              ),
+            );
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'suburb') {
+          if (item.value !== '') {
+            const newSuburb = this.suburbs.find(
+              p => p.description === item.value,
+            );
+            this.address.suburb = newSuburb;
+            this.address.suburbId = newSuburb.id;
+            this.address.postalCode = this.address.suburb.postalCode;
+          } else {
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          }
+        }
+      }
+    },
+    SubmitData() {
+      console.log(this.currentUser);
+      this.updateIndividual(this.currentUser);
+      this.$router.push('/status/userManagementPage');
+    },
+    Close() {
+      this.$router.push('/status/userManagementPage');
+    },
+  },
+  mounted() {
+    this.getProvince();
   },
 };
 </script>

src/components/user/updateProfileInfo.vue

           enctype="multipart/form-data"
         >
           <div class="col-md-12" style="text-align:left"></div>
-          <DetailIndividual :currentUser="sellItem.owner" :showBank="true" :showAddress="true" />
+          <DetailIndividual :currentUser="user" :showBank="true" :showAddress="true" />
+          <br />
         </form>
       </div>
     </div>
 export default {
   name: 'UpdateInfo',
   data() {
-    return { selectedItem: {} };
+    return { selectedItem: {}, individual: {} };
   },
   props: {},
   components: {
       'agents',
     ]),
     ...mapState('individual', ['indiv']),
-    ...mapState('authentication', ['isLoggedIn']),
+    ...mapState('authentication', ['isLoggedIn', 'user']),
     ...mapGetters({
       user: 'authentication/getUser',
       person: 'authentication/getPerson',
     },
   },
   methods: {
-    ...mapActions('individual', ['getIndividual']),
+    ...mapActions('individual', ['getIndividual', 'updateIndividual']),
     onSelectedItemItemChange(item) {
       this.currentUser = item;
     },

src/router/index.js

       name: 'PropertyPage',
       component: PropertyPage,
     },
-    {
-      path: '/property/:propertyUsageType/search',
-      name: 'PropertySearch',
-      component: PropertySearch,
-    },
     {
       path: '/property/search',
       name: 'PropertySearchTab',

src/store/modules/property/property.js

 import axios from 'axios';
+import { Date } from 'core-js';
 
 export default {
   namespaced: true,
       virtualTour: '',
       video: '',
       userId: 0,
+      dateAvailable: Date,
     },
     propertyImages: [],
     propertyTypes: [],
         virtualTour: '',
         video: '',
         userId: 0,
+        dateAvailable: Date,
       };
     },
     clearPropertyImages(state) {

src/store/modules/property/propertySearch.js

+/* eslint-disable valid-typeof */
 /* eslint-disable max-len */
 /* eslint-disable indent */
 import axios from 'axios';
       suburb: 'All',
       minPrice: 0,
       maxPrice: 0,
+      availableFrom: undefined,
+      propertyId: 0,
     },
     properties: [],
     latestProperties: [],
     suburbs: [],
     searchText: '',
     suburbList: [],
+    resultsShowing: false,
   },
   mutations: {
     updateSearch(state, propertySearch) {
       state.propertySearch = search;
     },
     onClearFilter(state, filter) {
-      state.propertySearch[filter] = 'All';
+      if (filter === 'availableFrom') {
+        state.propertySearch[filter] = undefined;
+      } else {
+        state.propertySearch[filter] = 'All';
+      }
     },
     setSuburbs(state, items) {
       state.suburbList = [];
     setFilter(state, value) {
       state.searchText = value;
     },
+    setResultsShowing(state, value) {
+      state.resultsShowing = value;
+    },
   },
   getters: {
     filterSuburbs: (state) => {
     clearFilter({ commit }, filter) {
       commit('onClearFilter', filter);
     },
-    getPropertySearchObject({ commit }) {
-      const search = {
-        userName: '',
-        salesType: 'Sale',
-        propertyUsageType: 'All',
-        propertyType: 'All',
-        province: 'All',
-        city: 'All',
-        suburb: 'All',
-        minPrice: 0,
-        maxPrice: 0,
-      };
-      commit('setPropertySearch', search);
-    },
     searchProperties({ commit }, item) {
       if (item.keyword === '') {
         item.keyword = 'All';
       }
       axios
         .get(
-          `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}`,
+          `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`,
         )
         .then(result => commit('updateSearch', result.data))
         .catch(console.error);
     applyFilter({ commit }, value) {
       commit('setFilter', { value });
     },
+    updateResultsShowing({ commit }, value) {
+      commit('setResultsShowing', value);
+    },
   },
 };

src/store/modules/user/individual.js

       } else id = userId;
       axios
         .get(`/api/individual/getIndividual/${id}`)
-        .then(r => commit('setItem', {
+        .then((r) => {
+          console.log(JSON.stringify(r));
+          commit('setItem', {
             name: 'indiv',
             value: r.data,
-          }),)
+          });
+        })
         .catch(console.error);
     },
     getAllIndividuals({ commit }) {
       axios
         .get('/api/individual/getAllIndividuals')
-        .then(x => commit('setItem', {
+        .then((x) => {
+          commit('setItem', {
             name: 'items',
             value: x.data,
-          }),)
+          });
+        })
+        .catch(console.error);
+    },
+    updateIndividual({ commit }, item) {
+      axios
+        .put('/api/individual', item)
+        .then(result => commit('setItem', item))
         .catch(console.error);
     },
   },