Browse Source

Dispose property objects when closing edit page

master
GJWilliams87 4 years ago
parent
commit
e8fc671aaf
1 changed files with 106 additions and 36 deletions
  1. 106
    36
      src/components/property/editProperty/editProperty.vue

+ 106
- 36
src/components/property/editProperty/editProperty.vue View File

6
           <div class="col-12">
6
           <div class="col-12">
7
             <h1>Property Details</h1>
7
             <h1>Property Details</h1>
8
           </div>
8
           </div>
9
-          <main id="main" style="margin-top:-20px">
9
+          <main id="main" style="margin-top: -20px">
10
             <div class="container pt-5 pb-5">
10
             <div class="container pt-5 pb-5">
11
               <div class="row my-3">
11
               <div class="row my-3">
12
                 <div class="col-md-6">
12
                 <div class="col-md-6">
26
                     v-model="property.statusString"
26
                     v-model="property.statusString"
27
                     @change="StatusChanged"
27
                     @change="StatusChanged"
28
                   >
28
                   >
29
-                    <option v-for="(item, i) in Statuses" :key="i">{{ item }}</option>
29
+                    <option v-for="(item, i) in Statuses" :key="i">
30
+                      {{ item }}
31
+                    </option>
30
                   </select>
32
                   </select>
31
                 </div>
33
                 </div>
32
               </div>
34
               </div>
33
               <div class="row my-3">
35
               <div class="row my-3">
34
                 <div class="col-md-6">
36
                 <div class="col-md-6">
35
                   <div v-if="!property.propertyName">
37
                   <div v-if="!property.propertyName">
36
-                    <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
38
+                    <label for="propertyName" class="uniSelectLabel"
39
+                      >PROPERTY NAME</label
40
+                    >
37
                   </div>
41
                   </div>
38
                   <input
42
                   <input
39
                     class="form-control uniInput"
43
                     class="form-control uniInput"
45
                 </div>
49
                 </div>
46
                 <div class="col-md-6">
50
                 <div class="col-md-6">
47
                   <div v-if="!property.propertyRef">
51
                   <div v-if="!property.propertyRef">
48
-                    <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
52
+                    <label for="propertyName" class="uniSelectLabel"
53
+                      >PROPERTY REFERENCE</label
54
+                    >
49
                   </div>
55
                   </div>
50
                   <input
56
                   <input
51
                     class="form-control uniInput"
57
                     class="form-control uniInput"
66
                     :disabled="!canEdit"
72
                     :disabled="!canEdit"
67
                   >
73
                   >
68
                     <option value="0">Please select type *</option>
74
                     <option value="0">Please select type *</option>
69
-                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
75
+                    <option
76
+                      v-for="item in propertyTypes"
77
+                      :value="item.id"
78
+                      :key="item.id"
79
+                    >
70
                       {{ item.description }}
80
                       {{ item.description }}
71
                     </option>
81
                     </option>
72
                   </select>
82
                   </select>
73
                 </div>
83
                 </div>
74
-                <div v-if="property.propertyUsageType === 'Commercial'" class="col-md-2">
84
+                <div
85
+                  v-if="property.propertyUsageType === 'Commercial'"
86
+                  class="col-md-2"
87
+                >
75
                   <div v-if="!property.unit">
88
                   <div v-if="!property.unit">
76
                     <label for="unit" class="uniSelectLabel">UNIT</label>
89
                     <label for="unit" class="uniSelectLabel">UNIT</label>
77
                   </div>
90
                   </div>
95
                   <input
108
                   <input
96
                     type="checkbox"
109
                     type="checkbox"
97
                     v-model="property.showAddress"
110
                     v-model="property.showAddress"
98
-                    style="margin-right: 10px; margin-top: 10px;"
111
+                    style="margin-right: 10px; margin-top: 10px"
99
                     :disabled="!canEdit"
112
                     :disabled="!canEdit"
100
                   />
113
                   />
101
                   <label>Show address on listing</label>
114
                   <label>Show address on listing</label>
107
                         <label
120
                         <label
