Merge remote-tracking branch 'origin/master'

package.json

@@ -15,13 +15,14 @@
     "datatables.net": "^1.10.19",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
+    "node-sass": "^4.12.0",
     "roboto-fontface": "*",
-    "stylus": "^0.54.7",
+    "sass-loader": "^7.3.1",
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.10",
     "vue-eva-icons": "^1.1.1",
     "vue-router": "^3.0.7",
-    "vuejs-datatable": "^1.7.0",
+    "vue-trix": "^1.0.0",
     "vuetify": "^1.5.5",
     "vuex": "^3.1.1"
   },

public/img/ligthbox/close.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve">
+<g>
+	<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88   c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242   C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879   s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" fill="#FFFFFF"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/img/ligthbox/next.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve">
+<g>
+	<path id="Chevron_Right_1_" d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179   l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261   C187.881,124.315,187.881,116.495,183.189,111.816z" fill="#FFFFFF"/>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/img/ligthbox/prev.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve">
+<g>
+	<path id="Chevron_Right" d="M57.633,129.007L165.93,237.268c4.752,4.74,12.451,4.74,17.215,0c4.752-4.74,4.752-12.439,0-17.179   l-99.707-99.671l99.695-99.671c4.752-4.74,4.752-12.439,0-17.191c-4.752-4.74-12.463-4.74-17.215,0L57.621,111.816   C52.942,116.507,52.942,124.327,57.633,129.007z" fill="#FFFFFF"/>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/components/home/carouselSection.vue

@@ -13,16 +13,16 @@
                 <div class="col-lg-8">
                   <div class="intro-body">
                     <p class="intro-title-top">
-                      Doral, Florida
-                      <br />78345
+                      Mooikloof, Pretoria
+                      <br />0081
                     </p>
                     <h1 class="intro-title mb-4">
-                      <span class="color-b">204</span> Mount
-                      <br />Olive Road Two
+                      <span class="color-b">10</span> Jollify
+                      <br />Main Road
                     </h1>
                     <p class="intro-subtitle intro-price">
                       <a href="#">
-                        <span class="price-a">rent | $ 12.000</span>
+                        <span class="price-a">rent | R 12 000</span>
                       </a>
                     </p>
                   </div>
@@ -44,16 +44,16 @@
                 <div class="col-lg-8">
                   <div class="intro-body">
                     <p class="intro-title-top">
-                      Doral, Florida
-                      <br />78345
+                      R303, Koue Bokkeveld, Cederberg
+                      <br />6836
                     </p>
                     <h1 class="intro-title mb-4">
-                      <span class="color-b">204</span> Rino
-                      <br />Venda Road Five
+                      <span class="color-b">Kagga</span> Kamma
+                      <br />
                     </h1>
                     <p class="intro-subtitle intro-price">
                       <a href="#">
-                        <span class="price-a">rent | $ 12.000</span>
+                        <span class="price-a">rent | R 12 000</span>
                       </a>
                     </p>
                   </div>
@@ -75,16 +75,16 @@
                 <div class="col-lg-8">
                   <div class="intro-body">
                     <p class="intro-title-top">
-                      Doral, Florida
-                      <br />78345
+                      Farm Whisky, Tenbosch Road, Komatiepoort
+                      <br />1340
                     </p>
                     <h1 class="intro-title mb-4">
-                      <span class="color-b">204</span> Alira
-                      <br />Roan Road One
+                      <span class="color-b">Ngwenya</span> Lodge
+                      <br />
                     </h1>
                     <p class="intro-subtitle intro-price">
                       <a href="#">
-                        <span class="price-a">rent | $ 12.000</span>
+                        <span class="price-a">rent | R 12 000</span>
                       </a>
                     </p>
                   </div>

src/components/property/propertyCard.vue

@@ -19,6 +19,15 @@
                   class="link-a"
                 >{{ currentProperty.shortDescription }}</router-link>
               </h4>
+              <h4 class="card-title-c">
+                <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
+                  {{ currentProperty.province }}
+                  <br />
+                  {{ currentProperty.city }}
+                  <br />
+                  {{ currentProperty.suburb }}
+                </router-link>
+              </h4>
             </div>
             <div class="card-body-a">
               <div class="price-box d-flex">
@@ -67,7 +76,7 @@
 <script>
 export default {
   props: {
-    properties: Object
-  }
+    properties: Object,
+  },
 };
-</script>
+</script>

src/components/property/propertyImage.vue

@@ -15,7 +15,7 @@
     </div>
     <br />
     <div class="form-group row">
-      <div v-for="img in image" class="col-md-2">
+      <div v-for="(img, i) in image" class="col-md-2" :key="i">
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
         <a class="fa fa-times del" @click="removeImage(key)" />
@@ -27,10 +27,13 @@
 
 <script>
 export default {
+  props: {
+    loadedImages: Function,
+  },
   data() {
     return {
       images: {},
-      image: []
+      image: [],
     };
   },
 
@@ -43,6 +46,7 @@ export default {
       if (!this.images.length) return;
 
       this.createImage(this.images);
+      this.loadedImages(this.image);
     },
 
     createImage(file) {
@@ -50,7 +54,7 @@ export default {
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = e => {
+        reader.onload = (e) => {
           vm.image.push(e.target.result);
           console.log(vm.image);
         };
@@ -63,9 +67,9 @@ export default {
       this.images.splice(key, 1);
 
       if (!this.image.length) {
-        this.$refs.im.value = "";
+        this.$refs.im.value = '';
       }
-    }
-  }
+    },
+  },
 };
-</script>
+</script>

src/components/property/propertyPage.vue

@@ -1,63 +1,32 @@
 <template>
-  <div>
+  <!-- eslint-disable max-len -->
+  <div v-if="property">
     <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">{{ Property.shortDescription }}</h1>
-              <span class="color-text-a">{{ Property.suburb }}</span>
+              <h1 class="title-single">{{ property.shortDescription }}</h1>
             </div>
           </div>
-          <!-- <div class="col-md-12 col-lg-4">
-            <nav aria-label="breadcrumb" class="breadcrumb-box d-flex justify-content-lg-end">
-              <ol class="breadcrumb">
-                <li class="breadcrumb-item">
-                  <a href="index.html">Home</a>
-                </li>
-                <li class="breadcrumb-item">
-                  <a href="property-grid.html">Properties</a>
-                </li>
-                <li class="breadcrumb-item active" aria-current="page">304 Blaster Up</li>
-              </ol>
-            </nav>
-          </div>-->
         </div>
       </div>
     </section>
     <!--/ Intro Single End /-->
 
-    <!--/ Property Single Star /-->
+    <!--/ property Single Star /-->
     <section class="property-single nav-arrow-b">
       <div class="container">
+        <div class="row">
+          <lightBox
+            :thumbnails="propertyImages"
+            :largeImages="propertyImages"
+            :caption="false"
+            class="lightBox"
+          />
+        </div>
         <div class="row">
           <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]"
