Merge branch 'master' of http://provision-sa.co.za:3000/Provision/UnivateProperties

src/App.vue

       <i class="fa fa-chevron-up"></i>
     </a>
     <div v-if="!isLandingPage" class="click-closed"></div>
-    <SearchTab v-if="!isLandingPage" />
     <NavBar v-if="!isLandingPage" @routerGoTo="routerGoTo" />
     <div v-if="!isLandingPage"></div>
     <router-view @setLandingPage="setLandingPage" style="margin-top:140px" />
 
 <script>
 /* eslint-disable */
-import SearchTab from "./components/shared/searchTab.vue";
 import NavBar from "./components/shared/navBar.vue";
 import FooterSection from "./components/shared/footerSection.vue";
 
     };
   },
   components: {
-    SearchTab,
     NavBar,
     FooterSection
   },

src/components/home/carouselSection.vue

                   role="tab"
                   aria-controls="timeshare"
                   aria-selected="true"
-                  >Timeshare</a
-                >
+                >Timeshare</a>
               </li>
               <li class="nav-item">
                 <a
                   role="tab"
                   aria-controls="commercial"
                   aria-selected="false"
-                  >Commercial</a
-                >
+                >Commercial</a>
               </li>
               <li class="nav-item">
                 <a
                   role="tab"
                   aria-controls="residential"
                   aria-selected="false"
-                  >Residential</a
-                >
+                >Residential</a>
               </li>
             </ul>
             <!--========    header tabs      ==========-->
                 aria-labelledby="timeshare-tab"
               >
                 <H4>TIMESHARE SALES</H4>
-                <p>
-                  Start exploring your posibilities
-                </p>
+                <p>Start exploring your posibilities</p>
                 <div id="row">
-                  <!-- <div class="form-group">
-                    <input
-                      data-toggle="dropdown"
-                      name="region"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Region"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                    <input
-                      data-toggle="dropdown"
-                      name="resort"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Resort"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                  </div> -->
-                  <router-link to="/timeshare/buy" class="btn-solid-blue"
-                    ><i class="fa fa-search"></i> BUY</router-link
-                  >
-                  <router-link to="/timeshare/sell" class="btn-solid-blue"
-                    ><i class="fa chevron-circle-right"></i> SELL</router-link
-                  >
+                  <router-link to="/timeshare/buy" class="btn-solid-blue">
+                    <i class="fa fa-search"></i> BUY
+                  </router-link>
+                  <router-link to="/timeshare/sell" class="btn-solid-blue">
+                    <i class="fa chevron-circle-right"></i> SELL
+                  </router-link>
                 </div>
               </div>
 
                 <p>Select the region you are looking for to start your search</p>
                 <div id="row">
                   <div class="form-group">
-                    <autoComplete
-                      align="left"
-                      class="col-md-11 offset-1"
-                      :items="suburbList"
-                      @selection="SelectedFilter"
-                      style="width:100%; margin-left:-15px"
-                    />
+                    <autoComplete @GoogleAddress="UpdateAddress" />
                   </div>
-                  <a v-on:click="SearchClickRentComm()" class="btn-solid-blue scrollto"
-                    ><i class="fa fa-search"></i> RENT</a
-                  >
-                  <a v-on:click="SearchClickBuyComm()" class="btn-solid-blue scrollto"
-                    ><i class="fa fa-search"></i> BUY</a
-                  >
+                  <a v-on:click="SearchClickRentComm()" class="btn-solid-blue scrollto">
+                    <i class="fa fa-search"></i> RENT
+                  </a>
+                  <a v-on:click="SearchClickBuyComm()" class="btn-solid-blue scrollto">
+                    <i class="fa fa-search"></i> BUY
+                  </a>
                 </div>
               </div>
 
                 <p>Select the region you are looking for to start your search</p>
                 <div id="row">
                   <div class="form-group">
-                    <autoComplete
-                      align="left"
-                      class="col-md-11 offset-1"
-                      :items="suburbList"
-                      @selection="SelectedFilter"
-                      style="width:100%; margin-left:-15px"
-                    />
-                    <!-- <input
-                      data-toggle="dropdown"
-                      name="type"
-                      class="form-control my-2"
-                      id="type"
-                      placeholder="Type"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    /> -->
+                    <autoComplete @GoogleAddress="UpdateAddress" />
                   </div>
-                  <a v-on:click="SearchClickRentRes()" class="btn-solid-blue scrollto"
-                    ><i class="fa fa-search"></i> RENT</a
-                  >
-                  <a v-on:click="SearchClickBuyRes()" class="btn-solid-blue scrollto"
-                    ><i class="fa fa-search"></i> BUY</a
-                  >
+                  <a v-on:click="SearchClickRentRes()" class="btn-solid-blue scrollto">
+                    <i class="fa fa-search"></i> RENT
+                  </a>
+                  <a v-on:click="SearchClickBuyRes()" class="btn-solid-blue scrollto">
+                    <i class="fa fa-search"></i> BUY
+                  </a>
                 </div>
               </div>
             </div>
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
-      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
-      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
-      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
-      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
-      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import carousel from "vue-owl-carousel";
-import autoComplete from "../shared/autoComplete";
+import autoComplete from "../shared/addressAutoComplete";
 export default {
   components: {
     carousel,
-    autoComplete
+    autoComplete,
   },
   computed: {
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
   },
   data() {
     return {
       propertyUsageType: "Commercial",
       salesType: "Sale",
       searchText: "",
-      clicked: false
+      clicked: false,
     };
   },
   methods: {
-    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
+    ...mapActions("propertySearch", ["applyFilter"]),
     SetSalesType(value) {
       this.salesType = value;
     },
     SearchClickBuyRes() {
-      const item = this.suburbs.find(s => s.display === this.searchText);
-      this.propertySearch.province = item.province;
-      this.propertySearch.city = item.city;
-      this.propertySearch.suburb = item.suburb;
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
+      // this.propertySearch.province = item.province;
+      // this.propertySearch.city = item.city;
+      // this.propertySearch.suburb = item.suburb;
       this.propertySearch.propertyUsageType = "Residential";
       this.propertySearch.salesType = "Sale";
 
       this.$router.push("/property/residential/searchResult");
     },
     SearchClickRentRes() {
-      const item = this.suburbs.find(s => s.display === this.searchText);
-      this.propertySearch.province = item.province;
-      this.propertySearch.city = item.city;
-      this.propertySearch.suburb = item.suburb;
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
+      // this.propertySearch.province = item.province;
+      // this.propertySearch.city = item.city;
+      // this.propertySearch.suburb = item.suburb;
       this.propertySearch.propertyUsageType = "Residential";
       this.propertySearch.salesType = "Rent";
 
       this.$router.push("/property/residential/searchResult");
     },
     SearchClickBuyComm() {
-      const item = this.suburbs.find(s => s.display === this.searchText);
-      this.propertySearch.province = item.province;
-      this.propertySearch.city = item.city;
-      this.propertySearch.suburb = item.suburb;
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
+      // this.propertySearch.province = item.province;
+      // this.propertySearch.city = item.city;
+      // this.propertySearch.suburb = item.suburb;
       this.propertySearch.propertyUsageType = "Commercial";
       this.propertySearch.salesType = "Sale";
 
       this.$router.push("/property/commercial/searchResult");
     },
     SearchClickRentComm() {
-      const item = this.suburbs.find(s => s.display === this.searchText);
-      this.propertySearch.province = item.province;
-      this.propertySearch.city = item.city;
-      this.propertySearch.suburb = item.suburb;
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
+      // this.propertySearch.province = item.province;
+      // this.propertySearch.city = item.city;
+      // this.propertySearch.suburb = item.suburb;
       this.propertySearch.propertyUsageType = "Commercial";
       this.propertySearch.salesType = "Rent";
 
     },
     SelectedFilter(item) {
       this.searchText = item;
-    }
+    },
+    UpdateAddress(place) {
+      this.propertySearch.province = place.province;
+      this.propertySearch.city = place.city;
+      this.propertySearch.suburb = place.suburb;
+    },
   },
-  mounted() {
-    this.getSuburbs();
-  }
 };
 </script>
 

src/components/misc/address.vue

     <div id="errormessage"></div>
     <form method="post" role="form" class="contactForm">
       <div class="form-row">
+        <div class="form-group col-md-12">
+          <AutoComplete @GoogleAddress="UpdateAddress" />
+        </div>
         <div class="form-group col-md-6">
           <input
             type="text"
             data-rule="minlen:4"
             data-msg="Please enter your street number"
             v-model="address.streetNumber"
+            disabled
           />
           <div class="validation"></div>
         </div>
             placeholder="Street Name"
             data-msg="Please enter your street name"
             v-model="address.street"
+            disabled
           />
           <div class="validation"></div>
         </div>
             data-rule="minlen:4"
             data-msg="Please enter your province"
             v-model="address.province"
+            disabled
           />
           <div class="validation"></div>
         </div>
             data-rule="minlen:4"
             data-msg="Please enter your city"
             v-model="address.city"
+            disabled
           />
           <div class="validation"></div>
         </div>
             data-rule="minlen:4"
             data-msg="Please enter your suburb"
             v-model="address.suburb"
+            disabled
           />
           <div class="validation"></div>
         </div>
             placeholder="Postal Code"
             data-msg="Please enter your postal code"
             v-model="address.postalCode"
+            disabled
           />
           <div class="validation"></div>
         </div>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
 import propField from "../property/propertyFieldEditor.vue";
