Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

src/components/property/propertyCard.vue

 <template>
-  <div class="col-md-4">
-    <div class="card-box-a card-shadow">
-      <div class="img-box-a">
-        <img :src="currentProperty.displayImage" alt class="img-a img-fluid" />
-      </div>
-      <div class="card-overlay">
-        <div class="card-overlay-a-content">
-          <div class="card-header-a">
-            <h3 class="card-title-a">
-              <router-link
-                :to="`/property/property/${currentProperty.id}`"
-                class="link-a"
-              >{{ currentProperty.shortDescription }}</router-link>
-            </h3>
-          </div>
-          <div class="card-body-a">
-            <div class="price-box d-flex">
-              <span
-                v-if="currentProperty.isSale"
-                class="price-a"
-              >sale | {{ currentProperty.displayPrice }}</span>
-              <span
-                v-if="!currentProperty.isSale"
-                class="price-a"
-              >rent | {{ currentProperty.displayPrice }}</span>
+  <div class="form-group row">
+    <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
+      <div class="card-box-a card-shadow">
+        <div class="img-box-a">
+          <img
+            :src="currentProperty.displayImage"
+            alt
+            class="img-a img-fluid"
+            style="height:466px; width:350px; object-fit: cover;"
+          />
+        </div>
+        <div class="card-overlay">
+          <div class="card-overlay-a-content">
+            <div class="card-header-a">
+              <h4 class="card-title-a">
+                <router-link
+                  :to="`/property/property/${currentProperty.id}`"
+                  class="link-a"
+                >{{ currentProperty.shortDescription }}</router-link>
+              </h4>
+            </div>
+            <div class="card-body-a">
+              <div class="price-box d-flex">
+                <span
+                  v-if="currentProperty.isSale"
+                  class="price-a"
+                >sale | {{ currentProperty.displayPrice }}</span>
+                <span
+                  v-if="!currentProperty.isSale"
+                  class="price-a"
+                >rent | {{ currentProperty.displayPrice }}</span>
+              </div>
+              <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
+                Click here to view
+                <span class="ion-ios-arrow-forward"></span>
+              </router-link>
+            </div>
+            <div class="card-footer-a" v-if="currentProperty.showFooter">
+              <ul class="card-info d-flex justify-content-around">
+                <li v-if="currentProperty.area !== null">
+                  <h4 class="card-info-title">Area</h4>
+                  <span v-html="currentProperty.area"></span>
+                </li>
+                <li v-if="currentProperty.beds !== null">
+                  <h4 class="card-info-title">Beds</h4>
+                  <span>{{ currentProperty.beds }}</span>
+                </li>
+                <li v-if="currentProperty.baths !== null">
+                  <h4 class="card-info-title">Baths</h4>
+                  <span>{{ currentProperty.baths }}</span>
+                </li>
+                <li v-if="currentProperty.garages !== null">
+                  <h4 class="card-info-title">Garages</h4>
+                  <span>{{ currentProperty.garages }}</span>
+                </li>
+              </ul>
             </div>
-            <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-              Click here to view
-              <span class="ion-ios-arrow-forward"></span>
-            </router-link>
-          </div>
-          <div class="card-footer-a" v-if="currentProperty.showFooter">
-            <ul class="card-info d-flex justify-content-around">
-              <li v-if="currentProperty.area !== null">
-                <h4 class="card-info-title">Area</h4>
-                <span>{{ currentProperty.area }}</span>
-              </li>
-              <li v-if="currentProperty.beds !== null">
-                <h4 class="card-info-title">Beds</h4>
-                <span>{{ currentProperty.beds }}</span>
-              </li>
-              <li v-if="currentProperty.baths !== null">
-                <h4 class="card-info-title">Baths</h4>
-                <span>{{ currentProperty.baths }}</span>
-              </li>
-              <li v-if="currentProperty.garages !== null">
-                <h4 class="card-info-title">Garages</h4>
-                <span>{{ currentProperty.garages }}</span>
-              </li>
-            </ul>
           </div>
         </div>
       </div>
