List View and Random Styles

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/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/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="max-height:165px; object-fit: cover;"
+                      :src="currentProperty.displayImage"
+                      alt
+                    />
+                  </div>
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p>
                   <strong>{{ currentProperty.available }}</strong>
                 </p>
                 <p
-                  v-if="currentProperty.isSale  && currentProperty.hasPendingOffer"
+                  v-if="currentProperty.isSale && currentProperty.hasPendingOffer"
                   class="pendingOffer"
                 >
                   <strong>{{ currentProperty.available }}</strong>
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
-    salesType: { type: String, default: "Rent" },
+    salesType: { type: String, default: "Rent" }
   },
   methods: {
     sortHighPrice() {
       }
 
       return this.properties.sort(compare);
-    },
-  },
+    }
+  }
 };
 </script>
 

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="max-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.isSale"
+                  :class="[currentProperty.hasPendingOffer ? 'pendingOffer' : 'normalText']"
+                >
+                  <strong>{{ currentProperty.available }}</strong>
+                </p>
+                <p
+                  v-if="currentProperty.isSale && currentProperty.hasPendingOffer"
+                  class="pendingOffer"
+                >
+                  <strong>{{ currentProperty.available }}</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="max-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/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

                 <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"
+                  class="btn-solid-blue mt-3"
+                  :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
+                  >MORE INFO...</router-link
+                >
+              </div>
             </div>
           </div>
           <h4 v-if="property.video != null" class="mt-5">Video Tour</h4>

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/main.js

     return value;
   }
   const formatter = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 2
+    minimumFractionDigits: 0
   });
   return `R ${formatter.format(value)}`;
 });