+import AutoComplete from "../shared/addressAutoComplete.vue";
 
 export default {
   components: {
-    propField
+    propField,
+    AutoComplete,
   },
   data() {
     return {
-      propertyType: "Residential"
+      propertyType: "Residential",
     };
   },
   props: {
-    address: {}
-  },
-  computed: {
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"])
+    address: {},
   },
   methods: {
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
-    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;
+    UpdateAddress(place) {
+      this.address.streetNumber = place.streetNumber;
+      this.address.street = place.streeName;
+      this.address.province = place.province;
+      this.address.city = place.city;
+      this.address.suburb = place.suburb;
+      this.address.postalCode = place.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();
-  }
 };
 </script>
 

src/components/property/commercial/commercialCarouselSection.vue

                   aria-controls="buy"
                   aria-selected="true"
                   @click="SetSalesType('Sale')"
-                  >Buy office space</a
-                >
+                >Buy office space</a>
               </li>
               <li class="nav-item">
                 <a
                   aria-controls="rent"
                   aria-selected="false"
                   @click="SetSalesType('Rent')"
-                  >Rent an office</a
-                >
+                >Rent an office</a>
               </li>
             </ul>
             <div class="tab-content" id="pills-tabContent">
                 <h4>PROPERTIES FOR SALE</h4>
                 <div class="row">
                   <div class="form-group col-md-12">
-                    <autoComplete
-                      align="left"
-                      class="col-md-11 offset-1"
-                      :items="suburbList"
-                      @selection="SelectedFilter"
-                      style="width:100%; margin-left:-15px"
-                    />
+                    <autoComplete @GoogleAddress="SetAddress" />
                   </div>
                 </div>
-                <a v-on:click="SearchClick" class="btn-solid-blue"
-                  ><i class="fa fa-search"></i> SEARCH</a
-                >
+                <a v-on:click="SearchClick" class="btn-solid-blue">
+                  <i class="fa fa-search"></i> SEARCH
+                </a>
               </div>
 
               <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
                 <h4>RENTAL PROPERTIES</h4>
                 <div class="row">
                   <div class="form-group col-md-12">
-                    <autoComplete
-                      align="left"
-                      class="col-md-11 offset-1"
-                      :items="suburbList"
-                      @selection="SelectedFilter"
-                      style="width:100%; margin-left:-15px"
-                    />
+                    <autoComplete @GoogleAddress="SetAddress" />
                   </div>
                 </div>
-                <a v-on:click="SearchClick" class="btn-solid-blue"
-                  ><i class="fa fa-search"></i> FIND</a
-                >
+                <a v-on:click="SearchClick" class="btn-solid-blue">
+                  <i class="fa fa-search"></i> FIND
+                </a>
               </div>
             </div>
           </div>
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="img/intro-carousel/comm-1.jpg" alt="" />
-      <img class="item" src="img/intro-carousel/comm-2.jpg" alt="" />
-      <img class="item" src="img/intro-carousel/comm-3.jpg" alt="" />
-      <img class="item" src="img/intro-carousel/comm-4.jpg" alt="" />
-      <img class="item" src="img/intro-carousel/comm-5.jpg" alt="" />
-      <img class="item" src="img/intro-carousel/comm-6.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-1.jpg" alt />
+      <img class="item" src="img/intro-carousel/comm-2.jpg" alt />
+      <img class="item" src="img/intro-carousel/comm-3.jpg" alt />
+      <img class="item" src="img/intro-carousel/comm-4.jpg" alt />
+      <img class="item" src="img/intro-carousel/comm-5.jpg" alt />
+      <img class="item" src="img/intro-carousel/comm-6.jpg" alt />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
 <script>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import autoComplete from "../../shared/autoComplete";
+import autoComplete from "../../shared/addressAutoComplete";
 import carousel from "vue-owl-carousel";
 import searchResult from "./commercialSearchResults";
 export default {
   components: {
     carousel,
     autoComplete,
-    searchResult
+    searchResult,
   },
   data() {
     return {
       propertyUsageType: "Commercial",
       salesType: "Sale",
       searchText: "",
-      clicked: false
+      clicked: false,
     };
   },
   computed: {
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
+    ...mapState("propertySearch", ["propertySearch"]),
   },
   methods: {
-    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
+    ...mapActions("propertySearch", ["applyFilter"]),
     SetSalesType(value) {
       this.salesType = value;
     },
     SearchClick() {
-      const item = this.suburbs.find(s => s.display === this.searchText);
-      this.propertySearch.province = item.province;
-      this.propertySearch.city = item.city;
-      this.propertySearch.suburb = item.suburb;
       this.propertySearch.propertyUsageType = this.propertyUsageType;
       this.propertySearch.salesType = this.salesType;
 
       this.$router.push("/property/commercial/searchResult");
     },
-    SelectedFilter(item) {
-      this.searchText = item;
-    }
+    SetAddress(place) {
+      this.propertySearch.province = place.province;
+      this.propertySearch.city = place.city;
+      this.propertySearch.suburb = place.suburb;
+    },
   },
-  mounted() {
-    this.getSuburbs();
-  }
 };
 </script>
 

src/components/property/commercial/commercialSearchResults.vue

   <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <section>
       <div class="container">
-        <div class="row pt-5  justify-content-md-center">
+        <div class="row pt-5 justify-content-md-center">
           <h3 v-if="propertySearch.salesType === 'Sale'">COMMERCIAL PROPERTIES FOR SALE</h3>
           <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
         </div>
           >
             <div>
               <div class="portfolio-item">
-                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt="" />
+                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
 
                 <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
-                <p>
-                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
-                  situated in the best location. Incredible bargain!
-                </p>
+                <p>{{currentProperty.shortDescription }}</p>
                 <br />
 
                 <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
                 <router-link
                   class="btn-white-border"
                   :to="`/property/commercial/property/${currentProperty.id}`"
-                  >VIEW</router-link
-                >
+                >VIEW</router-link>
               </div>
             </div>
           </div>
             <p>Sorry no listings where found matching your search</p>
           </div>
         </div>
+        <div v-if="wait" id="preloader"></div>
       </div>
     </section>
   </main>
 export default {
   name: "propertysearch",
   components: {
-    propertyCard
+    propertyCard,
   },
   data() {
-    return {};
+    return {
+      wait: true,
+    };
   },
   mounted() {
+    this.wait = true;
     console.log(this.propertySearch.salesType);
 
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
       this.propertySearch.userName = this.user.username;
     }
 
-    this.searchProperties(this.propertySearch);
+    this.searchProperties(this.propertySearch).then((fulfilled) => {
+      this.wait = false;
+    });
   },
   methods: {
     ...mapActions("propertySearch", [
       "searchProperties",
       "clearProperties",
-      "updateResultsShowing"
+      "updateResultsShowing",
     ]),
     SetType(item) {
       this.propertySearch.propertyUsageType = item;
     SearchPage() {
       this.clearProperties();
       this.$router.push("/property/search");
-    }
+    },
   },
   computed: {
-    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
+    ...mapState("propertySearch", [
+      "properties",
+      "propertySearch",
+      "resultsShowing",
+    ]),
     ...mapState("authentication", ["user"]),
     ParamsChanged() {
       console.log(JSON.stringify(this.propertySearch));
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertySearch.propertyUsageType = "Residential";
       }
-      this.searchProperties(this.propertySearch);
+      this.searchProperties(this.propertySearch).then((fulfilled) => {
+        this.wait = false;
+      });
       return null;
-    }
+    },
   },
   watch: {
     ParamsChanged() {
       return null;
-    }
-  }
+    },
+  },
 };
 </script>
 

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

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
-                {{ item.description }}
-              </option>
+              <option
+                v-for="item in propertyTypes"
+                :value="item.id"
+                :key="item.id"
+              >{{ item.description }}</option>
             </select>
           </div>
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
         <div class="row my-5">
           <div class="col-md-6">
             <mapSection v-on:map-location="updateLocation" />
+            <input
+              type="checkbox"
+              v-model="property.showAddress"
+              style="margin-right: 10px; margin-top: 10px;"
+            />
+            <label>Show address on listing</label>
           </div>
           <div class="col-md-6">
             <div class="row">
                     for="price"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
-                    >{{ salesType }} Price</label
-                  >
+                  >{{ salesType }} Price</label>
                 </div>
                 <input
                   class="form-control uniInput"
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
-          Save
-        </button>
-        <div v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError">
-          <p class="alert myError">
-            Missing fields. Please fill in all required fields. Marked with *
-          </p>
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+        <div v-if="showPropertyTypeError">
+          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
         </div>
-        <div v-if="wait" id="preloader"></div>
-        <!-- <div class="row">
-          <div class="col-md-6">
-            <div v-if="!property.addressLine1">
-              <label for="unit" class="uniSelectLabel">STREET NUMBER</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="streetnumber"
-              v-model="property.addressLine1"
-            />
-          </div>
-          <div class="col-md-6">
-            <div v-if="!property.addressLine2">
-              <label for="streetname" class="uniSelectLabel">STREET NAME</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="streetname"
-              id="streetname"
-              v-model="property.addressLine2"
-            />
-          </div>
-        </div>
-        <div class="row my-3">
-          <div class="col-md-6">
-            <div v-if="!property.provinceId">
-              <label for="province" class="uniSelectLabel">PROVINCE</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="province"
-              v-model="selectedProvince"
-            />
-          </div>
-          <div class="col-md-6">
-            <div v-if="!property.cityId">
-              <label for="city" class="uniSelectLabel">CITY</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="city"
-              id="city"
-              v-model="selectedCity"
-            />
-          </div>
+        <div v-if="!addressSet">
+          <p class="alert myError">Please enter an address.</p>
         </div>