-                  style="height:800px; width:1200px; object-fit: cover;"
-                />
-              </div>
-              <div class="carousel-item-b">
-                <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">
               <div class="col-md-7 col-lg-7 section-md-t3">
                 <div class="row">
@@ -67,8 +36,8 @@
                     </div>
                   </div>
                 </div>
-                <div class="property-description" v-html="Property.description" />
-                <div v-for="display in Property.displayData">
+                <div class="property-description" v-html="property.description" />
+                <div v-for="display in property.displayData" :key="display.id">
                   <div class="row section-t3">
                     <div class="col-sm-12">
                       <div class="title-box-d">
@@ -77,7 +46,7 @@
                     </div>
                   </div>
                   <div class="summary-list">
-                    <ul class="list" v-for="item in display.values">
+                    <ul class="list" v-for="item in display.values" :key="item.id">
                       <li class="d-flex justify-content-between">
                         <strong>{{ item.name }}:</strong>
                         <span v-html="item.value"></span>
@@ -93,15 +62,15 @@
                       <span class="ion-money">R</span>
                     </div>
                     <div class="card-title-c align-self-center">
-                      <h5 class="title-c">{{ Property.price }}</h5>
+                      <h5 class="title-c">{{ formatPrice(property.price) }}</h5>
                     </div>
                   </div>
                 </div>
                 <div class="property-summary">
-                  <!-- <div class="row">
+                  <div class="row">
                     <div class="col-sm-12">
                       <div class="title-box-d section-t4">
-                        <h3 class="title-d">Quick Summary</h3>
+                        <h3 class="title-d">Summary</h3>
                       </div>
                     </div>
                   </div>
@@ -109,236 +78,142 @@
                     <ul class="list">
                       <li class="d-flex justify-content-between">
                         <strong>Property ID:</strong>
-                        <span>1134</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Location:</strong>
-                        <span>Chicago, IL 606543</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Property Type:</strong>
-                        <span>House</span>
+                        <span>{{ property.id }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Status:</strong>
-                        <span>Sale</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Area:</strong>
-                        <span>
-                          340m
-                          <sup>2</sup>
-                        </span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Beds:</strong>
-                        <span>4</span>
+                        <span v-if="property.isSale">Sale</span>
+                        <span v-else>Rental</span>
                       </li>
                       <li class="d-flex justify-content-between">
-                        <strong>Baths:</strong>
-                        <span>2</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>Garage:</strong>
-                        <span>1</span>
-                      </li>
-                    </ul>
-                  </div>-->
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-10 offset-md-1">
-            <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-video-tab"
-                  data-toggle="pill"
-                  href="#pills-video"
-                  role="tab"
-                  aria-controls="pills-video"
-                  aria-selected="true"
-                >Video</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link"
-                  id="pills-plans-tab"
-                  data-toggle="pill"
-                  href="#pills-plans"
-                  role="tab"
-                  aria-controls="pills-plans"
-                  aria-selected="false"
-                >Floor Plans</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link"
-                  id="pills-map-tab"
-                  data-toggle="pill"
-                  href="#pills-map"
-                  role="tab"
-                  aria-controls="pills-map"
-                  aria-selected="false"
-                >Ubication</a>
-              </li>
-            </ul>
-            <div class="tab-content" id="pills-tabContent">
-              <div
-                class="tab-pane fade show active"
-                id="pills-video"
-                role="tabpanel"
-                aria-labelledby="pills-video-tab"
-              >
-                <iframe
-                  src="https://player.vimeo.com/video/73221098"
-                  width="100%"
-                  height="460"
-                  frameborder="0"
-                  webkitallowfullscreen
-                  mozallowfullscreen
-                  allowfullscreen
-                ></iframe>
-              </div>
-              <div
-                class="tab-pane fade"
-                id="pills-plans"
-                role="tabpanel"
-                aria-labelledby="pills-plans-tab"
-              >
-                <img src="img/plan2.jpg" alt class="img-fluid" />
-              </div>
-              <div
-                class="tab-pane fade"
-                id="pills-map"
-                role="tabpanel"
-                aria-labelledby="pills-map-tab"
-              >
-                <iframe
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1422937950147!2d-73.98731968482413!3d40.75889497932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes+Square!5e0!3m2!1ses-419!2sve!4v1510329142834"
-                  width="100%"
-                  height="460"
-                  frameborder="0"
-                  style="border:0"
-                  allowfullscreen
-                ></iframe>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-12">
-            <div class="row section-t3">
-              <div class="col-sm-12">
-                <div class="title-box-d">
-                  <h3 class="title-d">Contact Agent</h3>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-6 col-lg-4">
-                <img src="img/agent-4.jpg" alt class="img-fluid" />
-              </div>
-              <div class="col-md-6 col-lg-4">
-                <div class="property-agent">
-                  <h4 class="title-agent">Anabella Geller</h4>
-                  <p class="color-text-a">
-                    Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
-                    dui. Quisque velit nisi,
-                    pretium ut lacinia in, elementum id enim.
-                  </p>
-                  <ul class="list-unstyled">
-                    <li class="d-flex justify-content-between">
-                      <strong>Phone:</strong>
-                      <span class="color-text-a">(222) 4568932</span>
-                    </li>
-                    <li class="d-flex justify-content-between">
-                      <strong>Mobile:</strong>
-                      <span class="color-text-a">777 287 378 737</span>
-                    </li>
-                    <li class="d-flex justify-content-between">
-                      <strong>Email:</strong>
-                      <span class="color-text-a">annabella@example.com</span>
-                    </li>
-                    <li class="d-flex justify-content-between">
-                      <strong>Skype:</strong>
-                      <span class="color-text-a">Annabela.ge</span>
-                    </li>
-                  </ul>
-                  <div class="socials-a">
-                    <ul class="list-inline">
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-facebook" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-twitter" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-instagram" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-pinterest-p" aria-hidden="true"></i>
-                        </a>
-                      </li>
-                      <li class="list-inline-item">
-                        <a href="#">
-                          <i class="fa fa-dribbble" aria-hidden="true"></i>
-                        </a>
+                        <strong>Address:</strong>
+                        <span
+                          v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb.description) + formatAddress(property.city.description) + formatAddress(property.province.description) "
+                        ></span>
                       </li>
                     </ul>
                   </div>
                 </div>
-              </div>
-              <div class="col-md-12 col-lg-4">
-                <div class="property-contact">
-                  <form class="form-a">
-                    <div class="row">
-                      <div class="col-md-12 mb-1">
-                        <div class="form-group">
-                          <input
-                            type="text"
-                            class="form-control form-control-lg form-control-a"
-                            id="inputName"
-                            placeholder="Name *"
-                            required
-                          />
-                        </div>
-                      </div>
-                      <div class="col-md-12 mb-1">
-                        <div class="form-group">
-                          <input
-                            type="email"
-                            class="form-control form-control-lg form-control-a"
-                            id="inputEmail1"
-                            placeholder="Email *"
-                            required
-                          />
-                        </div>
+                <div class="col-md-12">
+                  <div class="row section-t3">
+                    <div class="col-sm-12">
+                      <div class="title-box-d">
+                        <h3 class="title-d">Contact Agent</h3>
                       </div>
