PropertySearch + Search logs

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",
         "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",

package.json

     "v-file-upload": "^3.1.7",
     "vue": "^2.6.10",
     "vue-eva-icons": "^1.1.1",
+    "vue-excel-export": "^0.1.3",
     "vue-router": "^3.0.7",
     "vue-trix": "^1.0.0",
     "vuetify": "^1.5.5",

src/components/admin/logs/SearchLogs.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <!-- <section class="intro-single"> -->
       <div class="container">
         <br />
         <br />
           </div>
         </div>
       </div>
-      <!-- </section> -->
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-1">
+          <label>Filter</label>
+        </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>
+          </select>
+        </div>
+        <div class="col-md-8 text-left">
+          <div class="input-group mb-8">
+            <input class="form-control" type="text" @change="filter()" v-model="filter.value" />
+            <div class="input-group-append" @click="clearFilter()">
+              <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+                <b>X</b>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="form-group row">
+        <div class="col-md-12" align="right">
+          <export-excel
+            class="btn btn-b-n"
+            :data="list"
+            :fields="exportFields"
+            type="csv"
+            worksheet="My Worksheet"
+            name="SearchLog.csv"
+          >
+            Download
+            <eva-icon name="download"></eva-icon>
+          </export-excel>
+        </div>
+      </div>
     </div>
     <div class="container">
       <table class="table table-bordered">
             <th>Date</th>
             <th>Time</th>
             <th>User</th>
-            <th>Keyword</th>
-            <th>Sales Type</th>
-            <th>Property Usage Type</th>
-            <th>Property Type</th>
-            <th>Province</th>
-            <th>City</th>
-            <th>Suburb</th>
+            <th>Type</th>
+            <th>Field</th>
+            <th>Value</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(item, i) in propertySearch" :key="i">
+          <tr v-for="(item, i) in list" :key="i">
             <td>{{ formatDate(item.date) }}</td>
             <td>{{ formatTime(item.date) }}</td>
-            <td v-if="item.user">{{ item.user }}</td>
-            <td v-else>No User</td>
-            <td>{{ item.keyword === 'All' ? '' : item.keyword }}</td>
-            <td>{{ item.salesType === 'All' ? '' : item.salesType }}</td>
-            <td>{{ item.propertyUsageType === 'All' ? '' : item.propertyUsageType }}</td>
-            <td>{{ item.propertyType === 'All' ? '' : item.propertyType }}</td>
-            <td>{{ item.province === 'All' ? '' : item.province }}</td>
-            <td>{{ item.city === 'All' ? '' : item.city }}</td>
-            <td>{{ item.suburb === 'All' ? '' : item.suburb }}</td>
+            <td>{{ item.userName }}</td>
+            <td>{{ item.type }}</td>
+            <td>{{ item.property }}</td>
+            <td>{{ item.value }}</td>
           </tr>
         </tbody>
       </table>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import moment from 'moment';
 import Vue from 'vue';
 import excel from 'vue-excel-export';
 export default {
   name: 'searchLog',
   data() {
-    return {};
+    return {
+      exportFields: {
+        Date: 'date',
+        User: 'userName',
+        Type: 'type',
+        Field: 'property',
+        Value: 'value',
+      },
+    };
   },
   methods: {
-    ...mapActions('searchLog', ['getPropertySearchLogs']),
+    ...mapActions('searchLog', ['getPropertySearchLogs', 'clearFilter']),
     formatDate(value) {
       return moment(String(value)).format('YYYY/MM/DD');
     },
     this.getPropertySearchLogs();
   },
   computed: {
-    ...mapState('searchLog', ['propertySearch']),
+    ...mapState('searchLog', ['list', 'fields', 'filter']),
+    ...mapGetters({
+      list: 'searchLog/filterList',
+    }),
   },
 };
 </script>

src/components/property/propertySearchFields.vue

             </span>
           </div>
           <select
-            class="form-control form-control-lg form-control-a"
+            class="form-control"
             id="forSelector"
             v-model="propertySearch.salesType"
             @change="salesTypeSelected"
             </span>
           </div>
           <select
-            class="form-control form-control-lg form-control-a"
+            class="form-control"
             id="forSelector"
             v-model="resType"
             @change="PropertyTypeSelected"
             </span>
           </div>
           <select
-            class="form-control form-control-lg form-control-a"
+            class="form-control"
             id="forSelector"
             v-model="comType"
             @change="PropertyTypeSelected"
             </span>
           </div>
           <select
-            class="form-control form-control-lg form-control-a"
+            class="form-control"
             id="provinceselector"
             @change="ProvinceSelected"
             v-model="propertySearch.province"
             </span>
           </div>
           <select
-            class="form-control form-control-lg form-control-a"
+            class="form-control"
             id="cityselector"
             @change="CitySelected"
             v-model="propertySearch.city"
             </span>
           </div>
           <select
-            class="form-control form-control-lg form-control-a"
+            class="form-control"
             id="suburbselector"
             v-model="propertySearch.suburb"
             @change="SuburbSeleted"
         </div>
       </div>
     </div>
