소스 검색

Added timeshare filter fix

master
Kobus 5 년 전
부모
커밋
8ce103f907

+ 0
- 1
src/components/shared/searchTab.vue 파일 보기

99
               </div>
99
               </div>
100
             </div>
100
             </div>
101
           </div>
101
           </div>
102
-          {{selectedPropertyType}}
103
           <div class="col-md-12">
102
           <div class="col-md-12">
104
             <button type="submit" class="btn btn-b-n" @click="Search">Search</button>
103
             <button type="submit" class="btn btn-b-n" @click="Search">Search</button>
105
           </div>
104
           </div>

+ 1
- 12
src/components/timeshare/buy/buyPage.vue 파일 보기

13
             />
13
             />
14
           </div>
14
           </div>
15
           <div class="sinse-box">
15
           <div class="sinse-box">
16
-            <h3 class="sinse-title">
17
-              Timeshare To Buy
18
-              <span></span>
19
-            </h3>
16
+            <h3 class="sinse-title">Timshare</h3>
20
           </div>
17
           </div>
21
         </div>
18
         </div>
22
 
19
 
108
                     >See map bigger</a>
105
                     >See map bigger</a>
109
                   </small>
106
                   </small>
110
                 </div>
107
                 </div>
111
-                <div
112
-                  class="tab-pane fade"
113
-                  id="resort-layout"
114
-                  role="tabpanel"
115
-                  aria-labelledby="resort-layout-tab"
116
-                >
117
-                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
118
-                </div>
119
               </div>
108
               </div>
120
             </div>
109
             </div>
121
           </div>
110
           </div>

+ 70
- 54
src/components/timeshare/buy/weekListComponent.vue 파일 보기

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <table class="table table-bordered">
4
-      <thead>
5
-        <tr>
6
-          <th>Region</th>
7
-          <th>Resort</th>
8
-          <th>Unit Number</th>
9
-          <th>Week Number</th>
10
-          <th>Arrival Date</th>
11
-          <th>Departure Date</th>
12
-          <th>Bedrooms</th>
13
-          <th>Price</th>
14
-          <th>Status</th>
15
-          <th>Interested</th>
16
-        </tr>
17
-      </thead>
18
-      <tbody>
19
-        <tr v-for="(item, i) in filteredWeeks" :key="i">
20
-          <td>{{item.region ? item.region.regionName : ''}}</td>
21
-          <td>{{item.resort ? item.resort.resortName : ''}}</td>
22
-          <td>{{item.unitNumber}}</td>
23
-          <td>{{item.weekNumber}}</td>
24
-          <td>{{item.arrivalDate}}</td>
25
-          <td>{{item.departureDate}}</td>
26
-          <td>{{item.bedrooms}}</td>
27
-          <td>{{item.sellPrice | toCurrency}}</td>
28
-          <td>{{item.status ? item.status.description : ''}}</td>
29
-          <td>
30
-            <div class="col-md-12">
31
-              <button
32
-                type="button"
33
-                class="btn btn-b-n"
34
-                data-toggle="modal"
35
-                data-target="#myModal"
36
-              >Make an Offer</button>
37
-              <div id="myModal" class="modal fade" role="dialog">
38
-                <div class="modal-dialog modal-lg">
39
-                  <!-- Modal content-->
40
-                  <div class="modal-content">
41
-                    <div class="modal-header">
42
-                      <button type="button" class="close" data-dismiss="modal">&times;</button>
43
-                    </div>
44
-                    <div padding-left="20px">
45
-                      <makeOffer
46
-                        name="MakeOffer"
47
-                        :isMakeOffer="true"
48
-                        :isProperty="false"
49
-                        :item="item"
50
-                      />
3
+    <div v-if="filteredWeeks.length > 0">
4
+      <table class="table table-bordered">
5
+        <thead>
6
+          <tr>
7
+            <th>Region</th>
8
+            <th>Resort</th>
9
+            <th>Unit Number</th>
10
+            <th>Week Number</th>
11
+            <th>Arrival Date</th>
12
+            <th>Departure Date</th>
13
+            <th>Bedrooms</th>
14
+            <th>Price</th>
15
+            <th>Status</th>
16
+            <th>Interested</th>
17
+          </tr>
18
+        </thead>
19
+        <tbody>
20
+          <tr v-for="(item, i) in filteredWeeks" :key="i">
21
+            <td>{{item.region ? item.region.regionName : ''}}</td>
22
+            <td>{{item.resort ? item.resort.resortName : ''}}</td>
23
+            <td>{{item.unitNumber}}</td>
24
+            <td>{{item.weekNumber}}</td>
25
+            <td>{{item.arrivalDate | toDate}}</td>
26
+            <td>{{item.departureDate | toDate}}</td>
27
+            <td>{{item.bedrooms}}</td>
28
+            <td>{{item.sellPrice | toCurrency}}</td>
29
+            <td>{{item.status ? item.status.description : ''}}</td>
30
+            <td>
31
+              <div class="col-md-12">
32
+                <button
33
+                  type="button"
34
+                  class="btn btn-b-n"
35
+                  data-toggle="modal"
36
+                  data-target="#myModal"
37
+                >Make an Offer</button>
38
+                <div id="myModal" class="modal fade" role="dialog">
39
+                  <div class="modal-dialog modal-lg">
40
+                    <!-- Modal content-->
41
+                    <div class="modal-content">
42
+                      <div class="modal-header">
43
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
44
+                      </div>
45
+                      <div padding-left="20px">
46
+                        <makeOffer
47
+                          name="MakeOffer"
48
+                          :isMakeOffer="true"
49
+                          :isProperty="false"
50
+                          :item="item"
51
+                        />
52
+                      </div>
51
                     </div>