-        <div class="row my-3">
-          <div class="col-md-6">
-            <div v-if="!property.suburbId">
-              <label for="suburb" class="uniSelectLabel">SUBURB</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="suburb"
-              v-model="selectedSuburb"
-            />
-          </div>
-          <div class="col-md-6">
-            <div v-if="!property.addressLine3">
-              <label for="code" class="uniSelectLabel">POSTAL CODE</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="code"
-              id="code"
-              v-model="property.addressLine3"
-            />
-          </div>
-        </div> -->
+        <div v-if="wait" id="preloader"></div>
       </div>
     </main>
   </div>
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection
+    mapSection,
   },
   data() {
     return {
       propertyType: "Commercial",
       salesType: "Rental",
-      selectedProvince: "",
-      selectedCity: "",
-      selectedSuburb: "",
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
       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" }]
+        [{ indent: "-1" }, { indent: "+1" }],
       ],
       error: "",
+      addressSet: false,
       showPropertyTypeError: false,
-      showProvinceError: false,
-      showCityError: false,
-      showSuburbError: false,
       showDateError: false,
       user: Log.getUser(),
-      mayEdit: Log.isLoggedIn()
+      mayEdit: Log.isLoggedIn(),
     };
   },
   methods: {
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
     ...mapActions("property", [
       "getPropertyTypes",
       "getPropertyOverviewFields",
       "saveProperty",
       "getProperty",
       "getPropertyImages",
-      "clearProperty",
       "clearPropertyImages",
       "getPropertyEditDisplay",
       "getPropertySavedOverviewFields",
       "getPropertySavedFields",
-      "getSavedPropertyData"
+      "getSavedPropertyData",
     ]),
     updateLocation(place) {
-      this.property.addressLine1 = place.mapComponents[0].short_name;
-      this.property.addressLine2 = place.mapComponents[1].short_name;
-      this.property.addressLine3 = place.mapComponents[7].short_name;
-      this.property.provinceId = place.provinceId;
-      this.property.cityId = place.cityId;
-      this.property.suburbId = place.suburbId;
+      this.addressSet = true;
+      this.property.streetNumber = place.streetNumber;
+      this.property.streetName = place.streetName;
+      this.property.suburb = place.suburb;
+      this.property.city = place.city;
+      this.property.province = place.province;
+      this.property.country = place.country;
+      this.property.postalCode = place.postalCode;
+      this.property.addressUrl = place.url;
       this.property.propertCoords = place.coords;
     },
     TypeChanged() {
       if (this.property.propertyTypeId === 0) {
         this.showPropertyTypeError = true;
       }
-      if (this.property.provinceId === 0) {
-        this.showProvinceError = true;
-      }
-      if (this.property.cityId === 0) {
-        this.showCityError = true;
-      }
-      if (this.property.suburbId === 0) {
-        this.showSuburbError = true;
-      }
 
-      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
+      if (
+        this.salesType === "Rental" &&
+        this.property.dateAvailable === "undef"
+      ) {
         this.showDateError = true;
       }
 
-      if (
-        this.showPropertyTypeError ||
-        this.showProvinceError ||
-        this.showCityError ||
-        this.showSuburbError ||
-        this.showDateError
-      ) {
+      if (this.showPropertyTypeError || this.showDateError) {
         return;
       }
 
         this.property.isSale = true;
         this.property.dateAvailable = new Date();
       }
+      if (this.images.length > 0) {
+        this.property.propertyImages = [];
+      }
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.images.length; i++) {
         let setAsDefault = false;
         }
         this.property.propertyImages.push({
           image: this.images[i],
-          isDefault: setAsDefault
+          isDefault: setAsDefault,
         });
       }
       this.property.propertyUserFields = this.propertyFieldValues;
         this.property.userId = this.user.id;
       }
 
-      console.log(this.property);
-
       this.saveProperty(this.property)
-        .then(fulfilled => {
-          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
+        .then((fulfilled) => {
+          this.$router.push(
+            `/property/commercial/property/${fulfilled.data.id}`
+          );
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error.message);
         });
     },
         this.showPropertyTypeError = true;
       }
     },
-    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 }));
-        this.showProvinceError = false;
-      } else {
-        this.showProvinceError = true;
-      }
-    },
-    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 })
-        );
-        this.showCityError = false;
-      } else {
-        this.showCityError = true;
-      }
-    },
-    getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
-      if (item.target.options.selectedIndex > 0) {
-        this.showSuburbError = false;
-      } else {
-        this.showSuburbError = true;
-      }
-    },
     loadedImages(values) {
       this.images = values;
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach(element => {
+      this.propertyFieldValues.forEach((element) => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
-    }
+    },
   },
   mounted() {
     this.wait = false;
-    this.clearProperty();
+    this.getProperty(0);
     this.clearPropertyImages();
     this.images = [];
     this.defaultImage = 0;
 
     this.getPropertyTypes(this.propertyType);
 
-    this.getProvince();
     this.getPropertyOverviewFields();
     this.getPropertyFields(this.propertyType);
   },
   computed: {
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
     ...mapState("property", [
       "propertyTypes",
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages"
+      "propertyImages",
     ]),
-    ...mapState("authentication", ["user"]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    }
+    },
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/commercial/singleView/contentSection.vue

           <div class="resPortfolioSection" style="margin-top:-5px">
             <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
               <div v-if="i < 3">
-                <img
-                  v-if="i === 0"
-                  style="width:100%; height:201px;object-fit: cover"
-                  :src="image"
-                />
+                <img v-if="i === 0" style="width:100%; height:201px;object-fit: cover" :src="image" />
                 <div v-else-if="i !== 0">
                   <img
                     v-if="i % 2 === 0"
 
           <div class="panel-left p-5" style="margin-top:140px; margin-bottom:50px">
             <h2>Property Detial</h2>
-            <p>{{ property.addressLine1 }} {{ property.addressLine2 }}</p>
-            <p>{{ property.city.description }}, {{ property.suburb.description }}</p>
+            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
+            <p>{{ property.suburb }}, {{ property.city }}</p>
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
+            <div class="btn-white-border">
+              <i class="fa fa-search"></i>BOOK A VIEWING
+            </div>
           </div>
         </div>
         <div class="col-md-8 p-5 resort-profile">
-          <h2>
-            {{ property.propertyName }} / {{ property.addressLine1 }} {{ property.addressLine2 }}
-          </h2>
+          <h2
+            v-if="property.showAddress"
+          >{{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}</h2>
+          <h2>{{ property.propertyName }}</h2>
           <div>
             <table class="table table-striped">
               <thead>
                   <td>#{{ property.unit }}</td>
                   <td>Second Floor</td>
                   <td>yes</td>
-                  <td>
+                  <td v-if="property.displayData && property.displayData.length > 0">
                     <div class="row" v-for="(feat, i) in property.displayData[0].values" :key="i">
                       <div class="col" v-if="feat.value.toUpperCase() !== 'NO'">
                         <div></div>
               marginheight="0"
               marginwidth="0"
             ></iframe>
-          </div> -->
+          </div>-->
         </div>
       </div>
     </div>
 import gallery from "../../../shared/gallerySlideShow";
 export default {
   components: {
-    gallery
+    gallery,
   },
   props: {
     property: {},
-    propertyImages: {}
+    propertyImages: {},
   },
   mounted() {
     console.log(this.property);
   data() {
     return {
       index: null,
-      date: new Date()
+      date: new Date(),
     };
-  }
+  },
 };
 </script>
 

src/components/property/mapSection.vue

 <template>
   <div>
-    <gmap-autocomplete
-      class="form-control mb-3 uniInput"
-      @place_changed="setPlace"
-    ></gmap-autocomplete>
+    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace">*</gmap-autocomplete>
     <GmapMap
       :center="mapCenter"
       :zoom="mapZoom"
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
 import { gmapApi } from "vue2-google-maps";
 export default {
   computed: {
     google: gmapApi,
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"])
   },
   data() {
     return {
       place: null,
       mapCenter: { lat: -26.195246, lng: 28.034088 },
       mapZoom: 11,
-      selectedProvince: "",
-      selectedCity: "",
-      selectedSuburb: "",
-      mapObj: {
-        provinceId: "",
-        cityId: "",
-        suburbId: "",
-        mapComponents: null
-      }
+      streetNumber: "",
+      streetName: "",
+      suburb: "",
+      city: "",
+      province: "",
+      country: "",
+      postalCode: "",
+      url: "",
+      coords: {},
     };
   },
 
   methods: {
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
-    async pullProvince(provinceParam) {
-      await this.provinces.forEach(province => {
-        if (province.code === provinceParam) {
-          this.mapObj.provinceId = province.id;
-          this.selectedProvince = province.description;
-        }
-      });
-      await this.getCities(Object.assign({}, { province: this.selectedProvince }));
-      return Promise.resolve();
-    },
-    async pullCities(cityParam) {
-      await this.cities.forEach(city => {
-        if (city.description === cityParam) {
-          this.mapObj.cityId = city.id;
-          this.selectedCity = city.description;
-        }
-      });
-      await this.getSuburbs(
-        Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
-      );
-      return Promise.resolve();
-    },
-    async pullSuburbs(suburbParam) {
-      await this.suburbs.forEach(suburb => {
-        if (suburb.description === suburbParam) {
-          this.mapObj.suburbId = suburb.id;
-          this.selectedSuburb = suburb.description;
-        }
-      });
-      return Promise.resolve();
-    },
     setPlace(place) {
       this.place = place;
       this.mapCenter = place.geometry.location;
       this.mapZoom = 17;
-      this.mapObj.mapComponents = place.address_components;
 
-      this.pullProvince(place.address_components[5].short_name).then(() => {
-        setTimeout(
-          () =>
-            this.pullCities(place.address_components[3].short_name).then(() => {
-              setTimeout(
-                () =>
-                  this.pullSuburbs(place.address_components[2].short_name).then(() => {
-                    var coords = place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
-                    this.mapObj.coords = coords;
-                    this.$emit("map-location", this.mapObj);
-                  }),
-                1000
-              );
-            }),
-          1000
-        );
+      this.streetNumber = "";
+      this.streetName = "";
+      this.suburb = "";
+      this.city = "";
+      this.province = "";
+      this.country = "";
+      this.postalCode = "";
+      this.url = "";
+      this.coords = {};
+      for (let i = 0; i < place.address_components.length; i++) {
+        if (place.address_components[i].types[0] === "street_number") {
+          this.streetNumber = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "route") {
+          this.streetName = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "sublocality_level_1") {
+          this.suburb = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "locality") {
+          this.city = place.address_components[i].long_name;
+        }
+        if (
+          place.address_components[i].types[0] === "administrative_area_level_1"
+        ) {
+          this.province = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "country") {
+          this.country = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "postal_code") {
+          this.postalCode = place.address_components[i].long_name;
+        }
+        this.url = place.url;
+      }
+
+      var coords =
+        place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
+      this.coords = coords;
+
+      this.$emit("map-location", {
+        streetNumber: this.streetNumber,
+        streetName: this.streetName,
+        suburb: this.suburb,
+        city: this.city,
+        province: this.province,
+        country: this.country,
+        postalCode: this.postalCode,
+        url: this.url,
+        coords: this.coords,
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/propertyCreate.vue

             class="btn btn-b-n"
             style="width: 150px; height:40px;"
             @click="Login"
-          >
-            Login
-          </button>
+          >Login</button>
         </div>
       </div>
       <div class="row" v-if="mayEdit">
                     @change="PropertyTypeSelected"
                   >
                     <option value="0">Please select type</option>
-                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
-                      {{ item.description }}
-                    </option>
+                    <option
+                      v-for="item in propertyTypes"
+                      :value="item.id"
+                      :key="item.id"
+                    >{{ item.description }}</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">
-                      {{ province.description }}
-                    </option>
+                    <option
+                      v-for="province in provinces"
+                      :value="province.id"
+                      :key="province.id"
+                    >{{ province.description }}</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">
-                      {{ city.description }}
-                    </option>
+                    <option
+                      v-for="city in cities"
+                      :value="city.id"
+                      :key="city.id"
+                    >{{ city.description }}</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">
-                      {{ suburb.description }}
-                    </option>
+                    <option
+                      v-for="suburb in suburbs"
+                      :value="suburb.id"
+                      :key="suburb.id"
+                    >{{ suburb.description }}</option>
                   </select>
                 </div>
                 <div v-if="showSuburbError">
               @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>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import { VueEditor } from 'vue2-editor';
-import UserField from './propertyUserField.vue';
-import ImageLoad from './propertyImage.vue';
-import Log from '../../assets/Log';
+import { mapState, mapActions } from "vuex";
+import { VueEditor } from "vue2-editor";
+import UserField from "./propertyUserField.vue";
+import ImageLoad from "./propertyImage.vue";
+import Log from "../../assets/Log";
 
 export default {
-  name: 'PropertyCreate',
+  name: "PropertyCreate",
   components: {
     UserField,
     ImageLoad,
   },
   data() {
     return {
-      propertyType: 'Residential',
-      salesType: 'Rental',
-      selectedProvince: '',
-      selectedCity: '',
+      propertyType: "Residential",
+      salesType: "Rental",
+      selectedProvince: "",
+      selectedCity: "",
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
       wait: false,
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
-        ['bold', 'italic', 'underline', 'strike'],
-        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
-        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
-        [{ script: 'sub' }, { script: 'super' }],
-        [{ indent: '-1' }, { indent: '+1' }],
+        ["bold", "italic", "underline", "strike"],
+        [
+          { align: "" },
+          { align: "center" },
+          { align: "right" },
+          { align: "justify" },
+        ],
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+        [{ script: "sub" }, { script: "super" }],
+        [{ indent: "-1" }, { indent: "+1" }],
       ],
-      error: '',
+      error: "",
       showPropertyTypeError: false,
       showProvinceError: false,
       showCityError: false,
     };
   },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
-    ...mapActions('property', [
-      'getPropertyTypes',
-      'getPropertyOverviewFields',
-      'getPropertyFields',
-      'saveProperty',
-      'getProperty',
-      'getPropertyImages',
-      'clearProperty',
-      'clearPropertyImages',
-      'getPropertyEditDisplay',
-      'getPropertySavedOverviewFields',
-      'getPropertySavedFields',
-      'getSavedPropertyData',
+    ...mapActions("property", [
+      "getPropertyTypes",
+      "getPropertyOverviewFields",
+      "getPropertyFields",
+      "saveProperty",
+      "getProperty",
+      "getPropertyImages",
+      "clearProperty",
+      "clearPropertyImages",
+      "getPropertyEditDisplay",
+      "getPropertySavedOverviewFields",
+      "getPropertySavedFields",
+      "getSavedPropertyData",
     ]),
     TypeChanged() {
       this.property.propertyUsageType = this.propertyType;
         this.showSuburbError = true;
       }
 
-      if (this.salesType === 'Rental' && this.property.dateAvailable === 'undef') {
+      if (
+        this.salesType === "Rental" &&
+        this.property.dateAvailable === "undef"
+      ) {
         this.showDateError = true;
       }
 
       if (
-        this.showPropertyTypeError
-        || this.showProvinceError
-        || this.showCityError
-        || this.showSuburbError
-        || this.showDateError
+        this.showPropertyTypeError ||
+        this.showProvinceError ||
+        this.showCityError ||
+        this.showSuburbError ||
+        this.showDateError
       ) {
         return;
       }
 
       this.wait = true;
-      if (this.salesType === 'Sale') {
+      if (this.salesType === "Sale") {
         this.property.isSale = true;
         this.property.dateAvailable = new Date();
       }
         });
     },
     Close() {
-      this.$router.push('/property/admin/list/my');
+      this.$router.push("/property/admin/list/my");
     },
     Login() {
-      this.$router.push('/user/login');
+      this.$router.push("/user/login");
     },
     PropertyTypeSelected(item) {
       if (item.target.options.selectedIndex > 0) {
         this.showPropertyTypeError = true;
       }
     },
-    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 }));
-        this.showProvinceError = false;
-      } else {
-        this.showProvinceError = true;
-      }
-    },
-    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 }),
-        );
-        this.showCityError = false;
-      } else {
-        this.showCityError = true;
-      }
-    },
-    getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
-      if (item.target.options.selectedIndex > 0) {
-        this.showSuburbError = false;
-      } else {
-        this.showSuburbError = true;
-      }
-    },
+
     loadedImages(values) {
       this.images = values;
     },
     if (this.propertyFields.length > 0) {
       this.propertyFields = [];
     }
