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

public/index.html

 <script src="lib/easing/easing.min.js"></script>
 <script src="lib/owlcarousel/owl.carousel.min.js"></script>
 <script src="lib/scrollreveal/scrollreveal.min.js"></script>
-<script src="js/dragndrop.table.columns.js" type="text/javascript"></script>
 <script src="js/main.js"></script>
-<script>
-  $('.table').dragableColumns();
-</script>
+
 
 </html>

src/App.vue

 </template>
 
 <script>
-import SearchTab from './components/shared/searchTab.vue';
-import NavBar from './components/shared/navBar.vue';
-import FooterSection from './components/shared/footerSection.vue';
+import SearchTab from "./components/shared/searchTab.vue";
+import NavBar from "./components/shared/navBar.vue";
+import FooterSection from "./components/shared/footerSection.vue";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
     SearchTab,
     NavBar,
-    FooterSection,
+    FooterSection
   },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style>
 button:hover {
   cursor: pointer;
-},
+}
 hr {
   background-color: #60cbeb;
 }
   height: 100%;
   margin: 0;
 }
+.isSelected {
+  border-color: white white #60cbeb white;
+}
+.isUnSelected {
+  border-color: white white white white;
+}
+.tabButton {
+  display: block;
+  padding: 0.5rem 1rem;
+  background-color: white;
+  border-style: none none solid none;
+  width: 100px;
+}
+.top-left {
+  position: absolute;
+  top: 8px;
+  width: 350px;
+  color: white;
+}
+.normalText {
+  background-color: #60cbeb;
+}
+.pendingOffer {
+  background-color: #ff8344;
+}
 </style>
 
 <style scoped>

src/components/property/propertyCard.vue

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

src/components/property/propertyCreate.vue

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

src/components/property/propertyPage.vue

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

src/components/property/propertySearchFields.vue

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

src/components/property/propertySearchPage.vue

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

src/components/property/propertySearchResults.vue

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

src/components/property/propertyeditPage.vue

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

src/components/shared/checkItem.vue

 <template>
   <div class="row p-2" @click="checkItem">
-    <div class="custom-control custom-checkbox">
-      <input type="checkbox" class="custom-control-input" :checked="checked" />
+    <div class="custom-control custom-checkbox mar-l-15">
+      <input type="checkbox" class="custom-control-input mar-l-15" :checked="Show" />
       <label class="custom-control-label">{{title}}</label>
     </div>
   </div>
 
 <script>
 export default {
-  props: ['title'],
-  data() {
-    return {
-      checked: true,
-    };
+  props: {
+    title: undefined,
+    show: {
+      default: false
+    }
   },
   methods: {
     checkItem() {
-      this.checked = !this.checked;
-      this.$emit('checkItem', this.title, this.checked);
-    },
+      this.$emit("checkItem", this.title, !this.show);
+    }
   },
+  computed: {
+    Show() {
+      return this.show;
+    }
+  }
 };
 </script>
+<style>
+.mar-l-15 {
+  margin-left: 15px;
+}
+</style>

src/components/shared/fieldEditor.vue

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

src/components/shared/gallerySlideShow.vue

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

src/components/shared/listView.vue

       </div>
       <div class="p-2">
         <div class="d-flex flex-row">
+          <div class="p2" v-if="showColumnChooser">
+            <div
+              class="btn btn-primary myBackground btn-width cursor-pointer"
+              data-toggle="modal"
+              data-target="#myModal"
+            >Column Chooser</div>
+            <div class="col-md-12">
+              <div id="myModal" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <!-- Modal content-->
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5>Column Chooser</h5>
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div style="margin-left:50px; margin-right:50px;margin-bottom:50px;">
+                      <ListViewControl :items="allColumn" @checkItem="checkItem" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="p2" v-if="selectedItems.length > 0">
             <div
               class="btn btn-primary myBackground btn-width cursor-pointer"
     <div v-if="items && items.length > 0" class="table-responsive">
       <table
         id="table"
-        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered, 'table-striped': striped}"
+        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered}"
       >
         <thead>
           <tr class="dnd-moved">
 </template>
 
 <script>
