Added Address Fields to property create pages.

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

@@ -108,17 +108,130 @@
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </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.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">
+                <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="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="row">
@@ -361,6 +474,18 @@ export default {
     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() {
     this.wait = false;

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

@@ -109,17 +109,130 @@
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </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.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">
+                <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="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="row" />
@@ -371,6 +484,18 @@ export default {
     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() {
     this.wait = false;