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

src/components/home/propertySection.vue

     propertyCard,
   },
   computed: {
-    ...mapState('property', ['latestProperties']),
+    ...mapState('propertySearch', ['latestProperties']),
   },
   methods: {
-    ...mapActions('property', ['searchLatestProperties']),
+    ...mapActions('propertySearch', ['searchLatestProperties']),
   },
   mounted() {
     this.searchLatestProperties();

src/components/misc/contactUs.vue

             width="900"
             height="450"
             frameborder="0"
-            style="border:0"
+            style="border-radius:10px"
             allowfullscreen
           ></iframe>
           <br />

src/components/property/propertySearchFields.vue

           <select
             class="form-control form-control-lg form-control-a"
             id="forSelector"
-            v-model="selectedType"
-            @change="TypeSelected"
+            v-model="propertySearch.salesType"
+            @change="salesTypeSelected"
           >
             <option value="Sale">Sale</option>
             <option value="Rent">Rent</option>
           <select
             class="form-control form-control-lg form-control-a"
             id="forSelector"
-            v-model="selectedPropertyTypeRes"
+            v-model="resType"
             @change="PropertyTypeSelected"
           >
             <option>All</option>
               :key="i"
             >{{ propertyType.description }}</option>
           </select>
+          <div class="input-group-append" @click="clearResType">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
       <div v-else class="form-group">
           <select
             class="form-control form-control-lg form-control-a"
             id="forSelector"
-            v-model="selectedPropertyTypeCom"
+            v-model="comType"
             @change="PropertyTypeSelected"
           >
             <option>All</option>
               :key="i"
             >{{ propertyType.description }}</option>
           </select>
+          <div class="input-group-append" @click="clearComType">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
       <div class="form-group">
             class="form-control form-control-lg form-control-a"
             id="provinceselector"
             @change="ProvinceSelected"
-            v-model="selectedProvince"
+            v-model="propertySearch.province"
           >
             <option>All</option>
             <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
           </select>
+          <div class="input-group-append" @click="clearFilter('province')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
     </div>
             class="form-control form-control-lg form-control-a"
             id="cityselector"
             @change="CitySelected"
-            v-model="selectedCity"
+            v-model="propertySearch.city"
           >
             <option>All</option>
             <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
           </select>
+          <div class="input-group-append" @click="clearFilter('city')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
     </div>
           <select
             class="form-control form-control-lg form-control-a"
             id="suburbselector"
-            v-model="selectedSuburb"
-            @change="SuburbSelected"
+            v-model="propertySearch.suburb"
+            @change="SuburbSeleted"
           >
             <option>All</option>
             <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
           </select>
+          <div class="input-group-append" @click="clearFilter('suburb')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
     </div>
   },
   data() {
     return {
-      selectedType: 'Sale',
-      selectedProvince: 'All',
-      selectedCity: 'All',
-      selectedSuburb: 'All',
-      selectedPropertyTypeRes: 'All',
-      selectedPropertyTypeCom: 'All',
+      resType: 'All',
+      comType: 'All',
     };
   },
   mounted() {
     this.getProvince();
-    this.$emit('TypeSelectedUpdated', this.selectedType);
     this.getPropertyTypesRes();
     this.getPropertyTypesCom();
+    this.getPropertySearchObject();
+    setTimeout(() => {
+      this.propertySearch.propertyUsageType = this.propertyType;
+    }, 100);
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
     ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
+    ...mapState('propertySearch', ['propertySearch']),
   },
   methods: {
     ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
     ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
-    TypeSelected(item) {
-      this.$emit('TypeSelectedUpdated', item.target.value);
+    ...mapActions('propertySearch', ['getPropertySearchObject', 'clearFilter']),
+    clearResType() {
+      this.clearFilter('propertyType');
+      this.resType = 'All';
+    },
+    clearComType() {
+      this.clearFilter('propertyType');
+      this.comType = 'All';
+    },
+    salesTypeSelected() {
+      this.$emit('updateSearch', this.propertySearch);
     },
     PropertyTypeSelected(item) {
-      this.$emit('PropertyTypeSelectedUpdated', item.target.value);
+      this.propertySearch.propertyType = item.target.value;
+      this.$emit('updateSearch', this.propertySearch);
     },
     ProvinceSelected(item) {
       if (item.target.value !== 'All') {
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+        this.getCities(
+          Object.assign({}, { province: this.propertySearch.province }),
+        );
       }
-      this.$emit('ProvinceSelectedUpdated', item.target.value);
+      this.$emit('updateSearch', this.propertySearch);
     },
     CitySelected(item) {
       if (item.target.value !== 'All') {
         this.getSuburbs(
           Object.assign(
             {},
-            { province: this.selectedProvince, city: this.selectedCity },
+            {
+              province: this.propertySearch.province,
+              city: this.propertySearch.city,
+            },
           ),
         );
       }
-      this.$emit('CitySelectedUpdated', item.target.value);
+      this.$emit('updateSearch', this.propertySearch);
     },
-    SuburbSelected(item) {
-      this.$emit('SuburbSelectedUpdated', item.target.value);
+    SuburbSeleted() {
+      this.$emit('updateSearch', this.propertySearch);
     },
   },
 };

src/components/property/propertySearchPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
-    <div class="container col-md-12" v-if="propertyType === 'Residential'">
+    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Residential'">
       <div class="col-sm-12">
         <div class="about-img-box">
           <img
         </div>
         <div class="col-md-4">
           <p>
-            <img class="img-fluid" src="./../../../public/img/residential.jpg" alt="About Resale" />
+            <img class="img-fluid" src="./../../../public/img/residential.jpg" alt="About Resale" style="border-radius:10px"/>
           </p>
         </div>
       </div>
       <br />
     </div>
 
-    <div class="container col-md-12" v-if="propertyType === 'Commercial'">
+    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Commercial'">
       <div class="col-sm-12">
         <div class="about-img-box">
           <img
         </div>
       </div>
       <div>
-        <propertyCard
-          v-if="properties.length > 0"
-          name="propertyholder"
-          :properties="properties"
-          :key="propertysearch"
-        />
+        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
         <div v-if="properties.length === 0">
           <img src="../../../public/img/no-homes.gif" />
           <br />
       suburb: '',
       proptype: '',
       keyword: '',
+      propertySearch: {
+        userID: 0,
+        keyword: '',
+        salesType: 'All',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      },
     };
   },
   methods: {
-    ...mapActions('property', [
-      'searchPropertiesParams',
-      'searchPropertiesKeyword',
-    ]),
+    ...mapActions('propertySearch', ['searchProperties']),
   },
   computed: {
-    ...mapState('property', ['properties']),
+    ...mapState('propertySearch', ['properties']),
     ParamsChanged() {
-      this.propertyTypeparam = this.$route.params.propertyType;
-      this.type = this.$route.query.type;
-      this.propertyType = this.$route.query.propertyType;
-      this.province = this.$route.query.province;
-      this.city = this.$route.query.city;
-      this.suburb = this.$route.query.suburb;
-      this.proptype = this.$route.query.propType;
-      this.keyword = this.$route.query.keyword;
-
-      if (typeof this.propertyType === 'undefined') {
-        this.propertyType = this.propertyTypeparam;
-      }
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.propertySearch = {
+        userID: 0,
+        keyword: '',
+        salesType: 'All',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      };
 
-      if (this.type === '') {
-        this.type = 'undefined';
-      }
-      if (this.propertyType === '') {
-        this.propertyType = 'undefined';
-      }
-      if (this.province === '') {
-        this.province = 'undefined';
-      }
-      if (this.city === '') {
-        this.city = 'undefined';
-      }
-      if (this.suburb === '') {
-        this.suburb = 'undefined';
-      }
-      if (this.proptype === '') {
-        this.propType = 'undefined';
-      }
-      if (typeof this.keyword === 'undefined' || this.keyword === '') {
-        this.searchPropertiesParams(
-          Object.assign(
-            {},
-            {
-              type: this.type,
-              propertyType: this.propertyType,
-              province: this.province,
-              city: this.city,
-              suburb: this.suburb,
-              propType: this.proptype,
-            },
-          ),
-        );
+      if (typeof this.$route.params.propertyType === 'undefined') {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch = this.$route.query;
       } else {
-        this.searchPropertiesKeyword(
-          Object.assign({}, { keyword: this.keyword }),
-        );
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch.propertyUsageType = this.$route.params.propertyType;
       }
 
+      console.log('PropertySearch = ' + JSON.stringify(this.propertySearch));
+
+      this.searchProperties(this.propertySearch);
+      // this.type = this.$route.query.type;
+      // this.propertyType = this.$route.query.propertyType;
+      // this.province = this.$route.query.province;
+      // this.city = this.$route.query.city;
+      // this.suburb = this.$route.query.suburb;
+      // this.proptype = this.$route.query.propType;
+      // this.keyword = this.$route.query.keyword;
+      // if (typeof this.propertyType === 'undefined') {
+      //   this.propertyType = this.propertyTypeparam;
+      // }
+      // if (this.type === '') {
+      //   this.type = 'undefined';
+      // }
+      // if (this.propertyType === '') {
+      //   this.propertyType = 'undefined';
+      // }
+      // if (this.province === '') {
+      //   this.province = 'undefined';
+      // }
+      // if (this.city === '') {
+      //   this.city = 'undefined';
+      // }
+      // if (this.suburb === '') {
+      //   this.suburb = 'undefined';
+      // }
+      // if (this.proptype === '') {
+      //   this.propType = 'undefined';
+      // }
+      // if (typeof this.keyword === 'undefined' || this.keyword === '') {
+      //   this.searchPropertiesParams(
+      //     Object.assign(
+      //       {},
+      //       {
+      //         type: this.type,
+      //         propertyType: this.propertyType,
+      //         province: this.province,
+      //         city: this.city,
+      //         suburb: this.suburb,
+      //         propType: this.proptype,
+      //       },
+      //     ),
+      //   );
+      // } else {
+      //   this.searchPropertiesKeyword(
+      //     Object.assign({}, { keyword: this.keyword }),
+      //   );
+      // }
       return null;
     },
   },

src/components/property/propertyeditPage.vue

       setTimeout(
         () => this.$router.push({
             path: '/property/search',
-            query: { type: this.salesType, propertyType: this.propertyType },
+            query: {
+              salesType: this.salesType,
+              propertyUsageType: this.propertyType,
+            },
           }),
         3000,
       );

src/components/shared/searchTab.vue

                 role="tabpanel"
                 aria-labelledby="pills-plans-tab"
               >
-                <propertySearch
-                  propertyType="Residential"
-                  @TypeSelectedUpdated="TypeSelectedUpdated"
-                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
-                  @CitySelectedUpdated="CitySelectedUpdated"
-                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
-                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
-                />
+                <propertySearch propertyType="Residential" @updateSearch="updateSearch" />
               </div>
               <div
                 class="tab-pane fade"
                 role="tabpanel"
                 aria-labelledby="pills-map-tab"
               >
-                <propertySearch
-                  propertyType="Commercial"
-                  @TypeSelectedUpdated="TypeSelectedUpdated"
-                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
-                  @CitySelectedUpdated="CitySelectedUpdated"
-                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
-                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
-                />
+                <propertySearch propertyType="Commercial" />
               </div>
             </div>
           </div>
-          {{selectedPropertyType}}
+          <!-- {{selectedPropertyType}} -->
           <div class="col-md-12">
             <button type="submit" class="btn btn-b-n" @click="Search">Search</button>
           </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
 import propertySearch from '../property/propertySearchFields.vue';
 import timeshareSearch from '../timeshare/searchTimeshare.vue';
 
   data() {
     return {
       selectedPropertyType: 'timeshare',
-      selectedType: '',
-      selectedProvince: '',
-      selectedCity: '',
-      selectedSuburb: '',
-      selectedPropType: '',
       keyword: '',
+      propertySearch: {
+        userID: 0,
+        keyword: '',
+        salesType: 'Sale',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      },
     };
   },
+  computed: {},
   methods: {
     updateType(item) {
       this.selectedPropertyType = item;
     },
-    TypeSelectedUpdated(item) {
-      this.selectedType = item;
-    },
-    PropertyTypeSelectedUpdated(item) {
-      this.selectedPropType = item;
-    },
-    ProvinceSelectedUpdated(item) {
-      this.selectedProvince = item;
-    },
-    CitySelectedUpdated(item) {
-      this.selectedCity = item;
-    },
-    SuburbSelectedUpdated(item) {
-      this.selectedSuburb = item;
+    updateSearch(item) {
+      this.propertySearch = item;
+      this.propertySearch.propertyUsageType = this.selectedPropertyType;
+      this.propertySearch.keyword = this.keyword;
     },
     Search() {
       if (this.selectedPropertyType === 'timeshare') {
       } else {
         this.$router.push({
           path: '/property/search',
-          query: {
-            type: this.selectedType,
-            propertyType: this.selectedPropertyType,
-            province: this.selectedProvince,
-            city: this.selectedCity,
-            suburb: this.selectedSuburb,
-            propType: this.selectedPropType,
-            keyword: this.keyword,
-          },
+          query: this.propertySearch,
         });
+        // this.$router.push('/property/search');
       }
     },
   },

src/store/index.js

 import WeekList from './modules/timeshare/weekList';
 import Bid from './modules/processFlow/bid';
 import Authentication from './modules/user/authentication';
+import PropertySearch from './modules/property/propertySearch';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     weekList: WeekList,
     bid: Bid,
     authentication: Authentication,
+    propertySearch: PropertySearch,
   },
 });