+      <br />
     </div>
-    <br />
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    currentProperty: Object,
-  },
+    properties: Object
+  }
 };
-</script>
+</script>

src/components/property/propertyImage.vue

 <template>
   <div>
     <div>
-      <label class="btn btn-a" style="width: 137px; height:58px;">
+      <label class="btn btn-b-n" style="width: 85px; height:40px;">
         Upload
         <input
           type="file"
   data() {
     return {
       images: {},
-      image: [],
+      image: []
     };
   },
 
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = (e) => {
+        reader.onload = e => {
           vm.image.push(e.target.result);
           console.log(vm.image);
         };
       this.images.splice(key, 1);
 
       if (!this.image.length) {
-        this.$refs.im.value = '';
+        this.$refs.im.value = "";
       }
-    },
-  },
+    }
+  }
 };
-</script>
+</script>

src/components/property/propertyPage.vue

           <div class="col-sm-12">
             <div id="property-single-carousel" class="owl-carousel owl-arrow gallery-property">
               <div class="carousel-item-b">
-                <img :src="propertyImages[0]" />
+                <img
+                  :src="propertyImages[0]"
+                  style="height:800px; width:1200px; object-fit: cover;"
+                />
               </div>
               <div class="carousel-item-b">
-                <img :src="propertyImages[1]" height="500" />
+                <img
+                  :src="propertyImages[1]"
+                  style="height:800px; width:1200px; object-fit: cover;"
+                />
+              </div>
+              <div class="carousel-item-b">
+                <img
+                  :src="propertyImages[2]"
+                  style="height:800px; width:1200px; object-fit: cover;"
+                />
+              </div>
+              <div class="carousel-item-b">
+                <img
+                  :src="propertyImages[3]"
+                  style="height:800px; width:1200px; object-fit: cover;"
+                />
               </div>
             </div>
             <div class="row justify-content-between">
                     <ul class="list" v-for="item in display.values">
                       <li class="d-flex justify-content-between">
                         <strong>{{ item.name }}:</strong>
-                        <span>{{ item.value }}</span>
+                        <span v-html="item.value"></span>
                       </li>
                     </ul>
                   </div>
 
 <script>
 export default {
-  name: 'Property',
+  name: "Property",
   data() {
     return {
       Property: {},
-      propertyImages: [],
+      propertyImages: []
     };
   },
-  mounted() {
-    const axios = require('axios');
+  created() {
+    const axios = require("axios");
     axios
       .get(`http://localhost:57260/Property/Property/${this.$route.params.id}`)
       .then(response => (this.Property = response.data));
 
     axios
       .get(
-        `http://localhost:57260/property/PropertyImage/getpropertyimages/${this.$route.params.id}`,
+        `http://localhost:57260/property/PropertyImage/getpropertyimages/${this.$route.params.id}`
       )
       .then(response => (this.propertyImages = response.data));
-  },
+  }
 };
 </script>

src/components/property/propertySearchPage.vue

     <div class="col-md-12">
       <h3 class="my-4">Property Listing</h3>
     </div>
-
+    <br />
+    <br />
+    <br />
     <div>
       <propertyCard
+        v-if="Properties.length > 0"
         name="propertyholder"
-        v-for="property in Properties"
-        :currentProperty="property"
-        :key="property.id"
+        :properties="Properties"
+        :key="propertysearch"
       />
+      <div v-if="Properties.length === 0">
+        <img src="../../../public/img/no-homes.gif" />
+        <br />
+        <br />
+        <p>Sorry no listing where found matching your search</p>
+      </div>
     </div>
     <br />
-    <div class="container">
+    <div class="container" v-if="propertyType === 'Residential'">
       <div class="row">
         <div class="col-md-12">
           <h1 class="my-4">About Residential Properties</h1>
           </p>
           <p>
             Wish to RENT your property?
