Property Pages - Save & search

src/components/property/propertyCard.vue

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

src/components/property/propertyPage.vue

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

src/components/property/propertySearchPage.vue

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

src/components/property/propertyeditPage.vue

@@ -1,5 +1,6 @@
 <template>
-  <div @submit.prevent="SubmitData">
+  <!-- eslint-disable max-len -->
+  <div>
     <div class="container">
       <section class="intro-single">
         <div class="container">
@@ -21,13 +22,7 @@
       </div>
       <div class="row mb-3">
         <div class="col-md-12">
-          <form
-            id="mainForm"
-            method="POST"
-            action="/to-sell"
-            accept-charset="UTF-8"
-            enctype="multipart/form-data"
-          >
+          <form id="mainForm">
             <div class="form-group row">
               <div class="col-md-4">
                 <label for="Property Type"></label>
@@ -37,10 +32,34 @@
                   id="propertyType"
                   v-model="property.propertyTypeId"
                 >
-                  <option value="0">Please select Property Type</option>
-                  <option v-for="item in propertyTypes" :value="item.id">{{ item.description }}</option>
+                  <option value="0">Please Select</option>
+                  <option
+                    v-for="item in propertyTypes"
+                    :value="item.id"
+                    :key="item.id"
+                  >{{ item.description }}</option>
                 </select>
               </div>
+              <div v-if="propertyType === 'Commercial'" class="col-md-4">
+                <label>Property Name</label>
+                <input
+                  class="form-control form-control-lg form-control-a"
+                  type="text"
+                  name="propertyName"
+                  id="propertyName"
+                  v-model="property.propertyName"
+                />
+              </div>
+              <div v-if="propertyType === 'Commercial'" class="col-md-4">
+                <label>Unit</label>
+                <input
+                  class="form-control form-control-lg form-control-a"
+                  type="text"
+                  name="unit"
+                  id="unit"
+                  v-model="property.unit"
+                />
+              </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
@@ -91,6 +110,7 @@
                   <option
                     v-for="province in provinces"
                     :value="province.id"
+                    :key="province.id"
                   >{{ province.description }}</option>
                 </select>
               </div>
@@ -103,8 +123,12 @@
                   @change="CitySelected"
                   v-model="property.cityId"
                 >
-                  <option value="0">Please select City</option>
-                  <option v-for="city in cities" :value="city.id">{{ city.description }}</option>
+                  <option value="0">Please Select</option>
+                  <option
+                    v-for="city in cities"
+                    :value="city.id"
+                    :key="city.id"
+                  >{{ city.description }}</option>
                 </select>
               </div>
               <div class="col-md-4">
@@ -115,8 +139,12 @@
                   id="suburbselector"
                   v-model="property.suburbId"
                 >
-                  <option value="0">Please select Suburb</option>
-                  <option v-for="suburb in suburbs" :value="suburb.id">{{ suburb.description }}</option>
+                  <option value="0">Please Select</option>
+                  <option
+                    v-for="suburb in suburbs"
+                    :value="suburb.id"
+                    :key="suburb.id"
+                  >{{ suburb.description }}</option>
                 </select>
               </div>
             </div>
@@ -155,15 +183,21 @@
                   placeholder="Property Description"
                   name="description"
                   v-model="property.description"
+                  id="description"
                 ></textarea>
                 <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>
             </div>
             <div class="form-group row" />
-            <UserField v-if="ApiRunning" :fields="propValuesProp[0].fields"></UserField>
+            <UserField
+              v-if="ApiRunning & propertyType === 'Residential'"
+              :fields="propValuesProp[0].fields"
+              :id="overviewProps"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+            ></UserField>
             <div class="form-group row" />
-            <div v-for="item in propertyValues">
+            <div v-for="item in propertyValues" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
@@ -171,7 +205,11 @@
                   </div>
                 </div>
               </div>
