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

src/App.vue

@@ -33,6 +33,9 @@ export default {
 </script>
 
 <style>
+button:hover {
+  cursor: pointer;
+},
 hr {
   background-color: #60cbeb;
 }

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/admin/status/statusPage.vue

@@ -20,30 +20,19 @@
     </div>
     <!-- </section> -->
     <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Code</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in statusList" :key="i">
-            <td>{{item.id}}</td>
-            <td>{{item.code}}</td>
-            <td>{{item.description}}</td>
-          </tr>
-        </tbody>
-      </table>
+      <ListView :items="statusList" :columnCount="4" :compact="false" :showNew="false" />
     </div>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import ListView from '../../shared/listView.vue';
 
 export default {
   name: 'StatusList',
+  components: {
+    ListView,
+  },
   created() {
     this.getStatusList();
   },

src/components/admin/status/tenderWeekAdminPage.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div id="table" class="col-xs-12 table-responsive">
-      <datatable :columns="columns" :data="rows"></datatable>
+      <ListView :items="items" :showNew="false"></listView>
     </div>
     <br />
   </div>
@@ -26,17 +26,21 @@
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import ListView from '../../shared/listView.vue';
 
 export default {
   name: 'TenderWeekAdmin',
   created() {
-    this.gettenderWeekdmin();
+    this.getItems();
+  },
+  components: {
+    ListView
   },
   computed: {
-    ...mapState('status', ['tenderWeekAdmin']),
+    ...mapState('tenderWeek', ['items']),
   },
   methods: {
-    ...mapActions('status', ['gettenderWeekAdmin']),
+    ...mapActions('tenderWeek', ['getItems']),
   },
 };
 </script>

src/components/admin/status/timeshareAdminPage.vue

@@ -1,9 +1,7 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
 <template>
   <div>
-    <br />
-    <br />
-    <br />
-    <br />
     <br />
     <div class="row">
       <div class="offset-1 col-md-3">
@@ -11,25 +9,25 @@
           type="button"
           :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
           value="Verify Week(s)"
-          :disabled="selectedItems.length > 0"
+          :disabled="!(selectedItems.length > 0)"
+          @click="onVerify()"
         >{{ButtonMessage}}</button>
         <div>{{Message}}</div>
       </div>
       <div class="offset-1 col-md-10">
         <ListView
-          :items="items"
-          :allowMultipleSelect="true"
+          :items="getNeedsVerify"
           @onRowClick="onRowClick"
           @onClearSelected="onClearSelected"
-          :columnsCount="15"
           :title="'Pending Weeks'"
+          :showNew="false"
         />
       </div>
     </div>
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import Log from '../../../assets/Log';
 import ListView from '../../shared/listView.vue';
 
@@ -46,7 +44,6 @@ export default {
     };
   },
   mounted() {
-    console.log(this.user.id);
     this.getItems(this.user.id);
   },
   computed: {
@@ -81,9 +78,24 @@ export default {
       return msg;
     },
     ...mapState('myWeeks', ['items']),
+    ...mapGetters({ getNeedsVerify: 'myWeeks/getNeedsVerify' }),
   },
   methods: {
-    ...mapActions('myWeeks', ['getItems']),
+    ...mapActions('myWeeks', ['getItems', 'verifyWeek']),
+    ...mapActions('alert', ['success']),
+    onVerify() {
+      if (this.selectedItems.length > 0) {
+        for (const i in this.selectedItems) {
+          const selectedIndex = this.selectedItems[i];
+          const item = this.items[selectedIndex];
+          if (item) {
+            this.verifyWeek(item.id);
+          }
+        }
+        this.success('Week verified!');
+        this.$router.push('/shared/alert');
+      }
+    },
     onRowClick(items) {
       this.selectedItems = items;
     },

src/components/communication/templateDetail.vue

@@ -170,7 +170,7 @@
         </div>
         <div class="col-md-12">
           <ListView
-            :items="item.placeHolders"
+            :items="PlaceHolders"
             :hideSearch="true"
             :showNew="false"
             :deleteable="CanEdit"
@@ -200,6 +200,7 @@ export default {
   },
   props: {
     item: {},
+    placeHolders: [],
     editable: {
       default: false,
     },
@@ -214,6 +215,9 @@ export default {
     ItemList() {
       return this.item.placeHolders;
     },
+    PlaceHolders(){
+      return this.placeHolders;
+    }
   },
   methods: {
     ...mapActions('template', ['addItem', 'editItem']),
@@ -230,7 +234,6 @@ export default {
         // add.
         this.addItem(this.item);
       }
-      console.log(JSON.stringify(this.item));
       this.$emit('onClose');
     },
     onItemDelete(item) {
@@ -250,7 +253,8 @@ export default {
         boundToClassDisplay: item.class.name,
         boundToClass: item.class.fullName,
       });
-      this.item.placeHolders = myList;
+      this.placeHolders = myList;
+      this.item.placeHolders = this.placeHolders;
     },
   },
 };

src/components/communication/templateInnerItem.vue