108
                           for="price"
121
                           for="price"
109
                           class="uniSelectLabel"
122
                           class="uniSelectLabel"
110
-                          style="text-transform:uppercase; margin-left:17px; background-color:white"
123
+                          style="
124
+                            text-transform: uppercase;
125
+                            margin-left: 17px;
126
+                            background-color: white;
127
+                          "
111
                           >{{ property.salesTypeString }} Price</label
128
                           >{{ property.salesTypeString }} Price</label
112
                         >
129
                         >
113
                       </div>
130
                       </div>
149
                   <div
166
                   <div
150
                     class="row my-3"
167
                     class="row my-3"
151
                     v-if="
168
                     v-if="
152
-                      property.statusString === 'Sold' || property.statusString === 'Rented Out'
169
+                      property.statusString === 'Sold' ||
170
+                      property.statusString === 'Rented Out'
153
                     "
171
                     "
154
                   >
172
                   >
155
                     <div class="col-md-12">
173
                     <div class="col-md-12">
169
                   <div class="row my-3">
187
                   <div class="row my-3">
170
                     <div class="col-md-12">
188
                     <div class="col-md-12">
171
                       <div v-if="!property.streetNumber">
189
                       <div v-if="!property.streetNumber">
172
-                        <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
190
+                        <label for="streetNumber" class="uniSelectLabel"
191
+                          >STREET NUMBER</label
192
+                        >
173
                       </div>
193
                       </div>
174
                       <input
194
                       <input
175
                         class="form-control uniInput"
195
                         class="form-control uniInput"
184
                   <div class="row my-3">
204
                   <div class="row my-3">
185
                     <div class="col-md-12">
205
                     <div class="col-md-12">
186
                       <div v-if="!property.streetName">
206
                       <div v-if="!property.streetName">
187
-                        <label for="streetName" class="uniSelectLabel">STREET NAME</label>
207
+                        <label for="streetName" class="uniSelectLabel"
208
+                          >STREET NAME</label
209
+                        >
188
                       </div>
210
                       </div>
189
                       <input
211
                       <input
190
                         class="form-control uniInput"
212
                         class="form-control uniInput"
199
                   <div class="row my-3">
221
                   <div class="row my-3">
200
                     <div class="col-md-12">
222
                     <div class="col-md-12">
201
                       <div v-if="!property.suburb">
223
                       <div v-if="!property.suburb">
202
-                        <label for="suburb" class="uniSelectLabel">SUBURB</label>
224
+                        <label for="suburb" class="uniSelectLabel"
225
+                          >SUBURB</label
226
+                        >
203
                       </div>
227
                       </div>
204
                       <input
228
                       <input
205
                         class="form-control uniInput"
229
                         class="form-control uniInput"
229
                   <div class="row my-3">
253
                   <div class="row my-3">
230
                     <div class="col-md-12">
254
                     <div class="col-md-12">
231
                       <div v-if="!property.province">
255
                       <div v-if="!property.province">
232
-                        <label for="province" class="uniSelectLabel">PROVINCE</label>
256
+                        <label for="province" class="uniSelectLabel"
257
+                          >PROVINCE</label
258
+                        >
233
                       </div>
259
                       </div>
234
                       <input
260
                       <input
235
                         class="form-control uniInput"
261
                         class="form-control uniInput"
244
                   <div class="row my-3">
270
                   <div class="row my-3">
245
                     <div class="col-md-12">
271
                     <div class="col-md-12">
246
                       <div v-if="!property.postalCode">
272
                       <div v-if="!property.postalCode">
247
-                        <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
273
+                        <label for="postalCode" class="uniSelectLabel"
274
+                          >POSTAL CODE</label
275
+                        >
248
                       </div>
276
                       </div>
249
                       <input
277
                       <input
250
                         class="form-control uniInput"
278
                         class="form-control uniInput"
259
                   <div class="row my-3">
287
                   <div class="row my-3">
260
                     <div class="col-md-12">
288
                     <div class="col-md-12">
261
                       <div v-if="!property.country">
