Dispose property objects when closing edit page

src/components/property/editProperty/editProperty.vue

@@ -6,7 +6,7 @@
           <div class="col-12">
             <h1>Property Details</h1>
           </div>
-          <main id="main" style="margin-top:-20px">
+          <main id="main" style="margin-top: -20px">
             <div class="container pt-5 pb-5">
               <div class="row my-3">
                 <div class="col-md-6">
@@ -26,14 +26,18 @@
                     v-model="property.statusString"
                     @change="StatusChanged"
                   >
-                    <option v-for="(item, i) in Statuses" :key="i">{{ item }}</option>
+                    <option v-for="(item, i) in Statuses" :key="i">
+                      {{ item }}
+                    </option>
                   </select>
                 </div>
               </div>
               <div class="row my-3">
                 <div class="col-md-6">
                   <div v-if="!property.propertyName">
-                    <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
+                    <label for="propertyName" class="uniSelectLabel"
+                      >PROPERTY NAME</label
+                    >
                   </div>
                   <input
                     class="form-control uniInput"
@@ -45,7 +49,9 @@
                 </div>
                 <div class="col-md-6">
                   <div v-if="!property.propertyRef">
-                    <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
+                    <label for="propertyName" class="uniSelectLabel"
+                      >PROPERTY REFERENCE</label
+                    >
                   </div>
                   <input
                     class="form-control uniInput"
@@ -66,12 +72,19 @@
                     :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>
                   </select>
                 </div>
-                <div v-if="property.propertyUsageType === 'Commercial'" class="col-md-2">
+                <div
+                  v-if="property.propertyUsageType === 'Commercial'"
+                  class="col-md-2"
+                >
                   <div v-if="!property.unit">
                     <label for="unit" class="uniSelectLabel">UNIT</label>
                   </div>
@@ -95,7 +108,7 @@
                   <input
                     type="checkbox"
                     v-model="property.showAddress"
-                    style="margin-right: 10px; margin-top: 10px;"
+                    style="margin-right: 10px; margin-top: 10px"
                     :disabled="!canEdit"
                   />
                   <label>Show address on listing</label>
@@ -107,7 +120,11 @@
                         <label
                           for="price"
                           class="uniSelectLabel"
-                          style="text-transform:uppercase; margin-left:17px; background-color:white"
+                          style="
+                            text-transform: uppercase;
+                            margin-left: 17px;
+                            background-color: white;
+                          "
                           >{{ property.salesTypeString }} Price</label
                         >
                       </div>
@@ -149,7 +166,8 @@
                   <div
                     class="row my-3"
                     v-if="
-                      property.statusString === 'Sold' || property.statusString === 'Rented Out'
+                      property.statusString === 'Sold' ||
+                      property.statusString === 'Rented Out'
                     "
                   >
                     <div class="col-md-12">
@@ -169,7 +187,9 @@
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.streetNumber">
-                        <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                        <label for="streetNumber" class="uniSelectLabel"
+                          >STREET NUMBER</label
+                        >
                       </div>
                       <input
                         class="form-control uniInput"
@@ -184,7 +204,9 @@
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.streetName">
-                        <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                        <label for="streetName" class="uniSelectLabel"
+                          >STREET NAME</label
+                        >
                       </div>
                       <input
                         class="form-control uniInput"
@@ -199,7 +221,9 @@
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.suburb">
-                        <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                        <label for="suburb" class="uniSelectLabel"
+                          >SUBURB</label
+                        >
                       </div>
                       <input
                         class="form-control uniInput"
@@ -229,7 +253,9 @@
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.province">
-                        <label for="province" class="uniSelectLabel">PROVINCE</label>
+                        <label for="province" class="uniSelectLabel"
+                          >PROVINCE</label
+                        >
                       </div>
                       <input
                         class="form-control uniInput"
@@ -244,7 +270,9 @@
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.postalCode">
-                        <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                        <label for="postalCode" class="uniSelectLabel"
+                          >POSTAL CODE</label
+                        >
                       </div>
                       <input
                         class="form-control uniInput"
@@ -259,7 +287,9 @@
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.country">
-                        <label for="country" class="uniSelectLabel">COUNTRY</label>
+                        <label for="country" class="uniSelectLabel"
+                          >COUNTRY</label
+                        >
                       </div>
                       <input
                         class="form-control uniInput"
@@ -273,7 +303,11 @@
                   </div>
                   <div class="row my-3">
                     <div class="col-md-12">
-                      <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                      <button
+                        type="button"
+                        @click="clearAddress()"
+                        class="btn-solid-blue"
+                      >
                         Clear Address
                       </button>
                     </div>
@@ -282,8 +316,13 @@
               </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" />
+                  <label for="Property Description" style="font-family: 'muli'"
+                    >Description:</label
+                  >
+                  <vue-editor
+                    v-model="property.description"
+                    :editor-toolbar="customToolbar"
+                  />
                   <br />
                 </div>
               </div>
@@ -291,8 +330,16 @@
                 <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
+                  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
@@ -313,7 +360,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>
@@ -345,7 +396,9 @@
               </div>
               <div class="row mt-3">
                 <div class="col-md-12 mt-2">
-                  <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
+                  <label v-if="!property.video" class="uniSelectLabel"
+                    >Video (URL)</label
+                  >
                   <float-label label="Video (URL)">
                     <input
                       class="form-control uniInput"
@@ -374,10 +427,20 @@
                 @DeleteImage="DeleteImage"
                 :mayEdit="canEdit"
               />
-              <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
+              <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">
+              <button
+                v-if="!wait"
+                type="button"
+                @click="Close()"
+                class="btn-solid-blue"
+              >
                 Close
               </button>
               <div v-if="!addressSet">
@@ -405,7 +468,7 @@ export default {
   components: {
     mapSection,
     ImageLoad,
-    VueEditor
+    VueEditor,
   },
   data() {
     return {
@@ -417,11 +480,16 @@ export default {
       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" }],
+      ],
     };
   },
   methods: {
@@ -429,7 +497,7 @@ export default {
       "getProperty",
       "getPropertyTypes",
       "getPropertyFields",
-      "updateProperty"
+      "updateProperty",
     ]),
     StatusChanged(item) {
       if (
@@ -492,7 +560,7 @@ export default {
         }
         this.property.newImages.push({
           image: this.images[i],
-          isDefault: setAsDefault
+          isDefault: setAsDefault,
         });
       }
 
@@ -500,11 +568,13 @@ export default {
 
       //console.log(JSON.stringify(this.property));
 
-      this.updateProperty(this.property).then(fulfilled => {
+      this.updateProperty(this.property).then((fulfilled) => {
         this.$router.push("/PropertyAdmin");
       });
     },
     Close() {
+      this.property = {};
+      this.propertyImages = [];
       this.$router.push("/PropertyAdmin");
     },
     updateLocation(place) {
@@ -521,10 +591,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" ||
@@ -543,7 +613,7 @@ export default {
       "propertyTypes",
       "propertyImages",
       "propertyFields",
-      "statuses"
+      "statuses",
     ]),
     savedImages() {
       const list = [];
@@ -563,8 +633,8 @@ export default {
         }
       }
       return list;
-    }
-  }
+    },
+  },
 };
 </script>