@@ -58,6 +58,7 @@ export default {
       this.getProperties(this.item.class);
     },
     onItemAdd() {
+      this.message = undefined;
       let msg = '';
       if (this.item.name === undefined) {
         msg += 'Please give a name...';

src/components/communication/templatePage.vue

@@ -16,7 +16,7 @@
         <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
       </div>
       <div class="col-md-6" v-if="showDetailView">
-        <DetailView :item="detailItem" @onClose="onDetailClose" :editable="clickedNew" />
+        <DetailView :placeHolders="detailItem ? detailItem.placeHolders : []" :item="detailItem" @onClose="onDetailClose" :editable="clickedNew" />
       </div>
     </div>
 
@@ -56,11 +56,15 @@ export default {
   },
   methods: {
     ...mapActions('template', ['getList']),
-    onRowClick(item) {
-      if (this.detailItem !== item) {
-        this.detailItem = item;
-      } else this.detailItem = undefined;
-      this.clickedNew = false;
+    onRowClick(items) {
+      if (items.length > 0) {
+        const i = items[0];
+        const item = this.list[i];
+        if (this.detailItem !== item) {
+          this.detailItem = item;
+        } else this.detailItem = undefined;
+        this.clickedNew = false;
+      }
     },
     onNew() {
       this.detailItem = {};

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/processFlow/makeOffer.vue

@@ -196,6 +196,10 @@ export default {
       if (this.isProperty) {
         this.bidItem.propertyId = this.item.id;
       } else {
+        this.bidItem.timeshareWeek = this.item;
+        this.bidItem.timeshareWeek.id = this.item.resort.id;
+        this.bidItem.timeshareWeek.resortCode = this.item.resort.resortCode;
+        this.bidItem.timeshareWeek.resortName = this.item.resort.resortName;
         this.bidItem.timeshareWeekId = this.item.id;
       }
       this.saveBid(this.bidItem);

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

@@ -46,7 +46,7 @@
                     class="form-control"
                     name="propertyUsageType"
                     id="propertyUsageType"
-                    v-model="property.propertyUsageType"
+                    v-model="propertyType"
                     @change="TypeChanged"
                   >
                     <option value="Residential">Residential</option>
@@ -55,9 +55,10 @@
                 </div>
               </div>
             </div>
+            <br />
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label>Property Type *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text" style="color: #60CBEB">
                     <b>T</b>
@@ -67,15 +68,17 @@
                     name="propertyType"
                     id="propertyType"
                     v-model="property.propertyTypeId"
+                    @change="PropertyTypeSelected"
                   >
                     <option value="0">Please select type</option>
-                    <option
-                      v-for="item in propertyTypes"
-                      :value="item.id"
-                      :key="item.id"
-                    >{{ item.description }}</option>
+                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                      item.description
+                    }}</option>
                   </select>
                 </div>
+                <div v-if="showPropertyTypeError">
+                  <p class="alert myError">Please select a type</p>
+                </div>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
@@ -139,7 +142,7 @@
                 </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Province</label>
+                <label>Province *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
@@ -152,17 +155,18 @@
                     v-model="property.provinceId"
                   >
                     <option value="0">Please select province</option>
-                    <option
-                      v-for="province in provinces"
-                      :value="province.id"
-                      :key="province.id"
-                    >{{ province.description }}</option>
+                    <option v-for="province in provinces" :value="province.id" :key="province.id">{{
+                      province.description
+                    }}</option>
                   </select>
                 </div>
+                <div v-if="showProvinceError">
+                  <p class="alert myError">Please select a Province</p>
+                </div>
               </div>
 
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>City</label>
+                <label>City *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
@@ -175,16 +179,17 @@
                     v-model="property.cityId"
                   >
                     <option value="0">Please select city</option>
-                    <option
-                      v-for="city in cities"
-                      :value="city.id"
-                      :key="city.id"
-                    >{{ city.description }}</option>
+                    <option v-for="city in cities" :value="city.id" :key="city.id">{{
+                      city.description
+                    }}</option>
                   </select>
                 </div>
+                <div v-if="showCityError">
+                  <p class="alert myError">Please select a City</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Suburb</label>
+                <label>Suburb *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
@@ -197,13 +202,14 @@
                     @change="getPostalCode"
                   >
                     <option value="0">Please select suburb</option>
-                    <option
-                      v-for="suburb in suburbs"
-                      :value="suburb.id"
-                      :key="suburb.id"
-                    >{{ suburb.description }}</option>
+                    <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">{{
+                      suburb.description
+                    }}</option>
                   </select>
                 </div>
+                <div v-if="showSuburbError">
+                  <p class="alert myError">Please select a Suburb</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
@@ -263,12 +269,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 +357,16 @@
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Save</button>
+            >
+              Save
+            </button>
+            <div
+              v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
+            >
+              <p class="alert myError">
+                Missing fields. Please fill in all required fields. Marked with *
+              </p>
+            </div>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
@@ -360,7 +378,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 +401,16 @@ 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: '',
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
     };
   },
   methods: {
@@ -416,6 +433,28 @@ export default {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.provinceId === 0) {
+        this.showProvinceError = true;
+      }
+      if (this.property.cityId === 0) {
+        this.showCityError = true;
+      }
+      if (this.property.suburbId === 0) {
+        this.showSuburbError = true;
+      }
+
+      if (
+        this.showPropertyTypeError
+        || this.showProvinceError
+        || this.showCityError
+        || this.showSuburbError
+      ) {
+        return;
+      }
+
       this.wait = true;
       if (this.salesType === 'Sale') {
         this.property.isSale = true;
@@ -433,47 +472,55 @@ 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');
     },
+    PropertyTypeSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.showPropertyTypeError = false;
+      } else {
+        this.showPropertyTypeError = true;
+      }
+    },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedProvince = this.provinces[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
         this.getCities(Object.assign({}, { province: this.selectedProvince }));
+        this.showProvinceError = false;
+      } else {
+        this.showProvinceError = true;
       }
     },
     CitySelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedCity = this.cities[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
         this.getSuburbs(
-          Object.assign(
-            {},
-            { province: this.selectedProvince, city: this.selectedCity },
-          ),
+          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity }),
         );
