New files for Carousel & prop

src/components/admin/misc/carouselSearch.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <br />
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Search {{ name }}</h1>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="container">
+            <ListView
+              v-if="name === 'Timeshare'"
+              :items="items"
+              :editable="true"
+              @onEdit="onEdit"
+              :editLabel="'Select'"
+            />
+            <ListView
+              v-else
+              :items="properties"
+              :editable="true"
+              @onEdit="onEdit"
+              :editLabel="'Select'"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import ListView from '../../shared/listView.vue';
+import Log from '../../../assets/Log';
+
+export default {
+  name: 'CarouselSearch',
+  props: {
+    name: String,
+  },
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      user: Log.getUser(),
+    };
+  },
+  mounted() {
+    if (this.name === 'Timeshare') {
+      this.getItems(this.user.id);
+    } else {
+      this.getProperties(
+        Object.assign(
+          {},
+          {
+            propertyType: 'Admin',
+            user: this.user.id,
+          },
+        ),
+      );
+    }
+  },
+  computed: {
+    ...mapState('myWeeks', ['items']),
+    ...mapState('propertyList', ['properties']),
+    // eslint-disable-next-line vue/return-in-computed-property
+    nameChanged() {
+      if (this.name === 'Timeshare') {
+        this.getItems(this.user.id);
+      } else {
+        this.getProperties(
+          Object.assign(
+            {},
+            {
+              propertyType: 'Admin',
+              user: this.user.id,
+            },
+          ),
+        );
+      }
+    },
+  },
+  methods: {
+    ...mapActions('myWeeks', ['getItems']),
+    ...mapActions('propertyList', ['getProperties']),
+    onEdit(item) {
+      this.$emit('onSelected', item);
+    },
+  },
+  watch: {
+    nameChanged() {
+      return null;
+    },
+  },
+};
+</script>

src/components/property/propertySearchResults.vue

@@ -0,0 +1,127 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="container">
+    <br />
+    <div class="container col-md-12">
+      <div class="col-sm-12">
+        <div class="about-img-box">
+          <img
+            v-if="propertySearch.propertyUsageType === 'Residential'"
+            src="img/Pretoria-South-Africa.jpg"
+            alt="Property Listing"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
+          <img
+            v-else
+            src="img/Johannesburg-south-africa-1.jpg"
+            alt="Property Listing"
+            class="img-fluid"
+            style="width:800px;height:400px; border-radius:10px"
+          />
+        </div>
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
+          <h3 class="sinse-title">Property Listing</h3>
+        </div>
+      </div>
+      <br />
+      <div>
+        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
+        <div v-if="properties.length === 0">
+          <img src="../../../public/img/no-homes.png" />
+          <br />
+          <br />
+          <p>Sorry no listing where found matching your search</p>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+import propertyCard from './propertyCard.vue';
+
+export default {
+  name: 'propertysearch',
+  components: {
+    propertyCard,
+  },
+  data() {
+    return {
+      propertySearch: {
+        userName: '',
+        salesType: 'All',
+        propertyUsageType: 'All',
+        propertyType: 'All',
+        province: 'All',
+        city: 'All',
+        suburb: 'All',
+        minPrice: 0,
+        maxPrice: 0,
+      },
+    };
+  },
+  mounted() {
+    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
+      this.propertySearch.propertyUsageType = 'Residential';
+    }
+    this.searchProperties(this.propertySearch);
+  },
+  methods: {
+    ...mapActions('propertySearch', ['searchProperties']),
+    SetType(item) {
+      this.propertySearch.propertyUsageType = item;
+    },
+  },
+  computed: {
+    ...mapState('propertySearch', ['properties', 'propertySearch']),
+    ...mapState('authentication', ['username']),
+    // ParamsChanged() {
+    //   if (Object.keys(this.$route.query).length === 0) {
+    //     if (this.propertySearch.propertyUsageType === 'All') {
+    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //       this.propertySearch.propertyUsageType = 'Residential';
+    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //       this.propertySearch.keyword = 'All';
+    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //       this.propertySearch.salesType = 'All';
+    //     }
+    //   }
+    //   if (Object.keys(this.$route.query).length > 0) {
+    //     if (Object.keys(this.$route.query).length > 2) {
+    //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //       this.propertySearch = this.$route.query;
+    //     } else {
+    //       if (this.$route.query.salesType) {
+    //         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //         this.propertySearch.salesType = this.$route.query.salesType;
+    //       }
+    //       if (this.$route.query.propertyUsageType) {
+    //         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //         this.propertySearch.propertyUsageType = this.$route.query.propertyUsageType;
+    //       }
+    //     }
+    //   }
+    //   if (this.propertySearch.keyword === '') {
+    //     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //     this.propertySearch.keyword = 'All';
+    //   }
+    //   if (this.username) {
+    //     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //     this.propertySearch.userName = this.username;
+    //   } else {
+    //     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    //     this.propertySearch.userName = 'Unknown';
+    //   }
+    //   this.searchProperties(this.propertySearch);
+    //   return null;
+    // },
+  },
+  //   watch: {
+  //     ParamsChanged() {
+  //       return null;
+  //     },
+  //   },
+};
+</script>