-            <a href="./ToRent.vue#residential/torent">Click Here</a>
+            <router-link to="/property/Residential/Rental">Click Here</router-link>
+          </p>
+          <p>
+            Wish to SELL your property?
+            <router-link to="/property/Residential/Sale">Click Here</router-link>
+          </p>
+        </div>
+        <div class="col-md-4 text-center">
+          <p>
+            <img class="img-fluid" src="./../../../public/img/residential.jpg" alt="About Resale" />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="container" v-if="propertyType === 'Commercial'">
+      <div class="row">
+        <div class="col-md-12">
+          <h1 class="my-4">About Commercial Properties</h1>
+        </div>
+        <div class="col-md-6">
+          <p>
+            Commercial properties are characteristically any larger properties that
+            generate profit through leasing or rental activities. These properties
+            are typically used to conduct business and provide companies with cut-and-dry
+            leasing agreements, which keep their involvement in the maintenance of the property
+            to a minimum, so they may focus on the growth of their company.
+          </p>
+          <p>
+            Uni-Vate Properties seeks out professional, clean spaces for such companies and acts as
+            mediator between the landlord/-lady and the tenants. Uni-Vate Properties provides
+            value-adding service to clients and conducts business with a high standard
+            and integrity.
+          </p>
+          <p>
+            Wish to RENT your property?
+            <router-link to="/property/Commercial/Rental">Click Here</router-link>
           </p>
           <p>
             Wish to SELL your property?
-            <a href="./ToSell.vue#residential/tosell">Click Here</a>
+            <router-link to="/property/Commercial/Sale">Click Here</router-link>
           </p>
         </div>
         <div class="col-md-4 text-center">
           <p>
-            <img class="img-fluid" src alt="About Resale" />
+            <img class="img-fluid" src="./../../../public/img/commercial.jpg" alt="About Resale" />
           </p>
         </div>
       </div>
   </div>
 </template>
 <script>
-import propertyCard from '../property/propertyCard.vue';
+import propertyCard from "../property/propertyCard.vue";
+import { isNull } from "util";
 
 export default {
-  name: 'ResidentialSearch',
+  name: "propertysearch",
   components: {
-    propertyCard,
+    propertyCard
   },
   data() {
     return {
       Properties: [],
+      type: "",
+      propertyType: "",
+      propertyTypeparam: "",
+      province: "",
+      city: "",
+      suburb: ""
     };
   },
-  mounted() {
-    const axios = require('axios');
-    axios
-      .get('http://localhost:57260/Property/Property')
-      .then(response => (this.Properties = response.data));
+  computed: {
+    ParamsChanged() {
+      this.propertyTypeparam = this.$route.params.propertyType;
+      this.type = this.$route.query.type;
+      this.propertyType = this.$route.query.propertyType;
+      this.province = this.$route.query.province;
+      this.city = this.$route.query.city;
+      this.suburb = this.$route.query.suburb;
+
+      if (typeof this.propertyType === "undefined") {
+        this.propertyType = this.propertyTypeparam;
+      }
+
+      let search = "";
+      if (this.type !== "") {
+        search = search + "type:" + this.type;
+      }
+      if (this.propertyType !== "") {
+        search = search + "|propertyType:" + this.propertyType;
+      }
+      if (this.province !== "") {
+        search = search + "|province:" + this.province;
+      }
+      if (this.city !== "") {
+        search = search + "|city:" + this.city;
+      }
+      if (this.suburb !== "") {
+        search = search + "|suburb:" + this.suburb;
+      }
+
+      console.log(search);
+
+      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));
+    }
   },
+  watch: {
+    ParamsChanged() {
+      console.log(JSON.stringify(this.$route.query));
+    }
+  }
 };
 </script>

src/components/property/propertyeditPage.vue

 <template>
-  <div @submit.prevent="SubmitData">
+  <!-- eslint-disable max-len -->
+  <div>
     <div class="container">
       <section class="intro-single">
         <div class="container">
       </div>
       <div class="row mb-3">
         <div class="col-md-12">