-    if (this.property.description !== '') {
-      this.property.description = '';
+    if (this.property.description !== "") {
+      this.property.description = "";
     }
 
     if (this.$route.params.propertyUsageType) {
 
     this.getPropertyTypes(this.propertyType);
 
-    this.getProvince();
     this.getPropertyOverviewFields();
     this.getPropertyFields(this.propertyType);
   },
   computed: {
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-    ...mapState('property', [
-      'propertyTypes',
-      'propertyOverviewFields',
-      'propertyFields',
-      'property',
-      'propertyImages',
+    ...mapState("property", [
+      "propertyTypes",
+      "propertyOverviewFields",
+      "propertyFields",
+      "property",
+      "propertyImages",
     ]),
-    ...mapState('authentication', ['user']),
+    ...mapState("authentication", ["user"]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

src/components/property/propertySearchFields.vue

 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
 
 export default {
   props: {
   },
   data() {
     return {
-      resType: 'All',
-      comType: 'All',
+      resType: "All",
+      comType: "All",
     };
   },
   mounted() {
-    this.getProvince();
     this.getPropertyTypesRes();
     this.getPropertyTypesCom();
     this.propertySearch.propertyUsageType = this.propertyType;
   },
   computed: {
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-    ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
-    ...mapState('propertySearch', ['propertySearch']),
+    ...mapState("property", ["propertyTypesRes", "propertyTypesCom"]),
+    ...mapState("propertySearch", ["propertySearch"]),
   },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
-    ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
-    ...mapActions('propertySearch', ['clearFilter']),
+    ...mapActions("property", ["getPropertyTypesRes", "getPropertyTypesCom"]),
+    ...mapActions("propertySearch", ["clearFilter"]),
     clearResType() {
-      this.clearFilter('propertyType');
-      this.resType = 'All';
+      this.clearFilter("propertyType");
+      this.resType = "All";
     },
     clearComType() {
-      this.clearFilter('propertyType');
-      this.comType = 'All';
+      this.clearFilter("propertyType");
+      this.comType = "All";
     },
     PropertyTypeSelected(item) {
       this.propertySearch.propertyType = item.target.value;
       let typeitem = this.propertyTypesCom.find(
-        t => t.description === item.target.value,
+        (t) => t.description === item.target.value
       );
-      if (typeof typeitem === 'undefined') {
+      if (typeof typeitem === "undefined") {
         typeitem = this.propertyTypesRes.find(
-          t => t.description === item.target.value,
+          (t) => t.description === item.target.value
         );
       }
       if (typeitem.usageType === 1) {
-        this.propertySearch.propertyUsageType = 'Commercial';
+        this.propertySearch.propertyUsageType = "Commercial";
       } else {
-        this.propertySearch.propertyUsageType = 'Residential';
-      }
-    },
-    ProvinceSelected(item) {
-      if (item.target.value !== 'All') {
-        this.getCities(
-          Object.assign({}, { province: this.propertySearch.province }),
-        );
-      }
-    },
-    CitySelected(item) {
-      if (item.target.value !== 'All') {
-        this.getSuburbs(
-          Object.assign(
-            {},
-            {
-              province: this.propertySearch.province,
-              city: this.propertySearch.city,
-            },
-          ),
-        );
+        this.propertySearch.propertyUsageType = "Residential";
       }
     },
   },

src/components/property/propertySearchPage.vue

   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import autoComplete from '../shared/autoComplete.vue';
+import { mapState, mapActions } from "vuex";
+import autoComplete from "../shared/autoComplete.vue";
 
 export default {
-  name: 'propertysearch',
+  name: "propertysearch",
   components: {
     autoComplete,
   },
   data() {
     return {
-      propertyUsageType: 'Residential',
-      salesType: 'Sale',
-      searchText: '',
+      propertyUsageType: "Residential",
+      salesType: "Sale",
+      searchText: "",
     };
   },
   computed: {
-    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
   },
   methods: {
-    ...mapActions('propertySearch', ['getSuburbs', 'applyFilter']),
+    ...mapActions("propertySearch", ["applyFilter"]),
     SetType(item) {
       this.propertyUsageType = item;
       localStorage.propertySearchUsageType = item;
     },
     SearchClick() {
-      const item = this.suburbs.find(s => s.display === this.searchText);
+      const item = this.suburbs.find((s) => s.display === this.searchText);
       this.propertySearch.province = item.province;
       this.propertySearch.city = item.city;
       this.propertySearch.suburb = item.suburb;
       this.propertySearch.propertyUsageType = this.propertyUsageType;
       this.propertySearch.salesType = this.salesType;
 
-      this.$router.push('/property/propertySearch/results');
+      this.$router.push("/property/propertySearch/results");
     },
     Filter() {
       this.applyFilter(this.searchText);
     },
   },
   mounted() {
-    this.getSuburbs();
     if (this.$route.params.propertyUsageType) {
       this.propertyUsageType = this.$route.params.propertyUsageType;
     } else if (localStorage.propertySearchUsageType) {
       this.propertyUsageType = localStorage.propertySearchUsageType;
     } else {
-      this.propertyUsageType = 'Residential';
+      this.propertyUsageType = "Residential";
     }
   },
 };

src/components/property/propertyeditPage.vue

 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import { VueEditor } from 'vue2-editor';
-import ImageLoad from './propertyImage.vue';
-import propField from './propertyFieldEditor.vue';
-import field from '../shared/fieldEditor.vue';
+import { mapState, mapActions } from "vuex";
+import { VueEditor } from "vue2-editor";
+import ImageLoad from "./propertyImage.vue";
+import propField from "./propertyFieldEditor.vue";
+import field from "../shared/fieldEditor.vue";
 
 export default {
-  name: 'PropertyEdit',
+  name: "PropertyEdit",
   components: {
     ImageLoad,
     VueEditor,
   },
   data() {
     return {
-      propertyType: 'Residential',
-      salesType: 'Rental',
+      propertyType: "Residential",
+      salesType: "Rental",
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
       wait: false,
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
-        ['bold', 'italic', 'underline', 'strike'],
+        ["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' }],
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+        [{ script: "sub" }, { script: "super" }],
+        [{ indent: "-1" }, { indent: "+1" }],
       ],
       salesTypeArr: [
-        { id: 1, description: 'Sale' },
-        { id: 2, description: 'Rental' },
+        { id: 1, description: "Sale" },
+        { id: 2, description: "Rental" },
       ],
-      pricePerArr: ['Month', 'Day'],
-      yesno: ['Yes', 'No'],
+      pricePerArr: ["Month", "Day"],
+      yesno: ["Yes", "No"],
       showPropertyTypeError: false,
       showProvinceError: false,
       showCityError: false,
     };
   },
   methods: {
-    ...mapActions('searchTab', [
-      'getProvince',
-      'getCities',
-      'getSuburbs',
-      'getListsForPropertyEdit',
+    ...mapActions("property", ["getPropertyTypes"]),
+    ...mapActions("propertyEdit", [
+      "getSavedPropertyData",
+      "updateProperty",
+      "mayEditProperty",
     ]),
-    ...mapActions('property', ['getPropertyTypes']),
-    ...mapActions('propertyEdit', [
-      'getSavedPropertyData',
-      'updateProperty',
-      'mayEditProperty',
-    ]),
-    provChanged(item) {
-      this.getCities(Object.assign({}, { province: item.description }));
-      this.property.city = null;
-      this.property.suburb = null;
-      this.property.addressLine3 = '';
-      this.showProvinceError = false;
-      this.showCityError = true;
-      this.showSuburbError = true;
-    },
-    cityChanged(item) {
-      this.getSuburbs(
-        Object.assign(
-          {},
-          {
-            province: this.property.province.description,
-            city: item.description,
-          },
-        ),
-      );
-      this.property.suburb = null;
-      this.property.addressLine3 = '';
-      this.showCityError = false;
-      this.showSuburbError = true;
-    },
-    suburbChanged(item) {
-      const newSuburb = this.suburbs.find(
-        p => p.description === item.description,
-      );
-      this.property.addressLine3 = newSuburb.postalCode;
-      this.showSuburbError = false;
-    },
     salesTypeChanged(item) {
       console.log(item);
     },
     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
         }
       } else if (!item.isUDF) {
         if (item.fieldName) {
-          if (item.fieldName === 'isSale') {
+          if (item.fieldName === "isSale") {
             let isSaleValue = false;
-            if (item.value === 'Sale') {
+            if (item.value === "Sale") {
               isSaleValue = true;
             } else isSaleValue = false;
             this.property.isSale = isSaleValue;
       }
 
       if (
-        this.showPropertyTypeError
-        || this.showProvinceError
-        || this.showCityError
-        || this.showSuburbError
+        this.showPropertyTypeError ||
+        this.showProvinceError ||
+        this.showCityError ||
+        this.showSuburbError
       ) {
         return;
       }
       this.property.propertyImages = this.propertyImages;
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.property.propertyImages.length; i++) {
-        this.property.propertyImages[i].image = '';
+        this.property.propertyImages[i].image = "";
       }
       this.property.propertyOverviewFields = this.propertyOverviewFields;
       this.property.propertyFields = this.propertyFields;
         property: this.property,
         images: this.newPropertyImages,
       }).then(() => {
-        this.$router.push('/properties');
+        this.$router.push("/properties");
       });
     },
     Close() {
-      this.$router.push('/properties');
+      this.$router.push("/properties");
     },
     loadedImages(values) {
       this.images = values;
       this.defaultImage = item;
     },
     DeleteImage(image) {
-      this.propertyImages.find(item => item.id === image.id).isDeleted = true;
+      this.propertyImages.find((item) => item.id === image.id).isDeleted = true;
     },
   },
   mounted() {
     if (this.propertyFields.length > 0) {
       this.propertyFields = [];
     }
-    if (this.property.description !== '') {
-      this.property.description = '';
+    if (this.property.description !== "") {
+      this.property.description = "";
     }
 
     if (this.$route.params.propertyUsageType) {
     this.getListsForPropertyEdit(this.$route.query.id);
 
     this.getSavedPropertyData(
-      Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
+      Object.assign({}, { id: this.$route.query.id, type: this.propertyType })
     );
 
     this.mayEditProperty(this.$route.query.id);
   },
   computed: {
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-    ...mapState('property', ['propertyTypes']),
-    ...mapState('propertyEdit', [
-      'propertyOverviewFields',
-      'propertyFields',
-      'property',
-      'propertyImages',
-      'mayEdit',
-      'newPropertyImages',
+    ...mapState("property", ["propertyTypes"]),
+    ...mapState("propertyEdit", [
+      "propertyOverviewFields",
+      "propertyFields",
+      "property",
+      "propertyImages",
+      "mayEdit",
+      "newPropertyImages",
     ]),
-    ...mapState('authentication', ['user']),
+    ...mapState("authentication", ["user"]),
     SalesTypeChanged() {
       if (this.property && this.property.propertyUsageType) {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertyType = this.property.propertyUsageType;
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.salesType = this.property.isSale ? 'Sale' : 'Rental';
+        this.salesType = this.property.isSale ? "Sale" : "Rental";
       }
 
       this.getPropertyTypes(this.propertyType);

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

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
-                {{ item.description }}
-              </option>
+              <option
+                v-for="item in propertyTypes"
+                :value="item.id"
+                :key="item.id"
+              >{{ item.description }}</option>
             </select>
           </div>
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
         <div class="row my-5">
           <div class="col-md-6">
             <mapSection v-on:map-location="updateLocation" />
+            <input
+              type="checkbox"
+              v-model="property.showAddress"
+              style="margin-right: 10px; margin-top: 10px;"
+            />
+            <label>Show address on listing</label>
           </div>
           <div class="col-md-6">
             <div class="row">
                     for="price"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
-                    >{{ salesType }} Price</label
-                  >
+                  >{{ salesType }} Price</label>
                 </div>
                 <input
                   class="form-control uniInput"
             </div>
           </div>
         </div>
-        <div class=" row" />
+        <div class="row" />
 
         <div class="section-header">
           <h2>Extra Information</h2>
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
-          Save
-        </button>
-        <div v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError">
-          <p class="alert myError">
-            Missing fields. Please fill in all required fields. Marked with *
-          </p>
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+        <div v-if="showPropertyTypeError">
+          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
         </div>
         <div v-if="wait" id="preloader"></div>
-        <!-- <div class="row">
-          <div class="col-md-6">
-            <div v-if="!property.addressLine1">
-              <label for="unit" class="uniSelectLabel">STREET NUMBER</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="streetnumber"
-              v-model="property.addressLine1"
-            />
-          </div>
-          <div class="col-md-6">
-            <div v-if="!property.addressLine2">
-              <label for="streetname" class="uniSelectLabel">STREET NAME</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="streetname"
-              id="streetname"
-              v-model="property.addressLine2"
-            />
-          </div>
-        </div>
-        <div class="row my-3">
-          <div class="col-md-6">
-            <div v-if="!property.provinceId">
-              <label for="province" class="uniSelectLabel">PROVINCE</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="province"
-              v-model="selectedProvince"
-            />
-          </div>
-          <div class="col-md-6">
-            <div v-if="!property.cityId">
-              <label for="city" class="uniSelectLabel">CITY</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="city"
-              id="city"
-              v-model="selectedCity"
-            />
-          </div>
-        </div>
-        <div class="row my-3">
-          <div class="col-md-6">
-            <div v-if="!property.suburbId">
-              <label for="suburb" class="uniSelectLabel">SUBURB</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="suburb"
-              v-model="selectedSuburb"
-            />
-          </div>
-          <div class="col-md-6">
-            <div v-if="!property.addressLine3">
-              <label for="code" class="uniSelectLabel">POSTAL CODE</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="code"
-              id="code"
-              v-model="property.addressLine3"
-            />
-          </div>
-        </div> -->
       </div>
     </main>
   </div>
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection
+    mapSection,
   },
   data() {
     return {
       propertyType: "Residential",
       salesType: "Rental",
-      selectedProvince: "",
-      selectedCity: "",
-      selectedSuburb: "",
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
       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" }]
+        [{ indent: "-1" }, { indent: "+1" }],
       ],
       error: "",
+      addressSet: false,
       showPropertyTypeError: false,
-      showProvinceError: false,
-      showCityError: false,
-      showSuburbError: false,
       showDateError: false,
       user: Log.getUser(),
-      mayEdit: Log.isLoggedIn()
+      mayEdit: Log.isLoggedIn(),
     };
   },
   methods: {
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
     ...mapActions("property", [
       "getPropertyTypes",
       "getPropertyOverviewFields",
       "saveProperty",
       "getProperty",
       "getPropertyImages",
-      "clearProperty",
       "clearPropertyImages",
       "getPropertyEditDisplay",
       "getPropertySavedOverviewFields",
       "getPropertySavedFields",
-      "getSavedPropertyData"
+      "getSavedPropertyData",
     ]),
     updateLocation(place) {
-      this.property.addressLine1 = place.mapComponents[0].short_name;
-      this.property.addressLine2 = place.mapComponents[1].short_name;
-      this.property.addressLine3 = place.mapComponents[7].short_name;
-      this.property.provinceId = place.provinceId;
-      this.property.cityId = place.cityId;
-      this.property.suburbId = place.suburbId;
+      this.addressSet = true;
+      this.property.streetNumber = place.streetNumber;
+      this.property.streetName = place.streetName;
+      this.property.suburb = place.suburb;
+      this.property.city = place.city;
+      this.property.province = place.province;
+      this.property.country = place.country;
+      this.property.postalCode = place.postalCode;
+      this.property.addressUrl = place.url;
       this.property.propertCoords = place.coords;
     },
     TypeChanged() {
       if (this.property.propertyTypeId === 0) {
         this.showPropertyTypeError = true;
       }
-      if (this.property.provinceId === 0) {
-        this.showProvinceError = true;
-      }
-      if (this.property.cityId === 0) {
-        this.showCityError = true;
-      }
-      if (this.property.suburbId === 0) {
-        this.showSuburbError = true;
-      }
 
-      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
+      if (
+        this.salesType === "Rental" &&
+        this.property.dateAvailable === "undef"
+      ) {
         this.showDateError = true;
       }
 
-      if (
-        this.showPropertyTypeError ||
-        this.showProvinceError ||
-        this.showCityError ||
-        this.showSuburbError ||
-        this.showDateError
-      ) {
+      if (this.showPropertyTypeError || this.showDateError) {
         return;
       }
 
         this.property.isSale = true;
         this.property.dateAvailable = new Date();
       }
+      if (this.images.length > 0) {
+        this.property.propertyImages = [];
+      }
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.images.length; i++) {
         let setAsDefault = false;
         }
         this.property.propertyImages.push({
           image: this.images[i],
-          isDefault: setAsDefault
+          isDefault: setAsDefault,
         });
       }
       this.property.propertyUserFields = this.propertyFieldValues;
       }
 
       this.saveProperty(this.property)
-        .then(fulfilled => {
-          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
+        .then((fulfilled) => {
+          this.$router.push(
+            `/property/residential/property/${fulfilled.data.id}`
+          );
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error.message);
         });
     },
         this.showPropertyTypeError = true;
       }
     },
-    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 }));
-        this.showProvinceError = false;
-      } else {
-        this.showProvinceError = true;
-      }
-    },
-    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 })
-        );
-        this.showCityError = false;
-      } else {
-        this.showCityError = true;
-      }
-    },
-    getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
-      if (item.target.options.selectedIndex > 0) {
-        this.showSuburbError = false;
-      } else {
-        this.showSuburbError = true;
-      }
-    },
     loadedImages(values) {
       this.images = values;
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach(element => {
+      this.propertyFieldValues.forEach((element) => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
-    }
+    },
   },
   mounted() {
     this.wait = false;
-    this.clearProperty();
+    this.getProperty(0);
     this.clearPropertyImages();
     this.images = [];
     this.defaultImage = 0;
 
     this.getPropertyTypes(this.propertyType);
 
-    this.getProvince();
     this.getPropertyOverviewFields();
     this.getPropertyFields(this.propertyType);
   },
   computed: {
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
     ...mapState("property", [
       "propertyTypes",
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages"
+      "propertyImages",
     ]),
     ...mapState("authentication", ["user"]),
     SalesTypeChanged() {
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    }
+    },
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/residential/residentialCarouselSection.vue

                     aria-controls="buy"
                     aria-selected="true"
                     @click="SetSalesType('Sale')"
-                    >Buy</a
-                  >
+                  >Buy</a>
                 </li>
                 <li class="nav-item">
                   <a
                     aria-controls="rent"
                     aria-selected="false"
                     @click="SetSalesType('Rent')"
-                    >Rent</a
-                  >
+                  >Rent</a>
                 </li>
               </ul>
               <div class="tab-content" id="pills-tabContent">
                   <h4>PROPERTIES FOR SALE</h4>
                   <div class="row">
                     <div align="left" class="form-group col-md-12">
-                      <autoComplete
-                        align="left"
-                        class="col-md-11 offset-1"
-                        :items="suburbList"
-                        @selection="SelectedFilter"
-                        style="width:100%; margin-left:-15px"
-                      />
+                      <autoComplete @GoogleAddress="UpdateAddress" />
                     </div>
-                    <!-- <div class="form-group col-md-6">
-                    <input
-                      data-toggle="dropdown"
-                      name="region"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Region"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                    
-                    <input
-                      data-toggle="dropdown"
-                      name="town"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Town"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
                   </div>
-                  <div class="form-group col-md-6">
-                    <input
-                      data-toggle="dropdown"
-                      name="suburb"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Suburb"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                    <input
-                      data-toggle="dropdown"
-                      name="type"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Property Type"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    /> -->
-                    <!-- </div> -->
-                  </div>
-                  <a v-on:click="SearchClick" class="btn-solid-blue"
-                    ><i class="fa fa-search"></i> SEARCH</a
-                  >
+                  <a v-on:click="SearchClick" class="btn-solid-blue">
+                    <i class="fa fa-search"></i> SEARCH
+                  </a>
                 </div>
 
                 <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
                   <h4>RENTAL PROPERTIES</h4>
                   <div class="row">
                     <div align="left" class="form-group col">
-                      <autoComplete
-                        align="left"
-                        class="col-md-11 offset-1"
-                        :items="suburbList"
-                        @selection="SelectedFilter"
-                        style="width:100%; margin-left:-15px"
-                      />
+                      <autoComplete @GoogleAddress="UpdateAddress" />
                     </div>
-                    <!-- <div class="form-group col-md-6">
-                    <input
-                      data-toggle="dropdown"
-                      name="region"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Region"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                    <input
-                      data-toggle="dropdown"
-                      name="town"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Town"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                  </div>
-                  <div class="form-group col-md-6">
-                    <input
-                      data-toggle="dropdown"
-                      name="suburb"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Suburb"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                    <input
-                      data-toggle="dropdown"
-                      name="type"
-                      class="form-control my-2"
-                      id="name"
-                      placeholder="Property Type"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    />
-                  </div> -->
                   </div>
-                  <a v-on:click="SearchClick" class="btn-solid-blue"
-                    ><i class="fa fa-search"></i> FIND</a
-                  >
+                  <a v-on:click="SearchClick" class="btn-solid-blue">
+                    <i class="fa fa-search"></i> FIND
+                  </a>
                 </div>
               </div>
             </div>
         style="margin-top:-50px"
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
       >
-        <img
-          class="item"
-          src="img/intro-carousel/residential-1.jpg"
-          style="object-fit: cover"
-          alt=""
-        />
-        <img
-          class="item"
-          src="img/intro-carousel/residential-2.jpg"
-          style="object-fit: cover"
-          alt=""
-        />
-        <img
-          class="item"
-          src="img/intro-carousel/residential-3.jpg"
-          style="object-fit: cover"
-          alt=""
-        />
-        <img
-          class="item"
-          src="img/intro-carousel/residential-4.jpg"
-          style="object-fit: cover"
-          alt=""
-        />
-        <img
-          class="item"
-          src="img/intro-carousel/residential-5.jpg"
-          style="object-fit: cover"
-          alt=""
-        />
-        <img
-          class="item"
-          src="img/intro-carousel/residential-6.jpg"
-          style="object-fit: cover"
-          alt=""
-        />
+        <img class="item" src="img/intro-carousel/residential-1.jpg" style="object-fit: cover" alt />
+        <img class="item" src="img/intro-carousel/residential-2.jpg" style="object-fit: cover" alt />
+        <img class="item" src="img/intro-carousel/residential-3.jpg" style="object-fit: cover" alt />
+        <img class="item" src="img/intro-carousel/residential-4.jpg" style="object-fit: cover" alt />
+        <img class="item" src="img/intro-carousel/residential-5.jpg" style="object-fit: cover" alt />
+        <img class="item" src="img/intro-carousel/residential-6.jpg" style="object-fit: cover" alt />
       </carousel>
     </section>
     <main id="main" style="margin-top:-20px">
 <script>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import autoComplete from "../../shared/autoComplete";
+import autoComplete from "../../shared/addressAutoComplete";
 import carousel from "vue-owl-carousel";
 import searchResult from "../propertySearchResults";
 export default {
   components: {
     carousel,
     autoComplete,
-    searchResult
+    searchResult,
   },
   data() {
     return {
       propertyUsageType: "Residential",
       salesType: "Sale",
       searchText: "",
-      clicked: false
+      clicked: false,
     };
   },
   computed: {
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
+    ...mapState("propertySearch", ["propertySearch"]),
   },
   methods: {
-    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
+    ...mapActions("propertySearch", ["applyFilter"]),
     SetSalesType(value) {
       this.salesType = value;
     },
     SearchClick() {
-      const item = this.suburbs.find(s => s.display === this.searchText);
-      this.propertySearch.province = item.province;
-      this.propertySearch.city = item.city;
-      this.propertySearch.suburb = item.suburb;
       this.propertySearch.propertyUsageType = this.propertyUsageType;
       this.propertySearch.salesType = this.salesType;
 
     },
     SelectedFilter(item) {
       this.searchText = item;
-    }
+    },
+    UpdateAddress(place) {
+      this.propertySearch.province = place.province;
+      this.propertySearch.city = place.city;
+      this.propertySearch.suburb = place.suburb;
+    },
   },
-  mounted() {
-    this.getSuburbs();
-  }
 };
 </script>
 

