Merge branch 'master' of http://provision-sa.co.za:3000/Provision/UnivateProperties

src/App.vue

   background-color: #ff8344;
   color: white;
 }
+.redText {
+  background-color: #eb5252;
+  color: white;
+}
+.greenText {
+  background-color: #43e243;
+  color: white;
+}
 .noWeeks {
   background-color: #ff4444;
 }

src/assets/staticData/itemsPerPageFive.js

+const items = [5, 10, 15, 20, 25, 50, 100];
+export default items;

src/components/admin/property/propertyList.vue

           <table class="table table-striped table-responsive">
             <thead>
               <tr>
-                <th scope="col">Owner</th>
-                <th scope="col">Reference</th>
-                <th scope="col">Property</th>
+                <th scope="col" v-for="(col, c) in displayColumns" :key="c">
+                  <div @click="sortBy(columns[c])" style="cursor: pointer;">
+                    <div class="d-flex bd-highlight">
+                      <div class="w-100 bd-highlight">{{ col }}</div>
+                      <div class="flex-shrink-1 bd-highlight">
+                        <img
+                          src="../../../../public/img/sort-up.png"
+                          height="8px;"
+                          v-if="sortKey === columns[c] && reverse"
+                        />
+                        <img
+                          src="../../../../public/img/sort-down.png"
+                          height="8px;"
+                          v-if="sortKey === columns[c] && !reverse"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <!-- <th scope="col">Property</th>
                 <th scope="col">Unit</th>
                 <th scope="col">Size</th>
                 <th scope="col">Price Ex VAT</th>
                 <th scope="col">Suburb</th>
                 <th scope="col">Status</th>
                 <th scope="col">Type</th>
-                <th scope="col">Publish</th>
+                <th scope="col">Publish</th>-->
                 <th scope="col">Edit</th>
                 <th scope="col">Delete</th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(item, i) in FilteredProperties" :key="i">
+              <tr v-for="(item, i) in DisplayItems" :key="i">
                 <td>{{ item.owner }}</td>
                 <td>{{ item.reference }}</td>
                 <td>{{ item.property }}</td>
               </tr>
             </tbody>
           </table>
+          <div class="d-flex justify-content-between" v-if="showPager">
+            <div class="p-1">
+              {{
+              currentPage +
+              " / " +
+              PageCount +
+              (" - (" + FilteredProperties.length + " items)")
+              }}
+            </div>
+            <div class="p-1">
+              <BasePagination
+                :currentPage="currentPage"
+                :pageCount="PageCount"
+                @nextPage="pageChangeHandle('next')"
+                @previousPage="pageChangeHandle('previous')"
+                @loadPage="pageChangeHandle"
+              />
+            </div>
+            <div class="p-2">
+              <div class="d-flex flex-row">
+                <div>
+                  <select
+                    class="form-control uniSelect"
+                    v-model="visibleItemsPerPageCount"
+                    @change="onChangeItemsPerPage()"
+                  >
+                    <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p-2">
+            <div class="d-flex flex-row">
+              <div>
+                <button v-if="sortKey !== 'id'" class="btn-solid-blue" @click="ClearSort">Clear Sort</button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div v-if="wait" id="preloader"></div>
 <script>
 import { mapState, mapActions } from "vuex";
 import Log from "../../../assets/Log";
+import BasePagination from "../../shared/basePagination";
+import ItemsPerPageList from "../../../assets/staticData/itemsPerPageFive";
 import _ from "lodash";
 
 export default {
+  components: {
+    BasePagination,
+  },
   data() {
     return {
+      hover: -1,
       filter: undefined,
       userId: Log.getUser().id,
       wait: true,
+      showPager: true,
+      visibleItemsPerPageCount: 10,
+      itemsPerPageList: ItemsPerPageList,
+      currentPage: 1,
+      reverse: true,
+      sortKey: "id",
+      displayColumns: [
+        "Owner",
+        "Reference",
+        "Property",
+        "Unit",
+        "Size",
+        "Price Ex VAT",
+        "Region",
+        "Town",
+        "Suburb",
+        "Status",
+        "Type",
+        "Publish",
+      ],
+      columns: [
+        "owner",
+        "reference",
+        "property",
+        "unit",
+        "size",
+        "price",
+        "region",
+        "town",
+        "suburb",
+        "status",
+        "type",
+        "isPublished",
+      ],
     };
   },
   methods: {
     Delete(item) {
       this.deleteProperty(item.id);
     },
+    async pageChangeHandle(value) {
+      switch (value) {
+        case "next":
+          this.currentPage += 1;
+          break;
+        case "previous":
+          this.currentPage -= 1;
+          break;
+        default:
+          this.currentPage = value;
+      }
+    },
+    sortBy(sortKey) {
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
+      this.sortKey = sortKey;
+    },
+    ClearSort() {
+      this.reverse = true;
+      this.sortKey = "id";
+    },
   },
   computed: {
     ...mapState("propertyList", ["properties"]),
                 .indexOf(this.filter.toLowerCase()) > -1
           )
         );
-        return list;
+        return _.orderBy(list, this.sortKey, this.SortDirection);
       } else {
-        return this.properties;
+        return _.orderBy(this.properties, this.sortKey, this.SortDirection);
       }
     },
+    PageCount() {
+      return this.visibleItemsPerPageCount !== 0
+        ? Math.ceil(
+            this.FilteredProperties.length / this.visibleItemsPerPageCount
+          )
+        : 1;
+    },
+    DisplayItems() {
+      const list = this.FilteredProperties;
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      if (endSlice > list.length) {
+        endSlice = list.length;
+      }
+      return list.slice(startSlice, endSlice);
+    },
+    SortDirection() {
+      return this.reverse ? "desc" : "asc";
+    },
   },
   mounted() {
     this.wait = true;
     this.getAdminProperties(this.userId).then((fulfuilled) => {
       this.wait = false;
+      if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
+        const [startItem] = this.itemsPerPageList;
+        this.visibleItemsPerPageCount = startItem;
+      }
     });
   },
+  watch: {
+    filter: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val != oldVal) {
+          this.currentPage = 1;
+        }
+      },
+    },
+  },
 };
 </script>
 

src/components/admin/status/editTimeShareAdminPage.vue

 <template>
   <main id="main">