+        this.showCityError = false;
+      } else {
+        this.showCityError = true;
       }
     },
     getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[
-        item.target.options.selectedIndex - 1
-      ].postalCode;
+      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
+      if (item.target.options.selectedIndex > 0) {
+        this.showSuburbError = false;
+      } else {
+        this.showSuburbError = true;
+      }
     },
     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>
@@ -42,7 +47,9 @@
           @change="SelectorSelected"
         >
           <option value="0"></option>
-          <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{ item.description }}</option>
+          <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{
+            item.description
+          }}</option>
         </select>
         <!-- yesno -->
         <select v-if="editType === 'yesno'" class="form-control" @change="YesNoSelected">
@@ -50,10 +57,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>
@@ -94,9 +101,7 @@ export default {
     },
     SelectorSelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.updatedDisplay = this.arrayObject[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.updatedDisplay = this.arrayObject[item.target.options.selectedIndex - 1].description;
       }
     },
     YesNoSelected(item) {

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,11 +18,17 @@
     <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)">
+        <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
           <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
         </span>
       </div>
@@ -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

@@ -9,11 +9,7 @@
               <b>F</b>
             </span>
           </div>
-          <select
-            class="form-control"
-            v-model="propertySearch.salesType"
-            @change="salesTypeSelected"
-          >
+          <select class="form-control" v-model="propertySearch.salesType">
             <option value="Sale">Sale</option>
             <option value="Rent">Rent</option>
           </select>
@@ -29,10 +25,11 @@
           </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 +48,11 @@
           </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">
@@ -71,7 +69,7 @@
               <b>P</b>
             </span>
           </div>
-          <select class="form-control" @change="ProvinceSelected" v-model="propertySearch.province">
+          <select class="form-control" v-model="propertySearch.province">
             <option>All</option>
             <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
           </select>
@@ -92,7 +90,7 @@
               <b>C</b>
             </span>
           </div>
-          <select class="form-control" @change="CitySelected" v-model="propertySearch.city">
+          <select class="form-control" v-model="propertySearch.city">
             <option>All</option>
             <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
           </select>
@@ -113,7 +111,7 @@
               <b>S</b>
             </span>
           </div>
-          <select class="form-control" v-model="propertySearch.suburb" @change="SuburbSeleted">
+          <select class="form-control" v-model="propertySearch.suburb">
             <option>All</option>
             <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
           </select>
@@ -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,12 +212,8 @@ 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') {
@@ -229,7 +221,6 @@ export default {
           Object.assign({}, { province: this.propertySearch.province }),
         );
       }
