Property Search & Carousel Changes

src/components/admin/misc/carousel.vue

-<!-- Work in Progress -->
+<template>
+  <div>
+    <div class="container">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <br />
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Item</h1>
+            </div>
+            <br />
+          </div>
+        </div>
+      </div>
+      <div class="container col-md-12" style="text-align:left">
+        <div class="form-goup row">
+          <div class="col-md-4">
+            <label>Type</label>
+            <div class="input-group-prepend">
+              <select class="form-control" v-model="selectedType">
+                <option value="Timeshare">Timeshare</option>
+                <option value="Property">Property</option>
+              </select>
+              <button
+                type="button"
+                class="input-group-text fa fa-search"
+                style="color: #60CBEB"
+                data-toggle="modal"
+                data-target="#myModal"
+              ></button>
+              <!-- Modal content-->
+              <div id="myModal" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal"></button>
+                    </div>
+                    <div padding-left="20px">
+                      <Search :name="selectedType" @onSelected="onSelected" />
+                    </div>
+                    <div class="modal-footer">
+                      <button
+                        type="button"
+                        class="btn btn-b-n"
+                        style="width: 150px; height:40px;"
+                        data-dismiss="modal"
+                      >Close</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- Modal content END-->
+            </div>
+          </div>
+        </div>
+        <div class="form-goup row">
+          <div class="col-md-4">
+            <br />
+            <label>Header</label>
+            <input class="form-control" type="text" v-model="carousel.header" />
+          </div>
+        </div>
+        <div class="form-goup row">
+          <div class="col-md-4">
+            <br />
+            <label>Description</label>
+            <p v-if="selectedType === 'Property'" v-html="propDescription" />
+            <ul v-if="selectedType === 'Timeshare' && bedrooms" class="list">
+              <li class="d-flex justify-content-between">
+                <strong>
+                  <i class="fa fa-bed"></i>
+                  &nbsp&nbsp&nbspBedrooms:
+                </strong>
+                <span>{{ bedrooms }}</span>
+              </li>
+              <li class="d-flex justify-content-between">
+                <strong>
+                  <i class="fa fa-users"></i>&nbsp&nbsp&nbspSleeps:
+                </strong>
+                <span>{{ sleeps }}</span>
+              </li>
+              <li class="d-flex justify-content-between">
+                <strong>
+                  <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck in:
+                </strong>
+                <span>{{ arrival }}</span>
+              </li>
+              <li class="d-flex justify-content-between">
+                <strong>
+                  <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck out:
+                </strong>
+                <span>{{ departure }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-2">
+            <label>Image</label>
+          </div>
+        </div>
+        <div v-if="selectedType === 'Timeshare'">
+          <div>
+            <Images :allowMultiple="false" :loadedImages="loadedImages" />
+          </div>
+        </div>
+        <div class="form-group row" v-if="selectedType === 'Property'">
+          <div class="col-md-2" v-for="(img, i) in propertyImages" :key="i">
+            <input type="radio" name="image" @click="setImage(img)" />
+            <label for="checkbox" style="margin: 10px;">Set</label>
+            <br />
+            <img :src="img.image" style="height:200px; width:150px; object-fit: cover;" />
+          </div>
+        </div>
+        <div class="form-group row">
+          <button
+            type="button"
+            @click="SaveData()"
+            class="btn btn-b-n"
+            style="width: 85px; height:40px;"
+          >Save</button>
+          <button
+            type="button"
+            @click="Close()"
+            class="btn btn-b-n"
+            style="width: 85px; height:40px;"
+          >Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import Search from './carouselSearch.vue';
+import Images from '../../property/propertyImage.vue';
+
+export default {
+  name: 'CarouselItem',
+  components: {
+    Search,
+    Images,
+  },
+  data() {
+    return {
+      selectedType: 'Timeshare',
+      propDescription: '',
+      bedrooms: '',
+      sleeps: '',
+      arrival: Date,
+      departure: Date,
+      images: [],
+    };
+  },
+  computed: {
+    ...mapState('carousel', ['carousel']),
+    ...mapState('property', ['propertyImages']),
+  },
+  mounted() {
+    this.getCarouselItem(this.$route.params.id);
+  },
+  methods: {
+    ...mapActions('carousel', ['saveCarouselItem', 'getCarouselItem']),
+    ...mapActions('property', ['getSavedPropertyImages']),
+    onSelected(item) {
+      if (this.selectedType === 'Timeshare') {
+        this.carousel.header = item.resort.resortName;
+        this.bedrooms = item.bedrooms;
+        this.sleeps = item.maxSleep;
+        this.arrival = item.arrivalDate;
+        this.departure = item.departureDate;
+        this.carousel.timeshareID = item.id;
+      } else {
+        this.propertyImages = [];
+        this.carousel.header = item.name;
+        this.propDescription = item.carouselDescription;
+        this.carousel.propertyID = item.id;
+        this.getSavedPropertyImages(item.id);
+      }
+    },
+    setImage(img) {
+      this.carousel.image = img.image;
+    },
+    loadedImages(values) {
+      this.images = values;
+    },
+    Close() {
+      this.$router.push('/carousel');
+    },
+    SaveData() {
+      if (this.selectedType === 'Timeshare') {
+        // eslint-disable-next-line no-plusplus
+        for (let i = 0; i < this.images.length; i++) {
+          this.carousel.image = this.images[i];
+        }
+      }
+      if (this.carousel.id === 0) {
+        this.saveCarouselItem(this.carousel);
+        this.$router.push('/carousel');
+      }
+      // Else update
+    },
+  },
+};
+</script>

src/components/admin/misc/carouselList.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <!-- <section class="intro-single"> -->
       <div class="container">
-        <br />
-        <br />
         <div class="row">
           <div class="col-md-12 col-lg-8">
-            <!-- <div class="title-single-box"> -->
-            <!-- <h1 class="title-single">Property Types</h1> -->
-            <!-- </div> -->
             <div class="title-box-d">
+              <br />
               <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Items</h1>
             </div>
             <br />
           </div>
         </div>
       </div>
-      <!-- </section> -->
     </div>
     <div class="container">
       <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
             <th>Header</th>
             <th>Type</th>
             <th></th>
-            <th></th>
           </tr>
         </thead>
         <tbody>
             <td>{{ item.header }}</td>
             <td v-if="item.propertyId">Property</td>
             <td v-else>Timeshare Week</td>
-            <td>
-              <button
-                type="button"
-                @click="Edit(item.id)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Edit</button>
-            </td>
             <td>
               <button
                 type="button"

src/components/admin/misc/carouselSearch.vue

             <ListView
               v-if="name === 'Timeshare'"
               :items="items"
-              :editable="true"
-              @onEdit="onEdit"
-              :editLabel="'Select'"
-            />
-            <ListView
-              v-else
-              :items="properties"
-              :editable="true"
-              @onEdit="onEdit"
-              :editLabel="'Select'"
+              :showNew="false"
+              @onRowClick="onRowClick"
             />
+            <ListView v-else :items="properties" :showNew="false" @onRowClick="onRowClick" />
           </div>
         </div>
       </div>
   methods: {
     ...mapActions('myWeeks', ['getItems']),
     ...mapActions('propertyList', ['getProperties']),
-    onEdit(item) {
-      this.$emit('onSelected', item);
+    onRowClick(item) {
+      if (this.name === 'Timeshare') {
+        const week = this.items[item];
+        this.$emit('onSelected', week);
+      } else {
+        const prop = this.properties[item];
+        this.$emit('onSelected', prop);
+      }
     },
   },
   watch: {

src/components/home/carouselSection.vue

               <div class="col-lg-8">
                 <div
                   class="price-a"
-                  style="opacity:0.95; border: white solid 3px; border-radius: 15px; background-color: white;"
+                  style="opacity:0.7; border: white solid 3px; border-radius: 15px; background-color: white;"
                 >
                   <h1 class="intro-title mb-4">{{ car.header }}</h1>
-                  <div v-if="car.isProperty">
-                    <p class="color-b" v-html="car.address" />
+                  <div class="summary-list" v-if="car.isProperty">
+                    <p v-html="car.address" />
                   </div>
-                  <div v-else>
-                    <ul class="list color-b">
+                  <div class="summary-list" v-else>
+                    <ul class="list">
                       <li class="d-flex justify-content-between">
-                        <strong>Bedrooms:</strong>
+                        <strong>
+                          <i class="fa fa-bed"></i>&nbsp&nbsp&nbspBedrooms:
+                        </strong>
                         <span>{{ car.bedrooms }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
-                        <strong>Sleeps:</strong>
+                        <strong>
+                          <i class="fa fa-users"></i>&nbsp&nbsp&nbspSleeps:
+                        </strong>
                         <span>{{ car.sleeps }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
-                        <strong>Check in:</strong>
+                        <strong>
+                          <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck in:
+                        </strong>
                         <span>{{ car.arrival | toDate }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
-                        <strong>Check out:</strong>
+                        <strong>
+                          <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck out:
+                        </strong>
                         <span>{{ car.departure | toDate}}</span>
                       </li>
                     </ul>

src/components/property/propertyCard.vue

                 <div class="card-footer-a" v-if="currentProperty.showFooter">
                   <ul class="card-info d-flex justify-content-around">
                     <li v-if="currentProperty.area !== null">
-                      <h4 class="card-info-title">Area</h4>
+                      <h4 class="card-info-title">
+                        <img src="../../../public/img/icons/area.png" height="16px" width="16px" />
+                        <!-- <i class="fa fa-ruler-combined"></i> -->
+                      </h4>
                       <span v-html="currentProperty.area"></span>
                     </li>
                     <li v-if="currentProperty.beds !== null">
-                      <h4 class="card-info-title">Beds</h4>
+                      <h4 class="card-info-title">
+                        <i class="fa fa-bed"></i>
+                      </h4>
                       <span>{{ currentProperty.beds }}</span>
                     </li>
                     <li v-if="currentProperty.baths !== null">
-                      <h4 class="card-info-title">Baths</h4>
+                      <h4 class="card-info-title">
+                        <i class="fa fa-bath"></i>
+                      </h4>
                       <span>{{ currentProperty.baths }}</span>
                     </li>
                     <li v-if="currentProperty.garages !== null">
-                      <h4 class="card-info-title">Garages</h4>
+                      <h4 class="card-info-title">
+                        <!-- <i class="fa fa-warehouse"></i> -->
+                        <img src="../../../public/img/icons/garage.png" height="16px" width="16px" />
+                      </h4>
                       <span>{{ currentProperty.garages }}</span>
                     </li>
                   </ul>

src/components/property/propertyFieldEditor.vue

           v-model="display"
           disabled
         />
-        <span v-if="mayEdit" @click="EditClick()" class="input-group-text" style="color: #60CBEB">
+        <span
+          v-if="mayEdit"
+          @click="EditClick()"
+          class="input-group-text spanCursor"
+          style="color: #60CBEB"
+        >
           <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
         </span>
       </div>
           <option value="yes">Yes</option>
           <option value="no">No</option>
         </select>
-        <span @click="UpdateValue()" class="input-group-text" style="color: #60CBEB">
+        <span @click="UpdateValue()" class="input-group-text spanCursor" style="color: #60CBEB">
           <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
         </span>
-        <span @click="Close()" class="input-group-text" style="color: #60CBEB">
+        <span @click="Close()" class="input-group-text spanCursor" style="color: #60CBEB">
           <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
         </span>
       </div>

src/components/property/propertyImage.vue

           style="width: 0px;height: 0px;overflow: hidden;"
           name="images[]"
           @change="imagesAdd"
-          multiple
+          :multiple="allowMultiple"
           :disabled="!mayEdit"
         />
       </label>
     <br />
     <div class="form-group row">
       <div v-for="(img, i) in image" class="col-md-2" :key="i">
-        <input type="checkbox" id="checkbox" v-model="imagesDefault[i]" @change="updateList(i)" />
-        <label for="checkbox" style="margin: 10px;">Main Image</label>
+        <input
+          v-if="allowMultiple"
+          type="checkbox"
+          id="checkbox"
+          v-model="imagesDefault[i]"
+          @change="updateList(i)"
+        />
+        <label v-if="allowMultiple" for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
         <span class="input-group-text" align="center" @click="removeImage(key)">
   props: {
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
+    allowMultiple: { type: Boolean, default: () => true },
   },
   data() {
     return {
   // },
   methods: {
     imagesAdd(e) {
+      if (!this.allowMultiple) {
+        this.images = {};
+        this.image = [];
+      }
+
       const files = e.target.files || e.dataTransfer.files;
 
       this.images = [];

src/components/property/propertySearchPage.vue

   <!-- eslint-disable max-len -->
   <div class="container">
     <br />
-    <div class="row">
-      <div class="col-md-2 offset-4">
-        <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>
-      </div>
-    </div>
-    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Residential'">
+    <div class="container col-md-12">
       <div class="col-sm-12">
         <div class="about-img-box">
           <img
+            v-if="propertyUsageType === 'Residential'"
             src="img/Pretoria-South-Africa.jpg"
             alt="Property Listing"
             class="img-fluid"
             style="width:800px;height:400px; border-radius:10px"
           />
+          <img
+            v-else
+            src="img/Johannesburg-south-africa-1.jpg"
+            alt="Property Listing"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
         </div>
         <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
           <h3 class="sinse-title">Property Listing</h3>
         </div>
       </div>
       <br />
+      <div class="row">
+        <div class="col-md-2 offset-4">
+          <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>
+        </div>
+      </div>
+      <br />
+      <div class="col-md-10 offset-1">
+        <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="SetSalesType('Sale')"
+            >For Sale</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="SetSalesType('Rent')"
+            >To Rent</a>
+          </li>
+        </ul>
+      </div>
+      <br />
+      <div class="row">
+        <div class="col-md-10 offset-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b v-if="salesType === 'Sale'">S</b>
+              <b v-else>R</b>
+            </span>
+            <select class="form-control browser-default custom-select" v-model="searchText">
+              <option value="0">Please select</option>
+              <option v-for="item in suburbs" :value="item.id" :key="item.id">{{item.display}}</option>
+            </select>
+            <button
+              type="button"
+              class="input-group-text fa fa-search"
+              style="color: #60CBEB"
+              @click="SearchClick"
+            ></button>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="col-md-12">
-          <h1 class="my-4">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">
+        <div class="container col-md-6 text-left" v-if="propertyUsageType === 'Residential'">
           <p>
             Uni-Vate Properties understands the necessity in property-seekers
             to find that perfect fit;
             <router-link to="/property/new/Residential/Sale">Click Here</router-link>
           </p>
         </div>
-        <div class="col-md-4">
-          <p>
-            <img
-              class="img-fluid"
-              src="./../../../public/img/residential.jpg"
-              alt="About Resale"
-              style="border-radius:10px"
-            />
-          </p>
-        </div>
-      </div>
-      <div>
-        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
-        <div v-if="properties.length === 0">
-          <img src="../../../public/img/no-homes.png" />
-          <br />
-          <br />
-          <p>Sorry no listing where found matching your search</p>
-        </div>
-      </div>
-      <br />
-    </div>
-
-    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Commercial'">
-      <div class="col-sm-12">
-        <div class="about-img-box">
-          <img
-            src="img/Johannesburg-south-africa-1.jpg"
-            alt="Property Listing"
-            class="img-fluid"
-            style="width:800px;height:400px; border-radius:10px"
-          />
-        </div>
-        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
-          <h3 class="sinse-title">Property Listing</h3>
-        </div>
-      </div>
-      <br />
-      <div class="row">
-        <div class="col-md-12">
-          <h1 class="my-4">About Commercial Properties</h1>
-        </div>
-        <div class="container col-md-6 text-left">
+        <div class="container col-md-6 text-left" v-else>
           <p>
             Commercial properties are characteristically any larger properties that
             generate profit through leasing or rental activities. These properties
         <div class="col-md-4">
           <p>
             <img
+              v-if="propertyUsageType === 'Residential'"
+              class="img-fluid"
+              src="./../../../public/img/residential.jpg"
+              alt="About Resale"
+              style="border-radius:10px"
+            />
+            <img
+              v-else
               class="img-fluid"
               src="./../../../public/img/commercial.jpg"
               alt="About Resale"
           </p>
         </div>
       </div>
-      <div>
-        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
-        <div v-if="properties.length === 0">
-          <img src="../../../public/img/no-homes.png" />
-          <br />
-          <br />
-          <p>Sorry no listing where found matching your search</p>
-        </div>
-      </div>
       <br />
     </div>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
-import propertyCard from './propertyCard.vue';
 
 export default {
   name: 'propertysearch',
-  components: {
-    propertyCard,
-  },
   data() {
     return {
-      propertySearch: {
-        userName: '',
-        salesType: 'All',
-        propertyUsageType: 'All',
-        propertyType: 'All',
-        province: 'All',
-        city: 'All',
-        suburb: 'All',
-        minPrice: 0,
-        maxPrice: 0,
-      },
+      propertyUsageType: 'Residential',
+      salesType: 'Sale',
+      searchText: '',
+      options: ['bla', 'boo', 'buz'],
     };
   },
-  mounted() {
-    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
-      this.propertySearch.propertyUsageType = 'Residential';
-    }
+  computed: {
+    ...mapState('propertySearch', ['suburbs', 'propertySearch']),
   },
   methods: {
-    ...mapActions('propertySearch', ['searchProperties']),
+    ...mapActions('propertySearch', ['getSuburbs', 'applyFilter']),
     SetType(item) {
-      this.propertySearch.propertyUsageType = item;
+      this.propertyUsageType = item;
     },
-  },
-  computed: {
-    ...mapState('propertySearch', ['properties']),
-    ...mapState('authentication', ['username']),
-    ParamsChanged() {
-      if (Object.keys(this.$route.query).length === 0) {
-        if (this.propertySearch.propertyUsageType === 'All') {
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.propertySearch.propertyUsageType = 'Residential';
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.propertySearch.keyword = 'All';
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.propertySearch.salesType = 'All';
-        }
-      }
-      if (Object.keys(this.$route.query).length > 0) {
-        if (Object.keys(this.$route.query).length > 2) {
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.propertySearch = this.$route.query;
-        } else {
-          if (this.$route.query.salesType) {
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.propertySearch.salesType = this.$route.query.salesType;
-          }
-          if (this.$route.query.propertyUsageType) {
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.propertySearch.propertyUsageType = this.$route.query.propertyUsageType;
-          }
-        }
-      }
-      if (this.propertySearch.keyword === '') {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.propertySearch.keyword = 'All';
-      }
-      if (this.username) {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.propertySearch.userName = this.username;
-      } else {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.propertySearch.userName = 'Unknown';
-      }
-      this.searchProperties(this.propertySearch);
-      return null;
+    SearchClick() {
+      const item = this.suburbs.find(s => s.id === this.searchText);
+      console.log(JSON.stringify(item));
+      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');
     },
-  },
-  watch: {
-    ParamsChanged() {
-      return null;
+    Filter() {
+      this.applyFilter(this.searchText);
+    },
+    SetSalesType(value) {
+      this.salesType = value;
     },
   },
+  mounted() {
+    this.getSuburbs();
+  },
 };
 </script>

src/components/property/propertySearchResults.vue

     propertyCard,
   },
   data() {
-    return {
-      propertySearch: {
-        userName: '',
-        salesType: 'All',
-        propertyUsageType: 'All',
-        propertyType: 'All',
-        province: 'All',
-        city: 'All',
-        suburb: 'All',
-        minPrice: 0,
-        maxPrice: 0,
-      },
-    };
+    return {};
   },
   mounted() {
     if (typeof this.propertySearch.propertyUsageType === 'undefined') {

src/components/property/propertyeditPage.vue

                 />
                 <span
                   v-if="!img.isDeleted && mayEdit"
-                  class="input-group-text"
+                  class="input-group-text spanCursor"
                   align="center"
                   @click="DeleteImage(img)"
                 >
 </script>
 
 <style>
-span {
+.spanCursor {
   cursor: pointer;
 }
 .opacity {

src/components/shared/searchTab.vue

     return {
       selectedPropertyType: 'timeshare',
       keyword: '',
-      propertySearch: {
-        keyword: '',
-        userName: '',
-        salesType: 'Sale',
-        propertyUsageType: 'All',
-        propertyType: 'All',
-        province: 'All',
-        city: 'All',
-        suburb: 'All',
-        minPrice: 0,
-        maxPrice: 0,
-      },
     };
   },
   computed: {
     ...mapState('weekList', ['filter']),
+    ...mapState('propertySearch', ['propertySearch']),
   },
   methods: {
     updateType(item) {
       if (this.selectedPropertyType === 'timeshare') {
         this.$router.push('/timesharesearch');
       } else {
-        // this.$router.push('/property/search');
-        this.$router.push({
-          path: '/property/search',
-          query: this.propertySearch,
-        });
+        this.$router.push('/property/propertySearch/results');
+        // this.$router.push({
+        //   path: '/property/search',
+        //   query: this.propertySearch,
+        // });
       }
     },
   },

src/router/index.js

 import TemplatePage from '../components/communication/templatePage.vue';
 import CarouselList from '../components/admin/misc/carouselList.vue';
 import CarouselDetail from '../components/admin/misc/carousel.vue';
+import PropertySearchResults from '../components/property/propertySearchResults.vue';
 
 Vue.use(Router);
 
       y: 0,
     };
   },
-  routes: [{
-    path: '/',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/about/us',
-    name: 'aboutus',
-    component: AboutUs,
-  },
-  {
-    path: '/about/timeshare',
-    name: 'abouttimeshare',
-    component: AboutTimeshare,
-  },
-  {
-    path: '/communication/template',
-    name: 'template',
-    component: TemplatePage,
-  },
-  {
-    path: '/timeshare/sell',
-    name: 'TimeshareSell',
-    component: TimeshareSell,
-  },
-  {
-    path: '/timeshare/buy',
-    name: 'TimeshareBuy',
-    component: TimeshareBuy,
-  },
-  {
-    path: '/timeshare/faq',
-    name: 'TimeshareFAQ',
-    component: TimeshareFAQ,
-  },
-  {
-    path: '/timeshare/myWeeks',
-    name: 'MyWeeks',
-    component: MyWeeksPage,
-  },
-  {
-    path: '/user/login',
-    name: 'Login',
-    component: Login,
-  },
-  {
-    path: '/user/updateProfileInfo',
-    name: 'UpdateInfo',
-    component: UpdateInfo,
-  },
-  {
-    path: '/user/register',
-    name: 'PrivateIndividual',
-    component: PrivateIndividual,
-  },
-  {
-    path: '/user/registeragency',
-    name: 'Agency',
-    component: Agency,
-  },
-  {
-    path: '/property/property/:id',
-    name: 'PropertyPage',
-    component: PropertyPage,
-  },
-  {
-    path: '/property/:propertyUsageType/search',
-    name: 'PropertySearch',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/search',
-    name: 'PropertySearchTab',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/new/:saleType',
-    name: 'PropertyNew',
-    component: PropertyCreate,
-  },
-  {
-    path: '/property/new/:propertyUsageType/:saleType',
-    name: 'PropertyNewFromSearch',
-    component: PropertyCreate,
-  },
-  {
-    path: '/property/edit',
-    name: 'PropertyEdit',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/admin/list/:by',
-    name: 'PropertyListAdmin',
-    component: PropertyList,
-  },
-  {
-    path: '/propertyTypes/list',
-    name: 'PropertyTypeList',
-    component: PropertyTypeList,
-  },
-  {
-    path: '/propertyType/new',
-    name: 'PropertyTypeNew',
-    component: PropertyType,
-  },
-  {
-    path: '/propertyType/:id',
-    name: 'PropertyTypeEdit',
-    component: PropertyType,
-  },
-  {
-    path: '/userDefinedGroups/list',
-    name: 'UserDefinedGroupsList',
-    component: UserDefinedGroups,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup/:id',
-    name: 'UserDefinedGroupEdit',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup',
-    name: 'UserDefinedGroupNew',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/status/list',
-    name: 'StatusList',
-    component: Status,
-  },
-  {
-    path: '/status/timeshareAdmin',
-    name: 'TimeshareAdmin',
-    component: timeshareAdminPage,
-  },
-  {
-    path: '/status/tenderWeekAdmin',
-    name: 'TenderWeekAdmin',
-    component: tenderWeekAdminPage,
-  },
-  {
-    path: '/status/userManagementPage',
-    name: 'userManagementPage',
-    component: userManagementPage,
-  },
-  {
-    path: '/status/agentUserManagementPage',
-    name: 'agentManagementPage',
-    component: agentManagementPage,
-  },
-  {
-    path: '/status/changeLogPage',
-    name: 'changeLogPage',
-    component: changeLogPage,
-  },
-  {
-    path: '/unitConfiguration/list',
-    name: 'UnitConfiguration',
-    component: UnitConfiguration,
-  },
-  {
-    path: '/contactus',
-    name: 'ContactUs',
-    component: ContactUs,
-  },
-  {
-    path: '/privacypolicy',
-    name: 'PrivacyPolicy',
-    component: PrivacyPolicy,
-  },
-  {
-    path: '/resort/:resortCode',
-    name: 'ResortPage',
-    component: ResortPage,
-    props: true,
-  },
-  {
-    path: '/resort/:resortCode/:unitNumber',
-    name: 'UnitPage',
-    component: UnitPage,
-    props: true,
-  },
-  {
-    path: '/timeshare/:weekId',
-    name: 'TimeshareSell',
-    component: TimeshareSell,
-    props: true,
-  },
-  {
-    path: '/MakeOffer',
-    name: 'MakeOffer',
-    component: MakeOffer,
-  },
-  {
-    path: '/Offers',
-    name: 'Offers',
-    component: Offer,
-  },
-  {
-    path: '/timesharesearch',
-    name: 'TimeshareSearch',
-    component: TimeshareSearch,
-  },
-  {
-    path: '/searchLog',
-    name: 'SearchLog',
-    component: searchLog,
-  },
-  {
-    path: '/carousel',
-    name: 'carousel',
-    component: CarouselList,
-  },
-  {
-    path: '/carousel/details/:id',
-    name: 'CarouselDetails',
-    component: CarouselDetail,
-  },
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: HomePage,
+    },
+    {
+      path: '/about/us',
+      name: 'aboutus',
+      component: AboutUs,
+    },
+    {
+      path: '/about/timeshare',
+      name: 'abouttimeshare',
+      component: AboutTimeshare,
+    },
+    {
+      path: '/communication/template',
+      name: 'template',
+      component: TemplatePage,
+    },
+    {
+      path: '/timeshare/sell',
+      name: 'TimeshareSell',
+      component: TimeshareSell,
+    },
+    {
+      path: '/timeshare/buy',
+      name: 'TimeshareBuy',
+      component: TimeshareBuy,
+    },
+    {
+      path: '/timeshare/faq',
+      name: 'TimeshareFAQ',
+      component: TimeshareFAQ,
+    },
+    {
+      path: '/timeshare/myWeeks',
+      name: 'MyWeeks',
+      component: MyWeeksPage,
+    },
+    {
+      path: '/user/login',
+      name: 'Login',
+      component: Login,
+    },
+    {
+      path: '/user/updateProfileInfo',
+      name: 'UpdateInfo',
+      component: UpdateInfo,
+    },
+    {
+      path: '/user/register',
+      name: 'PrivateIndividual',
+      component: PrivateIndividual,
+    },
+    {
+      path: '/user/registeragency',
+      name: 'Agency',
+      component: Agency,
+    },
+    {
+      path: '/property/property/:id',
+      name: 'PropertyPage',
+      component: PropertyPage,
+    },
+    {
+      path: '/property/:propertyUsageType/search',
+      name: 'PropertySearch',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/search',
+      name: 'PropertySearchTab',
+      component: PropertySearch,
+    },
+    {
+      path: '/property/new/:saleType',
+      name: 'PropertyNew',
+      component: PropertyCreate,
+    },
+    {
+      path: '/property/new/:propertyUsageType/:saleType',
+      name: 'PropertyNewFromSearch',
+      component: PropertyCreate,
+    },
+    {
+      path: '/property/edit',
+      name: 'PropertyEdit',
+      component: PropertyEdit,
+    },
+    {
+      path: '/property/admin/list/:by',
+      name: 'PropertyListAdmin',
+      component: PropertyList,
+    },
+    {
+      path: '/propertyTypes/list',
+      name: 'PropertyTypeList',
+      component: PropertyTypeList,
+    },
+    {
+      path: '/propertyType/new',
+      name: 'PropertyTypeNew',
+      component: PropertyType,
+    },
+    {
+      path: '/propertyType/:id',
+      name: 'PropertyTypeEdit',
+      component: PropertyType,
+    },
+    {
+      path: '/userDefinedGroups/list',
+      name: 'UserDefinedGroupsList',
+      component: UserDefinedGroups,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup/:id',
+      name: 'UserDefinedGroupEdit',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/userDefinedGroups/userDefinedGroup',
+      name: 'UserDefinedGroupNew',
+      component: UserDefinedGroup,
+    },
+    {
+      path: '/status/list',
+      name: 'StatusList',
+      component: Status,
+    },
+    {
+      path: '/status/timeshareAdmin',
+      name: 'TimeshareAdmin',
+      component: timeshareAdminPage,
+    },
+    {
+      path: '/status/tenderWeekAdmin',
+      name: 'TenderWeekAdmin',
+      component: tenderWeekAdminPage,
+    },
+    {
+      path: '/status/userManagementPage',
+      name: 'userManagementPage',
+      component: userManagementPage,
+    },
+    {
+      path: '/status/agentUserManagementPage',
+      name: 'agentManagementPage',
+      component: agentManagementPage,
+    },
+    {
+      path: '/status/changeLogPage',
+      name: 'changeLogPage',
+      component: changeLogPage,
+    },
+    {
+      path: '/unitConfiguration/list',
+      name: 'UnitConfiguration',
+      component: UnitConfiguration,
+    },
+    {
+      path: '/contactus',
+      name: 'ContactUs',
+      component: ContactUs,
+    },
+    {
+      path: '/privacypolicy',
+      name: 'PrivacyPolicy',
+      component: PrivacyPolicy,
+    },
+    {
+      path: '/resort/:resortCode',
+      name: 'ResortPage',
+      component: ResortPage,
+      props: true,
+    },
+    {
+      path: '/resort/:resortCode/:unitNumber',
+      name: 'UnitPage',
+      component: UnitPage,
+      props: true,
+    },
+    {
+      path: '/timeshare/:weekId',
+      name: 'TimeshareSell',
+      component: TimeshareSell,
+      props: true,
+    },
+    {
+      path: '/MakeOffer',
+      name: 'MakeOffer',
+      component: MakeOffer,
+    },
+    {
+      path: '/Offers',
+      name: 'Offers',
+      component: Offer,
+    },
+    {
+      path: '/timesharesearch',
+      name: 'TimeshareSearch',
+      component: TimeshareSearch,
+    },
+    {
+      path: '/searchLog',
+      name: 'SearchLog',
+      component: searchLog,
+    },
+    {
+      path: '/carousel',
+      name: 'carousel',
+      component: CarouselList,
+    },
+    {
+      path: '/carousel/details/:id',
+      name: 'CarouselDetails',
+      component: CarouselDetail,
+    },
+    {
+      path: '/property/propertySearch/results',
+      name: 'PropertySearchResults',
+      component: PropertySearchResults,
+    },
   ],
 });

src/store/modules/misc/carousel.js

   namespaced: true,
   state: {
     carouselList: [],
+    carousel: {
+      id: 0,
+      propertyID: 0,
+      timeshareID: 0,
+      header: '',
+      image: '',
+    },
   },
   mutations: {
+    setCarouselItem(state, item) {
+      state.carousel = item;
+    },
     setCarouselList(state, items) {
       state.carouselList = items;
     },
+    addToCarouselList(state, item) {
+      state.carouselList.push(item);
+    },
     removeCarousel(state, id) {
       state.carouselList.pop(state.carouselList.find(p => p.id === id));
     },
   },
   getters: {},
   actions: {
+    getCarouselItem({ commit }, id) {
+      axios
+        .get(`/api/Carousel/${id}`)
+        .then(result => commit('setCarouselItem', result.data))
+        .catch(console.error);
+    },
     getCarouselList({ commit }) {
       axios
         .get('/api/Carousel')
         .then(result => commit('setCarouselList', result.data))
         .catch(console.error);
     },
+    saveCarouselItem({ commit }, item) {
+      axios
+        .post('/api/Carousel', item)
+        .then(result => commit('addToCarouselList', result.data))
+        .catch(console.error);
+    },
     deleteCarousel({ commit }, id) {
       axios
         .delete(`/api/Carousel/${id}`)

src/store/modules/property/property.js

         .then(response => commit('setPropertyFields', response.data))
         .catch(console.error);
     },
+    getSavedPropertyImages({ commit }, id) {
+      axios
+        .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
+        .then(result => commit('setPropertyImages', result.data))
+        .catch(console.error);
+    },
   },
 };

src/store/modules/property/propertySearch.js

     },
     properties: [],
     latestProperties: [],
+    suburbs: [],
+    searchText: '',
   },
   mutations: {
     updateSearch(state, propertySearch) {
     onClearFilter(state, filter) {
       state.propertySearch[filter] = 'All';
     },
+    setSuburbs(state, items) {
+      state.suburbs = items;
+    },
+    setFilter(state, value) {
+      state.searchText = value;
+    },
+  },
+  getters: {
+    filterSuburbs: (state) => {
+      let subs = state.suburbs;
+      if (state.searchText) {
+        subs = _.filter(subs, s => s.display.contains(state.searchText));
+      }
+      return subs;
+    },
   },
   actions: {
     clearFilter({ commit }, filter) {
         .then(response => commit('setLatestProperties', response.data))
         .catch(console.error);
     },
+    getSuburbs({ commit }) {
+      axios
+        .get('/api/suburb/GetSearchList')
+        .then(response => commit('setSuburbs', response.data))
+        .catch(console.error);
+    },
+    applyFilter({ commit }, value) {
+      commit('setFilter', { value });
+    },
   },
 };