53
                     </div>
52
                   </div>
54
                   </div>
53
                 </div>
55
                 </div>
54
               </div>
56
               </div>
55
-            </div>
56
-          </td>
57
-        </tr>
58
-      </tbody>
59
-    </table>
57
+            </td>
58
+          </tr>
59
+        </tbody>
60
+      </table>
61
+    </div>
62
+    <div v-else>
63
+      <div class="row">
64
+        <div class="col-md-12">
65
+          <hr />No Results Found
66
+          <hr />
67
+        </div>
68
+      </div>
69
+    </div>
60
   </div>
70
   </div>
61
 </template>
71
 </template>
62
 <script>
72
 <script>
64
 import makeOffer from '../../processFlow/makeOffer.vue';
74
 import makeOffer from '../../processFlow/makeOffer.vue';
65
 
75
 
66
 export default {
76
 export default {
77
+  props: {
78
+    resortCode: undefined,
79
+  },
67
   components: {
80
   components: {
68
     makeOffer,
81
     makeOffer,
69
   },
82
   },
74
     }),
87
     }),
75
   },
88
   },
76
   mounted() {
89
   mounted() {
90
+    if (this.resortCode) {
91
+      this.applyResortFilter(this.resortCode);
92
+    }
77
     this.getWeeks();
93
     this.getWeeks();
78
   },
94
   },
79
   methods: {
95
   methods: {
80
-    ...mapActions('weekList', ['getWeeks', 'addDummyWeek']),
96
+    ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
81
   },
97
   },
82
 };
98
 };
83
 </script>
99
 </script>

+ 3
- 53
src/components/timeshare/resort/resortPage.vue 파일 보기

30
       <div class="row">
30
       <div class="row">
31
         <div class="col-md-3">
31
         <div class="col-md-3">
32
           <h4>Filter Resort</h4>
32
           <h4>Filter Resort</h4>