-                      <div class="col-md-12 mb-1">
-                        <div class="form-group">
-                          <textarea
-                            id="textMessage"
-                            class="form-control"
-                            placeholder="Comment *"
-                            name="message"
-                            cols="45"
-                            rows="8"
-                            required
-                          ></textarea>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <img src="img/agent-4.jpg" alt class="img-fluid" />
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <div class="property-agent">
+                        <h4 class="title-agent">Anabella Geller</h4>
+                        <p class="color-text-a">
+                          Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
+                          dui. Quisque velit nisi,
+                          pretium ut lacinia in, elementum id enim.
+                        </p>
+                        <ul class="list-unstyled">
+                          <li class="d-flex justify-content-between">
+                            <strong>Phone:</strong>
+                            <span class="color-text-a">(222) 4568932</span>
+                          </li>
+                          <li class="d-flex justify-content-between">
+                            <strong>Mobile:</strong>
+                            <span class="color-text-a">777 287 378 737</span>
+                          </li>
+                          <li class="d-flex justify-content-between">
+                            <strong>Email:</strong>
+                            <span class="color-text-a">annabella@example.com</span>
+                          </li>
+                          <li class="d-flex justify-content-between">
+                            <strong>Skype:</strong>
+                            <span class="color-text-a">Annabela.ge</span>
+                          </li>
+                        </ul>
+                        <div class="socials-a">
+                          <ul class="list-inline">
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-facebook" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-twitter" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-instagram" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-pinterest-p" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                            <li class="list-inline-item">
+                              <a href="#">
+                                <i class="fa fa-dribbble" aria-hidden="true"></i>
+                              </a>
+                            </li>
+                          </ul>
                         </div>
                       </div>
-                      <div class="col-md-12">
-                        <button type="submit" class="btn btn-a">Send Message</button>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <div class="property-contact">
+                        <form class="form-a">
+                          <div class="row">
+                            <div class="col-md-12 mb-1">
+                              <div class="form-group">
+                                <input
+                                  type="text"
+                                  class="form-control form-control-lg form-control-a"
+                                  id="inputName"
+                                  placeholder="Name *"
+                                  required
+                                />
+                              </div>
+                            </div>
+                            <div class="col-md-12 mb-1">
+                              <div class="form-group">
+                                <input
+                                  type="email"
+                                  class="form-control form-control-lg form-control-a"
+                                  id="inputEmail1"
+                                  placeholder="Email *"
+                                  required
+                                />
+                              </div>
+                            </div>
+                            <div class="col-md-12 mb-1">
+                              <div class="form-group">
+                                <textarea
+                                  id="textMessage"
+                                  class="form-control"
+                                  placeholder="Comment *"
+                                  name="message"
+                                  cols="45"
+                                  rows="8"
+                                  required
+                                ></textarea>
+                              </div>
+                            </div>
+                            <div class="col-md-12">
+                              <button type="submit" class="btn btn-a">Send Message</button>
+                            </div>
+                          </div>
+                        </form>
                       </div>
                     </div>
-                  </form>
+                  </div>
                 </div>
               </div>
             </div>