-      this.$emit('updateSearch', this.propertySearch);
     },
     CitySelected(item) {
       if (item.target.value !== 'All') {
@@ -243,10 +234,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

@@ -35,13 +35,15 @@
       <div class="row mb-3">
         <div class="container col-md-10" style="text-align:left">
           <form id="mainForm">
+            <div class="form-goup row">
+              <div class="col-md-4">
+                <field :type="'datetime'" :mayEdit="true" />
+              </div>
+            </div>
             <div class="form-goup row">
               <div class="col-md-4">
                 <label>Usage Type</label>
                 <div class="input-group-prepend">
-                  <!-- <span class="input-group-text" style="color: #60CBEB">
-                    <b>U</b>
-                  </span>-->
                   <input
                     class="form-control"
                     type="text"
@@ -53,6 +55,7 @@
                 </div>
               </div>
             </div>
+            <br />
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Sale Type</label>
@@ -64,106 +67,113 @@
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
                 />
+                <div v-if="showPropertyTypeError">
+                  <p class="alert myError">Please select a Sales Type</p>
+                </div>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
-                <propField
-                  :display="property.propertyType ? property.propertyType.description : ''"
-                  :editType="'selector'"
-                  :arrayObject="propertyTypes"
-                  :propertyName="'propertyType'"
+                <label>Property Type *</label>
+                <field
+                  :type="'select'"
+                  :selectOptions="propertyTypes"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.propertyType"
                   :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
-                <propField
-                  :display="property.propertyName"
-                  :editType="'text'"
-                  :propertyName="'propertyName'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.propertyName" :mayEdit="mayEdit" />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Unit</label>
-                <propField
-                  :label="'Property Type'"
-                  :display="property.unit"
-                  :editType="'text'"
-                  :propertyName="'unit'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.unit" :mayEdit="mayEdit" />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Number</label>
-                <propField
-                  :display="property.addressLine1"
-                  :editType="'text'"
-                  :propertyName="'addressLine1'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.addressLine1" :mayEdit="mayEdit" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Name</label>
-                <propField
-                  :display="property.addressLine2"
-                  :editType="'text'"
-                  :propertyName="'addressLine2'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.addressLine2" :mayEdit="mayEdit" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Province</label>
-                <propField
+                <label>Province *</label>
+                <!-- <propField
                   :display="property.province ? property.province.description : ''"
                   :editType="'selector'"
                   :arrayObject="provinces"
                   :propertyName="'province'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'select'"
+                  :selectOptions="provinces"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.province"
+                  :mayEdit="mayEdit"
+                  @change="provChanged"
                 />
+                <div v-if="showProvinceError">
+                  <p class="alert myError">Please select a Province</p>
+                </div>
               </div>
-
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>City</label>
-                <propField
+                <label>City *</label>
+                <!-- <propField
                   :display="property.city ? property.city.description : ''"
                   :editType="'selector'"
                   :arrayObject="cities"
                   :propertyName="'city'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'select'"
+                  :selectOptions="cities"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.city"
+                  :mayEdit="mayEdit"
+                  @change="cityChanged"
                 />
+                <div v-if="showCityError">
+                  <p class="alert myError">Please select a City</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Suburb</label>
-                <propField
+                <label>Suburb *</label>
+                <!-- <propField
                   :display="property.suburb ? property.suburb.description : ''"
                   :editType="'selector'"
                   :arrayObject="suburbs"
                   :propertyName="'suburb'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'select'"
+                  :selectOptions="suburbs"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.suburb"
+                  :mayEdit="mayEdit"
+                  @change="suburbChanged"
                 />
+                <div v-if="showSuburbError">
+                  <p class="alert myError">Please select a suburb</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
-                <propField
-                  :display="property.addressLine3"
-                  :editType="'text'"
-                  :propertyName="'addressLine3'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.addressLine3" :mayEdit="mayEdit" />
               </div>
             </div>
 
@@ -171,23 +181,30 @@
               <div class="col-md-6">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
-                <propField
+                <field :type="'number'" v-model="property.price" :mayEdit="mayEdit" />
+                <!-- <propField
                   :display="String(property.price)"
                   :editType="'number'"
                   :propertyName="'price'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
-                />
+                />-->
               </div>
               <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <propField
+                <!-- <propField
                   :display="property.pricePer"
                   :editType="'selector'"
                   :propertyName="'pricePer'"
                   :arrayObject="pricePerArr"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'selectlist'"
+                  :selectOptions="pricePerArr"
+                  v-model="property.pricePer"
+                  :mayEdit="mayEdit"
                 />
               </div>
             </div>
@@ -196,13 +213,16 @@
                 <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" />
             <div
               class="col-md-6"
-              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              v-if="(propertyType === 'Residential') & (propertyOverviewFields.length > 0)"
             >
               <div v-for="(item, i) in propertyOverviewFields[0].fields" :key="item.id">
                 <label>{{ item.name }}</label>
@@ -243,6 +263,7 @@
                   @UpdateValue="UpdateValue"
                 />
               </div>
+              <br />
             </div>
             <div class="form-group row" />
             <div class="row">
@@ -255,25 +276,13 @@
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Virtual Tour (URL)</label>
-                <propField
-                  :display="property.virtualTour"
-                  :editType="'text'"
-                  :propertyName="'virtualTour'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.virtualTour" :mayEdit="mayEdit" />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Video (URL)</label>
-                <propField
-                  :display="property.video"
-                  :editType="'text'"
-                  :propertyName="'video'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.video" :mayEdit="mayEdit" />
               </div>
             </div>
             <div class="form-group row">
@@ -300,9 +309,10 @@
                 />
                 <span
                   v-if="!img.isDeleted && mayEdit"
-                  class="input-group-text"
+                  class="input-group-text spanCursor"
                   align="center"
                   @click="DeleteImage(img)"
+                  style="width:150px"
                 >
                   <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
                 </span>
@@ -321,13 +331,27 @@
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
               :disabled="!mayEdit"
-            >Save</button>
+            >
+              Save
+            </button>
             <button
               type="button"
               @click="Close()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Close</button>
+              :disabled="
+                showPropertyTypeError || showProvinceError || showCityError || showSuburbError
+              "
+            >
+              Close
+            </button>
+            <div
+              v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
+            >
+              <p class="alert myError">
+                Missing fields. Please fill in all required fields. Marked with *
+              </p>
+            </div>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
@@ -339,9 +363,9 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { VueEditor } from 'vue2-editor';
-import { setTimeout } from 'timers';
 import ImageLoad from './propertyImage.vue';
 import propField from './propertyFieldEditor.vue';
+import field from '../shared/fieldEditor.vue';
 
 export default {
   name: 'PropertyEdit',
@@ -349,6 +373,7 @@ export default {
     ImageLoad,
     VueEditor,
     propField,
+    field,
   },
   data() {
     return {
@@ -361,12 +386,7 @@ 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' }],
@@ -375,10 +395,12 @@ export default {
         { id: 1, description: 'Sale' },
         { id: 2, description: 'Rental' },
       ],
-      pricePerArr: [
-        { id: 'Month', description: 'Month' },
-        { id: 'Day', description: 'Day' },
-      ],
+      pricePerArr: ['Month', 'Day'],
+      yesno: ['Yes', 'No'],
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
     };
   },
   methods: {
@@ -389,19 +411,45 @@ export default {
       'getListsForPropertyEdit',
     ]),
     ...mapActions('property', ['getPropertyTypes']),
-    ...mapActions('propertyEdit', [
-      'getSavedPropertyData',
-      'updateProperty',
-      'mayEditProperty',
-    ]),
+    ...mapActions('propertyEdit', ['getSavedPropertyData', 'updateProperty', 'mayEditProperty']),
+    provChanged(item) {
+      this.getCities(Object.assign({}, { province: item.description }));
+      this.property.city = null;
+      this.property.suburb = null;
+      this.property.addressLine3 = '';
+      this.showProvinceError = false;
+      this.showCityError = true;
+      this.showSuburbError = true;
+    },
+    cityChanged(item) {
+      this.getSuburbs(
+        Object.assign(
+          {},
+          {
+            province: this.property.province.description,
+            city: item.description,
+          },
+        ),
+      );
+      this.property.suburb = null;
+      this.property.addressLine3 = '';
+      this.showCityError = false;
+      this.showSuburbError = true;
+    },
+    suburbChanged(item) {
+      const newSuburb = this.suburbs.find(p => p.description === item.description);
+      this.property.addressLine3 = newSuburb.postalCode;
+      this.showSuburbError = false;
+    },
+    salesTypeChanged(item) {
+      console.log(item);
+    },
     UpdateValue(item) {
       if (item.isUDF) {
         if (item.isPropOverview) {
-          this.propertyOverviewFields[0].fields[item.arrayIndex].value =            item.value;
+          this.propertyOverviewFields[0].fields[item.arrayIndex].value = item.value;
         } else if (item.isPropOverview === false) {
-          this.propertyFields[item.arrayIndex].fields[
-            item.arrayItemIndex
-          ].value = item.value;
+          this.propertyFields[item.arrayIndex].fields[item.arrayItemIndex].value = item.value;
         }
       } else if (!item.isUDF) {
         if (item.fieldName) {
@@ -412,96 +460,6 @@ export default {
             } else isSaleValue = false;
             this.property.isSale = isSaleValue;
           }
-          if (item.fieldName === 'propertyType') {
-            this.property.propertyType = this.propertyTypes.find(
-              pt => pt.description === item.value,
-            );
-            this.property.propertyTypeId = this.property.propertyType.id;
-          }
-          if (item.fieldName === 'propertyName') {
-            this.property.propertyName = item.value;
-          }
-          if (item.fieldName === 'unit') {
-            this.property.unit = item.value;
-          }
-          if (item.fieldName === 'addressLine1') {
-            this.property.addressLine1 = item.value;
-          }
-          if (item.fieldName === 'addressLine2') {
-            this.property.addressLine2 = item.value;
-          }
-          if (item.fieldName === 'addressLine3') {
-            this.property.addressLine3 = item.value;
-          }
-          if (item.fieldName === 'province') {
-            if (item.value !== '') {
-              this.property.province = this.provinces.find(
-                p => p.description === item.value,
-              );
-              this.property.provinceId = this.property.province.id;
-              this.getCities(Object.assign({}, { province: item.value }));
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-            } else {
-              this.property.province = null;
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-              this.cities = [];
-              this.suburbs = [];
-            }
-          }
-          if (item.fieldName === 'city') {
-            if (item.value !== '') {
-              const newCity = this.cities.find(
-                p => p.description === item.value,
-              );
-              this.property.city = newCity;
-              this.property.cityId = newCity.id;
-              this.getSuburbs(
-                Object.assign(
-                  {},
-                  {
-                    province: this.property.province.description,
-                    city: item.value,
-                  },
-                ),
-              );
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-            } else {
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-              this.suburbs = [];
-            }
-          }
-          if (item.fieldName === 'suburb') {
-            if (item.value !== '') {
-              const newSuburb = this.suburbs.find(
-                p => p.description === item.value,
-              );
-              this.property.suburb = newSuburb;
-              this.property.suburbId = newSuburb.id;
-              this.property.addressLine3 = this.property.suburb.postalCode;
-            } else {
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-            }
-          }
-          if (item.fieldName === 'price') {
-            this.property.price = item.value;
-          }
-          if (item.fieldName === 'pricePer') {
-            this.property.pricePer = item.value;
-          }
-          if (item.fieldName === 'virtualTour') {
-            this.property.virtualTour = item.value;
-          }
-          if (item.fieldName === 'video') {
-            this.property.video = item.value;
-          }
         }
       }
     },
@@ -509,8 +467,28 @@ export default {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
-      this.wait = true;
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.province === null) {
+        this.showProvinceError = true;
+      }
+      if (this.property.city === null) {
+        this.showCityError = true;
+      }
+      if (this.property.suburb === null) {
+        this.showSuburbError = true;
+      }
 
+      if (
+        this.showPropertyTypeError
+        || this.showProvinceError
+        || this.showCityError
+        || this.showSuburbError
+      ) {
+        return;
+      }
+      this.wait = true;
       this.newPropertyImages.propertyId = this.property.id;
       this.newPropertyImages.Images = [];
       // eslint-disable-next-line no-plusplus
@@ -524,7 +502,6 @@ export default {
           isDefault: setAsDefault,
         });
       }