33
-          <form
34
-            id="mainForm"
35
-            method="POST"
36
-            action="/filter"
37
-            accept-charset="UTF-8"
38
-            enctype="multipart/form-data"
39
-          >
40
-            <div class="form-group">
41
-              <select class="form-control" name="season">
42
-                <option value>
43
-                  <span style="color:white;">Season</span>
44
-                </option>
45
-              </select>
46
-            </div>
47
-            <div class="form-group">
48
-              <select class="form-control" name="bedrooms">
49
-                <option value>Bedrooms</option>
50
-              </select>
51
-            </div>
52
-
53
-            <div class="form-group">
54
-              <input
55
-                class="form-control"
56
-                type="number"
57
-                step="any"
58
-                id="minPrice"
59
-                name="minPrice"
60
-                placeholder="Minimum Price"
61
-              />
62
-            </div>
63
-            <div class="form-group">
64
-              <input
65
-                class="form-control"
66
-                type="number"
67
-                step="any"
68
-                id="maxPrice"
69
-                name="maxPrice"
70
-                placeholder="Maximum Price"
71
-              />
72
-            </div>
73
-            <div class="form-group">
74
-              <label>Filter Arrival Date From</label>
75
-              <input type="date" class="form-control" name="arrivaldate" value />
76
-            </div>
77
-            <div class="form-group">
78
-              <label>Filter Arrival Date To</label>
79
-              <input type="date" class="form-control" name="arrivaldate" value />
80
-            </div>
81
-
82
-            <br />
83
-
84
-            <button class="btn btn-b-n" type="submit">Search</button>
85
-          </form>
33
+          <FilterComponent :hideTop="true" />
86
         </div>
34
         </div>
87
         <div class="col-md-9">
35
         <div class="col-md-9">
88
           <WeekList :resortCode="resortCode" />
36
           <WeekList :resortCode="resortCode" />
163
 <script>
111
 <script>
164
 import { mapState, mapActions } from 'vuex';
112
 import { mapState, mapActions } from 'vuex';
165
 import WeekList from '../buy/weekListComponent.vue';
113
 import WeekList from '../buy/weekListComponent.vue';
114
+import FilterComponent from '../searchTimeshare.vue';
166
 
115
 
167
 export default {
116
 export default {
168
   props: {
117
   props: {
170
   },
119
   },
171
   components: {
120
   components: {
172
     WeekList,
121
     WeekList,
122
+    FilterComponent,
173
   },
123
   },
174
   mounted() {
124
   mounted() {
175
     this.initResort(this.resortCode);
125
     this.initResort(this.resortCode);

+ 9
- 3
src/components/timeshare/searchTimeshare.vue 파일 보기

7
       accept-charset="UTF-8"
7
       accept-charset="UTF-8"
8
       enctype="multipart/form-data"
8
       enctype="multipart/form-data"
9
     >
9
     >
10
-      <div class="form-group text-left">
10
+      <div class="form-group text-left" v-if="!hideTop">
11
         <label>Province</label>
11
         <label>Province</label>
12
         <div class="input-group mb-3">
12
         <div class="input-group mb-3">
13
           <div class="input-group-prepend">
13
           <div class="input-group-prepend">
25
           </div>
25
           </div>
26
         </div>
26
         </div>
27
       </div>
27
       </div>
28
-      <div class="form-group text-left">
28
+      <div class="form-group text-left" v-if="!hideTop">
29
         <label>Resort Name</label>
29
         <label>Resort Name</label>
30
         <div class="input-group mb-3">
30
         <div class="input-group mb-3">
31
           <div class="input-group-prepend">
31
           <div class="input-group-prepend">
34
             </span>
34
             </span>
35
           </div>
35
           </div>
36
           <select class="form-control" name="resort" id="resort" v-model="filter.resort">
36
           <select class="form-control" name="resort" id="resort" v-model="filter.resort">
37
-            <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
37
+            <option v-for="(item, i) in filteredResorts" :key="i" :value="item">
38
+              {
39
+              {item.resortName}}
40
+            </option>
38
           </select>
41
           </select>
39
           <div class="input-group-append" @click="clearFilter('resort')">
42
           <div class="input-group-append" @click="clearFilter('resort')">
40
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
43
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
140
 import _ from 'lodash';
143
 import _ from 'lodash';
141
 
144
 
142
 export default {
145
 export default {
146
+  props: {
147
+    hideTop: undefined,
148
+  },
143
   created() {
149
   created() {
144
     this.initTimeshare();
150
     this.initTimeshare();
145
   },
151
   },

+ 11
- 0
src/main.js 파일 보기

1
+/* eslint-disable prefer-template */
1
 import Vue from 'vue';
2
 import Vue from 'vue';
2
 import EvaIcons from 'vue-eva-icons';
3
 import EvaIcons from 'vue-eva-icons';
3
 import App from './App.vue';
4
 import App from './App.vue';
18
   return `R ${formatter.format(value)}`;
19
   return `R ${formatter.format(value)}`;
19
 });
20
 });
20
 
21
 
22
+const myPad = function (value, pattern) {
23
+  const val = '' + value;
24
+  return pattern.substring(0, pattern.length - val.length) + val;
25
+};
26
+
27
+Vue.filter('toDate', (value) => {
28
+  const date = new Date(value);
29
+  return `${date.getFullYear()}/${myPad(date.getMonth(), '00')}/${myPad(date.getDay(), '00')}`;
30
+});
31
+
21
 new Vue({
32
 new Vue({
22
   render: h => h(App),
33
   render: h => h(App),
23
   router,
34
   router,

+ 10
- 0
src/store/modules/timeshare/timeshare.js 파일 보기

185
         }
185
         }
186
       }
186
       }
187
     },
187
     },