-    <section id="contact2">
+    <div v-if="wait" id="preloader"></div>
+    <section v-else id="contact2">
       <div class="container">
         <div class="row">
           <div class="col-lg-12">
   },
   data() {
     return {
-      wait: false,
+      wait: true,
       userLoggedIn: Log.isLoggedIn(),
       listedWeekId: this.$route.params.id,
       selectedItems: [],
     Alert
   },
   async mounted() {
+    this.getWeek(this.weekParam.id).then(() => {
+      this.wait = false;
+    });
     if (this.sellItem.id) {
       this.newSale();
     }
     this.initTimeshare(0);
     this.getIndividual(Log.getUser().id);
     this.getBanks();
-    this.getWeek(this.weekParam.id);
+    //this.getWeek(this.weekParam.id);
     this.selectedRegion = this.weekParam.region.regionCode;
     this.selectedResort = this.weekParam.resort.resortCode;
     this.selectedBedrooms = this.weekParam.bedrooms;

src/components/admin/status/timeshareAdminPage.vue

             :CustomActionHeading="'Publish'"
             :showColumnChooser="false"
             :displayColumns="columns"
+            :displayFormats="displayFormats"
             @onRowClick="onRowClick"
             @onClearSelected="onClearSelected"
             @onEdit="onEdit"
         "region",
         "sellPrice"
       ],
+      displayFormats: ["", "", "", "", "", "", "", "", "money"],
       // selectedItems: [],
       showMessage: false,
       region: ""

src/components/property/ListProperty/contentSection.vue

 <template>
   <section id="services">
+    <div v-if="wait" id="preloader"></div>
     <div class="container">
       <div class="col-12">
         <h1>List your property</h1>
               role="tab"
               aria-controls="pills-residential"
               aria-selected="true"
-              @click="getPropTypeResidential"
               >RESIDENTIAL</a
             >
           </li>
               role="tab"
               aria-controls="pills-commercial"
               aria-selected="false"
-              @click="getPropTypeCommercial"
               >COMMERCIAL</a
             >
           </li>
             role="tabpanel"
             aria-labelledby="pills-residential-tab"
           >
-            <ResidentialCreate />
+            <ResidentialCreate :propFields="residentialFields" />
           </div>
           <div
             class="tab-pane fade"
             role="tabpanel"
             aria-labelledby="pills-commercial-tab"
           >
-            <CommercialCreate />
+            <CommercialCreate :propFields="commercialFields" />
           </div>
         </div>
       </div>
     ResidentialCreate,
     CommercialCreate
   },
+  data() {
+    return {
+      wait: true,
+      residentialFields: [],
+      commercialFields: []
+    };
+  },
   methods: {
     ...mapActions("property", ["getPropertyTypes", "getPropertyFields"]),
-    getPropTypeResidential() {
-      this.getPropertyTypes("Residential");
-      this.getPropertyFields("Residential");
+    async loadResidentialFields() {
+      await this.getPropertyFields("Residential");
     },
-    getPropTypeCommercial() {
-      this.getPropertyTypes("Commercial");
-      this.getPropertyFields("Commercial");
+    async loadCommercialFields() {
+      await this.getPropertyFields("Commercial");
     }
   },
-  mounted() {
-    this.getPropertyTypes("Residential");
-    this.getPropertyFields("Residential");
-  },
   computed: {
-    ...mapState("property", ["propertyTypes"])
-  }
+    ...mapState("property", ["propertyTypes", "propertyFields"]),
+    propFields() {
+      if (!this.wait) {
+        return this.propertyFields[0].fields;
+      }
+    }
+  },
+  created() {
+    this.loadResidentialFields().then(() => {
+      this.residentialFields = this.propertyFields[0].fields.sort((a, b) =>
+        a.rank > b.rank ? 1 : -1
+      );
+      this.loadCommercialFields().then(() => {
+        this.wait = false;
+        this.commercialFields = this.propertyFields[0].fields.sort((a, b) =>
+          a.rank > b.rank ? 1 : -1
+        );
+      });
+    });
+  },
+  mounted() {}
 };
 </script>
 

src/components/property/commercial/commercialSearchResults.vue

 <template>
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div v-if="wait" id="preloader"></div>
-    <section v-if="properties.length > 0">
+    <div class="row pt-5 justify-content-md-center">
+      <h3 v-if="propertySearch.salesType === 'Sale'">COMMERCIAL PROPERTIES FOR SALE</h3>
+      <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
+    </div>
+    <propertyCard
+      v-if="properties.length > 0"
+      name="propertyholder"
+      :properties="properties"
+      :showSort="false"
+    />
+    <!-- <section v-if="properties.length > 0">
       <div class="container">
-        <div class="row pt-5 justify-content-md-center">
-          <h3 v-if="propertySearch.salesType === 'Sale'">COMMERCIAL PROPERTIES FOR SALE</h3>
-          <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
-        </div>
         <div class="row justify-content-md-center">
           <div
             class="col-lg-3 col-md-6 col-sm-6"
                 <h4>{{ currentProperty.displayPrice }}</h4>
                 <p>
                   {{ currentProperty.suburb }}, {{ currentProperty.city }} |
-                  {{ currentProperty.area }}M<sup>2</sup>
+                  {{ currentProperty.area }}
                 </p>
                 <p>{{ currentProperty.shortDescription }}</p>
                 <br />
 
-                <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
+                <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a>
                 <router-link
                   class="btn-white-border"
                   :to="`/property/commercial/property/${currentProperty.id}`"
           </div>
         </div>
       </div>
-    </section>
+    </section> -->
     <section v-else id="intro" style="margin-bottom:-50px">
       <div class="container">
         <div class="row d-flex justify-content-center">
 <script>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import propertyCard from "../propertyCard";
+import propertyCard from "../propertyCardSearch";
 import carousel from "vue-owl-carousel";
 
 export default {

src/components/property/commercial/createProperty/commercialCreateNew.vue

         <div class="section-header">
           <h2>Property Information</h2>
         </div>
-        <div v-for="item in propertyFields" :key="item.id">
+        <!-- <div v-for="item in propertyFields" :key="item.id">
           <div v-if="item.name === 'Commercial Fields'">
-            <UserField
-              :fields="sortFields"
-              :id="item.name"
-              @UpdateUserDefinedFields="UpdateUserDefinedFields"
-              :fieldValues="item.fields"
-            />
+            
           </div>
-        </div>
-
+        </div> -->
+        <UserField :fields="propFields" @UpdateUserDefinedFields="UpdateUserDefinedFields" />
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
     carouselSection,
     mapSection
   },