-import _ from 'lodash';
-import ItemsPerPageList from '../../assets/staticData/itemsPerPage';
-import BasePagination from './basePagination.vue';
-import Alert from './alert.vue';
+import _ from "lodash";
+import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
+import BasePagination from "./basePagination.vue";
+import Alert from "./alert.vue";
+import ListViewControl from "./listViewControl.vue";
 
 export default {
   components: {
     BasePagination,
     Alert,
+    ListViewControl
   },
   mounted() {
     try {
     } catch (error) {
       throw error;
     }
+    this.getInitColumn();
   },
   props: {
     compact: {
-      default: true,
+      default: true
     },
     allowSelect: {
-      default: true,
+      default: true
     },
     allowMultipleSelect: {
-      default: false,
+      default: false
     },
     hideSearch: {
-      default: false,
+      default: false
     },
     showNew: {
-      default: true,
+      default: true
     },
     items: undefined,
     editable: {
-      default: false,
+      default: false
     },
     deleteable: {
-      default: false,
+      default: false
     },
     columnCount: {
-      default: 6,
+      default: 6
     },
     showPager: {
-      default: true,
+      default: true
     },
     title: {
-      default: undefined,
+      default: undefined
     },
     sortKey: {
-      default: 'id',
+      default: "id"
     },
     hideItemCount: {
-      default: false,
+      default: false
     },
 
     currentPage: {
-      default: 1,
+      default: 1
     },
     bordered: {
-      default: true,
+      default: true
     },
     striped: {
-      default: true,
+      default: true
     },
+    showColumnChooser: {
+      default: true
+    }
   },
   data() {
     return {
       hover: -1,
       selectedItems: [],
       showControl: false,
+      sortKey: "",
       reverse: false,
-      searchItem: '',
+      searchItem: "",
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
+      visibleColumn: [],
+      allColumn: []
     };
   },
   methods: {
+    checkItem(column, show) {
+      const list = [];
+      for (var i in this.allColumn) {
+        let item = this.allColumn[i];
+        if (item && item.column === column) {
+          item.show = show;
+        }
+        list.push(item);
+      }
+      this.allColumn = list;
+    },
+    getInitColumn() {
+      const list = [];
+      const listAll = [];
+      if (this.items) {
+        for (const i in Object.keys(this.items)) {
+          const item = this.items[i];
+          for (const o in Object.keys(item)) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
+              const columnName = Object.keys(item)[o];
+              if (!listAll.some(x => x.column === columnName))
+                listAll.push({
+                  column: columnName,
+                  show: _.filter(listAll, x => x.show).length < this.columnCount
+                });
+            }
+          }
+        }
+      }
+      this.allColumn = listAll;
+    },
     onClearSelected() {
       this.selectedItems = [];
-      this.$emit('onClearSelected');
+      this.$emit("onClearSelected");
     },
     isSelected(i) {
       const ind = this.getActualIndex(i);
       return _.some(this.selectedItems, x => x === ind);
     },
     onNew() {
-      this.$emit('onNew');
+      this.$emit("onNew");
     },
     isObject(item) {
       return !!item && item.constructor === Object;
     },
     onEdit(item) {
-      this.$emit('onEdit', item);
+      this.$emit("onEdit", item);
     },
     onDelete(item) {
-      this.$emit('onDelete', item);
+      this.$emit("onDelete", item);
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
         }
         this.selectedItems.push(ind);
       }