src/components/property/residential/residentialSearchResults.vue

   <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <section>
       <div class="container">
-        <div class="row pt-5  justify-content-md-center">
+        <div class="row pt-5 justify-content-md-center">
           <h3 v-if="propertySearch.salesType === 'Sale'">RESIDENTIAL PROPERTIES FOR SALE</h3>
           <h3 v-else-if="propertySearch.salesType === 'Rent'">RESIDENTIAL PROPERTIES FOR RENT</h3>
         </div>
           >
             <div>
               <div class="portfolio-item">
-                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt="" />
+                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
 
                 <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
-                <p>
-                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
-                  situated in the best location. Incredible bargain!
-                </p>
+                <p>{{currentProperty.shortDescription }}</p>
                 <br />
 
                 <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
                 <router-link
                   class="btn-white-border"
                   :to="`/property/residential/property/${currentProperty.id}`"
-                  >VIEW</router-link
-                >
+                >VIEW</router-link>
               </div>
             </div>
           </div>
             <p>Sorry no listings where found matching your search</p>
           </div>
         </div>
+        <div v-if="wait" id="preloader"></div>
       </div>
     </section>
   </main>
 export default {
   name: "propertysearch",
   components: {
-    propertyCard
+    propertyCard,
   },
   data() {
-    return {};
+    return {
+      wait: true,
+    };
   },
   mounted() {
+    this.wait = true;
     console.log(this.propertySearch.salesType);
 
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
       this.propertySearch.userName = this.user.username;
     }
 
-    this.searchProperties(this.propertySearch);
+    this.searchProperties(this.propertySearch).then((fulfilled) => {
+      this.wait = false;
+    });
   },
   methods: {
     ...mapActions("propertySearch", [
       "searchProperties",
       "clearProperties",
-      "updateResultsShowing"
+      "updateResultsShowing",
     ]),
     SetType(item) {
       this.propertySearch.propertyUsageType = item;
     SearchPage() {
       this.clearProperties();
       this.$router.push("/property/search");
-    }
+    },
   },
   computed: {
-    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
+    ...mapState("propertySearch", [
+      "properties",
+      "propertySearch",
+      "resultsShowing",
+    ]),
     ...mapState("authentication", ["user"]),
     ParamsChanged() {
       console.log(JSON.stringify(this.propertySearch));
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertySearch.propertyUsageType = "Residential";
       }
-      this.searchProperties(this.propertySearch);
+      this.searchProperties(this.propertySearch).then((fulfilled) => {
+        this.wait = false;
+      });
       return null;
-    }
+    },
   },
   watch: {
     ParamsChanged() {
       return null;
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/residential/singleView/contentSection.vue

           </div>
           <div class="panel-left p-5" style="margin-top:130px">
             <h2>Property Detial</h2>
-            <p>{{ property.addressLine1 }} {{ property.addressLine2 }}</p>
-
-            <p>{{ property.city.description }}, {{ property.suburb.description }}</p>
+            <p v-if="property.showAddress">{{ property.addressOther }}</p>
+            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
+            <p>{{ property.suburb }}, {{ property.city }}</p>
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
+            <div class="btn-white-border">
+              <i class="fa fa-search"></i>BOOK A VIEWING
+            </div>
           </div>
         </div>
         <div class="col-md-8 p-5 resort-profile">
-          <h2>
-            {{ property.propertyName }} / {{ property.addressLine1 }} {{ property.addressLine2 }}
-          </h2>
+          <h2
+            v-if="property.showAddress"
+          >{{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}</h2>
+          <h2 v-else>{{ property.propertyName }}</h2>
           <div class="container">
             <div class="row">
               <div class="col">
                   <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
                 </tr>
               </tbody>
-            </table> -->
+            </table>-->
             <div v-for="(data, i) in property.displayData" :key="i">
               <div class="content-header">
                 <h2>{{ data.groupName }}</h2>
               <table class="table table-striped">
                 <thead>
                   <tr>
-                    <th v-for="(tableHead, j) in data.values" :key="j" scope="col">
-                      {{ tableHead.name }}
-                    </th>
+                    <th
+                      v-for="(tableHead, j) in data.values"
+                      :key="j"
+                      scope="col"
+                    >{{ tableHead.name }}</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
-                    <td v-for="(tableVal, k) in data.values" :key="k" scope="col">
-                      {{ tableVal.value }}
-                    </td>
+                    <td
+                      v-for="(tableVal, k) in data.values"
+                      :key="k"
+                      scope="col"
+                    >{{ tableVal.value }}</td>
                   </tr>
                 </tbody>
               </table>
 import gallery from "../../../shared/gallerySlideShow";
 export default {
   components: {
-    gallery
+    gallery,
   },
   props: {
     property: {},
-    propertyImages: {}
+    propertyImages: {},
   },
   created() {
-    this.getListsForPropertyEdit(this.property.id);
+    //this.getListsForPropertyEdit(this.property.id);
     console.log(this.property.displayData);
   },
   data() {
     return {
       index: null,
-      date: new Date()
+      date: new Date(),
     };
   },
   methods: {
-    ...mapActions("searchTab", ["getListsForPropertyEdit"])
+    //...mapActions("searchTab", ["getListsForPropertyEdit"])
   },
   computed: {
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
+    //...mapState("searchTab", ["provinces", "cities", "suburbs"]),
     propertyMap() {
-      var lat = this.property.propertCoords.split(",")[0];
-      var lng = this.property.propertCoords.split(",")[1];
-      // var url =
-      //   "https://maps.google.com/maps?q=" +
-      //   lat.replace(".", ",") +
-      //   "," +
-      //   lng.replace(".", ",") +
-      //   "&hl=es&z=14&amp;output=embed";
-      var url = "";
-      return url;
-    }
-  }
+      if (this.property.propertCoords) {
+        var lat = this.property.propertCoords.split(",")[0];
+        var lng = this.property.propertCoords.split(",")[1];
+        // var url =
+        //   "https://maps.google.com/maps?q=" +
+        //   lat.replace(".", ",") +
+        //   "," +
+        //   lng.replace(".", ",") +
+        //   "&hl=es&z=14&amp;output=embed";
+        var url = "";
+        return url;
+      }
+      return "";
+    },
+  },
 };
 </script>
 

src/components/shared/addressAutoComplete.vue

 <template>
   <div>
-    <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
+    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace"></gmap-autocomplete>
   </div>
 </template>
 
   name: "AddressAutoComplete",
   props: {
     placeholder: {
-      default: "ENTER LOCATION"
-    }
+      default: "ENTER LOCATION",
+    },
   },
   data() {
     return {
       province: "",
       country: "",
       postalCode: "",
-      url: ""
+      url: "",
+      coords: {},
     };
   },
   methods: {
       this.country = "";
       this.postalCode = "";
       this.url = "";
-
+      this.coords = {};
       for (let i = 0; i < place.address_components.length; i++) {
         if (place.address_components[i].types[0] === "street_number") {
           this.streetNumber = place.address_components[i].long_name;
         if (place.address_components[i].types[0] === "locality") {
           this.city = place.address_components[i].long_name;
         }
-        if (place.address_components[i].types[0] === "administrative_area_level_1") {
+        if (
+          place.address_components[i].types[0] === "administrative_area_level_1"
+        ) {
           this.province = place.address_components[i].long_name;
         }
         if (place.address_components[i].types[0] === "country") {
         if (place.address_components[i].types[0] === "postal_code") {
           this.postalCode = place.address_components[i].long_name;
         }
-        this.url = place.url;
-
-        this.$emit("GoogleAddress", {
-          streetNumber: this.streetNumber,
-          streetName: this.streetName,
-          suburb: this.suburb,
-          city: this.city,
-          province: this.province,
-          country: this.country,
-          postalCode: this.postalCode,
-          url: this.url
-        });
       }
-    }
-  }
+      this.url = place.url;
+      this.coords = place.geometry.location;
+      this.$emit("GoogleAddress", {
+        streetNumber: this.streetNumber,
+        streetName: this.streetName,
+        suburb: this.suburb,
+        city: this.city,
+        province: this.province,
+        country: this.country,
+        postalCode: this.postalCode,
+        url: this.url,
+        coords: this.coords,
+      });
+    },
+  },
 };
 </script>