-
       this.property.propertyImages = this.propertyImages;
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.property.propertyImages.length; i++) {
@@ -535,20 +512,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 +594,7 @@ export default {
 </script>
 
 <style>
-span {
+.spanCursor {
   cursor: pointer;
 }
 .opacity {

src/components/shared/alertPage.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <br />
+    <Alert :text="message" :type="type" />
+    <div class="row">
+      <div class="offset-3 col-md-2">
+        <button type="button" class="form-control btn btn-primary" @click="goBack()">Back</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Alert from './alert.vue';
+
+export default {
+  components: {
+    Alert,
+  },
+  computed: {
+    ...mapState('alert', ['message', 'type']),
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>

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/fieldEditor.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div v-if="!edit" class="input-group-prepend">
+      <input class="form-control" v-model="myDisplay" disabled />
+      <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>
+    <div v-if="edit" class="input-group-prepend">
+      <input v-if="type === 'text'" class="form-control" v-model="value" />
+      <input v-if="type === 'number'" type="number" class="form-control" v-model="value" />
+      <select v-if="type === 'select'" class="form-control" @change="selectionClick">
+        <option>Please select</option>
+        <option
+          v-for="option in selectOptions"
+          :value="option[selectValue]"
+          :key="option[selectValue]"
+          >{{ option[selectText] }}</option
+        >
+      </select>
+      <select v-if="type === 'selectlist'" class="form-control" v-model="value">
+        <option v-for="item in selectOptions" :value="item" :key="item">{{ item }}</option>
+      </select>
+      <!-- <Datetime class="form-control" v-if="type === 'datetime'" v-model="value" /> -->
+      <span
+        v-if="edit"
+        @click="UpdateValue()"
+        class="input-group-text spanCursor"
+        style="color: #60CBEB"
+      >
+        <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
+      </span>
+      <span v-if="edit" @click="Close()" class="input-group-text spanCursor" style="color: #60CBEB">
+        <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['value', 'type', 'mayEdit', 'selectOptions', 'selectValue', 'selectText', 'display'],
+  data() {
+    return {
+      edit: false,
+      myDisplay: '',
+    };
+  },
+  methods: {
+    UpdateValue() {
+      this.edit = false;
+      if (this.type !== 'select' && this.value) {
+        this.$emit('input', this.value);
+        this.$emit('change', this.value);
+      }
+    },
+    EditClick() {
+      this.edit = true;
+    },
+    Close() {
+      this.edit = false;
+    },
+    selectionClick(item) {
+      if (item.target.options.selectedIndex > 0) {
+        if (!this.value) {
+          this.myDisplay = this.selectOptions[item.target.options.selectedIndex - 1][
+            this.selectText
+          ];
+        }
+        if (this.selectOptions[item.target.options.selectedIndex - 1]) {
+          this.$emit('input', this.selectOptions[item.target.options.selectedIndex - 1]);
+          this.$emit('change', this.selectOptions[item.target.options.selectedIndex - 1]);
+        }
+      }
+    },
+  },
+  mounted() {
+    if (this.value) {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.myDisplay = this.value;
+    }
+    if (this.value && this.selectText) {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.myDisplay = this.value[this.selectText];
+    }
+    if (this.display) {
+      this.myDisplay = this.display;
+    }
+  },
+  computed: {
+    // eslint-disable-next-line vue/return-in-computed-property
+    checkValue() {
+      if (this.value) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.myDisplay = this.value;
+      }
+      if (this.value && this.selectText) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.myDisplay = this.value[this.selectText];
+      }
+      if (this.display) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.myDisplay = this.display;
+      }
+    },
+  },
+  watch: {
+    checkValue() {
+      return null;
+    },
+  },
+};
+</script>

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/listView.vue

@@ -5,7 +5,7 @@
     <div style="height:5px"></div>
     <div class="d-flex justify-content-between table-title">
       <div class="p-2" v-if="!hideSearch">
-        <input v-model="searchItem" class="form-control" :placeholder="currentPage" />
+        <input v-model="searchItem" class="form-control" placeholder="Search...." />
       </div>
       <div class="p-2" v-if="title">
         <h2>{{title}}</h2>
@@ -14,12 +14,12 @@
         <div class="d-flex flex-row">
           <div class="p2" v-if="selectedItems.length > 0">
             <div
-              class="btn btn-primary myBackground btn-width"
+              class="btn btn-primary myBackground btn-width cursor-pointer"
               @click="onClearSelected()"
             >Clear Selected</div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width" @click="onNew()">New</div>
+            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
           </div>
         </div>
       </div>
@@ -28,12 +28,33 @@
     <div v-if="items && items.length > 0" class="table-responsive">
       <table
         id="table"
-        :class="{'table table-bordered table-hover': (1 === 1), 'table-sm': compact}"
+        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered, 'table-striped': striped}"
       >
-        <thead class="my-table table-header">
+        <thead>
           <tr class="dnd-moved">
             <th v-for="(column, c) in Columns" :key="c">
-              <div @click="sortBy(column)">{{ column }}</div>
+              <div
+                @click="sortBy(column)"
+                @mouseover="hover = c"
+                @mouseleave="hover = -1"
+                :class="{ active: hover === c }"
+              >
+                <div class="d-flex bd-highlight">
+                  <div class="p-2 w-100 bd-highlight">{{ column | toProper }}</div>
+                  <div class="p-2 flex-shrink-1 bd-highlight">
+                    <img
+                      src="../../../public/img/sort-up.png"
+                      height="8px;"
+                      v-if="sortKey === column && reverse"
+                    />
+                    <img
+                      src="../../../public/img/sort-down.png"
+                      height="8px;"
+                      v-if="sortKey === column && !reverse"
+                    />
+                  </div>
+                </div>
+              </div>
             </th>
             <th v-if="editable"></th>
             <th v-if="deleteable"></th>
@@ -60,7 +81,9 @@
         </tbody>
       </table>
       <div class="d-flex justify-content-between" v-if="showPager">
-        <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
+        <div
+          class="p-1"
+        >{{ currentPage + ' / ' + PageCount + (!hideItemCount ? ' - (' + items.length + ' items)' : '')}}</div>
         <div class="p-1">
           <BasePagination
             :currentPage="currentPage"
@@ -136,7 +159,7 @@ export default {
     deleteable: {
       default: false,
     },
-    columnsCount: {
+    columnCount: {
       default: 6,
     },
     showPager: {
@@ -148,16 +171,29 @@ export default {
     sortKey: {
       default: 'id',
     },
+    hideItemCount: {
+      default: false,
+    },
+
+    currentPage: {
+      default: 1,
+    },
+    bordered: {
+      default: true,
+    },
+    striped: {
+      default: true,
+    },
   },
   data() {
     return {
+      hover: -1,
       selectedItems: [],
       showControl: false,
       reverse: false,
       searchItem: '',
+      visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
-      visibleItemsPerPageCount: 0,
-      currentPage: 1,
     };
   },
   methods: {
@@ -257,7 +293,7 @@ export default {
               !list.includes(Object.keys(item)[o])
               && !Array.isArray(Object.values(item)[o])
             ) {
-              if (list.length < this.columnsCount) {
+              if (list.length < this.columnCount) {
                 list.push(Object.keys(item)[o]);
               }
             }
@@ -297,6 +333,10 @@ th[draggable] a {
   text-decoration: none;
   color: #333333;
 }
+.active {
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+}
 .table > tbody > tr > td {
   vertical-align: middle;
 }

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>
@@ -214,6 +214,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import Log from '../../assets/Log';
 
 export default {
   computed: {
@@ -224,11 +225,12 @@ export default {
       'person',
       'token',
     ]),
-    NAME() {
-      return this.person.name;
-    },
     isLoggedIn() {
-      return this.token !== null && this.token !== undefined;
+      console.log(Log.isLoggedIn());
+      return Log.isLoggedIn();
+    },
+    NAME() {
+      return Log.getPerson().name;
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {

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/components/timeshare/buy/buyPage.vue

@@ -35,9 +35,9 @@
           </div>
           <hr />
           <div class="row mb-4">
-            <div class="container col-md-4">
-              <div class="accordion" id="accordionExample">
-                <div class="card" v-for="(region, r) in availRegion" :key="r">
+            <div class="container col-md-4" v-if="availRegion">
+              <div class="accordion" id="accordionExample" v-if="availRegion.length > 0">
+                <div class="card darker-border" v-for="(region, r) in availRegion" :key="r">
                   <a
                     class="mb-0 color-text-a"
                     data-toggle="collapse"
@@ -77,6 +77,9 @@
                     </div>
                   </div>
                 </div>
+                  </div>
+                  <div v-else>
+                    <Alert :text="'No items found...'" :type="'INFO'" />
               </div>
             </div>
             <div class="col-md-8">
@@ -110,9 +113,13 @@
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import Alert from '../../shared/alert.vue';
 
 export default {
   name: 'TimeshareToBuy',
+  components:{
+    Alert
+  },
   data() {
     return {
       myMap: 'SouthAfrica',
@@ -166,4 +173,7 @@ export default {
   border-radius: 5px;
   cursor: pointer;
 }
+.darker-border {
+  border-color: #A5A5A5;
+}
 </style>

src/components/timeshare/myWeeksPage.vue

@@ -1,16 +1,24 @@
 <template>
-  <div>
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <div class="row">
-      <div class="offset-1 col-md-10">
-        <ListView :items="items" :editable="true" @onEdit="onEdit" />
-      </div>
+<div>
+  <br />
+  <div class="row">
+    <div class="offset-1 col-md-3">
+      {{items[selectedItems]}}
+      <button 
+        type="button"
+        :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!(selectedItems.length == 1) || !items[selectedItems] || items[selectedItems].status.code !== 'A2')}"
+        value="Publish Week"
+        :disabled="!(items.length == 1)"
+      >
+        Publish selected week
+      </button>
+    </div>
+    <div class="offset-1 col-md-10">
+      <ListView :items="items" :editable="true" @onNew="onNew" @onRowClick="onRowClick"
+          @onClearSelected="onClearSelected"  />
     </div>
   </div>
+</div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
@@ -24,6 +32,7 @@ export default {
   data() {
     return {
       user: Log.getUser(),
+      selectedItems: [],
     };
   },
   mounted() {
@@ -38,6 +47,25 @@ export default {
     onEdit(item) {
       this.$router.push(`/timeshare/${item.id}`);
     },
+    onNew() {
+      this.$router.push('/timeshare/sell');
+    },
+    onRowClick(items) {
+      this.selectedItems = items;
+    },
+    onClearSelected() {
+      this.selectedItems = [];
+    },
   },
 };
 </script>
+<style scoped>
+.my-disable {
+  background-color: silver;
+  border-color: silver;
+}
+.my-disable:hover {
+  background-color: lightgray;
+  border-color: lightgray;
+}
+</style>

src/main.js

@@ -38,6 +38,15 @@ Vue.filter('toCurrency', (value) => {
   return `R ${formatter.format(value)}`;
 });
 
+Vue.filter('toProper', (value) => {
+  if (typeof value !== 'string') {
+    console.log(typeof value);
+    return value;
+  }
+  value = value.replace(/([a-z])([A-Z])/g, '$1 $2');
+  return value.charAt(0).toUpperCase() + value.slice(1);
+});
+
 
 Vue.filter('toDate', value => value.substring(0, value.length > 9 ? 10 : value.length));
 

src/router/index.js

@@ -50,6 +50,8 @@ import searchLog from '../components/admin/logs/SearchLogs.vue';
 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);
 
@@ -61,223 +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: '/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: 'TimeshareSellEdit',
+      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/index.js

@@ -25,6 +25,8 @@ import Info from './modules/communication/info';
 import PropertyEdit from './modules/property/propertyEdit';
 import Carousel from './modules/misc/carousel';
 import Individual from './modules/user/individual';
+import Alert from './modules/misc/alert';
+import TenderWeek from './modules/timeshare/tenderWeeks';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -54,5 +56,7 @@ export default new Vuex.Store({
     propertyEdit: PropertyEdit,
     carousel: Carousel,
     individual: Individual,
+    alert: Alert,
+    tenderWeek: TenderWeek
   },
 });

src/store/modules/misc/alert.js

@@ -0,0 +1,21 @@
+export default {
+  namespaced: true,
+  state: {
+    type: undefined,
+    message: undefined,
+  },
+  mutations: {
+    setSuccess(state, msg) {
+      state.type = 'SUCCESS';
+      state.message = msg;
+    },
+  },
+  getters: {},
+  actions: {
+    success({
+      commit,
+    }, msg) {
+      commit('setSuccess', msg);
+    },
+  },
+};

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 });
+    },
   },
 };

src/store/modules/timeshare/myWeeks.js

@@ -1,9 +1,10 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
 import axios from 'axios';
 
 export default {
   namespaced: true,
   state: {
-    test: 'kobus',
     items: [],
   },
   mutations: {
@@ -11,7 +12,11 @@ export default {
       state.items = list;
     },
   },
-  getters: {},
+  getters: {
+    getNeedsVerify(state) {
+      return _.filter(state.items, x => x.status && x.status.code === 'A1');
+    },
+  },
   actions: {
     getItems({
       commit,
@@ -21,5 +26,18 @@ export default {
           .error,
       );
     },
+    verifyWeek({
+      commit,
+    }, id) {
+      try {
+        axios.post(`/api/timeshareweek/verifyweek/${id}`).catch(console.error);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    publishWeek(id) {
+      axios.post(`/api/timeshareweek/publishweek/${id}`).catch(console.error);
+    }
+
   },
 };

src/store/modules/timeshare/tenderWeeks.js

@@ -0,0 +1,22 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    items: [],
+  },
+  mutations: {
+    setItems(state, list) {
+      state.items = list;
+    },
+  },
+  getters: {},
+  actions: {
+    getItems({ commit }) {
+      axios
+        .get('/api/timeshareweek/getTenderWeeks')
+        .then(result => commit('setItems', result.data))
+        .catch(console.error);
+    },
+  },
+};