-      this.$emit('onRowClick', this.selectedItems);
+      this.$emit("onRowClick", this.selectedItems);
     },
     getActualIndex(index) {
       return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
     async pageChangeHandle(value) {
       console.log(value);
       switch (value) {
-        case 'next':
+        case "next":
           this.currentPage += 1;
           break;
-        case 'previous':
+        case "previous":
           this.currentPage -= 1;
           break;
         default:
       if (this.currentPage !== 1) {
         this.currentPage = 1;
       }
-    },
+    }
   },
   computed: {
     ListWidth() {
       if (this.showControl) {
-        return 'col-md-9';
+        return "col-md-9";
       }
-      return 'col-md-12';
+      return "col-md-12";
     },
     SortDirection() {
-      return this.reverse ? 'desc' : 'asc';
+      return this.reverse ? "desc" : "asc";
     },
     PageCount() {
       return this.visibleItemsPerPageCount !== 0
         : 1;
     },
     Columns() {
+      const listColumns = [];
+      if (!this.allColumn || this.allColumn.length === 0) {
+        this.getInitColumn();
+      }
+      const list = _.filter(this.allColumn, x => x.show);
+      for (const i in list) {
+        const item = list[i];
+        if (item) {
+          listColumns.push(item.column);
+        }
+      }
+      return listColumns;
+    },
+    AllColumns() {
       const list = [];
       if (this.items) {
-        for (const i in Object.keys(this.items)) {
-          const item = this.items[i];
-          for (const o in Object.keys(item)) {
-            if (
-              !list.includes(Object.keys(item)[o])
-              && !Array.isArray(Object.values(item)[o])
-            ) {
-              if (list.length < this.columnCount) {
-                list.push(Object.keys(item)[o]);
-              }
-            }
-          }
-        }
       }
       return list;
     },
     FilteredItems() {
-      const list = _.filter(this.items, item => Object.values(item).some(
-          i => JSON.stringify(i)
+      const list = _.filter(this.items, item =>
+        Object.values(item).some(
+          i =>
+            JSON.stringify(i)
               .toLowerCase()
-              .indexOf(this.searchItem.toLowerCase()) > -1,
-        ),);
+              .indexOf(this.searchItem.toLowerCase()) > -1
+        )
+      );
       return _.orderBy(list, this.sortKey, this.SortDirection);
     },
     DisplayItems() {
       }
       return list.slice(startSlice, endSlice);
     },
-  },
+    GetAllColumn() {}
+  }
 };
 </script>
 <style scoped>
   text-decoration: none;
   color: #333333;
 }
+.table-striped > tbody > tr:nth-child(2n + 1) > td,
+.table-striped > tbody > tr:nth-child(2n + 1) > th {
+  background-color: rgba(225, 225, 225, 0.8);
+}
 .active {
   background-color: rgba(255, 255, 255, 0.5);
   cursor: pointer;

src/components/shared/listViewControl.vue

 <template>
-  <div>
-    <div v-for="item in items" :key="item">
-      <CheckItem :title="item" @checkItem="changeColumn" />
+  <div class="container">
+    <div class="offset-3 col-md-6">
+      <input v-model="searchItem" class="form-control" placeholder="Search...." />
+    </div>
+    <hr />
+    <div class="row">
+      <div v-for="item in items" :key="item" class="col-md-4">
+        <div :class="{'inSearch': isInSelected(item)}">
+          <CheckItem :title="item.column" :show="item.show" @checkItem="checkItem" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import CheckItem from './checkItem.vue';
+import CheckItem from "./checkItem.vue";
 
 export default {
   components: {
-    CheckItem,
+    CheckItem
+  },
+  data() {
+    return {
+      searchItem: undefined
+    };
   },
   props: {
-    items: undefined,
+    items: undefined
   },
   methods: {
-    changeColumn(title, checked) {
-      this.$emit('changeColumn', title, checked);
+    isInSelected(i) {
+      if (this.searchItem && this.searchItem.length > 0) {
+        return (
+          i.column.toLowerCase().indexOf(this.searchItem.toLowerCase()) > -1
+        );
+      }
+      return false;
     },
+    checkItem(column, show) {
+      this.$emit("checkItem", column, show);
+    }
   },
+  computed: {}
 };
 </script>
+<style>
+.inSearch {
+  border: 1px solid rgba(50, 50, 50, 0.5);
+  border-radius: 10px;
+  background-color: rgba(225, 225, 225, 0.6);
+}
+</style>

src/components/shared/searchTab.vue

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

src/router/index.js

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

src/store/modules/property/property.js

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

src/store/modules/property/propertySearch.js

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