Residential & Commercial Prop List

package-lock.json

       "integrity": "sha512-TigfiZUs7SN3Z6uxKilqJUtYxte8vp0F4QxabCli6hkKPqU97JzAZc3P7AL6omkRAd2DMI26fOrIGjuALTvXww==",
       "dev": true
     },
+    "vue-currency-input": {
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-1.22.3.tgz",
+      "integrity": "sha512-vrOaaiCSG8Hh7Fw7CYROIymFvVprWKaze3h67sihqJ4QAI9F+YElTQYv0fJwFK1NkKUS8H/MvAL0mwg9qrUfgg=="
+    },
     "vue-disable-autocomplete": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vue-disable-autocomplete/-/vue-disable-autocomplete-0.0.4.tgz",

package.json

     "v-file-upload": "^3.1.7",
     "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
+    "vue-currency-input": "^1.22.3",
     "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",
     "vue-js-modal": "^1.3.33",

src/components/misc/bondCaclculator.vue

       type="text"
       class="form-control mb-2"
       name="income"
+      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
       id="gross-income"
       placeholder="Gross Monthly Household Income"
       v-model="amount"
-      @input="displayValue()"
     />
     <input
       type="text"
       class="form-control mb-2"
       name="deposit"
+      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
       id="deposit"
       placeholder="Deposit Amount – May be Required"
       v-model="deposit"
-      @input="displayDeposit()"
     />
     <div class="slidecontainer mt-4">
       <input type="range" min="5" max="30" value="10" class="slider" id="myRange" v-model="term" />
 export default {
   data() {
     return {
-      amount: "R1000000",
-      deposit: "R0",
+      amount: 1000000,
+      deposit: 0,
       term: 10,
       rate: 7,
       isInputActive: false
   props: ["value"],
   methods: {
     calculate() {
-      var rate = this.calcRate();
+      var rate = this.rate / 100 / 12;
       var years = this.term * 12;
       var topPart = rate * Math.pow(1 + rate, years);
       var bottomPart = Math.pow(1 + rate, years) - 1;
       var netAmnt = this.amount - this.deposit;
       var bond = (netAmnt * topPart) / bottomPart;
-    },
-    calcRate() {
-      var answer = this.rate / 100 / 12;
-      return answer;
-    },
-    displayValue() {
-      const formatter = new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: 2
-      });
-      if (this.amount.charAt(0) !== "R") {
-        this.amount = "R" + formatter.format(this.amount);
-        if (this.amount < 1) {
-          this.amount = "R" + 0;
-        }
-      }
-    },
-    displayDeposit() {
-      if (this.deposit.charAt(0) !== "R") {
-        if (this.deposit < 1) {
-          this.deposit = "R" + 0;
-        }
-      }
     }
   },
   computed: {
       var topPart = rate * Math.pow(1 + rate, years);
       var bottomPart = Math.pow(1 + rate, years) - 1;
 
-      var netAmnt = parseFloat(this.amount.substring(1)) - parseFloat(this.deposit.substring(1));
+      var netAmnt = parseFloat(this.amount) - parseFloat(this.deposit);
       var bond = (netAmnt * topPart) / bottomPart;
       if (isNaN(bond)) {
         return 0;
         return bond;
       }
     },
-    calcRate() {
-      var answer = this.rate / 100 / 12;
-      return answer;
-    },
     grossIncome() {
       return this.totalMonthlyPayment * 3.335120643;
     }

src/components/property/ListProperty/contentSection.vue

         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
           <li class="nav-item">
             <a
-              class="nav-link btn-solid-blue"
+              class="nav-link btn-solid-blue active"
               id="pills-residential-tab"
               data-toggle="pill"
               href="#pills-residential"

src/components/property/commercial/commercialSearchResults.vue

               <div class="portfolio-item">
                 <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
                 <h4>{{ currentProperty.displayPrice }}</h4>
-                <p>Address | 00m</p>
+                <p>
+                  {{ currentProperty.suburb }}, {{ currentProperty.city }} |
+                  {{ currentProperty.area }}M<sup>2</sup>
+                </p>
                 <p>{{ currentProperty.shortDescription }}</p>
                 <br />
 

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

                     >{{ salesType }} Price</label
                   >
                 </div>
-                <input
-                  class="form-control uniInput"
-                  type="number"
+                <currency-input
+                  onClick="this.setSelectionRange(0, this.value.length)"
                   name="price"
-                  id="price"
+                  :value="value"
+                  @input="value = $event"
                   v-model="property.price"
+                  id="price"
+                  class="form-control uniInput"
                 />
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetNumber">
+                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetNumber"
+                  id="unit"
+                  v-model="property.streetNumber"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetName">
+                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetName"
+                  id="unit"
+                  v-model="property.streetName"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.suburb">
+                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="suburb"
+                  id="unit"
+                  v-model="property.suburb"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.city">
+                  <label for="city" class="uniSelectLabel">CITY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="city"
+                  id="unit"
+                  v-model="property.city"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.province">
+                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="province"
+                  id="unit"
+                  v-model="property.province"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
               <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 v-if="!property.postalCode">
+                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="postalCode"
+                  id="unit"
+                  v-model="property.postalCode"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.country">
+                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="country"
+                  id="unit"
+                  v-model="property.country"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
         </div>
-        <div class="row" />
-
+        <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 class="section-header">
           <h2>Property Information</h2>
         </div>
-        <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
-          <div class="col-md-6" v-for="field in item.fields" :key="field.id">
-            <div v-if="field.type === 'number'">
-              {{ field.name }}
-              <input type="number" class="form-control uniInput" v-model="field.value" />
-            </div>
-            <div v-else class="display:none"></div>
-            <div v-if="field.type === 'yesno'">
-              {{ field.name }}
-              <input type="checkbox" v-model="field.value" />
-            </div>
+        <div v-for="item in propertyFields" :key="item.id">
+          <div v-if="item.name === 'Commercial Fields'">
+            <UserField
+              :fields="item.fields"
+              :id="item.name"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :fieldValues="item.fields"
+            />
           </div>
         </div>
         <div class="row">
         this.property.userId = this.user.id;
       }
 
