Fixes to properties - controls not loading

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

@@ -25,25 +25,29 @@ export default {
   components: {
     makeOffer,
     carouselSection,
-    contentSection
+    contentSection,
   },
   data() {
     return {
       index: null,
-      date: new Date()
+      date: new Date(),
     };
   },
   async mounted() {
     await this.getProperty(this.$route.params.id);
-    await this.getPropertyImages(this.$route.params.id);
-    this.mayEditProperty(this.$route.params.id);
+    // await this.getPropertyImages(this.$route.params.id);
+    // this.mayEditProperty(this.$route.params.id);
   },
   computed: {
     ...mapState("property", ["property", "propertyImages"]),
-    ...mapState("propertyEdit", ["mayEdit"])
+    ...mapState("propertyEdit", ["mayEdit"]),
   },
   methods: {
-    ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
+    ...mapActions("property", [
+      "getProperty",
+      "getPropertyImages",
+      "clearPropertyImages",
+    ]),
     ...mapActions("propertyEdit", ["mayEditProperty"]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
@@ -54,11 +58,11 @@ export default {
         return `${value}<br/>`;
       }
       return "";
-    }
+    },
   },
   beforeDestroy() {
     this.clearPropertyImages();
-  }
+  },
 };
 </script>
 

src/components/property/editProperty/editProperty.vue

@@ -66,9 +66,11 @@
                     :disabled="!canEdit"
                   >
                     <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="property.propertyUsageType === 'Commercial'" class="col-md-2">
@@ -108,8 +110,7 @@
                           for="price"
                           class="uniSelectLabel"
                           style="text-transform:uppercase; margin-left:17px; background-color:white"
-                          >{{ property.salesTypeString }} Price</label
-                        >
+                        >{{ property.salesTypeString }} Price</label>
                       </div>
                       <input
                         class="form-control uniInput"
@@ -255,9 +256,11 @@
                   </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>
@@ -265,16 +268,8 @@
               <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"
-                    :disabled="!canEdit"
-                  />
+                  <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">
@@ -303,7 +298,11 @@
                     </div>
                     <div v-else-if="field.type === 'yesno'">
                       {{ field.name }}
-                      <input type="checkbox" v-model="field.value" :disabled="!canEdit" />
+                      <input
+                        type="checkbox"
+                        v-model="field.value"
+                        :disabled="!canEdit"
+                      />
                     </div>
                     <div v-else class="display:none"></div>
                   </div>
@@ -362,17 +361,8 @@
                 @DeleteImage="DeleteImage"
                 :mayEdit="canEdit"
               />
-              <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
-                Save
-              </button>
-              <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">
-                Close
-              </button>
-              <div v-if="showPropertyTypeError">
-                <p class="alert myError">
-                  Missing fields. Please fill in all required fields. Marked with *
-                </p>
-              </div>
+              <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+              <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">Close</button>
               <div v-if="!addressSet">
                 <p class="alert myError">Please enter an address.</p>
               </div>
@@ -387,6 +377,7 @@
 
 <script>
 /* eslint-disable */
+import { VueEditor } from "vue2-editor";
 import { mapState, mapActions } from "vuex";
 import mapSection from "../mapSection";
 import ImageLoad from "../propertyImage";
@@ -396,7 +387,8 @@ export default {
   name: "PropertyEditPage",
   components: {
     mapSection,
-    ImageLoad
+    ImageLoad,
+    VueEditor,
   },
   data() {
     return {
@@ -404,7 +396,20 @@ export default {
       defaultImage: 0,
       images: [],
       wait: false,
-      canEdit: true
+      canEdit: true,
+      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" }],
+      ],
     };
   },
   methods: {
@@ -412,7 +417,7 @@ export default {
       "getProperty",
       "getPropertyTypes",
       "getPropertyFields",
-      "updateProperty"
+      "updateProperty",
     ]),
     StatusChanged(item) {
       if (
@@ -475,7 +480,7 @@ export default {
         }
         this.property.newImages.push({
           image: this.images[i],
-          isDefault: setAsDefault
+          isDefault: setAsDefault,
         });
       }
 
@@ -483,7 +488,7 @@ export default {
 
       //console.log(JSON.stringify(this.property));
 
-      this.updateProperty(this.property).then(fulfilled => {
+      this.updateProperty(this.property).then((fulfilled) => {
         this.$router.push("/PropertyAdmin");
       });
     },
@@ -504,10 +509,10 @@ export default {
     },
     DeleteImage(item) {
       this.propertyImages[item].isDeleted = true;
-    }
+    },
   },
   mounted() {
-    this.getProperty(this.$route.params.id).then(fulfilled => {
+    this.getProperty(this.$route.params.id).then((fulfilled) => {
       this.wait = false;
       if (
         this.property.statusString === "Offer Pending" ||
@@ -526,7 +531,7 @@ export default {
       "propertyTypes",
       "propertyImages",
       "propertyFields",
-      "statuses"
+      "statuses",
     ]),
     savedImages() {
       const list = [];
@@ -534,8 +539,8 @@ export default {
         list.push(this.proeprtyImages[i].image);
       }
       return list;
-    }
-  }
+    },
+  },
 };
 </script>
 

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

@@ -24,34 +24,37 @@ export default {
   components: {
     makeOffer,
     carouselSection,
-    contentSection
+    contentSection,
   },
   data() {
     return {
       index: null,
       date: new Date(),
-      boolLoaded: false
+      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);
+
+    // await this.getPropertyImages(this.$route.params.id);
+    // setTimeout(() => {
+    //   if (this.propertyImages.length > 0) {
+    //     this.boolLoaded = true;
+    //   }
+    // }, 100);
 
     //this.mayEditProperty(this.$route.params.id);
   },
   computed: {
     ...mapState("property", ["property", "propertyImages"]),
-    ...mapState("propertyEdit", ["mayEdit"])
+    ...mapState("propertyEdit", ["mayEdit"]),
   },
   methods: {
-    ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
+    ...mapActions("property", [
+      "getProperty",
+      "getPropertyImages",
+      "clearPropertyImages",
+    ]),
     ...mapActions("propertyEdit", ["mayEditProperty"]),
 
     formatPrice(value) {
@@ -63,11 +66,11 @@ export default {
         return `${value}<br/>`;
       }
       return "";
-    }
+    },
   },
   beforeDestroy() {
     this.clearPropertyImages();
-  }
+  },
 };
 </script>