|
@@ -34,7 +34,7 @@
|
34
|
34
|
<hr />
|
35
|
35
|
</div>
|
36
|
36
|
</div>
|
37
|
|
- <div v-for="(item, i) in unitConfigurationList" :key="i">{{item}}</div>
|
|
37
|
+ <div v-for="(item, i) in sellItem" :key="i">{{item}}</div>
|
38
|
38
|
<div class="row mb-4">
|
39
|
39
|
<div class="container col-md-10">
|
40
|
40
|
<form
|
|
@@ -70,122 +70,131 @@
|
70
|
70
|
</div>
|
71
|
71
|
</div>
|
72
|
72
|
<div class="col-md-4" v-if="refAgent">
|
73
|
|
- <label>Name of Agency</label>
|
74
|
|
- <input
|
75
|
|
- class="form-control"
|
76
|
|
- placeholder="Name of Agency"
|
77
|
|
- type="text"
|
78
|
|
- name="name of agency"
|
79
|
|
- value
|
80
|
|
- />
|
|
73
|
+ <label for="Name of Agency">Agency</label>
|
|
74
|
+ <select class="form-control" id="Agency" name="agency" v-model="sellItem.agency">
|
|
75
|
+ <option v-for="(item, i) in agencies" :key="i">{{item.agencyName}}</option>
|
|
76
|
+ </select>
|
81
|
77
|
</div>
|
82
|
78
|
<div class="col-md-4" v-if="refAgent">
|
83
|
|
- <label>Name of Agent</label>
|
84
|
|
- <input
|
85
|
|
- class="form-control"
|
86
|
|
- placeholder="Name of Agent"
|
87
|
|
- type="text"
|
88
|
|
- name="name of agenct"
|
89
|
|
- value
|
90
|
|
- />
|
|
79
|
+ <label for="Name of Agent">Agent</label>
|
|
80
|
+ <select class="form-control" id="agent" name="agent" v-model="sellItem.agent">
|
|
81
|
+ <option v-for="(item, i) in agents" :key="i">{{item.name}}</option>
|
|
82
|
+ </select>
|
91
|
83
|
</div>
|
92
|
84
|
</div>
|
93
|
85
|
|
94
|
86
|
<div class="form-group row">
|
95
|
87
|
<div class="col-md-6">
|
96
|
|
- <label>Resort Name</label>
|
97
|
|
- <select class="form-control" id="resort" name="resort">
|
98
|
|
- <option value>Please select Resort Name</option>
|
99
|
|
- <option value></option>
|
|
88
|
+ <label for="Resort Name">Resort Name</label>
|
|
89
|
+ <select
|
|
90
|
+ class="form-control"
|
|
91
|
+ id="resort"
|
|
92
|
+ name="resort"
|
|
93
|
+ v-model="sellItem.resort"
|
|
94
|
+ @change="resortChange()"
|
|
95
|
+ >
|
100
|
96
|
<option value="Other">Other</option>
|
|
97
|
+ <option
|
|
98
|
+ v-for="(resort, r) in resorts"
|
|
99
|
+ :key="r"
|
|
100
|
+ :value="resort"
|
|
101
|
+ >{{resort.resortName}}</option>
|
101
|
102
|
</select>
|
102
|
103
|
</div>
|
103
|
104
|
<div class="col-md-6">
|
104
|
|
- <label>* If other</label>
|
105
|
|
- <input class="form-control" placeholder="* If other" type="text" name="other" value />
|
|
105
|
+ <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
|
|
106
|
+ <input
|
|
107
|
+ class="form-control"
|
|
108
|
+ v-if="sellItem.otherResort"
|
|
109
|
+ placeholder="* If other"
|
|
110
|
+ type="text"
|
|
111
|
+ name="other"
|
|
112
|
+ v-model="sellItem.otherResortName"
|
|
113
|
+ />
|
106
|
114
|
</div>
|
107
|
115
|
</div>
|
108
|
116
|
<div class="form-group row">
|
109
|
117
|
<div class="col-md-6">
|
110
|
|
- <label>Region</label>
|
111
|
|
- <select class="form-control" name="region" id="region">
|
112
|
|
- <option value>Please select Region</option>
|
|
118
|
+ <label for="Region">Region</label>
|
|
119
|
+ <select class="form-control" name="region" id="region" v-model="sellItem.region">
|
113
|
120
|
<option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
|
114
|
121
|
</select>
|
115
|
122
|
</div>
|
116
|
123
|
<div class="col-md-6">
|
117
|
|
- <label>Season</label>
|
118
|
|
- <select class="form-control" name="season">
|
119
|
|
- <option value>Please select Season</option>
|
120
|
|
- <option value="Peak">Peak</option>
|
121
|
|
- <option value="Peak 1">Peak 1</option>
|
122
|
|
- <option value="Peak 2">Peak 2</option>
|
123
|
|
- <option value="Peak 3">Peak 3</option>
|
124
|
|
- <option value="Peak 4">Peak 4</option>
|
125
|
|
- <option value="Red">Red</option>
|
126
|
|
- <option value="White">White</option>
|
127
|
|
- <option value="Blue">Blue</option>
|
128
|
|
- <option value="Flexi">Flexi</option>
|
|
124
|
+ <label for="Season">Season</label>
|
|
125
|
+ <select class="form-control" name="season" v-model="sellItem.season">
|
|
126
|
+ <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
|
129
|
127
|
</select>
|
130
|
128
|
</div>
|
131
|
129
|
</div>
|
132
|
130
|
<div class="form-group row">
|
133
|
131
|
<div class="col-md-6">
|
134
|
|
- <label>Module</label>
|
135
|
|
- <input class="form-control" placeholder="Module" type="text" name="module" value />
|
|
132
|
+ <label for="Module">Module</label>
|
|
133
|
+ <input
|
|
134
|
+ class="form-control"
|
|
135
|
+ placeholder="Module"
|
|
136
|
+ type="text"
|
|
137
|
+ name="module"
|
|
138
|
+ v-model="sellItem.module"
|
|
139
|
+ />
|
136
|
140
|
</div>
|
137
|
141
|
<div class="col-md-6">
|
138
|
|
- <label>Week Number</label>
|
139
|
|
- <input class="form-control" placeholder="Week Number" type="text" name="week" value />
|
|
142
|
+ <label for="Week number">Week Number</label>
|
|
143
|
+ <input
|
|
144
|
+ class="form-control"
|
|
145
|
+ placeholder="Week Number"
|
|
146
|
+ type="text"
|
|
147
|
+ name="week"
|
|
148
|
+ v-model="sellItem.weekNumber"
|
|
149
|
+ />
|
140
|
150
|
</div>
|
141
|
151
|
</div>
|
142
|
152
|
<div class="form-group row">
|
143
|
153
|
<div class="col-md-6">
|
144
|
|
- <label>Bedrooms</label>
|
145
|
|
- <select class="form-control" name="bedrooms">
|
146
|
|
- <option value>Please select Bedrooms</option>
|
147
|
|
- <option value="Studio">Studio</option>
|
148
|
|
- <option value="1">1</option>
|
149
|
|
- <option value="2">2</option>
|
150
|
|
- <option value="3">3</option>
|
151
|
|
- <option value="4">4</option>
|
152
|
|
- <option value="5">5</option>
|
153
|
|
- <option value="6">6</option>
|
|
154
|
+ <label for="Bedrooms">Bedrooms</label>
|
|
155
|
+ <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
|
|
156
|
+ <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
|
154
|
157
|
</select>
|
155
|
158
|
</div>
|
156
|
159
|
<div class="col-md-6">
|
157
|
|
- <label>Sleeps maximum</label>
|
158
|
|
- <select class="form-control" name="sleeps">
|
159
|
|
- <option value>Please select Sleeps maximum</option>
|
160
|
|
- <option value="2">2</option>
|
161
|
|
- <option value="4">4</option>
|
162
|
|
- <option value="6">6</option>
|
163
|
|
- <option value="8">8</option>
|
164
|
|
- <option value="10">10</option>
|
165
|
|
- <option value="12">12</option>
|
|
160
|
+ <label for="Sleeps maximum">Sleeps maximum</label>
|
|
161
|
+ <select class="form-control" name="sleeps" v-model="sellItem.maxSleep">
|
|
162
|
+ <option v-for="(item, i) in maxSleep" :key="i">{{item}}</option>
|
166
|
163
|
</select>
|
167
|
164
|
</div>
|
168
|
165
|
</div>
|
169
|
166
|
<div class="form-group row">
|
170
|
167
|
<div class="col-md-6">
|
171
|
|
- <label>Unit number</label>
|
172
|
|
- <input class="form-control" placeholder="Unit Number" type="text" name="unit" value />
|
|
168
|
+ <label for="Unit number">Unit Number</label>
|
|
169
|
+ <input
|
|
170
|
+ class="form-control"
|
|
171
|
+ placeholder="Unit Number"
|
|
172
|
+ type="text"
|
|
173
|
+ name="unit"
|
|
174
|
+ v-model="sellItem.unitNumber"
|
|
175
|
+ />
|
173
|
176
|
</div>
|
174
|
177
|
<div class="col-md-6">
|
175
|
|
- <label>Owner</label>
|
176
|
|
- <input class="form-control" placeholder="Owner" type="text" name="owner" value />
|
|
178
|
+ <label for="Owner">Owner</label>
|
|
179
|
+ <input
|
|
180
|
+ class="form-control"
|
|
181
|
+ placeholder="Owner"
|
|
182
|
+ type="text"
|
|
183
|
+ name="owner"
|
|
184
|
+ v-model="sellItem.owner"
|
|
185
|
+ />
|
177
|
186
|
</div>
|
178
|
187
|
</div>
|
179
|
188
|
<div class="form-group row">
|
180
|
189
|
<div class="col-md-6">
|
181
|
|
- <label>Levy</label>
|
|
190
|
+ <label for="Levy">Levy Amount</label>
|
182
|
191
|
<input
|
183
|
192
|
class="form-control"
|
184
|
193
|
placeholder="Levy"
|
185
|
194
|
type="number"
|
186
|
195
|
step="any"
|
187
|
196
|
name="levy"
|
188
|
|
- value
|
|
197
|
+ v-model="sellItem.levyAmount"
|
189
|
198
|
/>
|
190
|
199
|
</div>
|
191
|
200
|
</div>
|
|
@@ -199,7 +208,8 @@
|
199
|
208
|
name="spacebankedyear"
|
200
|
209
|
id="spacebankedyearyes"
|
201
|
210
|
value="Yes"
|
202
|
|
- checked
|
|
211
|
+ @change="changeCurrentBanked"
|
|
212
|
+ :checked="sellItem.currentYearBanked"
|
203
|
213
|
/>
|
204
|
214
|
<label class="form-check-label" for="spacebankedyearyes">Yes</label>
|
205
|
215
|
</div>
|
|
@@ -210,20 +220,24 @@
|
210
|
220
|
name="spacebankedyear"
|
211
|
221
|
id="spacebankedyearno"
|
212
|
222
|
value="No"
|
213
|
|
- checked
|
|
223
|
+ :checked="!sellItem.currentYearBanked"
|
|
224
|
+ @change="changeCurrentBanked"
|
214
|
225
|
/>
|
215
|
226
|
<label class="form-check-label" for="spacebankedyearno">No</label>
|
216
|
227
|
</div>
|
217
|
228
|
</div>
|
218
|
229
|
<div class="col-md-6">
|
219
|
|
- <label for="If yes, please confirm with whom"></label>
|
220
|
|
- <select class="form-control" name="spacebankOwner">
|
221
|
|
- <option value>If yes, please confirm with whom</option>
|
222
|
|
- <option value="Dial an Exchange">Dial an Exchange</option>
|
223
|
|
- <option value="RCI">RCI</option>
|
224
|
|
- <option value="First Exchange">First Exchange</option>
|
225
|
|
- <option value="iExchange">iExchange</option>
|
226
|
|
- <option value="Interval International">Interval International</option>
|
|
230
|
+ <label
|
|
231
|
+ for="If yes, please confirm with whom"
|
|
232
|
+ v-if="sellItem.currentYearBanked"
|
|
233
|
+ >Please confirm with whom</label>
|
|
234
|
+ <select
|
|
235
|
+ class="form-control"
|
|
236
|
+ name="spacebankOwner"
|
|
237
|
+ v-if="sellItem.currentYearBanked"
|
|
238
|
+ v-model="sellItem.bankedWith"
|
|
239
|
+ >
|
|
240
|
+ <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
|
227
|
241
|
</select>
|
228
|
242
|
</div>
|
229
|
243
|
</div>
|
|
@@ -244,11 +258,25 @@
|
244
|
258
|
>1.1 All levy amounts for the current cycle have been paid in full</label>
|
245
|
259
|
<div class="col-md-4">
|
246
|
260
|
<div class="form-check form-check-inline">
|
247
|
|
- <input class="form-check-input" type="radio" name="paid" value="Yes" checked />
|
|
261
|
+ <input
|
|
262
|
+ class="form-check-input"
|
|
263
|
+ type="radio"
|
|
264
|
+ name="paid"
|
|
265
|
+ value="Yes"
|
|
266
|
+ :checked="sellItem.leviesPaidInFull"
|
|
267
|
+ @change="changeLeviesPaidInFull()"
|
|
268
|
+ />
|
248
|
269
|
<label class="form-check-label" for="paid">Yes</label>
|
249
|
270
|
</div>
|
250
|
271
|
<div class="form-check form-check-inline">
|
251
|
|
- <input class="form-check-input" type="radio" name="paid" value="No" checked />
|
|
272
|
+ <input
|
|
273
|
+ class="form-check-input"
|
|
274
|
+ type="radio"
|
|
275
|
+ name="paid"
|
|
276
|
+ value="No"
|
|
277
|
+ :checked="!sellItem.leviesPaidInFull"
|
|
278
|
+ @change="changeLeviesPaidInFull()"
|
|
279
|
+ />
|
252
|
280
|
<label class="form-check-label" for="paid">No</label>
|
253
|
281
|
</div>
|
254
|
282
|
</div>
|
|
@@ -264,11 +292,25 @@
|
264
|
292
|
>1.2 My week is placed for rental this year</label>
|
265
|
293
|
<div class="col-md-4">
|
266
|
294
|
<div class="form-check form-check-inline">
|
267
|
|
- <input class="form-check-input" type="radio" name="rental" value="Yes" checked />
|
|
295
|
+ <input
|
|
296
|
+ class="form-check-input"
|
|
297
|
+ type="radio"
|
|
298
|
+ name="rental"
|
|
299
|
+ value="Yes"
|
|
300
|
+ :checked="sellItem.weekPlacedForRental"
|
|
301
|
+ @change="changeWeekPlacedForRental()"
|
|
302
|
+ />
|
268
|
303
|
<label class="form-check-label" for="paidyes">Yes</label>
|
269
|
304
|
</div>
|
270
|
305
|
<div class="form-check form-check-inline">
|
271
|
|
- <input class="form-check-input" type="radio" name="rental" value="No" checked />
|
|
306
|
+ <input
|
|
307
|
+ class="form-check-input"
|
|
308
|
+ type="radio"
|
|
309
|
+ name="rental"
|
|
310
|
+ value="No"
|
|
311
|
+ :checked="!sellItem.weekPlacedForRental"
|
|
312
|
+ @change="changeWeekPlacedForRental()"
|
|
313
|
+ />
|
272
|
314
|
<label class="form-check-label" for="paidno">No</label>
|
273
|
315
|
</div>
|
274
|
316
|
</div>
|
|
@@ -283,7 +325,12 @@
|
283
|
325
|
align="left"
|
284
|
326
|
>1.3 I/We bought the timeshare module/week on the following date:</label>
|
285
|
327
|
<div class="col-md-4">
|
286
|
|
- <input type="date" class="form-control" name="date" value />
|
|
328
|
+ <input
|
|
329
|
+ type="date"
|
|
330
|
+ class="form-control"
|
|
331
|
+ name="date"
|
|
332
|
+ v-model="sellItem.originalPurchaseDate"
|
|
333
|
+ />
|
287
|
334
|
</div>
|
288
|
335
|
</div>
|
289
|
336
|
|
|
@@ -296,14 +343,19 @@
|
296
|
343
|
align="left"
|
297
|
344
|
>1.4 The purchase price for which I/we bought timeshare module/week was:</label>
|
298
|
345
|
<div class="col-md-4">
|
299
|
|
- <input
|
300
|
|
- class="form-control"
|
301
|
|
- type="number"
|
302
|
|
- step="any"
|
303
|
|
- name="purchasePrice"
|
304
|
|
- placeholder="R"
|
305
|
|
- value
|
306
|
|
- />
|
|
346
|
+ <div class="input-group mb-3">
|
|
347
|
+ <div class="input-group-prepend">
|
|
348
|
+ <span class="input-group-text">R</span>
|
|
349
|
+ </div>
|
|
350
|
+ <input
|
|
351
|
+ class="form-control"
|
|
352
|
+ type="number"
|
|
353
|
+ step="any"
|
|
354
|
+ name="purchasePrice"
|
|
355
|
+ placeholder="R"
|
|
356
|
+ v-model="sellItem.originalPurchasePrice"
|
|
357
|
+ />
|
|
358
|
+ </div>
|
307
|
359
|
</div>
|
308
|
360
|
</div>
|
309
|
361
|
|
|
@@ -317,13 +369,18 @@
|
317
|
369
|
>1.5 I/We bought the timeshare module/week for the following dates for the current year:</label>
|
318
|
370
|
<div class="col-md-4">
|
319
|
371
|
Arrival Date :
|
320
|
|
- <input type="date" class="form-control" name="occupationDate1" value />
|
|
372
|
+ <input
|
|
373
|
+ type="date"
|
|
374
|
+ class="form-control"
|
|
375
|
+ name="occupationDate1"
|
|
376
|
+ v-model="sellItem.arrivalDate"
|
|
377
|
+ />
|
321
|
378
|
Departure Date :
|
322
|
379
|
<input
|
323
|
380
|
type="date"
|
324
|
381
|
class="form-control"
|
325
|
382
|
name="occupationDate2"
|
326
|
|
- value
|
|
383
|
+ v-model="sellItem.departureDate"
|
327
|
384
|
/>
|
328
|
385
|
</div>
|
329
|
386
|
</div>
|
|
@@ -337,14 +394,19 @@
|
337
|
394
|
align="left"
|
338
|
395
|
>1.6 The selling price for the timeshare module/week for which I/we want to sell is: (Including Vat)</label>
|
339
|
396
|
<div class="col-md-4">
|
340
|
|
- <input
|
341
|
|
- class="form-control"
|
342
|
|
- type="number"
|
343
|
|
- step="any"
|
344
|
|
- name="sellingPrice"
|
345
|
|
- placeholder="R"
|
346
|
|
- value
|
347
|
|
- />
|
|
397
|
+ <div class="input-group mb-3">
|
|
398
|
+ <div class="input-group-prepend">
|
|
399
|
+ <span class="input-group-text">R</span>
|
|
400
|
+ </div>
|
|
401
|
+ <input
|
|
402
|
+ class="form-control"
|
|
403
|
+ type="number"
|
|
404
|
+ step="any"
|
|
405
|
+ name="sellingPrice"
|
|
406
|
+ placeholder="R"
|
|
407
|
+ v-model="sellItem.sellingPrice"
|
|
408
|
+ />
|
|
409
|
+ </div>
|
348
|
410
|
</div>
|
349
|
411
|
</div>
|
350
|
412
|
|
|
@@ -357,14 +419,19 @@
|
357
|
419
|
align="left"
|
358
|
420
|
>1.7 Estate agent’s commission agreed to (state Rand value)</label>
|
359
|
421
|
<div class="col-md-4">
|
360
|
|
- <input
|
361
|
|
- class="form-control"
|
362
|
|
- type="number"
|
363
|
|
- step="any"
|
364
|
|
- name="commission"
|
365
|
|
- placeholder="R"
|
366
|
|
- value
|
367
|
|
- />
|
|
422
|
+ <div class="input-group mb-3">
|
|
423
|
+ <div class="input-group-prepend">
|
|
424
|
+ <span class="input-group-text">R</span>
|
|
425
|
+ </div>
|
|
426
|
+ <input
|
|
427
|
+ class="form-control"
|
|
428
|
+ type="number"
|
|
429
|
+ step="any"
|
|
430
|
+ name="commission"
|
|
431
|
+ placeholder="R"
|
|
432
|
+ v-model="sellItem.agentCommission"
|
|
433
|
+ />
|
|
434
|
+ </div>
|
368
|
435
|
</div>
|
369
|
436
|
</div>
|
370
|
437
|
|
|
@@ -377,7 +444,7 @@
|
377
|
444
|
align="left"
|
378
|
445
|
>1.8 Mandate to sell timeshare</label>
|
379
|
446
|
<div class="col-md-4">
|
380
|
|
- <input class="btn btn-b-n" type="file" name="mandate" value />
|
|
447
|
+ <input class="btn btn-b-n" type="file" name="mandate" />
|
381
|
448
|
</div>
|
382
|
449
|
</div>
|
383
|
450
|
|
|
@@ -411,9 +478,8 @@ export default {
|
411
|
478
|
'regions',
|
412
|
479
|
'detailedRegion',
|
413
|
480
|
'seasons',
|
414
|
|
- 'unitConfigurationList',
|
415
|
481
|
'resortBedrooms',
|
416
|
|
- 'maxBedrooms',
|
|
482
|
+ 'maxSleep',
|
417
|
483
|
'bankedEntities',
|
418
|
484
|
'sellItem',
|
419
|
485
|
'agencies',
|
|
@@ -424,9 +490,33 @@ export default {
|
424
|
490
|
},
|
425
|
491
|
},
|
426
|
492
|
methods: {
|
|
493
|
+ previewFiles(event) {
|
|
494
|
+ console.log(event.target.files);
|
|
495
|
+ },
|
427
|
496
|
changeRef() {
|
|
497
|
+ this.sellItem.agent = undefined;
|
|
498
|
+ this.sellItem.agency = undefined;
|
428
|
499
|
this.sellItem.referedByAgent = !this.sellItem.referedByAgent;
|
429
|
500
|
},
|
|
501
|
+ changeLeviesPaidInFull() {
|
|
502
|
+ this.sellItem.leviesPaidInFull = !this.sellItem.leviesPaidInFull;
|
|
503
|
+ },
|
|
504
|
+ changeWeekPlacedForRental() {
|
|
505
|
+ this.sellItem.weekPlacedForRental = !this.sellItem.weekPlacedForRental;
|
|
506
|
+ },
|
|
507
|
+ changeCurrentBanked() {
|
|
508
|
+ this.sellItem.bankedWith = undefined;
|
|
509
|
+ this.sellItem.currentYearBanked = !this.sellItem.currentYearBanked;
|
|
510
|
+ },
|
|
511
|
+ resortChange() {
|
|
512
|
+ if (this.sellItem && this.sellItem.resort === 'Other') {
|
|
513
|
+ this.sellItem.otherResortName = undefined;
|
|
514
|
+ this.sellItem.otherResort = true;
|
|
515
|
+ } else {
|
|
516
|
+ this.sellItem.otherResortName = undefined;
|
|
517
|
+ this.sellItem.otherResort = false;
|
|
518
|
+ }
|
|
519
|
+ },
|
430
|
520
|
...mapActions('timeshare', ['initTimeshare']),
|
431
|
521
|
},
|
432
|
522
|
};
|