-          <form
-            id="mainForm"
-            method="POST"
-            action="/to-sell"
-            accept-charset="UTF-8"
-            enctype="multipart/form-data"
-          >
+          <form id="mainForm">
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label for="Property Type"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   v-model="property.propertyTypeId"
                 >
                   <option value="0">Please Select</option>
-                  <option v-for="item in propertyTypes" :value="item.id">{{ item.description }}</option>
+                  <option
+                    v-for="item in propertyTypes"
+                    :value="item.id"
+                    :key="item.id"
+                  >{{ item.description }}</option>
                 </select>
               </div>
+              <div v-if="propertyType === 'Commercial'" class="col-md-4">
+                <label>Property Name</label>
+                <input
+                  class="form-control form-control-lg form-control-a"
+                  type="text"
+                  name="propertyName"
+                  id="propertyName"
+                  v-model="property.propertyName"
+                />
+              </div>
+              <div v-if="propertyType === 'Commercial'" class="col-md-4">
+                <label>Unit</label>
+                <input
+                  class="form-control form-control-lg form-control-a"
+                  type="text"
+                  name="unit"
+                  id="unit"
+                  v-model="property.unit"
+                />
+              </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Address Line 1</label>
+                <label for="Address Line 1"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 1"
                   name="address1"
                   id="address1"
                   v-model="property.addressLine1"
                 />
               </div>
               <div class="col-md-4">
-                <label>Address Line 2</label>
+                <label for="Address Line 2"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 2"
                   name="address2"
                   id="address2"
                   v-model="property.addressLine2"
                 />
               </div>
               <div class="col-md-4">
-                <label>Address Line 3</label>
+                <label for="Address Line 3"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 3"
                   name="address3"
                   id="address3"
                   v-model="property.addressLine3"
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Province</label>
+                <label for="Province"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   @change="ProvinceSelected"
                   v-model="property.provinceId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select Province</option>
                   <option
                     v-for="province in provinces"
                     :value="province.id"
+                    :key="province.id"
                   >{{ province.description }}</option>
                 </select>
               </div>
               <div class="col-md-4">
-                <label>City</label>
+                <label for="City"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   @change="CitySelected"
                   v-model="property.cityId"
                 >
                   <option value="0">Please Select</option>
-                  <option v-for="city in cities" :value="city.id">{{ city.description }}</option>
+                  <option
+                    v-for="city in cities"
+                    :value="city.id"
+                    :key="city.id"
+                  >{{ city.description }}</option>
                 </select>
               </div>
               <div class="col-md-4">
-                <label>Suburb</label>
+                <label for="Suburb"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="suburbselector"
                   v-model="property.suburbId"
                 >
                   <option value="0">Please Select</option>
-                  <option v-for="suburb in suburbs" :value="suburb.id">{{ suburb.description }}</option>
+                  <option
+                    v-for="suburb in suburbs"
+                    :value="suburb.id"
+                    :key="suburb.id"
+                  >{{ suburb.description }}</option>
                 </select>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label v-if="salesType === 'Rental'">Rental</label>
-                <label v-if="salesType !== 'Rental'">Sale Price</label>
+                <label v-if="salesType === 'Rental'">Rental Price</label>
+                <label v-if="salesType !== 'Rental'">Sales Price</label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="number"
                   name="price"
                   id="price"
+                  placeholder="R"
                   v-model="property.price"
                 />
               </div>
               <div class="col-md-4" v-if="salesType === 'Rental'">
                 <label>Per</label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   v-model="property.per"
                 >
-                  <option value>Please Select</option>
+                  <option value>Please select</option>
                   <option value="month">Month</option>
                   <option value="day">Day</option>
                 </select>
             </div>
             <div class="form-group row">
               <div class="col-md-12">
-                <label>Property Description</label>
+                <label for="Property Description"></label>
                 <textarea
-                  class="form-control editor form-control-lg form-control-a"
+                  class="form-control editor"
+                  placeholder="Property Description"
                   name="description"
                   v-model="property.description"
