Clean up of search. added property type & keywords search

package-lock.json

       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
       "dev": true
     },
+    "trix": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/trix/-/trix-1.2.0.tgz",
+      "integrity": "sha512-gJ7edoWzcnc9DBjsgeGkmotVpyVhFQTlSOmUYjwFn71NlGixAhNgsu8pVIq/jkIkbk6om0PSetc9cRJm+qU3+A=="
+    },
     "true-case-path": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-trix": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-trix/-/vue-trix-1.0.0.tgz",
+      "integrity": "sha512-rLt2kJurCGhdw3ovsGLuhCxjvASFijkyXXd8QsuPFZ7TGXQ+8xN7buIxXNGXne0r7es81Mks0+/E5IdPCN8zXQ==",
+      "requires": {
+        "trix": "^1.1.1"
+      }
+    },
     "vuetify": {
       "version": "1.5.16",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.16.tgz",

package.json

     "vue": "^2.6.10",
     "vue-eva-icons": "^1.1.1",
     "vue-router": "^3.0.7",
+    "vue-trix": "^1.0.0",
     "vuetify": "^1.5.5",
     "vuex": "^3.1.1"
   },

src/components/property/propertyPage.vue

     <section class="property-single nav-arrow-b">
       <div class="container">
         <div class="row">
-          <lightBox :thumbnails="propertyImages" :largeImages="propertyImages" class="lightBox" />
+          <lightBox
+            :thumbnails="propertyImages"
+            :largeImages="propertyImages"
+            :caption="false"
+            class="lightBox"
+          />
         </div>
         <div class="row">
           <div class="col-sm-12">
                 <div class="row">
                   <div class="col-sm-12">
                     <div class="title-box-d">
-                      <h3 class="title-d">property Description</h3>
+                      <h3 class="title-d">Property Description</h3>
                     </div>
                   </div>
                 </div>
                   <div class="summary-list">
                     <ul class="list">
                       <li class="d-flex justify-content-between">
-                        <strong>property ID:</strong>
+                        <strong>Property ID:</strong>
                         <span>{{ property.id }}</span>
                       </li>
                       <li class="d-flex justify-content-between">

src/components/property/propertySearchFields.vue

           <option value="Rent">Rent</option>
         </select>
       </div>