src/store/modules/property/property.js

     propertyTypesCom: [],
     propertyOverviewFields: [],
     propertyFields: [],
-    properties: [],
-    latestProperties: [],
   },
   mutations: {
     setProperty(state, property) {
     updateCurrentProperty(state, property) {
       state.properties.push(property);
     },
-    updateSearch(state, propertySearch) {
-      state.properties = propertySearch;
-    },
-    setLatestProperties(state, properties) {
-      state.latestProperties = properties;
-    },
     clearProperty(state) {
       state.property = {
         createdBy: '',
     clearPropertyImages(state) {
       state.propertyImages = [];
     },
-    setProperties(state, properties) {
-      state.properties = properties;
-    },
   },
   getters: {},
   actions: {
         .then(result => commit('updateCurrentProperty', result.data))
         .catch(console.error);
     },
-    searchPropertiesParams({ commit }, item) {
-      axios
-        .get(
-          `/api/property/search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
-        )
-        .then(response => commit('updateSearch', response.data))
-        .catch(console.error);
-    },
-    searchPropertiesKeyword({ commit }, item) {
-      axios
-        .get(`/api/Property/Search/${item.keyword}`)
-        .then(response => commit('updateSearch', response.data))
-        .catch(console.error);
-    },
-    searchLatestProperties({ commit }) {
-      axios
-        .get('/api/property/latestProperties')
-        .then(response => commit('setLatestProperties', response.data))
-        .catch(console.error);
-    },
     clearProperty({ commit }) {
       commit('clearProperty');
     },

src/store/modules/property/propertySearch.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    propertySearch: {
+      userID: 0,
+      keyword: '',
+      salesType: 'Sale',
+      propertyUsageType: 'All',
+      propertyType: 'All',
+      province: 'All',
+      city: 'All',
+      suburb: 'All',
+    },
+    properties: [],
+    latestProperties: [],
+  },
+  mutations: {
+    updateSearch(state, propertySearch) {
+      state.properties = [];
+      state.properties = propertySearch;
+    },
+    setLatestProperties(state, properties) {
+      state.latestProperties = properties;
+    },
+    setPropertySearch(state, search) {
+      state.propertySearch = search;
+    },
+    onClearFilter(state, filter) {
+      state.propertySearch[filter] = 'All';
+    },
+  },
+  getters: {},
+  actions: {
+    clearFilter({ commit }, filter) {
+      commit('onClearFilter', filter);
+    },
+    getPropertySearchObject({ commit }) {
+      const search = {
+        userID: 0,
+        keyword: '',
+        salesType: 'Sale',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+      };
+      commit('setPropertySearch', search);
+    },
+    searchProperties({ commit }, item) {
+      axios
+        .post('/api/Property/Search', item)
+        .then(result => commit('updateSearch', result.data))
+        .catch(console.error);
+    },
+    searchLatestProperties({ commit }) {
+      axios
+        .get('/api/property/latestProperties')
+        .then(response => commit('setLatestProperties', response.data))
+        .catch(console.error);
+    },
+  },
+};