+  props: {
+    propFields: {}
+  },
   data() {
     return {
       propertyType: "Commercial",
     ...mapGetters("fees", ["getListingFee"]),
     sortFields() {
       var display = [];
-
       display = this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
-      console.log(display);
-
       return display;
     },
     SalesTypeChanged() {

src/components/property/commercial/singleView/contentSection.vue

             </div>-->
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
-            <div class="btn-white-border">
-              <i class="fa fa-search"></i>BOOK A VIEWING
-            </div>
           </div>
           <div class="panel-left px-5 pb-5 text-center">
             <h4 class="text-white">Share this Property</h4>
         </div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
-            <div
-              style="display:inline"
-              v-if="property.propertyName !== null"
-            >{{ property.propertyName }} /</div>
+            <div style="display:inline" v-if="property.propertyName !== null">
+              {{ property.propertyName }} /
+            </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
 
           <div class="mt-5" v-html="property.description"></div>
           <router-link
-            style="float:right"
+            style="float:right; white-space: nowrap;"
             class="btn-solid-blue mt-3"
             :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-          >MORE INFO...</router-link>
-          <h4 v-if="property.video !== null" class="mt-5">Video Tour</h4>
+            >ENQUIRE NOW</router-link
+          >
+
+          <h4 v-if="property.virtualTour !== null" style="margin-top:150px">Virtual Tour</h4>
+          <iframe
+            v-if="property.virtualTour !== null"
+            width="100%"
+            height="500px"
+            :src="property.virtualTour"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            style="margin-bottom:-6px"
+            class="mt-3"
+          ></iframe>
+
+          <h4 v-if="property.video !== null" class="mt-5">Video</h4>
           <iframe
             v-if="property.video !== null"
             width="100%"
 import gallery from "../../../shared/gallerySlideShow";
 export default {
   components: {
-    gallery,
+    gallery
   },
   props: {
     property: {},
-    propertyImages: {},
+    propertyImages: {}
   },
   mounted() {
     console.log(this.property);
   data() {
     return {
       index: null,
-      date: new Date(),
+      date: new Date()
     };
   },
   computed: {
         list.push(this.propertyImages[i].image);
       }
       return list;
-    },
+    }
   },
   created() {
     this.$emit("Loaded", true);
-  },
+  }
 };
 </script>
 

src/components/property/editProperty/editProperty.vue

                     v-model="property.statusString"
                     @change="StatusChanged"
                   >
-                    <option v-for="(item, i) in statuses" :key="i">{{ item }}</option>
+                    <option v-for="(item, i) in Statuses" :key="i">{{ item }}</option>
                   </select>
                 </div>
               </div>
                       </select>
                     </div>
                   </div>
-                  <div class="row my-3">
+                  <div v-if="!property.isSale" class="row my-3">
                     <div class="col-md-12">
+                      Date Available
                       <input
                         type="date"
                         class="form-control uniInput"
                       />
                     </div>
                   </div>
+                  <div
+                    class="row my-3"
+                    v-if="property.statusString === 'Sold' || property.statusString ==='Rented Out'"
+                  >
+                    <div class="col-md-12">
+                      Hide Property After
+                      <input
+                        type="date"
+                        class="form-control uniInput"
+                        name="date"
+                        v-model="property.cutOffDisplayDateString"
+                      />
+                    </div>
+                  </div>
+
                   <div class="row my-3">
                     <br />
                   </div>
       }
       return list;
     },
+    Statuses() {
+      const list = [];
+      for (let i = 0; i < this.statuses.length; i++) {
+        if (this.property.isSale && this.statuses[i] !== "Rented Out") {
+          list.push(this.statuses[i]);
+        }
+        if (!this.property.isSale && this.statuses[i] !== "Sold") {
+          list.push(this.statuses[i]);
+        }
+      }
+      return list;
+    },
   },
 };
 </script>

src/components/property/enquireNow/contentSection.vue

                 type="text"
                 name="name"
                 class="form-control"
-                id="Unit"
-                placeholder="Unit"
+                id="Suburb"
+                placeholder="Suburb"
                 data-rule="minlen:4"
-                v-model="property.unit"
+                v-model="property.suburb"
                 disabled
               />
             </float-label>
-
-            <div class="validation"></div>
-          </div>
-          <div class="form-group col-md-6">
-            <float-label>
+            <!-- <float-label>
               <input
                 type="text"
                 name="name"
                 class="form-control"
-                id="Price"
-                placeholder="Price"
+                id="Unit"
+                placeholder="Unit"
                 data-rule="minlen:4"
-                v-model="property.price"
+                v-model="property.unit"
                 disabled
               />
-            </float-label>
+            </float-label> -->
 
             <div class="validation"></div>
           </div>
           <div class="form-group col-md-6">
-            <float-label>
-              <input
-                type="text"
-                name="name"
+            <float-label label="PRICE">
+              <currency-input
+                onclick="this.setSelectionRange(0, this.value.length)"
+                name="resPrice"
+                :value="property.price"
+                @input="property.price = $event"
+                v-model="property.price"
+                id="resPrice"
                 class="form-control"
-                id="Size"
-                placeholder="Size"
-                data-rule="minlen:4"
-                v-model="size"
                 disabled
               />
             </float-label>
 
             <div class="validation"></div>
           </div>
+
+          <div class="form-group col-md-6">
+            <div v-for="(el, i) in property.displayData[0].values" :key="i">
+              <float-label v-if="el.name === 'Erf Size'">
+                <input
+                  type="text"
+                  name="name"
+                  class="form-control"
+                  id="Size"
+                  placeholder="Size"
+                  data-rule="minlen:4"
+                  v-model="el.value"
+                  disabled
+                />
+              </float-label>
+            </div>
+
+            <div class="validation"></div>
+          </div>
           <div class="form-group col-md-6 mb-4">
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-12 mb-4 mt-2">
             <float-label>
               <input
                 type="text"
                 name="name"
-                class="form-control"
-                id="Suburb"
-                placeholder="Suburb"
+                class="form-control uniInput"
+                id="Name"
+                placeholder="Name"
                 data-rule="minlen:4"
-                v-model="property.suburb"
-                disabled
+                v-model="indiv.name"
               />
             </float-label>
 
             <div class="validation"></div>
           </div>
-          <div class="form-group col-md-12 mb-4">
+          <div class="form-group col-md-6 mb-4">
             <float-label>
               <input
                 type="text"
                 name="name"
-                class="form-control"
-                id="Name"
-                placeholder="Name"
+                class="form-control uniInput"
+                id="ContactNumber"
+                placeholder="ContactNumber"
                 data-rule="minlen:4"
-                v-model="name"
+                v-model="indiv.cellNumber"
               />
             </float-label>
 
             <div class="validation"></div>
           </div>
-          <div class="form-group col-md-12 mb-4">
+          <div class="form-group col-md-6">
             <float-label>
               <input
                 type="text"
                 name="name"
-                class="form-control"
-                id="ContactNumber"
-                placeholder="ContactNumber"
+                class="form-control uniInput"
+                id="Email"
+                placeholder="Email"
                 data-rule="minlen:4"
-                v-model="contactNumber"
+                v-model="indiv.emailAddress"
               />
             </float-label>
 
           </div>
           <div class="form-group col-md-12">
             <float-label>
-              <input
-                type="text"
-                name="name"
-                class="form-control"
+              <textarea
+                type="textArea"
+                style="height:130px"
+                name="message"
+                class="form-control uniInput"
                 id="Email"
-                placeholder="Email"
+                placeholder="Message"
                 data-rule="minlen:4"