src/components/user/timeshareIndividual.vue

   <div class="form">
     <div id="sendmessage">Your details has been sent. Thank you!</div>
     <div id="errormessage"></div>
-    <form action="" method="post" role="form" class="contactForm">
+    <form action method="post" role="form" class="contactForm">
       <div class="form-row">
         <div class="form-group col-md-10">
           <div class="section-header">
     BankAccount,
     Address,
     SelectIndividual,
-    propField
+    propField,
   },
   data() {
     return {
         cellNumber: undefined,
         landlineNumber: undefined,
         bankingDetails: {},
-        address: {}
-      }
+        address: {},
+      },
     };
   },
   props: {
     showChangeCurrentUser: {
-      default: false
+      default: false,
     },
     showBank: {
-      default: false
+      default: false,
     },
     showAddress: {
-      default: false
-    }
+      default: false,
+    },
   },
   computed: {
     ...mapState("timeshare", ["maritalStatus"]),
     ...mapState("individual", ["indiv"]),
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
     ...mapGetters({
-      user: "authentication/getUser"
-    })
+      user: "authentication/getUser",
+    }),
   },
   methods: {
     ...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") {
         }
         if (item.fieldName === "province") {
           if (item.value !== "") {
-            this.address.province = this.provinces.find(p => p.description === 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;
         }
         if (item.fieldName === "city") {
           if (item.value !== "") {
-            const newCity = this.cities.find(p => p.description === 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 {
         }
         if (item.fieldName === "suburb") {
           if (item.value !== "") {
-            const newSuburb = this.suburbs.find(p => p.description === 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;
     },
     Close() {
       this.$router.push("/status/userManagementPage");
-    }
+    },
   },
-  mounted() {
-    this.getProvince();
-  }
 };
 </script>
 

src/main.js

 });
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
-//axios.defaults.baseURL = "http://training.provision-sa.com:82";
-axios.defaults.baseURL = "http://localhost:8080/";
+axios.defaults.baseURL = "http://training.provision-sa.com:82";
+//axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;
 

src/store/modules/property/property.js

-import axios from 'axios';
-import { Date } from 'core-js';
+import axios from "axios";
+import { Date } from "core-js";
 
 export default {
   namespaced: true,
   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,
-      virtualTour: '',
-      video: '',
-      userId: 0,
-      dateAvailable: Date,
-    },
+    property: {},
     propertyImages: [],
     propertyTypes: [],
     propertyTypesRes: [],
     propertyTypesCom: [],
     propertyOverviewFields: [],
-    propertyFields: [],
+    propertyFields: []
   },
   mutations: {
     setProperty(state, property) {
         state.properties.push(property);
       }
     },
-    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,
-        virtualTour: '',
-        video: '',
-        userId: 0,
-        dateAvailable: Date,
-      };
-    },
     clearPropertyImages(state) {
       state.propertyImages = [];
-    },
+    }
   },
   getters: {},
   actions: {
     getProperty({ commit }, id) {
       axios
         .get(`/api/Property/getDetailed/${id}`)
-        .then(result => commit('setProperty', result.data))
+        .then(result => commit("setProperty", result.data))
         .catch(console.error);
     },
     getPropertyImages({ commit }, id) {
       axios
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)
-        .then(result => commit('setPropertyImages', result.data))
+        .then(result => commit("setPropertyImages", result.data))
         .catch(console.error);
     },
     getPropertyTypes({ commit }, propertyType) {
       axios
         .get(`/api/PropertyType/type/${propertyType}`)
-        .then(result => commit('setPropertyTypes', result.data))
+        .then(result => commit("setPropertyTypes", result.data))
         .catch(console.error);
     },
     getPropertyTypesRes({ commit }) {
       axios
-        .get('/api/PropertyType/type/Residential')
-        .then(result => commit('setPropertyTypesRes', result.data))
+        .get("/api/PropertyType/type/Residential")
+        .then(result => commit("setPropertyTypesRes", result.data))
         .catch(console.error);
     },
     getPropertyTypesCom({ commit }) {
       axios
-        .get('/api/PropertyType/type/Commercial')
-        .then(result => commit('setPropertyTypesCom', result.data))
+        .get("/api/PropertyType/type/Commercial")
+        .then(result => commit("setPropertyTypesCom", result.data))
         .catch(console.error);
     },
     getPropertyOverviewFields({ commit }) {
       axios
-        .get('/api/PropertyFields/Property Overview')
-        .then(response => commit('setPropertyOverviewFields', response.data));
+        .get("/api/PropertyFields/Property Overview")
+        .then(response => commit("setPropertyOverviewFields", response.data));
     },
     getPropertyFields({ commit }, propertyType) {
       axios
         .get(`/api/propertyFields/PropertyType/${propertyType}`)
-        .then(response => commit('setPropertyFields', response.data));
+        .then(response => commit("setPropertyFields", response.data));
     },
     getPropertySavedOverviewFields({ commit }, id) {
       axios
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
-        .then(response => commit('setPropertyOverviewFields', response.data))
+        .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))
+        .then(response => commit("setPropertyFields", response.data))
         .catch(console.error);
     },
     saveProperty({ commit }, item) {
       return new Promise((resolve, reject) => {
         axios
-          .post('/api/Property', item)
-          .then((resp) => {
-            commit('updateCurrentProperty', resp);
+          .post("/api/Property", item)
+          .then(resp => {
+            commit("updateCurrentProperty", resp);
             resolve(resp);
           })
           .catch(() => {
       });
     },
     clearProperty({ commit }) {
-      commit('clearProperty');
+      axios
+        .get("/api/Property/getDetailed/0")
+        .then(result => {
+          alert(JSON.stringify(result.data));
+          commit("setProperty", result.data);
+        })
+        .catch(console.error);
     },
     clearPropertyImages({ commit }) {
-      commit('clearPropertyImages');
+      commit("clearPropertyImages");
     },
     getSavedPropertyData({ commit }, item) {
-      commit('clearProperty');
-      commit('clearPropertyImages');
+      commit("clearProperty");
+      commit("clearPropertyImages");
 
       axios
         .get(`/api/Property/getProperty/${item.id}`)
-        .then(result => commit('setProperty', result.data))
+        .then(result => commit("setProperty", result.data))
         .catch(console.error);
 
       axios
         .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
-        .then(result => commit('setPropertyImages', result.data))
+        .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))
+        .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))
+        .then(response => commit("setPropertyFields", response.data))
         .catch(console.error);
     },
     getSavedPropertyImages({ commit }, id) {
       axios
         .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
-        .then(result => commit('setPropertyImages', result.data))
+        .then(result => commit("setPropertyImages", result.data))
         .catch(console.error);
-    },
-  },
+    }
+  }
 };