+    <div class="container text-left">
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-6 text-left">
+            <label>Minimum Price</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>R</b>
+                </span>
+              </div>
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="minPrice"
+                name="minPrice"
+                v-model="propertySearch.minPrice"
+              />
+              <div class="input-group-append" @click="clearFilter('minPrice')">
+                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+                  <b>X</b>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6 text-left">
+            <label>Maximum Price</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>R</b>
+                </span>
+              </div>
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="maxPrice"
+                name="maxPrice"
+                v-model="propertySearch.maxPrice"
+              />
+              <div class="input-group-append" @click="clearFilter('maxPrice')">
+                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+                  <b>X</b>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
     this.getProvince();
     this.getPropertyTypesRes();
     this.getPropertyTypesCom();
-    this.getPropertySearchObject();
     setTimeout(() => {
       this.propertySearch.propertyUsageType = this.propertyType;
     }, 100);
   methods: {
     ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
     ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
-    ...mapActions('propertySearch', ['getPropertySearchObject', 'clearFilter']),
+    ...mapActions('propertySearch', ['clearFilter']),
     clearResType() {
       this.clearFilter('propertyType');
       this.resType = 'All';

src/components/property/propertySearchPage.vue

   },
   data() {
     return {
-      type: '',
-      propertyType: '',
-      propertyTypeparam: '',
-      province: '',
-      city: '',
-      suburb: '',
-      proptype: '',
-      keyword: '',
       propertySearch: {
-        userID: 0,
-        keyword: '',
+        userName: '',
         salesType: 'All',
         propertyUsageType: 'All',
         propertyType: 'All',
         province: 'All',
         city: 'All',
         suburb: 'All',
+        minPrice: 0,
+        maxPrice: 0,
       },
     };
   },
   computed: {
     ...mapState('propertySearch', ['properties']),
     ParamsChanged() {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.propertySearch = {
-        userID: 0,
-        keyword: '',
-        salesType: 'All',
-        propertyUsageType: 'All',
-        propertyType: 'All',
-        province: 'All',
-        city: 'All',
-        suburb: 'All',
-      };
-
       if (Object.keys(this.$route.params).length > 0) {
         if (this.$route.params.propertyUsageType) {
           // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.propertySearch.propertyUsageType = this.$route.params.propertyUsageType;
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+          this.propertySearch.keyword = 'All';
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+          this.propertySearch.salesType = 'All';
         }
       }
       if (Object.keys(this.$route.query).length > 0) {

src/components/property/propertyeditPage.vue

       <div class="col-sm-12">
         <div class="tobuy-img-box">
           <img
+            v-if="propertyType === 'Commercial'"
+            src="img/Commercial-Property.jpg"
+            alt="Timeshare To Buy"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
+          <img
+            v-else
             src="img/Listing3.2.jpg"
             alt="Timeshare To Buy"
             class="img-fluid"
 
       setTimeout(
         () => this.$router.push({
-          path: '/property/search',
-          query: {
-            salesType: this.salesType,
-            propertyUsageType: this.propertyType,
-          },
-        }),
+            path: '/property/search',
+            query: {
+              salesType: this.salesType,
+              propertyUsageType: this.propertyType,
+            },
+          }),
         3000,
       );
     },

src/components/shared/searchTab.vue

           <div class="col-md-12">
             <div class="form-group" style="text-align:left">
               <label for="Type">Keyword</label>
-              <input
-                type="text"
-                class="form-control form-control-a"
-                placeholder="Keyword"
-                v-model="keyword"
-              />
+              <input type="text" class="form-control" placeholder="Keyword" v-model="keyword" />
             </div>
           </div>
           <div class="col-md-12">
                 role="tabpanel"
                 aria-labelledby="pills-map-tab"
               >
-                <propertySearch propertyType="Commercial" />
+                <propertySearch propertyType="Commercial" @updateSearch="updateSearch" />
               </div>
             </div>
           </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
 import propertySearch from '../property/propertySearchFields.vue';
 import timeshareSearch from '../timeshare/searchTimeshare.vue';
 
       selectedPropertyType: 'timeshare',
       keyword: '',
       propertySearch: {
-        userID: 0,
-        keyword: '',
+        userName: '',
         salesType: 'Sale',
         propertyUsageType: 'All',
         propertyType: 'All',
         province: 'All',
         city: 'All',
         suburb: 'All',
+        minPrice: 0,
+        maxPrice: 0,
       },
     };
   },
-  computed: {},
   methods: {
     updateType(item) {
       this.selectedPropertyType = item;
       if (this.selectedPropertyType === 'timeshare') {
         this.$router.push('/timeshare/search/');
       } else {
+        // this.$router.push('/property/search');
         this.$router.push({
           path: '/property/search',
           query: this.propertySearch,
         });
-        // this.$router.push('/property/search');
       }
     },
   },

src/store/modules/logs/searchLog.js

-// api/searchLog/property
 import axios from 'axios';