@@ -350,25 +225,48 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
+import lightBox from '../shared/lightBoxGallery.vue';
+
 export default {
-  name: "Property",
+  name: 'property',
+  components: {
+    lightBox,
+  },
   data() {
-    return {
-      Property: {},
-      propertyImages: []
-    };
+    return {};
+  },
+  mounted() {
+    this.getProperty(Object.assign({}, { id: this.$route.params.id }));
+    this.getPropertyImages(Object.assign({}, { id: this.$route.params.id }));
+  },
+  computed: {
+    ...mapState('property', ['property', 'propertyImages']),
+  },
+  methods: {
+    ...mapActions('property', ['getProperty', 'getPropertyImages']),
+    formatPrice(value) {
+      const val = (value / 1).toFixed(2);
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    },
+    formatAddress(value) {
+      if (value !== '') {
+        return `${value}<br/>`;
+      }
+      return '';
+    },
   },
-  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}`
-      )
-      .then(response => (this.propertyImages = response.data));
-  }
 };
 </script>
+
+<style lang ="scss">
+.light-box {
+  &__thumbnail {
+    margin: 20px;
+    width: 200px;
+  }
+}
+img {
+  max-width: 100%;
+}
+</style>

src/components/property/propertySearchFields.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div class="col-md-6 mb-2">
+      <div class="form-group">
+        <label for="city">For:</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="forSelector"
+          v-model="selectedType"
+          @change="TypeSelected"
+        >
+          <option value="Sale">Sale</option>
+          <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
+          class="form-control form-control-lg form-control-a"
+          id="provinceselector"
+          @change="ProvinceSelected"
+          v-model="selectedProvince"
+        >
+          <option>All</option>
+          <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="col-md-6 mb-2">
+      <div class="form-group">
+        <label for="city">City</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="cityselector"
+          @change="CitySelected"
+          v-model="selectedCity"
+        >
+          <option>All</option>
+          <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="col-md-6 mb-2">
+      <div class="form-group">
+        <label for="city">Suburb</label>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="suburbselector"
+          v-model="selectedSuburb"
+          @change="SuburbSelected"
+        >
+          <option>All</option>
+          <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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 }));
+      }
+      this.$emit('ProvinceSelectedUpdated', item.target.value);
+    },
+    CitySelected(item) {
+      if (item.target.value !== 'All') {
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
+      }
+      this.$emit('CitySelectedUpdated', item.target.value);
+    },
+    SuburbSelected(item) {
+      this.$emit('SuburbSelectedUpdated', item.target.value);
+    },
+  },
+};
+</script>

src/components/property/propertySearchPage.vue

@@ -8,12 +8,12 @@
     <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 />
@@ -96,26 +96,35 @@
   </div>
 </template>
 <script>
-import propertyCard from "../property/propertyCard.vue";
-import { isNull } from "util";
+import { mkdir } from 'fs';
+import { mapState, mapActions } from 'vuex';
+import propertyCard from './propertyCard.vue';
 
 export default {
-  name: "propertysearch",
+  name: 'propertysearch',
   components: {
-    propertyCard
+    propertyCard,
   },
   data() {
     return {
-      Properties: [],
-      type: "",
-      propertyType: "",
-      propertyTypeparam: "",
-      province: "",
-      city: "",
-      suburb: ""
+      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;
@@ -123,42 +132,58 @@ export default {
       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") {
+      if (typeof this.propertyType === 'undefined') {
         this.propertyType = this.propertyTypeparam;
       }
 
-      let search = "";
-      if (this.type !== "") {
-        search = search + "type:" + this.type;
+      if (this.type === '') {
+        this.type = 'undefined';
       }
-      if (this.propertyType !== "") {
-        search = search + "|propertyType:" + this.propertyType;
+      if (this.propertyType === '') {
+        this.propertyType = 'undefined';
       }
-      if (this.province !== "") {
-        search = search + "|province:" + this.province;
+      if (this.province === '') {
+        this.province = 'undefined';
       }
-      if (this.city !== "") {
-        search = search + "|city:" + this.city;
+      if (this.city === '') {
+        this.city = 'undefined';
       }
-      if (this.suburb !== "") {
-        search = search + "|suburb:" + this.suburb;
+      if (this.suburb === '') {
+        this.suburb = 'undefined';
+      }
+      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 }),
+        );
       }
 
-      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));
-    }
+      return null;
+    },
   },
   watch: {
     ParamsChanged() {
       console.log(JSON.stringify(this.$route.query));
-    }
-  }
+    },
+  },
 };
 </script>

src/components/property/propertyUserField.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-group row">
-    <div class="col-md-4 mb-2" v-for="currentField in fields">
+    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
       <label>{{ currentField.name }}</label>
       <input
         v-if="currentField.type === 'number'"
@@ -8,6 +8,8 @@
         type="number"
         name="currentField.name"
         id="currentField.id"
+        v-model="setFields[i]"
+        @change="UpdateSetFields(currentField, i)"
       />
       <input
         v-if="currentField.type === 'text'"
@@ -15,10 +17,16 @@
         type="text"
         name="currentField.name"
         id="currentField.id"
+        v-model="setFields[i]"
+        @change="UpdateSetFields(currentField, i)"
       />
       <div v-if="currentField.type === 'yesno'">
-        <select class="form-control form-control-lg form-control-a" id="currentField.id">
-          <option>Please Select</option>
+        <select
+          class="form-control form-control-lg form-control-a"
+          id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        >
           <option value="yes">Yes</option>
           <option value="no">No</option>
         </select>
@@ -29,8 +37,24 @@
 
 <script>
 export default {
+  name: 'UserDefinedField',
   props: {
     fields: [],
+    SetFieldValue: Function,
+  },
+  data() {
+    return {
+      setFields: [],
+    };
+  },
+  methods: {
+    UpdateSetFields(field, index) {
+      const item = {
+        userDefinedFieldId: field.id,
+        value: this.setFields[index],
+      };
+      this.$emit('UpdateUserDefinedFields', item);
+    },
   },
 };
 </script>

src/components/property/propertyeditPage.vue

@@ -41,19 +41,21 @@
                 </select>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label>Property Name</label>
+                <label for="Property Name"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Property Name"
                   name="propertyName"
                   id="propertyName"
                   v-model="property.propertyName"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label>Unit</label>
+                <label for="Unit"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
+                  placeholder="Unit"
                   type="text"
                   name="unit"
                   id="unit"
@@ -178,26 +180,20 @@
             <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>
             </div>
             <div class="form-group row" />
             <UserField
-              v-if="ApiRunning & propertyType === 'Residential'"
-              :fields="propValuesProp[0].fields"
+              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              :fields="propertyOverviewFields[0].fields"
               :id="overviewProps"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
             ></UserField>
             <div class="form-group row" />
-            <div v-for="item in propertyValues" :key="item.id">
+            <div v-for="item in propertyFields" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
@@ -220,13 +216,12 @@
               </div>
             </div>
             <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>-->
+            <button
+              type="button"
+              @click="SubmitData()"
+              class="btn btn-b-n"
+              style="width: 85px; height:40px;"
+            >Save</button>
           </form>
         </div>
       </div>
@@ -235,75 +230,69 @@
 </template>
 
 <script>
-import UserField from "./propertyUserField.vue";
-import ImageLoad from "./propertyImage.vue";
-// https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
+import { mapState, mapActions } from 'vuex';
+import TextEditor from 'vue-trix';
+import UserField from './propertyUserField.vue';
+import ImageLoad from './propertyImage.vue';
+
 export default {
-  name: "PropertyEdit",
+  name: 'PropertyEdit',
   components: {
     UserField,
-    ImageLoad
+    ImageLoad,
+    TextEditor,
   },
   data() {
     return {
-      ApiRunning: true,
-      propertyType: "Residential",
-      salesType: "Rental",
-      imageFile: "",
-      provinces: [],
-      cities: [],
-      suburbs: [],
-      propertyValues: [],
-      propValuesProp: [],
-      propertyTypes: [],
-      selectedProvince: "",
-      selectedCity: "",
+      propertyType: 'Residential',
+      salesType: 'Rental',
+      selectedProvince: '',
+      selectedCity: '',
       property: {
         propertyTypeId: 0,
-        propertyName: "",
-        unit: "",
-        addressLine1: "",
-        addressLine2: "",
-        addressLine3: "",
+        propertyName: '',
+        unit: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
         suburbId: 0,
         cityId: 0,
         provinceId: 0,
-        price: "",
-        per: "",
-        description: "",
+        price: '',
+        per: '',
+        description: '',
         isSale: false,
         propertyUserFields: [],
-        propertyImages: []
+        propertyImages: [],
       },
       images: [],
-      propertyFieldValues: []
+      propertyFieldValues: [],
     };
   },
   methods: {
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ...mapActions('property', [
+      'getPropertyTypes',
+      'getPropertyOverviewFields',
+      'getPropertyFields',
+      'saveProperty',
+    ]),
     SubmitData() {
-      // let isDefault = true;
-      // this.images.forEach((imagedata) => {
-      //   this.property.propertyImages.push({
-      //     image: imagedata,
-      //     isDefault,
-      //   });
-      //   isDefault = false;
-      // });
-
-      // this.property.propertyUserFields = this.propertyFieldValues;
+      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);
-      //   });
+      this.saveProperty(Object.assign({}, { newProperty: this.property }));
 
-      // this.$router.push("/property/search");
       this.$router.push({
-        path: "/property/search",
-        query: { type: this.salesType, propertyType: this.propertyType }
+        path: '/property/search',
+        query: { type: this.salesType, propertyType: this.propertyType },
       });
     },
     ProvinceSelected(item) {
@@ -311,12 +300,7 @@ export default {
         this.selectedProvince = this.provinces[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require("axios");
-        axios
-          .get(
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
-          )
-          .then(response => (this.cities = response.data));
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
       }
     },
     CitySelected(item) {
@@ -324,12 +308,12 @@ export default {
         this.selectedCity = this.cities[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require("axios");
-        axios
-          .get(
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
-          )
-          .then(response => (this.suburbs = response.data));
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
       }
     },
     loadedImages(values) {
@@ -337,7 +321,7 @@ export default {
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach(element => {
+      this.propertyFieldValues.forEach((element) => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
@@ -346,56 +330,49 @@ export default {
       if (!update) {
         this.propertyFieldValues.push(item);
       }
-    }
+    },
   },
   mounted() {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    const axios = require("axios");
-    axios
-      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
-      .then(response => (this.propValuesProp = response.data));
-
-    axios
-      .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}`
-      )
-      .then(response => (this.propertyTypes = response.data));
-
-    axios
-      .get("http://localhost:57260/region/province")
-      .then(response => (this.provinces = response.data));
+    this.getProvince();
+    this.getPropertyTypes(
+      Object.assign({}, { propertyType: this.$route.params.propType }),
+    );
+    this.getPropertyOverviewFields();
+    this.getPropertyFields(
+      Object.assign({}, { propertyType: this.$route.params.propType }),
+    );
   },
   computed: {
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+    ...mapState('property', [
+      'propertyTypes',
+      'propertyOverviewFields',
+      'propertyFields',
+    ]),
     SalesTypeChanged() {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.propertyType = this.$route.params.propType;
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.salesType = this.$route.params.saleType;
 
-      const axios = require("axios");
-      axios
-        .get(
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
-        )
-        .then(response => (this.propertyTypes = response.data));
+      this.getPropertyTypes(
+        Object.assign({}, { propertyType: this.$route.params.propType }),
+      );
+
+      this.getPropertyFields(
+        Object.assign({}, { propertyType: this.$route.params.propType }),
+      );
 
-      axios
-        .get(
-          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
-        )
-        .then(response => (this.propertyValues = response.data));
-    }
+      return this.propertyType;
+    },
   },
   watch: {
     SalesTypeChanged() {
       console.log(this.salesType);
-    }
-  }
+    },
+  },
 };
