Opened Address Fields on Property pages

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

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
+                {{
                 item.description
-              }}</option>
+                }}
+              </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>
                 <float-label label="price">
                   <currency-input
-                    onClick="this.setSelectionRange(0, this.value.length)"
+                    onclick="this.setSelectionRange(0, this.value.length)"
                     name="price"
                     :value="value"
                     @input="value = $event"
                   name="streetNumber"
                   id="unit"
                   v-model="property.streetNumber"
-                  disabled
                 />
               </div>
             </div>
                   name="streetName"
                   id="unit"
                   v-model="property.streetName"
-                  disabled
                 />
               </div>
             </div>
                   name="suburb"
                   id="unit"
                   v-model="property.suburb"
-                  disabled
                 />
               </div>
             </div>
                   name="city"
                   id="unit"
                   v-model="property.city"
-                  disabled
                 />
               </div>
             </div>
                   name="province"
                   id="unit"
                   v-model="property.province"
-                  disabled
                 />
               </div>
             </div>
                   name="postalCode"
                   id="unit"
                   v-model="property.postalCode"
-                  disabled
                 />
               </div>
             </div>
                   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>
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">Clear Address</button>
               </div>
             </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;
         this.property.userId = this.user.id;
       }
 
-      this.property.propertyUserFields.forEach(item => {
+      this.property.propertyUserFields.forEach((item) => {
         if (item.value === true) {
           item.value = "yes";
         } else if (item.value === false) {
       console.log(this.property);
 
       this.saveProperty(this.property)
-        .then(fulfilled => {
-          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
+        .then((fulfilled) => {
+          this.$router.push(
+            `/property/commercial/property/${fulfilled.data.id}`
+          );
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error.message);
         });
     },
     },
     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"]),
     ...mapGetters("fees", ["getListingFee"]),
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    }
+    },
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/editProperty/editProperty.vue

                         name="streetNumber"
                         id="unit"
                         v-model="property.streetNumber"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="streetName"
                         id="unit"
                         v-model="property.streetName"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="suburb"
                         id="unit"
                         v-model="property.suburb"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="city"
                         id="unit"
                         v-model="property.city"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="province"
                         id="unit"
                         v-model="property.province"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="postalCode"
                         id="unit"
                         v-model="property.postalCode"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="country"
                         id="unit"
                         v-model="property.country"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>

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

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
+                {{
                 item.description
-              }}</option>
+                }}
+              </option>
             </select>
           </div>
         </div>
                     for="price"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
-                    >{{ salesType }} Price</label
-                  >
+                  >{{ salesType }} Price</label>
                 </div>
                 <float-label label="Price">
                   <currency-input
-                    onClick="this.setSelectionRange(0, this.value.length)"
+                    onclick="this.setSelectionRange(0, this.value.length)"
                     name="price"
                     :value="value"
                     @input="value = $event"
                   name="streetNumber"
                   id="unit"
                   v-model="property.streetNumber"
-                  disabled
                 />
               </div>
             </div>
                   name="streetName"
                   id="unit"
                   v-model="property.streetName"
-                  disabled
                 />
               </div>
             </div>
                   name="suburb"
                   id="unit"
                   v-model="property.suburb"
-                  disabled
                 />
               </div>
             </div>
                   name="city"
                   id="unit"
                   v-model="property.city"
-                  disabled
                 />
               </div>
             </div>
                   name="province"
                   id="unit"
                   v-model="property.province"
-                  disabled
                 />
               </div>
             </div>
                   name="postalCode"
                   id="unit"
                   v-model="property.postalCode"
-                  disabled
                 />
               </div>
             </div>
                   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>
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">Clear Address</button>
               </div>
             </div>
           </div>
               />
             </div>
           </div>
-        </div> -->
+        </div>-->
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
           :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;
       }
-      this.property.propertyUserFields.forEach(item => {
+      this.property.propertyUserFields.forEach((item) => {
         if (item.value === true) {
           item.value = "yes";
         } else if (item.value === false) {
       });
 
       this.saveProperty(this.property)
-        .then(fulfilled => {
-          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
+        .then((fulfilled) => {
+          this.$router.push(
+            `/property/residential/property/${fulfilled.data.id}`
+          );
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error.message);
         });
     },
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach(element => {
+      this.propertyFieldValues.forEach((element) => {
         console.log(element);
 
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
         fields.push(arr.slice(i, (i += len)));
       }
       return fields;
-    }
+    },
   },
   mounted() {
     console.log(this.propertyFields);
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages"
+      "propertyImages",
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
     },
     userFieldsArr() {
       return this.userFieldsArrFunc(this.propertyFields, 4);
-    }
+    },
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    }
-  }
+    },
+  },
 };
 </script>