Merge branch 'master' of http://provision-sa.co.za:3000/Provision/UnivateProperties into master

public/css/newStyle.css

@@ -39,6 +39,40 @@
   font-family: "muli";
   font-size: 15px;
   color: rgb(118, 118, 118);
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+.quillWrapper .ql-snow.ql-toolbar {
+  border-left-width: 2px;
+  border-top-width: 2px;
+  border-right-width: 2px;
+  border-left-color: #1b75bb;
+  border-top-color: #1b75bb;
+  border-right-color: #1b75bb;
+  font-family: "Muli";
+}
+
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-left-width: 2px;
+  border-bottom-width: 2px;
+  border-right-width: 2px;
+  border-left-color: #1b75bb;
+  border-bottom-color: #1b75bb;
+  border-right-color: #1b75bb;
+  font-family: "Muli";
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.uniInput {
+  border-width: 2px;
+  border-color: #1b75bb;
+  padding: 10px 14px;
+  box-shadow: none;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: "Muli";
 }
 
 body {

src/components/misc/Disclaimer/WebsiteDisclaimer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <carouselSection />
+    <main id="main" style="margin-top:-20px;padding-bottom:50px">
+      <contentSection />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import carouselSection from "./carouselSection";
+import contentSection from "./contentSection";
+export default {
+  components: {
+    carouselSection,
+    contentSection
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/misc/Disclaimer/carouselSection.vue

@@ -0,0 +1,46 @@
+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content box">
+            <h2>Website Dislcaimer</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      style="margin-top:-50px"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/misc/WebsiteDisclaimer.vue → src/components/misc/Disclaimer/contentSection.vue

@@ -1,31 +1,27 @@
 <template>
-  <!-- eslint-disable max-len -->
-  <main id="main" style="margin-top:-20px;padding-bottom:450px">
-    <div class="container">
-      <div class="row">
-        <div class="col-sm-12">
-          <div class="section-header">
-            <h2>Website Disclaimer</h2>
-          </div>
-        </div>
-        <div class="col-md-12 text-left">
-          <br />
-          <p style="text-align:left">
+  <div class="container pt-5">
+    <div class="row mb-3">
+      <div class="col-sm-12 col-md-6">
+        <p style="text-align:left">
             Since the Company has limited control over the information and variables provided by
             users the Company accepts no responsibility for any loss or damage of whatsoever nature
             that may be caused or brought about, directly or indirectly, by the use of this Website
             or reliance on any information contained therein.
-          </p>
-          <p class="text-left">
+        </p>
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <p style="text-align:left">
             Any person who feels prejudiced by any information or variables contained on this
             Website shall look to the persons who provided such information in case of any action
             being taken.
-          </p>
-        </div>
+        </p>
       </div>
     </div>
-  </main>
+  </div>
 </template>
+
 <script>
 export default {};
 </script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/createProperty/carouselSection.vue

@@ -0,0 +1,48 @@
+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content">
+            <h2>List Commercial {{ salesType }} Property</h2>
+            <p>List the perfect commercial property</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      style="margin-top:-50px"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="img/intro-carousel/comm-1.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-2.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-3.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-4.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-5.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-6.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import carousel from "vue-owl-carousel";
+
+export default {
+  components: {
+    carousel
+  },
+  props: ["salesType"]
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/createProperty/commercialCreate.vue

@@ -0,0 +1,521 @@
+<template>
+  <div>
+    <carouselSection :salesType="salesType" />
+
+    <main id="main" style="margin-top:-20px">
+      <div class="container pt-5 pb-5">
+        <div class="row">
+          <div class="col-md-5">
+            <div v-if="!property.propertyName">
+              <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="propertyName"
+              v-model="property.propertyName"
+            />
+          </div>
+          <div class="col-md-5">
+            <select
+              class="form-control uniSelect"
+              name="propertyType"
+              id="propertyType"
+              v-model="property.propertyTypeId"
+              @change="PropertyTypeSelected"
+            >
+              <option value="0">Please select type *</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-2">
+            <div v-if="!property.unit">
+              <label for="unit" class="uniSelectLabel">UNIT</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="unit"
+              id="unit"
+              v-model="property.unit"
+            />
+          </div>
+        </div>
+        <div class="row my-5">
+          <div class="col-md-6">
+            <mapSection v-on:map-location="updateLocation" />
+          </div>
+          <div class="col-md-6">
+            <div class="row">
+              <div class="col-md-6">
+                <div v-if="property.price < 1">
+                  <label
+                    for="price"
+                    class="uniSelectLabel"
+                    style="text-transform:uppercase; margin-left:17px; background-color:white"
+                    >{{ salesType }} Price</label
+                  >
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="number"
+                  name="price"
+                  id="price"
+                  v-model="property.price"
+                />
+              </div>
+              <div v-if="salesType === 'Rental'" class="col-md-6">
+                <select
+                  class="form-control uniSelect"
+                  name="propertyType"
+                  id="propertyType"
+                  v-model="property.pricePer"
+                >
+                  <option value>Please select</option>
+                  <option value="Month">Month</option>
+                  <option value="Day">Day</option>
+                </select>
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <input
+                  type="date"
+                  class="form-control uniInput"
+                  name="date"
+                  v-model="property.dateAvailable"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-12">
+                <label for="Property Description" style="font-family:'muli'">Description:</label>
+                <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
+                <br />
+                <p>
+                  * A listing fee of R380 including VAT is payable to list your Property on the
+                  Uni-Vate website
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <div v-for="item in propertyFields" :key="item.id">
+              <div class="row">
+                <div class="col-sm-12">
+                  <div class="section-header">
+                    <h2>{{ item.name }}</h2>
+                  </div>
+                </div>
+              </div>
+              <UserField
+                :fields="item.fields"
+                :id="item.name"
+                @UpdateUserDefinedFields="UpdateUserDefinedFields"
+                :fieldValues="item.fields"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="section-header">
+              <h2>Media</h2>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-12">
+            <label class="uniSelectLabel">Virtual Tour (URL)</label>
+            <div class="input-group-prepend">
+              <input
+                class="form-control uniInput"
+                type="link"
+                name="vtlink"
+                id="vtlink"
+                v-model="property.virtualTour"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <label class="uniSelectLabel">Video (URL)</label>
+            <div class="input-group-prepend">
+              <input
+                class="form-control uniInput"
+                type="link"
+                name="vlink"
+                id="vlink"
+                v-model="property.video"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row mt-3">
+          <div class="col-md-6">
+            <div class="content-header">
+              <h2>Images</h2>
+            </div>
+
+            <div class="input-group-prepend"></div>
+          </div>
+        </div>
+        <ImageLoad
+          :loadedImages="loadedImages"
+          :savedImages="propertyImages"
+          @DefaultImage="UpdateDefaultImage"
+        />
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
+          Save
+        </button>
+        <div v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError">
+          <p class="alert myError">
+            Missing fields. Please fill in all required fields. Marked with *
+          </p>
+        </div>
+        <div v-if="wait" id="preloader"></div>
+        <!-- <div class="row">
+          <div class="col-md-6">
+            <div v-if="!property.addressLine1">
+              <label for="unit" class="uniSelectLabel">STREET NUMBER</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="streetnumber"
+              v-model="property.addressLine1"
+            />
+          </div>
+          <div class="col-md-6">
+            <div v-if="!property.addressLine2">
+              <label for="streetname" class="uniSelectLabel">STREET NAME</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="streetname"
+              id="streetname"
+              v-model="property.addressLine2"
+            />
+          </div>
+        </div>
+        <div class="row my-3">
+          <div class="col-md-6">
+            <div v-if="!property.provinceId">
+              <label for="province" class="uniSelectLabel">PROVINCE</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="province"
+              v-model="selectedProvince"
+            />
+          </div>
+          <div class="col-md-6">
+            <div v-if="!property.cityId">
+              <label for="city" class="uniSelectLabel">CITY</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="city"
+              id="city"
+              v-model="selectedCity"
+            />
+          </div>
+        </div>
+        <div class="row my-3">
+          <div class="col-md-6">
+            <div v-if="!property.suburbId">
+              <label for="suburb" class="uniSelectLabel">SUBURB</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="suburb"
+              v-model="selectedSuburb"
+            />
+          </div>
+          <div class="col-md-6">
+            <div v-if="!property.addressLine3">
+              <label for="code" class="uniSelectLabel">POSTAL CODE</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="code"
+              id="code"
+              v-model="property.addressLine3"
+            />
+          </div>
+        </div> -->
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import { VueEditor } from "vue2-editor";
+import UserField from "../../propertyUserField.vue";
+import ImageLoad from "../../propertyImage.vue";
+import Log from "../../../../assets/Log";
+import carouselSection from "./carouselSection";
+import mapSection from "../../mapSection";
+
+export default {
+  name: "PropertyCreate",
+  components: {
+    UserField,
+    ImageLoad,
+    VueEditor,
+    carouselSection,
+    mapSection
+  },
+  data() {
+    return {
+      propertyType: "Commercial",
+      salesType: "Rental",
+      selectedProvince: "",
+      selectedCity: "",
+      selectedSuburb: "",
+      images: [],
+      propertyFieldValues: [],
+      defaultImage: 0,
+      wait: false,
+      customToolbar: [
+        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+        [{ script: "sub" }, { script: "super" }],
+        [{ indent: "-1" }, { indent: "+1" }]
+      ],
+      error: "",
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
+      showDateError: false,
+      user: Log.getUser(),
+      mayEdit: Log.isLoggedIn()
+    };
+  },
+  methods: {
+    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
+    ...mapActions("property", [
+      "getPropertyTypes",
+      "getPropertyOverviewFields",
+      "getPropertyFields",
+      "saveProperty",
+      "getProperty",
+      "getPropertyImages",
+      "clearProperty",
+      "clearPropertyImages",
+      "getPropertyEditDisplay",
+      "getPropertySavedOverviewFields",
+      "getPropertySavedFields",
+      "getSavedPropertyData"
+    ]),
+    updateLocation(place) {
+      this.property.addressLine1 = place.mapComponents[0].short_name;
+      this.property.addressLine2 = place.mapComponents[1].short_name;
+      this.property.addressLine3 = place.mapComponents[7].short_name;
+      this.property.provinceId = place.provinceId;
+      this.property.cityId = place.cityId;
+      this.property.suburbId = place.suburbId;
+      this.property.propertCoords = place.coords;
+    },
+    TypeChanged() {
+      this.property.propertyUsageType = this.propertyType;
+    },
+    SubmitData() {
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.provinceId === 0) {
+        this.showProvinceError = true;
+      }
+      if (this.property.cityId === 0) {
+        this.showCityError = true;
+      }
+      if (this.property.suburbId === 0) {
+        this.showSuburbError = true;
+      }
+
+      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
+        this.showDateError = true;
+      }
+
+      if (
+        this.showPropertyTypeError ||
+        this.showProvinceError ||
+        this.showCityError ||
+        this.showSuburbError ||
+        this.showDateError
+      ) {
+        return;
+      }
+
+      this.wait = true;
+      if (this.salesType === "Sale") {
+        this.property.isSale = true;
+        this.property.dateAvailable = new Date();
+      }
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < this.images.length; i++) {
+        let setAsDefault = false;
+        if (i === this.defaultImage) {
+          setAsDefault = true;
+        }
+        this.property.propertyImages.push({
+          image: this.images[i],
+          isDefault: setAsDefault
+        });
+      }
+      this.property.propertyUserFields = this.propertyFieldValues;
+
+      if (this.user) {
+        this.property.userId = this.user.id;
+      }
+
+      this.saveProperty(this.property)
+        .then(fulfilled => {
+          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
+        })
+        .catch(error => {
+          console.log(error.message);
+        });
+    },
+    Close() {
+      this.$router.push("/property/admin/list/my");
+    },
+    Login() {
+      this.$router.push("/user/login");
+    },
+    PropertyTypeSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.showPropertyTypeError = false;
+      } else {
+        this.showPropertyTypeError = true;
+      }
+    },
+    ProvinceSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+        this.showProvinceError = false;
+      } else {
+        this.showProvinceError = true;
+      }
+    },
+    CitySelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
+        this.getSuburbs(
+          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
+        );
+        this.showCityError = false;
+      } else {
+        this.showCityError = true;
+      }
+    },
+    getPostalCode(item) {
+      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
+      if (item.target.options.selectedIndex > 0) {
+        this.showSuburbError = false;
+      } else {
+        this.showSuburbError = true;
+      }
+    },
+    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);
+      }
+    },
+    UpdateDefaultImage(item) {
+      this.defaultImage = item;
+    }
+  },
+  mounted() {
+    this.wait = false;
+    this.clearProperty();
+    this.clearPropertyImages();
+    this.images = [];
+    this.defaultImage = 0;
+
+    if (this.propertyOverviewFields.length > 0) {
+      this.propertyOverviewFields = [];
+    }
+    if (this.propertyFields.length > 0) {
+      this.propertyFields = [];
+    }
+    if (this.property.description !== "") {
+      this.property.description = "";
+    }
+
+    if (this.$route.params.propertyUsageType) {
+      this.propertyType = this.$route.params.propertyUsageType;
+    }
+    this.salesType = this.$route.params.saleType;
+
+    this.getPropertyTypes(this.propertyType);
+
+    this.getProvince();
+    this.getPropertyOverviewFields();
+    this.getPropertyFields(this.propertyType);
+  },
+  computed: {
+    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
+    ...mapState("property", [
+      "propertyTypes",
+      "propertyOverviewFields",
+      "propertyFields",
+      "property",
+      "propertyImages"
+    ]),
+    ...mapState("authentication", ["user"]),
+    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;
+      if (this.property && this.property.propertyUsageType) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertyType = this.property.propertyUsageType;
+      }
+
+      if (!this.$route.query.id) {
+        this.getPropertyFields(this.propertyType);
+      }
+
+      this.getPropertyTypes(this.propertyType);
+
+      return this.propertyType;
+    }
+  },
+  watch: {
+    SalesTypeChanged() {
+      return null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/enquireNow/carouselSection.vue

@@ -0,0 +1,46 @@
+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content box">
+            <h2>More Info</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      style="margin-top:-50px"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/enquireNow/contentSection.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="container pt-5">
+        <div class="row mb-8">
+          <div class="col-md-6">
+            <h3>Mooikloof Office Park</h3>
+            <p>
+              The cream of the crop, no costs were spared on the finishing touches of this beautiful office.  This 160m2 office is ideally situated in Pretoria East in the hub of business expansion for Pretoria.  Two superb, air-conditioned ground floor units divided only by glass and completed with two small recording studios.  The Space is currently used for corporate boardroom and training centre functions and can accommodate up to 25 delegates.  Stunning finishes y interior designer complete the unit with style and class.  The perfect address and office for the established professional for the training centre of your dreams! 
+            </p>
+            <p><strong>View by Appointment only!</strong></p>
+            <br/>
+              <p></p>
+              To arrange a viewing contact Mynie:
+              <div class="col-md-4">
+                <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a
+                  ><br />
+                  <a href="tel:0124921238">+27 (0) 12 492 1238</a>
+              </div>
+          </div>
+          <div class="col-md-6">
+            <form >
+              <div class="form-group row">
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Unit"
+            placeholder="Unit"
+            data-rule="minlen:4"
+            v-model="Unit"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Price"
+            placeholder="Price"
+            data-rule="minlen:4"
+            v-model="Price"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Size"
+            placeholder="Size"
+            data-rule="minlen:4"
+            v-model="Size"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Suburb"
+            placeholder="Suburb"
+            data-rule="minlen:4"
+            v-model="Suburb"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-12">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Name"
+            placeholder="Name"
+            data-rule="minlen:4"
+            v-model="Name"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-12">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="ContactNumber"
+            placeholder="ContactNumber"
+            data-rule="minlen:4"
+            v-model="ContactNumber"
+          />
+          <div class="validation"></div>
+        </div>
+                <div class="form-group col-md-12">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="Email"
+            placeholder="Email"
+            data-rule="minlen:4"
+            v-model="Email"
+          />
+          <div class="validation"></div>
+        </div>
+              </div>
+              <div class="text-center">
+        <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
+      </div>
+      <div v-if="boolSent">
+        <alert :text="alertMsg" :type="'SUCCESS'" />
+      </div>
+            </form>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import alert from '../../../shared/alert';
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      alertMsg: "Sent! You can expect a reply soon!",
+      name: null,
+      email: null,
+      phone: null,
+      property: null,
+      message: null,
+      boolSent: false
+    };
+  },
+  mounted() {
+    this.boolSent = false;
+  },
+  methods: {
+    async sendMail() {
+      var mailObj = {
+        toAddress: "lenes@provision-sa.com",
+        fromAddress: "jlouw365@gmail.com",
+        name: this.name,
+        email: this.email,
+        phone: this.phone,
+        property: this.property,
+        message: this.message
+      };
+
+      const response = await axios.post("/api/mail/1", mailObj);
+
+      if (response.status === 200) {
+        this.boolSent = true;
+      } else {
+        console.log("Error");
+      }
+    },
+    countDownChanged(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/enquireNow/enquirenow.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <carouselSection />
+    <main id="main" style="margin-top:-20px;padding-bottom:50px">
+      <contentSection />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import carouselSection from "./carouselSection";
+import contentSection from "./contentSection";
+export default {
+  components: {
+    carouselSection,
+    contentSection
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/singleView/contentSection.vue

@@ -27,21 +27,23 @@
 
           <div class="panel-left p-5" style="margin-top:140px; margin-bottom:50px">
             <h2>Property Detial</h2>
-            <p>{{ property.addressLine1 }}</p>
-            <p>Town, Suburb</p>
+            <p>{{ property.addressLine1 }} {{ property.addressLine2 }}</p>
+            <p>{{ property.city.description }}, {{ property.suburb.description }}</p>
             <p>{{ property.shortDescription }}</p>
-            <p>{{ property.price }}</p>
+            <p>{{ property.price | toCurrency }}</p>
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
           </div>
         </div>
         <div class="col-md-8 p-5 resort-profile">
-          <h2>{{ property.propertyName }} / {{ property.addressLine1 }}</h2>
+          <h2>
+            {{ property.propertyName }} / {{ property.addressLine1 }} {{ property.addressLine2 }}
+          </h2>
           <div>
             <table class="table table-striped">
               <thead>
                 <tr>
                   <th scope="col">Reference</th>
-                  <th scope="col">Size</th>
+                  <th scope="col">Unit</th>
                   <th scope="col">Location</th>
                   <th scope="col">Kitchen</th>
                   <th scope="col">Extras</th>
@@ -50,12 +52,23 @@
               </thead>
               <tbody>
                 <tr>
-                  <td>#123456</td>
-                  <td>#m2</td>
+                  <td>#{{ property.id }}</td>
+                  <td>#{{ property.unit }}</td>
                   <td>Second Floor</td>
                   <td>yes</td>
-                  <td>open plan</td>
+                  <td>
+                    <div class="row" v-for="(feat, i) in property.displayData[0].values" :key="i">
+                      <div class="col" v-if="feat.value.toUpperCase() !== 'NO'">
+                        <div></div>
+                        {{ feat.name }} ({{ feat.value }})
+                      </div>
+                    </div>
+                  </td>
                   <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
+                  <td>open plan</td>
+                  <td>
+                    <router-link to="/EnquireNow">More Info</router-link>
+                  </td>
                 </tr>
                 <tr>
                   <td>#123456</td>
@@ -63,25 +76,25 @@
                   <td>Top Floor</td>
                   <td>yes</td>
                   <td>open plan</td>
-                  <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
+                  <td><router-link to="/EnquireNow">More Info</router-link></td>
                 </tr>
               </tbody>
             </table>
           </div>
           <p></p>
 
-          <div class="d-flex mt-3">
+          <!-- <div class="d-flex mt-3">
             <iframe
               width="100%"
               height="200"
               id="gmap_canvas"
-              src="https://maps.google.com/maps?q=ngwenya%20lodge&t=&z=13&ie=UTF8&iwloc=&output=embed"
+              src=""
               frameborder="0"
               scrolling="no"
               marginheight="0"
               marginwidth="0"
             ></iframe>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -99,6 +112,9 @@ export default {
     property: {},
     propertyImages: {}
   },
+  mounted() {
+    console.log(this.property);
+  },
   data() {
     return {
       index: null,

src/components/property/mapSection.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <gmap-autocomplete
+      class="form-control mb-3 uniInput"
+      @place_changed="setPlace"
+    ></gmap-autocomplete>
+    <GmapMap
+      :center="mapCenter"
+      :zoom="mapZoom"
+      map-type-id="terrain"
+      style="width: 100%; height: 500px"
+      ref="map"
+    >
+      <GmapMarker v-if="this.place" :position="mapCenter" :clickable="true" :draggable="false" />
+    </GmapMap>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import { gmapApi } from "vue2-google-maps";
+export default {
+  computed: {
+    google: gmapApi,
+    ...mapState("searchTab", ["provinces", "cities", "suburbs"])
+  },
+  data() {
+    return {
+      place: null,
+      mapCenter: { lat: -26.195246, lng: 28.034088 },
+      mapZoom: 11,
+      selectedProvince: "",
+      selectedCity: "",
+      selectedSuburb: "",
+      mapObj: {
+        provinceId: "",
+        cityId: "",
+        suburbId: "",
+        mapComponents: null
+      }
+    };
+  },
+
+  methods: {
+    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
+    async pullProvince(provinceParam) {
+      await this.provinces.forEach(province => {
+        if (province.code === provinceParam) {
+          this.mapObj.provinceId = province.id;
+          this.selectedProvince = province.description;
+        }
+      });
+      await this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      return Promise.resolve();
+    },
+    async pullCities(cityParam) {
+      await this.cities.forEach(city => {
+        if (city.description === cityParam) {
+          this.mapObj.cityId = city.id;
+          this.selectedCity = city.description;
+        }
+      });
+      await this.getSuburbs(
+        Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
+      );
+      return Promise.resolve();
+    },
+    async pullSuburbs(suburbParam) {
+      await this.suburbs.forEach(suburb => {
+        if (suburb.description === suburbParam) {
+          this.mapObj.suburbId = suburb.id;
+          this.selectedSuburb = suburb.description;
+        }
+      });
+      return Promise.resolve();
+    },
+    setPlace(place) {
+      this.place = place;
+      this.mapCenter = place.geometry.location;
+      this.mapZoom = 17;
+      this.mapObj.mapComponents = place.address_components;
+
+      this.pullProvince(place.address_components[5].short_name).then(() => {
+        setTimeout(
+          () =>
+            this.pullCities(place.address_components[3].short_name).then(() => {
+              setTimeout(
+                () =>
+                  this.pullSuburbs(place.address_components[2].short_name).then(() => {
+                    var coords = place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
+                    this.mapObj.coords = coords;
+                    this.$emit("map-location", this.mapObj);
+                  }),
+                500
+              );
+            }),
+          500
+        );
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/propertyImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <label class="btn btn-b-n" style="width: 85px; height:40px;">
+      <label class="btn-solid-blue">
         Upload
         <input
           type="file"
@@ -28,9 +28,12 @@
         <label v-if="allowMultiple" for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
-        <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
+        <!-- <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
           <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
-        </span>
+        </span> -->
+        <button align="center" class="imageDeleteButton" @click="removeImage(key)">
+          <i class="fa fa-trash"></i>
+        </button>
       </div>
       <br />
     </div>
@@ -42,13 +45,13 @@ export default {
   props: {
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
-    allowMultiple: { type: Boolean, default: () => true },
+    allowMultiple: { type: Boolean, default: () => true }
   },
   data() {
     return {
       images: {},
       image: [],
-      imagesDefault: [],
+      imagesDefault: []
     };
   },
   // Commented out for now.
@@ -81,7 +84,7 @@ export default {
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = (e) => {
+        reader.onload = e => {
           vm.image.push(e.target.result);
         };
         reader.readAsDataURL(file[i]);
@@ -93,7 +96,7 @@ export default {
       this.images.splice(key, 1);
 
       if (!this.image.length) {
-        this.$refs.im.value = '';
+        this.$refs.im.value = "";
       }
     },
 
@@ -104,9 +107,31 @@ export default {
             this.imagesDefault[i] = false;
           }
         }
-        this.$emit('DefaultImage', index);
+        this.$emit("DefaultImage", index);
       }
-    },
-  },
+    }
+  }
 };
 </script>
+
+<style lang="scss" scoped>
+.imageDeleteButton {
+  background: #d9534f;
+  border-width: 0px;
+  width: 150px;
+  margin-left: 0;
+  font-family: "Muli";
+  font-size: 15px;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 10px 32px;
+  border-radius: 2px;
+  transition-duration: 5s;
+  margin: 10px;
+  color: #fff;
+}
+
+.imageDeleteButton:hover i {
+  color: #000;
+}
+</style>

src/components/property/propertyUserField.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="form-group row">
+  <div class="row">
     <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
-      <label>{{ currentField.name }}</label>
+      <div v-if="!setFields[i]">
+        <label class="uniSelectLabel">{{ currentField.name }}</label>
+      </div>
+
       <div class="input-group-prepend">
-        <span class="input-group-text" style="color: #60CBEB">
+        <!-- <span class="input-group-text" style="color: #60CBEB">
           <b>{{ GetFirstLetter(currentField.name) }}</b>
-        </span>
+        </span> -->
         <input
           v-if="currentField.type === 'number'"
-          class="form-control"
+          class="form-control uniInput"
           type="number"
           name="currentField.name"
           id="currentField.id"
@@ -17,7 +20,7 @@
         />
         <input
           v-if="currentField.type === 'text'"
-          class="form-control"
+          class="form-control uniInput"
           type="text"
           name="currentField.name"
           id="currentField.id"
@@ -26,7 +29,7 @@
         />
         <select
           v-if="currentField.type === 'yesno'"
-          class="form-control"
+          class="form-control uniSelect"
           id="currentField.id"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
@@ -41,29 +44,29 @@
 
 <script>
 export default {
-  name: 'UserDefinedField',
+  name: "UserDefinedField",
   props: {
-    fields: { type: Array, default: () => [] },
+    fields: { type: Array, default: () => [] }
   },
   data() {
     return {
-      setFields: [],
+      setFields: []
     };
   },
   methods: {
     UpdateSetFields(field, index) {
       const item = {
         userDefinedFieldId: field.id,
-        value: this.setFields[index],
+        value: this.setFields[index]
       };
-      this.$emit('UpdateUserDefinedFields', item);
+      this.$emit("UpdateUserDefinedFields", item);
     },
     GetFirstLetter(value) {
       if (value) {
         return value.slice(0, 1);
       }
-      return '';
-    },
-  },
+      return "";
+    }
+  }
 };
 </script>

src/components/property/residential/createProperty/carouselSection.vue

@@ -0,0 +1,48 @@
+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content">
+            <h2>List Residential {{ salesType }} Property</h2>
+            <p>Make a house home</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      style="margin-top:-50px"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="img/intro-carousel/comm-1.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-2.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-3.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-4.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-5.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-6.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import carousel from "vue-owl-carousel";
+
+export default {
+  components: {
+    carousel
+  },
+  props: ["salesType"]
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/residential/createProperty/residentialCreate.vue

@@ -0,0 +1,533 @@
+<template>
+  <div>
+    <carouselSection :salesType="salesType" />
+
+    <main id="main" style="margin-top:-20px">
+      <div class="container pt-5 pb-5">
+        <div class="row">
+          <div class="col-md-5">
+            <div v-if="!property.propertyName">
+              <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="propertyName"
+              v-model="property.propertyName"
+            />
+          </div>
+          <div class="col-md-5">
+            <select
+              class="form-control uniSelect"
+              name="propertyType"
+              id="propertyType"
+              v-model="property.propertyTypeId"
+              @change="PropertyTypeSelected"
+            >
+              <option value="0">Please select type *</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-2">
+            <div v-if="!property.unit">
+              <label for="unit" class="uniSelectLabel">UNIT</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="unit"
+              id="unit"
+              v-model="property.unit"
+            />
+          </div>
+        </div>
+        <div class="row my-5">
+          <div class="col-md-6">
+            <mapSection v-on:map-location="updateLocation" />
+          </div>
+          <div class="col-md-6">
+            <div class="row">
+              <div class="col-md-6">
+                <div v-if="property.price < 1">
+                  <label
+                    for="price"
+                    class="uniSelectLabel"
+                    style="text-transform:uppercase; margin-left:17px; background-color:white"
+                    >{{ salesType }} Price</label
+                  >
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="number"
+                  name="price"
+                  id="price"
+                  v-model="property.price"
+                />
+              </div>
+              <div v-if="salesType === 'Rental'" class="col-md-6">
+                <select
+                  class="form-control uniSelect"
+                  name="propertyType"
+                  id="propertyType"
+                  v-model="property.pricePer"
+                >
+                  <option value>Please select</option>
+                  <option value="Month">Month</option>
+                  <option value="Day">Day</option>
+                </select>
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <input
+                  type="date"
+                  class="form-control uniInput"
+                  name="date"
+                  v-model="property.dateAvailable"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-12">
+                <label for="Property Description" style="font-family:'muli'">Description:</label>
+                <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
+                <br />
+                <p>
+                  * A listing fee of R380 including VAT is payable to list your Property on the
+                  Uni-Vate website
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class=" row" />
+
+        <div class="section-header">
+          <h2>Extra Information</h2>
+        </div>
+
+        <UserField
+          v-if="propertyOverviewFields.length > 0"
+          :fields="propertyOverviewFields[0].fields"
+          @UpdateUserDefinedFields="UpdateUserDefinedFields"
+          :id="1"
+        ></UserField>
+        <div class="row">
+          <div class="col-md-12">
+            <div v-for="item in propertyFields" :key="item.id">
+              <div class="row">
+                <div class="col-sm-12">
+                  <div class="section-header">
+                    <h2>{{ item.name }}</h2>
+                  </div>
+                </div>
+              </div>
+              <UserField
+                :fields="item.fields"
+                :id="item.name"
+                @UpdateUserDefinedFields="UpdateUserDefinedFields"
+                :fieldValues="item.fields"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="section-header">
+              <h2>Media</h2>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-12">
+            <label class="uniSelectLabel">Virtual Tour (URL)</label>
+            <div class="input-group-prepend">
+              <input
+                class="form-control uniInput"
+                type="link"
+                name="vtlink"
+                id="vtlink"
+                v-model="property.virtualTour"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <label class="uniSelectLabel">Video (URL)</label>
+            <div class="input-group-prepend">
+              <input
+                class="form-control uniInput"
+                type="link"
+                name="vlink"
+                id="vlink"
+                v-model="property.video"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row mt-3">
+          <div class="col-md-6">
+            <div class="content-header">
+              <h2>Images</h2>
+            </div>
+
+            <div class="input-group-prepend"></div>
+          </div>
+        </div>
+        <ImageLoad
+          :loadedImages="loadedImages"
+          :savedImages="propertyImages"
+          @DefaultImage="UpdateDefaultImage"
+        />
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
+          Save
+        </button>
+        <div v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError">
+          <p class="alert myError">
+            Missing fields. Please fill in all required fields. Marked with *
+          </p>
+        </div>
+        <div v-if="wait" id="preloader"></div>
+        <!-- <div class="row">
+          <div class="col-md-6">
+            <div v-if="!property.addressLine1">
+              <label for="unit" class="uniSelectLabel">STREET NUMBER</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="streetnumber"
+              v-model="property.addressLine1"
+            />
+          </div>
+          <div class="col-md-6">
+            <div v-if="!property.addressLine2">
+              <label for="streetname" class="uniSelectLabel">STREET NAME</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="streetname"
+              id="streetname"
+              v-model="property.addressLine2"
+            />
+          </div>
+        </div>
+        <div class="row my-3">
+          <div class="col-md-6">
+            <div v-if="!property.provinceId">
+              <label for="province" class="uniSelectLabel">PROVINCE</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="province"
+              v-model="selectedProvince"
+            />
+          </div>
+          <div class="col-md-6">
+            <div v-if="!property.cityId">
+              <label for="city" class="uniSelectLabel">CITY</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="city"
+              id="city"
+              v-model="selectedCity"
+            />
+          </div>
+        </div>
+        <div class="row my-3">
+          <div class="col-md-6">
+            <div v-if="!property.suburbId">
+              <label for="suburb" class="uniSelectLabel">SUBURB</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="suburb"
+              v-model="selectedSuburb"
+            />
+          </div>
+          <div class="col-md-6">
+            <div v-if="!property.addressLine3">
+              <label for="code" class="uniSelectLabel">POSTAL CODE</label>
+            </div>
+            <input
+              class="form-control uniInput"
+              type="text"
+              name="code"
+              id="code"
+              v-model="property.addressLine3"
+            />
+          </div>
+        </div> -->
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import { VueEditor } from "vue2-editor";
+import UserField from "../../propertyUserField.vue";
+import ImageLoad from "../../propertyImage.vue";
+import Log from "../../../../assets/Log";
+import carouselSection from "./carouselSection";
+import mapSection from "../../mapSection";
+
+export default {
+  name: "PropertyCreate",
+  components: {
+    UserField,
+    ImageLoad,
+    VueEditor,
+    carouselSection,
+    mapSection
+  },
+  data() {
+    return {
+      propertyType: "Residential",
+      salesType: "Rental",
+      selectedProvince: "",
+      selectedCity: "",
+      selectedSuburb: "",
+      images: [],
+      propertyFieldValues: [],
+      defaultImage: 0,
+      wait: false,
+      customToolbar: [
+        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+        [{ script: "sub" }, { script: "super" }],
+        [{ indent: "-1" }, { indent: "+1" }]
+      ],
+      error: "",
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
+      showDateError: false,
+      user: Log.getUser(),
+      mayEdit: Log.isLoggedIn()
+    };
+  },
+  methods: {
+    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
+    ...mapActions("property", [
+      "getPropertyTypes",
+      "getPropertyOverviewFields",
+      "getPropertyFields",
+      "saveProperty",
+      "getProperty",
+      "getPropertyImages",
+      "clearProperty",
+      "clearPropertyImages",
+      "getPropertyEditDisplay",
+      "getPropertySavedOverviewFields",
+      "getPropertySavedFields",
+      "getSavedPropertyData"
+    ]),
+    updateLocation(place) {
+      this.property.addressLine1 = place.mapComponents[0].short_name;
+      this.property.addressLine2 = place.mapComponents[1].short_name;
+      this.property.addressLine3 = place.mapComponents[7].short_name;
+      this.property.provinceId = place.provinceId;
+      this.property.cityId = place.cityId;
+      this.property.suburbId = place.suburbId;
+      this.property.propertCoords = place.coords;
+    },
+    TypeChanged() {
+      this.property.propertyUsageType = this.propertyType;
+    },
+    SubmitData() {
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.provinceId === 0) {
+        this.showProvinceError = true;
+      }
+      if (this.property.cityId === 0) {
+        this.showCityError = true;
+      }
+      if (this.property.suburbId === 0) {
+        this.showSuburbError = true;
+      }
+
+      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
+        this.showDateError = true;
+      }
+
+      if (
+        this.showPropertyTypeError ||
+        this.showProvinceError ||
+        this.showCityError ||
+        this.showSuburbError ||
+        this.showDateError
+      ) {
+        return;
+      }
+
+      this.wait = true;
+      if (this.salesType === "Sale") {
+        this.property.isSale = true;
+        this.property.dateAvailable = new Date();
+      }
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < this.images.length; i++) {
+        let setAsDefault = false;
+        if (i === this.defaultImage) {
+          setAsDefault = true;
+        }
+        this.property.propertyImages.push({
+          image: this.images[i],
+          isDefault: setAsDefault
+        });
+      }
+      this.property.propertyUserFields = this.propertyFieldValues;
+
+      if (this.user) {
+        this.property.userId = this.user.id;
+      }
+
+      this.saveProperty(this.property)
+        .then(fulfilled => {
+          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
+        })
+        .catch(error => {
+          console.log(error.message);
+        });
+    },
+    Close() {
+      this.$router.push("/property/admin/list/my");
+    },
+    Login() {
+      this.$router.push("/user/login");
+    },
+    PropertyTypeSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.showPropertyTypeError = false;
+      } else {
+        this.showPropertyTypeError = true;
+      }
+    },
+    ProvinceSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+        this.showProvinceError = false;
+      } else {
+        this.showProvinceError = true;
+      }
+    },
+    CitySelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
+        this.getSuburbs(
+          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
+        );
+        this.showCityError = false;
+      } else {
+        this.showCityError = true;
+      }
+    },
+    getPostalCode(item) {
+      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
+      if (item.target.options.selectedIndex > 0) {
+        this.showSuburbError = false;
+      } else {
+        this.showSuburbError = true;
+      }
+    },
+    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);
+      }
+    },
+    UpdateDefaultImage(item) {
+      this.defaultImage = item;
+    }
+  },
+  mounted() {
+    this.wait = false;
+    this.clearProperty();
+    this.clearPropertyImages();
+    this.images = [];
+    this.defaultImage = 0;
+
+    if (this.propertyOverviewFields.length > 0) {
+      this.propertyOverviewFields = [];
+    }
+    if (this.propertyFields.length > 0) {
+      this.propertyFields = [];
+    }
+    if (this.property.description !== "") {
+      this.property.description = "";
+    }
+
+    if (this.$route.params.propertyUsageType) {
+      this.propertyType = this.$route.params.propertyUsageType;
+    }
+    this.salesType = this.$route.params.saleType;
+
+    this.getPropertyTypes(this.propertyType);
+
+    this.getProvince();
+    this.getPropertyOverviewFields();
+    this.getPropertyFields(this.propertyType);
+  },
+  computed: {
+    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
+    ...mapState("property", [
+      "propertyTypes",
+      "propertyOverviewFields",
+      "propertyFields",
+      "property",
+      "propertyImages"
+    ]),
+    ...mapState("authentication", ["user"]),
+    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;
+      if (this.property && this.property.propertyUsageType) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertyType = this.property.propertyUsageType;
+      }
+
+      if (!this.$route.query.id) {
+        this.getPropertyFields(this.propertyType);
+      }
+
+      this.getPropertyTypes(this.propertyType);
+
+      return this.propertyType;
+    }
+  },
+  watch: {
+    SalesTypeChanged() {
+      return null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/residential/latestListings.vue

@@ -37,10 +37,9 @@ export default {
   methods: {
     ...mapActions("propertySearch", ["searchProperties"])
   },
-  mounted() {
+  async mounted() {
     this.propertySearch.propertyUsageType = "Residential";
-
-    this.searchProperties(this.propertySearch);
+    await this.searchProperties(this.propertySearch);
   },
   computed: {
     ...mapState("propertySearch", ["properties", "propertySearch"])

src/components/property/residential/singleView/contentSection.vue

@@ -8,66 +8,85 @@
               <div v-if="i < 3">
                 <img v-if="i === 0" style="width:100%" :src="image" />
                 <div v-else-if="i !== 0">
-                  <img v-if="i % 2 === 0" style="width:50%; float:right;" :src="image" />
-                  <img v-else style="width:50%; float:left" :src="image" />
+                  <img
+                    v-if="i % 2 === 0"
+                    style="width:50%; height:140px; float:right;"
+                    :src="image"
+                  />
+                  <img v-else style="width:50%; height:140px; float:left" :src="image" />
                 </div>
               </div>
             </div>
 
             <gallery :images="propertyImages" :index="index" @close="index = null"></gallery>
           </div>
-
-          <div class="panel-left p-5" style="margin-top:95px">
+          <div class="panel-left p-5" style="margin-top:130px">
             <h2>Property Detial</h2>
-            <p>{{ property.addressLine1 }}</p>
-            <p>Town, Suburb</p>
+            <p>{{ property.addressLine1 }} {{ property.addressLine2 }}</p>
+
+            <p>{{ property.city.description }}, {{ property.suburb.description }}</p>
             <p>{{ property.shortDescription }}</p>
-            <p>{{ property.price }}</p>
+            <p>{{ property.price | toCurrency }}</p>
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
           </div>
         </div>
         <div class="col-md-8 p-5 resort-profile">
-          <h2>{{ property.propertyName }} / {{ property.addressLine1 }}</h2>
+          <h2>
+            {{ property.propertyName }} / {{ property.addressLine1 }} {{ property.addressLine2 }}
+          </h2>
           <div>
-            <table class="table table-striped">
+            <!-- <table class="table table-striped">
               <thead>
                 <tr>
                   <th scope="col">Reference</th>
                   <th scope="col">Size</th>
-                  <th scope="col">Location</th>
-                  <th scope="col">Kitchen</th>
-                  <th scope="col">Extras</th>
+                  <th scope="col">Rooms</th>
+                  <th scope="col">Bathrooms</th>
+                  <th scope="col">Garages</th>
                   <th scope="col"></th>
                 </tr>
               </thead>
+
               <tbody>
                 <tr>
-                  <td>#123456</td>
-                  <td>#m2</td>
-                  <td>Second Floor</td>
-                  <td>yes</td>
-                  <td>open plan</td>
-                  <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
-                </tr>
-                <tr>
-                  <td>#123456</td>
-                  <td>#m2</td>
-                  <td>Top Floor</td>
-                  <td>yes</td>
-                  <td>open plan</td>
+                  <td>#{{ property.id }}</td>
+                  <td>{{ property.displayData[0].values[2].value }}M<sup>2</sup></td>
+                  <td>{{ property.displayData[1].values[0].value }}</td>
+                  <td>{{ property.displayData[1].values[1].value }}</td>
+                  <td>{{ property.displayData[2].values[0].value }}</td>
                   <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
                 </tr>
               </tbody>
-            </table>
+            </table> -->
+            <div v-for="(data, i) in property.displayData" :key="i">
+              <div class="content-header">
+                <h2>{{ data.groupName }}</h2>
+              </div>
+              <table class="table table-striped">
+                <thead>
+                  <tr>
+                    <th v-for="(tableHead, j) in data.values" :key="j" scope="col">
+                      {{ tableHead.name }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td v-for="(tableVal, k) in data.values" :key="k" scope="col">
+                      {{ tableVal.value }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
           <p></p>
-
           <div class="d-flex mt-3">
             <iframe
               width="100%"
               height="200"
               id="gmap_canvas"
-              src="https://maps.google.com/maps?q=ngwenya%20lodge&t=&z=13&ie=UTF8&iwloc=&output=embed"
+              :src="propertyMap"
               frameborder="0"
               scrolling="no"
               marginheight="0"
@@ -82,6 +101,7 @@
 
 <script>
 /* eslint-disable */
+import { mapState, mapActions } from "vuex";
 import gallery from "../../../shared/gallerySlideShow";
 export default {
   components: {
@@ -92,13 +112,32 @@ export default {
     propertyImages: {}
   },
   created() {
-    console.log(this.property);
+    this.getListsForPropertyEdit(this.property.id);
+    console.log(this.property.displayData);
   },
   data() {
     return {
       index: null,
       date: new Date()
     };
+  },
+  methods: {
+    ...mapActions("searchTab", ["getListsForPropertyEdit"])
+  },
+  computed: {
+    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
+    propertyMap() {
+      var lat = this.property.propertCoords.split(",")[0];
+      var lng = this.property.propertCoords.split(",")[1];
+      // var url =
+      //   "https://maps.google.com/maps?q=" +
+      //   lat.replace(".", ",") +
+      //   "," +
+      //   lng.replace(".", ",") +
+      //   "&hl=es&z=14&amp;output=embed";
+      var url = "";
+      return url;
+    }
   }
 };
 </script>

src/components/property/residential/singleView/singleResidentialPage.vue

@@ -29,12 +29,21 @@ export default {
   data() {
     return {
       index: null,
-      date: new Date()
+      date: new Date(),
+      boolLoaded: false
     };
   },
   async mounted() {
+    console.log(this.$route.params.id);
+
     await this.getProperty(this.$route.params.id);
     await this.getPropertyImages(this.$route.params.id);
+    setTimeout(() => {
+      if (this.propertyImages.length > 0) {
+        this.boolLoaded = true;
+      }
+    }, 100);
+
     this.mayEditProperty(this.$route.params.id);
   },
   computed: {
@@ -44,6 +53,7 @@ export default {
   methods: {
     ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
     ...mapActions("propertyEdit", ["mayEditProperty"]),
+
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");

src/components/propertyManagement/ourServicesSection.vue

@@ -1,37 +0,0 @@
-<template>
-  <section id="services">
-    <div class="container" style="margin-top:-15px">
-      <div class="row">
-        <div align="left" class="col-lg-4">
-          <p>Our Services:</p>
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;"
-            >Rent / Levy Collection</a
-          >
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;"
-            >Occupancy Management</a
-          >
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;">Maintenance</a>
-          <a class="btn-white-border" style="min-width:270px; cursor: context-menu;"
-            >Administration</a
-          >
-        </div>
-        <div align="left" class="col-lg-8">
-          <p>Information about what is Property Management and why UVP is the preferred option.</p>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          </p>
-          <h4>Contact us for a quote</h4>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="scss" scoped></style>

src/components/propertyManagement/carouselSection.vue → src/components/propertyManagement/rentalManagement/carouselSection.vue

@@ -6,8 +6,8 @@
           <div class="intro-content box">
             <h2>Let us manage your property</h2>
             <p>
-              Uni-Vate Properties found that there was a desperate need for a reputable source for
-              buyers and sellers to turn to with their timeshare needs in South Africa.
+              At Uni-Vate we appreciate the significant and positive relationship between effective Property Management and property prices.  We understand that effective management not only relies on administrative processes being intact, but also on a clear plan and good communication with our clients based on respect, trust understanding, openness and accountability.  We have access to a comprehensive set of human and other resources to ensure that your property is proactively managed to protect your investment and to ensure the contentedness of occupants.
+              We offer comprehensive property management services, whether it being Sectional Title Management, HOA Management or Rental Property Portfolio Management.  
             </p>
             <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
             <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
@@ -44,7 +44,7 @@
 <script>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import Log from "../../assets/Log";
+import Log from "../../../assets/Log";
 import carousel from "vue-owl-carousel";
 export default {
   components: {

src/components/propertyManagement/rentalManagement/contentSection.vue

@@ -0,0 +1,86 @@
+<template>
+  <section id="services">
+    <div class="container" style="margin-top:-15px">
+      <div class="row">
+        <div class="col-lg-12">
+          <p>Uni-Vate offers a comprehensive rental property management and letting service for residential and commercial property portfolios.  Our exceptional financial and facility management processes ensure that we are a cut above the rest and provides a competitive advantage.</p>
+          <p>We pride ourselves on offering tailored solutions to property owners increasing the returns to our clients.</p>
+          <p>Our rental property management and letting services include the following:</p>
+        </div>
+        <p></p>
+        <div class="row">
+          <div class="col-md-6">
+            
+          </div>
+          <div class="col-md-6">
+            <h4>Contact us for a quote</h4>
+          </div>
+        </div>
+        <div align="left" class="col-lg-12">
+          <p>Our Services:</p>
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a class="nav-link-active" id="tenant-tab" data-toggle="tab" href="#tenant" role="tab" aria-controls="tenant" aria-selected="true">Tenant Selection and Vacancy Management</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="rent-tab" data-toggle="tab" href="#rent" role="tab" aria-controls="rent" aria-selected="false">Rent Collection</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="financial-tab" data-toggle="tab" href="#financial" role="tab" aria-controls="financial" aria-selected="false">Financial Management</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="admin-tab" data-toggle="tab" href="#admin" role="tab" aria-controls="admin" aria-selected="false">Administration, Secretarial and Advisor</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="maintenance-tab" data-toggle="tab" href="#maintenance" role="tab" aria-controls="maintenance" aria-selected="false">Property Mainenance Management</a>
+            </li>
+          </ul>
+
+          <div class="tab-content">
+            <div class="tab-pane active" id="tenant" role="tabpanel" aria-labelledby="tenant-tab">
+              <p></p>
+              <p>•	Advertising and Marketing</p>
+              <p>•	Financial and character screening of potential tenants</p>
+              <p>•	Showing</p>
+              <p>•	Determining affordability</p>
+              <p>•	Conclusion of contract and ensuring that any suspensive conditions are met</p>
+            </div>
+            <hr/>
+            <div class="tab-pane" id="rent" role="tabpanel" aria-labelledby="rent-tab">
+              <p>•	Monthly invoicing and collection via debit order</p>
+              <p>•	Credit Control including soft collections</p>
+              <p>•	Attorney Collections liaison</p>
+              <p>•	Liaison with metering companies </p>
+            </div>
+            <div class="tab-pane" id="financial" role="tabpanel" aria-labelledby="financial-tab">
+              <p>•	Account reconciliation and payment of net rental after approved operating expenses </p>
+              <p>•	Payment of approved expenses on behalf of Landlord.</p>
+              <p>•	Preparation and submission of monthly reports.</p>
+              <p>•	Monthly accounting of receipts and expenses.</p>
+              <p>•	Preparation of annual property budget.</p>
+              <p>•	Management of deposits in trust account.</p>
+            </div>
+            <div class="tab-pane" id="admin" role="tabpanel" aria-labelledby="admin-tab">
+              <p>•	Preparation and circulation of correspondence and notices to tenants</p>
+              <p>•	Preparation and conclusion of lease agreements, debit order forms and other legal documentation</p>
+              <p>•	Record maintenance</p>
+            </div>
+            <div class="tab-pane" id="maintenance" role="tabpanel" aria-labelledby="maintenance-tab">
+              <p>•	Attending to maintenance issues</p>
+              <p>•	Procurement quotations </p>
+              <p>•	Allocating approved repair work to approved sub-contractors</p>
+              <p>•	Processing insurance claims, on request.</p>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/components/propertyManagement/rentalManagement/rentalPropertyManagement.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <CarouselSection />
+    <main id="main">
+      <ServicesSection data-aos="fade-down" data-aos-anchor-placement="top-bottom" />
+      <TestimonialSection
+        data-aos="fade-up"
+        data-aos-anchor-placement="top-bottom"
+        data-aos-delay="150"
+      />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import CarouselSection from "./carouselSection";
+import ServicesSection from "../sectionalTitle/ourServicesSection";
+import TestimonialSection from "../testimonialSection";
+import AOS from "aos";
+import "aos/dist/aos.css";
+export default {
+  created() {
+    AOS.init();
+  },
+  components: {
+    CarouselSection,
+    ServicesSection,
+    TestimonialSection
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/propertyManagement/sectionalTitle/carouselSection.vue

@@ -0,0 +1,64 @@
+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content box">
+            <h2>Let us manage your property</h2>
+            <p>
+              At Uni-Vate we appreciate the significant and positive relationship between effective Property Management and property prices.  We understand that effective management not only relies on administrative processes being intact, but also on a clear plan and good communication with our clients based on respect, trust understanding, openness and accountability.  We have access to a comprehensive set of human and other resources to ensure that your property is proactively managed to protect your investment and to ensure the contentedness of occupants.
+              We offer comprehensive property management services, whether it being Sectional Title Management, HOA Management or Rental Property Portfolio Management.  
+
+            </p>
+            <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
+            <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
+              >LOGIN TO OWNERS PORTAL</router-link
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      :autoHeight="true"
+      id="intro-carousel"
+      style="margin-top:-50px;"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/16.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/3.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import Log from "../../../assets/Log";
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  },
+  computed: {
+    ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
+    isLoggedIn() {
+      console.log(Log.isLoggedIn());
+      return Log.isLoggedIn();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/propertyManagement/sectionalTitle/ourServicesSection.vue

@@ -0,0 +1,113 @@
+<template>
+  <section id="services">
+    <div class="container" style="margin-top:-15px">
+      <div class="row">
+        <div class="col-lg-12">
+          <p>Whether residential, commercial, hybrid schemes or home owners associations – we offer a complete property management solution tailored for the needs of the individual community scheme.</p>
+          <p>We are proud members of the National Association of Managing Agents and registered Estate Agents and Debt Collectors offering the following valuable functions to the residents and corporate bodies alike: </p>
+        </div>
+        <p></p>
+        <div class="row">
+          <div class="col-md-6">
+            
+          </div>
+          <div class="col-md-6">
+            <h4>Contact us for a quote</h4>
+          </div>
+        </div>
+        <div align="left" class="col-lg-12">
+          <p>Our Services:</p>
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a class="nav-link-active" id="takeOn-tab" data-toggle="tab" href="#takeOn" role="tab" aria-controls="takeOn" aria-selected="true">Take-on Audit</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="levy-tab" data-toggle="tab" href="#levy" role="tab" aria-controls="levy" aria-selected="false">Levy, Billing and Collections</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="financial-tab" data-toggle="tab" href="#financial" role="tab" aria-controls="financial" aria-selected="false">Financial Management and Accounting</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="advisory-tab" data-toggle="tab" href="#advisory" role="tab" aria-controls="advisory" aria-selected="false">Advisory and Secretarial functions</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link-active" id="admin-tab" data-toggle="tab" href="#admin" role="tab" aria-controls="admin" aria-selected="false">Administrative functions</a>
+            </li>
+          </ul>
+
+          <div class="tab-content">
+            <div class="tab-pane active" id="takeOn" role="tabpanel" aria-labelledby="takeOn-tab">
+              On appointment of company as managing agent, we perform a take-on audit which entails:
+              <p></p>
+              <p>•	Deeds search to confirm that correct owners and their details are loaded for levy billing and communication purposes.</p>
+              <p>•	Validation of sectional tile plans, PQ and levy schedule.</p>
+              <p>•	Levy Budget review, identification of risks and formulation of recommendations.</p>
+              <p>•	Accounting quality assessment from last financial statements to date.</p>
+              <p>•	Confirmation that the adjusting journals and opening balance adjustments agree to the auditor’s report.</p>
+              <p>•	Assessment of 10 MAP Plan and CSOS compliance.</p>
+              <p>•	Assessment of insurance cover.</p>
+              <p>•	Assessment of firefighting equipment.</p>
+              <p>•	Confirmation of conduct rules lodged with CSOS.</p>
+              <p>•	Assessment of owner arrear levies, credit control procedures, and legal report.</p>
+              <p>•	Assessment of compliance to relevant legislation.</p>
+              <p>•	Compilation of a report and action log to address identified gaps</p>
+              <p>•	Compilation of a property management control schedule demonstrating required monthly operational activities to be managed.</p>
+            </div>
+            <hr/>
+            <div class="tab-pane" id="levy" role="tabpanel" aria-labelledby="levy-tab">
+              <p>•	Distribution of monthly levy statements to owners by email</p>
+              <p>•	Collection of monthly levies and charges due to CSOS</p>
+              <p>•	Credit Control of outstanding levies</p>
+              <p>•	Billing of interest on arrears</p>
+              <p>•	Soft Collections</p>
+              <p>•	Attorney Collections liaison</p>
+              <p>•	Liaison with metering companies </p>
+              <p>•	Issuing of levy clearance certificates</p>
+            </div>
+            <div class="tab-pane" id="financial" role="tabpanel" aria-labelledby="financial-tab">
+              <p>•	Payment of approved operational and capital expenditure as per the approved budget and on sign-off in accordance with scheme executive instructions.</p>
+              <p>•	To open and / or operate a bank account in the name of the community scheme or a trust account which include current, savings and investment accounts in the name of the Scheme.</p>
+              <p>•	To keep books of account and records in accordance with standard accounting principles.</p>
+              <p>•	Preparing the annual audit file for the appointed auditors.</p>
+              <p>•	Preparing the annual budget and levy schedule for approval by the members at the AGM.</p>
+              <p>•	To compile and distribute a monthly management report to scheme executives which will include an income and expenditure statement detailing actual expenses versus budgeted expenses, a balance sheet, a debtor and supplier age analysis and any such supplementary information as the scheme executives may require.</p>
+              <p>•	Invest surplus funds after payment of creditors.</p>
+            </div>
+            <div class="tab-pane" id="advisory" role="tabpanel" aria-labelledby="advisory-tab">
+              <p>•	Managing the owners’ register</p>
+              <p>•	Consulting and providing advice on risk, compliance and governance matters where required.</p>
+              <p>•	Preparation and distribution of notices of meetings, agendas and minutes in respect of executives and owners’ meetings</p>
+              <p>•	Attending limited scheme executive meetings and the annual Annual General Meeting.</p>
+              <p>•	Attending Special General Meetings on request.</p>
+              <p>•	Arrange property valuation in terms of PMR 23(3).</p>
+              <p>•	Arrange competitive comprehensive property and fidelity insurance cover.</p>
+              <p>•	Submission and management of all insurance claims.</p>
+              <p>•	Maintenance management for common property to arrange quotes, booking contractors and facilitating approval and payment.  </p>
+              <p>•	Maintenance of statutory records.</p>
+              <p>•	Assisting with queries from management and owners.</p>
+              <p>•	Assisting executives with CSOS disputes.</p>
+            </div>
+            <div class="tab-pane" id="admin" role="tabpanel" aria-labelledby="admin-tab">
+              <p>•	Managing the owners’ register.</p>
+              <p>•	Safekeeping of the governance documents such as the conduct rules.</p>
+              <p>•	Issuing clearance and insurance certificates as and when required.</p>
+              <p>•	Performing general secretarial duties.</p>
+              <p>•	Recording, preparing and circulating the minutes of the trustee meetings and the AGM’s.</p>
+              <p>•	The preparing and circulation of all correspondence to owners and residents</p>
+              <p>•	Safekeeping of the minute books in perpetuity.</p>
+              <p>•	Provision of a legal address domicilium citandi et executandi for the body corporate.</p>
+              <p>•	Archiving and safekeeping of all body corporate records, as required by current legislation.</p>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/components/propertyManagement/propertyManagement.vue → src/components/propertyManagement/sectionalTitle/propertyManagement.vue

@@ -16,7 +16,7 @@
 /* eslint-disable */
 import CarouselSection from "./carouselSection";
 import ServicesSection from "./ourServicesSection";
-import TestimonialSection from "./testimonialSection";
+import TestimonialSection from "../testimonialSection";
 import AOS from "aos";
 import "aos/dist/aos.css";
 export default {

src/components/shared/navBar.vue

@@ -65,11 +65,47 @@
                       </li>
                     </ul>
                   </li>
-                  <li>
-                    <router-link to="/property/commercial">Commercial</router-link>
+                  <li class="menu-has-children">
+                    <div
+                      @mouseover="commercialClass = 'ts-display'"
+                      @mouseleave="commercialClass = 'no-display'"
+                    ></div>
+                    <a href="#" class="sf-with-ul">
+                      Commercial
+                    </a>
+                    <ul style="margin-top:-10px; text-align:left" :class="commercialClass">
+                      <li>
+                        <router-link to="/property/commercial">To Buy / To Rent</router-link>
+                      </li>
+                      <hr />
+                      <li>
+                        <a @click="routerGoTo('/property/commercial/new/Sale')">To Sell</a>
+                      </li>
+                      <li>
+                        <a @click="routerGoTo('/property/commercial/new/Rental')">To Rent</a>
+                      </li>
+                    </ul>
                   </li>
-                  <li>
-                    <router-link to="/property/residential">Residential</router-link>
+                  <li class="menu-has-children">
+                    <div
+                      @mouseover="residentialClass = 'ts-display'"
+                      @mouseleave="residentialClass = 'no-display'"
+                    ></div>
+                    <a href="#" class="sf-with-ul">
+                      Residential
+                    </a>
+                    <ul style="margin-top:-10px; text-align:left" :class="residentialClass">
+                      <li>
+                        <router-link to="/property/residential">To Buy / To Rent</router-link>
+                      </li>
+                      <hr />
+                      <li>
+                        <a @click="routerGoTo('/property/residential/new/Sale')">To Sell</a>
+                      </li>
+                      <li>
+                        <a @click="routerGoTo('/property/residential/new/Rental')">To Rent</a>
+                      </li>
+                    </ul>
                   </li>
                   <!-- <li class="menu-has-children">
                     <div
@@ -95,8 +131,22 @@
                       </li>
                     </ul>
                   </li> -->
-                  <li>
-                    <router-link to="/propertyManagement">Property Management</router-link>
+                  <li class="menu-has-children">
+                    <div
+                      @mouseover="propManClass = 'ts-display'"
+                      @mouseleave="propManClass = 'no-display'"
+                    ></div>
+                    <a href="#" class="sf-with-ul">
+                      Property Management
+                    </a>
+                    <ul style="margin-top:-10px; text-align:left" :class="propManClass">
+                      <li>
+                        <router-link to="/propertyManagement">Sectional Title and HOA Management</router-link>
+                      </li>
+                      <li>
+                        <router-link to="/rentalPropertyManagement">Rental Property Portfolio Management</router-link>
+                      </li>
+                    </ul>
                   </li>
                   <li class="menu-has-children">
                     <div

src/components/timeshare/resort/contentSection.vue

@@ -127,6 +127,8 @@ export default {
   computed: {
     ...mapState("resort", ["resort", "description", "images", "layout"]),
     mapUrl() {
+      console.log(this.resort.prLatitude);
+
       return this.resort
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
         : "";

src/router/index.js

@@ -18,13 +18,18 @@ import UpdateInfo from "../components/user/updateProfileInfo.vue";
 import PropertySearch from "../components/property/propertySearchPage.vue";
 import PropertyPage from "../components/property/propertyPage.vue";
 import PropertyEdit from "../components/property/propertyeditPage.vue";
+
 import PropertyCreate from "../components/property/propertyCreate.vue";
+import CommercialCreate from "../components/property/commercial/createProperty/commercialCreate.vue";
+import ResidentialCreate from "../components/property/residential/createProperty/residentialCreate.vue";
+
 import PropertyList from "../components/property/propertyList.vue";
 import PropertyTypeList from "../components/admin/property/propertyTypeList.vue";
 import PropertyType from "../components/admin/property/propertyTypeEdit.vue";
 import UserDefinedGroups from "../components/admin/property/userDefinedGroupsPage.vue";
 import UserDefinedGroup from "../components/admin/property/userDefinedGroupPage.vue";
-import PropertyManagement from "../components/propertyManagement/propertyManagement.vue";
+import PropertyManagement from "../components/propertyManagement/sectionalTitle/propertyManagement.vue";
+import RentalPropertyManagement from '../components/propertyManagement/rentalManagement/contentSection.vue'
 
 import ResidentialPage from "../components/property/residential/residentialPage.vue";
 import CommercialPage from "../components/property/commercial/commercialPage.vue";
@@ -49,7 +54,7 @@ import ToBuySearch from "../components/timeshare/buy/toBuySearchResults.vue";
 
 import ContactUs from "../components/misc/contactUs.vue";
 import PrivacyPolicy from "../components/misc//privacyPolicy/privacyPolicyPage.vue";
-import WebsiteDisclaimer from "../components/misc/WebsiteDisclaimer.vue";
+import WebsiteDisclaimer from "../components/misc/Disclaimer/WebsiteDisclaimer.vue";
 
 import MakeOffer from "../components/processFlow/makeOffer.vue";
 import Offer from "../components/processFlow/offers.vue";
@@ -72,6 +77,7 @@ import LandingPage from "../components/marketing/landingPage.vue";
 import LandingPageWeek from "../components/marketing/landingPageWeek.vue";
 import MarketingPage from "../components/marketing/clientView.vue";
 import MarketingPageExp from "../components/marketing/landingPageExpired.vue";
+import EnquireNow from '../components/property/commercial/enquireNow/enquirenow.vue';
 
 Vue.use(Router);
 
@@ -209,6 +215,11 @@ export default new Router({
       name: "PropertyManagement",
       component: PropertyManagement
     },
+    {
+      path: '/rentalPropertyManagement',
+      name: 'RentalPropertyManagement',
+      component: RentalPropertyManagement
+    },
     {
       path: "/property/residential",
       name: "ResidentialPage",
@@ -234,6 +245,16 @@ export default new Router({
       name: "SingleCommercialPage",
       component: SingleCommercialPage
     },
+    {
+      path: "/property/commercial/new/:saleType",
+      name: "CommercialCreate",
+      component: CommercialCreate
+    },
+    {
+      path: "/property/residential/new/:saleType",
+      name: "ResidentialCreate",
+      component: ResidentialCreate
+    },
     {
       path: "/property/residential/property/:id",
       name: "SingleResidentialPage",
@@ -395,10 +416,15 @@ export default new Router({
       name: "CampaignExpired",
       component: MarketingPageExp
     },
+    {
+      path: "/EnquireNow",
+      name: "EnquireNow",
+      component: EnquireNow
+    },
     {
       path: "/toBuyResults",
       name: "ToBuySearch",
       component: ToBuySearch
-    }
-  ]
+    },
+  ],
 });

vue.config.js

@@ -2,8 +2,8 @@ module.exports = {
   devServer: {
     proxy: {
       "/api": {
-        //target: "http://localhost:57260/",
-        target: "http://training.provision-sa.com:82",
+        target: "http://localhost:57260/",
+        //target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },
       "/nph-srep": {