src/store/modules/property/propertySearch.js

 /* eslint-disable valid-typeof */
 /* eslint-disable max-len */
 /* eslint-disable indent */
-import axios from 'axios';
-import _ from 'lodash';
-import log from '../../../assets/Log';
+import axios from "axios";
+import _ from "lodash";
+import log from "../../../assets/Log";
 
 export default {
   namespaced: true,
   state: {
     propertySearch: {
-      userName: '',
-      salesType: 'Sale',
-      propertyUsageType: 'All',
-      propertyType: 'All',
-      province: 'All',
-      city: 'All',
-      suburb: 'All',
+      userName: "",
+      salesType: "Sale",
+      propertyUsageType: "All",
+      propertyType: "All",
+      province: "All",
+      city: "All",
+      suburb: "All",
       minPrice: 0,
       maxPrice: 0,
       availableFrom: undefined,
-      propertyId: 0,
+      propertyId: 0
     },
     properties: [],
     latestProperties: [],
     suburbs: [],
-    searchText: '',
+    searchText: "",
     suburbList: [],
-    resultsShowing: false,
+    resultsShowing: false
   },
   mutations: {
     updateSearch(state, propertySearch) {
       state.propertySearch = search;
     },
     onClearFilter(state, filter) {
-      if (filter === 'availableFrom') {
+      if (filter === "availableFrom") {
         state.propertySearch[filter] = undefined;
       } else {
-        state.propertySearch[filter] = 'All';
+        state.propertySearch[filter] = "All";
       }
     },
     setSuburbs(state, items) {
     },
     setResultsShowing(state, value) {
       state.resultsShowing = value;
-    },
+    }
   },
   getters: {
-    filterSuburbs: (state) => {
+    filterSuburbs: state => {
       let subs = state.suburbs;
       if (state.searchText) {
         subs = _.filter(subs, s => s.display.contains(state.searchText));
       }
       return subs;
-    },
+    }
   },
   actions: {
     clearFilter({ commit }, filter) {
-      commit('onClearFilter', filter);
+      commit("onClearFilter", filter);
     },
     searchProperties({ commit }, item) {
-      if (item.keyword === '') {
-        item.keyword = 'All';
-      }
-      if (log.isLoggedIn()) {
-        item.userName = log.getUser().username;
-      } else if (item.userName === '') {
-        item.userName = 'Unknown';
-      }
-      if (item.suburb === '') {
-        item.suburb = 'All';
-      }
-      if (item.city === '') {
-        item.city = 'All';
-      }
-      if (item.province === '') {
-        item.province = '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}/${item.availableFrom}/${item.propertyId}`,
-        )
-        .then(result => commit('updateSearch', result.data))
-        .catch(console.error);
+      return new Promise((resolve, reject) => {
+        if (item.keyword === "") {
+          item.keyword = "All";
+        }
+        if (log.isLoggedIn()) {
+          item.userName = log.getUser().username;
+        } else if (item.userName === "") {
+          item.userName = "Unknown";
+        }
+        if (item.suburb === "") {
+          item.suburb = "All";
+        }
+        if (item.city === "") {
+          item.city = "All";
+        }
+        if (item.province === "") {
+          item.province = "All";
+        }
+        console.log(
+          `/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}`
+        );
+
+        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}/${item.availableFrom}/${item.propertyId}`
+          )
+          .then(result => {
+            commit("updateSearch", result.data);
+            resolve();
+          })
+          .catch(errro => reject(new Error(error.message)));
+      });
     },
     searchLatestProperties({ commit }) {
       axios
-        .get('/api/property/latestProperties')
-        .then(response => commit('setLatestProperties', response.data))
-        .catch(console.error);
-    },
-    getSuburbs({ commit }) {
-      axios
-        .get('/api/suburb/GetSearchList')
-        .then(response => commit('setSuburbs', response.data))
+        .get("/api/property/latestProperties")
+        .then(response => commit("setLatestProperties", response.data))
         .catch(console.error);
     },
     applyFilter({ commit }, value) {
-      commit('setFilter', { value });
+      commit("setFilter", { value });
     },
     updateResultsShowing({ commit }, value) {
-      commit('setResultsShowing', value);
-    },
-  },
+      commit("setResultsShowing", value);
+    }
+  }
 };

src/store/modules/searchTab.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
   state: {
-    provinces: [],
-    cities: [],
-    suburbs: [],
+    provinces: []
   },
   mutations: {
     setProvince(state, provinces) {
       state.provinces = provinces;
-    },
-    setCities(state, cities) {
-      state.cities = cities;
-    },
-    setSuburbs(state, suburbs) {
-      state.suburbs = suburbs;
-    },
+    }
   },
   getters: {},
   actions: {
     getProvince({ commit }) {
       axios
-        .get('/api/province')
-        .then(result => commit('setProvince', result.data))
+        .get("/api/province")
+        .then(result => commit("setProvince", result.data))
         .catch(console.error);
-    },
-    getCities({ commit }, item) {
-      axios
-        .get(`/api/city/getBy/${item.province}`)
-        .then(result => commit('setCities', result.data));
-    },
-    getSuburbs({ commit }, item) {
-      axios
-        .get(`/api/Suburb/${item.province}/${item.city}`)
-        .then(result => commit('setSuburbs', result.data));
-    },
-    getListsForPropertyEdit({ commit }, propertyId) {
-      axios
-        .get('/api/province')
-        .then(result => commit('setProvince', result.data))
-        .catch(console.error);
-
-      axios
-        .get(`/api/City/GetByProperty/${propertyId}`)
-        .then(result => commit('setCities', result.data))
-        .catch(console.error);
-
-      axios
-        .get(`/api/Suburb/GetByProperty/${propertyId}`)
-        .then(result => commit('setSuburbs', result.data))
-        .catch(console.error);
-    },
-  },
+    }
+  }
 };

vue.config.js

   devServer: {
     proxy: {
       "/api": {
-        target: "http://localhost:57260/",
-        //target: "http://training.provision-sa.com:82",
+        //target: "http://localhost:57260/",
+        target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },
       "/nph-srep": {