Janneke testing feedback

.eslintrc.js

   },
   extends: ["plugin:vue/essential", "@vue/airbnb"],
   rules: {
-    'no-param-reassign': 0,
+    "no-param-reassign": 0,
     "linebreak-style": 0,
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"

package-lock.json

       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
       "dev": true
     },
-    "browser-downloads": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/browser-downloads/-/browser-downloads-0.2.0.tgz",
-      "integrity": "sha512-0tQntpixIPo8ZuOufMjPbZIp2jZMvCUz00rCiaf/T3LzLxcbt6j0r6Ef8Ao3lNP3bYh/ibLoWVoLCJ7SCvxrSA=="
-    },
     "browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
         "vue": "^2.5.17"
       }
     },
-    "vue-excel-export": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/vue-excel-export/-/vue-excel-export-0.1.3.tgz",
-      "integrity": "sha512-vjCKrVocZ9Q4Y1BJsuDiLR9E9x97vHY+ew7oSigxg7WDh6AsTbH5v4TFpCD65WwYy2jt1tQU6fsAIpKjVOXibw==",
-      "requires": {
-        "browser-downloads": "^0.2.0"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "dev": true
     },
+    "vue-json-excel": {
+      "version": "0.2.98",
+      "resolved": "https://registry.npmjs.org/vue-json-excel/-/vue-json-excel-0.2.98.tgz",
+      "integrity": "sha512-hPA3/cOe5nGbEZiJyfpdBIdqBExxF6EhMhpX6vC654PYbTVzdzp7O9ZsC1AgqbgRDR8VjzAaPaEeHg2vGS88FQ==",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "vue-loader": {
       "version": "15.7.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.0.tgz",

package.json

     "vue": "^2.6.10",
     "vue-carousel": "^0.18.0",
     "vue-eva-icons": "^1.1.1",
-    "vue-excel-export": "^0.1.3",
+    "vue-json-excel": "^0.2.98",
     "vue-router": "^3.0.7",
     "vue-trix": "^1.0.0",
     "vue2-editor": "^2.10.2",

src/components/admin/logs/SearchLogs.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <div class="container">
-        <br />
-        <br />
-        <br />
-        <br />
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <h1 class="title-d" style="text-align:left; font-size: 250%">Search Log</h1>
-            </div>
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Search Log</h1>
           </div>
         </div>
       </div>
         </div>
         <div class="col-md-3">
           <select class="form-control" name="fields" id="fields" v-model="filter.by">
-            <option v-for="(item, i) in fields" :key="i">{{item}}</option>
+            <option v-for="(item, i) in fields" :key="i">{{ item }}</option>
           </select>
         </div>
         <div class="col-md-8 text-left">
         </div>
       </div>
     </div>
+    <div class="container">
+      <listView
+        :items="list"
+        :showNew="false"
+        :editable="false"
+        :deleteable="false"
+        :showColumnChooser="false"
+        :hideSearch="true"
+        :sortKey="'date'"
+      />
+    </div>
     <div class="container">
       <div class="form-group row">
         <div class="col-md-12" align="right">
-          <export-excel
+          <JsonExcel
             class="btn btn-b-n"
             :data="list"
             :fields="exportFields"
-            type="csv"
-            worksheet="My Worksheet"
-            name="SearchLog.csv"
+            type="xls"
+            worksheet="Log"
+            name="SearchLog.xls"
           >
             Download
             <eva-icon name="download"></eva-icon>
-          </export-excel>
+          </JsonExcel>
         </div>
       </div>
     </div>
-    <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Date</th>
-            <th>Time</th>
-            <th>User</th>
-            <th>Type</th>
-            <th>Field</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in list" :key="i">
-            <td>{{ formatDate(item.date) }}</td>
-            <td>{{ formatTime(item.date) }}</td>
-            <td>{{ item.userName }}</td>
-            <td>{{ item.type }}</td>
-            <td>{{ item.property }}</td>
-            <td>{{ item.value }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
     <br />
   </div>
 </template>
 
 <script>
-import { mapState, mapActions, mapGetters } from 'vuex';
-import moment from 'moment';
+import { mapState, mapActions, mapGetters } from "vuex";
+import JsonExcel from "vue-json-excel";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'searchLog',
+  name: "searchLog",
+  components: {
+    listView,
+    JsonExcel
+  },
   data() {
     return {
       exportFields: {
-        Date: 'date',
-        User: 'userName',
-        Type: 'type',
-        Field: 'property',
-        Value: 'value',
-      },
+        Date: "date",
+        Time: "time",
+        User: "userName",
+        Type: "type",
+        Field: "property",
+        Value: "value"
+      }
     };
   },
   methods: {
-    ...mapActions('searchLog', ['getPropertySearchLogs', 'clearFilter']),
-    formatDate(value) {
-      return moment(String(value)).format('YYYY/MM/DD');
-    },
-    formatTime(value) {
-      return moment(String(value)).format('hh:mm');
-    },
+    ...mapActions("searchLog", ["getPropertySearchLogs", "clearFilter"])
   },
   mounted() {
     this.getPropertySearchLogs();
   },
   computed: {
-    ...mapState('searchLog', ['list', 'fields', 'filter']),
+    ...mapState("searchLog", ["list", "fields", "filter"]),
     ...mapGetters({
-      list: 'searchLog/filterList',
-    }),
-  },
+      list: "searchLog/filterList"
+    })
+  }
 };
 </script>

src/components/admin/misc/carouselList.vue

               <br />
               <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Items</h1>
             </div>
-            <br />
           </div>
         </div>
       </div>
     </div>
     <div class="container">
-      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
+      <listView
+        :items="carouselList"
+        :showNew="true"
+        :deleteable="true"
+        :displayColumns="columns"
+        :displayFormats="formats"
+        @onNew="New"
+        @onDelete="Delete"
+      />
     </div>
-    <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Image</th>
-            <th>Header</th>
-            <th>Type</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in carouselList" :key="i">
-            <td>
-              <img :src="item.image" style="height:100px; width:100px; object-fit: cover;" />
-            </td>
-            <td>{{ item.header }}</td>
-            <td v-if="item.propertyId">Property</td>
-            <td v-else>Timeshare Week</td>
-            <td>
-              <button
-                type="button"
-                @click="Delete(item.id)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Delete</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <br />
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'CarouselList',
+  name: "CarouselList",
+  components: {
+    listView
+  },
   data() {
-    return {};
+    return {
+      columns: ["id", "header", "image"],
+      formats: ["", "", "image"]
+    };
   },
   methods: {
-    ...mapActions('carousel', ['getCarouselList', 'deleteCarousel']),
+    ...mapActions("carousel", ["getCarouselList", "deleteCarousel"]),
     New() {
-      this.$router.push('/carousel/details/0');
+      this.$router.push("/carousel/details/0");
     },
     Edit(itemID) {
       this.$router.push({
-        path: `/carousel/details/${itemID}`,
+        path: `/carousel/details/${itemID}`
       });
     },
-    Delete(id) {
-      this.deleteCarousel(id);
-    },
+    Delete(item) {
+      this.deleteCarousel(item.id);
+    }
   },
   mounted() {
     this.getCarouselList();
   },
   computed: {
-    ...mapState('carousel', ['carouselList']),
-  },
+    ...mapState("carousel", ["carouselList"])
+  }
 };
 </script>

src/components/admin/misc/carouselSearch.vue

               :showNew="false"
               @onRowClick="onRowClick"
             />
-            <ListView v-else :items="properties" :showNew="false" @onRowClick="onRowClick" />
+            <ListView2 v-else :items="properties" :showNew="false" @onRowClick="onRowClick" />
           </div>
         </div>
       </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import ListView from '../../shared/listView.vue';
-import Log from '../../../assets/Log';
+import { mapState, mapActions } from "vuex";
+import ListView from "../../shared/listView.vue";
+import ListView2 from "../../shared/listView.vue";
+import Log from "../../../assets/Log";
 
 export default {
-  name: 'CarouselSearch',
+  name: "CarouselSearch",
   props: {
-    name: String,
+    name: String
   },
   components: {
     ListView,
+    ListView2
   },
   data() {
     return {
-      user: Log.getUser(),
+      user: Log.getUser()
     };
   },
   mounted() {
-    if (this.name === 'Timeshare') {
+    if (this.name === "Timeshare") {
       this.getItems(this.user.id);
     } else {
       this.getProperties(
         Object.assign(
           {},
           {
-            propertyType: 'Admin',
-            user: this.user.id,
-          },
-        ),
+            propertyType: "Admin",
+            user: this.user.id
+          }
+        )
       );
     }
   },
   computed: {
-    ...mapState('myWeeks', ['items']),
-    ...mapState('propertyList', ['properties']),
+    ...mapState("myWeeks", ["items"]),
+    ...mapState("propertyList", ["properties"]),
     // eslint-disable-next-line vue/return-in-computed-property
     nameChanged() {
-      if (this.name === 'Timeshare') {
+      if (this.name === "Timeshare") {
         this.getItems(this.user.id);
       } else {
         this.getProperties(
           Object.assign(
             {},
             {
-              propertyType: 'Admin',
-              user: this.user.id,
-            },
-          ),
+              propertyType: "Admin",
+              user: this.user.id
+            }
+          )
         );
       }
-    },
+    }
   },
   methods: {
-    ...mapActions('myWeeks', ['getItems']),
-    ...mapActions('propertyList', ['getProperties']),
+    ...mapActions("myWeeks", ["getItems"]),
+    ...mapActions("propertyList", ["getProperties"]),
     onRowClick(item) {
-      if (this.name === 'Timeshare') {
+      if (this.name === "Timeshare") {
         const week = this.items[item];
-        this.$emit('onSelected', week);
+        this.$emit("onSelected", week);
       } else {
         const prop = this.properties[item];
-        this.$emit('onSelected', prop);
+        this.$emit("onSelected", prop);
       }
-    },
+    }
   },
   watch: {
     nameChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>

src/components/admin/property/propertyTypeEdit.vue

 <template>
   <div>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h2 class="title-single">Property Type</h2>
-            </div>
+    <div class="container">
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">
+              Property Type
+            </h1>
           </div>
         </div>
       </div>
-    </section>
+    </div>
     <div class="container">
       <div class="row mb-3">
         <div class="col-md-12">
                 />
               </div>
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label>Property Usage Type</label>
                 <select
                   class="form-control"
                   name="UsageType"
       @click="SubmitData()"
       class="btn btn-b-n"
       style="width: 85px; height:40px;"
-    >Save</button> |
-    <button
-      type="button"
-      @click="Close()"
-      class="btn btn-b-n"
-      style="width: 85px; height:40px;"
-    >Close</button>
+    >
+      Save
+    </button>
+    |
+    <button type="button" @click="Close()" class="btn btn-b-n" style="width: 85px; height:40px;">
+      Close
+    </button>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
 
 export default {
-  name: 'PropertyType',
+  name: "PropertyType",
   data() {
     return {};
   },
     }
   },
   computed: {
-    ...mapState('propertyTypes', ['propertyType']),
+    ...mapState("propertyTypes", ["propertyType"])
   },
   methods: {
-    ...mapActions('propertyTypes', [
-      'getPropertyType',
-      'savePropertyType',
-      'updatePropertyType',
-      'clearPropertyType',
+    ...mapActions("propertyTypes", [
+      "getPropertyType",
+      "savePropertyType",
+      "updatePropertyType",
+      "clearPropertyType"
     ]),
     SubmitData() {
       if (this.propertyType.id > 0) {
       } else {
         this.savePropertyType(this.propertyType);
       }
-      this.$router.push('/propertyTypes/list');
+      this.$router.push("/propertyTypes/list");
     },
     Close() {
-      this.$router.push('/propertyTypes/list');
-    },
-  },
+      this.$router.push("/propertyTypes/list");
+    }
+  }
 };
 </script>