-              <UserField :fields="item.fields" :id="item.id" />
+              <UserField
+                :fields="item.fields"
+                :id="item.id"
+                @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              />
             </div>
             <div class="form-group row" />
             <div class="row">
@@ -181,8 +219,14 @@
                 </div>
               </div>
             </div>
-            <ImageLoad />
-            <button type="submit" class="btn btn-b-n" style="width: 85px; height:40px;">Save</button>
+            <ImageLoad :loadedImages="loadedImages" />
+            <button type="button" @click="SubmitData()" class="btn btn-a">Save</button>
+            <!-- <router-link
+              to="/property/search"
+              @click.stop.prevent="SubmitData()"
+              class="btn btn-b"
+              tag="button"
+            >Save</router-link>-->
           </form>
         </div>
       </div>
@@ -193,7 +237,7 @@
 <script>
 import UserField from "./propertyUserField.vue";
 import ImageLoad from "./propertyImage.vue";
-
+// https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
 export default {
   name: "PropertyEdit",
   components: {
@@ -202,7 +246,7 @@ export default {
   },
   data() {
     return {
-      ApiRunning: false,
+      ApiRunning: true,
       propertyType: "Residential",
       salesType: "Rental",
       imageFile: "",
@@ -216,6 +260,8 @@ export default {
       selectedCity: "",
       property: {
         propertyTypeId: 0,
+        propertyName: "",
+        unit: "",
         addressLine1: "",
         addressLine2: "",
         addressLine3: "",
@@ -225,25 +271,40 @@ export default {
         price: "",
         per: "",
         description: "",
-        isSale: false
-      }
+        isSale: false,
+        propertyUserFields: [],
+        propertyImages: []
+      },
+      images: [],
+      propertyFieldValues: []
     };
   },
   methods: {
     SubmitData() {
-      const axios = require("axios");
-      axios
-        .post("http://localhost:57260/Property/Property", this.property, {
-          headers: {
-            "Content-type": "application/json"
-          }
-        })
-        .then(response => {})
-        .catch(e => {
-          alert(e);
-        });
+      // let isDefault = true;
+      // this.images.forEach((imagedata) => {
+      //   this.property.propertyImages.push({
+      //     image: imagedata,
+      //     isDefault,
+      //   });
+      //   isDefault = false;
+      // });
+
+      // this.property.propertyUserFields = this.propertyFieldValues;
+
+      // const axios = require('axios');
+      // axios
+      //   .post('http://localhost:57260/Property/Property', this.property)
+      //   .then((response) => {})
+      //   .catch((e) => {
+      //     alert(e);
+      //   });
 
-      console.log(JSON.stringify(this.property));
+      // this.$router.push("/property/search");
+      this.$router.push({
+        path: "/property/search",
+        query: { type: this.salesType, propertyType: this.propertyType }
+      });
     },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
@@ -270,6 +331,21 @@ export default {
           )
           .then(response => (this.suburbs = response.data));
       }
+    },
+    loadedImages(values) {
+      this.images = values;
+    },
+    UpdateUserDefinedFields(item) {
+      let update = false;
+      this.propertyFieldValues.forEach(element => {
+        if (element.userDefinedFieldId === item.userDefinedFieldId) {
+          element.value = item.value;
+          update = true;
+        }
+      });
+      if (!update) {
+        this.propertyFieldValues.push(item);
+      }
     }
   },
   mounted() {
@@ -282,7 +358,9 @@ export default {
       .then(response => (this.propValuesProp = response.data));
 
     axios
-      .get("http://localhost:57260/Property/PropertyFields")
+      .get(
+        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
+      )
       .then(response => (this.propertyValues = response.data));
 
     axios
@@ -306,6 +384,12 @@ export default {
           `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
         )
         .then(response => (this.propertyTypes = response.data));
+
+      axios
+        .get(
+          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
+        )
+        .then(response => (this.propertyValues = response.data));
     }
   },
   watch: {