+      this.property.propertyUserFields.forEach(item => {
+        if (item.value === true) {
+          item.value = "yes";
+        } else if (item.value === false) {
+          item.value = "no";
+        }
+      });
+
+      console.log(this.property);
+
       this.saveProperty(this.property)
         .then(fulfilled => {
-          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
+          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
         })
         .catch(error => {
           console.log(error.message);
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
+    },
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
     }
   },
   mounted() {

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

           <div class="panel-left p-5" style="margin-top:140px;">
             <h2>Property Detial</h2>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
-            <p>{{ property.suburb }}, {{ property.city }}</p>
+            <p>{{ property.city }}, {{ property.suburb }}</p>
+            <div v-for="field in property.displayData[0].values" :key="field.id">
+              <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
+              <p v-if="field.name === 'Rates & Taxes'">
+                Rates & Taxes: R{{ field.value | toCurrency }}
+              </p>
+            </div>
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
             </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
-          <h2>{{ property.propertyName }}</h2>
+          <h2 v-else>{{ property.propertyName }}</h2>
           <p>{{ property.shortDescription }}</p>
           <h4>Property Features</h4>
           <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">

src/components/property/mapSection.vue

 <template>
   <div>
-    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace">*</gmap-autocomplete>
+    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace"
+      >*</gmap-autocomplete
+    >
     <GmapMap
       :center="mapCenter"
       :zoom="mapZoom"
 import { gmapApi } from "vue2-google-maps";
 export default {
   computed: {
-    google: gmapApi,
+    google: gmapApi
   },
   data() {
     return {
       country: "",
       postalCode: "",
       url: "",
-      coords: {},
+      coords: {}
     };
   },
 
         if (place.address_components[i].types[0] === "locality") {
           this.city = place.address_components[i].long_name;
         }
-        if (
-          place.address_components[i].types[0] === "administrative_area_level_1"
-        ) {
+        if (place.address_components[i].types[0] === "administrative_area_level_1") {
           this.province = place.address_components[i].long_name;
         }
         if (place.address_components[i].types[0] === "country") {
         this.url = place.url;
       }
 
-      var coords =
-        place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
-      this.coords = coords;
-
       this.$emit("map-location", {
         streetNumber: this.streetNumber,
         streetName: this.streetName,
         province: this.province,
         country: this.country,
         postalCode: this.postalCode,
-        url: this.url,
-        coords: this.coords,
+        url: this.url
       });
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/property/propertyCard.vue

     <div class="container-fluid">
       <div class="row">
         <div
-          class="col-lg-3 col-md-6 col-sm-6"
+          class="col-lg-3 col-md-6 col-sm-6 my-3"
           v-for="currentProperty in properties"
           :key="currentProperty.id"
         >
               <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
-                  <img :src="currentProperty.displayImage" alt="" />
+                  <img
+                    style="max-height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt=""
+                  />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>
               <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
-                  <img :src="currentProperty.displayImage" alt="" />
+                  <img
+                    style="max-height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt=""
+                  />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>

src/components/property/propertyUserField.vue

 <template>
   <div class="row">
     <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
-      <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">
           <b>{{ GetFirstLetter(currentField.name) }}</b>
         </span> -->
+        <div v-if="!setFields[i] && currentField.type !== 'yesno'">
+          <label class="uniSelectLabel">{{ currentField.name }}</label>
+        </div>
         <input
           v-if="currentField.type === 'number'"
           class="form-control uniInput"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         />
+
         <input
           v-if="currentField.type === 'text'"
           class="form-control uniInput"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         />
-        <select
+      </div>
+    </div>
+
+    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="'checkField' + i">
+      <div class="input-group-prepend">
+        <!-- <span class="input-group-text" style="color: #60CBEB">
+          <b>{{ GetFirstLetter(currentField.name) }}</b>
+        </span> -->
+        <div v-if="currentField.type === 'yesno'">
+          <label class="uniSelectLabel">{{ currentField.name }}</label>
+        </div>
+
+        <input
           v-if="currentField.type === 'yesno'"
-          class="form-control uniSelect"
+          type="checkbox"
           id="currentField.id"
+          style="margin-left:-5px; margin-top:10px"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
-        >
-          <option value="yes">Yes</option>
-          <option value="no">No</option>
-        </select>
+        />
       </div>
     </div>
   </div>

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

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option
-                v-for="item in propertyTypes"
-                :value="item.id"
-                :key="item.id"
-              >{{ item.description }}</option>
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                item.description
+              }}</option>
             </select>
           </div>
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
                     for="price"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
-                  >{{ salesType }} Price</label>
+                    >{{ salesType }} Price</label
+                  >
                 </div>
                 <input
                   class="form-control uniInput"
             </div>
             <div class="row my-3">
               <div class="col-md-12">
-                <button type="button" @click="clearAddress()" class="btn-solid-blue">Clear Address</button>
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
             <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
+              * A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate
+              website
             </p>
           </div>
         </div>
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
+          Save
+        </button>
         <div v-if="showPropertyTypeError">
-          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
+          <p class="alert myError">
+            Missing fields. Please fill in all required fields. Marked with *
+          </p>
         </div>
         <div v-if="wait" id="preloader"></div>
       </div>
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection,
+    mapSection
   },
   data() {
     return {
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ["bold", "italic", "underline", "strike"],
-        [
-          { align: "" },
-          { align: "center" },
-          { align: "right" },
-          { align: "justify" },
-        ],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
         [{ script: "sub" }, { script: "super" }],
-        [{ indent: "-1" }, { indent: "+1" }],
+        [{ indent: "-1" }, { indent: "+1" }]
       ],
       error: "",
       addressSet: false,
       showPropertyTypeError: false,
       showDateError: false,
       user: Log.getUser(),
-      mayEdit: Log.isLoggedIn(),
+      mayEdit: Log.isLoggedIn()
     };
   },
   methods: {
       "getPropertyEditDisplay",
       "getPropertySavedOverviewFields",
       "getPropertySavedFields",
-      "getSavedPropertyData",
+      "getSavedPropertyData"
     ]),
     updateLocation(place) {
       this.addressSet = true;
         this.showPropertyTypeError = true;
       }
 