src/components/admin/property/propertyTypeList.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <!-- <section class="intro-single"> -->
-      <div class="container">
-        <br />
-        <br />
-        <br />
-        <br />
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <!-- <div class="title-single-box"> -->
-            <!-- <h1 class="title-single">Property Types</h1> -->
-            <!-- </div> -->
-            <div class="title-box-d">
-              <h1 class="title-d" style="text-align:left; font-size: 250%">Property Types</h1>
-            </div>
-            <br />
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Property Types</h1>
           </div>
         </div>
       </div>
-      <!-- </section> -->
     </div>
     <div class="container">
-      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
-    </div>
-    <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Description</th>
-            <th>Property Type</th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in propertyTypes" :key="i">
-            <td>{{ item.description }}</td>
-            <td v-if="item.usageType === 0">Residential</td>
-            <td v-else>Commercial</td>
-            <td>
-              <button
-                type="button"
-                @click="Edit(item.id)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Edit</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                @click="Delete(item.id)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Delete</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <listView
+        :items="propertyTypes"
+        :showNew="true"
+        :editable="true"
+        :deleteable="true"
+        :displayColumns="columns"
+        :sortKey="'description'"
+        @onEdit="Edit"
+        @onDelete="Delete"
+        @onNew="New"
+      />
     </div>
     <br />
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'PropertyTypeList',
+  name: "PropertyTypeList",
+  components: {
+    listView
+  },
   data() {
-    return {};
+    return {
+      columns: ["propertyUsageType", "description"]
+    };
   },
   methods: {
-    ...mapActions('propertyTypes', ['getPropertyTypes', 'deletePropertyType']),
+    ...mapActions("propertyTypes", ["getPropertyTypes", "deletePropertyType"]),
     New() {
-      this.$router.push('/propertyType/new');
+      this.$router.push("/propertyType/new");
     },
-    Edit(itemID) {
+    Edit(item) {
       this.$router.push({
-        path: `/propertyType/${itemID}`,
+        path: `/propertyType/${item.id}`
       });
     },
-    Delete(id) {
-      this.deletePropertyType(id);
-    },
+    Delete(item) {
+      this.deletePropertyType(item.id);
+    }
   },
   mounted() {
     this.getPropertyTypes();
   },
   computed: {
-    ...mapState('propertyTypes', ['propertyTypes']),
-  },
+    ...mapState("propertyTypes", ["propertyTypes"])
+  }
 };
 </script>

src/components/admin/property/userDefinedField.vue

 <template>
   <div>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h2 class="title-single">User Defined Field</h2>
-            </div>
+    <div class="container">
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-box-d">
+            <h1 class="title-d" style="text-align:left; font-size: 250%">
+              User Defined Field
+            </h1>
           </div>
         </div>
       </div>
-    </section>
+    </div>
     <div class="container">
       <div class="row mb-3">
         <div class="col-md-12">
       @click="SubmitData()"
       class="btn btn-b-n"
       style="width: 85px; height:40px;"
-    >Save</button>
+    >
+      Save
+    </button>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'UserField',
+  name: "UserField",
   props: {
-    field: {},
+    field: {}
   },
   data() {
     return {
-      userField: {},
+      userField: {}
     };
   },
   mounted() {
   },
   methods: {
     SubmitData() {
-      this.$emit('UpdateUserField', this.userField);
-    },
-  },
+      this.$emit("UpdateUserField", this.userField);
+    }
+  }
 };
 </script>

src/components/admin/property/userDefinedGroupPage.vue

   <!-- eslint-disable max-len -->
   <div>
     <div v-if="showField === false">
-      <section class="intro-single">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12 col-lg-8">
-              <div class="title-single-box">
-                <h2 class="title-single">User Defined Group</h2>
-              </div>
+      <div class="container">
+        <br />
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <h1 class="title-d" style="text-align:left; font-size: 250%">
+                Property User Defined Group
+              </h1>
             </div>
           </div>
         </div>
-      </section>
+      </div>
       <div class="container">
         <div class="row mb-3">
           <div class="col-md-12">
                   />
                 </div>
                 <div class="col-md-4">
-                  <label>Property Type</label>
+                  <label>Property Usage Type</label>
                   <select
                     class="form-control"
                     name="UsageType"
                   />
                 </div>
                 <div class="col-md-4">
-                  <label>Property Type</label>
+                  <label>Property Usage Type</label>
                   <select
                     class="form-control"
                     name="UsageType"
         </div>
       </div>
       <div class="container">
-        <button
-          type="button"
-          @click="newItem()"
-          class="btn btn-b-n"
-          style="width: 85px; height:40px;"
-        >New</button>
-        <br />
-        <table class="table table-bordered">
-          <thead>
-            <tr>
-              <th>Field Name</th>
-              <th>Field Type</th>
-              <th>Order</th>
-              <th></th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(item, i) in userFields" :key="i">
-              <td>{{item.fieldName}}</td>
-              <td v-if="item.fieldType === 'text'">Text</td>
-              <td v-else-if="item.fieldType === 'number'">Number</td>
-              <td v-else>Yes / No</td>
-              <td>{{item.rank}}</td>
-              <td>
-                <button
-                  type="button"
-                  @click="Edit(item)"
-                  class="btn"
-                  style="margin:2px; color: #60CBEB"
-                >Edit</button>
-              </td>
-              <td>
-                <button
-                  type="button"
-                  @click="Delete(item)"
-                  class="btn"
-                  style="margin:2px; color: #60CBEB"
-                >Delete</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <listView
+          :items="userFields"
+          :showNew="true"
+          :editable="true"
+          :deleteable="true"
+          :displayColumns="columns"
+          :sortKey="'rank'"
+          @onEdit="Edit"
+          @onDelete="Delete"
+          @onNew="newItem"
+        />
       </div>
       <button
         type="button"
         @click="SubmitData()"
         class="btn btn-b-n"
         style="width: 85px; height:40px;"