+      <div class="form-group" v-if="propertyType === 'Residential'">
+        <label for="city">Property Type</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="forSelector"
+          v-model="selectedPropertyTypeRes"
+          @change="PropertyTypeSelected"
+        >
+          <option>All</option>
+          <option
+            v-for="(propertyType, i) in propertyTypesRes"
+            :key="i"
+          >{{ propertyType.description }}</option>
+        </select>
+      </div>
+      <div v-else class="form-group">
+        <label for="city">Property Type</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="forSelector"
+          v-model="selectedPropertyTypeCom"
+          @change="PropertyTypeSelected"
+        >
+          <option>All</option>
+          <option
+            v-for="(propertyType, i) in propertyTypesCom"
+            :key="i"
+          >{{ propertyType.description }}</option>
+        </select>
+      </div>
       <div class="form-group">
         <label for="city">Provice</label>
         <select
 import { mapState, mapActions } from 'vuex';
 
 export default {
+  props: {
+    propertyType: String,
+  },
   data() {
     return {
       selectedType: 'Sale',
       selectedProvince: 'All',
       selectedCity: 'All',
       selectedSuburb: 'All',
+      selectedPropertyTypeRes: 'All',
+      selectedPropertyTypeCom: 'All',
     };
   },
   mounted() {
     this.getProvince();
     this.$emit('TypeSelectedUpdated', this.selectedType);
+    this.getPropertyTypesRes();
+    this.getPropertyTypesCom();
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+    ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
   },
   methods: {
     ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
     TypeSelected(item) {
       this.$emit('TypeSelectedUpdated', item.target.value);
     },
+    PropertyTypeSelected(item) {
+      this.$emit('PropertyTypeSelectedUpdated', item.target.value);
+    },
     ProvinceSelected(item) {
       if (item.target.value !== 'All') {
         this.getCities(Object.assign({}, { province: this.selectedProvince }));

src/components/property/propertySearchPage.vue

     <br />
     <div>
       <propertyCard
-        v-if="Properties.length > 0"
+        v-if="properties.length > 0"
         name="propertyholder"
-        :properties="Properties"
+        :properties="properties"
         :key="propertysearch"
       />
-      <div v-if="Properties.length === 0">
+      <div v-if="properties.length === 0">
         <img src="../../../public/img/no-homes.gif" />
         <br />
         <br />
   </div>
 </template>
 <script>
+import { mkdir } from 'fs';
+import { mapState, mapActions } from 'vuex';
 import propertyCard from './propertyCard.vue';
 
 export default {
   },
   data() {
     return {
-      Properties: [],
       type: '',
       propertyType: '',
       propertyTypeparam: '',
       province: '',
       city: '',
       suburb: '',
+      proptype: '',
+      keyword: '',
     };
   },
+  methods: {
+    ...mapActions('property', [
+      'searchPropertiesParams',
+      'searchPropertiesKeyword',
+    ]),
+  },
   computed: {
+    ...mapState('property', ['properties']),
     ParamsChanged() {
       this.propertyTypeparam = this.$route.params.propertyType;
       this.type = this.$route.query.type;
       this.province = this.$route.query.province;
       this.city = this.$route.query.city;
       this.suburb = this.$route.query.suburb;
+      this.proptype = this.$route.query.propType;
+      this.keyword = this.$route.query.keyword;
 
       if (typeof this.propertyType === 'undefined') {
         this.propertyType = this.propertyTypeparam;
       if (this.suburb === '') {
         this.suburb = 'undefined';
       }
-
-      const axios = require('axios');
-      axios
-        .get(
-          `http://localhost:57260/Property/Property/Search/${this.type}/${this.propertyType}/${this.province}/${this.city}/${this.suburb}`,
-        )
-        .then(response => (this.Properties = response.data));
+      if (this.proptype === '') {
+        this.propType = 'undefined';
+      }
+      if (typeof this.keyword === 'undefined' || this.keyword === '') {
+        this.searchPropertiesParams(
+          Object.assign(
+            {},
+            {
+              type: this.type,
+              propertyType: this.propertyType,
+              province: this.province,
+              city: this.city,
+              suburb: this.suburb,
+              propType: this.proptype,
+            },
+          ),
+        );
+      } else {
+        this.searchPropertiesKeyword(
+          Object.assign({}, { keyword: this.keyword }),
+        );
+      }
 
       return null;
     },

src/components/property/propertyeditPage.vue

             <div class="form-group row">
               <div class="col-md-12">
                 <label for="Property Description"></label>
-                <textarea
-                  class="form-control editor"
-                  placeholder="Property Description"
-                  name="description"
-                  v-model="property.description"
-                  id="description"
-                ></textarea>
+                <TextEditor name="description" v-model="property.description" id="description" />
                 <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import TextEditor from 'vue-trix';
 import UserField from './propertyUserField.vue';
 import ImageLoad from './propertyImage.vue';
 
-// https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
 export default {
   name: 'PropertyEdit',
   components: {
     UserField,
     ImageLoad,
+    TextEditor,
   },
   data() {
     return {

src/components/shared/lightBoxGallery.vue

 <template>
-  <div>
+  <div class="scrolling-wrapper">
     <img
       @click="lightboxEffect(index)"
       v-for="(thumbnail, index) in thumbnails"
     return {
       bg: false,
       currentImage: 0,
-      count: true,
-      caption: true,
+      count: true
     };
   },
   props: {
     thumbnails: {
       type: Array,
-      required: true,
+      required: true
     },
     largeImages: {
       type: Array,
-      required: true,
+      required: true
     },
     captions: {
       type: Array,
-      required: true,
+      required: true
     },
     thumbnailsPath: {
       type: String,
-      required: true,
+      required: true
     },
     largePath: {
       type: String,
-      required: true,
+      required: true
     },
+    caption: true
   },
   methods: {
     lightboxEffect(curr) {
       } else {
         this.currentImage = this.largeImages.length - 1;
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
     display: flex;
     justify-content: center;
     align-items: center;
-    max-width: 900px;
+    max-width: 700px;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);

src/components/shared/searchTab.vue

                 type="text"
                 class="form-control form-control-lg form-control-a"
                 placeholder="Keyword"
+                v-model="keyword"
               />
             </div>
           </div>
-          <div class="col-md-12 mb-2">
+          <div class="col-md-12">
             <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
               <li class="nav-item">
                 <a
                   class="nav-link active"
-                  id="pills-TimeShare-tab"
+                  id="pills-video-tab"
                   data-toggle="pill"
-                  href="#pills-TimeShare"
+                  href="#pills-video"
                   role="tab"
-                  aria-controls="pills-TimeShare"
+                  aria-controls="pills-video"
                   aria-selected="true"
                   v-on:click="updateType('Timeshare')"
                 >Timeshare</a>
               <li class="nav-item">
                 <a
                   class="nav-link"
-                  id="pills-Residential-tab"
+                  id="pills-plans-tab"
                   data-toggle="pill"
-                  href="#pills-Residential"
+                  href="#pills-plans"
                   role="tab"
-                  aria-controls="pills-Residential"
+                  aria-controls="pills-plans"
                   aria-selected="false"
                   v-on:click="updateType('Residential')"
                 >Residential</a>
               </li>
               <li class="nav-item">
                 <a
-                  class="nav-link active"
-                  id="pills-Commercial-tab"
+                  class="nav-link"
+                  id="pills-map-tab"
                   data-toggle="pill"
-                  href="#pills-Commercial"
+                  href="#pills-map"
                   role="tab"
-                  aria-controls="pills-Commercial"
+                  aria-controls="pills-map"
                   aria-selected="false"
                   v-on:click="updateType('Commercial')"
                 >Commercial</a>
             <div class="tab-content" id="pills-tabContent">
               <div
                 class="tab-pane fade show active"
-                id="pills-TimeShare"
+                id="pills-video"
                 role="tabpanel"
-                aria-labelledby="pills-TimeShare-tab"
-              >
-                <i>TimeShare search</i>
-              </div>
+                aria-labelledby="pills-video-tab"
+              >timeshare search</div>
               <div
-                class="tab-Residential fade"
-                id="pills-Residential"
+                class="tab-pane fade"
+                id="pills-plans"
                 role="tabpanel"
-                aria-labelledby="pills-Residential-tab"
+                aria-labelledby="pills-plans-tab"
               >
                 <propertySearch
+                  propertyType="Residential"
                   @TypeSelectedUpdated="TypeSelectedUpdated"
                   @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
                   @CitySelectedUpdated="CitySelectedUpdated"
                   @SuburbSelectedUpdated="SuburbSelectedUpdated"
+                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
                 />
               </div>
               <div
                 class="tab-pane fade"
-                id="pills-Commercial"
+                id="pills-map"
                 role="tabpanel"
-                aria-labelledby="pills-Commercial-tab"
+                aria-labelledby="pills-map-tab"
               >
-                <propertySearch />
+                <propertySearch
+                  propertyType="Commercial"
+                  @TypeSelectedUpdated="TypeSelectedUpdated"
+                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
+                  @CitySelectedUpdated="CitySelectedUpdated"
+                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
+                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
+                />
               </div>
             </div>
           </div>
           <div class="col-md-12">
             <button type="submit" class="btn btn-b" @click="Search">Search</button>
-            <!-- <router-link to="/property/search" class="btn btn-b" tag="button">Search</router-link> -->
           </div>
         </div>
       </form>
       selectedProvince: '',
       selectedCity: '',
       selectedSuburb: '',
+      selectedPropType: '',
+      keyword: '',
     };
   },
   methods: {
     TypeSelectedUpdated(item) {
       this.selectedType = item;
     },
+    PropertyTypeSelectedUpdated(item) {
+      this.selectedPropType = item;
+    },
     ProvinceSelectedUpdated(item) {
       this.selectedProvince = item;
     },
       this.selectedSuburb = item;
     },
     Search() {
-      // if (
-      //   this.selectedPropertyType === 'residential'
-      //   || this.selectedPropertyType === 'commerial'
-      // ) {
+      // need to see how to differenciate between properties and timeshare.
       this.$router.push({
         path: '/property/search',
         query: {
           province: this.selectedProvince,
           city: this.selectedCity,
           suburb: this.selectedSuburb,
+          propType: this.propertyType,
+          keyword: this.keyword,
         },
       });
-      // }
     },
   },
 };

src/store/modules/property/property.js

     property: null,
     propertyImages: [],
     propertyTypes: [],
+    propertyTypesRes: [],
+    propertyTypesCom: [],
     propertyOverviewFields: [],
     propertyFields: [],
+    properties: [],
   },
   mutations: {
     setProperty(state, property) {
     setPropertyTypes(state, types) {
       state.propertyTypes = types;
     },
+    setPropertyTypesRes(state, types) {
+      state.propertyTypesRes = types;
+    },
+    setPropertyTypesCom(state, types) {
+      state.propertyTypesCom = types;
+    },
     setPropertyOverviewFields(state, fields) {
       state.propertyOverviewFields = fields;
     },
     updateCurrentProperty(state, property) {
       state.property = property;
     },
+    updateSearch(state, propertySearch) {
+      state.properties = propertySearch;
+    },
   },
   getters: {},
   actions: {
         .then(result => commit('setPropertyTypes', result.data))
         .catch(console.error);
     },
+    getPropertyTypesRes({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/PropertyType/type/Residential')
+        .then(result => commit('setPropertyTypesRes', result.data))
+        .catch(console.error);
+    },
+    getPropertyTypesCom({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/PropertyType/type/Commercial')
+        .then(result => commit('setPropertyTypesCom', result.data))
+        .catch(console.error);
+    },
     getPropertyOverviewFields({ commit }) {
       axios
         .get('http://localhost:57260/Property/PropertyFields/Property Overview')
         .then(result => commit('updateCurrentProperty', result.data))
         .catch(console.error);
     },
+    searchPropertiesParams({ commit }, item) {
+      axios
+        .get(
+          `http://localhost:57260/Property/Property/Search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
+        )
+        .then(response => commit('updateSearch', response.data))
+        .catch(console.error);
+    },
+    searchPropertiesKeyword({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/Property/Search/Keyword/${item.keyword}`)
+        .then(response => commit('updateSearch', response.data))
+        .catch(console.error);
+    },
   },
 };