Property Search & view screens

package.json

     "core-js": "^2.6.5",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
+    "node-sass": "^4.12.0",
     "roboto-fontface": "*",
+    "sass-loader": "^7.3.1",
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.10",
     "vue-eva-icons": "^1.1.1",

public/img/ligthbox/close.svg

+<?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

+<?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

+<?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/property/propertyCard.vue

                   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">
 <script>
 export default {
   props: {
-    properties: Object
-  }
+    properties: Object,
+  },
 };
-</script>
+</script>

src/components/property/propertyImage.vue

     </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)" />
 
 <script>
 export default {
+  props: {
+    loadedImages: Function,
+  },
   data() {
     return {
       images: {},
-      image: []
+      image: [],
     };
   },
 
       if (!this.images.length) return;
 
       this.createImage(this.images);
+      this.loadedImages(this.image);
     },
 
     createImage(file) {
         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

 <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" 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">
                   <div class="col-sm-12">
                     <div class="title-box-d">
-                      <h3 class="title-d">Property Description</h3>
+                      <h3 class="title-d">property Description</h3>
                     </div>
                   </div>
                 </div>
-                <div class="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">
                     </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>
                       <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>
                   <div class="summary-list">
                     <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>
+                        <strong>property ID:</strong>
+                        <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>
 </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

+<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">
+        <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 {
+  data() {
+    return {
+      selectedType: 'Sale',
+      selectedProvince: 'All',
+      selectedCity: 'All',
+      selectedSuburb: 'All',
+    };
+  },
+  mounted() {
+    this.getProvince();
+    this.$emit('TypeSelectedUpdated', this.selectedType);
+  },
+  computed: {
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+  },
+  methods: {
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    TypeSelected(item) {
+      this.$emit('TypeSelectedUpdated', 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

   </div>
 </template>
 <script>
-import propertyCard from "../property/propertyCard.vue";
-import { isNull } from "util";
+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: '',
     };
   },
   computed: {
       this.city = this.$route.query.city;
       this.suburb = this.$route.query.suburb;
 
-      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';
       }
 
-      console.log(search);
-
-      const axios = require("axios");
+      const axios = require('axios');
       axios
         .get(
-          `http://localhost:57260/Property/Property/Search/${this.type}/${this.propertyType}/${this.province}/${this.city}/${this.suburb}`
+          `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

 <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'"
         type="number"
         name="currentField.name"
         id="currentField.id"
+        v-model="setFields[i]"
+        @change="UpdateSetFields(currentField, i)"
       />
       <input
         v-if="currentField.type === 'text'"
         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>
 
 <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

 </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: true,
-      propertyType: "Residential",
-      salesType: "Rental",
-      imageFile: "",
+      propertyType: 'Residential',
+      salesType: 'Rental',
+      imageFile: '',
       provinces: [],
       cities: [],
       suburbs: [],
       propertyValues: [],
       propValuesProp: [],
       propertyTypes: [],
-      selectedProvince: "",
-      selectedCity: "",
+      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: {
     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);
-      //   });
+      const axios = require('axios');
+      axios
+        .post('http://localhost:57260/Property/Property', this.property)
+        .then((response) => {})
+        .catch((e) => {
+          alert(e);
+        });
 
-      // 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) {
         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));
       }
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach(element => {
+      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/Propertytype/${this.propertyType}`
+        `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}`
+          `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

+<template>
+  <div>
+    <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,
+      caption: 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,
+    },
+  },
+  methods: {
+    lightboxEffect(curr) {
+      this.currentImage = curr;
+      this.bg = !this.bg;
+    },
+    next() {
+      if (this.currentImage < this.largeImages.length - 1) {
+        this.currentImage++;
+      } else {
+        this.currentImage = 0;
+      }
+    },
+    prev() {
+      if (this.currentImage > 0) {
+        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: 900px;
+    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

       <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">
               />
             </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"
+          <div class="col-md-12 mb-2">
+            <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
+              <li class="nav-item">
+                <a
+                  class="nav-link active"
+                  id="pills-TimeShare-tab"
+                  data-toggle="pill"
+                  href="#pills-TimeShare"
+                  role="tab"
+                  aria-controls="pills-TimeShare"
+                  aria-selected="true"
+                  v-on:click="updateType('Timeshare')"
+                >Timeshare</a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link"
+                  id="pills-Residential-tab"
+                  data-toggle="pill"
+                  href="#pills-Residential"
+                  role="tab"
+                  aria-controls="pills-Residential"
+                  aria-selected="false"
+                  v-on:click="updateType('Residential')"
+                >Residential</a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link active"
+                  id="pills-Commercial-tab"
+                  data-toggle="pill"
+                  href="#pills-Commercial"
+                  role="tab"
+                  aria-controls="pills-Commercial"
+                  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-TimeShare"
+                role="tabpanel"
+                aria-labelledby="pills-TimeShare-tab"
               >
-                <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"
+                <i>TimeShare search</i>
+              </div>
+              <div
+                class="tab-Residential fade"
+                id="pills-Residential"
+                role="tabpanel"
+                aria-labelledby="pills-Residential-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
+                  @TypeSelectedUpdated="TypeSelectedUpdated"
+                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
+                  @CitySelectedUpdated="CitySelectedUpdated"
+                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
+                />
+              </div>
+              <div
+                class="tab-pane fade"
+                id="pills-Commercial"
+                role="tabpanel"
+                aria-labelledby="pills-Commercial-tab"
               >
-                <option>All</option>
-                <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
-              </select>
+                <propertySearch />
+              </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>
+            <!-- <router-link to="/property/search" class="btn btn-b" tag="button">Search</router-link> -->
           </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: '',
     };
   },
-  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;
+    },
+    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() {
+      // if (
+      //   this.selectedPropertyType === 'residential'
+      //   || this.selectedPropertyType === 'commerial'
+      // ) {
+      this.$router.push({
+        path: '/property/search',
+        query: {
+          type: this.selectedType,
+          propertyType: this.selectedPropertyType,
+          province: this.selectedProvince,
+          city: this.selectedCity,
+          suburb: this.selectedSuburb,
+        },
+      });
+      // }
     },
   },
 };

src/store/index.js

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

src/store/modules/property/property.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    property: null,
+    propertyImages: [],
+  },
+  mutations: {
+    setProperty(state, property) {
+      state.property = property;
+    },
+    setPropertyImages(state, images) {
+      state.propertyImages = images;
+    },
+  },
+  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);
+    },
+  },
+};

src/store/modules/searchTab.js

   },
   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));
     },
   },