-      if (
-        this.salesType === "Rental" &&
-        this.property.dateAvailable === "undef"
-      ) {
+      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
         this.showDateError = true;
       }
 
         }
         this.property.propertyImages.push({
           image: this.images[i],
-          isDefault: setAsDefault,
+          isDefault: setAsDefault
         });
       }
       this.property.propertyUserFields = this.propertyFieldValues;
       if (this.user) {
         this.property.userId = this.user.id;
       }
+      console.log(this.propertyFieldValues);
 
-      this.saveProperty(this.property)
-        .then((fulfilled) => {
-          this.$router.push(
-            `/property/residential/property/${fulfilled.data.id}`
-          );
-        })
-        .catch((error) => {
-          console.log(error.message);
-        });
+      // 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");
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach((element) => {
+      this.propertyFieldValues.forEach(element => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
       this.property.postalCode = undefined;
       this.property.addressUrl = undefined;
       this.property.propertCoords = undefined;
-    },
+    }
   },
   mounted() {
     this.wait = false;
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages",
+      "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
     SalesTypeChanged() {
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>
 

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

                     >{{ salesType }} Price</label
                   >
                 </div>
-                <input
-                  class="form-control uniInput"
-                  type="number"
+                <currency-input
+                  onClick="this.setSelectionRange(0, this.value.length)"
                   name="price"
-                  id="price"
+                  :value="value"
+                  @input="value = $event"
                   v-model="property.price"
+                  id="price"
+                  class="form-control uniInput"
                 />
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetNumber">
+                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetNumber"
+                  id="unit"
+                  v-model="property.streetNumber"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetName">
+                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetName"
+                  id="unit"
+                  v-model="property.streetName"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.suburb">
+                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="suburb"
+                  id="unit"
+                  v-model="property.suburb"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.city">
+                  <label for="city" class="uniSelectLabel">CITY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="city"
+                  id="unit"
+                  v-model="property.city"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.province">
+                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="province"
+                  id="unit"
+                  v-model="property.province"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.postalCode">
+                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="postalCode"
+                  id="unit"
+                  v-model="property.postalCode"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
               <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 v-if="!property.country">
+                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="country"
+                  id="unit"
+                  v-model="property.country"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
         </div>
-        <div class="row" />
+        <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 class="section-header">
           <h2>Property Information</h2>
         </div>
 
-        <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
-          <div class="col-md-6" v-for="field in item.fields" :key="field.id">
-            <div v-if="field.type === 'number'">
-              {{ field.name }}
-              <input type="number" class="form-control uniInput" v-model="field.value" />
-            </div>
-            <div v-else class="display:none"></div>
-            <div v-if="field.type === 'yesno'">
-              {{ field.name }}
-              <input type="checkbox" v-model="field.value" />
-            </div>
+        <div v-for="item in propertyFields" :key="item.id">
+          <div v-if="item.name === 'Residential Fields'">
+            <UserField
+              :fields="item.fields"
+              :id="item.name"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :fieldValues="item.fields"
+            />
           </div>
         </div>
         <!-- <UserField
           isDefault: setAsDefault
         });
       }