-                v-model="email"
+                v-model="message"
               />
             </float-label>
 
 /* eslint-disable */
 import axios from "axios";
 import alert from "../../shared/alert";
+import Log from "../../../assets/Log";
+import { mapState, mapGetters, mapActions } from "vuex";
 
 export default {
   components: {
-    alert,
+    alert
   },
   data() {
     return {
       contactNumber: null,
       property: null,
       message: null,
-      boolSent: false,
+      boolSent: false
     };
   },
   mounted() {
     this.boolSent = false;
+    this.getIndividual(Log.getUser().id);
   },
   props: {
-    property: {},
+    property: {}
+  },
+  computed: {
+    ...mapState("individual", ["indiv"]),
+    ...mapState("authentication", ["isLoggedIn", "user"])
+    // ...mapGetters({
+    //   user: "authentication/getUser",
+    //   person: "authentication/getPerson"
+    // })
   },
   methods: {
+    ...mapActions("individual", ["getIndividual"]),
     async sendMail() {
       var mailObj = {
         toAddress: "jlouw365@gmail.com",
         fromAddress: "jlouw365@gmail.com",
-        name: this.name,
-        email: this.email,
-        phone: this.contactNumber,
+        name: this.indiv.name,
+        email: this.indiv.emailAddress,
+        phone: this.indiv.cellNumber,
         property: this.property.id.toString(),
-        message: this.message,
+        message: this.message
       };
 
       const response = await axios.post("/api/mail/1", mailObj);
     },
     countDownChanged(dismissCountDown) {
       this.dismissCountDown = dismissCountDown;
-    },
+    }
   },
   created() {
     this.$emit("Loaded", true);
-  },
+  }
 };
 </script>
 

src/components/property/propertyCard.vue

               <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
-                  <img
-                    style="max-height:165px; object-fit: cover;"
-                    :src="currentProperty.displayImage"
-                    alt
-                  />
+                  <div>
+                    <img
+                      style="height:165px; object-fit: cover;"
+                      :src="currentProperty.displayImage"
+                      alt
+                    />
+                  </div>
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p>
                   {{ currentProperty.propertyReference }}
                 </p>
                 <p
-                  v-if="!currentProperty.isSale"
-                  :class="[currentProperty.hasPendingOffer ? 'pendingOffer' : 'normalText']"
-                >
-                  <strong>{{ currentProperty.available }}</strong>
-                </p>
-                <p
-                  v-if="currentProperty.isSale  && currentProperty.hasPendingOffer"
-                  class="pendingOffer"
+                  v-if="currentProperty.displayText != ''"
+                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
                 >
-                  <strong>{{ currentProperty.available }}</strong>
+                  <strong>{{ currentProperty.displayText }}</strong>
                 </p>
               </div>
             </router-link>
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
                   <img
-                    style="max-height:165px; object-fit: cover;"
+                    style="height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
                     alt
                   />
                   <strong>Property Reference</strong>
                   {{ currentProperty.propertyReference }}
                 </p>
+                <p
+                  v-if="currentProperty.displayText != ''"
+                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
+                >
+                  <strong>{{ currentProperty.displayText }}</strong>
+                </p>
               </div>
             </router-link>
           </div>

src/components/property/propertyCardSearch.vue