-</script>
+</script>

src/components/shared/lightBoxGallery.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="scrolling-wrapper">
+    <img
+      @click="lightboxEffect(index)"
+      v-for="(thumbnail, index) in thumbnails"
+      :key="thumbnail"
+      :src="thumbnail"
+      style="height:150px; width:150px; object-fit: cover;"
+      class="light-box__thumbnail"
+    />
+    <transition name="fade" mode="out-in">
+      <div @click.stop="bg = !bg" class="light-box__bg" v-if="bg"></div>
+    </transition>
+
+    <div v-if="bg">
+      <div class="light-box__close" @click.stop="bg = !bg"></div>
+      <p class="light-box__count" v-if="count">
+        {{currentImage + 1 }}/
+        <span>{{ thumbnails.length}}</span>
+      </p>
+      <div @click="prev" class="light-box__prev light-box__btn"></div>
+
+      <div v-if="bg" class="light-box__container">
+        <transition name="fade" mode="out-in">
+          <img
+            :key="currentImage"
+            :src="largeImages[currentImage]"
+            class="light-box__container__img"
+          />
+        </transition>
+      </div>
+
+      <div class="light-box__caption" v-if="caption">
+        <p v-if="captions[currentImage]">{{ captions[currentImage]}}</p>
+      </div>
+
+      <div @click="next" class="light-box__next light-box__btn"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bg: false,
+      currentImage: 0,
+      count: true
+    };
+  },
+  props: {
+    thumbnails: {
+      type: Array,
+      required: true
+    },
+    largeImages: {
+      type: Array,
+      required: true
+    },
+    captions: {
+      type: Array,
+      required: true
+    },
+    thumbnailsPath: {
+      type: String,
+      required: true
+    },
+    largePath: {
+      type: String,
+      required: true
+    },
+    caption: true
+  },
+  methods: {
+    lightboxEffect(curr) {
+      this.currentImage = curr;
+      this.bg = !this.bg;
+    },
+    next() {
+      if (this.currentImage < this.largeImages.length - 1) {
+        // eslint-disable-next-line no-plusplus
+        this.currentImage++;
+      } else {
+        this.currentImage = 0;
+      }
+    },
+    prev() {
+      if (this.currentImage > 0) {
+        // eslint-disable-next-line no-plusplus
+        this.currentImage--;
+      } else {
+        this.currentImage = this.largeImages.length - 1;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.light-box {
+  &__bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.89);
+    z-index: 1000;
+  }
+
+  &__thumbnail {
+    cursor: pointer;
+  }
+
+  &__close {
+    padding: 10px;
+    position: absolute;
+    right: 5px;
+    top: 10px;
+    background-image: url(../../../public/img/ligthbox/close.svg);
+    background-size: contain;
+    background-position: center;
+  }
+  &__container {
+    position: absolute;
+    z-index: 2000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 700px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    min-height: 800px;
+    img {
+      align-self: center;
+    }
+  }
+  &__btn {
+    background-size: contain;
+    background-position: center;
+    align-self: center;
+    padding: 15px;
+  }
+
+  &__close,
+  &__btn {
+    cursor: pointer;
+  }
+
+  &__close,
+  &__btn,
+  &__caption,
+  &__count {
+    position: absolute;
+    z-index: 3000;
+  }
+
+  &__next {
+    background-image: url(../../../public/img/ligthbox/next.svg);
+    right: 20px;
+  }
+  &__prev {
+    background-image: url(../../../public/img/ligthbox/prev.svg);
+    left: 20px;
+  }
+  &__next,
+  &__prev {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__caption {
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    font-size: 20px;
+    justify-content: center;
+  }
+
+  &__count {
+    left: 20px;
+    font-size: 16px;
+    color: #fff;
+    top: 14px;
+    padding: 0;
+    margin: 0;
+  }
+}
+</style>

src/components/shared/searchTab.vue

@@ -5,7 +5,7 @@
       <h3 class="title-d">Search</h3>
     </div>
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
-    <div class="box-collapse-wrap form">
+    <div class="box-collapse-wrap">
       <form class="form-a">
         <div class="row">
           <div class="col-md-12 mb-2">
@@ -15,123 +15,148 @@
                 type="text"
                 class="form-control form-control-lg form-control-a"
                 placeholder="Keyword"
+                v-model="keyword"
               />
             </div>
           </div>
-          <div class="col-md-4 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Timeshare</label>
-            </div>
-          </div>
-          <div class="col-md-4 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Residential</label>
-            </div>
-          </div>
-          <div class="col-md-4 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Commercial</label>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Sale</label>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
-              <label class="form-check-label" for="paid">Rent</label>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <label for="city">Provice</label>
-              <select
-                class="form-control form-control-lg form-control-a"
-                id="provinceselector"
-                @change="ProvinceSelected"
-                v-model="selectedProvince"
-              >
-                <option>All</option>
-                <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
-              </select>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <label for="city">City</label>
-              <select
-                class="form-control form-control-lg form-control-a"
-                id="cityselector"
-                @change="CitySelected"
-                v-model="selectedCity"
+          <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-video-tab"
+                  data-toggle="pill"
+                  href="#pills-video"
+                  role="tab"
+                  aria-controls="pills-video"
+                  aria-selected="true"
+                  v-on:click="updateType('Timeshare')"
+                >Timeshare</a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link"
+                  id="pills-plans-tab"
+                  data-toggle="pill"
+                  href="#pills-plans"
+                  role="tab"
+                  aria-controls="pills-plans"
+                  aria-selected="false"
+                  v-on:click="updateType('Residential')"
+                >Residential</a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link"
+                  id="pills-map-tab"
+                  data-toggle="pill"
+                  href="#pills-map"
+                  role="tab"
+                  aria-controls="pills-map"
+                  aria-selected="false"
+                  v-on:click="updateType('Commercial')"
+                >Commercial</a>
+              </li>
+            </ul>
+            <div class="tab-content" id="pills-tabContent">
+              <div
+                class="tab-pane fade show active"
+                id="pills-video"
+                role="tabpanel"
+                aria-labelledby="pills-video-tab"
+              >timeshare search</div>
+              <div
+                class="tab-pane fade"
+                id="pills-plans"
+                role="tabpanel"
+                aria-labelledby="pills-plans-tab"
               >
-                <option>All</option>
-                <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
-              </select>
-            </div>
-          </div>
-          <div class="col-md-6 mb-2">
-            <div class="form-group">
-              <label for="city">Suburb</label>
-              <select
-                class="form-control form-control-lg form-control-a"
-                id="suburbselector"
-                v-model="selectedSuburb"
+                <propertySearch
+                  propertyType="Residential"
+                  @TypeSelectedUpdated="TypeSelectedUpdated"
+                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
+                  @CitySelectedUpdated="CitySelectedUpdated"
+                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
+                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
+                />
+              </div>
+              <div
+                class="tab-pane fade"
+                id="pills-map"
+                role="tabpanel"
+                aria-labelledby="pills-map-tab"
               >
-                <option>All</option>
-                <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
-              </select>
+                <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">Search</button> -->
-            <router-link to="/property/search" class="btn btn-b" tag="button">Search</router-link>
+            <button type="submit" class="btn btn-b" @click="Search">Search</button>
           </div>
         </div>
       </form>
     </div>
   </div>
 </template>
+
 <script>
-import { mapState, mapActions } from 'vuex';
+import propertySearch from '../property/propertySearchFields.vue';
 
 export default {
+  components: {
+    propertySearch,
+  },
   data() {
     return {
+      selectedPropertyType: 'timeshare',
+      selectedType: '',
       selectedProvince: '',
       selectedCity: '',
       selectedSuburb: '',
+      selectedPropType: '',
+      keyword: '',
     };
   },
-  mounted() {
-    this.getProvince();
-  },
-  computed: {
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-  },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
-    ProvinceSelected(item) {
-      if (item.target.value !== 'All') {
-        this.getCities(Object.assign({}, this.selectedProvince));
-      }
+    updateType(item) {
+      this.selectedPropertyType = item;
+    },
+    TypeSelectedUpdated(item) {
+      this.selectedType = item;
+    },
+    PropertyTypeSelectedUpdated(item) {
+      this.selectedPropType = item;
+    },
+    ProvinceSelectedUpdated(item) {
+      this.selectedProvince = item;
+    },
+    CitySelectedUpdated(item) {
+      this.selectedCity = item;
+    },
+    SuburbSelectedUpdated(item) {
+      this.selectedSuburb = item;
     },
-    CitySelected(item) {
-      if (item.target.value !== 'All') {
-        this.getSuburbs(
-          Object.assign(
-            {},
-            { province: this.selectedProvince, city: this.city },
-          ),
-        );
-      }
+    Search() {
+      // need to see how to differenciate between properties and timeshare.
+      this.$router.push({
+        path: '/property/search',
+        query: {
+          type: this.selectedType,
+          propertyType: this.selectedPropertyType,
+          province: this.selectedProvince,
+          city: this.selectedCity,
+          suburb: this.selectedSuburb,
+          propType: this.propertyType,
+          keyword: this.keyword,
+        },
+      });
     },
   },
 };

src/components/timeshare/buy/buyPage.vue

@@ -38,7 +38,7 @@
           <div class="row mb-4">
             <div class="col-md-8">
               <div class="accordion" id="accordionExample">
-                <div class="card" v-for="(region, r) in detailedRegion" :key="r">
+                <div class="card" v-for="(region, r) in regions" :key="r">
                   <a
                     class="btn btn-b-n"
                     type="button"
@@ -60,7 +60,8 @@
                     <div class="card-body">
                       <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
                         <a
-                          class="text-capitalize"
+                          class="cursor-pointer"
+                          href="#"
                           @click="routerGoTo('/resort/' + resort.resortCode)"
                         >{{resort.resortName}}</a>
                         <br />
@@ -86,6 +87,9 @@ export default {
   },
   computed: {
     ...mapState('timeshareBuy', ['detailedRegion']),
+    regions() {
+      return _.sortBy(this.detailedRegion, r => r.regionName);
+    },
   },
   methods: {
     ...mapActions('timeshareBuy', ['getRegions']),

src/components/timeshare/resort/resortPage.vue

@@ -15,7 +15,7 @@
       <div class="myMargin">
         <div class="row">
           <div class="col-md-3">
-            <h2>Filter Resorts</h2>
+            <h3>Filter Resort</h3>
             <form
               id="mainForm"
               method="POST"
@@ -68,33 +68,19 @@
               </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"
-                />
+                <input type="date" class="form-control" name="arrivaldate" value />
               </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"
-                />
+                <input type="date" class="form-control" name="arrivaldate" value />
               </div>
 
               <br />
 
-              <button class="btn btn-blue" type="submit">SEARCH</button>
+              <button class="btn btn-b-n" type="submit">Search</button>
             </form>
             <div class="col-md-12 blue-bg p-2 p-md-4">
-              <h2>Facilities</h2>
+              <h3>Facilities</h3>
               <ul>
                 <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
               </ul>
@@ -130,10 +116,10 @@
               </tbody>
             </table>
             <div>
-              <div class="btn btn-primary" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
+              <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
               <hr />
             </div>
-            {{resort.prNotes}}
+            {{description}}
             <hr />
             <div class="row mb-4">
               <div class="col-md-4">
@@ -192,7 +178,7 @@
                     <small>
                       <a
                         :href="mapUrl"
-                        style="color:#0000FF;text-align:left"
+                        style="color:#60CBEB;text-align:left"
                         target="_blank"
                       >See map bigger</a>
                     </small>
@@ -225,7 +211,14 @@ export default {
     this.initResort(this.resortCode);
   },
   computed: {
-    ...mapState('resort', ['resort', 'image1', 'image2', 'image3', 'layout']),
+    ...mapState('resort', [
+      'resort',
+      'description',
+      'image1',
+      'image2',
+      'image3',
+      'layout',
+    ]),
     mapUrl() {
       return this.resort
         ? 'http://maps.google.com/maps?q='

src/components/timeshare/resort/unitPage.vue

@@ -0,0 +1,180 @@
+<template>
+  <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="container">
+      <div class="row mb-4">
+        <div class="col-md-6">
+          <p>{{description}}</p>
+        </div>
+        <div class="col-md-6">
+          <form
+            id="mainForm"
+            method="POST"
+            action="/interested-timeshare/"
+            accept-charset="UTF-8"
+            enctype="multipart/form-data"
+          >
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortunit">Unit</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="resort"
+                  name="resortunit"
+                  :value="week.unit"
+                  disabled
+                />
+              </div>
+              <div class="col-md-6">
+                <label for="resortWeek">Week</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="week"
+                  name="resortWeek"
+                  :value="week.week"
+                  disabled
+                />
+              </div>
+            </div>
+            <br />
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortModule">Module</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="module"
+                  name="resortModule"
+                  :value="week.module"
+                  disabled
+                />
+              </div>
+              <div class="col-md-6">
+                <label for="price">Price</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="price"
+                  id="price"
+                  :value="'R ' + week.price"
+                  disabled
+                />
+              </div>
+            </div>
+            <br />
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortModule">Current Year Levy</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="levy"
+                  name="levy"
+                  :value="'R ' + week.currentLevy"
+                  disabled
+                />
+              </div>
+            </div>
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input class="form-control" type="text" name="name" placeholder="Name" />
+              </div>
+            </div>
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input
+                  class="form-control"
+                  type="number"
+                  name="mobile"
+                  placeholder="Contact Number"
+                />
+              </div>
+            </div>
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input class="form-control" type="email" name="email" placeholder="Email" />
+              </div>
+            </div>
+            <br />
+
+            <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
+
+            <a
+              class="btn btn-b-n even-width mr-auto"
+              href="/share-transfer-initiation-for-purchaser/"
+            >Make an Offer</a>
+
+            <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
+          </form>
+        </div>
+      </div>
+      <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>
+  </section>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  props: {
+    resortCode: {},
+    weekId: {},
+  },
+  mounted() {
+    this.initResort(this.resortCode);
+    this.initWeek(this.weekId);
+  },
+  computed: {
+    ...mapState('resort', [
+      'resort',
+      'description',
+      'image1',
+      'image2',
+      'image3',
+    ]),
+    ...mapState('week', ['week', 'contactDetails']),
+  },
+  methods: {
+    ...mapActions('resort', ['initResort']),
+    ...mapActions('week', ['initWeek']),
+  },
+};
+</script>
+<style scoped>
+.btn.btn-b-c {
+  background-color: #ffffff;
+  color: #60cbeb;
+  border-radius: 0;
+}
+
+.btn.btn-b-c:hover {
+  background-color: #089bf0;
+  color: #ffffff;
+}
+</style>

src/components/user/registerAgencySection.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <form method="POST">
+  <form>
     <div class="container" style="text-align:left">
       <div class="reg-page">
         <div class="regform" style="text-align:left">
@@ -10,7 +10,7 @@
             <input class="form-control" type="text" name="agencyname" placeholder="Agency Name" />
           </div>
           <div class="col-md-8" style="margin-bottom: 1em">
-            <eva-icon name="book" fill="lightgrey"></eva-icon>
+            <eva-icon name="book" fill="#60CBEB"></eva-icon>
             <input
               class="form-control"
               type="text"
@@ -19,7 +19,7 @@
             />
           </div>
           <div class="col-md-8">
-            <eva-icon name="clipboard" fill="lightgrey"></eva-icon>
+            <eva-icon name="clipboard" fill="#60CBEB"></eva-icon>
             <input
               class="form-control"
               type="text"
@@ -43,13 +43,13 @@
 
             <div class="row" style="text-align:left">
               <div class="col-md-8">
-                <eva-icon name="email" fill="lightgrey"></eva-icon>
+                <eva-icon name="email" fill="#60CBEB"></eva-icon>
                 <input class="form-control" type="text" name="email" placeholder="Email Address" />
                 <div class="form-group row"></div>
               </div>
 
               <div class="col-md-6" style="text-align:left">
-                <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
+                <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
                 <input
                   class="form-control"
                   type="text"
@@ -66,16 +66,36 @@
               </div>
               <div class="col-md-7" style="margin-bottom: 1em">
                 <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                <input class="form-control" type="text" name="password" placeholder="Password" />
+                <input
+                  class="form-control"
+                  :type="isPasswordShown"
+                  v-model="password"
+                  id="password"
+                  placeholder="Password"
+                  name="password"
+                  value
+                />
               </div>
               <div class="col-md-7" style="margin-bottom: 1em">
                 <eva-icon name="lock" fill="#60CBEB"></eva-icon>
                 <input
                   class="form-control"
-                  type="text"
-                  name="confirmpassword"
+                  :type="isPasswordShown"
+                  v-model="password"
+                  id="password"
                   placeholder="Confirm Password"
+                  name="confirmpassword"
+                  value
                 />
+                <div>
+                  <eva-icon
+                    v-if="!showPassword"
+                    name="eye-off"
+                    fill="#60CBEB"
+                    @click="togglePassword()"
+                  ></eva-icon>
+                  <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                </div>
               </div>
             </div>
           </div>
@@ -105,6 +125,30 @@ export default {
   },
   name: 'Agency',
   components: { RegisterPage },
+  data() {
+    return {
+      username: '',
+      user: null,
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
+      select: null,
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
+      password: '',
+    };
+  },
+  methods: {
+    togglePassword() {
+      this.showPassword = true;
+      this.isPasswordShown = 'text';
+    },
+    passwordToggled() {
+      this.showPassword = false;
+      this.isPasswordShown = 'password';
+    },
+  },
 };
 </script>
 

src/components/user/registerPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <form method="POST">
+  <form>
     <!-- eslint-disable max-len -->
     <div class="reg-page">
       <div class="regform">
@@ -18,13 +18,13 @@
 
           <div class="row" style="text-align:left">
             <div class="col-md-8">
-              <eva-icon name="email" fill="lightgrey"></eva-icon>
+              <eva-icon name="email" fill="#60CBEB"></eva-icon>
               <input class="form-control" type="text" name="email" placeholder="Email Address" />
               <div class="form-group row"></div>
             </div>
 
             <div class="col-md-6" style="text-align:left">
-              <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
+              <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
               <input
                 class="form-control"
                 type="text"
@@ -41,16 +41,36 @@
             </div>
             <div class="col-md-7" style="margin-bottom: 1em">
               <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-              <input class="form-control" type="text" name="password" placeholder="Password" />
+              <input
+                class="form-control"
+                :type="isPasswordShown"
+                v-model="password"
+                id="password"
+                placeholder="Password"
+                name="password"
+                value
+              />
             </div>
             <div class="col-md-7" style="margin-bottom: 1em">
               <eva-icon name="lock" fill="#60CBEB"></eva-icon>
               <input
                 class="form-control"
-                type="text"
-                name="confirmpassword"
+                :type="isPasswordShown"
+                v-model="password"
+                id="password"
                 placeholder="Confirm Password"
+                name="confirmpassword"
+                value
               />
+              <div>
+                <eva-icon
+                  v-if="!showPassword"
+                  name="eye-off"
+                  fill="#60CBEB"
+                  @click="togglePassword()"
+                ></eva-icon>
+                <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+              </div>
             </div>
           </div>
         </div>
@@ -74,6 +94,20 @@ export default {
     RegisterHeader: { type: String, default: undefined },
   },
   name: 'PrivateIndividual',
+  data() {
+    return {
+      username: '',
+      user: null,
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
+      select: null,
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
+      password: '',
+    };
+  },
   computed: {
     Header() {
       return this.RegisterHeader
@@ -81,6 +115,16 @@ export default {
         : 'Private Individual';
     },
   },
+  methods: {
+    togglePassword() {
+      this.showPassword = true;
+      this.isPasswordShown = 'text';
+    },
+    passwordToggled() {
+      this.showPassword = false;
+      this.isPasswordShown = 'password';
+    },
+  },
 };
 </script>
 

src/router/index.js

@@ -26,6 +26,7 @@ import changeLogPage from '../components/admin/status/changeLogPage.vue';
 import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue';
 
 import ResortPage from '../components/timeshare/resort/resortPage.vue';
+import UnitPage from '../components/timeshare/resort/unitPage.vue';
 
 import ContactUs from '../components/misc/contactUs.vue';
 
@@ -139,5 +140,11 @@ export default new Router({
     component: ResortPage,
     props: true,
   },
+  {
+    path: '/resort/:resortCode/:weekId',
+    name: 'UnitPage',
+    component: UnitPage,
+    props: true,
+  },
   ],
 });

src/store/index.js

@@ -8,6 +8,8 @@ import UnitConfigurationModule from './modules/timeshare/unitConfiguration';
 import TimeshareBuyModule from './modules/timeshare/buyPage';
 import SearchTabModule from './modules/searchTab';
 import ResortModule from './modules/timeshare/resort';
+import PropertyModule from './modules/property/property';
+import WeekModule from './modules/timeshare/week';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -20,5 +22,7 @@ export default new Vuex.Store({
     timeshareBuy: TimeshareBuyModule,
     searchTab: SearchTabModule,
     resort: ResortModule,
+    property: PropertyModule,
+    week: WeekModule,
   },
 });

src/store/modules/property/property.js

@@ -0,0 +1,107 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    property: null,
+    propertyImages: [],
+    propertyTypes: [],
+    propertyTypesRes: [],
+    propertyTypesCom: [],
+    propertyOverviewFields: [],
+    propertyFields: [],
+    properties: [],
+  },
+  mutations: {
+    setProperty(state, property) {
+      state.property = property;
+    },
+    setPropertyImages(state, images) {
+      state.propertyImages = images;
+    },
+    setPropertyTypes(state, types) {
+      state.propertyTypes = types;
+    },
+    setPropertyTypesRes(state, types) {
+      state.propertyTypesRes = types;
+    },
+    setPropertyTypesCom(state, types) {
+      state.propertyTypesCom = types;
+    },
+    setPropertyOverviewFields(state, fields) {
+      state.propertyOverviewFields = fields;
+    },
+    setPropertyFields(state, fields) {
+      state.propertyFields = fields;
+    },
+    updateCurrentProperty(state, property) {
+      state.property = property;
+    },
+    updateSearch(state, propertySearch) {
+      state.properties = propertySearch;
+    },
+  },
+  getters: {},
+  actions: {
+    getProperty({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/Property/${item.id}`)
+        .then(result => commit('setProperty', result.data))
+        .catch(console.error);
+    },
+    getPropertyImages({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/property/PropertyImage/getpropertyimages/${item.id}`)
+        .then(result => commit('setPropertyImages', result.data))
+        .catch(console.error);
+    },
+    getPropertyTypes({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/PropertyType/type/${item.propertyType}`)
+        .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(response => commit('setPropertyOverviewFields', response.data));
+    },
+    getPropertyFields({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/property/propertyfields/Propertytype/${item.propertyType}`)
+        .then(response => commit('setPropertyFields', response.data));
+    },
+    saveProperty({ commit }, item) {
+      axios
+        .post('http://localhost:57260/Property/Property', item.newProperty)
+        .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);
+    },
+  },
+};