188
+    saveWeek({
189
+      commit,
190
+    }, week) {
191
+      axios
192
+        .post('/api/timeshareweek', week)
193
+        .then(result => commit('addDetailedRegion', {
194
+          week,
195
+        }))
196
+        .catch(console.error);
197
+    },
188
   },
198
   },
189
 };
199
 };

+ 16
- 7
src/store/modules/timeshare/weekList.js 파일 보기

1
+/* eslint-disable eqeqeq */
1
 /* eslint-disable no-restricted-syntax */
2
 /* eslint-disable no-restricted-syntax */
2
 /* eslint-disable guard-for-in */
3
 /* eslint-disable guard-for-in */
3
 import axios from 'axios';
4
 import axios from 'axios';
26
     addWeek(state, week) {
27
     addWeek(state, week) {
27
       state.weeks.push(week);
28
       state.weeks.push(week);
28
     },
29
     },
30
+    applyResort(state, resort) {
31
+      state.filter.resort = resort;
32
+    },
29
   },
33
   },
30
   getters: {
34
   getters: {
31
     filteredWeeks: (state) => {
35
     filteredWeeks: (state) => {
44
             && x.resort.resortCode === filter.resort.resortCode);
48
             && x.resort.resortCode === filter.resort.resortCode);
45
         }
49
         }
46
         if (filter.bedrooms) {
50
         if (filter.bedrooms) {
47
-          weekList = _.filter(weekList, x => x.bedrooms
48
-            && x.bedrooms === filter.bedrooms);
51
+          weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms == filter.bedrooms);
49
         }
52
         }
50
         if (filter.date) {
53
         if (filter.date) {
51
           const minDate = new Date(filter.date);
54
           const minDate = new Date(filter.date);
58
             && new Date(x.arrivalDate) <= maxDate);
61
             && new Date(x.arrivalDate) <= maxDate);
59
         }
62
         }
60
         if (filter.minPrice && filter.minPrice !== 0) {
63
         if (filter.minPrice && filter.minPrice !== 0) {
61
-          weekList = _.filter(weekList, x => x.sellingPrice
62
-            && x.sellingPrice >= filter.minPrice);
64
+          weekList = _.filter(weekList, x => x.sellPrice
65
+            && x.sellPrice >= filter.minPrice);
63
         }
66
         }
64
         if (filter.maxPrice && filter.maxPrice !== 0) {
67
         if (filter.maxPrice && filter.maxPrice !== 0) {
65
-          weekList = _.filter(weekList, x => x.sellingPrice
66
-            && x.sellingPrice <= filter.maxPrice);
68
+          weekList = _.filter(weekList, x => x.sellPrice
69
+            && x.sellPrice <= filter.maxPrice);
67
         }
70
         }
68
       }
71
       }
69
-
70
       return weekList;
72
       return weekList;
71
     },
73
     },
72
   },
74
   },
73
   actions: {
75
   actions: {
76
+    applyResortFilter({
77
+      commit,
78
+    }, resortCode) {
79
+      commit('applyResort', {
80
+        resortCode,
81
+      });
82
+    },
74
     getWeeks({
83
     getWeeks({
75
       commit,
84
       commit,
76
     }) {
85
     }) {

Loading…
취소
저장