-      this.property.propertyUserFields = this.propertyFields;
+      this.property.propertyUserFields = this.propertyFieldValues;
 
       if (this.user) {
         this.property.userId = this.user.id;
       }
       this.property.propertyUserFields.forEach(item => {
-        item.fields.forEach(field => {
-          if (field.type === "yesno") {
-            if (field.value) {
-              field.value = "yes";
-            } else {
-              field.value = "no";
-            }
-          }
-        });
+        if (item.value === true) {
+          item.value = "yes";
+        } else if (item.value === false) {
+          item.value = "no";
+        }
       });
+      console.log(this.property);
 
-      this.saveProperty(this.property)
-        .then(fulfilled => {
-          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
-        })
-        .catch(error => {
-          console.log(error.message);
-        });
+      // 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");
     UpdateDefaultImage(item) {
       this.defaultImage = item;
     },
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
+    },
     userFieldsArrFunc(arr, len) {
       const fields = [];
       const i = 0;

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

             <p v-if="property.showAddress">{{ property.addressOther }}</p>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
             <p>{{ property.city }}, {{ property.suburb }}</p>
-            <!-- <div v-for="(data, i) in property.displayData" :key="i">
-              {{ data }}
-            </div> -->
-            <p>
-              Bedrooms {{ property.displayData[1].values[0].value }}, Bathrooms
-              {{ property.displayData[1].values[1].value }}
-            </p>
-            <p>
-              Yard Size {{ property.displayData[0].values[1].value }}M<sup>2</sup>, Floor Size
-              {{ property.displayData[0].values[2].value }}M<sup>2</sup>
-            </p>
+            <div v-for="(data, i) in property.displayData" :key="i">
+              <div v-for="field in data.values" :key="field.id">
+                <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
+                <p v-if="field.name === 'Bedrooms'">Bedrooms {{ field.value }}</p>
+                <p v-if="field.name === 'Bathrooms'">Bathrooms {{ field.value }}</p>
+              </div>
+            </div>
 
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
           </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
+
           <div class="container">
             <div class="row">
               <div class="col">
             </div>
           </div>
           <div>
-            <!-- <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th scope="col">Reference</th>
-                  <th scope="col">Size</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>#{{ 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>-->
             <h4>Property Features</h4>
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
     console.log(this.property.displayData);
   },
   mounted() {
-    var facebookShare = document.getElementById("fb_share");
-    facebookShare.href = "http://www.facebook.com/share.php?u=" + encodeURIComponent(location.href);
+    // var facebookShare = document.getElementById("fb_share");
+    // facebookShare.href = "http://www.facebook.com/share.php?u=" + encodeURIComponent(location.href);
   },
   data() {
     return {

src/components/shared/navBar.vue

               </div>
               <nav id="nav-menu-container">
                 <ul class="nav-menu sf-js-enabled sf-arrows">
-                  <li class="menu-has-children" style="margin-left:-20px">
-                    <div
+                  <li style="margin-left:-20px">
+                    <router-link to="/property/commercial">Commercial</router-link>
+                    <!-- <div
                       @mouseover="commercialClass = 'ts-display'"
                       @mouseleave="commercialClass = 'no-display'"
                     ></div>
                     </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>
                           >To Rent</a
                         >
                       </li>
-                    </ul>
+                    </ul> -->
                   </li>
-                  <li class="menu-has-children mx-1">
-                    <div
+                  <li class="mx-1">
+                    <router-link to="/property/residential">Residential</router-link>
+                    <!-- <div
                       @mouseover="residentialClass = 'ts-display'"
                       @mouseleave="residentialClass = 'no-display'"
                     ></div>
                           >To Rent</a
                         >
                       </li>
-                    </ul>
+                    </ul> -->
                   </li>
                   <li class="menu-has-children mx-1">
                     <div
                     </a>
                     <ul style="margin-top:-10px;text-align:left" :class="userClass">
                       <li>
-                        <router-link to="/property/list">List Property</router-link>
+                        <router-link to="/property/list">List My Property</router-link>
                       </li>
                       <li>
                         <router-link to="/status/list">Status</router-link>

src/main.js

 import * as VueGoogleMaps from "vue2-google-maps";
 import Vuetify from "vuetify";
 import VueShareSocial from "vue-share-social";
+import VueCurrencyInput from "vue-currency-input";
 
 Vue.use(VueShareSocial);
 Vue.use(EvaIcons);
 Vue.use(Vuetify);
+
 Vue.use(VueGoogleMaps, {
   load: {
     key: "AIzaSyD8k_Kwml_C8IDfs-gX8JFV8acli3L9cAE",
 axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;
-
+const pluginOptions = {
+  /* see config reference */
+  globalOptions: { currency: ["ZAR", null, { prefix: "R" }][2] }
+};
+Vue.use(VueCurrencyInput, pluginOptions);
 Vue.prototype.$http = axios;
 const token = localStorage.getItem("token");
 if (token) {

src/store/modules/property/propertySearch.js

             commit("updateSearch", result.data);
             resolve();
           })
-          .catch(errro => reject(new Error(error.message)));
+          .catch(error => reject(new Error(error.message)));
       });
     },
     searchLatestProperties({ commit }) {