-      >Save</button>
-      <button
-        type="button"
-        @click="Close()"
-        class="btn btn-b-n"
-        style="width: 85px; height:40px;"
-      >Close</button>
+      >
+        Save
+      </button>
+      <button type="button" @click="Close()" class="btn btn-b-n" style="width: 85px; height:40px;">
+        Close
+      </button>
     </div>
     <div v-else>
       <userFields @UpdateUserField="UpdateUserField" :field="item" />
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import userFields from './userDefinedField.vue';
+import { mapState, mapActions } from "vuex";
+import userFields from "./userDefinedField.vue";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'UserDefinedGroup',
+  name: "UserDefinedGroup",
   components: {
     userFields,
+    listView
   },
   data() {
     return {
       item: {},
       showField: false,
+      columns: ["fieldName", "fieldType", "rank"]
     };
   },
   mounted() {
     }
   },
   computed: {
-    ...mapState('propertyAdmin', [
-      'userDefinedGroup',
-      'userFields',
-      'userField',
-    ]),
+    ...mapState("propertyAdmin", ["userDefinedGroup", "userFields", "userField"])
   },
   methods: {
-    ...mapActions('propertyAdmin', [
-      'getUserDefinedGroup',
-      'getUserFields',
-      'saveUserDefinedGroup',
-      'updateUserDefinedGroup',
-      'clearUserGroup',
-      'clearUserFields',
-      'clearUserField',
-      'saveUserField',
-      'updateUserField',
-      'deleteUserField',
+    ...mapActions("propertyAdmin", [
+      "getUserDefinedGroup",
+      "getUserFields",
+      "saveUserDefinedGroup",
+      "updateUserDefinedGroup",
+      "clearUserGroup",
+      "clearUserFields",
+      "clearUserField",
+      "saveUserField",
+      "updateUserField",
+      "deleteUserField"
     ]),
     SubmitData() {
       this.userDefinedGroup.fields = [];
       let reload = false;
       if (this.$route.params.id > 0) {
         this.updateUserDefinedGroup(this.userDefinedGroup);
-        this.userFields.forEach((fieldData) => {
+        this.userFields.forEach(fieldData => {
           if (fieldData.id === 0) {
             fieldData.groupId = this.userDefinedGroup.id;
             this.saveUserField(fieldData);
         });
       } else {
         reload = true;
-        this.userFields.forEach((fieldData) => {
+        this.userFields.forEach(fieldData => {
           this.userDefinedGroup.fields.push({
             fieldName: fieldData.fieldName,
             fieldType: fieldData.fieldType,
-            rank: fieldData.rank,
+            rank: fieldData.rank
           });
         });
         this.saveUserDefinedGroup(this.userDefinedGroup);
       }
-      this.$router.push('/userDefinedGroups/list');
+      this.$router.push("/userDefinedGroups/list");
       // this.$router.push({
       //   path: '/userDefinedGroups/list',
       //   query: { reload },
       this.showField = true;
     },
     Close() {
-      this.$router.push('/userDefinedGroups/list');
+      this.$router.push("/userDefinedGroups/list");
     },
     UpdateUserField(item) {
       if (item.id === 0) {
       } else {
         this.deleteUserField(item.id);
       }
-    },
-  },
+    }
+  }
 };
 </script>

src/components/admin/property/userDefinedGroupsPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div>
-    <!-- <section class="intro-single"> -->
     <div class="container">
-      <br />
-      <br />
-      <br />
       <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">
-          <!-- <div class="title-single-box"> -->
-          <!-- <h2 class="title-single">User Defined Groups List</h2> -->
-          <!-- </div> -->
           <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">User Defined Groups List</h1>
+            <h1 class="title-d" style="text-align:left; font-size: 250%">
+              Property User Defined Groups
+            </h1>
           </div>
-          <br />
         </div>
       </div>
     </div>
-    <!-- </section> -->
     <div class="container">
-      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Description</th>
-            <th>Property Type</th>
-            <th>Order</th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in userDefinedGroups" :key="i">
-            <td>{{item.description}}</td>
-            <td v-if="item.usageType === 0">Residential</td>
-            <td v-else-if="item.usageType === 1">Commercial</td>
-            <td v-else>Both</td>
-            <td>{{item.rank}}</td>
-            <td>
-              <button
-                type="button"
-                @click="Edit(item.id)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Edit</button>
-            </td>
-            <td>
-              <button
-                type="button"
-                @click="Delete(item)"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Delete</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="container">
+        <listView
+          :items="userDefinedGroups"
+          :showNew="true"
+          :editable="true"
+          :deleteable="true"
+          :displayColumns="columns"
+          :sortKey="'rank'"
+          @onEdit="Edit"
+          @onDelete="Delete"
+          @onNew="New"
+        />
+      </div>
     </div>
     <br />
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'UserDefinedGroup',
+  name: "UserDefinedGroup",
+  components: {
+    listView
+  },
+  data() {
+    return {
+      columns: ["description", "propertyUsageType", "rank"]
+    };
+  },
   mounted() {
     this.getUserDefinedGroups();
   },
   computed: {
-    ...mapState('propertyAdmin', ['userDefinedGroups']),
+    ...mapState("propertyAdmin", ["userDefinedGroups"])
   },
   methods: {
-    ...mapActions('propertyAdmin', [
-      'getUserDefinedGroups',
-      'deleteUserDefinedGroup',
-    ]),
+    ...mapActions("propertyAdmin", ["getUserDefinedGroups", "deleteUserDefinedGroup"]),
     New() {
-      this.$router.push('/userDefinedGroups/userDefinedGroup');
+      this.$router.push("/userDefinedGroups/userDefinedGroup");
     },
-    Edit(id) {
-      this.$router.push(`/userDefinedGroups/userDefinedGroup/${id}`);
+    Edit(item) {
+      this.$router.push(`/userDefinedGroups/userDefinedGroup/${item.id}`);
     },
     Delete(item) {
       if (item.id === 0) {
         this.userDefinedGroups.pop(item);
       }
       this.deleteUserDefinedGroup(item.id);
-    },
-  },
+    }
+  }
 };
 </script>

src/components/home/serviceSection.vue

                 </p>
               </div>
               <div class="card-footer-c">
-                <router-link to="/property/Residential/Search">
+                <router-link to="property/Search/Residential">
                   Read more
                   <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
                 </router-link>
                 </p>
               </div>
               <div class="card-footer-c">
-                <router-link to="/property/Commercial/Search">
+                <router-link to="property/Search/Commercial">
                   Read more
                   <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
                 </router-link>

src/components/processFlow/makeOffer.vue

       <br />
       <div v-if="isProperty">
         <div class="form-group row">
-          <div class="col-md-6">
+          <div style="text-align:left">
             <div class="title-box-d">
               <h3 class="title-d">{{ item.shortDescription }}</h3>
             </div>
       </div>
       <div v-if="!isProperty">
         <div class="form-group row">
-          <div class="col-md-6 col-lg-5 section-md-t3">
+          <div style="text-align:left">
             <div class="title-box-d">
-              <h3 class="title-d">{{ item ? item.resort.resortName : '' }}</h3>
+              <h3 class="title-d">
+                {{ item.resort.resortName ? item.resort.resortName : item.resort }}
+              </h3>
             </div>
           </div>
         </div>
                 <b>R</b>
               </span>
             </div>
-            <input class="form-control" type="number" v-model="item.sellPrice" disabled />
+            <input
+              v-if="isProperty"
+              class="form-control"
+              type="number"
+              v-model="item.price"
+              disabled
+            />
+            <input v-else class="form-control" type="number" v-model="item.sellPrice" disabled />
           </div>
         </div>
         <div class="col-md-6">
         @click="SendOffer()"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
-      >Send Offer</button>
+      >
+        Send Offer
+      </button>
       <button
         v-if="!isMakeOffer && !isDecline && canEdit"
         type="submit"
         @click="Accept()"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
-      >Accept</button>
+      >
+        Accept
+      </button>
       <button
         v-if="!isMakeOffer && !isDecline && canEdit"
         type="button"
         @click="Decline()"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
-      >Decline</button>
+      >
+        Decline
+      </button>
     </div>
     <div v-if="isDecline || item.statusCode === 'E3'" class="form-group row">
       <div class="col-md-12">
       @click="Complete()"
       class="btn btn-b-n"
       style="width: 150px; height:40px;"
-    >Complete</button>
+    >
+      Complete
+    </button>
     <div v-if="isSaved">
       <div class="form-group row">
         <br />
-        <label>{{ message }}</label>
+        <div class="container col-md-10">
+          <p :class="[isInfo ? 'alert myInfo' : 'alert myWarning']">{{ message }}</p>
+        </div>
       </div>
       <button
         v-if="isSaved"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
         data-dismiss="modal"
-      >OK</button>
+      >
+        OK
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
 
 export default {
-  name: 'MakeOffer',
+  name: "MakeOffer",
   props: {
     isMakeOffer: Boolean,
     isProperty: Boolean,
     canEdit: Boolean,
     item: Object,
     bidId: Number,
-    updateItem: Function,
+    updateItem: Function
   },
   data() {
     return {
       isDecline: false,
       isSaved: false,
-      message: '',
+      message: "",
+      isInfo: true
     };
   },
   methods: {
-    ...mapActions('bid', ['getBid', 'saveBid', 'acceptBid', 'declineBid']),
+    ...mapActions("bid", ["getBid", "saveBid", "acceptBid", "declineBid"]),
     SendOffer() {
       this.getBid(0);
       this.bidItem.id = 0;
       if (this.isProperty) {
         this.bidItem.propertyId = this.item.id;
       } else {
-        this.bidItem.timeshareWeek = this.item;
-        this.bidItem.timeshareWeek.id = this.item.resort.id;
-        this.bidItem.timeshareWeek.resortCode = this.item.resort.resortCode;
-        this.bidItem.timeshareWeek.resortName = this.item.resort.resortName;
         this.bidItem.timeshareWeekId = this.item.id;
       }
       this.saveBid(this.bidItem);
 
       this.item = [];
       this.isSaved = true;
-      this.message = 'Offer was submitted.';
+      this.message = "Offer was submitted.";
+      this.isInfo = true;
     },
     Accept() {
       this.acceptBid(this.item.id);
       this.isSaved = true;
-      this.message = 'Offer Accepted.';
+      this.message = "Offer Accepted.";
+      this.isInfo = true;
     },
     Decline() {
       this.isDecline = true;
 
       const decline = {
         id: this.item.id,
-        comment: this.item.declineReason,
+        comment: this.item.declineReason
       };
 
       this.declineBid(decline);
       this.isSaved = true;
-      this.message = 'Offer Declined.';
-    },
+      this.message = "Offer Declined.";
+      this.isInfo = false;
+    }
   },
   computed: {
-    ...mapState('bid', ['bidItem']),
+    ...mapState("bid", ["bidIt,em"])
   },
+  watch: {
+    item() {
+      this.isSaved = false;
+      this.canEdit = this.item.statusCode === "E1";
+    }
+  }
 };
 </script>

src/components/processFlow/offers.vue

 <template>
   <div>
-    <!-- <section class="intro-single"> -->
     <div class="container">
-      <br />
-      <br />
-      <br />
       <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">
-          <!-- <div class="title-single-box"> -->
-          <!-- <h2 class="title-single">Status List</h2> -->
-          <!-- </div> -->
           <div class="title-box-d">
             <h1 class="title-d" style="text-align:left; font-size: 250%">Bid Offers</h1>
           </div>
-          <br />
         </div>
       </div>
-    </div>
-    <!-- </section> -->
-    <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Type</th>
-            <th>Description</th>
-            <th>Status</th>
-            <th>Price</th>
-            <th>Offered Price</th>
-            <th>Offer By</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in bidItems" :key="i">
-            <td>{{ item.type }}</td>
-            <td>{{ item.shortDescription }}</td>
-            <td>{{ item.status }}</td>
-            <td>R {{ formatPrice(item.price) }}</td>
-            <td>R {{ formatPrice(item.offer) }}</td>
-            <td>{{ item.madeBy }}</td>
-            <td>
-              <button
-                type="button"
-                class="btn btn-b-n"
-                data-toggle="modal"
-                :data-target="'#myModal' + i"
-              >View</button>
-              <div :id="'myModal' + i" class="modal fade" role="dialog">
-                <div class="modal-dialog modal-lg">
-                  <!-- Modal content-->
-                  <div class="modal-content">
-                    <div class="modal-header">
-                      <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    </div>
-                    <div padding-left="20px">
-                      <makeOffer
-                        name="MakeOffer"
-                        :isMakeOffer="false"
-                        :isProperty="item.type === 'Property'"
-                        :canEdit="item.statusCode === 'E1'"
-                        :item="item"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="container">
+        <listView
+          :items="bidItems"
+          :showNew="false"
+          :editable="true"
+          :deleteable="false"
+          :displayColumns="columns"
+          :displayFormats="formats"
+          :displayHeaders="columnHeaders"
+          :sortKey="'date'"
+          @onEdit="Edit"
+        />
+      </div>
+      <div :id="'myModalOffer'" class="modal fade" role="dialog" :ref="'MyModalForm'">
+        <div class="modal-dialog modal-lg">
+          <!-- Modal content-->
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
+            <div padding-left="20px">
+              <makeOffer
+                name="MakeOffer"
+                :isMakeOffer="false"
+                :isProperty="item.type === 'Property'"
+                :canEdit="item.statusCode === 'E1'"
+                :item="item"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import makeOffer from './makeOffer.vue';
+import { mapState, mapActions } from "vuex";
+import makeOffer from "./makeOffer.vue";
+import listView from "../shared/listView.vue";
 
 export default {
-  name: 'offers',
-  components: { makeOffer },
+  name: "offers",
+  components: { makeOffer, listView },
   data() {
     return {
       item: {},
+      columns: ["date", "type", "shortDescription", "status", "price", "offer", "madeBy"],
+      formats: ["date", "text", "text", "text", "money", "money", "text"],
+      columnHeaders: ["", "", "description", "", "", "offerPrice", "offerBy"]
     };
   },
   methods: {
-    ...mapActions('bid', ['getBids']),
-    // SetItem(data) {
-    //   this.item = data;
-    //   const element = this.$refs.modal.$el;
-    //   $(element).modal('show');
-    // },
-    formatPrice(value) {
-      const val = (value / 1).toFixed(2);
-      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
-    },
+    ...mapActions("bid", ["getBids"]),
+    Edit(item) {
+      this.item = item;
+
+      const element = this.$refs.MyModalForm;
+      $(element).modal("show");
+    }
   },
   computed: {
-    ...mapState('bid', ['bidItems']),
+    ...mapState("bid", ["bidItems"])
   },
   mounted() {
     this.getBids();
-  },
+  }
 };
 </script>