289
                       <div v-if="!property.country">
262
-                        <label for="country" class="uniSelectLabel">COUNTRY</label>
290
+                        <label for="country" class="uniSelectLabel"
291
+                          >COUNTRY</label
292
+                        >
263
                       </div>
293
                       </div>
264
                       <input
294
                       <input
265
                         class="form-control uniInput"
295
                         class="form-control uniInput"
273
                   </div>
303
                   </div>
274
                   <div class="row my-3">
304
                   <div class="row my-3">
275
                     <div class="col-md-12">
305
                     <div class="col-md-12">
276
-                      <button type="button" @click="clearAddress()" class="btn-solid-blue">
306
+                      <button
307
+                        type="button"
308
+                        @click="clearAddress()"
309
+                        class="btn-solid-blue"
310
+                      >
277
                         Clear Address
311
                         Clear Address
278
                       </button>
312
                       </button>
279
                     </div>
313
                     </div>
282
               </div>
316
               </div>
283
               <div class="row">
317
               <div class="row">
284
                 <div class="col-md-12">
318
                 <div class="col-md-12">
285
-                  <label for="Property Description" style="font-family:'muli'">Description:</label>
286
-                  <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
319
+                  <label for="Property Description" style="font-family: 'muli'"
320
+                    >Description:</label
321
+                  >
322
+                  <vue-editor
323
+                    v-model="property.description"
324
+                    :editor-toolbar="customToolbar"
325
+                  />
287
                   <br />
326
                   <br />
288
                 </div>
327
                 </div>
289
               </div>
328
               </div>
291
                 <div class="section-header">
330
                 <div class="section-header">
292
                   <h2>Property Information</h2>
331
                   <h2>Property Information</h2>
293
                 </div>
332
                 </div>
294
-                <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
295
-                  <div class="col-md-6" v-for="field in item.fields" :key="field.id">
333
+                <div
334
+                  class="row mb-3"
335
+                  v-for="item in propertyFields"
336
+                  :key="item.id"
337
+                >
338
+                  <div
339
+                    class="col-md-6"
340
+                    v-for="field in item.fields"
341
+                    :key="field.id"
342
+                  >
296
                     <div v-if="field.type === 'number'">
343
                     <div v-if="field.type === 'number'">
297
                       {{ field.name }}
344
                       {{ field.name }}
298
                       <input
345
                       <input
313
                     </div>
360
                     </div>
314
                     <div v-else-if="field.type === 'yesno'">
361
                     <div v-else-if="field.type === 'yesno'">
315
                       {{ field.name }}
362
                       {{ field.name }}
316
-                      <input type="checkbox" v-model="field.value" :disabled="!canEdit" />
363
+                      <input
364
+                        type="checkbox"
365
+                        v-model="field.value"
366
+                        :disabled="!canEdit"
367
+                      />
317
                     </div>
368
                     </div>
318
                     <div v-else class="display:none"></div>
369
                     <div v-else class="display:none"></div>
319
                   </div>
370
                   </div>
345
               </div>
396
               </div>
346
               <div class="row mt-3">
397
               <div class="row mt-3">
347
                 <div class="col-md-12 mt-2">
398
                 <div class="col-md-12 mt-2">
348
-                  <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
399
+                  <label v-if="!property.video" class="uniSelectLabel"
400
+                    >Video (URL)</label
401
+                  >
349
                   <float-label label="Video (URL)">
402
                   <float-label label="Video (URL)">
350
                     <input
403
                     <input
351
                       class="form-control uniInput"
404
                       class="form-control uniInput"
374
                 @DeleteImage="DeleteImage"
427
                 @DeleteImage="DeleteImage"
375
                 :mayEdit="canEdit"
428
                 :mayEdit="canEdit"
376
               />
429
               />
377
-              <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
430
+              <button
431
+                v-if="!wait"
432
+                type="button"
433
+                @click="SubmitData()"
434
+                class="btn-solid-blue"
435
+              >
378
                 Save
436
                 Save
379
               </button>
437
               </button>
