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

src/components/admin/misc/carousel.vue

@@ -1 +1,206 @@
-<!-- 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

@@ -2,23 +2,17 @@
   <!-- 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>
@@ -31,7 +25,6 @@
             <th>Header</th>
             <th>Type</th>
             <th></th>
-            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -42,14 +35,6 @@
             <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

@@ -0,0 +1,101 @@
+<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%">Search {{ name }}</h1>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="container">
+            <ListView
+              v-if="name === 'Timeshare'"
+              :items="items"
+              :showNew="false"
+              @onRowClick="onRowClick"
+            />
+            <ListView v-else :items="properties" :showNew="false" @onRowClick="onRowClick" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import ListView from '../../shared/listView.vue';
+import Log from '../../../assets/Log';
+
+export default {
+  name: 'CarouselSearch',
+  props: {
+    name: String,
+  },
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      user: Log.getUser(),
+    };
+  },
+  mounted() {
+    if (this.name === 'Timeshare') {
+      this.getItems(this.user.id);
+    } else {
+      this.getProperties(
+        Object.assign(
+          {},
+          {
+            propertyType: 'Admin',
+            user: this.user.id,
+          },
+        ),
+      );
+    }
+  },
+  computed: {
+    ...mapState('myWeeks', ['items']),
+    ...mapState('propertyList', ['properties']),
+    // eslint-disable-next-line vue/return-in-computed-property
+    nameChanged() {
+      if (this.name === 'Timeshare') {
+        this.getItems(this.user.id);
+      } else {
+        this.getProperties(
+          Object.assign(
+            {},
+            {
+              propertyType: 'Admin',
+              user: this.user.id,
+            },
+          ),
+        );
+      }
+    },
+  },
+  methods: {
+    ...mapActions('myWeeks', ['getItems']),
+    ...mapActions('propertyList', ['getProperties']),
+    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: {
+    nameChanged() {
+      return null;
+    },
+  },
+};
+</script>

src/components/home/carouselSection.vue

@@ -22,28 +22,36 @@
               <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

@@ -71,19 +71,29 @@
                 <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/propertyCreate.vue

@@ -69,11 +69,9 @@
                     v-model="property.propertyTypeId"
                   >
                     <option value="0">Please select type</option>
-                    <option
-                      v-for="item in propertyTypes"
-                      :value="item.id"
-                      :key="item.id"
-                    >{{ item.description }}</option>
+                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                      item.description
+                    }}</option>
                   </select>
                 </div>
               </div>
@@ -152,11 +150,9 @@
                     v-model="property.provinceId"
                   >
                     <option value="0">Please select province</option>
-                    <option
-                      v-for="province in provinces"
-                      :value="province.id"
-                      :key="province.id"
-                    >{{ province.description }}</option>
+                    <option v-for="province in provinces" :value="province.id" :key="province.id">{{
+                      province.description
+                    }}</option>
                   </select>
                 </div>
               </div>
@@ -175,11 +171,9 @@
                     v-model="property.cityId"
                   >
                     <option value="0">Please select city</option>
-                    <option
-                      v-for="city in cities"
-                      :value="city.id"
-                      :key="city.id"
-                    >{{ city.description }}</option>
+                    <option v-for="city in cities" :value="city.id" :key="city.id">{{
+                      city.description
+                    }}</option>
                   </select>
                 </div>
               </div>
@@ -197,11 +191,9 @@
                     @change="getPostalCode"
                   >
                     <option value="0">Please select suburb</option>
-                    <option
-                      v-for="suburb in suburbs"
-                      :value="suburb.id"
-                      :key="suburb.id"
-                    >{{ suburb.description }}</option>
+                    <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">{{
+                      suburb.description
+                    }}</option>
                   </select>
                 </div>
               </div>
@@ -263,12 +255,15 @@
                 <label for="Property Description">Description</label>
                 <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
                 <br />
-                <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
+                <p>
+                  * A listing fee of R380 including VAT is payable to list your Property on the
+                  Uni-Vate website
+                </p>
               </div>
             </div>
             <div class="form-group row" />
             <UserField
-              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              v-if="(propertyType === 'Residential') & (propertyOverviewFields.length > 0)"
               :fields="propertyOverviewFields[0].fields"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
               :id="1"
@@ -348,7 +343,9 @@
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Save</button>
+            >
+              Save
+            </button>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
@@ -360,7 +357,6 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { VueEditor } from 'vue2-editor';
-import { setTimeout } from 'timers';
 import UserField from './propertyUserField.vue';
 import ImageLoad from './propertyImage.vue';
 