src/components/property/propertyCreate.vue

         </div>
       </div>
       <br />
-      <div class="row">
+      <div class="row" v-if="!mayEdit">
+        <div class="container col-md-10">
+          <p class="alert myError">Please Login to add a property</p>
+        </div>
+      </div>
+      <div class="row" v-if="mayEdit">
         <div class="container col-md-10">
           <div class="title-box-d">
             <h5 class="title-d" style="text-align:left">Property Overview</h5>
           </div>
         </div>
       </div>
-      <div class="row mb-3">
+      <div class="row mb-3" v-if="mayEdit">
         <div class="container col-md-10" style="text-align:left">
           <form id="mainForm">
             <div class="form-goup row">
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import { VueEditor } from 'vue2-editor';
-import UserField from './propertyUserField.vue';
-import ImageLoad from './propertyImage.vue';
+import { mapState, mapActions } from "vuex";
+import { VueEditor } from "vue2-editor";
+import UserField from "./propertyUserField.vue";
+import ImageLoad from "./propertyImage.vue";
+import Log from "../../assets/Log";
 
 export default {
-  name: 'PropertyCreate',
+  name: "PropertyCreate",
   components: {
     UserField,
     ImageLoad,
-    VueEditor,
+    VueEditor
   },
   data() {
     return {
-      propertyType: 'Residential',
-      salesType: 'Rental',
-      selectedProvince: '',
-      selectedCity: '',
+      propertyType: "Residential",
+      salesType: "Rental",
+      selectedProvince: "",
+      selectedCity: "",
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
       wait: false,
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
-        ['bold', 'italic', 'underline', 'strike'],
+        ["bold", "italic", "underline", "strike"],
         [
-          { align: '' },
-          { align: 'center' },
-          { align: 'right' },
-          { align: 'justify' },
+          { align: "" },
+          { align: "center" },
+          { align: "right" },
+          { align: "justify" }
         ],
-        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
-        [{ script: 'sub' }, { script: 'super' }],
-        [{ indent: '-1' }, { indent: '+1' }],
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+        [{ script: "sub" }, { script: "super" }],
+        [{ indent: "-1" }, { indent: "+1" }]
       ],
-      error: '',
+      error: "",
       showPropertyTypeError: false,
       showProvinceError: false,
       showCityError: false,
       showSuburbError: false,
       showDateError: false,
+      user: Log.getUser(),
+      mayEdit: Log.isLoggedIn()
     };
   },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