src/store/modules/searchTab.js

@@ -20,27 +20,20 @@ export default {
   },
   getters: {},
   actions: {
-    getProvince({
-      commit,
-    }) {
-      axios.get('http://localhost:57260/region/province')
+    getProvince({ commit }) {
+      axios
+        .get('http://localhost:57260/region/province')
         .then(result => commit('setProvince', result.data))
         .catch(console.error);
     },
-    getCities({
-      commit,
-    }, province) {
+    getCities({ commit }, item) {
       axios
-        .get(`http://localhost:57260/region/city/getby/${province}`)
+        .get(`http://localhost:57260/region/city/getby/${item.province}`)
         .then(result => commit('setCities', result.data));
     },
-    getSuburbs({
-      commit,
-    }, item) {
+    getSuburbs({ commit }, item) {
       axios
-        .get(
-          `http://localhost:57260/region/Suburb/${item.province}/${item.city}`,
-        )
+        .get(`http://localhost:57260/region/Suburb/${item.province}/${item.city}`)
         .then(result => commit('setSuburbs', result.data));
     },
   },

src/store/modules/timeshare/buyPage.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from 'axios';
+import _ from 'lodash';
 
 export default {
   namespaced: true,

src/store/modules/timeshare/resort.js

@@ -10,11 +10,15 @@ export default {
     image2: '',
     image3: '',
     layout: '',
+    description: '',
   },
   mutations: {
     setResort(state, resort) {
       state.resort = resort;
     },
+    setDescription(state, description) {
+      state.description = description;
+    },
     clear(state) {
       state.resort = {};
       state.image1 = '';
@@ -43,11 +47,23 @@ export default {
     }, resortCode) {
       commit('clear');
       dispatch('getResort', resortCode);
+      dispatch('getDescription', resortCode);
       dispatch('getImage1', resortCode);
       dispatch('getImage2', resortCode);
       dispatch('getImage3', resortCode);
       dispatch('getLayout', resortCode);
     },
+    getDescription({
+      commit,
+    }, resortCode) {
+      axios.get(
+        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
+      )
+        .then((result) => {
+          commit('setDescription', result.data);
+        })
+        .catch(console.error);
+    },
     getResort({
       commit,
     }, resortCode) {

src/store/modules/timeshare/week.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    week: {
+      id: '',
+      unit: '',
+      week: '',
+      module: '',
+      price: '',
+      currentLevy: '',
+    },
+    contactDetails: {
+      name: '',
+      number: '',
+      email: '',
+    },
+  },
+  mutations: {
+    setWeek(state, week) {
+      state.week = week;
+    },
+  },
+  getters: {},
+  actions: {
+    initWeek({
+      commit,
+    }, weekId) {
+      commit('setWeek', {
+        id: weekId,
+        unit: '359',
+        week: 'N18',
+        module: '359/N18 River View',
+        price: 85000,
+        currentLevy: 5455,
+      });
+    },
+  },
+};