380
-              <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">
438
+              <button
439
+                v-if="!wait"
440
+                type="button"
441
+                @click="Close()"
442
+                class="btn-solid-blue"
443
+              >
381
                 Close
444
                 Close
382
               </button>
445
               </button>
383
               <div v-if="!addressSet">
446
               <div v-if="!addressSet">
405
   components: {
468
   components: {
406
     mapSection,
469
     mapSection,
407
     ImageLoad,
470
     ImageLoad,
408
-    VueEditor
471
+    VueEditor,
409
   },
472
   },
410
   data() {
473
   data() {
411
     return {
474
     return {
417
       customToolbar: [
480
       customToolbar: [
418
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
481
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
419
         ["bold", "italic", "underline", "strike"],
482
         ["bold", "italic", "underline", "strike"],
420
-        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
483
+        [
484
+          { align: "" },
485
+          { align: "center" },
486
+          { align: "right" },
487
+          { align: "justify" },
488
+        ],
421
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
489
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
422
         [{ script: "sub" }, { script: "super" }],
490
         [{ script: "sub" }, { script: "super" }],
423
-        [{ indent: "-1" }, { indent: "+1" }]
424
-      ]
491
+        [{ indent: "-1" }, { indent: "+1" }],
492
+      ],
425
     };
493
     };
426
   },
494
   },
427
   methods: {
495
   methods: {
429
       "getProperty",
497
       "getProperty",
430
       "getPropertyTypes",
498
       "getPropertyTypes",
431
       "getPropertyFields",
499
       "getPropertyFields",
432
-      "updateProperty"
500
+      "updateProperty",
433
     ]),
501
     ]),
434
     StatusChanged(item) {
502
     StatusChanged(item) {
435
       if (
503
       if (
492
         }
560
         }
493
         this.property.newImages.push({
561
         this.property.newImages.push({
494
           image: this.images[i],
562
           image: this.images[i],
495
-          isDefault: setAsDefault
563
+          isDefault: setAsDefault,
496
         });
564
         });
497
       }
565
       }
498
 
566
 
500
 
568
 
501
       //console.log(JSON.stringify(this.property));
569
       //console.log(JSON.stringify(this.property));
502
 
570
 
503
-      this.updateProperty(this.property).then(fulfilled => {
571
+      this.updateProperty(this.property).then((fulfilled) => {
504
         this.$router.push("/PropertyAdmin");
572
         this.$router.push("/PropertyAdmin");
505
       });
573
       });
506
     },
574
     },
507
     Close() {
575
     Close() {
576
+      this.property = {};
577
+      this.propertyImages = [];
508
       this.$router.push("/PropertyAdmin");
578
       this.$router.push("/PropertyAdmin");
509
     },
579
     },
510
     updateLocation(place) {
580
     updateLocation(place) {
521
     },
591
     },
522
     DeleteImage(item) {
592
     DeleteImage(item) {
523
       this.propertyImages[item].isDeleted = true;
593
       this.propertyImages[item].isDeleted = true;
524
-    }
594
+    },
525
   },
595
   },
526
   mounted() {
596
   mounted() {
527
-    this.getProperty(this.$route.params.id).then(fulfilled => {
597
+    this.getProperty(this.$route.params.id).then((fulfilled) => {
528
       this.wait = false;
598
       this.wait = false;
529
       if (
599
       if (
530
         this.property.statusString === "Offer Pending" ||
600
         this.property.statusString === "Offer Pending" ||
543
       "propertyTypes",
613
       "propertyTypes",
544
       "propertyImages",
614
       "propertyImages",
545
       "propertyFields",
615
       "propertyFields",
546
-      "statuses"
616
+      "statuses",
547
     ]),
617
     ]),
548
     savedImages() {
618
     savedImages() {
549
       const list = [];
619
       const list = [];
563
         }
633
         }
564
       }
634
       }
565
       return list;
635
       return list;
566
-    }
567
-  }
636
+    },
637
+  },
568
 };
638
 };
569
 </script>
639
 </script>
570
 
640
 

Loading…
Cancel
Save