+                  id="description"
                 ></textarea>
+                <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>
             </div>
             <div class="form-group row" />
-            <UserField v-if="ApiRunning" :fields="propValuesProp[0].fields"></UserField>
+            <UserField
+              v-if="ApiRunning & propertyType === 'Residential'"
+              :fields="propValuesProp[0].fields"
+              :id="overviewProps"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+            ></UserField>
             <div class="form-group row" />
-            <div v-for="item in propertyValues">
+            <div v-for="item in propertyValues" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
                   </div>
                 </div>
               </div>
-              <UserField :fields="item.fields" :id="item.id" />
+              <UserField
+                :fields="item.fields"
+                :id="item.id"
+                @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              />
             </div>
             <div class="form-group row" />
             <div class="row">
                 </div>
               </div>
             </div>
-            <ImageLoad />
-            <button type="submit" class="btn btn-a">Save</button>
+            <ImageLoad :loadedImages="loadedImages" />
+            <button type="button" @click="SubmitData()" class="btn btn-a">Save</button>
+            <!-- <router-link
+              to="/property/search"
+              @click.stop.prevent="SubmitData()"
+              class="btn btn-b"
+              tag="button"
+            >Save</router-link>-->
           </form>
         </div>
       </div>
 </template>
 
 <script>
-import UserField from './propertyUserField.vue';
-import ImageLoad from './propertyImage.vue';
-
+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',
+  name: "PropertyEdit",
   components: {
     UserField,
-    ImageLoad,
+    ImageLoad
   },
   data() {
     return {
-      ApiRunning: false,
-      propertyType: 'Residential',
-      salesType: 'Rental',
-      imageFile: '',
+      ApiRunning: true,
+      propertyType: "Residential",
+      salesType: "Rental",
+      imageFile: "",
       provinces: [],
       cities: [],
       suburbs: [],
       propertyValues: [],
       propValuesProp: [],
       propertyTypes: [],
-      selectedProvince: '',
-      selectedCity: '',
+      selectedProvince: "",
+      selectedCity: "",
       property: {
         propertyTypeId: 0,
-        addressLine1: '',
-        addressLine2: '',
-        addressLine3: '',
+        propertyName: "",
+        unit: "",
+        addressLine1: "",
+        addressLine2: "",
+        addressLine3: "",
         suburbId: 0,
         cityId: 0,
         provinceId: 0,
-        price: '',
-        per: '',
-        description: '',
+        price: "",
+        per: "",
+        description: "",
         isSale: false,
+        propertyUserFields: [],
+        propertyImages: []
       },
+      images: [],
+      propertyFieldValues: []
     };
   },
   methods: {
     SubmitData() {
-      const axios = require('axios');
-      axios
-        .post('http://localhost:57260/Property/Property', this.property, {
-          headers: {
-            'Content-type': 'application/json',
-          },
-        })
-        .then((response) => {})
-        .catch((e) => {
-          alert(e);
-        });
+      // let isDefault = true;
+      // this.images.forEach((imagedata) => {
+      //   this.property.propertyImages.push({
+      //     image: imagedata,
+      //     isDefault,
+      //   });
+      //   isDefault = false;
+      // });
+
+      // this.property.propertyUserFields = this.propertyFieldValues;
+
+      // const axios = require('axios');
+      // axios
+      //   .post('http://localhost:57260/Property/Property', this.property)
+      //   .then((response) => {})
+      //   .catch((e) => {
+      //     alert(e);
+      //   });
 
-      console.log(JSON.stringify(this.property));
+      // this.$router.push("/property/search");
+      this.$router.push({
+        path: "/property/search",
+        query: { type: this.salesType, propertyType: this.propertyType }
+      });
     },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
         this.selectedProvince = this.provinces[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
+        const axios = require("axios");
         axios
           .get(
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`,
+            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
           )
           .then(response => (this.cities = response.data));
       }
         this.selectedCity = this.cities[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
+        const axios = require("axios");
         axios
           .get(
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`,
+            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
           )
           .then(response => (this.suburbs = response.data));
       }
     },