@@ -384,16 +380,12 @@ export default {
       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' }],
       ],
+      error: '',
     };
   },
   methods: {
@@ -433,47 +425,37 @@ export default {
       }
       this.property.propertyUserFields = this.propertyFieldValues;
 
-      this.property.userId = this.user.id;
-      this.saveProperty(this.property);
-      setTimeout(
-        () => this.$router.push({
-            path: '/property/Search',
-            query: {
-              salesType: this.salesType,
-              propertyUsageType: this.propertyType,
-            },
-          }),
-        3000,
-      );
+      if (this.user) {
+        this.property.userId = this.user.id;
+      }
+
+      this.saveProperty(this.property)
+        .then((fulfilled) => {
+          this.$router.push(`/property/property/${fulfilled.data.id}`);
+        })
+        .catch((error) => {
+          console.log(error.message);
+        });
     },
     Close() {
       this.$router.push('/property/admin/list/my');
     },
     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 }));
       }
     },
     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 }),
         );
       }
     },
     getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[
-        item.target.options.selectedIndex - 1
-      ].postalCode;
+      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
     },
     loadedImages(values) {
       this.images = values;

src/components/property/propertyFieldEditor.vue

@@ -11,7 +11,12 @@
           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>
@@ -50,10 +55,10 @@
           <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

@@ -10,7 +10,7 @@
           style="width: 0px;height: 0px;overflow: hidden;"
           name="images[]"
           @change="imagesAdd"
-          multiple
+          :multiple="allowMultiple"
           :disabled="!mayEdit"
         />
       </label>
@@ -18,8 +18,14 @@
     <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)">