-    ...mapActions('property', [
-      'getPropertyTypes',
-      'getPropertyOverviewFields',
-      'getPropertyFields',
-      'saveProperty',
-      'getProperty',
-      'getPropertyImages',
-      'clearProperty',
-      'clearPropertyImages',
-      'getPropertyEditDisplay',
-      'getPropertySavedOverviewFields',
-      'getPropertySavedFields',
-      'getSavedPropertyData',
+    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
+    ...mapActions("property", [
+      "getPropertyTypes",
+      "getPropertyOverviewFields",
+      "getPropertyFields",
+      "saveProperty",
+      "getProperty",
+      "getPropertyImages",
+      "clearProperty",
+      "clearPropertyImages",
+      "getPropertyEditDisplay",
+      "getPropertySavedOverviewFields",
+      "getPropertySavedFields",
+      "getSavedPropertyData"
     ]),
     TypeChanged() {
-      this.propertyType = this.property.propertyUsageType;
+      this.property.propertyUsageType = this.propertyType;
     },
     SubmitData() {
       if (this.property.propertyTypeId === 0) {
       }
 
       if (
-        this.salesType === 'Rental'
-        && this.property.dateAvailable === 'undef'
+        this.salesType === "Rental" &&
+        this.property.dateAvailable === "undef"
       ) {
         this.showDateError = true;
       }
 
       if (
-        this.showPropertyTypeError
-        || this.showProvinceError
-        || this.showCityError
-        || this.showSuburbError
-        || this.showDateError
+        this.showPropertyTypeError ||
+        this.showProvinceError ||
+        this.showCityError ||
+        this.showSuburbError ||
+        this.showDateError
       ) {
         return;
       }
 
       this.wait = true;
-      if (this.salesType === 'Sale') {
+      if (this.salesType === "Sale") {
         this.property.isSale = true;
         this.property.dateAvailable = new Date();
       }
         }
         this.property.propertyImages.push({
           image: this.images[i],
-          isDefault: setAsDefault,
+          isDefault: setAsDefault
         });
       }
       this.property.propertyUserFields = this.propertyFieldValues;
       }
 
       this.saveProperty(this.property)
-        .then((fulfilled) => {
+        .then(fulfilled => {
           this.$router.push(`/property/property/${fulfilled.data.id}`);
         })
-        .catch((error) => {
+        .catch(error => {
           console.log(error.message);
         });
     },
     Close() {
-      this.$router.push('/property/admin/list/my');
+      this.$router.push("/property/admin/list/my");
     },
     PropertyTypeSelected(item) {
       if (item.target.options.selectedIndex > 0) {
         this.getSuburbs(
           Object.assign(
             {},
-            { province: this.selectedProvince, city: this.selectedCity },
-          ),
+            { province: this.selectedProvince, city: this.selectedCity }
+          )
         );
         this.showCityError = false;
       } else {
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach((element) => {
+      this.propertyFieldValues.forEach(element => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
-    },
+    }
   },
   mounted() {
     this.wait = false;
     if (this.propertyFields.length > 0) {
       this.propertyFields = [];
     }
-    if (this.property.description !== '') {
-      this.property.description = '';
+    if (this.property.description !== "") {
+      this.property.description = "";
     }
 
     if (this.$route.params.propertyUsageType) {
     this.getPropertyFields(this.propertyType);
   },
   computed: {
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-    ...mapState('property', [
-      'propertyTypes',
-      'propertyOverviewFields',
-      'propertyFields',
-      'property',
-      'propertyImages',
+    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
+    ...mapState("property", [
+      "propertyTypes",
+      "propertyOverviewFields",
+      "propertyFields",
+      "property",
+      "propertyImages"
     ]),
-    ...mapState('authentication', ['user']),
+    ...mapState("authentication", ["user"]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>

src/components/property/propertyList.vue

 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import listView from '../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import listView from "../shared/listView.vue";
+import Log from "../../assets/Log";
 
 export default {
-  name: 'PropertyList',
+  name: "PropertyList",
   components: {
-    listView,
+    listView
   },
   data() {
     return {
-      propertyType: '',
-      role: 'MY',
+      propertyType: "",
+      role: "MY",
+      user: Log.getUser()
     };
   },
   methods: {
-    ...mapActions('propertyList', ['getProperties', 'deleteProperty']),
+    ...mapActions("propertyList", ["getProperties", "deleteProperty"]),
     Edit(item) {
-      const salesType = item.isSale ? 'Sale' : 'Rental';
+      const salesType = item.isSale ? "Sale" : "Rental";
       this.$router.push({
-        path: '/property/edit',
-        query: { id: item.id },
+        path: "/property/edit",
+        query: { id: item.id }
       });
     },
     Delete(item) {
       this.deleteProperty(item.id);
-    },
+    }
   },
   mounted() {
-    if (this.user.role === 'Super Admin') {
-      this.role = 'SUPERADMIN';
+    if (this.user.role === "Super Admin") {
+      this.role = "SUPERADMIN";
     }
-    if (this.user.role === 'Agency') {
-      this.user.role = 'ADMIN';
+    if (this.user.role === "Agency") {
+      this.role = "ADMIN";
     }
 
     this.getProperties(
       Object.assign({
         propertyType: this.role,
-        user: this.user.id,
-      }),
+        user: this.user.id
+      })
     );
   },
   computed: {
-    ...mapState('propertyList', ['properties']),
-    ...mapState('authentication', ['user']),
+    ...mapState("propertyList", ["properties"]),
     UserChanged() {
-      if (this.user.role === 'Super Admin') {
+      if (this.user.role === "Super Admin") {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.role = 'SUPERADMIN';
+        this.role = "SUPERADMIN";
       }
-      if (this.user.role === 'Agency') {
+      if (this.user.role === "Agency") {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.user.role = 'ADMIN';
+        this.role = "ADMIN";
       }
 
       this.getProperties(
         Object.assign({
           propertyType: this.role,
-          user: this.user.id,
-        }),
+          user: this.user.id
+        })
       );
       return this.user;
-    },
+    }
   },
   watch: {
     UserChanged() {
       console.log(this.user);
-    },
-  },
+    }
+  }
 };
 </script>

src/components/property/propertyPage.vue

                               id: property.id,
                               shortDescription: property.shortDescription,
                               description: property.description,
-                              sellPrice: property.price
+                              price: property.price
                             }"
                           />
                         </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import makeOffer from '../processFlow/makeOffer.vue';
-import gallery from '../shared/gallerySlideShow.vue';
+import { mapState, mapActions } from "vuex";
+import makeOffer from "../processFlow/makeOffer.vue";
+import gallery from "../shared/gallerySlideShow.vue";
 
 export default {
-  name: 'property',
+  name: "property",
   components: {
     makeOffer,
-    gallery,
+    gallery
   },
   data() {
     return {
       index: null,
-      date: new Date(),
+      date: new Date()
     };
   },
   mounted() {
     this.mayEditProperty(this.$route.params.id);
   },
   computed: {
-    ...mapState('property', ['property', 'propertyImages']),
-    ...mapState('propertyEdit', ['mayEdit']),
+    ...mapState("property", ["property", "propertyImages"]),
+    ...mapState("propertyEdit", ["mayEdit"])
   },
   methods: {
-    ...mapActions('property', [
-      'getProperty',
-      'getPropertyImages',
-      'clearPropertyImages',
+    ...mapActions("property", [
+      "getProperty",
+      "getPropertyImages",
+      "clearPropertyImages"
     ]),
-    ...mapActions('propertyEdit', ['mayEditProperty']),
+    ...mapActions("propertyEdit", ["mayEditProperty"]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
-      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
     },
     formatAddress(value) {
-      if (value !== '') {
+      if (value !== "") {
         return `${value}<br/>`;
       }
-      return '';
-    },
+      return "";
+    }
   },
   beforeDestroy() {
     this.clearPropertyImages();
-  },
+  }
 };
 </script>
 

src/components/property/propertySearchPage.vue

   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import autoComplete from '../shared/autoComplete.vue';
+import { mapState, mapActions } from "vuex";
+import autoComplete from "../shared/autoComplete.vue";
 
 export default {
-  name: 'propertysearch',
+  name: "propertysearch",
   components: {
-    autoComplete,
+    autoComplete
   },
   data() {
     return {
-      propertyUsageType: 'Residential',
-      salesType: 'Sale',
-      searchText: '',
+      propertyUsageType: "Residential",
+      salesType: "Sale",
+      searchText: ""
     };
   },
   computed: {
-    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
   },
   methods: {
-    ...mapActions('propertySearch', ['getSuburbs', 'applyFilter']),
+    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
     SetType(item) {
       this.propertyUsageType = item;
+      localStorage.propertySearchUsageType = item;
     },
     SearchClick() {
       const item = this.suburbs.find(s => s.display === this.searchText);
       this.propertySearch.propertyUsageType = this.propertyUsageType;
       this.propertySearch.salesType = this.salesType;
 
-      this.$router.push('/property/propertySearch/results');
+      this.$router.push("/property/propertySearch/results");
     },
     Filter() {
       this.applyFilter(this.searchText);
     },
     SelectedFilter(item) {
       this.searchText = item;
-    },
+    }
   },
   mounted() {
     this.getSuburbs();
-  },
+    if (this.$route.params.propertyUsageType) {
+      this.propertyUsageType = this.$route.params.propertyUsageType;
+    } else if (localStorage.propertySearchUsageType) {
+      this.propertyUsageType = localStorage.propertySearchUsageType;
+    } else {
+      this.propertyUsageType = "Residential";
+    }
+  }
 };
 </script>

src/components/property/propertySearchResults.vue

   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import propertyCard from './propertyCard.vue';
+import { mapState, mapActions } from "vuex";
+import propertyCard from "./propertyCard.vue";
 
 export default {
-  name: 'propertysearch',
+  name: "propertysearch",
   components: {
-    propertyCard,
+    propertyCard
   },
   data() {
     return {};
   },
   mounted() {
-    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
-      this.propertySearch.propertyUsageType = 'Residential';
+    if (typeof this.propertySearch.propertyUsageType === "undefined") {
+      this.propertySearch.propertyUsageType = "Residential";
     }
     if (this.user) {
       this.propertySearch.userName = this.user.username;
     }
+
     this.searchProperties(this.propertySearch);
   },
   methods: {
-    ...mapActions('propertySearch', [
-      'searchProperties',
-      'clearProperties',
-      'updateResultsShowing',
+    ...mapActions("propertySearch", [
+      "searchProperties",
+      "clearProperties",
+      "updateResultsShowing"
     ]),
     SetType(item) {
       this.propertySearch.propertyUsageType = item;
     },
     SearchPage() {
       this.clearProperties();
-      this.$router.push('/property/search');
-    },
+      this.$router.push("/property/search");
+    }
   },
   computed: {
-    ...mapState('propertySearch', [
-      'properties',
-      'propertySearch',
-      'resultsShowing',
-    ]),
-    ...mapState('authentication', ['user']),
+    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
+    ...mapState("authentication", ["user"]),
     ParamsChanged() {
-      if (this.resultsShowing) {
-        if (typeof this.propertySearch.propertyUsageType === 'undefined') {
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.propertySearch.propertyUsageType = 'Residential';
-        }
-        this.searchProperties(this.propertySearch);
+      console.log(JSON.stringify(this.propertySearch));
+      if (typeof this.propertySearch.propertyUsageType === "undefined") {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch.propertyUsageType = "Residential";
       }
+      this.searchProperties(this.propertySearch);
       return null;
-    },
+    }
   },
   watch: {
     ParamsChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>

src/components/shared/listView.vue

-/* eslint-disable no-restricted-syntax */
-/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */ /* eslint-disable guard-for-in */
 <template>
   <div>
     <div style="height:5px"></div>
         <input v-model="searchItem" class="form-control" placeholder="Search...." />
       </div>
       <div class="p-2" v-if="title">
-        <h2>{{title}}</h2>
+        <h2>{{ title }}</h2>
       </div>
       <div class="p-2">
         <div class="d-flex flex-row">
               class="btn btn-primary myBackground btn-width cursor-pointer"
               data-toggle="modal"
               data-target="#myModal"
-            >Column Chooser</div>
+            >
+              Column Chooser
+            </div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg">
             <div
               class="btn btn-primary myBackground btn-width cursor-pointer"
               @click="onClearSelected()"
-            >Clear Selected</div>
+            >
+              Clear Selected
+            </div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
+            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">
+              New
+            </div>
           </div>
         </div>
       </div>
     <div v-if="items && items.length > 0" class="table-responsive">
       <table
         id="table"
-        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered}"
+        :class="{ 'table table-hover': 1 === 1, 'table-sm': compact, 'table-bordered': bordered }"
       >
         <thead>
           <tr class="dnd-moved">
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div class="p-2 w-100 bd-highlight">{{ 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"
             v-for="(item, i) in DisplayItems"
             :key="i"
             @click="onRowClick(item, i)"
-            :class="{'selected': isSelected(i), 'cursor-pointer': allowSelect}"
+            :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
           >
-            <td
-              v-for="(column, c) in Columns"
-              :key="c"
-            >{{ isObject(item[column]) ? item[column].display : item[column] }}</td>
+            <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-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
+                {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
+              </div>
+              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
+                {{ 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="editable" class="my-width">
               <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
             </td>
         </tbody>
       </table>
       <div class="d-flex justify-content-between" v-if="showPager">
-        <div
-          class="p-1"
-        >{{ currentPage + ' / ' + PageCount + (!hideItemCount ? ' - (' + items.length + ' items)' : '')}}</div>
+        <div class="p-1">
+          {{
+            currentPage +
+              " / " +
+              PageCount +
+              (!hideItemCount ? " - (" + items.length + " items)" : "")
+          }}
+        </div>
         <div class="p-1">
           <BasePagination
             :currentPage="currentPage"
     },
     showColumnChooser: {
       default: true
+    },
+    displayColumns: {
+      default: []
+    },
+    displayFormats: {
+      default: []
+    },
+    displayHeaders: {
+      default: []
     }
   },
   data() {
         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))
                 listAll.push({
     isObject(item) {
       return !!item && item.constructor === Object;
     },
+    isDate(item) {
+      return !!item && item.constructor === Date;
+    },
+    isDecimal(item) {
+      if (!!item && item.constructor === Number && item.indexOf(".") > 0) {
+        return true;
+      }
+      return false;
+    },
+    isImage(item) {
+      return (
+        !!item &&
+        item.constructor === String &&
+        item.length > 9 &&
+        item.substring(0, 9) === "data:image"
+      );
+    },
     onEdit(item) {
       this.$emit("onEdit", item);
     },
       if (this.currentPage !== 1) {
         this.currentPage = 1;
       }
+    },
+    inArray: function(array, value) {
+      var lenght = array.length;
+      for (var i = 0; i < lenght; i++) {
+        if (array[i] === value) return true;
+      }
+      return false;
     }
   },
   computed: {
       if (!this.allColumn || this.allColumn.length === 0) {
         this.getInitColumn();
       }
-      const list = _.filter(this.allColumn, x => x.show);
-      for (const i in list) {
-        const item = list[i];
-        if (item) {
-          listColumns.push(item.column);
+      if (this.displayColumns.length > 0) {
+        for (let i = 0; i < this.displayColumns.length; i++) {
+          listColumns.push(this.displayColumns[i]);
+        }
+      } else {
+        const list = _.filter(this.allColumn, x => x.show);
+        for (const i in list) {
+          const item = list[i];
+          if (item) {
+            listColumns.push(item.column);
+          }
         }
       }
       return listColumns;

src/components/shared/searchTab.vue

                     <i class="fa fa-search"></i>
                   </span>
                 </div>
-                <input type="text" class="form-control" placeholder="Keyword" v-model="keyword" />
-                <div class="input-group-append" @click="clearFilter('resort')">
+                <input
+                  type="text"
+                  class="form-control"
+                  placeholder="Keyword"
+                  v-model="keyword"
+                  @change="keywordChanged"
+                />
+                <div class="input-group-append" @click="clearKeyword()">
                   <span class="input-group-text cursor-pointer myFill">
                     <b>X</b>
                   </span>
           <div class="col-md-2">
             <button
               type="button"
-              :class="[selectedPropertyType === 'Timeshare' ? 'tabButton isSelected' : 'tabButton isUnSelected']"
+              :class="[
+                selectedPropertyType === 'Timeshare'
+                  ? 'tabButton isSelected'
+                  : 'tabButton isUnSelected'
+              ]"
               @click="setTypeTimeshare"
             >
               <b>Timeshare</b>
           <div class="col-md-2">
             <button
               type="button"
-              :class="[selectedPropertyType === 'Residential' ? 'tabButton isSelected' : 'tabButton isUnSelected']"
+              :class="[
+                selectedPropertyType === 'Residential'
+                  ? 'tabButton isSelected'
+                  : 'tabButton isUnSelected'
+              ]"
               @click="setTypeResidential"
             >
               <b>Residential</b>
           <div class="col-md-2">
             <button
               type="button"
-              :class="[selectedPropertyType === 'Commercial' ? 'tabButton isSelected' : 'tabButton isUnSelected']"
+              :class="[
+                selectedPropertyType === 'Commercial'
+                  ? 'tabButton isSelected'
+                  : 'tabButton isUnSelected'
+              ]"
               @click="setTypeCommercial"
             >
               <b>Commercial</b>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import propertySearch from '../property/propertySearchFields.vue';
-import timeshareSearch from '../timeshare/searchTimeshare.vue';
+import { mapState } from "vuex";
+import propertySearch from "../property/propertySearchFields.vue";
+import timeshareSearch from "../timeshare/searchTimeshare.vue";
 
 export default {
   components: {
     propertySearch,
-    timeshareSearch,
+    timeshareSearch
   },
   data() {
     return {
-      selectedPropertyType: 'Timeshare',
-      keyword: '',
+      selectedPropertyType: "Timeshare",
+      keyword: ""
     };
   },
   computed: {
-    ...mapState('weekList', ['filter']),
-    ...mapState('propertySearch', ['propertySearch']),
+    ...mapState("weekList", ["filter"]),
+    ...mapState("propertySearch", ["propertySearch"])
   },
   methods: {
     updateType(item) {
       this.selectedPropertyType = item;
     },
     Search() {
-      if (this.selectedPropertyType === 'Timeshare') {
-        this.$router.push('/timesharesearch');
+      if (this.selectedPropertyType === "Timeshare") {
+        this.$router.push("/timesharesearch");
       } else {
-        this.$router.push('/property/propertySearch/results');
+        this.propertySearch.keyword = this.keyword;
+        this.$router.push("/property/propertySearch/results");
       }
     },
     setTypeTimeshare() {
-      this.selectedPropertyType = 'Timeshare';
+      this.selectedPropertyType = "Timeshare";
     },
     setTypeResidential() {
-      this.selectedPropertyType = 'Residential';
+      this.selectedPropertyType = "Residential";
     },
     setTypeCommercial() {
-      this.selectedPropertyType = 'Commercial';
+      this.selectedPropertyType = "Commercial";
     },
-  },
+    clearKeyword() {
+      this.keyword = "";
+    },
+    keywordChanged() {
+      if (this.selectedPropertyType !== "Timeshare") {
+        this.propertySearch.keyword = this.keyword;
+      }
+    }
+  }
 };
 </script>

src/main.js

 /* eslint-disable prefer-template */
-import Vue from 'vue';
-import EvaIcons from 'vue-eva-icons';
-import axios from 'axios';
-import App from './App.vue';
-import router from './router';
-import store from './store';
+import Vue from "vue";
+import EvaIcons from "vue-eva-icons";
+import axios from "axios";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import moment from "moment";
 
 Vue.use(EvaIcons);
 
 Vue.config.productionTip = false;
 
 Vue.prototype.$http = axios;
-const token = localStorage.getItem('token');
+const token = localStorage.getItem("token");
 if (token) {
   Vue.prototype.$http.defaults.headers.common.Authorization = token;
 }
       next();
       return;
     }
-    next('/users/login');
+    next("/users/login");
   } else {
     next();
   }
 });
 
-Vue.filter('toCurrency', (value) => {
-  if (typeof value !== 'number') {
+Vue.filter("toCurrency", value => {
+  if (typeof value !== "number") {
     return value;
   }
-  const formatter = new Intl.NumberFormat('en-US', {
-    minimumFractionDigits: 2,
+  const formatter = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2
   });
   return `R ${formatter.format(value)}`;
 });
 
-Vue.filter('toProper', (value) => {
-  if (typeof value !== 'string') {
+Vue.filter("toProper", value => {
+  if (typeof value !== "string") {
     console.log(typeof value);
     return value;
   }
-  value = value.replace(/([a-z])([A-Z])/g, '$1 $2');
+  value = value.replace(/([a-z])([A-Z])/g, "$1 $2");
   return value.charAt(0).toUpperCase() + value.slice(1);
 });
 
+Vue.filter("toDate", value => value.substring(0, value.length > 9 ? 10 : value.length));
 
-Vue.filter('toDate', value => value.substring(0, value.length > 9 ? 10 : value.length));
+Vue.filter("toTime", value => {
+  return moment(String(value)).format("hh:mm");
+});
 
 new Vue({
   render: h => h(App),
   router,
-  store,
-}).$mount('#app');
+  store
+}).$mount("#app");

src/router/index.js

 /* eslint-disable import/prefer-default-export */
-import Vue from 'vue';
-import Router from 'vue-router';
+import Vue from "vue";
+import Router from "vue-router";
 
-import HomePage from '../components/home/homePage.vue';
+import HomePage from "../components/home/homePage.vue";
 
-import TimeshareBuy from '../components/timeshare/buy/buyPage.vue';
-import TimeshareSell from '../components/timeshare/sell/sellPage.vue';
-import TimeshareFAQ from '../components/timeshare/faqPage.vue';
-import TimeshareSearch from '../components/timeshare/buy/weekListPage.vue';
-import MyWeeksPage from '../components/timeshare/myWeeksPage.vue';
+import TimeshareBuy from "../components/timeshare/buy/buyPage.vue";
+import TimeshareSell from "../components/timeshare/sell/sellPage.vue";
+import TimeshareFAQ from "../components/timeshare/faqPage.vue";
+import TimeshareSearch from "../components/timeshare/buy/weekListPage.vue";
+import MyWeeksPage from "../components/timeshare/myWeeksPage.vue";
 
-import Login from '../components/user/loginPage.vue';
-import PrivateIndividual from '../components/user/registerPage.vue';
-import Agency from '../components/user/registerAgencySection.vue';
-import UpdateInfo from '../components/user/updateProfileInfo.vue';
+import Login from "../components/user/loginPage.vue";
+import PrivateIndividual from "../components/user/registerPage.vue";
+import Agency from "../components/user/registerAgencySection.vue";
+import UpdateInfo from "../components/user/updateProfileInfo.vue";
 
-import PropertySearch from '../components/property/propertySearchPage.vue';
-import PropertyPage from '../components/property/propertyPage.vue';
-import PropertyEdit from '../components/property/propertyeditPage.vue';
-import PropertyCreate from '../components/property/propertyCreate.vue';
-import PropertyList from '../components/property/propertyList.vue';
-import PropertyTypeList from '../components/admin/property/propertyTypeList.vue';
-import PropertyType from '../components/admin/property/propertyTypeEdit.vue';
-import UserDefinedGroups from '../components/admin/property/userDefinedGroupsPage.vue';
-import UserDefinedGroup from '../components/admin/property/userDefinedGroupPage.vue';
+import PropertySearch from "../components/property/propertySearchPage.vue";
+import PropertyPage from "../components/property/propertyPage.vue";
+import PropertyEdit from "../components/property/propertyeditPage.vue";
+import PropertyCreate from "../components/property/propertyCreate.vue";
+import PropertyList from "../components/property/propertyList.vue";
+import PropertyTypeList from "../components/admin/property/propertyTypeList.vue";
+import PropertyType from "../components/admin/property/propertyTypeEdit.vue";
+import UserDefinedGroups from "../components/admin/property/userDefinedGroupsPage.vue";
+import UserDefinedGroup from "../components/admin/property/userDefinedGroupPage.vue";
 
-import AboutUs from '../components/about/aboutUsPage.vue';
-import AboutTimeshare from '../components/about/aboutTimeshare.vue';
+import AboutUs from "../components/about/aboutUsPage.vue";
+import AboutTimeshare from "../components/about/aboutTimeshare.vue";
 
-import Status from '../components/admin/status/statusPage.vue';
-import timeshareAdminPage from '../components/admin/status/timeshareAdminPage.vue';
-import tenderWeekAdminPage from '../components/admin/status/tenderWeekAdminPage.vue';
-import userManagementPage from '../components/admin/status/userManagementPage.vue';
-import changeLogPage from '../components/admin/status/changeLogPage.vue';
-import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue';
-import agentManagementPage from '../components/admin/status/agentsUserManagementPage.vue';
+import Status from "../components/admin/status/statusPage.vue";
+import timeshareAdminPage from "../components/admin/status/timeshareAdminPage.vue";
+import tenderWeekAdminPage from "../components/admin/status/tenderWeekAdminPage.vue";
+import userManagementPage from "../components/admin/status/userManagementPage.vue";
+import changeLogPage from "../components/admin/status/changeLogPage.vue";
+import UnitConfiguration from "../components/admin/unitConfiguration/unitConfigurationPage.vue";
+import agentManagementPage from "../components/admin/status/agentsUserManagementPage.vue";
 
-import ResortPage from '../components/timeshare/resort/resortPage.vue';
-import UnitPage from '../components/timeshare/resort/unitPage.vue';
+import ResortPage from "../components/timeshare/resort/resortPage.vue";
+import UnitPage from "../components/timeshare/resort/unitPage.vue";
 
-import ContactUs from '../components/misc/contactUs.vue';
-import PrivacyPolicy from '../components/misc/privacyPolicyPage.vue';
+import ContactUs from "../components/misc/contactUs.vue";
+import PrivacyPolicy from "../components/misc/privacyPolicyPage.vue";
 
-import MakeOffer from '../components/processFlow/makeOffer.vue';
-import Offer from '../components/processFlow/offers.vue';
-import searchLog from '../components/admin/logs/SearchLogs.vue';
+import MakeOffer from "../components/processFlow/makeOffer.vue";
+import Offer from "../components/processFlow/offers.vue";
+import searchLog from "../components/admin/logs/SearchLogs.vue";
 // import store from '../store';
 
-import TemplatePage from '../components/communication/templatePage.vue';
-import CarouselList from '../components/admin/misc/carouselList.vue';
-import CarouselDetail from '../components/admin/misc/carousel.vue';
-import AlertPage from '../components/shared/alertPage.vue';
-import PropertySearchResults from '../components/property/propertySearchResults.vue';
+import TemplatePage from "../components/communication/templatePage.vue";
+import CarouselList from "../components/admin/misc/carouselList.vue";
+import CarouselDetail from "../components/admin/misc/carousel.vue";
+import AlertPage from "../components/shared/alertPage.vue";
+import PropertySearchResults from "../components/property/propertySearchResults.vue";
 
 Vue.use(Router);
 
   scrollBehavior(to, from, savedPosition) {
     return {
       x: 0,
-      y: 0,
+      y: 0
     };
   },
   routes: [
     {
-      path: '/',
-      name: 'Home',
-      component: HomePage,
+      path: "/",
+      name: "Home",
+      component: HomePage
     },
     {
-      path: '/shared/alert',
-      name: 'AlertPage',
-      component: AlertPage,
+      path: "/shared/alert",
+      name: "AlertPage",
+      component: AlertPage
     },
     {
-      path: '/about/us',
-      name: 'aboutus',
-      component: AboutUs,
+      path: "/about/us",
+      name: "aboutus",
+      component: AboutUs
     },
     {
-      path: '/about/timeshare',
-      name: 'abouttimeshare',
-      component: AboutTimeshare,
+      path: "/about/timeshare",
+      name: "abouttimeshare",
+      component: AboutTimeshare
     },
     {
-      path: '/communication/template',
-      name: 'template',
-      component: TemplatePage,
+      path: "/communication/template",
+      name: "template",
+      component: TemplatePage
     },
     {
-      path: '/timeshare/sell',
-      name: 'TimeshareSell',
-      component: TimeshareSell,
+      path: "/timeshare/sell",
+      name: "TimeshareSell",
+      component: TimeshareSell
+    },
+    {
+      path: "/timeshare/buy",
+      name: "TimeshareBuy",
+      component: TimeshareBuy
     },
     {
-      path: '/timeshare/buy',
-      name: 'TimeshareBuy',
-      component: TimeshareBuy,
+      path: "/timeshare/faq",
+      name: "TimeshareFAQ",
+      component: TimeshareFAQ
     },
     {
-      path: '/timeshare/faq',
-      name: 'TimeshareFAQ',
-      component: TimeshareFAQ,
+      path: "/timeshare/myWeeks",
+      name: "MyWeeks",
+      component: MyWeeksPage
     },
     {
-      path: '/timeshare/myWeeks',
-      name: 'MyWeeks',
-      component: MyWeeksPage,
+      path: "/user/login",
+      name: "Login",
+      component: Login
     },
     {
-      path: '/user/login',
-      name: 'Login',
-      component: Login,
+      path: "/user/updateProfileInfo",
+      name: "UpdateInfo",
+      component: UpdateInfo
     },
     {
-      path: '/user/updateProfileInfo',
-      name: 'UpdateInfo',
-      component: UpdateInfo,
+      path: "/user/register",
+      name: "PrivateIndividual",
+      component: PrivateIndividual
     },
     {
-      path: '/user/register',
-      name: 'PrivateIndividual',
-      component: PrivateIndividual,
+      path: "/user/registeragency",
+      name: "Agency",
+      component: Agency
     },
     {
-      path: '/user/registeragency',
-      name: 'Agency',
-      component: Agency,
+      path: "/property/property/:id",
+      name: "PropertyPage",
+      component: PropertyPage
     },
     {
-      path: '/property/property/:id',
-      name: 'PropertyPage',
-      component: PropertyPage,
+      path: "/property/search",
+      name: "PropertySearchTab",
+      component: PropertySearch
     },
     {
-      path: '/property/search',
-      name: 'PropertySearchTab',
-      component: PropertySearch,
+      path: "/property/search/:propertyUsageType",
+      name: "PropertySearchTabType",
+      component: PropertySearch
     },
     {
-      path: '/property/new/:saleType',
-      name: 'PropertyNew',
-      component: PropertyCreate,
+      path: "/property/new/:saleType",
+      name: "PropertyNew",
+      component: PropertyCreate
     },
     {
-      path: '/property/new/:propertyUsageType/:saleType',
-      name: 'PropertyNewFromSearch',
-      component: PropertyCreate,
+      path: "/property/new/:propertyUsageType/:saleType",
+      name: "PropertyNewFromSearch",
+      component: PropertyCreate
     },
     {
-      path: '/property/edit',
-      name: 'PropertyEdit',
-      component: PropertyEdit,
+      path: "/property/edit",
+      name: "PropertyEdit",
+      component: PropertyEdit
     },
     {
-      path: '/properties',
-      name: 'PropertyListAdmin',
-      component: PropertyList,
+      path: "/properties",
+      name: "PropertyListAdmin",
+      component: PropertyList
     },
     {
-      path: '/propertyTypes/list',
-      name: 'PropertyTypeList',
-      component: PropertyTypeList,
+      path: "/propertyTypes/list",
+      name: "PropertyTypeList",
+      component: PropertyTypeList
     },
     {
-      path: '/propertyType/new',
-      name: 'PropertyTypeNew',
-      component: PropertyType,
+      path: "/propertyType/new",
+      name: "PropertyTypeNew",
+      component: PropertyType
     },
     {
-      path: '/propertyType/:id',
-      name: 'PropertyTypeEdit',
-      component: PropertyType,
+      path: "/propertyType/:id",
+      name: "PropertyTypeEdit",
+      component: PropertyType
     },
     {
-      path: '/userDefinedGroups/list',
-      name: 'UserDefinedGroupsList',
-      component: UserDefinedGroups,
+      path: "/userDefinedGroups/list",
+      name: "UserDefinedGroupsList",
+      component: UserDefinedGroups
     },
     {
-      path: '/userDefinedGroups/userDefinedGroup/:id',
-      name: 'UserDefinedGroupEdit',
-      component: UserDefinedGroup,
+      path: "/userDefinedGroups/userDefinedGroup/:id",
+      name: "UserDefinedGroupEdit",
+      component: UserDefinedGroup
     },
     {
-      path: '/userDefinedGroups/userDefinedGroup',
-      name: 'UserDefinedGroupNew',
-      component: UserDefinedGroup,
+      path: "/userDefinedGroups/userDefinedGroup",
+      name: "UserDefinedGroupNew",
+      component: UserDefinedGroup
     },
     {
-      path: '/status/list',
-      name: 'StatusList',
-      component: Status,
+      path: "/status/list",
+      name: "StatusList",
+      component: Status
     },
     {
-      path: '/status/timeshareAdmin',
-      name: 'TimeshareAdmin',
-      component: timeshareAdminPage,
+      path: "/status/timeshareAdmin",
+      name: "TimeshareAdmin",
+      component: timeshareAdminPage
     },
     {
-      path: '/status/tenderWeekAdmin',
-      name: 'TenderWeekAdmin',
-      component: tenderWeekAdminPage,
+      path: "/status/tenderWeekAdmin",
+      name: "TenderWeekAdmin",
+      component: tenderWeekAdminPage
     },
     {
-      path: '/status/userManagementPage',
-      name: 'userManagementPage',
-      component: userManagementPage,
+      path: "/status/userManagementPage",
+      name: "userManagementPage",
+      component: userManagementPage
     },
     {
-      path: '/status/agentUserManagementPage',
-      name: 'agentManagementPage',
-      component: agentManagementPage,
+      path: "/status/agentUserManagementPage",
+      name: "agentManagementPage",
+      component: agentManagementPage
     },
     {
-      path: '/status/changeLogPage',
-      name: 'changeLogPage',
-      component: changeLogPage,
+      path: "/status/changeLogPage",
+      name: "changeLogPage",
+      component: changeLogPage
     },
     {
-      path: '/unitConfiguration/list',
-      name: 'UnitConfiguration',
-      component: UnitConfiguration,
+      path: "/unitConfiguration/list",
+      name: "UnitConfiguration",
+      component: UnitConfiguration
     },
     {
-      path: '/contactus',
-      name: 'ContactUs',
-      component: ContactUs,
+      path: "/contactus",
+      name: "ContactUs",
+      component: ContactUs
     },
     {
-      path: '/privacypolicy',
-      name: 'PrivacyPolicy',
-      component: PrivacyPolicy,
+      path: "/privacypolicy",
+      name: "PrivacyPolicy",
+      component: PrivacyPolicy
     },
     {
-      path: '/resort/:resortCode',
-      name: 'ResortPage',
+      path: "/resort/:resortCode",
+      name: "ResortPage",
       component: ResortPage,
-      props: true,
+      props: true
     },
     {
-      path: '/resort/:resortCode/:unitNumber',
-      name: 'UnitPage',
+      path: "/resort/:resortCode/:unitNumber",
+      name: "UnitPage",
       component: UnitPage,
-      props: true,
+      props: true
     },
     {
-      path: '/timeshare/:weekId',
-      name: 'TimeshareSellEdit',
+      path: "/timeshare/:weekId",
+      name: "TimeshareSellEdit",
       component: TimeshareSell,
-      props: true,
+      props: true
     },
     {
-      path: '/MakeOffer',
-      name: 'MakeOffer',
-      component: MakeOffer,
+      path: "/MakeOffer",
+      name: "MakeOffer",
+      component: MakeOffer
     },
     {
-      path: '/Offers',
-      name: 'Offers',
-      component: Offer,
+      path: "/Offers",
+      name: "Offers",
+      component: Offer
     },
     {
-      path: '/timesharesearch',
-      name: 'TimeshareSearch',
-      component: TimeshareSearch,
+      path: "/timesharesearch",
+      name: "TimeshareSearch",
+      component: TimeshareSearch
     },
     {
-      path: '/searchLog',
-      name: 'SearchLog',
-      component: searchLog,
+      path: "/searchLog",
+      name: "SearchLog",
+      component: searchLog
     },
     {
-      path: '/carousel',
-      name: 'carousel',
-      component: CarouselList,
+      path: "/carousel",
+      name: "carousel",
+      component: CarouselList
     },
     {
-      path: '/carousel/details/:id',
-      name: 'CarouselDetails',
-      component: CarouselDetail,
+      path: "/carousel/details/:id",
+      name: "CarouselDetails",
+      component: CarouselDetail
     },
     {
-      path: '/property/propertySearch/results',
-      name: 'PropertySearchResults',
-      component: PropertySearchResults,
-    },
-  ],
+      path: "/property/propertySearch/results",
+      name: "PropertySearchResults",
+      component: PropertySearchResults
+    }
+  ]
 });

src/store/modules/logs/searchLog.js

-import axios from 'axios';
-import _ from 'lodash';
+import axios from "axios";
+import _ from "lodash";
 
 export default {
   namespaced: true,
     fields: [],
     filter: {
       by: undefined,
-      value: undefined,
-    },
+      value: undefined
+    }
   },
   mutations: {
     updateSearch(state, data) {
       state.list = [];
       state.fields = [];
       state.list = data;
-      data.forEach((item) => {
+      data.forEach(item => {
         state.fields.push(item.property);
       });
+      state.fields.push("UserName");
+      state.fields.push("Type");
+      state.fields.push("Date");
+      state.fields.push("Time");
       state.fields = state.fields.filter((x, i, a) => a.indexOf(x) === i);
     },
     onClearFilter(state) {
       state.filter = {
         by: undefined,
-        value: undefined,
+        value: undefined
       };
-    },
+    }
   },
   getters: {
-    filterList: (state) => {
+    filterList: state => {
       let lst = state.list;
       const { filter } = state;
       if (filter) {
         if (filter.by) {
-          lst = _.filter(lst, x => x.property === filter.by);
-          if (filter.value) {
-            lst = _.filter(lst, x => x.value.toUpperCase().includes(filter.value.toUpperCase()));
+          if (filter.by === "UserName") {
+            lst = _.filter(lst, x => x.userName.toUpperCase().includes(filter.value.toUpperCase()));
+          } else if (filter.by === "Type") {
+            lst = _.filter(lst, x => x.type.toUpperCase().includes(filter.value.toUpperCase()));
+          } else if (filter.by === "Date") {
+            lst = _.filter(lst, x => x.date.toUpperCase().includes(filter.value.toUpperCase()));
+          } else if (filter.by === "Time") {
+            lst = _.filter(lst, x => x.time.toUpperCase().includes(filter.value.toUpperCase()));
+          } else {
+            lst = _.filter(lst, x => x.property === filter.by);
+            if (filter.value) {
+              lst = _.filter(lst, x => x.value.toUpperCase().includes(filter.value.toUpperCase()));
+            }
           }
         } else if (filter.value) {
           lst = _.filter(
             lst,
-            x => x.value.toUpperCase().includes(filter.value.toUpperCase())
-              || x.userName.toUpperCase().includes(filter.value.toUpperCase())
-              || x.type.toUpperCase().includes(filter.value.toUpperCase()),
+            x =>
+              x.value.toUpperCase().includes(filter.value.toUpperCase()) ||
+              x.userName.toUpperCase().includes(filter.value.toUpperCase()) ||
+              x.type.toUpperCase().includes(filter.value.toUpperCase())
           );
         }
       }
       return lst;
-    },
+    }
   },
   actions: {
     getPropertySearchLogs({ commit }) {
       axios
-        .get('/api/searchLog')
-        .then(result => commit('updateSearch', result.data))
+        .get("/api/searchLog")
+        .then(result => commit("updateSearch", result.data))
         .catch(console.error);
     },
     clearFilter({ commit }) {
-      commit('onClearFilter');
-    },
-  },
+      commit("onClearFilter");
+    }
+  }
 };

src/store/modules/misc/carousel.js

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

src/store/modules/processFlow/bid.js

-import axios from 'axios';
+import axios from "axios";
+import log from "../../../assets/Log";
 
 export default {
   namespaced: true,
   state: {
     bidItem: {},
-    bidItems: [],
+    bidItems: []
   },
   mutations: {
     setBid(state, bid) {
     updateBidList(state, bid) {
       state.bidItems.find(item => item.id === bid.id).status = bid.status;
       console.log(JSON.stringify(bid));
-    },
+    }
   },
   getters: {},
   actions: {
     getBid({ commit }, id) {
       axios
         .get(`/api/bid/${id}`)
-        .then(result => commit('addToBids', result.data))
+        .then(result => commit("addToBids", result.data))
         .catch(console.error);
     },
     getBids({ commit }) {
       axios
-        .get('/api/bid/GetBids/hjsdhj')
-        .then(result => commit('setBids', result.data))
+        .get("/api/bid/GetBids/All")
+        .then(result => commit("setBids", result.data))
         .catch(console.error);
     },
     saveBid({ commit }, item) {
+      if (log.isLoggedIn()) {
+        item.userId = log.getUser().id;
+      }
+      console.log(JSON.stringify(item));
       axios
-        .post('/api/bid', item)
-        .then(result => commit('setBid', result.data))
+        .post("/api/bid", item)
+        .then(result => commit("setBid", result.data))
         .catch(console.error);
     },
     updateBid({ commit }, item) {
       axios
-        .put('/api/bid', item)
-        .then(result => commit('setBid', item))
+        .put("/api/bid", item)
+        .then(result => commit("setBid", item))
         .catch(console.error);
     },
     acceptBid({ commit }, id) {
       axios
         .put(`/api/bid/AcceptBid/${id}`)
-        .then(result => commit('updateBidList', result.data))
+        .then(result => commit("updateBidList", result.data))
         .catch(console.error);
     },
     declineBid({ commit }, item) {
       axios
-        .put('/api/bid/DeclineBid', item)
-        .then(result => commit('updateBidList', result.data))
+        .put("/api/bid/DeclineBid", item)
+        .then(result => commit("updateBidList", result.data))
         .catch(console.error);
-    },
-  },
+    }
+  }
 };

src/store/modules/property/propertySearch.js

 /* eslint-disable valid-typeof */
 /* eslint-disable max-len */
 /* eslint-disable indent */
-import axios from 'axios';
-import _ from 'lodash';
+import axios from "axios";
+import _ from "lodash";
+import log from "../../../assets/Log";
 
 export default {
   namespaced: true,
   state: {
     propertySearch: {
-      userName: '',
-      salesType: 'Sale',
-      propertyUsageType: 'All',
-      propertyType: 'All',
-      province: 'All',
-      city: 'All',
-      suburb: 'All',
+      userName: "",
+      salesType: "Sale",
+      propertyUsageType: "All",
+      propertyType: "All",
+      province: "All",
+      city: "All",
+      suburb: "All",
       minPrice: 0,
       maxPrice: 0,
       availableFrom: undefined,
-      propertyId: 0,
+      propertyId: 0
     },
     properties: [],
     latestProperties: [],
     suburbs: [],
-    searchText: '',
+    searchText: "",
     suburbList: [],
-    resultsShowing: false,
+    resultsShowing: false
   },
   mutations: {
     updateSearch(state, propertySearch) {
       state.propertySearch = search;
     },
     onClearFilter(state, filter) {
-      if (filter === 'availableFrom') {
+      if (filter === "availableFrom") {
         state.propertySearch[filter] = undefined;
       } else {
-        state.propertySearch[filter] = 'All';
+        state.propertySearch[filter] = "All";
       }
     },
     setSuburbs(state, items) {
     },
     setResultsShowing(state, value) {
       state.resultsShowing = value;
-    },
+    }
   },
   getters: {
-    filterSuburbs: (state) => {
+    filterSuburbs: state => {
       let subs = state.suburbs;
       if (state.searchText) {
         subs = _.filter(subs, s => s.display.contains(state.searchText));
       }
       return subs;
-    },
+    }
   },
   actions: {
     clearFilter({ commit }, filter) {
-      commit('onClearFilter', filter);
+      commit("onClearFilter", filter);
     },
     searchProperties({ commit }, item) {
-      if (item.keyword === '') {
-        item.keyword = 'All';
+      if (item.keyword === "") {
+        item.keyword = "All";
       }
-      if (item.userName === '') {
-        item.userName = 'Unknown';
+      if (log.isLoggedIn()) {
+        item.userName = log.getUser().username;
+      } else if (item.userName === "") {
+        item.userName = "Unknown";
       }
-      if (item.suburb === '') {
-        item.suburb = 'All';
+      if (item.suburb === "") {
+        item.suburb = "All";
       }
-      if (item.city === '') {
-        item.city = 'All';
+      if (item.city === "") {
+        item.city = "All";
       }
-      if (item.province === '') {
-        item.province = 'All';
+      if (item.province === "") {
+        item.province = "All";
       }
       axios
         .get(
-          `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`,
+          `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`
         )
-        .then(result => commit('updateSearch', result.data))
+        .then(result => commit("updateSearch", result.data))
         .catch(console.error);
     },
     searchLatestProperties({ commit }) {
       axios
-        .get('/api/property/latestProperties')
-        .then(response => commit('setLatestProperties', response.data))
+        .get("/api/property/latestProperties")
+        .then(response => commit("setLatestProperties", response.data))
         .catch(console.error);
     },
     getSuburbs({ commit }) {
       axios
-        .get('/api/suburb/GetSearchList')
-        .then(response => commit('setSuburbs', response.data))
+        .get("/api/suburb/GetSearchList")
+        .then(response => commit("setSuburbs", response.data))
         .catch(console.error);
     },
     applyFilter({ commit }, value) {
-      commit('setFilter', { value });
+      commit("setFilter", { value });
     },
     updateResultsShowing({ commit }, value) {
-      commit('setResultsShowing', value);
-    },
-  },
+      commit("setResultsShowing", value);
+    }
+  }
 };