+    loadedImages(values) {
+      this.images = values;
+    },
+    UpdateUserDefinedFields(item) {
+      let update = false;
+      this.propertyFieldValues.forEach(element => {
+        if (element.userDefinedFieldId === item.userDefinedFieldId) {
+          element.value = item.value;
+          update = true;
+        }
+      });
+      if (!update) {
+        this.propertyFieldValues.push(item);
+      }
+    }
   },
   mounted() {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    const axios = require('axios');
+    const axios = require("axios");
     axios
-      .get('http://localhost:57260/Property/PropertyFields/Property Overview')
+      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
       .then(response => (this.propValuesProp = response.data));
 
     axios
-      .get('http://localhost:57260/Property/PropertyFields')
+      .get(
+        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
+      )
       .then(response => (this.propertyValues = response.data));
 
     axios
       .get(
-        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
+        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
       )
       .then(response => (this.propertyTypes = response.data));
 
     axios
-      .get('http://localhost:57260/region/province')
+      .get("http://localhost:57260/region/province")
       .then(response => (this.provinces = response.data));
   },
   computed: {
       this.propertyType = this.$route.params.propType;
       this.salesType = this.$route.params.saleType;
 
-      const axios = require('axios');
+      const axios = require("axios");
       axios
         .get(
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
+          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
         )
         .then(response => (this.propertyTypes = response.data));
-    },
+
+      axios
+        .get(
+          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
+        )
+        .then(response => (this.propertyValues = response.data));
+    }
   },
   watch: {
     SalesTypeChanged() {
       console.log(this.salesType);
-    },
-  },
+    }
+  }
 };
-</script>
+</script>

src/components/timeshare/buy/buyPage.vue

                   >
                     <div class="card-body">
                       <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
-                        <a class="text-capitalize" href="/resort/">{{resort.resortName}}</a>
+                        <a
+                          class="text-capitalize"
+                          @click="routerGoTo('/resort/' + resort.resortCode)"
+                        >{{resort.resortName}}</a>
                         <br />
                       </p>
                     </div>
   </section>
 </template>
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex';
 
 export default {
-  name: "TimeshareToBuy",
+  name: 'TimeshareToBuy',
   mounted() {
     this.getRegions();
   },
   computed: {
-    ...mapState("timeshareBuy", ["detailedRegion"])
+    ...mapState('timeshareBuy', ['detailedRegion']),
   },
   methods: {
-    ...mapActions("timeshareBuy", ["getRegions"])
-  }
+    ...mapActions('timeshareBuy', ['getRegions']),
+    routerGoTo(goTo) {
+      this.$router.push(goTo);
+    },
+  },
 };
 </script>

src/components/timeshare/resort/resortPage.vue

 <template>