@@ -36,6 +42,7 @@ export default {
   props: {
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
+    allowMultiple: { type: Boolean, default: () => true },
   },
   data() {
     return {
@@ -54,6 +61,11 @@ export default {
   // },
   methods: {
     imagesAdd(e) {
+      if (!this.allowMultiple) {
+        this.images = {};
+        this.image = [];
+      }
+
       const files = e.target.files || e.dataTransfer.files;
 
       this.images = [];

src/components/property/propertyList.vue

@@ -2,75 +2,27 @@
   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <!-- <section class="intro-single"> -->
       <div class="container">
-        <br />
-        <br />
         <br />
         <br />
         <div class="row">
           <div class="col-md-12 col-lg-8">
             <div class="title-box-d">
-              <h1
-                v-if="showAdmin"
-                class="title-d"
-                style="text-align:left; font-size: 250%"
-              >Admin Properties</h1>
-              <h1 v-else class="title-d" style="text-align:left; font-size: 250%">My Properties</h1>
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Properties</h1>
             </div>
           </div>
         </div>
       </div>
-      <!-- </section> -->
     </div>
     <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Property ID</th>
-            <th>Size</th>
-            <th>Price</th>
-            <th>Usage Type</th>
-            <th>Type</th>
-            <th>Sale Type</th>
-            <th>Publish</th>
-            <th>Status</th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in properties" :key="i">
-            <td>{{ item.name }}</td>
-            <td>{{ item.id }}</td>
-            <td v-html="item.size" />
-            <td>{{ item.price }}</td>
-            <td>{{ item.usageType }}</td>
-            <td>{{ item.type }}</td>
-            <td>{{ item.saleType }}</td>
-            <!-- <td>{{ item.publish }}</td> -->
-            <td></td>
-            <td>{{ item.status }}</td>
-            <td>
-              <button
-                type="button"
-                @click="Edit(item)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Edit</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                @click="Delete(item)"
-                class="btn btn-b-n"
-                style="width: 85px; height:40px;"
-              >Delete</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <listView
+        :items="properties"
+        :showNew="false"
+        :editable="true"
+        :deleteable="true"
+        @onEdit="Edit"
+        @onDelete="Delete"
+      />
     </div>
     <br />
   </div>
@@ -78,13 +30,17 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import listView from '../shared/listView.vue';
 
 export default {
   name: 'PropertyList',
+  components: {
+    listView,
+  },
   data() {
     return {
       propertyType: '',
-      showAdmin: false,
+      role: 'MY',
     };
   },
   methods: {
@@ -101,45 +57,38 @@ export default {
     },
   },
   mounted() {
-    if (this.$route.params.by === 'my') {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.showAdmin = false;
-    } else {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.showAdmin = true;
+    if (this.user.role === 'Super Admin') {
+      this.role = 'SUPERADMIN';
+    }
+    if (this.user.role === 'Agency') {
+      this.user.role = 'ADMIN';
     }
-
-    // this.user = 28; // user id
 
     this.getProperties(
-      Object.assign(
-        {},
-        {
-          propertyType: this.showAdmin ? 'Admin' : 'My',
-          user: this.user.id,
-        },
-      ),
+      Object.assign({
+        propertyType: this.role,
+        user: this.user.id,
+      }),
     );
   },
   computed: {
     ...mapState('propertyList', ['properties']),
     ...mapState('authentication', ['user']),
     UserChanged() {
-      if (this.$route.params.by === 'my') {
+      if (this.user.role === 'Super Admin') {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.showAdmin = false;
-      } else {
+        this.role = 'SUPERADMIN';
+      }
+      if (this.user.role === 'Agency') {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.showAdmin = true;
+        this.user.role = 'ADMIN';
       }
+
       this.getProperties(
-        Object.assign(
-          {},
-          {
-            propertyType: this.showAdmin ? 'Admin' : 'My',
-            user: this.user,
-          },
-        ),
+        Object.assign({
+          propertyType: this.role,
+          user: this.user.id,
+        }),
       );
       return this.user;
     },

src/components/property/propertyPage.vue

@@ -2,17 +2,13 @@
   <!-- eslint-disable max-len -->
   <div v-if="property">
     <div class="container">
-      <br />
-      <br />
-      <br />
       <br />
       <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>
@@ -23,13 +19,20 @@
     <section class="property-single nav-arrow-b">
       <div class="container">
         <div class="row">
-          <lightBox
-            :thumbnails="propertyImages"
-            :largeImages="propertyImages"
-            :caption="false"
-            class="lightBox"
-          />
+          <div id="app" class="scrolling-wrapper">
+            <div class="card">
+              <img
+                class="image"
+                v-for="(image, i) in propertyImages"
+                :src="image"
+                @click="index = i"
+                :key="i"
+              />
+            </div>
+            <gallery :images="propertyImages" :index="index" @close="index = null"></gallery>
+          </div>
         </div>
+        <br />
         <div class="row">
           <div class="col-sm-12">
             <div class="row justify-content-between">
@@ -72,7 +75,7 @@
 
                     <div class="card-title-c align-self-center">
                       <h5 class="title-c">R{{ formatPrice(property.price) }}</h5>
-                      <h6 v-if="property.pricePer">Per {{property.pricePer}}</h6>
+                      <h6 v-if="property.pricePer">Per {{ property.pricePer }}</h6>
                     </div>
                   </div>
                   <!-- </div> -->
@@ -93,16 +96,23 @@
                       </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>
                         <span
                           style="text-align:right"
                           v-if="property"
-                          v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb ? property.suburb.description : '') + formatAddress(property.city ? property.city.description : '') + formatAddress(property.province ? property.province.description : '') "
+                          v-html="
+                            formatAddress(property.addressLine1) +
+                              formatAddress(property.addressLine2) +
+                              formatAddress(property.addressLine3) +
+                              formatAddress(property.suburb ? property.suburb.description : '') +
+                              formatAddress(property.city ? property.city.description : '') +
+                              formatAddress(property.province ? property.province.description : '')
+                          "
                         ></span>
                       </li>
                     </ul>
@@ -114,7 +124,9 @@
                     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-->
@@ -127,7 +139,12 @@
                             name="MakeOffer"
                             :isMakeOffer="true"
                             :isProperty="true"
-                            :item="{id: property.id, shortDescription: property.shortDescription, description: property.description, sellPrice: property.price}"
+                            :item="{
+                              id: property.id,
+                              shortDescription: property.shortDescription,
+                              description: property.description,
+                              sellPrice: property.price
+                            }"
                           />
                         </div>
                       </div>
@@ -252,17 +269,19 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
-import lightBox from '../shared/lightBoxGallery.vue';
 import makeOffer from '../processFlow/makeOffer.vue';
+import gallery from '../shared/gallerySlideShow.vue';
 
 export default {
   name: 'property',
   components: {
-    lightBox,
     makeOffer,
+    gallery,
   },
   data() {
-    return {};
+    return {
+      index: null,
+    };
   },
   mounted() {
     this.getProperty(this.$route.params.id);
@@ -272,11 +291,7 @@ export default {
     ...mapState('property', ['property', 'propertyImages']),
   },
   methods: {
-    ...mapActions('property', [
-      'getProperty',
-      'getPropertyImages',
-      'clearPropertyImages',
-    ]),
+    ...mapActions('property', ['getProperty', 'getPropertyImages', 'clearPropertyImages']),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
@@ -294,14 +309,24 @@ export default {
 };
 </script>
 
-<style lang ="scss">
-.light-box {
-  &__thumbnail {
-    margin: 20px;
-    width: 200px;
-  }
+<style lang="scss">
+.image {
+  width: 150px;
+  height: 150px;
+  background-size: cover;
+  cursor: pointer;
+  margin: 5px;
+  border-radius: 3px;
+  border: 1px solid lightgray;
+  object-fit: contain;
 }
-img {
-  max-width: 100%;
+.scrolling-wrapper {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+
+  .card {
+    display: inline-block;
+  }
 }
 </style>

src/components/property/propertySearchFields.vue

@@ -29,10 +29,9 @@
           </div>
           <select class="form-control" v-model="resType" @change="PropertyTypeSelected">
             <option>All</option>
-            <option
-              v-for="(propertyType, i) in propertyTypesRes"
-              :key="i"
-            >{{ propertyType.description }}</option>
+            <option v-for="(propertyType, i) in propertyTypesRes" :key="i">{{
+              propertyType.description
+            }}</option>
           </select>
           <div class="input-group-append" @click="clearResType">
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
@@ -51,10 +50,9 @@
           </div>
           <select class="form-control" v-model="comType" @change="PropertyTypeSelected">
             <option>All</option>
-            <option
-              v-for="(propertyType, i) in propertyTypesCom"
-              :key="i"
-            >{{ propertyType.description }}</option>
+            <option v-for="(propertyType, i) in propertyTypesCom" :key="i">{{
+              propertyType.description
+            }}</option>
           </select>
           <div class="input-group-append" @click="clearComType">
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
@@ -139,8 +137,7 @@
               <input
                 class="form-control"
                 type="number"
-                step="any"
-                name="minPrice"
+                setp="any"
                 v-model="propertySearch.minPrice"
               />
               <div class="input-group-append" @click="clearFilter('minPrice')">
@@ -161,8 +158,7 @@
               <input
                 class="form-control"
                 type="number"
-                step="any"
-                name="maxPrice"
+                setp="any"
                 v-model="propertySearch.maxPrice"
               />
               <div class="input-group-append" @click="clearFilter('maxPrice')">
@@ -216,20 +212,13 @@ export default {
       this.clearFilter('propertyType');
       this.comType = 'All';
     },
-    salesTypeSelected() {
-      this.$emit('updateSearch', this.propertySearch);
-    },
     PropertyTypeSelected(item) {
       this.propertySearch.propertyType = item.target.value;
-      this.$emit('updateSearch', this.propertySearch);
     },
     ProvinceSelected(item) {
       if (item.target.value !== 'All') {
-        this.getCities(
-          Object.assign({}, { province: this.propertySearch.province }),
-        );
+        this.getCities(Object.assign({}, { province: this.propertySearch.province }));
       }
-      this.$emit('updateSearch', this.propertySearch);
     },
     CitySelected(item) {
       if (item.target.value !== 'All') {
@@ -243,10 +232,6 @@ export default {
           ),
         );
       }
-      this.$emit('updateSearch', this.propertySearch);
-    },
-    SuburbSeleted() {
-      this.$emit('updateSearch', this.propertySearch);
     },
   },
 };

src/components/property/propertySearchPage.vue

@@ -2,48 +2,107 @@
   <!-- 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">
+        <autoComplete class="col-md-11 offset-1" :items="suburbList" @selection="SelectedFilter" />
+      </div>
+      <br />
+      <div class="row">
+        <div class="col-md-10 offset-1">
+          <button
+            type="button"
+            class="input-group-text fa fa-search"
+            style="color: #60CBEB"
+            @click="SearchClick"
+          >
+            Search
+          </button>
+        </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;
-            a home that meets, and exceeds the individual's needs. That is why,
-            our dedicated team sources
-            a range of property types, whether that home is a rental option near
-            a University for a student
-            just starting out, or a family home fit for entertaining.
+            Uni-Vate Properties understands the necessity in property-seekers to find that perfect
+            fit; a home that meets, and exceeds the individual's needs. That is why, our dedicated
+            team sources a range of property types, whether that home is a rental option near a
+            University for a student just starting out, or a family home fit for entertaining.
           </p>
           <p>
-            Looking to sell your residential property, instead? Uni-Vate
-            Properties prides itself on
-            professionalism and the right expertise, to help you secure the
-            best possible deal for your home.
+            Looking to sell your residential property, instead? Uni-Vate Properties prides itself on
+            professionalism and the right expertise, to help you secure the best possible deal for
+            your home.
           </p>
           <p>
             Wish to RENT your property?
@@ -54,61 +113,19 @@
             <router-link to="/property/new/Residential/Sale">Click Here</router-link>
           </p>
         </div>
-        <div class="col-md-4">
+        <div class="container col-md-6 text-left" v-else>
           <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">
-          <p>
-            Commercial properties are characteristically any larger properties that
-            generate profit through leasing or rental activities. These properties
-            are typically used to conduct business and provide companies with cut-and-dry
-            leasing agreements, which keep their involvement in the maintenance of the property
-            to a minimum, so they may focus on the growth of their company.
+            Commercial properties are characteristically any larger properties that generate profit
+            through leasing or rental activities. These properties are typically used to conduct
+            business and provide companies with cut-and-dry leasing agreements, which keep their
+            involvement in the maintenance of the property to a minimum, so they may focus on the
+            growth of their company.
           </p>
           <p>
             Uni-Vate Properties seeks out professional, clean spaces for such companies and acts as
             mediator between the landlord/-lady and the tenants. Uni-Vate Properties provides
-            value-adding service to clients and conducts business with a high standard
-            and integrity.
+            value-adding service to clients and conducts business with a high standard and
+            integrity.
           </p>
           <p>
             Wish to RENT your property?
@@ -122,6 +139,14 @@
         <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"
@@ -130,102 +155,57 @@
           </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';
+import autoComplete from '../shared/autoComplete.vue';
 
 export default {
   name: 'propertysearch',
   components: {
-    propertyCard,
+    autoComplete,
   },
   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: '',
     };
   },
-  mounted() {
-    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
-      this.propertySearch.propertyUsageType = 'Residential';
-    }
+  computed: {
+    ...mapState('propertySearch', ['suburbs', 'suburbList', '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.display === 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;
+    },
+    SelectedFilter(item) {
+      this.searchText = item;
+    },
+  },
+  mounted() {
+    this.getSuburbs();
   },
 };
 </script>

src/components/property/propertySearchResults.vue

@@ -0,0 +1,83 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="container">
+    <br />
+    <div class="container col-md-12">
+      <div class="col-sm-12">
+        <div class="about-img-box">
+          <img
+            v-if="propertySearch.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>
+        <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 {};
+  },
+  mounted() {
+    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
+      this.propertySearch.propertyUsageType = 'Residential';
+    }
+    this.searchProperties(this.propertySearch);
+  },
+  methods: {
+    ...mapActions('propertySearch', ['searchProperties']),
+    SetType(item) {
+      this.propertySearch.propertyUsageType = item;
+    },
+  },
+  computed: {
+    ...mapState('propertySearch', ['properties', 'propertySearch']),
+    ...mapState('authentication', ['username']),
+    ParamsChanged() {
+      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);
+      return null;
+    },
+  },
+  watch: {
+    ParamsChanged() {
+      return null;
+    },
+  },
+};
+</script>

src/components/property/propertyeditPage.vue

@@ -300,7 +300,7 @@
                 />
                 <span
                   v-if="!img.isDeleted && mayEdit"
-                  class="input-group-text"
+                  class="input-group-text spanCursor"
                   align="center"
                   @click="DeleteImage(img)"
                 >
@@ -535,20 +535,12 @@ export default {
       this.updateProperty({
         property: this.property,
         images: this.newPropertyImages,
+      }).then(() => {
+        this.$router.push('/properties');
       });
-
-      // console.log(JSON.stringify(this.newPropertyImages));
-
-      // Need to change to promis.
-      setTimeout(
-        () => this.$router.push({
-            path: '/property/admin/list/my',
-          }),
-        5000,
-      );
     },
     Close() {
-      this.$router.push('/property/admin/list/my');
+      this.$router.push('/properties');
     },
     loadedImages(values) {
       this.images = values;
@@ -625,7 +617,7 @@ export default {
 </script>
 
 <style>
-span {
+.spanCursor {
   cursor: pointer;
 }
 .opacity {

src/components/shared/autoComplete.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="autocomplete">
+    <input type="text" v-model="search" @input="onChange" class="form-control" />
+    <ul v-show="isOpen" class="autocomplete-results">
+      <li
+        v-for="(result, i) in results"
+        :key="i"
+        class="autocomplete-result"
+        @click="setResult(result)"
+      >
+        {{ result }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      search: '',
+      results: [],
+      isOpen: false,
+    };
+  },
+  methods: {
+    onChange() {
+      if (this.search.length >= 3) {
+        this.isOpen = true;
+        this.filterResults();
+      } else {
+        this.isOpen = false;
+      }
+    },
+    filterResults() {
+      this.results = this.items.filter(
+        item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1,
+      );
+    },
+    setResult(result) {
+      this.search = result;
+      this.isOpen = false;
+      this.$emit('selection', this.search);
+    },
+  },
+};
+</script>
+
+<style>
+.autocomplete {
+  position: relative;
+  width: 130px;
+}
+
+.autocomplete-results {
+  padding: 0;
+  margin: 0;
+  border: 1px solid #eeeeee;
+  height: 120px;
+  overflow: auto;
+}
+
+.autocomplete-result {
+  list-style: none;
+  text-align: left;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+
+.autocomplete-result:hover {
+  background-color: #60cbeb;
+  color: white;
+}
+</style>

src/components/shared/gallerySlideShow.vue

@@ -0,0 +1,338 @@
+// Source: https://github.com/KitchenStories/vue-gallery-slideshow
+<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>
+      <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>
+      <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__container"
+          :style="{ transform: 'translate(' + galleryXPos + 'px, 0)' }"
+        >
+          <img
+            v-for="(img, i) in images"
+            :key="i"
+            class="vgs__gallery__container__img"
+            :src="typeof img === 'string' ? img : img.url"
+            :class="{ 'vgs__gallery__container__img--active': i === imgIndex }"
+            :alt="typeof img === 'string' ? '' : img.alt"
+            @click.stop="onClickThumb(img, i)"
+          />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    images: {
+      type: Array,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      imgIndex: this.index,
+      image: null,
+      galleryXPos: 0,
+      thumbnailWidth: 120,
+    };
+  },
+  computed: {
+    imageUrl() {
+      const img = this.images[this.imgIndex];
+      if (typeof img === 'string') {
+        return img;
+      }
+      return img.url;
+    },
+    alt() {
+      const img = this.images[this.imgIndex];
+      if (typeof img === 'object') {
+        return img.alt;
+      }
+
+      return '';
+    },
+    isMultiple() {
+      return this.images.length > 1;
+    },
+  },
+  watch: {
+    index(val, prev) {
+      this.imgIndex = val;
+
+      // updateThumbails when popup
+      if (prev == null && val != null) {
+        this.$nextTick(() => {
+          this.updateThumbails();
+        });
+      }
+    },
+  },
+  mounted() {
+    window.addEventListener('keydown', (e) => {
+      if (e.keyCode === 37) {
+        this.onPrev();
+      } else if (e.keyCode === 39) {
+        this.onNext();
+      } else if (e.keyCode === 27) {
+        this.close();
+      }
+    });
+  },
+  methods: {
+    close() {
+      this.imgIndex = null;
+      this.$emit('close');
+    },
+    onPrev() {
+      if (this.imgIndex === null) return;
+      if (this.imgIndex > 0) {
+        this.imgIndex--;
+      } else {
+        this.imgIndex = this.images.length - 1;
+      }
+      this.updateThumbails();
+    },
+    onNext() {
+      if (this.imgIndex === null) return;
+      if (this.imgIndex < this.images.length - 1) {
+        this.imgIndex++;
+      } else {
+        this.imgIndex = 0;
+      }
+      this.updateThumbails();
+    },
+    onClickThumb(image, index) {
+      this.imgIndex = index;
+      this.updateThumbails();
+    },
+    updateThumbails() {
+      if (!this.$refs.gallery) {
+        return;
+      }
+
+      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;
+
+      // Prevent scrolling of images if not needed
+      if (maxThumbsWidth < galleryWidth) {
+        return;
+      }
+
+      if (currThumbsWidth < centerPos) {
+        this.galleryXPos = 0;
+      } else if (
+        currThumbsWidth
+        > this.images.length * this.thumbnailWidth - galleryWidth + centerPos
+      ) {
+        this.galleryXPos = -(this.images.length * this.thumbnailWidth - galleryWidth - 20);
+      } else {
+        this.galleryXPos = -(this.imgIndex * this.thumbnailWidth) + centerPos;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+$black-alpha-80: rgba(0, 0, 0, 0.8);
+$black: #000;
+$white: #fff;
+$radius-medium: 8px;
+$radius-large: 12px;
+// Breakpoints
+$screen-xs: 480px;
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm - 1);
+$screen-sm-max: ($screen-md - 1);
+$screen-md-max: ($screen-lg - 1);
+@mixin respond-to($media) {
+  @if $media==xs {
+    @media (max-width: $screen-xs-max) {
+      @content;
+    }
+  } @else if $media==sm {
+    @media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
+      @content;
+    }
+  } @else if $media==md {
+    @media (min-width: $screen-md) and (max-width: $screen-md-max) {
+      @content;
+    }
+  } @else if $media==lg {
+    @media (min-width: $screen-lg) {
+      @content;
+    }
+  }
+}
+
+@mixin modal-base() {
+  transition: opacity 0.2s ease;
+  position: fixed;
+  z-index: 9998;
+}
+
+@mixin modal-mask() {
+  @include modal-base();
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  height: 100vh;
+  background-color: $black-alpha-80;
+  display: table;
+}
+
+.vgs {
+  @include modal-mask();
+  &__close {
+    color: #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: transparent;
+    border: none;
+    font-size: 25px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    z-index: 999;
+    &:focus {
+      outline: 0;
+    }
+  }
+  &__prev,
+  &__next {
+    position: absolute;
+    top: 50%;
+    margin-top: -25px;
+    width: 50px;
+    height: 50px;
+    z-index: 999;
+    cursor: pointer;
+    font-size: 40px;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+    &:focus {
+      outline: 0;
+    }
+  }
+  &__prev {
+    left: 0;
+  }
+  &__next {
+    right: 0;
+  }
+  &__container {
+    position: absolute;
+    overflow: hidden;
+    cursor: pointer;
+    overflow: hidden;
+    max-width: 100vh;
+    margin: 0.5rem auto 0;
+    left: 0.5rem;
+    right: 0.5rem;
+    height: 60vh;
+    border-radius: $radius-large;
+    background-color: $black;
+    @include respond-to(xs) {
+      width: 100%;
+      max-width: 100%;
+      top: 50%;
+      margin-top: -140px;
+      left: 0;
+      right: 0;
+      border-radius: 0;
+      height: 280px;
+    }
+
+    &__img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}
+
+.vgs__gallery {
+  @include respond-to(xs) {
+    display: none;
+  }
+  overflow-x: hidden;
+  overflow-y: hidden;
+  position: absolute;
+  bottom: 10px;
+  margin: auto;
+  max-width: 100vh;
+  white-space: nowrap;
+  left: 0.5rem;
+  right: 0.5rem;
+  &__title {
+    color: $white;
+    margin-bottom: 0.5rem;
+  }
+  &__container {
+    overflow: visible;
+    display: block;
+    height: 250px;
+    white-space: nowrap;
+    transition: all 200ms ease-in-out;
+    width: 100%;
+    &__img {
+      width: 250px;
+      height: 250px;
+      object-fit: cover;
+      display: inline-block;
+      float: none;
+      margin-right: 20px;
+      cursor: pointer;
+      opacity: 0.6;
+      border-radius: $radius-medium;
+    }
+    &__img--active {
+      width: 100px;
+      display: inline-block;
+      float: none;
+      opacity: 1;
+    }
+  }
+}
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+</style>

src/components/shared/navBar.vue

@@ -91,11 +91,11 @@
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/new/Rental')"
                 >To Rent</a>
-                <hr />
+                <hr v-if="isLoggedIn" />
                 <a
                   v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/admin/list/my')"
+                  @click="routerGoTo('/properties')"
                 >My Properties</a>
               </div>
             </li>

src/components/shared/searchTab.vue

@@ -38,7 +38,8 @@
                   aria-controls="pills-video"
                   aria-selected="true"
                   v-on:click="updateType('Timeshare')"
-                >Timeshare</a>
+                  >Timeshare</a
+                >
               </li>
               <li class="nav-item">
                 <a
@@ -50,7 +51,8 @@
                   aria-controls="pills-plans"
                   aria-selected="false"
                   v-on:click="updateType('Residential')"
-                >Residential</a>
+                  >Residential</a
+                >
               </li>
               <li class="nav-item">
                 <a
@@ -62,7 +64,8 @@
                   aria-controls="pills-map"
                   aria-selected="false"
                   v-on:click="updateType('Commercial')"
-                >Commercial</a>
+                  >Commercial</a
+                >
               </li>
             </ul>
             <div class="tab-content" id="pills-tabContent">
@@ -80,7 +83,7 @@
                 role="tabpanel"
                 aria-labelledby="pills-plans-tab"
               >
-                <propertySearch propertyType="Residential" @updateSearch="updateSearch" />
+                <propertySearch propertyType="Residential" />
               </div>
               <div
                 class="tab-pane fade"
@@ -88,7 +91,7 @@
                 role="tabpanel"
                 aria-labelledby="pills-map-tab"
               >
-                <propertySearch propertyType="Commercial" @updateSearch="updateSearch" />
+                <propertySearch propertyType="Commercial" />
               </div>
             </div>
           </div>
@@ -115,41 +118,22 @@ export default {
     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) {
       this.selectedPropertyType = item;
     },
-    updateSearch(item) {
-      this.propertySearch = item;
-      this.propertySearch.propertyUsageType = this.selectedPropertyType;
-      this.propertySearch.keyword = this.filter.keyword;
-    },
     Search() {
       if (this.selectedPropertyType === 'timeshare') {
         this.$router.push('/timesharesearch');
       } else {
-        // this.$router.push('/property/search');
-        this.$router.push({
-          path: '/property/search',
-          query: this.propertySearch,
-        });
+        this.propertySearch.propertyUsageType = this.selectedPropertyType;
+        this.$router.push('/property/propertySearch/results');
       }
     },
   },

src/router/index.js

@@ -51,6 +51,7 @@ import TemplatePage from '../components/communication/templatePage.vue';
 import CarouselList from '../components/admin/misc/carouselList.vue';
 import CarouselDetail from '../components/admin/misc/carousel.vue';
 import AlertPage from '../components/shared/alertPage.vue';
+import PropertySearchResults from '../components/property/propertySearchResults.vue';
 
 Vue.use(Router);
 
@@ -62,228 +63,234 @@ export default new 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: '/shared/alert',
-    name: 'AlertPage',
-    component: AlertPage,
-  },
-  {
-    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: '/shared/alert',
+      name: 'AlertPage',
+      component: AlertPage,
+    },
+    {
+      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: '/properties',
+      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

@@ -4,23 +4,48 @@ export default {
   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

@@ -148,10 +148,17 @@ export default {
         .catch(console.error);
     },
     saveProperty({ commit }, item) {
-      axios
-        .post('/api/Property', item)
-        .then(result => commit('updateCurrentProperty', result.data))
-        .catch(console.error);
+      return new Promise((resolve, reject) => {
+        axios
+          .post('/api/Property', item)
+          .then((resp) => {
+            commit('updateCurrentProperty', resp);
+            resolve(resp);
+          })
+          .catch(() => {
+            reject(console.error);
+          });
+      });
     },
     clearProperty({ commit }) {
       commit('clearProperty');
@@ -183,5 +190,11 @@ export default {
         .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/propertyEdit.js

@@ -123,15 +123,18 @@ export default {
         .catch(console.error);
     },
     updateProperty({ commit }, item) {
-      axios
-        .post('/api/PropertyImage', item.images)
-        .then(commit('ClearNewImages'))
-        .catch(console.error);
+      return new Promise((resolve) => {
+        axios
+          .post('/api/PropertyImage', item.images)
+          .then(commit('ClearNewImages'))
+          .catch(console.error);
 
-      axios
-        .put('/api/Property', item.property)
-        .then(commit('setProperty', item.property))
-        .catch(console.error);
+        axios
+          .put('/api/Property', item.property)
+          .then(commit('setProperty', item.property))
+          .catch(console.error);
+        resolve(true);
+      });
     },
     mayEditProperty({ commit }, id) {
       axios

src/store/modules/property/propertySearch.js

@@ -19,6 +19,9 @@ export default {
     },
     properties: [],
     latestProperties: [],
+    suburbs: [],
+    searchText: '',
+    suburbList: [],
   },
   mutations: {
     updateSearch(state, propertySearch) {
@@ -34,6 +37,26 @@ export default {
     onClearFilter(state, filter) {
       state.propertySearch[filter] = 'All';
     },
+    setSuburbs(state, items) {
+      state.suburbList = [];
+      state.suburbs = items;
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < state.suburbs.length; i++) {
+        state.suburbList.push(state.suburbs[i].display);
+      }
+    },
+    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) {
@@ -60,6 +83,15 @@ export default {
       if (item.userName === '') {
         item.userName = 'Unknown';
       }
+      if (item.suburb === '') {
+        item.suburb = 'All';
+      }
+      if (item.city === '') {
+        item.city = 'All';
+      }
+      if (item.province === '') {
+        item.province = 'All';
+      }
       axios
         .get(
           `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}`,
@@ -73,5 +105,14 @@ export default {
         .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 });
+    },
   },
 };