+import _ from 'lodash';
 
 export default {
   namespaced: true,
   state: {
-    propertySearch: {},
+    list: [],
+    fields: [],
+    filter: {
+      by: undefined,
+      value: undefined,
+    },
   },
   mutations: {
     updateSearch(state, data) {
-      state.propertySearch = [];
-      state.propertySearch = data;
+      state.list = [];
+      state.fields = [];
+      state.list = data;
+      data.forEach((item) => {
+        state.fields.push(item.property);
+      });
+      state.fields = state.fields.filter((x, i, a) => a.indexOf(x) === i);
+    },
+    onClearFilter(state) {
+      state.filter = {
+        by: undefined,
+        value: undefined,
+      };
+    },
+  },
+  getters: {
+    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()));
+          }
+        } 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()),
+          );
+        }
+      }
+      return lst;
     },
   },
-  getters: {},
   actions: {
     getPropertySearchLogs({ commit }) {
       axios
-        .get('/api/searchLog/property')
+        .get('/api/searchLog')
         .then(result => commit('updateSearch', result.data))
         .catch(console.error);
     },
+    clearFilter({ commit }) {
+      commit('onClearFilter');
+    },
   },
 };

src/store/modules/property/propertySearch.js

+/* eslint-disable max-len */
+/* eslint-disable indent */
 import axios from 'axios';
+import _ from 'lodash';
 
 export default {
   namespaced: true,
   state: {
     propertySearch: {
-      userID: 0,
-      keyword: '',
+      userName: '',
       salesType: 'Sale',
       propertyUsageType: 'All',
       propertyType: 'All',
       province: 'All',
       city: 'All',
       suburb: 'All',
+      minPrice: 0,
+      maxPrice: 0,
     },
     properties: [],
     latestProperties: [],
       state.propertySearch[filter] = 'All';
     },
   },
-  getters: {},
+  // getters: {
+  //   filterProperties: (state) => {
+  //     let list = state.properties;
+  //     const { propertySearch } = state;
+  //     if (propertySearch) {
+  //       if (propertySearch.salesType === 'Sale') {
+  //         list = _.filter(list, x => x.isSale);
+  //       } else {
+  //         list = _.filter(list, x => !x.isSale);
+  //       }
+  //       if (propertySearch.propertyUsageType && propertySearch.propertyUsageType !== 'All') {
+  //         list = _.filter(list, x => x.propertyUsageType
+  //             .toUpperCase()
+  //             // eslint-disable-next-line comma-dangle
+  //             .includes(propertySearch.propertyUsageType.toUpperCase()));
+  //       }
+  //       if (propertySearch.propertyType && propertySearch.propertyType !== 'All') {
+  //         list = _.filter(list, x => x.propertyType
+  //             .toUpperCase()
+  //             // eslint-disable-next-line comma-dangle
+  //             .includes(propertySearch.propertyType.toUpperCase()));
+  //       }
+  //       if (propertySearch.province && propertySearch.province !== 'All') {
+  //         list = _.filter(list, x => x.province
+  //             .toUpperCase()
+  //             // eslint-disable-next-line comma-dangle
+  //             .includes(propertySearch.province.toUpperCase()));
+  //       }
+  //       if (propertySearch.city && propertySearch.city !== 'All') {
+  //         list = _.filter(list, x => x.city
+  //             .toUpperCase()
+  //             // eslint-disable-next-line comma-dangle
+  //             .includes(propertySearch.city.toUpperCase()));
+  //       }
+  //       if (propertySearch.suburb && propertySearch.suburb !== 'All') {
+  //         list = _.filter(list, x => x.suburb
+  //             .toUpperCase()
+  //             // eslint-disable-next-line comma-dangle
+  //             .includes(propertySearch.suburb.toUpperCase()));
+  //       }
+  //       if (propertySearch.suburb && propertySearch.suburb !== 'All') {
+  //         list = _.filter(list, x => x.suburb
+  //             .toUpperCase()
+  //             // eslint-disable-next-line comma-dangle
+  //             .includes(propertySearch.suburb.toUpperCase()));
+  //       }
+  //       if (propertySearch.minPrice) {
+  //         list = _.filter(list, x => x.price >= propertySearch.minPrice);
+  //       }
+  //       if (propertySearch.maxPrice) {
+  //         list = _.filter(list, x => x.price <= propertySearch.maxPrice);
+  //       }
+  //     }
+  //     return list;
+  //   },
+  // },
   actions: {
     clearFilter({ commit }, filter) {
       commit('onClearFilter', filter);
     },
     getPropertySearchObject({ commit }) {
       const search = {
-        userID: 0,
-        keyword: 'All',
+        userName: '',
         salesType: 'Sale',
         propertyUsageType: 'All',
         propertyType: 'All',
         province: 'All',
         city: 'All',
         suburb: 'All',
+        minPrice: 0,
+        maxPrice: 0,
       };
       commit('setPropertySearch', search);
     },
       if (item.keyword === '') {
         item.keyword = 'All';
       }
+      if (item.userName === '') {
+        item.userName = 'Unknown';
+      }
       axios
         .get(
-          `/api/Property/Search/${item.userID}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}`,
+          `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}`,
         )
         .then(result => commit('updateSearch', result.data))
         .catch(console.error);