-  <div></div>
+  <div>
+    <section>
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="myMargin">
+        <div class="row">
+          <div class="col-md-3">
+            <h2>Filter Resorts</h2>
+            <form
+              id="mainForm"
+              method="POST"
+              action="/filter"
+              accept-charset="UTF-8"
+              enctype="multipart/form-data"
+            >
+              <div class="form-group">
+                <select class="form-control" name="region" id="region">
+                  <option value>Region</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <select class="form-control" id="resort" name="resort">
+                  <option value>Resort</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <select class="form-control" name="season">
+                  <option value>
+                    <span style="color:white;">Season</span>
+                  </option>
+                </select>
+              </div>
+              <div class="form-group">
+                <select class="form-control" name="bedrooms">
+                  <option value>Bedrooms</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <input
+                  class="form-control"
+                  type="number"
+                  step="any"
+                  id="minPrice"
+                  name="minPrice"
+                  placeholder="Minimum Price"
+                />
+              </div>
+              <div class="form-group">
+                <input
+                  class="form-control"
+                  type="number"
+                  step="any"
+                  id="maxPrice"
+                  name="maxPrice"
+                  placeholder="Maximum Price"
+                />
+              </div>
+              <div class="form-group">
+                <label>Filter Arrival Date From</label>
+                <input
+                  style="color: white;"
+                  class="form-control"
+                  type="date"
+                  id="fromDate"
+                  name="fromDate"
+                  placeholder="Arrival Date"
+                />
+              </div>
+              <div class="form-group">
+                <label>Filter Arrival Date To</label>
+                <input
+                  style="color: white;"
+                  class="form-control"
+                  type="date"
+                  id="toDate"
+                  name="toDate"
+                  placeholder="Departure Date"
+                />
+              </div>
+
+              <br />
+
+              <button class="btn btn-blue" type="submit">SEARCH</button>
+            </form>
+            <div class="col-md-12 blue-bg p-2 p-md-4">
+              <h2>Facilities</h2>
+              <ul>
+                <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
+              </ul>
+            </div>
+          </div>
+          <div class="col-md-9">
+            <table class="table table-bordered">
+              <thead>
+                <tr>
+                  <th>Resort</th>
+                  <th>Unit Number</th>
+                  <th>Week Number</th>
+                  <th>Module</th>
+                  <th>Bedrooms</th>
+                  <th>Season</th>
+                  <th>Price</th>
+                  <th>Status</th>
+                  <th>Interested</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, i) in week" :key="i">
+                  <td>{{item.id}}</td>
+                  <td>{{item.code}}</td>
+                  <td>{{item.description}}</td>
+                  <td>{{item.id}}</td>
+                  <td>{{item.code}}</td>
+                  <td>{{item.description}}</td>
+                  <td>{{item.id}}</td>
+                  <td>{{item.code}}</td>
+                  <td>{{item.description}}</td>
+                </tr>
+              </tbody>
+            </table>
+            <div>
+              <div class="btn btn-primary" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
+              <hr />
+            </div>
+            {{resort.prNotes}}
+            <hr />
+            <div class="row mb-4">
+              <div class="col-md-4">
+                <img class="img-fluid" :src="image1" alt="Resort Image" />
+              </div>
+              <div class="col-md-4">
+                <img class="img-fluid" :src="image2" alt="Resort Image" />
+              </div>
+              <div class="col-md-4">
+                <img class="img-fluid" :src="image3" alt="Resort Image" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-12 mb-4">
+                <ul class="nav nav-tabs" id="myTab" role="tablist">
+                  <li class="nav-item">
+                    <a
+                      class="nav-link active"
+                      id="directions-tab"
+                      data-toggle="tab"
+                      href="#directions"
+                      role="tab"
+                      aria-controls="directions"
+                      aria-selected="false"
+                    >Directions</a>
+                  </li>
+                  <li class="nav-item">
+                    <a
+                      class="nav-link"
+                      id="resort-layout-tab"
+                      data-toggle="tab"
+                      href="#resort-layout"
+                      role="tab"
+                      aria-controls="resort-layout"
+                      aria-selected="true"
+                    >Resort Layout</a>
+                  </li>
+                </ul>
+                <div class="tab-content" id="myTabContent">
+                  <div
+                    class="tab-pane fade show active"
+                    id="directions"
+                    role="tabpanel"
+                    aria-labelledby="directions-tab"
+                  >
+                    <iframe
+                      :src="mapUrl"
+                      width="100%"
+                      height="450"
+                      frameborder="0"
+                      style="border:0"
+                      allowfullscreen
+                    ></iframe>
+                    <br />
+
+                    <small>
+                      <a
+                        :href="mapUrl"
+                        style="color:#0000FF;text-align:left"
+                        target="_blank"
+                      >See map bigger</a>
+                    </small>
+                  </div>
+                  <div
+                    class="tab-pane fade"
+                    id="resort-layout"
+                    role="tabpanel"
+                    aria-labelledby="resort-layout-tab"
+                  >
+                    <img class="img-fluid" :src="layout" alt="Resort Layout" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 <script>
-export default {};
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  props: {
+    resortCode: {},
+  },
+  mounted() {
+    this.initResort(this.resortCode);
+  },
+  computed: {
+    ...mapState('resort', ['resort', 'image1', 'image2', 'image3', 'layout']),
+    mapUrl() {
+      return this.resort
+        ? 'http://maps.google.com/maps?q='
+            + this.resort.prLatitude
+            + ', '
+            + this.resort.prLongitude
+            + '&z=15&output=embed'
+        : '';
+    },
+  },
+  methods: {
+    ...mapActions('resort', ['initResort']),
+    routerGoTo(goto) {
+      this.$router.push(goto);
+    },
+  },
+};
 </script>
 <style>
