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