+<template>
+  <section id="portfolio">
+    <div class="container-fluid">
+      <div class="row">
+        <div
+          class="col-lg-3 col-md-6 col-sm-6 my-3"
+          v-for="currentProperty in properties"
+          :key="currentProperty.id"
+        >
+          <div v-if="currentProperty.propertyUsageType === 'Residential'">
+            <router-link :to="`/property/residential/property/${currentProperty.id}`">
+              <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
+                <div class="feature-top pt-3 mb-2">
+                  <h3 style="color:white !important">{{ currentProperty.displayPrice }}</h3>
+                  <img
+                    style="height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt
+                  />
+                </div>
+                <h1>{{ currentProperty.suburb }}</h1>
+                <p>
+                  <strong>Property Reference</strong>
+                  {{ currentProperty.propertyReference }}
+                </p>
+                <p
+                  v-if="currentProperty.displayText != ''"
+                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
+                >
+                  <strong>{{ currentProperty.displayText }}</strong>
+                </p>
+              </div>
+            </router-link>
+          </div>
+          <div v-else-if="currentProperty.propertyUsageType === 'Commercial'">
+            <router-link :to="`/property/commercial/property/${currentProperty.id}`">
+              <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
+                <div class="feature-top pt-3 mb-2">
+                  <h3>{{ currentProperty.displayPrice }}</h3>
+                  <img
+                    style="height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt
+                  />
+                </div>
+                <h1>{{ currentProperty.suburb }}</h1>
+                <p>
+                  <strong>Property Reference</strong>
+                  {{ currentProperty.propertyReference }}
+                </p>
+              </div>
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- #listings -->
+</template>
+
+<script>
+/* eslint-disable */
+
+export default {
+  props: {
+    properties: { type: Array, default: () => [] },
+    showSort: { type: Boolean, default: true },
+    salesType: { type: String, default: "Rent" },
+  },
+  methods: {
+    sortHighPrice() {
+      function compare(a, b) {
+        if (a.price < b.price) return 1;
+        if (a.price > b.price) return -1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+    sortLowPrice() {
+      function compare(a, b) {
+        if (a.price < b.price) return -1;
+        if (a.price > b.price) return 1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+    sortNewest() {
+      function compare(a, b) {
+        if (a.dateCreated < b.dateCreated) return 1;
+        if (a.dateCreated > b.dateCreated) return -1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+    sortDateAvailable() {
+      function compare(a, b) {
+        if (a.dateAvailable > b.dateAvailable) return 1;
+        if (a.dateAvailable < b.dateAvailable) return -1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/propertyImage.vue

           v-if="allowMultiple"
           type="checkbox"
           id="checkbox"
+          name="checkbox"
           v-model="imagesDefault[i]"
           @change="updateList(i)"
           :disabled="!mayEdit"
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
     allowMultiple: { type: Boolean, default: () => true },
-    savedImages: { type: Array, default: () => [] },
+    savedImages: { type: Array, default: () => [] }
   },
   data() {
     return {
       images: {},
       image: [],
       imagesDefault: [],
-      maxSavedIndex: 0,
+      maxSavedIndex: 0
     };
   },
   // Commented out for now.
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = (e) => {
+        reader.onload = e => {
           vm.image.push(e.target.result);
         };
         reader.readAsDataURL(file[i]);
         }
         this.$emit("DefaultImage", index);
       }
-    },
+    }
   },
   watch: {
     savedImages: {
             this.maxSavedIndex = i;
           }
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 
   background: #d9534f;
   border-width: 0px;
   width: 150px;
-  margin-left: 0;
   font-family: "Muli";
   font-size: 15px;
   letter-spacing: 1px;
   padding: 10px 32px;
   border-radius: 2px;
   transition-duration: 5s;
-  margin: 10px;
+  margin-top: 10px;
   color: #fff;
 }
 

src/components/property/propertyUserField.vue

 <template>
   <div class="row">
-    <div class="col-md-4 mb-3 mt-2" v-for="(currentField, i) in fields" :key="i">
-      <div class="input-group-prepend">
-        <!-- <span class="input-group-text" style="color: #60CBEB">
-          <b>{{ GetFirstLetter(currentField.name) }}</b>
-        </span> -->
-        <div v-if="!setFields[i] && currentField.type !== 'yesno'">
-          <label class="uniSelectLabel" style="margin-top:-10px">{{ currentField.name }}</label>
-        </div>
-        <float-label :label="currentField.name" style="width:100%;top:-1em !important;">
-          <input
-            v-if="currentField.type === 'number'"
-            class="form-control uniInput"
-            type="number"
-            name="currentField.name"
-            id="currentField.id"
-            v-model="setFields[i]"
-            @change="UpdateSetFields(currentField, i)"
-          />
-
-          <input
-            v-if="currentField.type === 'text'"
-            class="form-control uniInput"
-            type="text"
-            name="currentField.name"
-            id="currentField.id"
-            v-model="setFields[i]"
-            @change="UpdateSetFields(currentField, i)"
-          />
-        </float-label>
+    <div class="col-md-4" v-for="(currentField, i) in fields" :key="i">
+      <div v-if="!setFields[i] && currentField.type !== 'yesno'">
+        <label class="uniSelectLabel" style="margin-top:10px;">{{ currentField.name }}</label>
       </div>
-    </div>
-
-    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="'checkField' + i">
-      <div class="input-group-prepend">
-        <!-- <span class="input-group-text" style="color: #60CBEB">
-          <b>{{ GetFirstLetter(currentField.name) }}</b>
-        </span> -->
-        <div v-if="currentField.type === 'yesno'">
-          <label class="uniSelectLabel">{{ currentField.name }}</label>
-        </div>
+      <float-label :label="currentField.name" style="width:100%;top:-1em !important;">
+        <input
+          v-if="currentField.type === 'number'"
+          class="form-control uniInput"
+          type="number"
+          style="margin-top:20px;"
+          :name="currentField.name"
+          :id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
 
         <input
-          v-if="currentField.type === 'yesno'"
+          v-if="currentField.type === 'text'"
+          class="form-control uniInput"
+          type="text"
+          style="margin-top:20px;"
+          :name="currentField.name"
+          :id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
+      </float-label>
+      <div class="input-group" v-if="currentField.type === 'yesno'">
+        <label class="uniSelectLabel" :for="currentField.name">{{ currentField.name }}</label>
+        <input
           type="checkbox"
-          id="currentField.id"
+          :id="currentField.id"
+          :name="currentField.name"
           style="margin-left:-5px; margin-top:10px"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         userDefinedFieldId: field.id,
         value: this.setFields[index]
       };
-      this.$emit("UpdateUserDefinedFields", item);
+      if (item) {
+        this.$emit("UpdateUserDefinedFields", item);
+      }
     },
     GetFirstLetter(value) {
       if (value) {

src/components/property/residential/createProperty/residentialCreateNew.vue

       <div class="container pb-5">
         <div class="row">
           <div class="col">
-            <label v-if="!salesType" class="uniSelectLabel" for="saleType">Sale Type</label>
+            <label v-if="!salesType" class="uniSelectLabel" for="resSaleType">Sale Type</label>
             <float-label label="Sale Type">
-              <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
+              <select class="form-control uniSelect mb-3" name="resSaleType" v-model="salesType">
                 <option value="Sale">To Sell</option>
                 <option value="Rental">To Rent</option>
               </select>
               <input
                 class="form-control uniInput"
                 type="text"
-                name="propertyName"
+                name="resPropertyName"
                 v-model="property.propertyName"
               />
             </float-label>
               <input
                 class="form-control uniInput"
                 type="text"
-                name="propertyRef"
+                name="resPropertyRef"
                 v-model="property.propertyRef"
               />
             </float-label>
           <div class="col-md-6">
             <select
               class="form-control uniSelect"
-              name="propertyType"
-              id="propertyType"
+              name="resPropertyType"
+              id="resPropertyType"
               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>
               <div class="col-md-6">
                 <div v-if="property.price < 1">
                   <label
-                    for="price"
+                    for="resPrice"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
                     >{{ salesType }} Price</label
                   >
                 </div>
                 <float-label label="Price">
-                  <currency-input <<<<<<< HEAD ======= onclick="this.setSelectionRange(0,
-                  this.value.length)" >>>>>>> 6bbfd86e089da859d019dcbda5cc0fe053af8db2 name="price"
-                  :value="property.price" @input="property.price = $event" v-model="property.price"
-                  id="price" class="form-control uniInput" />
+                  <currency-input
+                    onclick="this.setSelectionRange(0, this.value.length)"
+                    name="resPrice"
+                    :value="property.price"
+                    @input="property.price = $event"
+                    v-model="property.price"
+                    id="resPrice"
+                    class="form-control uniInput"
+                  />
                 </float-label>
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 <select
                   class="form-control uniSelect"
-                  name="propertyType"
-                  id="propertyType"
+                  name="resPropertyType"
+                  id="resPropertyType"
                   v-model="property.pricePer"
                 >
                   <option value>Please select</option>
                 <input
                   type="date"
                   class="form-control uniInput"
-                  name="date"
+                  name="resDate"
                   v-model="property.dateAvailable"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.streetNumber">
-                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                  <label for="resStreetNumber" class="uniSelectLabel">STREET NUMBER</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="streetNumber"
-                  id="streetNumber"
+                  name="resStreetNumber"
+                  id="resStreetNumber"
                   v-model="property.streetNumber"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.streetName">
-                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                  <label for="resStreetName" class="uniSelectLabel">STREET NAME</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="streetName"
-                  id="streetName"
+                  name="resStreetName"
+                  id="resStreetName"
                   v-model="property.streetName"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.suburb">
-                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                  <label for="resSuburb" class="uniSelectLabel">SUBURB</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="suburb"
-                  id="suburb"
+                  name="resSuburb"
+                  id="resSuburb"
                   v-model="property.suburb"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.city">
-                  <label for="city" class="uniSelectLabel">CITY</label>
+                  <label for="resCity" class="uniSelectLabel">CITY</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="city"
-                  id="city"
+                  name="resCity"
+                  id="resCity"
                   v-model="property.city"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.province">
-                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                  <label for="resProvince" class="uniSelectLabel">PROVINCE</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="province"
-                  id="province"
+                  name="resProvince"
+                  id="resProvince"
                   v-model="property.province"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.postalCode">
-                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                  <label for="resPostalCode" class="uniSelectLabel">POSTAL CODE</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="postalCode"
-                  id="postalCode"
+                  name="resPostalCode"
+                  id="resPostalCode"
                   v-model="property.postalCode"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.country">
-                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                  <label for="resCountry" class="uniSelectLabel">COUNTRY</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="country"
-                  id="country"
+                  name="resCountry"
+                  id="resCountry"
                   v-model="property.country"
                 />
               </div>
         <div class="section-header">
           <h2>Property Information</h2>
         </div>
-
-        <div v-for="item in propertyFields" :key="item.id">
-          <div v-if="item.name === 'Residential Fields'">
-            <UserField
-              :fields="item.fields"
-              :id="item.name"
-              @UpdateUserDefinedFields="UpdateUserDefinedFields"
-              :fieldValues="item.fields"
-            />
-          </div>
-        </div>
-        <!-- <UserField
-          v-if="propertyOverviewFields.length > 0"
-          :fields="propertyOverviewFields[0].fields"
-          @UpdateUserDefinedFields="UpdateUserDefinedFields"
-          :id="1"
-        ></UserField> -->
-        <!-- <div class="row">
-          <div class="col-md-12">
-            <div v-for="item in propertyFields" :key="item.id">
-              <div class="row">
-                <div class="col-sm-12">
-                  <div class="section-header">
-                    <h2>{{ item.name }}</h2>
-                  </div>
-                </div>
-              </div>
-              <UserField
-                :fields="item.fields"
-                :id="item.name"
-                @UpdateUserDefinedFields="UpdateUserDefinedFields"
-                :fieldValues="item.fields"
-              />
-            </div>
-          </div>
-        </div>-->
+        <UserField
+          :fields="propFields"
+          @UpdateUserDefinedFields="UpdateUserResidentialFields"
+        ></UserField>
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
                 <input
                   class="form-control uniInput"
                   type="link"
-                  name="vtlink"
-                  id="vtlink"
+                  name="resVtlink"
+                  id="resVtlink"
                   v-model="property.virtualTour"
                 />
               </float-label>
                 <input
                   class="form-control uniInput"
                   type="link"
-                  name="vlink"
-                  id="vlink"
+                  name="resVlink"
+                  id="resVlink"
                   v-model="property.video"
                 />
               </float-label>
     carouselSection,
     mapSection
   },
+  props: {
+    propFields: {}
+  },
   data() {
     return {
       propertyType: "Residential",
     loadedImages(values) {
       this.images = values;
     },
-    UpdateUserDefinedFields(item) {
+    UpdateUserResidentialFields(item) {
       let update = false;
       this.propertyFieldValues.forEach(element => {
-        console.log(element);
-
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
     }
   },
   mounted() {
-    console.log(this.propertyFields);
-
     this.wait = false;
     this.getProperty(0);
     this.clearPropertyImages();

src/components/property/residential/residentialSearchResults.vue

 <template>
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div v-if="wait" id="preloader"></div>
-    <section v-if="properties.length > 0">
+    <div class="row pt-5 justify-content-md-center">
+      <h3 v-if="propertySearch.salesType === 'Sale'">RESIDENTIAL PROPERTIES FOR SALE</h3>
+      <h3 v-else-if="propertySearch.salesType === 'Rent'">RESIDENTIAL PROPERTIES FOR RENT</h3>
+    </div>
+    <propertyCard
+      v-if="properties.length > 0"
+      name="propertyholder"
+      :properties="properties"
+      :showSort="false"
+    />
+    <!-- <section v-if="properties.length > 0">
       <div class="container">
-        <div class="row pt-5 justify-content-md-center">
-          <h3 v-if="propertySearch.salesType === 'Sale'">RESIDENTIAL PROPERTIES FOR SALE</h3>
-          <h3 v-else-if="propertySearch.salesType === 'Rent'">RESIDENTIAL PROPERTIES FOR RENT</h3>
-        </div>
         <div class="row justify-content-md-center">
           <div
             class="col-lg-3 col-md-6 col-sm-6"
                 <p>{{ currentProperty.shortDescription }}</p>
                 <br />
 
-                <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
+                <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a>
                 <router-link
                   class="btn-white-border"
                   :to="`/property/residential/property/${currentProperty.id}`"
           </div>
         </div>
       </div>
-    </section>
+    </section> -->
     <section v-else id="intro" style="margin-bottom:-50px">
       <div class="container">
         <div class="row d-flex justify-content-center">
 <script>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import propertyCard from "../propertyCard";
+import propertyCard from "../propertyCardSearch";
 
 export default {
   name: "propertysearch",

src/components/property/residential/singleView/contentSection.vue

 <template>
   <section>
-    <div class="container pb-5">
+    <div class="container">
       <div class="row" id="resort-profile">
         <div class="col-md-4">
           <div class="resPortfolioSection">
                 <p v-if="field.name === 'Bathrooms'">Bathrooms {{ field.value }}</p>
               </div>
             </div>
-
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
           </div>
           <div class="panel-left px-5 pb-5 text-center">
             <h4 class="text-white">Share this Property</h4>
                 <p v-html="property.description"></p>
               </div>
             </div>
-          </div>
-          <div>
-            <router-link
-              style="float:right"
-              class="btn-solid-blue mt-3"
-              :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-              >MORE INFO...</router-link
-            >
-            <h4>Property Features</h4>
-            {{ propertyFeatures }}
-            <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
-              <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
-                <div v-if="field.value.toUpperCase() != 'TRUE'">
-                  <i class="fa fa-check-circle"></i>
-                  {{ field.value }} {{ field.name }}
-                </div>
-                <div v-else>
-                  <i class="fa fa-check-circle"></i>
-                  {{ field.name }}
+            <div class="row">
+              <div class="col">
+                <h4>Property Features</h4>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-8">
+                <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
+                  <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
+                    <div v-if="field.value !== 'yes'">
+                      <i class="fa fa-check-circle"></i>
+                      {{ field.value }} {{ field.name }}
+                    </div>
+                    <div v-else>
+                      <i class="fa fa-check-circle"></i>
+                      {{ field.name }}
+                    </div>
+                  </div>
                 </div>
               </div>
+              <div class="col-md-4">
+                <router-link
+                  style="float:right; white-space: nowrap;"
+                  class="btn-solid-blue mt-3"
+                  :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
+                  >ENQUIRE NOW</router-link
+                >
+              </div>
             </div>
           </div>
-          <h4 v-if="property.video != null" class="mt-5">Video Tour</h4>
+
+          <h4 v-if="property.virtualTour != null" style="margin-top:150px">Virtual Tour</h4>
+          <iframe
+            v-if="property.virtualTour != null"
+            width="100%"
+            :src="property.virtualTour"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            style="margin-bottom:-6px"
+            class="mt-3"
+          ></iframe>
+
+          <h4 v-if="property.video != null" class="mt-5">Video</h4>
           <iframe
             v-if="property.video != null"
             width="100%"
             style="margin-bottom:-6px"
             class="mt-3"
           ></iframe>
+
           <p></p>
           <div class="d-flex mt-3">
             <iframe

src/components/shared/listView.vue

 /* eslint-disable no-restricted-syntax */ /* eslint-disable guard-for-in */
 <template>
   <div>
-    <div style="height:5px"></div>
-    <div class="d-flex justify-content-between">
-      <div class="p-2" v-if="!hideSearch">
-        <float-label label="SEARCH">
-          <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search..." />
+    <div class="row">
+      <div align="center" class="col">
+        <float-label class="mb-3" label="SEARCH" style="width:50%; float:center">
+          <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="SEARCH" />
         </float-label>
       </div>
+    </div>
+
+    <div class="d-flex justify-content-between">
+      <div class="p-2" v-if="!hideSearch"></div>
       <div class="p-2" v-if="title">
         <h2>{{ title }}</h2>
       </div>
       <div class="p-2">
         <div class="d-flex flex-row">
           <div class="p2" v-if="showColumnChooser">
-            <div
-              class="btn-solid-blue cursor-pointer"
-              data-toggle="modal"
-              data-target="#myModal"
-            >Column Chooser</div>
+            <div class="btn-solid-blue cursor-pointer" data-toggle="modal" data-target="#myModal">
+              Column Chooser
+            </div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg" style="width:500px">
             </div>
           </div>
           <div class="p2" v-if="selectedItems.length > 0">
-            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">Clear Selected</div>
+            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">
+              Clear Selected
+            </div>
           </div>
           <div class="p2" v-if="showNew">
             <div class="btn-solid-blue cursor-pointer" @click="onNew()">New</div>
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div
-                    v-if="displayHeaders.length === 0"
-                    class="p-2 w-100 bd-highlight"
-                  >{{ column | toProper }}</div>
-                  <div
-                    v-else
-                    class="p-2 w-100 bd-highlight"
-                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
+                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
+                    {{ column | toProper }}
+                  </div>
+                  <div v-else class="p-2 w-100 bd-highlight">
+                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
+                  </div>
                   <div class="p-2 flex-shrink-1 bd-highlight">
                     <img
                       src="../../../public/img/sort-up.png"
             <th v-if="deleteable"></th>
           </tr>
         </thead>
-        <tbody class="table">
+
+        <tbody>
           <tr
             v-for="(item, i) in DisplayItems"
             :key="i"
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
           >
             <td v-for="(column, c) in Columns" :key="c">
-              <div
-                v-if="displayFormats.length === 0"
-              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
+              <div v-if="displayFormats.length === 0">
+                {{ isObject(item[column]) ? item[column].display : item[column] }}
+              </div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
-                <div
-                  v-if="item[column] !== '0001-01-01T00:00:00'"
-                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
+                <div v-if="item[column] !== '0001-01-01T00:00:00'">
+                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
+                </div>
               </div>
               <div
+                style="padding-left:10px;white-space: nowrap;"
                 v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
-              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
+              >
+                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
+              </div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
               </div>
               <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
             </td>
             <td v-if="showCustomAction" class="my-width">
-              <button
-                type="button"
-                class="btn my-btn"
-                @click="onCustomClick(item)"
-              >{{ CustomActionHeading }}</button>
+              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
+                <p v-if="CustomActionHeading !== 'Publish'">{{ CustomActionHeading }}</p>
+                <img v-else src="../../../public/img/icons/Upload.png" height="25" width="25" />
+              </button>
             </td>
+
             <td v-if="editable" class="my-width">
               <a @click="onEdit(item)" class="p-3">
                 <img src="../../../public/img/icons/Edit.png" height="25" width="25" />
       <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">
           {{
-          currentPage +
-          " / " +
-          PageCount +
-          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
+            currentPage +
+              " / " +
+              PageCount +
+              (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
           }}
         </div>
         <div class="p-1">
   components: {
     BasePagination,
     Alert,
-    ListViewControl,
+    ListViewControl
   },
   mounted() {
     try {
   },
   props: {
     compact: {
-      default: true,
+      default: false
     },
     allowSelect: {
-      default: true,
+      default: true
     },
     allowMultipleSelect: {
-      default: false,
+      default: false
     },
     hideSearch: {
-      default: false,
+      default: false
     },
     showNew: {
-      default: true,
+      default: true
     },
     items: undefined,
     editable: {
-      default: false,
+      default: false
     },
     deleteable: {
-      default: false,
+      default: false
     },
     columnCount: {
-      default: 6,
+      default: 6
     },
     showPager: {
-      default: true,
+      default: true
     },
     title: {
-      default: undefined,
+      default: undefined
     },
     sortKey: {
-      default: "id",
+      default: "id"
     },
     hideItemCount: {
-      default: false,
+      default: false
     },
     currentPage: {
-      default: 1,
+      default: 1
     },
     bordered: {
-      default: true,
+      default: false
     },
     striped: {
-      default: true,
+      default: true
     },
     showColumnChooser: {
-      default: true,
+      default: true
     },
     displayColumns: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     displayFormats: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     displayHeaders: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     showCustomAction: {
-      default: false,
+      default: false
     },
     CustomActionHeading: {
-      default: "",
+      default: ""
     },
     CustomActionCondition: {
-      default: "",
-    },
+      default: ""
+    }
   },
   data() {
     return {
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
       visibleColumn: [],
-      allColumn: [],
+      allColumn: []
     };
   },
   methods: {
         for (const i in Object.keys(this.items)) {
           const item = this.items[i];
           for (const o in Object.keys(item)) {
-            if (
-              !listAll.includes(Object.keys(item)[o]) &&
-              !Array.isArray(Object.values(item)[o])
-            ) {
+            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
               const columnName = Object.keys(item)[o];
-              if (!listAll.some((x) => x.column === columnName)) {
+              if (!listAll.some(x => x.column === columnName)) {
                 listAll.push({
                   column: columnName,
-                  show:
-                    _.filter(listAll, (x) => x.show).length < this.columnCount,
+                  show: _.filter(listAll, x => x.show).length < this.columnCount
                 });
               }
             }
     },
     isSelected(i) {
       const ind = this.getActualIndex(i);
-      return _.some(this.selectedItems, (x) => x === ind);
+      return _.some(this.selectedItems, x => x === ind);
     },
     onNew() {
       this.$emit("onNew");
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
-      if (_.some(this.selectedItems, (x) => x === ind)) {
-        this.selectedItems = this.selectedItems.filter((x) => x !== ind);
+      if (_.some(this.selectedItems, x => x === ind)) {
+        this.selectedItems = this.selectedItems.filter(x => x !== ind);
       } else {
         if (!this.allowMultipleSelect) {
           this.selectedItems = [];
         if (array[i] === value) return true;
       }
       return false;
-    },
+    }
   },
   computed: {
     ListWidth() {
           listColumns.push(this.displayColumns[i]);
         }
       } else {
-        const list = _.filter(this.allColumn, (x) => x.show);
+        const list = _.filter(this.allColumn, x => x.show);
         for (const i in list) {
           const item = list[i];
           if (item) {
       return list;
     },
     FilteredItems() {
-      const list = _.filter(this.items, (item) =>
+      const list = _.filter(this.items, item =>
         Object.values(item).some(
-          (i) =>
+          i =>
             JSON.stringify(i)
               .toLowerCase()
               .indexOf(this.searchItem.toLowerCase()) > -1
       return list.slice(startSlice, endSlice);
     },
 
-    GetAllColumn() {},
-  },
+    GetAllColumn() {}
+  }
 };
 </script>
 <style scoped>

src/components/timeshare/resort/resortPageNew.vue

 <template>
   <div>
     <carouselSection v-if="!wait" :resortImages="resort.images" />
-    <main id="main" style="margin-top:-20px">
+    <main id="main" style="margin-top:-20px;">
       <section>
-        <div class="container">
+        <div class="container wider">
           <div class="row" id="resort-profile">
             <div class="col-md-3">
               <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
               <gallerySection :images="resort.images" />
               <FilterComponent :hideTop="true" />
             </div>
-            <div class="col-md-9 p-5 resort-profile">
+            <div class="col-md-9 resort-profile" style="margin-top:15px; margin-bottom:15px;">
               <h2>{{ resort.prName }}</h2>
               <WeekList :resortCode="resortCode" />
               <p v-if="resort.description && resort.description !== ''">{{ resort.description }}</p>
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.wider {
+  width: 1600px;
+}
+</style>

src/components/timeshare/sell/contentSection.vue

   name: "TimeshareToSell",
   props: {
     weekId: {
-      default: 0
-    }
+      default: 0,
+    },
   },
   data() {
     return {
       wait: false,
-      userLoggedIn: Log.isLoggedIn()
+      userLoggedIn: Log.isLoggedIn(),
     };
   },
   components: {
     addressAutoComplete,
-    Alert
+    Alert,
   },
   mounted() {
     if (this.sellItem.id) {
       "sellItem",
       "agencies",
       "agents",
-      "getTemplate"
+      "getTemplate",
     ]),
     ...mapState("individual", ["indiv"]),
     ...mapState("authentication", ["isLoggedIn"]),
     ...mapGetters({
       user: "authentication/getUser",
-      person: "authentication/getPerson"
+      person: "authentication/getPerson",
     }),
     ...mapState("bank", ["banks"]),
     refAgent() {
         this.sellItem.region.regionCode
       ) {
         const item = this.detailedRegion.find(
-          region => region.region.regionCode === this.sellItem.region.regionCode
+          (region) =>
+            region.region.regionCode === this.sellItem.region.regionCode
         );
         if (item) {
           list = item.children;
       } else {
         list = this.resorts;
       }
-      return _.sortBy(list, x => x.resortName);
+      return _.sortBy(list, (x) => x.resortName);
     },
     isLoggedIn() {
       return this.user && this.person;
     },
     displayNotDeletedAgents() {
       var notDeletedArr = [];
-      this.agents.forEach(agent => {
+      this.agents.forEach((agent) => {
         if (!agent.isDeleted) {
           if (agent.agencyId === this.sellItem.agencyId) {
             notDeletedArr.push(agent);
         return false;
       }
       return true;
-    }
+    },
   },
   methods: {
     ...mapActions("individual", ["getIndividual"]),
       "initTimeshare",
       "onResortChange",
       "saveWeek",
-      "getBlankWeek"
+      "getBlankWeek",
     ]),
     ...mapActions("payment", ["addPayment"]),
     ...mapActions("bank", ["getBanks"]),
       if (this.userLoggedIn) {
         this.sellItem.ownerObject = this.indiv;
         this.sellItem.status = undefined;
-        console.log(this.sellItem);
-        //   this.saveWeek(this.sellItem).then(fulfilled => {
-        //     this.paygateRedirect();
-        //   });
+        this.saveWeek(this.sellItem).then((fulfilled) => {
+          this.paygateRedirect();
+        });
       }
     },
     paygateRedirect() {
         creatydById: Log.getUser().id, //Log.getUser().id,
         amount: amount,
         paymentStatus: "",
-        paymentToken: ""
+        paymentToken: "",
       };
 
-      this.addPayment(paymentObj).then(res => {
+      this.addPayment(paymentObj).then((res) => {
         this.$router.push({
           name: "PaymentGateway",
           params: {
             paymentReqId: res.PAY_REQUEST_ID,
-            checksum: res.CHECKSUM
-          }
+            checksum: res.CHECKSUM,
+          },
         });
       });
     },
     resortChange() {
       this.onResortChange({
         resortName: this.sellItem.resort.resortName,
-        resortCode: this.sellItem.resort.resortCode
+        resortCode: this.sellItem.resort.resortCode,
       });
 
       if (this.sellItem && this.sellItem.resort === "Other") {
       } else {
         this.sellItem.mandateDate = undefined;
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

src/main.js

 Vue.prototype.$axios = axios;
 const pluginOptions = {
   /* see config reference */
-  globalOptions: { currency: ["ZAR", null, { prefix: "R" }][2] }
+  globalOptions: {
+    currency: ["ZAR", null, { prefix: "R" }][2],
+    precision: 0
+  }
 };
 Vue.use(VueCurrencyInput, pluginOptions);
 Vue.prototype.$http = axios;
     return value;
   }
   const formatter = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 2
+    minimumFractionDigits: 0
   });
   return `R ${formatter.format(value)}`;
 });

src/store/modules/property/property.js

       state.statuses = stats;
     }
   },
-  getters: {},
+  getters: {
+    getFields: state => state.propertyFields
+  },
   actions: {
     getStatuses({ commit }) {
       axios
         .then(response => commit("setPropertyOverviewFields", response.data));
     },
     getPropertyFields({ commit }, propertyType) {
-      axios
-        .get(`/api/propertyFields/PropertyType/${propertyType}`)
-        .then(response => commit("setPropertyFields", response.data));
+      return axios.get(`/api/propertyFields/PropertyType/${propertyType}`).then(response => {
+        commit("setPropertyFields", response.data);
+      });
     },
     getSavedPropertyFields({ commit }, id) {
       axios

src/store/modules/timeshare/myWeeks.js

     //   .then(result => commit('removeListing', id))
     //   .catch(console.error);
     // }
-    getWeek({ commit }, id) {
-      axios
+    async getWeek({ commit }, id) {
+      await axios
         .get(`/api/timeshareweek/${id}`)
         .then(r => {
           console.log(JSON.stringify(r));