+.myMargin {
+  margin-left: 2%;
+  margin-right: 2%;
+}
 </style>

src/router/index.js

     component: ContactUs,
   },
   {
-    path: 'resort/:resortCode',
+    path: '/resort/:resortCode',
     name: 'ResortPage',
     component: ResortPage,
     props: true,

src/store/index.js

 import UnitConfigurationModule from './modules/timeshare/unitConfiguration';
 import TimeshareBuyModule from './modules/timeshare/buyPage';
 import SearchTabModule from './modules/searchTab';
+import ResortModule from './modules/timeshare/resort';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     unitConfiguration: UnitConfigurationModule,
     timeshareBuy: TimeshareBuyModule,
     searchTab: SearchTabModule,
+    resort: ResortModule,
   },
 });

src/store/modules/timeshare/buyPage.js

       commit,
       dispatch,
     }) {
+      commit('clearDetailed');
       axios.get(
         'https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/regions/list/ZA/',
       )
       if (region) {
         axios
           .get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/resorts/${
-            region.regionCode }/`)
+            region.regionCode}/`)
           .then(result => commit('addDetailed', {
             id: region.id,
             regionCode: region.regionCode,

src/store/modules/timeshare/resort.js

+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    resort: {},
+    image1: '',
+    image2: '',
+    image3: '',
+    layout: '',
+  },
+  mutations: {
+    setResort(state, resort) {
+      state.resort = resort;
+    },
+    clear(state) {
+      state.resort = {};
+      state.image1 = '';
+      state.image2 = '';
+      state.image3 = '';
+      state.layout = '';
+    },
+    setImage1(state, image) {
+      state.image1 = `data:image/jpeg;base64,${image}`;
+    },
+    setImage2(state, image) {
+      state.image2 = `data:image/jpeg;base64,${image}`;
+    },
+    setImage3(state, image) {
+      state.image3 = `data:image/jpeg;base64,${image}`;
+    },
+    setLayout(state, image) {
+      state.layout = `data:image/jpeg;base64,${image}`;
+    },
+  },
+  getters: {},
+  actions: {
+    initResort({
+      commit,
+      dispatch,
+    }, resortCode) {
+      commit('clear');
+      dispatch('getResort', resortCode);
+      dispatch('getImage1', resortCode);
+      dispatch('getImage2', resortCode);
+      dispatch('getImage3', resortCode);
+      dispatch('getLayout', resortCode);
+    },
+    getResort({
+      commit,
+    }, resortCode) {
+      axios.get(
+        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
+          resortCode}`,
+      )
+        .then((result) => {
+          commit('setResort', result.data);
+        })
+        .catch(console.error);
+    },
+    getImage1({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/image/1`)
+        .then(result => commit('setImage1', result.data))
+        .catch(console.error);
+    },
+    getImage2({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/image/2`)
+        .then(result => commit('setImage2', result.data))
+        .catch(console.error);
+    },
+    getImage3({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/image/3`)
+        .then(result => commit('setImage3', result.data))
+        .catch(console.error);
+    },
+    getLayout({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/layout`)
+        .then(result => commit('setLayout', result.data))
+        .catch(console.error);
+    },
+  },
+};