瀏覽代碼

Validation and standardisation

master
Brian Conway 2 年之前
父節點
當前提交
801a574e45

+ 1
- 1
src/components/admin/status/agencyUserManagementPage.vue 查看文件

@@ -31,7 +31,7 @@
31 31
         <div class="col-md-1 offset-1">
32 32
             <button type="button" class="btn-solid-blue">AGENCIES</button>
33 33
           </div>
34
-        <div class="col-md-2 offset-3">
34
+        <div class="col-md-3 offset-3">
35 35
           <button
36 36
             type="button"
37 37
             class="btn-white-border"

src/components/admin/status/agentsUserManagementPage.vue → src/components/admin/status/agentUserManagementPage.vue 查看文件

@@ -36,17 +36,17 @@
36 36
             type="button"
37 37
             class="btn-white-border"
38 38
             data-toggle="modal"
39
-            :data-target="'#myModalAgency'"
39
+            :data-target="'#myModalAgent'"
40 40
           >
41 41
             NEW AGENT
42 42
           </button>
43
-          <div :id="'myModalAgency'" class="modal fade" role="dialog">
43
+          <div :id="'myModalAgent'" class="modal fade" role="dialog">
44 44
             <div class="modal-dialog modal-lg">
45 45
               <div class="modal-content">
46 46
                 <div class="modal-header">
47 47
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
48 48
                 </div>
49
-                <Agency name="Agency" :isAddAgent="false" :item="item" />
49
+                <Agent name="Agent" :isAddAgent="false" :item="item" />
50 50
               </div>
51 51
             </div>
52 52
           </div>
@@ -88,7 +88,7 @@
88 88
 /* eslint-disable */
89 89
 import { mapState, mapActions } from "vuex";
90 90
 import axios from "axios";
91
-import Agency from "../../user/registerAgencySection.vue";
91
+import Agent from "../../user/registerAgentSection.vue";
92 92
 // import alert from '../../shared/alert.vue';
93 93
 import ListView from "../../shared/listView.vue";
94 94
 
@@ -96,7 +96,7 @@ export default {
96 96
   name: "agentManagementPage",
97 97
   components: {
98 98
     ListView,
99
-    Agency
99
+    Agent
100 100
     // alert,
101 101
   },
102 102
   props: {
@@ -110,7 +110,7 @@ export default {
110 110
     };
111 111
   },
112 112
   methods: {
113
-    ...mapActions("register", ["getAgents", "deleteAgent"]),
113
+    ...mapActions("register", ["getAgencies", "getAgents", "deleteAgent"]),
114 114
     addNewAgent({ commit }) {
115 115
       axios
116 116
         .post("/api/agent")
@@ -130,6 +130,7 @@ export default {
130 130
   },
131 131
   mounted() {
132 132
     this.getAgents();
133
+    this.getAgencies();
133 134
   },
134 135
   computed: {
135 136
     ...mapState("register", ["agents", "removeAgent"])

+ 0
- 0
src/components/admin/test.html 查看文件


+ 227
- 137
src/components/home/carouselSection.vue 查看文件

@@ -1,118 +1,148 @@
1 1
 <template>
2 2
   <section id="intro">
3 3
     <div class="container">
4
-      <div class="row">
5
-        <div align="left" class="col-sm-12 col-md-12 col-lg-8">
6
-          <div class="intro-content introContentAdjust">
7
-            <h2>Find your perfect Property</h2>
8
-            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
9
-              <li class="nav-item">
10
-                <a
11
-                  class="nav-link btn-white-border"
12
-                  id="timeshare-tab"
13
-                  data-toggle="pill"
14
-                  href="#timeshare"
15
-                  role="tab"
16
-                  aria-controls="timeshare"
17
-                  aria-selected="true"
18
-                >Timeshare</a>
19
-              </li>
20
-              <li class="nav-item">
21
-                <a
22
-                  class="nav-link btn-white-border"
23
-                  id="commercial-tab"
24
-                  data-toggle="pill"
25
-                  href="#commercial"
26
-                  role="tab"
27
-                  aria-controls="commercial"
28
-                  aria-selected="false"
29
-                >Commercial</a>
30
-              </li>
31
-              <li class="nav-item">
32
-                <a
33
-                  class="nav-link btn-white-border"
34
-                  id="residential-tab"
35
-                  data-toggle="pill"
36
-                  href="#residential"
37
-                  role="tab"
38
-                  aria-controls="residential"
39
-                  aria-selected="false"
40
-                >Residential</a>
41
-              </li>
42
-            </ul>
43
-            <!--========    header tabs      ==========-->
44
-            <div class="tab-content" id="pills-tabContent">
45
-              <div
46
-                class="tab-pane fade show active"
47
-                id="start"
48
-                role="tabpanel"
49
-                aria-labelledby="start-tab"
50
-              >
51
-                <p>Choose an option to start your adventure</p>
52
-              </div>
4
+      <div class="form">
5
+        <div class="row">
6
+          <div align="left" class="col-sm-12 col-md-12 col-lg-8">
7
+            <div class="intro-content">
8
+              <h2>Find your perfect Property</h2>
9
+              <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
10
+                <li class="nav-item">
11
+                  <a
12
+                    class="nav-link"
13
+                    id="timeshare-tab"
14
+                    data-toggle="pill"
15
+                    href="#timeshare"
16
+                    role="tab"
17
+                    aria-controls="timeshare"
18
+                    aria-selected="false"
19
+                  >
20
+                    Timeshare
21
+                  </a>
22
+                </li>
23
+                <li class="nav-item">
24
+                  <a
25
+                    class="nav-link"
26
+                    id="commercial-tab"
27
+                    data-toggle="pill"
28
+                    href="#commercial"
29
+                    role="tab"
30
+                    aria-controls="commercial"
31
+                    aria-selected="false"
32
+                  >
33
+                    Commercial
34
+                  </a>
35
+                </li>
36
+                <li class="nav-item">
37
+                  <a
38
+                    class="nav-link"
39
+                    id="residential-tab"
40
+                    data-toggle="pill"
41
+                    href="#residential"
42
+                    role="tab"
43
+                    aria-controls="residential"
44
+                    aria-selected="false"
45
+                  >
46
+                    Residential
47
+                  </a>
48
+                </li>
49
+              </ul>
50
+              <!--========    header tabs      ==========-->
51
+              <div class="tab-content" id="pills-tabContent">
52
+                <div
53
+                  class="tab-pane fade show active"
54
+                  id="start"
55
+                  role="tabpanel"
56
+                  aria-labelledby="start-tab"
57
+                >
58
+                  <p>Choose an option to start your adventure</p>
59
+                </div>
53 60
 
54
-              <div
55
-                class="tab-pane fade show"
56
-                id="timeshare"
57
-                role="tabpanel"
58
-                aria-labelledby="timeshare-tab"
59
-              >
60
-                <H4>TIMESHARE SALES</H4>
61
-                <p>Start exploring your posibilities</p>
62
-                <div id="row">
63
-                  <router-link to="/timeshare/buy" class="btn-solid-blue">
64
-                    <i class="fa fa-search"></i> BUY
65
-                  </router-link>
66
-                  <router-link to="/timeshare/sell" class="btn-solid-blue">
67
-                    <i class="fa chevron-circle-right"></i> SELL
68
-                  </router-link>
61
+                <div
62
+                  class="tab-pane fade"
63
+                  id="timeshare"
64
+                  role="tabpanel"
65
+                  aria-labelledby="timeshare-tab"
66
+                >
67
+                  <H4>Timeshare Sales</H4>
68
+                  <p>Start exploring your posibilities</p>
69
+                  <div id="row">
70
+                    <router-link to="/timeshare/buy" class="btn-white-border">
71
+                      <i class="fa fa-search"></i>
72
+                      Buy
73
+                    </router-link>
74
+                    <router-link to="/timeshare/sell" class="btn-white-border">
75
+                      <i class="fa chevron-circle-right"></i>
76
+                      Sell
77
+                    </router-link>
78
+                  </div>
69 79
                 </div>
70
-              </div>
71 80
 
72
-              <div
73
-                class="tab-pane fade"
74
-                id="commercial"
75
-                role="tabpanel"
76
-                aria-labelledby="commercial-tab"
77
-              >
78
-                <h4>COMMERCIAL PROPERTIES</h4>
79
-                <p>Select the region you are looking for to start your search</p>
80
-                <div id="row">
81
-                  <div class="form-group">
82
-                    <autoComplete @GoogleAddress="UpdateAddress" />
81
+                <div
82
+                  class="tab-pane fade"
83
+                  id="commercial"
84
+                  role="tabpanel"
85
+                  aria-labelledby="commercial-tab"
86
+                >
87
+                  <h4>Commercial Properties</h4>
88
+                  <p>
89
+                    Select the region you are looking for to start your search
90
+                  </p>
91
+                  <div id="row">
92
+                    <div class="form-group">
93
+                      <autoComplete @GoogleAddress="UpdateAddress" />
94
+                    </div>
95
+                    <a
96
+                      v-on:click="SearchClickRentComm()"
97
+                      class="btn-white-border scrollto"
98
+                    >
99
+                      <i class="fa fa-search"></i>
100
+                      Rent
101
+                    </a>
102
+                    <a
103
+                      v-on:click="SearchClickBuyComm()"
104
+                      class="btn-white-border scrollto"
105
+                    >
106
+                      <i class="fa fa-search"></i>
107
+                      Buy
108
+                    </a>
83 109
                   </div>
84
-                  <a v-on:click="SearchClickRentComm()" class="btn-solid-blue scrollto">
85
-                    <i class="fa fa-search"></i> RENT
86
-                  </a>
87
-                  <a v-on:click="SearchClickBuyComm()" class="btn-solid-blue scrollto">
88
-                    <i class="fa fa-search"></i> BUY
89
-                  </a>
90 110
                 </div>
91
-              </div>
92 111
 
93
-              <div
94
-                class="tab-pane fade"
95
-                id="residential"
96
-                role="tabpanel"
97
-                aria-labelledby="residential-tab"
98
-              >
99
-                <h4>RESIDENTIAL PROPERTIES</h4>
100
-                <p>Select the region you are looking for to start your search</p>
101
-                <div id="row">
102
-                  <div class="form-group">
103
-                    <autoComplete @GoogleAddress="UpdateAddress" />
112
+                <div
113
+                  class="tab-pane fade"
114
+                  id="residential"
115
+                  role="tabpanel"
116
+                  aria-labelledby="residential-tab"
117
+                >
118
+                  <h4>Residential Properties</h4>
119
+                  <p>
120
+                    Select the region you are looking for to start your search
121
+                  </p>
122
+                  <div id="row">
123
+                    <div class="form-group">
124
+                      <autoComplete @GoogleAddress="UpdateAddress" />
125
+                    </div>
126
+                    <a
127
+                      v-on:click="SearchClickRentRes()"
128
+                      class="btn-white-border scrollto"
129
+                    >
130
+                      <i class="fa fa-search"></i>
131
+                      Rent
132
+                    </a>
133
+                    <a
134
+                      v-on:click="SearchClickBuyRes()"
135
+                      class="btn-white-border scrollto"
136
+                    >
137
+                      <i class="fa fa-search"></i>
138
+                      Buy
139
+                    </a>
104 140
                   </div>
105
-                  <a v-on:click="SearchClickRentRes()" class="btn-solid-blue scrollto">
106
-                    <i class="fa fa-search"></i> RENT
107
-                  </a>
108
-                  <a v-on:click="SearchClickBuyRes()" class="btn-solid-blue scrollto">
109
-                    <i class="fa fa-search"></i> BUY
110
-                  </a>
111 141
                 </div>
112 142
               </div>
113
-            </div>
114 143
 
115
-            <div></div>
144
+              <div></div>
145
+            </div>
116 146
           </div>
117 147
         </div>
118 148
       </div>
@@ -125,15 +155,48 @@
125 155
       :autoplay="true"
126 156
       :loop="true"
127 157
       id="intro-carousel"
128
-      style="margin-top:-50px"
129
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
158
+      style="margin-top: -50px;"
159
+      :responsive="{
160
+        0: { items: 1, nav: false },
161
+        600: { items: 1, nav: false },
162
+      }"
130 163
     >
131
-      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt />
132
-      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt />
133
-      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt />
134
-      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt />
135
-      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt />
136
-      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt />
164
+      <img
165
+        class="item"
166
+        src="/img/intro-carousel/home-1.jpg"
167
+        style="object-fit: cover;"
168
+        alt
169
+      />
170
+      <img
171
+        class="item"
172
+        src="/img/intro-carousel/home-2.jpg"
173
+        style="object-fit: cover;"
174
+        alt
175
+      />
176
+      <img
177
+        class="item"
178
+        src="/img/intro-carousel/home-3.jpg"
179
+        style="object-fit: cover;"
180
+        alt
181
+      />
182
+      <img
183
+        class="item"
184
+        src="/img/intro-carousel/home-4.jpg"
185
+        style="object-fit: cover;"
186
+        alt
187
+      />
188
+      <img
189
+        class="item"
190
+        src="/img/intro-carousel/home-5.jpg"
191
+        style="object-fit: cover;"
192
+        alt
193
+      />
194
+      <img
195
+        class="item"
196
+        src="/img/intro-carousel/home-6.jpg"
197
+        style="object-fit: cover;"
198
+        alt
199
+      />
137 200
     </carousel>
138 201
 
139 202
     <div id="intro-carousel" class="owl-carousel"></div>
@@ -143,80 +206,80 @@
143 206
 
144 207
 <script>
145 208
 /* eslint-disable */
146
-import { mapState, mapActions } from "vuex";
147
-import carousel from "vue-owl-carousel";
148
-import autoComplete from "../shared/addressAutoComplete";
209
+import { mapState, mapActions } from 'vuex'
210
+import carousel from 'vue-owl-carousel'
211
+import autoComplete from '../shared/addressAutoComplete'
149 212
 export default {
150 213
   components: {
151 214
     carousel,
152 215
     autoComplete,
153 216
   },
154 217
   computed: {
155
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
218
+    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
156 219
   },
157 220
   data() {
158 221
     return {
159
-      propertyUsageType: "Commercial",
160
-      salesType: "Sale",
161
-      searchText: "",
222
+      propertyUsageType: 'Commercial',
223
+      salesType: 'Sale',
224
+      searchText: '',
162 225
       clicked: false,
163
-    };
226
+    }
164 227
   },
165 228
   methods: {
166
-    ...mapActions("propertySearch", ["applyFilter"]),
229
+    ...mapActions('propertySearch', ['applyFilter']),
167 230
     SetSalesType(value) {
168
-      this.salesType = value;
231
+      this.salesType = value
169 232
     },
170 233
     SearchClickBuyRes() {
171 234
       // const item = this.suburbs.find((s) => s.display === this.searchText);
172 235
       // this.propertySearch.province = item.province;
173 236
       // this.propertySearch.city = item.city;
174 237
       // this.propertySearch.suburb = item.suburb;
175
-      this.propertySearch.propertyUsageType = "Residential";
176
-      this.propertySearch.salesType = "Sale";
238
+      this.propertySearch.propertyUsageType = 'Residential'
239
+      this.propertySearch.salesType = 'Sale'
177 240
 
178
-      this.$router.push("/property/residential/searchResult");
241
+      this.$router.push('/property/residential/searchResult')
179 242
     },
180 243
     SearchClickRentRes() {
181 244
       // const item = this.suburbs.find((s) => s.display === this.searchText);
182 245
       // this.propertySearch.province = item.province;
183 246
       // this.propertySearch.city = item.city;
184 247
       // this.propertySearch.suburb = item.suburb;
185
-      this.propertySearch.propertyUsageType = "Residential";
186
-      this.propertySearch.salesType = "Rent";
248
+      this.propertySearch.propertyUsageType = 'Residential'
249
+      this.propertySearch.salesType = 'Rent'
187 250
 
188
-      this.$router.push("/property/residential/searchResult");
251
+      this.$router.push('/property/residential/searchResult')
189 252
     },
190 253
     SearchClickBuyComm() {
191 254
       // const item = this.suburbs.find((s) => s.display === this.searchText);
192 255
       // this.propertySearch.province = item.province;
193 256
       // this.propertySearch.city = item.city;
194 257
       // this.propertySearch.suburb = item.suburb;
195
-      this.propertySearch.propertyUsageType = "Commercial";
196
-      this.propertySearch.salesType = "Sale";
258
+      this.propertySearch.propertyUsageType = 'Commercial'
259
+      this.propertySearch.salesType = 'Sale'
197 260
 
198
-      this.$router.push("/property/commercial/searchResult");
261
+      this.$router.push('/property/commercial/searchResult')
199 262
     },
200 263
     SearchClickRentComm() {
201 264
       // const item = this.suburbs.find((s) => s.display === this.searchText);
202 265
       // this.propertySearch.province = item.province;
203 266
       // this.propertySearch.city = item.city;
204 267
       // this.propertySearch.suburb = item.suburb;
205
-      this.propertySearch.propertyUsageType = "Commercial";
206
-      this.propertySearch.salesType = "Rent";
268
+      this.propertySearch.propertyUsageType = 'Commercial'
269
+      this.propertySearch.salesType = 'Rent'
207 270
 
208
-      this.$router.push("/property/commercial/searchResult");
271
+      this.$router.push('/property/commercial/searchResult')
209 272
     },
210 273
     SelectedFilter(item) {
211
-      this.searchText = item;
274
+      this.searchText = item
212 275
     },
213 276
     UpdateAddress(place) {
214
-      this.propertySearch.province = place.province;
215
-      this.propertySearch.city = place.city;
216
-      this.propertySearch.suburb = place.suburb;
277
+      this.propertySearch.province = place.province
278
+      this.propertySearch.city = place.city
279
+      this.propertySearch.suburb = place.suburb
217 280
     },
218 281
   },
219
-};
282
+}
220 283
 </script>
221 284
 
222 285
 <style lang="scss" scoped>
@@ -254,4 +317,31 @@ export default {
254 317
     margin-top: 120px !important;
255 318
   }
256 319
 }
320
+.nav-tabs li a {
321
+  border-top: none;
322
+  border-left: none;
323
+  border-right: none;
324
+  background-color: white;
325
+  border-bottom-color: rgb(27, 117, 187);
326
+  border: 1px solid rgb(27, 117, 187);
327
+}
328
+
329
+.nav-tabs li :hover {
330
+  color: white;
331
+  background-color: rgb(27, 117, 187);
332
+}
333
+
334
+.nav-tabs li a.active {
335
+  border-top: none;
336
+  border-left: none;
337
+  border-right: none;
338
+  color: white;
339
+  background-color: rgb(80, 133, 240);
340
+  border-bottom-color: rgb(80, 133, 240);
341
+}
342
+
343
+.nav-tabs li a :hover {
344
+  background-color: transparent;
345
+  color: white;
346
+}
257 347
 </style>

+ 123
- 84
src/components/property/commercial/commercialCarouselSection.vue 查看文件

@@ -1,69 +1,77 @@
1 1
 <template>
2 2
   <section id="intro">
3 3
     <div class="container">
4
-      <div class="row">
5
-        <div align="left" class="col-sm-12 col-md-8">
6
-          <div class="intro-content">
7
-            <h2>Find an Office</h2>
8
-
9
-            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
10
-              <li class="nav-item">
11
-                <a
12
-                  class="nav-link btn-white-border"
13
-                  id="buy-tab"
14
-                  data-toggle="pill"
15
-                  href="#buy"
16
-                  role="tab"
17
-                  aria-controls="buy"
18
-                  aria-selected="true"
19
-                  @click="SetSalesType('Sale')"
20
-                >Buy office space</a>
21
-              </li>
22
-              <li class="nav-item">
23
-                <a
24
-                  class="nav-link btn-white-border"
25
-                  id="rent-tab"
26
-                  data-toggle="pill"
27
-                  href="#rent"
28
-                  role="tab"
29
-                  aria-controls="rent"
30
-                  aria-selected="false"
31
-                  @click="SetSalesType('Rent')"
32
-                >Rent an office</a>
33
-              </li>
34
-            </ul>
35
-            <div class="tab-content" id="pills-tabContent">
36
-              <div
37
-                class="tab-pane fade show active"
38
-                id="start"
39
-                role="tabpanel"
40
-                aria-labelledby="start-tab"
41
-              >
42
-                <p></p>
43
-              </div>
44
-
45
-              <div class="tab-pane fade show" id="buy" role="tabpanel" aria-labelledby="buy-tab">
46
-                <h4>PROPERTIES FOR SALE</h4>
47
-                <div class="row">
48
-                  <div class="form-group col-md-12">
49
-                    <autoComplete @GoogleAddress="SetAddress" />
4
+      <div class="form">
5
+        <div class="row">
6
+          <div align="left" class="col-sm-12 col-md-8">
7
+            <div class="intro-content">
8
+              <h2>Find an Office</h2>
9
+              <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
10
+                <li class="nav-item">
11
+                  <a
12
+                    class="nav-link active"
13
+                    id="buy-tab"
14
+                    data-toggle="pill"
15
+                    href="#buy"
16
+                    role="tab"
17
+                    aria-controls="buy"
18
+                    aria-selected="true"
19
+                    @click="SetSalesType('Sale')"
20
+                  >
21
+                    Buy an office
22
+                  </a>
23
+                </li>
24
+                <li class="nav-item">
25
+                  <a
26
+                    class="nav-link"
27
+                    id="rent-tab"
28
+                    data-toggle="pill"
29
+                    href="#rent"
30
+                    role="tab"
31
+                    aria-controls="rent"
32
+                    aria-selected="false"
33
+                    @click="SetSalesType('Rent')"
34
+                  >
35
+                    Rent an office
36
+                  </a>
37
+                </li>
38
+              </ul>
39
+              <div class="tab-content" id="pills-tabContent">
40
+                <div
41
+                  class="tab-pane fade show active"
42
+                  id="buy"
43
+                  role="tabpanel"
44
+                  aria-labelledby="buy-tab"
45
+                >
46
+                  <h4>Properties for Sale</h4>
47
+                  <div class="row">
48
+                    <div class="form-group col-md-12">
49
+                      <autoComplete @GoogleAddress="SetAddress" />
50
+                    </div>
50 51
                   </div>
52
+                  <a v-on:click="SearchClick" class="btn-white-border">
53
+                    <i class="fa fa-search"></i>
54
+                    Search
55
+                  </a>
51 56
                 </div>
52
-                <a v-on:click="SearchClick" class="btn-solid-blue">
53
-                  <i class="fa fa-search"></i> SEARCH
54
-                </a>
55
-              </div>
56 57
 
57
-              <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
58
-                <h4>RENTAL PROPERTIES</h4>
59
-                <div class="row">
60
-                  <div class="form-group col-md-12">
61
-                    <autoComplete @GoogleAddress="SetAddress" />
58
+                <div
59
+                  class="tab-pane fade"
60
+                  id="rent"
61
+                  role="tabpanel"
62
+                  aria-labelledby="rent-tab"
63
+                >
64
+                  <h4>Rental Properties</h4>
65
+                  <div class="row">
66
+                    <div class="form-group col-md-12">
67
+                      <autoComplete @GoogleAddress="SetAddress" />
68
+                    </div>
62 69
                   </div>
70
+                  <a v-on:click="SearchClick" class="btn-white-border">
71
+                    <i class="fa fa-search"></i>
72
+                    Search
73
+                  </a>
63 74
                 </div>
64
-                <a v-on:click="SearchClick" class="btn-solid-blue">
65
-                  <i class="fa fa-search"></i> FIND
66
-                </a>
67 75
               </div>
68 76
             </div>
69 77
           </div>
@@ -78,8 +86,11 @@
78 86
       :autoplay="true"
79 87
       :loop="true"
80 88
       id="intro-carousel"
81
-      style="margin-top:-50px"
82
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
89
+      style="margin-top: -50px;"
90
+      :responsive="{
91
+        0: { items: 1, nav: false },
92
+        600: { items: 1, nav: false },
93
+      }"
83 94
     >
84 95
       <img class="item" src="img/intro-carousel/comm-1.jpg" alt />
85 96
       <img class="item" src="img/intro-carousel/comm-2.jpg" alt />
@@ -95,10 +106,10 @@
95 106
 
96 107
 <script>
97 108
 /* eslint-disable */
98
-import { mapState, mapActions } from "vuex";
99
-import autoComplete from "../../shared/addressAutoComplete";
100
-import carousel from "vue-owl-carousel";
101
-import searchResult from "./commercialSearchResults";
109
+import { mapState, mapActions } from 'vuex'
110
+import autoComplete from '../../shared/addressAutoComplete'
111
+import carousel from 'vue-owl-carousel'
112
+import searchResult from './commercialSearchResults'
102 113
 export default {
103 114
   components: {
104 115
     carousel,
@@ -107,38 +118,66 @@ export default {
107 118
   },
108 119
   data() {
109 120
     return {
110
-      propertyUsageType: "Commercial",
111
-      salesType: "Sale",
112
-      searchText: "",
121
+      propertyUsageType: 'Commercial',
122
+      salesType: 'Sale',
123
+      searchText: '',
113 124
       clicked: false,
114
-    };
125
+    }
115 126
   },
116 127
   computed: {
117
-    ...mapState("propertySearch", ["propertySearch"]),
128
+    ...mapState('propertySearch', ['propertySearch']),
118 129
   },
119 130
   methods: {
120
-    ...mapActions("propertySearch", ["applyFilter"]),
131
+    ...mapActions('propertySearch', ['applyFilter']),
121 132
     SetSalesType(value) {
122
-      this.salesType = value;
133
+      this.salesType = value
123 134
     },
124 135
     SearchClick() {
125
-      this.propertySearch.propertyUsageType = this.propertyUsageType;
126
-      this.propertySearch.salesType = this.salesType;
136
+      this.propertySearch.propertyUsageType = this.propertyUsageType
137
+      this.propertySearch.salesType = this.salesType
127 138
 
128
-      this.$router.push("/property/commercial/searchResult");
139
+      this.$router.push('/property/commercial/searchResult')
129 140
     },
130 141
     SetAddress(place) {
131
-      this.propertySearch.province = place.province;
132
-      this.propertySearch.city = place.city;
133
-      this.propertySearch.suburb = place.suburb;
142
+      this.propertySearch.province = place.province
143
+      this.propertySearch.city = place.city
144
+      this.propertySearch.suburb = place.suburb
134 145
     },
135 146
   },
136
-  mounted() {    
137
-    this.propertySearch.city = "All";
138
-    this.propertySearch.suburb = "All";
139
-    this.propertySearch.province = "All";
140
-  }
141
-};
147
+  mounted() {
148
+    this.propertySearch.city = 'All'
149
+    this.propertySearch.suburb = 'All'
150
+    this.propertySearch.province = 'All'
151
+  },
152
+}
142 153
 </script>
143 154
 
144
-<style lang="scss" scoped></style>
155
+<style lang="scss" scoped>
156
+.nav-tabs li a {
157
+  border-top: none;
158
+  border-left: none;
159
+  border-right: none;
160
+  background-color: white;
161
+  border-bottom-color: rgb(27, 117, 187);
162
+  border: 1px solid rgb(27, 117, 187);
163
+}
164
+
165
+.nav-tabs li :hover {
166
+  color: white;
167
+  background-color: rgb(27, 117, 187);
168
+}
169
+
170
+.nav-tabs li a.active {
171
+  border-top: none;
172
+  border-left: none;
173
+  border-right: none;
174
+  color: white;
175
+  background-color: rgb(80, 133, 240);
176
+  border-bottom-color: rgb(80, 133, 240);
177
+}
178
+
179
+.nav-tabs li a :hover {
180
+  background-color: transparent;
181
+  color: white;
182
+}
183
+</style>

+ 110
- 58
src/components/property/propertyPage.vue 查看文件

@@ -6,10 +6,9 @@
6 6
       <div class="row">
7 7
         <div class="col-md-12 col-lg-8">
8 8
           <div class="title-box-d">
9
-            <h1
10
-              class="title-d"
11
-              style="text-align:left; font-size: 250%"
12
-            >{{ property.shortDescription }}</h1>
9
+            <h1 class="title-d" style="text-align: left; font-size: 250%;">
10
+              {{ property.shortDescription }}
11
+            </h1>
13 12
           </div>
14 13
         </div>
15 14
       </div>
@@ -30,7 +29,11 @@
30 29
                 :key="i"
31 30
               />
32 31
             </div>
33
-            <gallery :images="propertyImages" :index="index" @close="index = null"></gallery>
32
+            <gallery
33
+              :images="propertyImages"
34
+              :index="index"
35
+              @close="index = null"
36
+            ></gallery>
34 37
           </div>
35 38
         </div>
36 39
         <br />
@@ -41,17 +44,19 @@
41 44
                 <div class="row">
42 45
                   <div class="col-sm-12">
43 46
                     <div class="title-box-d">
44
-                      <h3 class="title-d" style="text-align:left">Property Description</h3>
47
+                      <h3 class="title-d" style="text-align: left;">
48
+                        Property Description
49
+                      </h3>
45 50
                     </div>
46 51
                   </div>
47 52
                 </div>
48 53
                 <div
49 54
                   class="property-description"
50
-                  style="text-align:left"
55
+                  style="text-align: left;"
51 56
                   v-html="property.description"
52 57
                 />
53 58
                 <div v-for="display in property.displayData" :key="display.id">
54
-                  <div class="row section-t3" style="text-align:left">
59
+                  <div class="row section-t3" style="text-align: left;">
55 60
                     <div class="col-sm-12">
56 61
                       <div class="title-box-d">
57 62
                         <h3 class="title-d">{{ display.groupName }}</h3>
@@ -59,7 +64,11 @@
59 64
                     </div>
60 65
                   </div>
61 66
                   <div class="summary-list">
62
-                    <ul class="list" v-for="item in display.values" :key="item.id">
67
+                    <ul
68
+                      class="list"
69
+                      v-for="item in display.values"
70
+                      :key="item.id"
71
+                    >
63 72
                       <li class="d-flex justify-content-between">
64 73
                         <strong>{{ item.name }}:</strong>
65 74
                         <span v-html="item.value"></span>
@@ -71,12 +80,23 @@
71 80
               <div class="col-md-5 col-lg-4">
72 81
                 <div class="property-price d-flex justify-content-center foo">
73 82
                   <!-- <div class="card-header-c d-flex"> -->
74
-                  <div style="width: 300px; height: 80px; border-style: solid; color: #60CBEB;">
83
+                  <div
84
+                    style="
85
+                      width: 300px;
86
+                      height: 80px;
87
+                      border-style: solid;
88
+                      color: #60cbeb;
89
+                    "
90
+                  >
75 91
                     <!-- <span class="ion-money">R</span> -->
76 92
 
77 93
                     <div class="card-title-c align-self-center">
78
-                      <h5 class="title-c">R{{ formatPrice(property.price) }}</h5>
79
-                      <h6 v-if="property.pricePer">Per {{ property.pricePer }}</h6>
94
+                      <h5 class="title-c">
95
+                        R{{ formatPrice(property.price) }}
96
+                      </h5>
97
+                      <h6 v-if="property.pricePer">
98
+                        Per {{ property.pricePer }}
99
+                      </h6>
80 100
                     </div>
81 101
                   </div>
82 102
                   <!-- </div> -->
@@ -85,17 +105,22 @@
85 105
                   <div class="row">
86 106
                     <div class="col-sm-12">
87 107
                       <div class="title-box-d section-t4">
88
-                        <h3 class="title-d" style="text-align:left">Summary</h3>
108
+                        <h3 class="title-d" style="text-align: left;">
109
+                          Summary
110
+                        </h3>
89 111
                       </div>
90 112
                     </div>
91 113
                   </div>
92 114
                   <div class="summary-list">
93 115
                     <ul class="list">
94
-                      <li v-if="!property.isSale" class="d-flex justify-content-between">
116
+                      <li
117
+                        v-if="!property.isSale"
118
+                        class="d-flex justify-content-between"
119
+                      >
95 120
                         <strong>Available:</strong>
96
-                        <span
97
-                          v-if="property.dateAvailable < date"
98
-                        >{{ property.dateAvailable | toDate }}</span>
121
+                        <span v-if="property.dateAvailable < date">
122
+                          {{ property.dateAvailable | toDate }}
123
+                        </span>
99 124
                         <span v-else>Now</span>
100 125
                       </li>
101 126
                       <li class="d-flex justify-content-between">
@@ -112,15 +137,25 @@
112 137
                       <li class="d-flex justify-content-between">
113 138
                         <strong>Address:</strong>
114 139
                         <span
115
-                          style="text-align:right"
140
+                          style="text-align: right;"
116 141
                           v-if="property"
117 142
                           v-html="
118 143
                             formatAddress(property.addressLine1) +
119
-                              formatAddress(property.addressLine2) +
120
-                              formatAddress(property.addressLine3) +
121
-                              formatAddress(property.suburb ? property.suburb.description : '') +
122
-                              formatAddress(property.city ? property.city.description : '') +
123
-                              formatAddress(property.province ? property.province.description : '')
144
+                            formatAddress(property.addressLine2) +
145
+                            formatAddress(property.addressLine3) +
146
+                            formatAddress(
147
+                              property.suburb
148
+                                ? property.suburb.description
149
+                                : '',
150
+                            ) +
151
+                            formatAddress(
152
+                              property.city ? property.city.description : '',
153
+                            ) +
154
+                            formatAddress(
155
+                              property.province
156
+                                ? property.province.description
157
+                                : '',
158
+                            )
124 159
                           "
125 160
                         ></span>
126 161
                       </li>
@@ -133,13 +168,21 @@
133 168
                     class="btn btn-b-n"
134 169
                     data-toggle="modal"
135 170
                     data-target="#myModal"
136
-                  >Make an Offer</button>
171
+                  >
172
+                    Make an Offer
173
+                  </button>
137 174
                   <div id="myModal" class="modal fade" role="dialog">
138 175
                     <div class="modal-dialog modal-lg">
139 176
                       <!-- Modal content-->
140 177
                       <div class="modal-content">
141 178
                         <div class="modal-header">
142
-                          <button type="button" class="close" data-dismiss="modal">&times;</button>
179
+                          <button
180
+                            type="button"
181
+                            class="close"
182
+                            data-dismiss="modal"
183
+                          >
184
+                            &times;
185
+                          </button>
143 186
                         </div>
144 187
                         <div padding-left="20px">
145 188
                           <makeOffer
@@ -150,7 +193,7 @@
150 193
                               id: property.id,
151 194
                               shortDescription: property.shortDescription,
152 195
                               description: property.description,
153
-                              price: property.price
196
+                              price: property.price,
154 197
                             }"
155 198
                           />
156 199
                         </div>
@@ -171,7 +214,9 @@
171 214
                   <div class="row section-t3">
172 215
                     <div class="col-sm-12">
173 216
                       <div class="title-box-d">
174
-                        <h3 class="title-d" style="text-align:left">Contact Agent</h3>
217
+                        <h3 class="title-d" style="text-align: left;">
218
+                          Contact Agent
219
+                        </h3>
175 220
                       </div>
176 221
                     </div>
177 222
                   </div>
@@ -217,7 +262,9 @@
217 262
                               </div>
218 263
                             </div>
219 264
                             <div class="col-md-12">
220
-                              <button type="submit" class="btn btn-b-n">Send Message</button>
265
+                              <button type="submit" class="btn btn-b-n">
266
+                                Send Message
267
+                              </button>
221 268
                             </div>
222 269
                           </div>
223 270
                         </form>
@@ -233,12 +280,17 @@
233 280
         <!-- Tab Control -->
234 281
         <div class="row">
235 282
           <div class="col-md-12">
236
-            <div v-if="property.virtualTour" class="row justify-content-between">
283
+            <div
284
+              v-if="property.virtualTour"
285
+              class="row justify-content-between"
286
+            >
237 287
               <div class="col-md-12 col-lg-12 section-md-t3">
238 288
                 <div class="row">
239 289
                   <div class="col-md-12">
240 290
                     <div class="title-box-d">
241
-                      <h3 class="title-d" style="text-align:left">Virtual Tour</h3>
291
+                      <h3 class="title-d" style="text-align: left;">
292
+                        Virtual Tour
293
+                      </h3>
242 294
                     </div>
243 295
                   </div>
244 296
                 </div>
@@ -261,7 +313,7 @@
261 313
                 <div class="row">
262 314
                   <div class="col-md-12">
263 315
                     <div class="title-box-d">
264
-                      <h3 class="title-d" style="text-align:left">Video</h3>
316
+                      <h3 class="title-d" style="text-align: left;">Video</h3>
265 317
                     </div>
266 318
                   </div>
267 319
                 </div>
@@ -270,7 +322,7 @@
270 322
                   width="100%"
271 323
                   height="700"
272 324
                   frameborder="0"
273
-                  style="border:0"
325
+                  style="border: 0;"
274 326
                   allowfullscreen
275 327
                 ></iframe>
276 328
               </div>
@@ -284,53 +336,53 @@
284 336
 </template>
285 337
 
286 338
 <script>
287
-import { mapState, mapActions } from "vuex";
288
-import makeOffer from "../processFlow/makeOffer.vue";
289
-import gallery from "../shared/gallerySlideShow.vue";
339
+import { mapState, mapActions } from 'vuex'
340
+import makeOffer from '../processFlow/makeOffer.vue'
341
+import gallery from '../shared/gallerySlideShow.vue'
290 342
 
291 343
 export default {
292
-  name: "property",
344
+  name: 'property',
293 345
   components: {
294 346
     makeOffer,
295
-    gallery
347
+    gallery,
296 348
   },
297 349
   data() {
298 350
     return {
299 351
       index: null,
300
-      date: new Date()
301
-    };
352
+      date: new Date(),
353
+    }
302 354
   },
303 355
   mounted() {
304
-    this.getProperty(this.$route.params.id);
305
-    this.getPropertyImages(this.$route.params.id);
306
-    this.mayEditProperty(this.$route.params.id);
356
+    this.getProperty(this.$route.params.id)
357
+    this.getPropertyImages(this.$route.params.id)
358
+    this.mayEditProperty(this.$route.params.id)
307 359
   },
308 360
   computed: {
309
-    ...mapState("property", ["property", "propertyImages"]),
310
-    ...mapState("propertyEdit", ["mayEdit"])
361
+    ...mapState('property', ['property', 'propertyImages']),
362
+    ...mapState('propertyEdit', ['mayEdit']),
311 363
   },
312 364
   methods: {
313
-    ...mapActions("property", [
314
-      "getProperty",
315
-      "getPropertyImages",
316
-      "clearPropertyImages"
365
+    ...mapActions('property', [
366
+      'getProperty',
367
+      'getPropertyImages',
368
+      'clearPropertyImages',
317 369
     ]),
318
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
370
+    ...mapActions('propertyEdit', ['mayEditProperty']),
319 371
     formatPrice(value) {
320
-      const val = (value / 1).toFixed(2);
321
-      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
372
+      const val = (value / 1).toFixed(2)
373
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
322 374
     },
323 375
     formatAddress(value) {
324
-      if (value !== "") {
325
-        return `${value}<br/>`;
376
+      if (value !== '') {
377
+        return `${value}<br/>`
326 378
       }
327
-      return "";
328
-    }
379
+      return ''
380
+    },
329 381
   },
330 382
   beforeDestroy() {
331
-    this.clearPropertyImages();
332
-  }
333
-};
383
+    this.clearPropertyImages()
384
+  },
385
+}
334 386
 </script>
335 387
 
336 388
 <style lang="scss">

+ 159
- 90
src/components/property/residential/residentialCarouselSection.vue 查看文件

@@ -2,69 +2,78 @@
2 2
   <div>
3 3
     <section id="intro">
4 4
       <div class="container">
5
-        <div class="row">
6
-          <div align="left" class="col-sm-12 col-md-8">
7
-            <div class="intro-content">
8
-              <h2>Find your Home</h2>
9
-
10
-              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
11
-                <li class="nav-item">
12
-                  <a
13
-                    class="nav-link btn-white-border"
14
-                    id="buy-tab"
15
-                    data-toggle="pill"
16
-                    href="#buy"
17
-                    role="tab"
18
-                    aria-controls="buy"
19
-                    aria-selected="true"
20
-                    @click="SetSalesType('Sale')"
21
-                  >Buy</a>
22
-                </li>
23
-                <li class="nav-item">
24
-                  <a
25
-                    class="nav-link btn-white-border"
26
-                    id="rent-tab"
27
-                    data-toggle="pill"
28
-                    href="#rent"
29
-                    role="tab"
30
-                    aria-controls="rent"
31
-                    aria-selected="false"
32
-                    @click="SetSalesType('Rent')"
33
-                  >Rent</a>
34
-                </li>
35
-              </ul>
36
-              <div class="tab-content" id="pills-tabContent">
37
-                <div
38
-                  class="tab-pane fade show active"
39
-                  id="start"
40
-                  role="tabpanel"
41
-                  aria-labelledby="start-tab"
42
-                >
43
-                  <p></p>
44
-                </div>
5
+        <div class="form">
6
+          <div class="row">
7
+            <div align="left" class="col-sm-12 col-md-8">
8
+              <div class="intro-content">
9
+                <h2>Find your Home</h2>
45 10
 
46
-                <div class="tab-pane fade show" id="buy" role="tabpanel" aria-labelledby="buy-tab">
47
-                  <h4>PROPERTIES FOR SALE</h4>
48
-                  <div class="row">
49
-                    <div align="left" class="form-group col-md-12">
50
-                      <autoComplete @GoogleAddress="UpdateAddress" />
11
+                <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
12
+                  <li class="nav-item">
13
+                    <a
14
+                      class="nav-link active"
15
+                      id="buy-tab"
16
+                      data-toggle="pill"
17
+                      href="#buy"
18
+                      role="tab"
19
+                      aria-controls="buy"
20
+                      aria-selected="true"
21
+                      @click="SetSalesType('Sale')"
22
+                    >
23
+                      Buy
24
+                    </a>
25
+                  </li>
26
+                  <li class="nav-item">
27
+                    <a
28
+                      class="nav-link"
29
+                      id="rent-tab"
30
+                      data-toggle="pill"
31
+                      href="#rent"
32
+                      role="tab"
33
+                      aria-controls="rent"
34
+                      aria-selected="false"
35
+                      @click="SetSalesType('Rent')"
36
+                    >
37
+                      Rent
38
+                    </a>
39
+                  </li>
40
+                </ul>
41
+                <div class="tab-content" id="pills-tabContent">
42
+                  <div
43
+                    class="tab-pane fade show active"
44
+                    id="buy"
45
+                    role="tabpanel"
46
+                    aria-labelledby="buy-tab"
47
+                  >
48
+                    <h4>Properties for Sale</h4>
49
+                    <div class="row">
50
+                      <div align="left" class="form-group col-md-12">
51
+                        <autoComplete @GoogleAddress="UpdateAddress" />
52
+                      </div>
51 53
                     </div>
54
+                    <a v-on:click="SearchClick" class="btn-white-border">
55
+                      <i class="fa fa-search"></i>
56
+                      Search
57
+                    </a>
52 58
                   </div>
53
-                  <a v-on:click="SearchClick" class="btn-solid-blue">
54
-                    <i class="fa fa-search"></i> SEARCH
55
-                  </a>
56
-                </div>
57 59
 
58
-                <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
59
-                  <h4>RENTAL PROPERTIES</h4>
60
-                  <div class="row">
61
-                    <div align="left" class="form-group col">
62
-                      <autoComplete @GoogleAddress="UpdateAddress" />
60
+                  <div
61
+                    class="tab-pane fade"
62
+                    id="rent"
63
+                    role="tabpanel"
64
+                    aria-labelledby="rent-tab"
65
+                  >
66
+                    <h4>Rental Properties</h4>
67
+                    <div class="row">
68
+                      <div align="left" class="form-group col">
69
+                        <autoComplete @GoogleAddress="UpdateAddress" />
70
+                      </div>
63 71
                     </div>
72
+                    <a v-on:click="SearchClick" class="btn-white-border">
73
+                      <i class="fa fa-search"></i>
74
+                      Search
75
+                    </a>
64 76
                   </div>
65
-                  <a v-on:click="SearchClick" class="btn-solid-blue">
66
-                    <i class="fa fa-search"></i> FIND
67
-                  </a>
68 77
                 </div>
69 78
               </div>
70 79
             </div>
@@ -79,18 +88,51 @@
79 88
         :autoplay="true"
80 89
         :loop="true"
81 90
         id="intro-carousel"
82
-        style="margin-top:-50px"
83
-        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
91
+        style="margin-top: -50px;"
92
+        :responsive="{
93
+          0: { items: 1, nav: false },
94
+          600: { items: 1, nav: false },
95
+        }"
84 96
       >
85
-        <img class="item" src="img/intro-carousel/residential-1.jpg" style="object-fit: cover" alt />
86
-        <img class="item" src="img/intro-carousel/residential-2.jpg" style="object-fit: cover" alt />
87
-        <img class="item" src="img/intro-carousel/residential-3.jpg" style="object-fit: cover" alt />
88
-        <img class="item" src="img/intro-carousel/residential-4.jpg" style="object-fit: cover" alt />
89
-        <img class="item" src="img/intro-carousel/residential-5.jpg" style="object-fit: cover" alt />
90
-        <img class="item" src="img/intro-carousel/residential-6.jpg" style="object-fit: cover" alt />
97
+        <img
98
+          class="item"
99
+          src="img/intro-carousel/residential-1.jpg"
100
+          style="object-fit: cover;"
101
+          alt
102
+        />
103
+        <img
104
+          class="item"
105
+          src="img/intro-carousel/residential-2.jpg"
106
+          style="object-fit: cover;"
107
+          alt
108
+        />
109
+        <img
110
+          class="item"
111
+          src="img/intro-carousel/residential-3.jpg"
112
+          style="object-fit: cover;"
113
+          alt
114
+        />
115
+        <img
116
+          class="item"
117
+          src="img/intro-carousel/residential-4.jpg"
118
+          style="object-fit: cover;"
119
+          alt
120
+        />
121
+        <img
122
+          class="item"
123
+          src="img/intro-carousel/residential-5.jpg"
124
+          style="object-fit: cover;"
125
+          alt
126
+        />
127
+        <img
128
+          class="item"
129
+          src="img/intro-carousel/residential-6.jpg"
130
+          style="object-fit: cover;"
131
+          alt
132
+        />
91 133
       </carousel>
92 134
     </section>
93
-    <main id="main" style="margin-top:-20px">
135
+    <main id="main" style="margin-top: -20px;">
94 136
       <div class="container-fluid">
95 137
         <div class="row">
96 138
           <div
@@ -111,10 +153,10 @@
111 153
 
112 154
 <script>
113 155
 /* eslint-disable */
114
-import { mapState, mapActions } from "vuex";
115
-import autoComplete from "../../shared/addressAutoComplete";
116
-import carousel from "vue-owl-carousel";
117
-import searchResult from "../propertySearchResults";
156
+import { mapState, mapActions } from 'vuex'
157
+import autoComplete from '../../shared/addressAutoComplete'
158
+import carousel from 'vue-owl-carousel'
159
+import searchResult from '../propertySearchResults'
118 160
 export default {
119 161
   components: {
120 162
     carousel,
@@ -123,42 +165,42 @@ export default {
123 165
   },
124 166
   data() {
125 167
     return {
126
-      propertyUsageType: "Residential",
127
-      salesType: "Sale",
128
-      searchText: "",
168
+      propertyUsageType: 'Residential',
169
+      salesType: 'Sale',
170
+      searchText: '',
129 171
       clicked: false,
130
-    };
172
+    }
131 173
   },
132 174
   computed: {
133
-    ...mapState("propertySearch", ["propertySearch"]),
175
+    ...mapState('propertySearch', ['propertySearch']),
134 176
   },
135 177
   methods: {
136
-    ...mapActions("propertySearch", ["applyFilter"]),
178
+    ...mapActions('propertySearch', ['applyFilter']),
137 179
     SetSalesType(value) {
138
-      this.salesType = value;
180
+      this.salesType = value
139 181
     },
140 182
     SearchClick() {
141
-      this.propertySearch.propertyUsageType = this.propertyUsageType;
142
-      this.propertySearch.salesType = this.salesType;
183
+      this.propertySearch.propertyUsageType = this.propertyUsageType
184
+      this.propertySearch.salesType = this.salesType
143 185
 
144 186
       //this.clicked = true;
145
-      this.$router.push("/property/residential/searchResult");
187
+      this.$router.push('/property/residential/searchResult')
146 188
     },
147 189
     SelectedFilter(item) {
148
-      this.searchText = item;
190
+      this.searchText = item
149 191
     },
150 192
     UpdateAddress(place) {
151
-      this.propertySearch.province = place.province;
152
-      this.propertySearch.city = place.city;
153
-      this.propertySearch.suburb = place.suburb;
193
+      this.propertySearch.province = place.province
194
+      this.propertySearch.city = place.city
195
+      this.propertySearch.suburb = place.suburb
154 196
     },
155 197
   },
156
-  mounted() {    
157
-    this.propertySearch.city = "All";
158
-    this.propertySearch.suburb = "All";
159
-    this.propertySearch.province = "All";
160
-  }
161
-};
198
+  mounted() {
199
+    this.propertySearch.city = 'All'
200
+    this.propertySearch.suburb = 'All'
201
+    this.propertySearch.province = 'All'
202
+  },
203
+}
162 204
 </script>
163 205
 
164 206
 <style lang="scss" scoped>
@@ -215,4 +257,31 @@ export default {
215 257
 .searchComponent--clicked {
216 258
   opacity: 1;
217 259
 }
260
+.nav-tabs li a {
261
+  border-top: none;
262
+  border-left: none;
263
+  border-right: none;
264
+  background-color: white;
265
+  border-bottom-color: rgb(27, 117, 187);
266
+  border: 1px solid rgb(27, 117, 187);
267
+}
268
+
269
+.nav-tabs li :hover {
270
+  color: white;
271
+  background-color: rgb(27, 117, 187);
272
+}
273
+
274
+.nav-tabs li a.active {
275
+  border-top: none;
276
+  border-left: none;
277
+  border-right: none;
278
+  color: white;
279
+  background-color: rgb(80, 133, 240);
280
+  border-bottom-color: rgb(80, 133, 240);
281
+}
282
+
283
+.nav-tabs li a :hover {
284
+  background-color: transparent;
285
+  color: white;
286
+}
218 287
 </style>

+ 131
- 111
src/components/shared/contactUsSection.vue 查看文件

@@ -7,74 +7,89 @@
7 7
           <alert :text="errorMessage" :type="errorOccurred" />
8 8
         </div>
9 9
       </div>
10
-      <div class="form-row">
10
+      <div class="row">
11 11
         <div class="form-group col-md-6">
12
-          <input
12
+          <float-label label="Name" style="width: 100%;">
13
+            <input
13 14
               type="text"
14 15
               id="name"
15
-              class="form-control"
16
+              class="form-control uniInput my-2"
16 17
               v-model="name"
17
-              v-bind:class="{'is-valid': name,
18
-                'is-invalid': !requiredField(name) && nameLoad}"
18
+              v-bind:class="{
19
+                'is-valid': name,
20
+                'is-invalid': !requiredField(name) && nameLoad,
21
+              }"
19 22
               v-on:keyup="nameLoad = true"
20 23
               v-on:blur="nameLoad = true"
21 24
               placeholder="Name"
22 25
             />
23 26
             <div class="invalid-feedback">Name is required!</div>
27
+          </float-label>
24 28
         </div>
25 29
         <div class="form-group col-md-6">
26
-          <input
30
+          <float-label label="Email" style="width: 100%;">
31
+            <input
27 32
               type="email"
28
-              id="email"
29
-              v-model="email"
30
-              class="form-control"
31
-              v-bind:class="{'is-valid': email,
32
-                'is-invalid': !validEmail(email) && emailLoad}"
33
-              v-on:keyup="emailLoad = true"
34
-              v-on:blur="emailLoad = true"
33
+              id="contactemail"
34
+              v-model="contactemail"
35
+              class="form-control uniInput my-2"
36
+              v-bind:class="{
37
+                'is-valid': contactemail,
38
+                'is-invalid': !validEmail(contactemail) && contactemailLoad,
39
+              }"
40
+              v-on:keyup="contactemailLoad = true"
41
+              v-on:blur="contactemailLoad = true"
35 42
               placeholder="Email"
36 43
             />
37 44
             <div class="invalid-feedback">Valid email address is required!</div>
45
+          </float-label>
38 46
         </div>
39 47
         <div class="form-group col-md-6">
40
-          <input
41
-            type="text"
42
-            id="phone"
43
-            v-model="phone"
44
-            class="form-control"
45
-            v-bind:class="{'is-valid': phone}"
46
-            placeholder="Phone Number"
47
-          />
48
+          <float-label label="Phone Number" style="width: 100%;">
49
+            <input
50
+              type="text"
51
+              id="phone"
52
+              v-model="phone"
53
+              class="form-control uniInput my-2"
54
+              v-bind:class="{ 'is-valid': phone }"
55
+              placeholder="Phone Number"
56
+            />
57
+          </float-label>
48 58
         </div>
49 59
         <div class="form-group col-md-6">
50
-          <input
51
-            type="text"
52
-            id="property"
53
-            v-model="property"
54
-            class="form-control"
55
-            v-bind:class="{'is-valid': property}"
56
-            placeholder="Property"
57
-          />
60
+          <float-label label="Property" style="width: 100%;">
61
+            <input
62
+              type="text"
63
+              id="property"
64
+              v-model="property"
65
+              class="form-control uniInput my-2"
66
+              v-bind:class="{ 'is-valid': property }"
67
+              placeholder="Property"
68
+            />
69
+          </float-label>
58 70
         </div>
59 71
       </div>
60 72
       <div class="form-group">
61
-
62
-        <textarea
63
-          type="text"
64
-          id="message"
65
-          rows="5"
66
-          class="form-control"
67
-          v-model="message"
68
-          v-bind:class="{'is-valid': message,
69
-            'is-invalid': !requiredField(message) && messageLoad}"
70
-          v-on:keyup="messageLoad = true"
71
-          v-on:blur="messageLoad = true"
72
-          placeholder="Message"
73
-        ></textarea>
74
-        <div class="invalid-feedback">Message is required!</div>
73
+        <float-label label="Message" style="width: 100%;">
74
+          <textarea
75
+            type="text"
76
+            id="message"
77
+            rows="5"
78
+            class="form-control uniInput my-2"
79
+            v-model="message"
80
+            v-bind:class="{
81
+              'is-valid': message,
82
+              'is-invalid': !requiredField(message) && messageLoad,
83
+            }"
84
+            v-on:keyup="messageLoad = true"
85
+            v-on:blur="messageLoad = true"
86
+            placeholder="Message"
87
+          ></textarea>
88
+          <div class="invalid-feedback">Message is required!</div>
89
+        </float-label>
75 90
       </div>
76 91
       <div class="text-center">
77
-        <button class="btn-solid-blue" @click="sendMail()">SEND</button>
92
+        <button class="btn-white-border" @click="sendMail()">Send</button>
78 93
       </div>
79 94
       <div v-if="boolSent">
80 95
         <alert :text="alertMsg" :type="'SUCCESS'" />
@@ -85,108 +100,113 @@
85 100
 
86 101
 <script>
87 102
 /* eslint-disable */
88
-import axios from "axios";
89
-import alert from "../shared/alert";
103
+import axios from 'axios'
104
+import alert from '../shared/alert'
90 105
 
91 106
 export default {
92 107
   components: {
93
-    alert
108
+    alert,
94 109
   },
95 110
   data() {
96 111
     return {
97
-      alertMsg: "Sent! You can expect a reply soon!",
112
+      alertMsg: 'Sent! You can expect a reply soon!',
98 113
       name: '',
99
-      email: '',
114
+      contactemail: '',
100 115
       phone: '',
101 116
       property: '',
102 117
       message: '',
103 118
       boolSent: false,
104
-      errorOccurred: "",
105
-      errorMessage: "",
119
+      errorOccurred: '',
120
+      errorMessage: '',
106 121
       boolValidationError: false,
107 122
       nameLoad: false,
108
-      emailLoad: false,
109
-      messageLoad: false
110
-    };
123
+      contactemailLoad: false,
124
+      messageLoad: false,
125
+    }
111 126
   },
112 127
   mounted() {
113
-    this.boolSent = false;
128
+    this.boolSent = false
129
+    console.log('Email')
130
+    console.log(this.contactemail)
114 131
   },
115 132
   methods: {
116 133
     async sendMail() {
117 134
       if (this.validatePage()) {
118 135
         var mailObj = {
119 136
           name: this.name,
120
-          email: this.email,
137
+          email: this.contactemail,
121 138
           phone: this.phone,
122 139
           property: this.property,
123
-          message: this.message
124
-        };
125
-
126
-      await axios
127
-        .post("/api/mail/0", mailObj)
128
-        .then((response) => {
129
-          //console.log('Response');
130
-          //console.log(response);
131
-            this.boolSent = true;
132
-        })
133
-        .catch((err) => {
134
-              this.boolValidationError = true;
135
-              this.errorOccurred = "ERROR";
136
-              this.errorMessage = "Server Error: CONNECTION_REFUSED";
137
-              if (err) {
138
-                //console.log('Error');
139
-                //console.log(err.response.status);
140
-                if (err.response.status) {
141
-                  this.boolSent = true;
142
-                  this.boolValidationError = false;
143
-                } else {
144
-                  this.boolSent = false;
145
-                }
140
+          message: this.message,
141
+        }
142
+        await axios
143
+          .post('/api/mail/0', mailObj)
144
+          .then((response) => {
145
+            //console.log('Response');
146
+            //console.log(response);
147
+            this.boolSent = true
148
+          })
149
+          .catch((err) => {
150
+            this.boolValidationError = true
151
+            this.errorOccurred = 'ERROR'
152
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
153
+            if (err) {
154
+              //console.log('Error');
155
+              //console.log(err.response.status);
156
+              if (err.response.status) {
157
+                this.boolSent = true
158
+                this.boolValidationError = false
146 159
               } else {
147
-                console.log('no err')
148
-                boolSent = false;
160
+                this.boolSent = false
149 161
               }
150
-        })
162
+            } else {
163
+              console.log('no err')
164
+              boolSent = false
165
+            }
166
+          })
167
+        this.name = ''
168
+        this.contactemail = ''
169
+        this.phone = ''
170
+        this.property = ''
171
+        this.message = ''
172
+        this.nameLoad = false
173
+        this.contactemailLoad = false
174
+        this.messageLoad = false
151 175
       }
152 176
     },
153 177
     countDownChanged(dismissCountDown) {
154
-      this.dismissCountDown = dismissCountDown;
178
+      this.dismissCountDown = dismissCountDown
155 179
     },
156
-    validatePage : function(){
180
+    validatePage: function () {
157 181
       //console.log('validatePage')
158
-      if (this.name && this.email){
159
-        this.errorOccurred = '';
160
-        this.errorMessage = '';
161
-        this.boolValidationError = false;
162
-        return true;
182
+      if (this.name && this.contactemail) {
183
+        this.errorOccurred = ''
184
+        this.errorMessage = ''
185
+        this.boolValidationError = false
186
+        return true
163 187
       } else {
164
-        this.boolValidationError = true;
165
-        this.nameLoad = true;
166
-        this.emailLoad = true;
167
-        this.messageLoad = true;
168
-        this.errorOccurred = "ERROR";
169
-        this.errorMessage = "Please check form and correct all input fields!";
170
-        return false;
188
+        this.boolValidationError = true
189
+        this.nameLoad = true
190
+        this.contactemailLoad = true
191
+        this.messageLoad = true
192
+        this.errorOccurred = 'ERROR'
193
+        this.errorMessage = 'Please check form and correct all input fields!'
194
+        return false
171 195
       }
172 196
     },
173
-    requiredField : function(tfield) {
174
-      if(tfield){
175
-        return true;
197
+    requiredField: function (tfield) {
198
+      if (tfield) {
199
+        return true
176 200
       } else {
177
-        return false;
201
+        return false
178 202
       }
179 203
     },
180
-    validEmail : function(temail) {
181
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
182
-        return re.test(temail.toLowerCase());
183
-    }
184
-  }
185
-};
204
+    validEmail: function (temail) {
205
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
206
+      return re.test(temail.toLowerCase())
207
+    },
208
+  },
209
+}
186 210
 </script>
187 211
 
188
-<style lang="scss" scoped>
189
-.form input{
190
-  text-transform: none;
191
-}
192
-</style>
212
+<style lang="scss" scoped></style>

+ 161
- 118
src/components/timeshare/buy/carouselSection.vue 查看文件

@@ -1,79 +1,89 @@
1 1
 <template>
2 2
   <section id="intro">
3 3
     <div class="container">
4
-      <div class="row">
5
-        <div align="left" class="col-sm-12 col-md-8">
6
-          <div class="intro-content box" style="margin-top:-5px">
7
-            <h2>Find your Timeshare</h2>
8
-            <p>
9
-              Please specify one or more details to view the available weeks and then select the
10
-              weeks that interest you on the resort page.
11
-            </p>
12
-            <div class="row">
13
-              <div class="form-group col-md-6">
14
-                <div class="input-group">
15
-                  <label v-if="!searchParams.region" class="uniSelectLabel" for="region"
16
-                    >REGION</label
17
-                  >
18
-                  <select
19
-                    class="form-control uniSelect"
20
-                    name="region"
21
-                    id="region"
22
-                    v-model="searchParams.region"
23
-                    @change="regionChange"
24
-                  >
25
-                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
26
-                  </select>
4
+      <div class="form">
5
+        <div class="row">
6
+          <div align="left" class="col-sm-12 col-md-8">
7
+            <div class="intro-content box" style="margin-top: -5px;">
8
+              <h2>Find your Timeshare</h2>
9
+              <p>
10
+                Please specify one or more details to view the available weeks
11
+                and then select the weeks that interest you on the resort page.
12
+              </p>
13
+              <div class="row">
14
+                <div class="form-group col-md-6">
15
+                  <div class="input-group">
16
+                    <label
17
+                      v-if="!searchParams.region"
18
+                      class="uniSelectLabel"
19
+                      for="region"
20
+                    >
21
+                      Region
22
+                    </label>
23
+                    <select
24
+                      class="form-control uniSelect"
25
+                      name="region"
26
+                      id="region"
27
+                      v-model="searchParams.region"
28
+                      @change="regionChange"
29
+                    >
30
+                      <option v-for="(region, r) in regions" :key="r">
31
+                        {{ region.regionName }}
32
+                      </option>
33
+                    </select>
34
+                  </div>
35
+                  <br />
36
+                  <label>Date From</label>
37
+                  <input
38
+                    type="date"
39
+                    name="arrival-to"
40
+                    class="form-control my-1 uniSelect"
41
+                    id="arrival-to"
42
+                    placeholder="Date From"
43
+                    v-model="filter.date"
44
+                  />
27 45
                 </div>
28
-                <br />
29
-                <label>DATE FROM</label>
30
-                <input
31
-                  type="date"
32
-                  name="arrival-to"
33
-                  class="form-control my-1 uniSelect"
34
-                  id="arrival-to"
35
-                  placeholder="Date From"
36
-                  v-model="filter.date"
37
-                />
38
-              </div>
39
-              <div class="form-group col-md-6">
40
-                <div class="input-group">
41
-                  <label
42
-                    v-if="!searchParams.resort"
43
-                    class="uniSelectLabel"
44
-                    for="weekInfoResortSelect"
45
-                    >RESORT</label
46
-                  >
47
-                  <select
48
-                    id="weekInfoResortSelect"
49
-                    class="form-control uniSelect"
50
-                    v-model="searchParams.resort"
51
-                  >
52
-                    <option
53
-                      v-for="(resort, r) in filteredResort"
54
-                      :key="r"
55
-                      :value="resort"
56
-                      @change="resortChange"
46
+                <div class="form-group col-md-6">
47
+                  <div class="input-group">
48
+                    <label
49
+                      v-if="!searchParams.resort"
50
+                      class="uniSelectLabel"
51
+                      for="weekInfoResortSelect"
57 52
                     >
58
-                      {{ resort.resortName }}
59
-                    </option>
60
-                  </select>
53
+                      Resort
54
+                    </label>
55
+                    <select
56
+                      id="weekInfoResortSelect"
57
+                      class="form-control uniSelect"
58
+                      v-model="searchParams.resort"
59
+                    >
60
+                      <option
61
+                        v-for="(resort, r) in filteredResort"
62
+                        :key="r"
63
+                        :value="resort"
64
+                        @change="resortChange"
65
+                      >
66
+                        {{ resort.resortName }}
67
+                      </option>
68
+                    </select>
69
+                  </div>
70
+                  <br />
71
+                  <label>Date To</label>
72
+                  <input
73
+                    type="date"
74
+                    name="arrival-to"
75
+                    class="form-control my-1 uniSelect"
76
+                    id="arrival-to"
77
+                    placeholder="Date To"
78
+                    v-model="filter.ddate"
79
+                  />
61 80
                 </div>
62
-                <br />
63
-                <label>DATE TO</label>
64
-                <input
65
-                  type="date"
66
-                  name="arrival-to"
67
-                  class="form-control my-1 uniSelect"
68
-                  id="arrival-to"
69
-                  placeholder="Date To"
70
-                  v-model="filter.ddate"
71
-                />
72 81
               </div>
82
+              <button class="btn-white-border" @click="Search()">
83
+                <i class="fa fa-search"></i>
84
+                Search
85
+              </button>
73 86
             </div>
74
-            <button class="btn-solid-blue" @click="Search()">
75
-              <i class="fa fa-search"></i> SEARCH
76
-            </button>
77 87
           </div>
78 88
         </div>
79 89
       </div>
@@ -86,15 +96,48 @@
86 96
       :autoplay="true"
87 97
       :loop="true"
88 98
       id="intro-carousel"
89
-      style="margin-top:-50px"
90
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
99
+      style="margin-top: -50px;"
100
+      :responsive="{
101
+        0: { items: 1, nav: false },
102
+        600: { items: 1, nav: false },
103
+      }"
91 104
     >
92
-      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" style="object-fit: cover" alt />
93
-      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" style="object-fit: cover" alt />
94
-      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" style="object-fit: cover" alt />
95
-      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" style="object-fit: cover" alt />
96
-      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" style="object-fit: cover" alt />
97
-      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" style="object-fit: cover" alt />
105
+      <img
106
+        class="item"
107
+        src="/img/intro-carousel/timeshare-1.jpg"
108
+        style="object-fit: cover;"
109
+        alt
110
+      />
111
+      <img
112
+        class="item"
113
+        src="/img/intro-carousel/timeshare-2.jpg"
114
+        style="object-fit: cover;"
115
+        alt
116
+      />
117
+      <img
118
+        class="item"
119
+        src="/img/intro-carousel/timeshare-3.jpg"
120
+        style="object-fit: cover;"
121
+        alt
122
+      />
123
+      <img
124
+        class="item"
125
+        src="/img/intro-carousel/timeshare-4.jpg"
126
+        style="object-fit: cover;"
127
+        alt
128
+      />
129
+      <img
130
+        class="item"
131
+        src="/img/intro-carousel/timeshare-5.jpg"
132
+        style="object-fit: cover;"
133
+        alt
134
+      />
135
+      <img
136
+        class="item"
137
+        src="/img/intro-carousel/timeshare-6.jpg"
138
+        style="object-fit: cover;"
139
+        alt
140
+      />
98 141
     </carousel>
99 142
 
100 143
     <div id="intro-carousel" class="owl-carousel"></div>
@@ -104,77 +147,77 @@
104 147
 <script>
105 148
 /* eslint-disable */
106 149
 
107
-import carousel from "vue-owl-carousel";
108
-import { mapState, mapActions, mapGetters } from "vuex";
150
+import carousel from 'vue-owl-carousel'
151
+import { mapState, mapActions, mapGetters } from 'vuex'
109 152
 export default {
110 153
   components: {
111
-    carousel
154
+    carousel,
112 155
   },
113 156
   data() {
114 157
     return {
115 158
       regionObj: {},
116 159
       resortObj: {},
117
-      region: "",
118
-      resort: "",
160
+      region: '',
161
+      resort: '',
119 162
       priceMin: undefined,
120
-      priceMax: undefined
121
-    };
163
+      priceMax: undefined,
164
+    }
122 165
   },
123 166
   methods: {
124
-    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
125
-    ...mapActions("resort", ["getResortWithListings"]),
167
+    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
168
+    ...mapActions('resort', ['getResortWithListings']),
126 169
     regionChange(item) {
127
-      let reg = this.regions.find(r => r.regionName === item.target.value);
128
-      this.regionObj = reg;
170
+      let reg = this.regions.find((r) => r.regionName === item.target.value)
171
+      this.regionObj = reg
129 172
     },
130 173
     resortChange(item) {
131
-      let res = this.resorts.find(r => r.resortName === item.target.value);
132
-      this.resortObj = res;
174
+      let res = this.resorts.find((r) => r.resortName === item.target.value)
175
+      this.resortObj = res
133 176
     },
134 177
     Search() {
135 178
       if (this.searchParams.price) {
136
-        this.filter.minPrice = this.searchParams.price;
179
+        this.filter.minPrice = this.searchParams.price
137 180
       }
138 181
       if (this.searchParams.week) {
139
-        this.filter.keyword = this.week;
182
+        this.filter.keyword = this.week
140 183
       }
141 184
 
142 185
       if (!this.searchParams.resort) {
143
-        this.searchParams.regionObj = this.regionObj;
144
-        this.$router.push("/timeshareToByResults");
186
+        this.searchParams.regionObj = this.regionObj
187
+        this.$router.push('/timeshareToByResults')
145 188
       } else {
146
-        this.$router.push(`/resort/${this.searchParams.resort.resortId}`);
189
+        this.$router.push(`/resort/${this.searchParams.resort.resortId}`)
147 190
       }
148
-    }
191
+    },
149 192
   },
150 193
   computed: {
151
-    ...mapState("timeshare", ["resorts", "regions", "detailedRegion"]),
152
-    ...mapState("weekList", ["searchParams", "filter"]),
153
-    ...mapState("resort", ["resortsWithListings"]),
194
+    ...mapState('timeshare', ['resorts', 'regions', 'detailedRegion']),
195
+    ...mapState('weekList', ['searchParams', 'filter']),
196
+    ...mapState('resort', ['resortsWithListings']),
154 197
     filteredResort() {
155
-      let list = [];
156
-      var itemList = [];
157
-      if (this.searchParams.region && this.searchParams.region !== "") {
158
-        this.resortsWithListings.forEach(resortListing => {
198
+      let list = []
199
+      var itemList = []
200
+      if (this.searchParams.region && this.searchParams.region !== '') {
201
+        this.resortsWithListings.forEach((resortListing) => {
159 202
           if (
160 203
             resortListing.resortRegion[0].code.toUpperCase() ===
161 204
             this.regionObj.regionCode.toUpperCase()
162 205
           ) {
163
-            itemList.push(resortListing);
206
+            itemList.push(resortListing)
164 207
           }
165
-        });
208
+        })
166 209
         if (itemList.length > 0) {
167
-          list = itemList;
210
+          list = itemList
168 211
         } else {
169 212
           list[0] = {
170
-            resortName: " - No Listings - "
171
-          };
213
+            resortName: ' - No Listings - ',
214
+          }
172 215
         }
173 216
       } else {
174
-        list = this.resortsWithListings;
217
+        list = this.resortsWithListings
175 218
       }
176
-      return _.sortBy(list, x => x.resortName);
177
-    }
219
+      return _.sortBy(list, (x) => x.resortName)
220
+    },
178 221
     // filteredResort() {
179 222
     //   let list = [];
180 223
     //   if (this.searchParams.region && this.searchParams.region !== "") {
@@ -191,16 +234,16 @@ export default {
191 234
     // }
192 235
   },
193 236
   created() {
194
-    this.initTimeshare(this.weekId);
195
-    this.getResortWithListings();
237
+    this.initTimeshare(this.weekId)
238
+    this.getResortWithListings()
196 239
   },
197 240
   mounted() {
198
-    this.searchParams.region = null;
199
-    this.searchParams.resort = null;
200
-    this.filter.date = null;
201
-    this.filter.ddate = null;
202
-  }
203
-};
241
+    this.searchParams.region = null
242
+    this.searchParams.resort = null
243
+    this.filter.date = null
244
+    this.filter.ddate = null
245
+  },
246
+}
204 247
 </script>
205 248
 
206 249
 <style lang="scss" scoped></style>

+ 5
- 11
src/components/timeshare/searchTimeshare.vue 查看文件

@@ -5,11 +5,13 @@
5 5
     <div class="input-group mt-2">
6 6
       <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
7 7
       <select class="form-control" name="season" id="season" v-model="filter.season">
8
-        <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
8
+        <option v-for="season in seasons" :key="season.id"
9
+         :value="season">{{ season.name }}</option>
9 10
       </select>
10 11
     </div>
11 12
     <div class="input-group mt-2">
12
-      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect">Bedrooms</label>
13
+      <label v-if="!filter.bedrooms" class="uniSelectLabel"
14
+       for="weekInfoRegionSelect">Bedrooms</label>
13 15
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
14 16
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
15 17
       </select>
@@ -108,13 +110,5 @@ export default {
108 110
 </script>
109 111
 
110 112
 <style lang="scss" scoped>
111
-.uniSelectLabel {
112
-  position: absolute;
113
-  z-index: 2;
114
-  margin-left: 15px;
115
-  margin-top: 7px;
116
-  font-family: "muli";
117
-  font-size: 15px;
118
-  color: rgb(118, 118, 118);
119
-}
113
+
120 114
 </style>

+ 43
- 11
src/components/timeshare/sell/carouselSection.vue 查看文件

@@ -6,10 +6,24 @@
6 6
           <div class="intro-content box">
7 7
             <h2>Sell your Timeshare</h2>
8 8
             <p>
9
-              A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
10
-              timeshare week/module on the Uni-Vate website.
9
+              A listing fee of R{{ getListingFee.amount }} including VAT is
10
+              payable to list your timeshare week/module on the Uni-Vate
11
+              website.
11 12
             </p>
12
-            <div></div>
13
+
14
+            <div v-if="!userLoggedIn">
15
+              <p>
16
+                You must be registered as a user in order to load your weeks for
17
+                sale. Please login and or register to complete.
18
+              </p>
19
+
20
+              <router-link class="btn-white-border" to="/user/register">
21
+                Register
22
+              </router-link>
23
+              <router-link class="btn-white-border" to="/user/login">
24
+                Login
25
+              </router-link>
26
+            </div>
13 27
           </div>
14 28
         </div>
15 29
       </div>
@@ -22,8 +36,11 @@
22 36
       :autoplay="true"
23 37
       :loop="true"
24 38
       id="intro-carousel"
25
-      style="margin-top:-50px"
26
-      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
39
+      style="margin-top: -50px;"
40
+      :responsive="{
41
+        0: { items: 1, nav: false },
42
+        600: { items: 1, nav: false },
43
+      }"
27 44
     >
28 45
       <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
29 46
       <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
@@ -40,16 +57,31 @@
40 57
 <script>
41 58
 /* eslint-disable */
42 59
 
43
-import carousel from "vue-owl-carousel";
44
-import { mapGetters } from "vuex";
60
+import carousel from 'vue-owl-carousel'
61
+import { mapState, mapActions, mapGetters } from 'vuex'
62
+import Log from '../../../assets/Log'
63
+
45 64
 export default {
46 65
   components: {
47
-    carousel
66
+    carousel,
67
+  },
68
+  data() {
69
+    return {
70
+      userLoggedIn: Log.isLoggedIn(),
71
+    }
48 72
   },
49 73
   computed: {
50
-    ...mapGetters("fees", ["getListingFee"])
51
-  }
52
-};
74
+    ...mapGetters('fees', ['getListingFee']),
75
+    ...mapState('authentication', ['isLoggedIn']),
76
+    ...mapGetters({
77
+      user: 'authentication/getUser',
78
+      person: 'authentication/getPerson',
79
+    }),
80
+    isLoggedIn() {
81
+      return this.user && this.person
82
+    },
83
+  },
84
+}
53 85
 </script>
54 86
 
55 87
 <style lang="scss" scoped></style>

+ 1607
- 1060
src/components/timeshare/sell/contentSectionNew.vue
文件差異過大導致無法顯示
查看文件


+ 55
- 50
src/components/user/forgotPassword.vue 查看文件

@@ -1,6 +1,6 @@
1 1
 <template>
2
-  <main id="main" style="padding-top:10px; padding-bottom:50px">
3
-    <div class="container">
2
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
3
+    <div class="form">
4 4
       <div class="row">
5 5
         <div class="col">
6 6
           <div class="section-header">
@@ -15,20 +15,22 @@
15 15
       </div>
16 16
       <div class="row">
17 17
         <div class="col-md-6">
18
-          <float-label>
18
+          <float-label label="Email" style="width: 100%;">
19 19
             <input
20
-            type="email"
21
-            id="email"
22
-            name="email"
23
-            placeholder="EMAIL"
24
-            class="form-control uniInput"
25
-            v-model="email"
26
-            v-bind:class="{'is-valid': email,
27
-             'is-invalid': !validEmail(email) && emailLoad}"
28
-            v-on:keyup="emailLoad = true"
29
-            v-on:blur="emailLoad = true"
30
-            required
31
-            icon
20
+              type="email"
21
+              id="email"
22
+              name="email"
23
+              placeholder="Email"
24
+              class="form-control uniInput"
25
+              v-model="email"
26
+              v-bind:class="{
27
+                'is-valid': email,
28
+                'is-invalid': !validEmail(email) && emailLoad,
29
+              }"
30
+              v-on:keyup="emailLoad = true"
31
+              v-on:blur="emailLoad = true"
32
+              required
33
+              icon
32 34
             />
33 35
             <div class="invalid-feedback">Valid Email is required!</div>
34 36
           </float-label>
@@ -44,57 +46,60 @@
44 46
 </template>
45 47
 
46 48
 <script>
47
-import { mapActions } from 'vuex';
48 49
 /* eslint-disable */
49
-
50
-import alert from "../shared/alert";
50
+import { mapActions } from 'vuex'
51
+import alert from '../shared/alert'
51 52
 
52 53
 export default {
53 54
   components: {
54
-    alert
55
+    alert,
55 56
   },
56 57
   data() {
57 58
     return {
58
-      email: "",
59
+      email: '',
59 60
       emailLoad: false,
60
-      errorOccurred: "",
61
-      errorMessage: ""
62
-    };
61
+      errorOccurred: '',
62
+      errorMessage: '',
63
+    }
63 64
   },
64 65
   methods: {
65
-    ...mapActions("register", ["forgotPasswordCheck"]),
66
+    ...mapActions('register', ['forgotPasswordCheck']),
66 67
     checkMail() {
67
-      if (this.email){
68
-        console.log(this.email);
68
+      if (this.email) {
69
+        console.log(this.email)
69 70
         this.forgotPasswordCheck(this.email)
70
-        .then(() => {
71
-          this.errorMessage = "An email has been sent with instructions to reset your password.";
72
-          this.errorOccurred = "SUCCESS";
73
-        })
74
-        .catch(err => {
75
-          //console.log(err);
76
-          this.errorOccurred = "ERROR";
77
-          this.errorMessage = "Server Error: CONNECTION_REFUSED";
78
-          if (err.status) {
79
-            if (err.data.message) {
80
-              this.errorMessage = err.data.message;
81
-            } else {
82
-              this.errorMessage = "Email address not found!"
71
+          .then(() => {
72
+            this.errorMessage =
73
+              'An email has been sent with instructions to reset your password.'
74
+            this.errorOccurred = 'SUCCESS'
75
+          })
76
+          .catch((err) => {
77
+            //console.log(err);
78
+            this.errorOccurred = 'ERROR'
79
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
80
+            if (err.status) {
81
+              if (err.data.message) {
82
+                this.errorMessage = err.data.message
83
+              } else {
84
+                this.errorMessage = 'Email address not found!'
85
+              }
83 86
             }
84
-          }
85
-        });
87
+          })
86 88
       } else {
87
-          this.errorMessage = "A valid email is required.";
88
-          this.errorOccurred = "ERROR";
89
+        this.errorMessage = 'A valid email is required.'
90
+        this.errorOccurred = 'ERROR'
89 91
       }
90 92
     },
91
-    validEmail : function(email) {
92
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
93
-        return re.test(email.toLowerCase());
94
-    }
95
-  }
96
-};
93
+    validEmail: function (email) {
94
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
95
+      if (email) {
96
+        return re.test(email.toLowerCase())
97
+      } else {
98
+        return re.test(email)
99
+      }
100
+    },
101
+  },
102
+}
97 103
 </script>
98 104
 
99 105
 <style lang="scss" scoped></style>
100
-

+ 7
- 3
src/components/user/loginPage.vue 查看文件

@@ -1,7 +1,7 @@
1 1
 <template>
2 2
   <main id="main">
3 3
     <section id="intro">
4
-      <div class="container">
4
+      <div class="form">
5 5
         <div class="row justify-content-center">
6 6
           <div class="col-md-8">
7 7
             <div class="intro-content">
@@ -16,6 +16,7 @@
16 16
                       <alert :text="page.text" :type="'INFO'" />
17 17
                     </div>
18 18
                       <div class="form-label-group">
19
+                        <float-label label="Username" style="width: 100%">
19 20
                         <input
20 21
                         type="text"
21 22
                         id="inputUsername"
@@ -32,9 +33,11 @@
32 33
                         autofocus
33 34
                         />
34 35
                       <div class="invalid-feedback">Name is required!</div>
36
+                      </float-label>
35 37
                       </div>
36 38
 
37 39
                     <div class="form-label-group">
40
+                      <float-label label="Password" style="width: 100%">
38 41
                       <input
39 42
                         type="password"
40 43
                         id="inputPassword"
@@ -51,6 +54,7 @@
51 54
                         icon
52 55
                       />
53 56
                       <div class="invalid-feedback">Password is required!</div>
57
+                      </float-label>
54 58
                     </div>
55 59
 
56 60
                     <div class="custom-control custom-checkbox mb-3">
@@ -145,11 +149,11 @@ export default {
145 149
       } else this.troubleToggle = true;
146 150
     },
147 151
     Login() {
148
-      console.log(this.username + " " + this.password);
152
+      //console.log(this.username + " " + this.password);
149 153
       if (this.validate()){
150 154
       this.login({ username: this.username, password: this.password })
151 155
         .then(() => {
152
-          console.log(Log.getUser());
156
+          //console.log(Log.getUser());
153 157
           if (!this.page) {
154 158
             if (!Log.getUser().loginPasswordChange) {
155 159
               this.$router.push("/");

+ 336
- 240
src/components/user/registerAgencySection.vue 查看文件

@@ -1,6 +1,6 @@
1 1
 <template>
2
-  <main id="main" style="padding-top:10px; padding-bottom:50px">
3
-    <div class="container">
2
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
3
+    <div class="form">
4 4
       <div v-if="boolMessage" class="row">
5 5
         <div class="col">
6 6
           <alert :text="'Register Success!'" :type="'SUCCESS'" />
@@ -15,127 +15,177 @@
15 15
       <div class="row my-3">
16 16
         <div class="col-sm-12 col-md-6">
17 17
           <div class="form-group">
18
-            <input
19
-              type="text"
20
-              id="inputAgencyName"
21
-              v-model="registerAgency.name"
22
-              class="form-control uniInput"
23
-              v-bind:class="{'is-valid': registerAgency.name,
24
-                'is-invalid': !requiredField(registerAgency.name) && agencyNameLoad}"
25
-              v-on:keyup="agencyNameLoad = true"
26
-              v-on:blur="agencyNameLoad = true"
27
-              placeholder="Agency Name"
28
-            />
29
-            <div class="invalid-feedback">Agency Name is required!</div>
18
+            <float-label label="Agency Name" style="width: 100%;">
19
+              <input
20
+                type="text"
21
+                id="inputAgencyName"
22
+                v-model="registerAgency.name"
23
+                class="form-control uniInput"
24
+                v-bind:class="{
25
+                  'is-valid': registerAgency.name,
26
+                  'is-invalid':
27
+                    !requiredField(registerAgency.name) && agencyNameLoad,
28
+                }"
29
+                v-on:keyup="agencyNameLoad = true"
30
+                v-on:blur="agencyNameLoad = true"
31
+                placeholder="Agency Name"
32
+              />
33
+              <div class="invalid-feedback">Agency Name is required!</div>
34
+            </float-label>
30 35
           </div>
31 36
         </div>
32 37
         <div class="col-sm-12 col-md-6">
33 38
           <div class="form-group">
34
-            <input
35
-              type="text"
36
-              id="inputAgencyNumber"
37
-              v-model="registerAgency.eaabeffcNumber"
38
-              class="form-control uniInput"
39
-              v-bind:class="{'is-valid': registerAgency.eaabeffcNumber,
40
-                'is-invalid': !requiredField(registerAgency.eaabeffcNumber) && agencyNumberLoad}"
41
-              v-on:keyup="agencyNumberLoad = true"
42
-              v-on:blur="agencyNumberLoad = true"
43
-              placeholder="EAAB FFC Number"
44
-            />
45
-            <div class="invalid-feedback">Agency Number is required!</div>
39
+            <float-label label="EAAB FFC Number" style="width: 100%;">
40
+              <input
41
+                type="text"
42
+                id="inputAgencyNumber"
43
+                v-model="registerAgency.eaabeffcNumber"
44
+                class="form-control uniInput"
45
+                v-bind:class="{
46
+                  'is-valid': registerAgency.eaabeffcNumber,
47
+                  'is-invalid':
48
+                    !requiredField(registerAgency.eaabeffcNumber) &&
49
+                    agencyNumberLoad,
50
+                }"
51
+                v-on:keyup="agencyNumberLoad = true"
52
+                v-on:blur="agencyNumberLoad = true"
53
+                placeholder="EAAB FFC Number"
54
+              />
55
+              <div class="invalid-feedback">Agency Number is required!</div>
56
+            </float-label>
46 57
           </div>
47 58
         </div>
48 59
       </div>
49 60
       <div class="row my-3">
50
-       <div class="col-sm-12">
51
-         <div class="form-group">
52
-          <input
53
-            type="text"
54
-            id="inputAgencyCompanyRegistration"
55
-            v-model="registerAgency.companyRegNumber"
56
-            class="form-control uniInput"
57
-            v-bind:class="{'is-valid': registerAgency.companyRegNumber,
58
-             'is-invalid': !requiredField(registerAgency.companyRegNumber) && companyRegNumberLoad}"
59
-            v-on:keyup="companyRegNumberLoad = true"
60
-            v-on:blur="companyRegNumberLoad = true"
61
-            placeholder="Company Registration Number"
62
-          />
63
-         <div class="invalid-feedback">Company Registration Number is required!</div>
61
+        <div class="col-sm-12">
62
+          <div class="form-group">
63
+            <float-label
64
+              label="Company Registration Number"
65
+              style="width: 100%;"
66
+            >
67
+              <input
68
+                type="text"
69
+                id="inputAgencyCompanyRegistration"
70
+                v-model="registerAgency.companyRegNumber"
71
+                class="form-control uniInput"
72
+                v-bind:class="{
73
+                  'is-valid': registerAgency.companyRegNumber,
74
+                  'is-invalid':
75
+                    !requiredField(registerAgency.companyRegNumber) &&
76
+                    companyRegNumberLoad,
77
+                }"
78
+                v-on:keyup="companyRegNumberLoad = true"
79
+                v-on:blur="companyRegNumberLoad = true"
80
+                placeholder="Company Registration Number"
81
+              />
82
+              <div class="invalid-feedback">
83
+                Company Registration Number is required!
84
+              </div>
85
+            </float-label>
86
+          </div>
64 87
         </div>
65
-       </div>
66 88
       </div>
67 89
       <h3 class="card-title text-center">Agency Administrator</h3>
68 90
       <hr />
69 91
       <div class="row my-3">
70 92
         <div class="col-sm-12 col-md-6">
71 93
           <div class="form-group">
72
-            <input
73
-              type="text"
74
-              id="inputAgencyAdmin"
75
-              v-model="registerAgency.user.name"
76
-              class="form-control uniInput my-3"
77
-              v-bind:class="{'is-valid': registerAgency.user.name,
78
-                'is-invalid': !requiredField(registerAgency.user.name) && agencyAdminNameLoad}"
79
-              v-on:keyup="agencyAdminNameLoad = true"
80
-              v-on:blur="agencyAdminNameLoad = true"
81
-              placeholder="Name"
82
-            />
83
-            <div class="invalid-feedback">Administrator Name is required!</div>
94
+            <float-label label="Name" style="width: 100%;">
95
+              <input
96
+                type="text"
97
+                id="inputAgencyAdmin"
98
+                v-model="registerAgency.user.name"
99
+                class="form-control uniInput my-3"
100
+                v-bind:class="{
101
+                  'is-valid': registerAgency.user.name,
102
+                  'is-invalid':
103
+                    !requiredField(registerAgency.user.name) &&
104
+                    agencyAdminNameLoad,
105
+                }"
106
+                v-on:keyup="agencyAdminNameLoad = true"
107
+                v-on:blur="agencyAdminNameLoad = true"
108
+                placeholder="Name"
109
+              />
110
+              <div class="invalid-feedback">
111
+                Administrator Name is required!
112
+              </div>
113
+            </float-label>
84 114
           </div>
85 115
           <div class="form-group">
86
-            <input
87
-              type="text"
88
-              id="inputAgencySurname"
89
-              v-model="registerAgency.user.surname"
90
-              class="form-control uniInput my-3"
91
-              v-bind:class="{'is-valid': registerAgency.user.surname,
92
-                'is-invalid': !requiredField(registerAgency.user.surname) && agencySurnameLoad}"
93
-              v-on:keyup="agencySurnameLoad = true"
94
-              v-on:blur="agencySurnameLoad = true"
95
-              placeholder="Surname"
96
-            />
97
-            <div class="invalid-feedback">Administrator Surname is required!</div>
116
+            <float-label label="Surname" style="width: 100%;">
117
+              <input
118
+                type="text"
119
+                id="inputAgencySurname"
120
+                v-model="registerAgency.user.surname"
121
+                class="form-control uniInput my-3"
122
+                v-bind:class="{
123
+                  'is-valid': registerAgency.user.surname,
124
+                  'is-invalid':
125
+                    !requiredField(registerAgency.user.surname) &&
126
+                    agencySurnameLoad,
127
+                }"
128
+                v-on:keyup="agencySurnameLoad = true"
129
+                v-on:blur="agencySurnameLoad = true"
130
+                placeholder="Surname"
131
+              />
132
+              <div class="invalid-feedback">
133
+                Administrator Surname is required!
134
+              </div>
135
+            </float-label>
98 136
           </div>
99 137
           <div class="form-group">
100
-            <input
101
-              type="email"
102
-              id="inputAgencyEmail"
103
-              v-model="registerAgency.user.email"
104
-              v-bind:class="{'is-valid': registerAgency.user.email,
105
-                'is-invalid': !validEmail(registerAgency.user.email) && agencyEmailLoad}"
106
-              v-on:keyup="agencyEmailLoad = true"
107
-              v-on:blur="agencyEmailLoad = true"
108
-              class="form-control uniInput my-3"
109
-              placeholder="Email"
110
-            />
111
-            <div class="invalid-feedback">Valid email is required!</div>
138
+            <float-label label="Email" style="width: 100%;">
139
+              <input
140
+                type="email"
141
+                id="inputAgencyEmail"
142
+                v-model="registerAgency.user.email"
143
+                v-bind:class="{
144
+                  'is-valid': registerAgency.user.email,
145
+                  'is-invalid':
146
+                    !validEmail(registerAgency.user.email) && agencyEmailLoad,
147
+                }"
148
+                v-on:keyup="agencyEmailLoad = true"
149
+                v-on:blur="agencyEmailLoad = true"
150
+                class="form-control uniInput my-3"
151
+                placeholder="Email"
152
+              />
153
+              <div class="invalid-feedback">Valid email is required!</div>
154
+            </float-label>
112 155
           </div>
113 156
         </div>
114 157
         <div class="col-sm-12 col-md-6">
115 158
           <div class="form-group">
116
-            <input
117
-              type="text"
118
-              id="inputAgencyCellphone"
119
-              v-model="registerAgency.user.cellNumber"
120
-              class="form-control uniInput my-3"
121
-              v-bind:class="{'is-valid': registerAgency.user.cellNumber,
122
-                'is-invalid': !requiredField(registerAgency.user.cellNumber)
123
-                 && agencyCellNumberLoad}"
124
-              v-on:keyup="agencyCellNumberLoad = true"
125
-              v-on:blur="agencyCellNumberLoad = true"
126
-              placeholder="Cellphone Number"
127
-            />
128
-            <div class="invalid-feedback">Cell number is required!</div>
159
+            <float-label label="Cellphone Number" style="width: 100%;">
160
+              <input
161
+                type="text"
162
+                id="inputAgencyCellphone"
163
+                v-model="registerAgency.user.cellNumber"
164
+                class="form-control uniInput my-3"
165
+                v-bind:class="{
166
+                  'is-valid': registerAgency.user.cellNumber,
167
+                  'is-invalid':
168
+                    !requiredField(registerAgency.user.cellNumber) &&
169
+                    agencyCellNumberLoad,
170
+                }"
171
+                v-on:keyup="agencyCellNumberLoad = true"
172
+                v-on:blur="agencyCellNumberLoad = true"
173
+                placeholder="Cellphone Number"
174
+              />
175
+              <div class="invalid-feedback">Cell number is required!</div>
176
+            </float-label>
129 177
           </div>
130 178
           <div class="form-group">
131
-            <input
132
-              type="text"
133
-              id="inputAgencyLandLine"
134
-              v-model="registerAgency.user.telephone"
135
-              class="form-control uniInput"
136
-              v-bind:class="{'is-valid': registerAgency.user.telephone}"
137
-              placeholder="Landline Number"
138
-            />
179
+            <float-label label="Landline Number" style="width: 100%;">
180
+              <input
181
+                type="text"
182
+                id="inputAgencyLandLine"
183
+                v-model="registerAgency.user.telephone"
184
+                class="form-control uniInput"
185
+                v-bind:class="{ 'is-valid': registerAgency.user.telephone }"
186
+                placeholder="Landline Number"
187
+              />
188
+            </float-label>
139 189
           </div>
140 190
         </div>
141 191
       </div>
@@ -143,60 +193,82 @@
143 193
       <div class="row my-3">
144 194
         <div class="col-sm-12">
145 195
           <div class="form-group">
146
-            <input
147
-              type="text"
148
-              id="inputAgencyUsername"
149
-              v-model="registerAgency.user.username"
150
-              class="form-control uniInput"
151
-              v-bind:class="{'is-valid': registerAgency.user.username,
152
-                'is-invalid': !requiredField(registerAgency.user.username) && agencyusernameLoad}"
153
-              v-on:keyup="agencyusernameLoad = true"
154
-              v-on:blur="agencyusernameLoad = true"
155
-              placeholder="Username"
156
-            />
157
-            <div class="invalid-feedback">Username is required!</div>
196
+            <float-label label="Username" style="width: 100%;">
197
+              <input
198
+                type="text"
199
+                id="inputAgencyUsername"
200
+                v-model="registerAgency.user.username"
201
+                class="form-control uniInput"
202
+                v-bind:class="{
203
+                  'is-valid': registerAgency.user.username,
204
+                  'is-invalid':
205
+                    !requiredField(registerAgency.user.username) &&
206
+                    agencyusernameLoad,
207
+                }"
208
+                v-on:keyup="agencyusernameLoad = true"
209
+                v-on:blur="agencyusernameLoad = true"
210
+                placeholder="Username"
211
+              />
212
+              <div class="invalid-feedback">Username is required!</div>
213
+            </float-label>
158 214
           </div>
159 215
         </div>
160 216
       </div>
161 217
       <div class="row my-3">
162 218
         <div class="col-sm-12 col-md-6">
163 219
           <div class="form-group">
164
-            <input
165
-              type="password"
166
-              placeholder="Password"
167
-              v-model="registerAgency.user.password"
168
-              id="inputAgencyPassword uniInput"
169
-              class="form-control uniInput"
170
-              v-bind:class="{'is-valid': registerAgency.user.password,
171
-                'is-invalid': !requiredField(registerAgency.user.password) && agencypasswordLoad}"
172
-              v-on:keyup="agencypasswordLoad = true"
173
-              v-on:blur="agencypasswordLoad = true"
174
-            />
175
-            <div class="invalid-feedback">Password is required!</div>
220
+            <float-label label="Password" style="width: 100%;">
221
+              <input
222
+                type="password"
223
+                placeholder="Password"
224
+                v-model="registerAgency.user.password"
225
+                id="inputAgencyPassword uniInput"
226
+                class="form-control uniInput"
227
+                v-bind:class="{
228
+                  'is-valid': registerAgency.user.password,
229
+                  'is-invalid':
230
+                    !requiredField(registerAgency.user.password) &&
231
+                    agencypasswordLoad,
232
+                }"
233
+                v-on:keyup="agencypasswordLoad = true"
234
+                v-on:blur="agencypasswordLoad = true"
235
+              />
236
+              <div class="invalid-feedback">Password is required!</div>
237
+            </float-label>
176 238
           </div>
177 239
         </div>
178 240
         <div class="col">
179 241
           <div class="form-group">
180
-            <input
181
-              type="password"
182
-              placeholder="Confirm Password"
183
-              v-model="registerAgency.user.confirm"
184
-              id="inputAgencyPasswordConfirm"
185
-              class="form-control uniInput"
186
-              v-bind:class="{'is-valid': registerAgency.user.confirm,
187
-                'is-invalid': !validConfirm(registerAgency.user.confirm) && agencyconfirmLoad}"
188
-              v-on:keyup="agencyconfirmLoad = true"
189
-              v-on:blur="agencyconfirmLoad = true"
190
-            />
191
-            <div class="invalid-feedback">Password and Confirm password must be the same!</div>
242
+            <float-label label="Confirm Password" style="width: 100%;">
243
+              <input
244
+                type="password"
245
+                placeholder="Confirm Password"
246
+                v-model="registerAgency.user.confirm"
247
+                id="inputAgencyPasswordConfirm"
248
+                class="form-control uniInput"
249
+                v-bind:class="{
250
+                  'is-valid': registerAgency.user.confirm,
251
+                  'is-invalid':
252
+                    !validConfirm(registerAgency.user.confirm) &&
253
+                    agencyconfirmLoad,
254
+                }"
255
+                v-on:keyup="agencyconfirmLoad = true"
256
+                v-on:blur="agencyconfirmLoad = true"
257
+              />
258
+              <div class="invalid-feedback">
259
+                Password and Confirm password must be the same!
260
+              </div>
261
+            </float-label>
192 262
           </div>
193 263
         </div>
194 264
       </div>
195 265
       <div class="row">
196 266
         <div class="col">
197
-          <label for="agencytc"
198
-            ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
199
-          >
267
+          <label for="agencytc">
268
+            <router-link to="/termsConditionsView">
269
+              Terms & Conditions
270
+            </router-link>
271
+          </label>
200 272
           <input
201 273
             name="agencytc"
202 274
             type="checkbox"
@@ -211,42 +283,47 @@
211 283
         v-on:click="SubmitData()"
212 284
         type="submit"
213 285
       >
214
-      SUBMIT
286
+        SUBMIT
215 287
       </button>
216 288
       <button
217
-      :data-target="'#myModalAgency'"
218
-      data-toggle="modal"
219
-      @click="navigate()"
220
-      class="btn-white-border mb-5"
221
-      style="float:right"
222
-      type="submit"
289
+        :data-target="'#myModalAgency'"
290
+        data-toggle="modal"
291
+        @click="navigate()"
292
+        class="btn-white-border mb-5"
293
+        style="float: right;"
294
+        type="submit"
223 295
       >
224
-      Cancel
296
+        Cancel
225 297
       </button>
226
-      <button hidden :data-target="'#myModalAgency'" data-toggle="modal" ref="dataToggle"></button>
298
+      <button
299
+        hidden
300
+        :data-target="'#myModalAgency'"
301
+        data-toggle="modal"
302
+        ref="dataToggle"
303
+      ></button>
227 304
     </div>
228 305
   </main>
229 306
 </template>
230 307
 
231 308
 <script>
232 309
 /* eslint-disable */
233
-import { mapState, mapActions } from "vuex";
234
-import carousel from "vue-owl-carousel";
235
-import alert from "../shared/alert";
236
-import Log from "../../assets/Log";
310
+import { mapState, mapActions } from 'vuex'
311
+import carousel from 'vue-owl-carousel'
312
+import alert from '../shared/alert'
313
+import Log from '../../assets/Log'
237 314
 export default {
238 315
   components: {
239 316
     carousel,
240
-    alert
317
+    alert,
241 318
   },
242 319
   props: {
243
-    RegisterHeader: { type: String, default: undefined }
320
+    RegisterHeader: { type: String, default: undefined },
244 321
   },
245
-  name: "Agency",
322
+  name: 'Agency',
246 323
   data() {
247 324
     return {
248
-      isPasswordShown: "password",
249
-      selectItems: [{ text: "password", value: 0 }],
325
+      isPasswordShown: 'password',
326
+      selectItems: [{ text: 'password', value: 0 }],
250 327
       boolMessage: false,
251 328
       boolValidationError: false,
252 329
       showPassword: false,
@@ -260,126 +337,145 @@ export default {
260 337
       agencyusernameLoad: false,
261 338
       agencypasswordLoad: false,
262 339
       agencyconfirmLoad: false,
263
-      errorOccurred: "",
264
-      errorMessage: ""
265
-    };
340
+      errorOccurred: '',
341
+      errorMessage: '',
342
+    }
266 343
   },
267 344
   computed: {
268
-    ...mapState("register", ["registerAgency"]),
345
+    ...mapState('register', ['registerAgency']),
269 346
     Header() {
270
-      return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
271
-    }
347
+      return this.RegisterHeader
348
+        ? 'Agency Administrator Details'
349
+        : 'Private Individual'
350
+    },
272 351
   },
273 352
   methods: {
274
-    ...mapActions("register", ["getAgency", "saveAgency", "updateAgency", "clearAgency"]),
353
+    ...mapActions('register', [
354
+      'getAgency',
355
+      'saveAgency',
356
+      'updateAgency',
357
+      'clearAgency',
358
+    ]),
275 359
     navigate() {
276
-      if (Log.getUser().role !== "Super Admin") {
277
-        this.$router.push("/user/login");
360
+      if (Log.getUser().role !== 'Super Admin') {
361
+        this.$router.push('/user/login')
278 362
       }
279 363
     },
280 364
     togglePassword() {
281
-      this.showPassword = true;
282
-      this.isPasswordShown = "text";
365
+      this.showPassword = true
366
+      this.isPasswordShown = 'text'
283 367
     },
284 368
     passwordToggled() {
285
-      this.showPassword = false;
286
-      this.isPasswordShown = "password";
369
+      this.showPassword = false
370
+      this.isPasswordShown = 'password'
287 371
     },
288 372
     SubmitData() {
289
-      this.boolValidationError = false;
290
-      this.boolMessage = false;
291
-      if(this.validatePage()){
373
+      this.boolValidationError = false
374
+      this.boolMessage = false
375
+      if (this.validatePage()) {
292 376
         this.saveAgency(this.registerAgency)
293
-        .then(() => {
294
-          this.boolMessage = true;
295
-          console.log('registerAgency true');
296
-          console.log(Log.getUser().role);
297
-          setTimeout(() => {
298
-            if (Log.getUser().role !== "Super Admin") {
299
-              this.$router.push("/user/login");
300
-            } else {
301
-              this.$refs.dataToggle.click();
302
-              this.$router.go();
303
-            }
304
-          }, 500);
305
-        })
306
-        .catch(err => {
307
-          this.boolValidationError = true;
308
-          this.errorOccurred = "ERROR";
309
-          this.errorMessage = "Server Error: CONNECTION_REFUSED"; 
377
+          .then(() => {
378
+            this.boolMessage = true
379
+            console.log('registerAgency true')
380
+            console.log(Log.getUser().role)
381
+            setTimeout(() => {
382
+              if (Log.getUser().role !== 'Super Admin') {
383
+                this.$router.push('/user/login')
384
+              } else {
385
+                this.$refs.dataToggle.click()
386
+                this.$router.go()
387
+              }
388
+            }, 500)
389
+          })
390
+          .catch((err) => {
391
+            this.boolValidationError = true
392
+            this.errorOccurred = 'ERROR'
393
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
310 394
 
311
-          if (err) {
312
-            if (err.data.message) {
313
-              this.errorMessage = err.data.message;
314
-            } else {
315
-              this.errorMessage = "Error."
395
+            if (err) {
396
+              if (err.data.message) {
397
+                this.errorMessage = err.data.message
398
+              } else {
399
+                this.errorMessage = 'Error.'
400
+              }
316 401
             }
317
-          }
318
-        });
402
+          })
319 403
       }
320 404
     },
321 405
     Close() {
322
-      this.$router.push("/user/login");
406
+      this.$router.push('/user/login')
323 407
     },
324
-    validatePage : function(){
325
-      console.log('validatePage');
326
-      if (this.registerAgency.name && this.registerAgency.eaabeffcNumber &&  this.registerAgency.companyRegNumber 
327
-         && this.registerAgency.user.name && this.registerAgency.user.surname && this.registerAgency.user.email 
328
-         && this.registerAgency.user.cellNumber && this.registerAgency.user.username && this.registerAgency.user.password
329
-         && this.registerAgency.user.password === this.registerAgency.user.confirm){
330
-        console.log('passed');
331
-        this.errorOccurred = '';
332
-        this.errorMessage = '';
333
-        this.boolValidationError = true;
334
-        return true;
408
+    validatePage: function () {
409
+      console.log('validatePage')
410
+      if (
411
+        this.registerAgency.name &&
412
+        this.registerAgency.eaabeffcNumber &&
413
+        this.registerAgency.companyRegNumber &&
414
+        this.registerAgency.user.name &&
415
+        this.registerAgency.user.surname &&
416
+        this.registerAgency.user.email &&
417
+        this.registerAgency.user.cellNumber &&
418
+        this.registerAgency.user.username &&
419
+        this.registerAgency.user.password &&
420
+        this.registerAgency.user.password === this.registerAgency.user.confirm
421
+      ) {
422
+        console.log('passed')
423
+        this.errorOccurred = ''
424
+        this.errorMessage = ''
425
+        this.boolValidationError = true
426
+        return true
335 427
       } else {
336
-        console.log('failed');
337
-        this.boolValidationError = true;
338
-        this.agencyNameLoad = true,
339
-        this.agencyNumberLoad = true,
340
-        this.companyRegNumberLoad = true,
341
-        this.agencyAdminNameLoad = true,
342
-        this.agencySurnameLoad = true,
343
-        this.agencyEmailLoad = true,
344
-        this.agencyCellNumberLoad= true,
345
-        this.agencyusernameLoad = true,
346
-        this.agencypasswordLoad = true,
347
-        this.agencyconfirmLoad = true,
348
-        this.errorOccurred = "ERROR";
349
-        this.errorMessage = "Please check form and correct all input fields!";
350
-        return false;
428
+        console.log('failed')
429
+        this.boolValidationError = true
430
+        ;(this.agencyNameLoad = true),
431
+          (this.agencyNumberLoad = true),
432
+          (this.companyRegNumberLoad = true),
433
+          (this.agencyAdminNameLoad = true),
434
+          (this.agencySurnameLoad = true),
435
+          (this.agencyEmailLoad = true),
436
+          (this.agencyCellNumberLoad = true),
437
+          (this.agencyusernameLoad = true),
438
+          (this.agencypasswordLoad = true),
439
+          (this.agencyconfirmLoad = true),
440
+          (this.errorOccurred = 'ERROR')
441
+        this.errorMessage = 'Please check form and correct all input fields!'
442
+        return false
351 443
       }
352 444
     },
353
-    requiredField : function(tfield) {
354
-      if(tfield){
355
-        return true;
445
+    requiredField: function (tfield) {
446
+      if (tfield) {
447
+        return true
356 448
       } else {
357
-        return false;
449
+        return false
358 450
       }
359 451
     },
360
-    validEmail : function(email) {
361
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
362
-        return re.test(email.toLowerCase());
452
+    validEmail: function (email) {
453
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
454
+      if (email) {
455
+        return re.test(email.toLowerCase())
456
+      } else {
457
+        return re.test(email)
458
+      }
363 459
     },
364
-    validConfirm : function(tfield) {
460
+    validConfirm: function (tfield) {
365 461
       //console.log(tfield);
366
-      if (this.requiredField(tfield)){
367
-        if(tfield === this.registerAgency.user.password){
368
-          return true;
462
+      if (this.requiredField(tfield)) {
463
+        if (tfield === this.registerAgency.user.password) {
464
+          return true
369 465
         } else {
370
-          return false;
371
-        } 
466
+          return false
467
+        }
372 468
       } else {
373
-        return false;
469
+        return false
374 470
       }
375
-    }
376
-  }
377
-};
471
+    },
472
+  },
473
+}
378 474
 </script>
379 475
 
380 476
 <style lang="scss" scoped>
381 477
 .btn-disabled {
382
-  font-family: "Muli";
478
+  font-family: 'Muli';
383 479
   font-size: 15px;
384 480
   letter-spacing: 1px;
385 481
   display: inline-block;

+ 458
- 0
src/components/user/registerAgentSection.vue 查看文件

@@ -0,0 +1,458 @@
1
+<template>
2
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
3
+    <div class="form">
4
+      <div v-if="boolMessage" class="row">
5
+        <div class="col">
6
+          <alert :text="'Register Success!'" :type="'SUCCESS'" />
7
+        </div>
8
+      </div>
9
+      <div v-if="boolValidationError" class="row">
10
+        <div class="col">
11
+          <alert :text="errorMessage" :type="errorOccurred" />
12
+        </div>
13
+      </div>
14
+      <h3 class="card-title text-center">Agent Details</h3>
15
+      <hr />
16
+      <div class="row my-3">
17
+        <div class="col-sm-12 col-md-6">
18
+          <div class="form-group">
19
+            <float-label label="Agent Name" style="width: 100%;">
20
+              <input
21
+                type="text"
22
+                id="inputAgentName"
23
+                v-model="registerAgency.user.name"
24
+                class="form-control uniInput my-3"
25
+                v-bind:class="{
26
+                  'is-valid': registerAgency.user.name,
27
+                  'is-invalid':
28
+                    !requiredField(registerAgency.user.name) &&
29
+                    agencyAdminNameLoad,
30
+                }"
31
+                v-on:keyup="agencyAdminNameLoad = true"
32
+                v-on:blur="agencyAdminNameLoad = true"
33
+                placeholder="Agent Name"
34
+              />
35
+              <div class="invalid-feedback">
36
+                Administrator Name is required!
37
+              </div>
38
+            </float-label>
39
+          </div>
40
+          <div class="form-group">
41
+            <float-label label="Surname" style="width: 100%;">
42
+              <input
43
+                type="text"
44
+                id="inputAgencySurname"
45
+                v-model="registerAgency.user.surname"
46
+                class="form-control uniInput my-3"
47
+                v-bind:class="{
48
+                  'is-valid': registerAgency.user.surname,
49
+                  'is-invalid':
50
+                    !requiredField(registerAgency.user.surname) &&
51
+                    agencySurnameLoad,
52
+                }"
53
+                v-on:keyup="agencySurnameLoad = true"
54
+                v-on:blur="agencySurnameLoad = true"
55
+                placeholder="Surname"
56
+              />
57
+              <div class="invalid-feedback">
58
+                Administrator Surname is required!
59
+              </div>
60
+            </float-label>
61
+          </div>
62
+          <div class="form-group">
63
+            <float-label label="Email" style="width: 100%;">
64
+              <input
65
+                type="email"
66
+                id="inputAgencyEmail"
67
+                v-model="registerAgency.user.email"
68
+                v-bind:class="{
69
+                  'is-valid': registerAgency.user.email,
70
+                  'is-invalid':
71
+                    !validEmail(registerAgency.user.email) && agencyEmailLoad,
72
+                }"
73
+                v-on:keyup="agencyEmailLoad = true"
74
+                v-on:blur="agencyEmailLoad = true"
75
+                class="form-control uniInput my-3"
76
+                placeholder="Email"
77
+              />
78
+              <div class="invalid-feedback">Valid email is required!</div>
79
+            </float-label>
80
+          </div>
81
+        </div>
82
+        <div class="col-sm-12 col-md-6">
83
+          <div class="form-group">
84
+            <float-label label="Cellphone Number" style="width: 100%;">
85
+              <input
86
+                type="text"
87
+                id="inputAgencyCellphone"
88
+                v-model="registerAgency.user.cellNumber"
89
+                class="form-control uniInput my-3"
90
+                v-bind:class="{
91
+                  'is-valid': registerAgency.user.cellNumber,
92
+                  'is-invalid':
93
+                    !requiredField(registerAgency.user.cellNumber) &&
94
+                    agencyCellNumberLoad,
95
+                }"
96
+                v-on:keyup="agencyCellNumberLoad = true"
97
+                v-on:blur="agencyCellNumberLoad = true"
98
+                placeholder="Cellphone Number"
99
+              />
100
+              <div class="invalid-feedback">Cell number is required!</div>
101
+            </float-label>
102
+          </div>
103
+          <div class="form-group">
104
+            <float-label label="Landline Number" style="width: 100%;">
105
+              <input
106
+                type="text"
107
+                id="inputAgencyLandLine"
108
+                v-model="registerAgency.user.telephone"
109
+                class="form-control uniInput"
110
+                v-bind:class="{ 'is-valid': registerAgency.user.telephone }"
111
+                placeholder="Landline Number"
112
+              />
113
+            </float-label>
114
+          </div>
115
+
116
+          <div class="form-group">
117
+            <float-label fixed label="Agency">
118
+              <select
119
+                class="form-control uniSelect"
120
+                v-model="inputAgency"
121
+                @change="selectAgency()"
122
+                v-bind:class="{
123
+                  'is-valid': inputAgency,
124
+                  'is-invalid': !requiredField(inputAgency) && inputAgencyLoad,
125
+                }"
126
+                v-on:keyup="inputAgencyLoad = true"
127
+                v-on:blur="inputAgencyLoad = true"
128
+                placeholder="Agency"
129
+              >
130
+                <option v-for="(item, i) in agencies" :key="i" :value="item.id">
131
+                  {{ item.agencyName }}
132
+                </option>
133
+              </select>
134
+              <div class="invalid-feedback">Please select an agency!</div>
135
+            </float-label>
136
+          </div>
137
+        </div>
138
+      </div>
139
+      <hr />
140
+      <div class="row my-3">
141
+        <div class="col-sm-12">
142
+          <div class="form-group">
143
+            <float-label label="Username" style="width: 100%;">
144
+              <input
145
+                type="text"
146
+                id="inputAgencyUsername"
147
+                v-model="registerAgency.user.username"
148
+                class="form-control uniInput"
149
+                v-bind:class="{
150
+                  'is-valid': registerAgency.user.username,
151
+                  'is-invalid':
152
+                    !requiredField(registerAgency.user.username) &&
153
+                    agencyusernameLoad,
154
+                }"
155
+                v-on:keyup="agencyusernameLoad = true"
156
+                v-on:blur="agencyusernameLoad = true"
157
+                placeholder="Username"
158
+              />
159
+              <div class="invalid-feedback">Username is required!</div>
160
+            </float-label>
161
+          </div>
162
+        </div>
163
+      </div>
164
+      <div class="row my-3">
165
+        <div class="col-sm-12 col-md-6">
166
+          <div class="form-group">
167
+            <float-label label="Password" style="width: 100%;">
168
+              <input
169
+                type="password"
170
+                placeholder="Password"
171
+                v-model="registerAgency.user.password"
172
+                id="inputAgencyPassword uniInput"
173
+                class="form-control uniInput"
174
+                v-bind:class="{
175
+                  'is-valid': registerAgency.user.password,
176
+                  'is-invalid':
177
+                    !requiredField(registerAgency.user.password) &&
178
+                    agencypasswordLoad,
179
+                }"
180
+                v-on:keyup="agencypasswordLoad = true"
181
+                v-on:blur="agencypasswordLoad = true"
182
+              />
183
+              <div class="invalid-feedback">Password is required!</div>
184
+            </float-label>
185
+          </div>
186
+        </div>
187
+        <div class="col">
188
+          <div class="form-group">
189
+            <float-label label="Confirm Password" style="width: 100%;">
190
+              <input
191
+                type="password"
192
+                placeholder="Confirm Password"
193
+                v-model="registerAgency.user.confirm"
194
+                id="inputAgencyPasswordConfirm"
195
+                class="form-control uniInput"
196
+                v-bind:class="{
197
+                  'is-valid': registerAgency.user.confirm,
198
+                  'is-invalid':
199
+                    !validConfirm(registerAgency.user.confirm) &&
200
+                    agencyconfirmLoad,
201
+                }"
202
+                v-on:keyup="agencyconfirmLoad = true"
203
+                v-on:blur="agencyconfirmLoad = true"
204
+              />
205
+              <div class="invalid-feedback">
206
+                Password and Confirm password must be the same!
207
+              </div>
208
+            </float-label>
209
+          </div>
210
+        </div>
211
+      </div>
212
+      <div class="row">
213
+        <div class="col">
214
+          <label for="agentc">
215
+            <router-link to="/termsConditionsView">
216
+              Terms & Conditions
217
+            </router-link>
218
+          </label>
219
+          <input
220
+            name="agenttc"
221
+            type="checkbox"
222
+            class="ml-3 mt-2"
223
+            v-model="registerAgency.user.acceptedTerms"
224
+          />
225
+        </div>
226
+      </div>
227
+      <button
228
+        v-if="registerAgency.user.acceptedTerms"
229
+        class="btn-white-border"
230
+        v-on:click="SubmitData()"
231
+        type="submit"
232
+      >
233
+        SUBMIT
234
+      </button>
235
+      <button
236
+        :data-target="'#myModalAgent'"
237
+        data-toggle="modal"
238
+        @click="navigate()"
239
+        class="btn-white-border mb-5"
240
+        style="float: right;"
241
+        type="submit"
242
+      >
243
+        Cancel
244
+      </button>
245
+      <button
246
+        hidden
247
+        :data-target="'#myModalAgent'"
248
+        data-toggle="modal"
249
+        ref="dataToggle"
250
+      ></button>
251
+    </div>
252
+  </main>
253
+</template>
254
+
255
+<script>
256
+/* eslint-disable */
257
+import { mapState, mapActions } from 'vuex'
258
+import carousel from 'vue-owl-carousel'
259
+import alert from '../shared/alert'
260
+import Log from '../../assets/Log'
261
+export default {
262
+  components: {
263
+    carousel,
264
+    alert,
265
+  },
266
+  props: {
267
+    RegisterHeader: { type: String, default: undefined },
268
+  },
269
+  name: 'Agent',
270
+  data() {
271
+    return {
272
+      inputAgency: '',
273
+      isPasswordShown: 'password',
274
+      selectItems: [{ text: 'password', value: 0 }],
275
+      boolMessage: false,
276
+      boolValidationError: false,
277
+      showPassword: false,
278
+      agencyNameLoad: false,
279
+      agencyNumberLoad: false,
280
+      companyRegNumberLoad: false,
281
+      agencyAdminNameLoad: false,
282
+      agencySurnameLoad: false,
283
+      agencyEmailLoad: false,
284
+      agencyCellNumberLoad: false,
285
+      agencyusernameLoad: false,
286
+      agencypasswordLoad: false,
287
+      agencyconfirmLoad: false,
288
+      inputAgencyLoad: false,
289
+      errorOccurred: '',
290
+      errorMessage: '',
291
+    }
292
+  },
293
+  computed: {
294
+    ...mapState('register', ['agencies', 'registerAgency']),
295
+  },
296
+  methods: {
297
+    ...mapActions('register', [
298
+      'getAgency',
299
+      'saveAgency',
300
+      'updateAgency',
301
+      'clearAgency',
302
+    ]),
303
+    navigate() {
304
+      if (Log.getUser().role !== 'Super Admin') {
305
+        this.$router.push('/user/login')
306
+      }
307
+    },
308
+    togglePassword() {
309
+      this.showPassword = true
310
+      this.isPasswordShown = 'text'
311
+    },
312
+    passwordToggled() {
313
+      this.showPassword = false
314
+      this.isPasswordShown = 'password'
315
+    },
316
+    SubmitData() {
317
+      this.boolValidationError = false
318
+      this.boolMessage = false
319
+
320
+      //this.getAgency(inputAgency);
321
+      //console.log(registerAgency.Name);
322
+      if (this.validatePage()) {
323
+        this.saveAgency(this.registerAgency)
324
+          .then(() => {
325
+            this.boolMessage = true
326
+            console.log('registerAgency true')
327
+            console.log(Log.getUser().role)
328
+            setTimeout(() => {
329
+              if (Log.getUser().role !== 'Super Admin') {
330
+                this.$router.push('/user/login')
331
+              } else {
332
+                this.$refs.dataToggle.click()
333
+                this.$router.go()
334
+              }
335
+            }, 500)
336
+          })
337
+          .catch((err) => {
338
+            this.boolValidationError = true
339
+            this.errorOccurred = 'ERROR'
340
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
341
+
342
+            if (err) {
343
+              if (err.data.message) {
344
+                this.errorMessage = err.data.message
345
+              } else {
346
+                this.errorMessage = 'Error.'
347
+              }
348
+            }
349
+          })
350
+      }
351
+    },
352
+    selectAgency() {
353
+      this.registerAgency.name = this.agencies.find(
354
+        (p) => p.id === this.inputAgency,
355
+      ).agencyName
356
+      this.registerAgency.eaabeffcNumber = this.agencies.find(
357
+        (p) => p.id === this.inputAgency,
358
+      ).eaabeffcNumber
359
+      this.registerAgency.companyRegNumber = this.agencies.find(
360
+        (p) => p.id === this.inputAgency,
361
+      ).companyRegNumber
362
+    },
363
+    Close() {
364
+      this.$router.push('/user/login')
365
+    },
366
+    validatePage: function () {
367
+      console.log('validatePage')
368
+      if (
369
+        this.inputAgency &&
370
+        this.registerAgency.name &&
371
+        this.registerAgency.eaabeffcNumber &&
372
+        this.registerAgency.companyRegNumber &&
373
+        this.registerAgency.user.name &&
374
+        this.registerAgency.user.surname &&
375
+        this.registerAgency.user.email &&
376
+        this.registerAgency.user.cellNumber &&
377
+        this.registerAgency.user.username &&
378
+        this.registerAgency.user.password &&
379
+        this.registerAgency.user.password === this.registerAgency.user.confirm
380
+      ) {
381
+        console.log('passed')
382
+        this.errorOccurred = ''
383
+        this.errorMessage = ''
384
+        this.boolValidationError = true
385
+        return true
386
+      } else {
387
+        console.log('failed')
388
+        this.boolValidationError = true
389
+        this.inputAgencyLoad = true
390
+        this.agencyNameLoad = true
391
+        this.agencyNumberLoad = true
392
+        this.companyRegNumberLoad = true
393
+        this.agencyAdminNameLoad = true
394
+        this.agencySurnameLoad = true
395
+        this.agencyEmailLoad = true
396
+        this.agencyCellNumberLoad = true
397
+        this.agencyusernameLoad = true
398
+        this.agencypasswordLoad = true
399
+        this.agencyconfirmLoad = true
400
+        this.errorOccurred = 'ERROR'
401
+        this.errorMessage = 'Please check form and correct all input fields!'
402
+        return false
403
+      }
404
+    },
405
+    requiredField: function (tfield) {
406
+      if (tfield) {
407
+        return true
408
+      } else {
409
+        return false
410
+      }
411
+    },
412
+    validEmail: function (email) {
413
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
414
+      if (email) {
415
+        return re.test(email.toLowerCase())
416
+      } else {
417
+        return re.test(email)
418
+      }
419
+    },
420
+    validConfirm: function (tfield) {
421
+      //console.log(tfield);
422
+      if (this.requiredField(tfield)) {
423
+        if (tfield === this.registerAgency.user.password) {
424
+          return true
425
+        } else {
426
+          return false
427
+        }
428
+      } else {
429
+        return false
430
+      }
431
+    },
432
+  },
433
+}
434
+</script>
435
+
436
+<style lang="scss" scoped>
437
+.btn-disabled {
438
+  font-family: 'Muli';
439
+  font-size: 15px;
440
+  letter-spacing: 1px;
441
+  display: inline-block;
442
+  padding: 10px 32px;
443
+  border-radius: 2px;
444
+  transition: 0.5s;
445
+  margin: 10px;
446
+  color: #fff;
447
+  background: grey;
448
+  border-color: black;
449
+  color: black;
450
+  cursor: not-allowed;
451
+}
452
+.btn-disabled :hover {
453
+  background: grey;
454
+  border-color: black;
455
+  color: black;
456
+  cursor: not-allowed;
457
+}
458
+</style>

+ 262
- 202
src/components/user/registerIndividual.vue 查看文件

@@ -1,9 +1,12 @@
1 1
 <template>
2
-  <main id="main" style="padding-top:10px; padding-bottom:50px">
3
-    <div class="container">
2
+  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
3
+    <div class="form">
4 4
       <div v-if="boolMessage" class="row">
5 5
         <div class="col">
6
-          <alert :text="'Register Success! You\'ll be redirected shortly.'" :type="'SUCCESS'" />
6
+          <alert
7
+            :text="'Register Success! You\'ll be redirected shortly.'"
8
+            :type="'SUCCESS'"
9
+          />
7 10
         </div>
8 11
       </div>
9 12
       <div v-if="boolValidationError" class="row">
@@ -13,134 +16,174 @@
13 16
       </div>
14 17
       <h3 class="card-title text-center">User Details</h3>
15 18
       <div class="row">
16
-        <div class="col-sm-12 col-md-6 ">
19
+        <div class="col-sm-12 col-md-6">
17 20
           <div class="form-group">
18
-            <b-form-input
19
-              type="text"
20
-              id="inputName"
21
-              class="form-control uniInput my-2"
22
-              v-model="indivUser.name"
23
-              v-bind:class="{'is-valid': indivUser.name,
24
-                'is-invalid': !requiredField(indivUser.name) && nameLoad}"
25
-              v-on:keyup="nameLoad = true"
26
-              v-on:blur="nameLoad = true"
27
-              placeholder="Name"
28
-            />
29
-            <div class="invalid-feedback">Name is required!</div>
21
+            <float-label label="Name" style="width: 100%;">
22
+              <input
23
+                type="text"
24
+                id="inputName"
25
+                class="form-control uniInput my-2"
26
+                v-model="indivUser.name"
27
+                v-bind:class="{
28
+                  'is-valid': indivUser.name,
29
+                  'is-invalid': !requiredField(indivUser.name) && nameLoad,
30
+                }"
31
+                v-on:keyup="nameLoad = true"
32
+                v-on:blur="nameLoad = true"
33
+                placeholder="Name"
34
+              />
35
+              <div class="invalid-feedback">Name is required!</div>
36
+            </float-label>
30 37
           </div>
31 38
           <div class="form-group">
32
-            <input
33
-              type="text"
34
-              id="inputSurname"
35
-              class="form-control uniInput my-2"
36
-              v-model="indivUser.surname"
37
-              v-bind:class="{'is-valid': indivUser.surname,
38
-                'is-invalid': !requiredField(indivUser.surname) && surnameLoad}"
39
-              v-on:keyup="surnameLoad = true"
40
-              v-on:blur="surnameLoad = true"
41
-              placeholder="Surname"
42
-            />
43
-            <div class="invalid-feedback">Surname is required!</div>
39
+            <float-label label="Surname" style="width: 100%;">
40
+              <input
41
+                type="text"
42
+                id="inputSurname"
43
+                class="form-control uniInput my-2"
44
+                v-model="indivUser.surname"
45
+                v-bind:class="{
46
+                  'is-valid': indivUser.surname,
47
+                  'is-invalid':
48
+                    !requiredField(indivUser.surname) && surnameLoad,
49
+                }"
50
+                v-on:keyup="surnameLoad = true"
51
+                v-on:blur="surnameLoad = true"
52
+                placeholder="Surname"
53
+              />
54
+              <div class="invalid-feedback">Surname is required!</div>
55
+            </float-label>
44 56
           </div>
45 57
           <div class="form-group">
46
-            <input
47
-              type="email"
48
-              id="inputEmail"
49
-              v-model="indivUser.email"
50
-              class="form-control uniInput my-2"
51
-              v-bind:class="{'is-valid': indivUser.email,
52
-                'is-invalid': !validEmail(indivUser.email) && emailLoad}"
53
-              v-on:keyup="emailLoad = true"
54
-              v-on:blur="emailLoad = true"
55
-              placeholder="Email"
56
-            />
57
-            <div class="invalid-feedback">Valid email address is required!</div>
58
+            <float-label label="Email" style="width: 100%;">
59
+              <input
60
+                type="email"
61
+                id="inputEmail"
62
+                v-model="indivUser.email"
63
+                class="form-control uniInput my-2"
64
+                v-bind:class="{
65
+                  'is-valid': indivUser.email,
66
+                  'is-invalid': !validEmail(indivUser.email) && emailLoad,
67
+                }"
68
+                v-on:keyup="emailLoad = true"
69
+                v-on:blur="emailLoad = true"
70
+                placeholder="Email"
71
+              />
72
+              <div class="invalid-feedback">
73
+                Valid email address is required!
74
+              </div>
75
+            </float-label>
58 76
           </div>
59 77
         </div>
60 78
 
61 79
         <div class="col-sm-12 col-md-6">
62
-          <input
63
-            type="text"
64
-            id="inputCellNumber"
65
-            name="inputCellNumber"
66
-            v-model="indivUser.cellNumber"
67
-            class="form-control uniInput my-2"
68
-            v-bind:class="{'is-valid': indivUser.cellNumber,
69
-                'is-invalid': !requiredField(indivUser.cellNumber) && cellNumberLoad}"
70
-            v-on:keyup="cellNumberLoad = true"
71
-            v-on:blur="cellNumberLoad = true"
72
-            placeholder="Cellphone Number"
73
-          />
74
-          <div class="invalid-feedback">Cellphone number is required!</div>
75
-
76
-          <input
77
-            type="text"
78
-            id="inputTelephone"
79
-            v-model="indivUser.telephone"
80
-            class="form-control uniInput my-2"
81
-            v-bind:class="{'is-valid': indivUser.telephone}"
82
-            placeholder="Landline Number"
83
-          />
80
+          <div class="form-group">
81
+            <float-label label="Cellphone Number" style="width: 100%;">
82
+              <input
83
+                type="text"
84
+                id="inputCellNumber"
85
+                name="inputCellNumber"
86
+                v-model="indivUser.cellNumber"
87
+                class="form-control uniInput my-2"
88
+                v-bind:class="{
89
+                  'is-valid': indivUser.cellNumber,
90
+                  'is-invalid':
91
+                    !requiredField(indivUser.cellNumber) && cellNumberLoad,
92
+                }"
93
+                v-on:keyup="cellNumberLoad = true"
94
+                v-on:blur="cellNumberLoad = true"
95
+                placeholder="Cellphone Number"
96
+              />
97
+              <div class="invalid-feedback">Cellphone number is required!</div>
98
+            </float-label>
99
+          </div>
100
+          <div class="form-group">
101
+            <float-label label="Landline Number" style="width: 100%;">
102
+              <input
103
+                type="text"
104
+                id="inputTelephone"
105
+                v-model="indivUser.telephone"
106
+                class="form-control uniInput my-2"
107
+                v-bind:class="{ 'is-valid': indivUser.telephone }"
108
+                placeholder="Landline Number"
109
+              />
110
+            </float-label>
111
+          </div>
84 112
         </div>
85 113
       </div>
86 114
       <hr />
87 115
       <div class="row">
88 116
         <div class="col-sm-12">
89
-          <input
90
-            type="text"
91
-            id="inputUsername"
92
-            v-model="indivUser.username"
93
-            class="form-control uniInput my-2"
94
-            v-bind:class="{'is-valid': indivUser.username,
95
-                'is-invalid': !requiredField(indivUser.username) && usernameLoad}"
96
-            v-on:keyup="usernameLoad = true"
97
-            v-on:blur="usernameLoad = true"
98
-            placeholder="Username"
99
-          />
100
-          <div class="invalid-feedback">Username is required!</div>
117
+          <float-label label="Username" style="width: 100%;">
118
+            <input
119
+              type="text"
120
+              id="inputUsername"
121
+              v-model="indivUser.username"
122
+              class="form-control uniInput my-2"
123
+              v-bind:class="{
124
+                'is-valid': indivUser.username,
125
+                'is-invalid':
126
+                  !requiredField(indivUser.username) && usernameLoad,
127
+              }"
128
+              v-on:keyup="usernameLoad = true"
129
+              v-on:blur="usernameLoad = true"
130
+              placeholder="Username"
131
+            />
132
+            <div class="invalid-feedback">Username is required!</div>
133
+          </float-label>
101 134
         </div>
102 135
       </div>
103 136
       <div class="row">
104 137
         <div class="col-sm-12 col-md-6">
105
-          <input
106
-            type="password"
107
-            placeholder="Password "
108
-            v-model="indivUser.password"
109
-            id="inputPassword"
110
-            class="form-control uniInput my-2"
111
-            v-bind:class="{'is-valid': indivUser.password,
112
-                'is-invalid': !requiredField(indivUser.password) && passwordLoad}"
113
-            v-on:keyup="passwordLoad = true"
114
-            v-on:blur="passwordLoad = true"
115
-          />
116
-          <div class="invalid-feedback">Password is required!</div>
138
+          <float-label label="Password" style="width: 100%;">
139
+            <input
140
+              type="password"
141
+              placeholder="Password "
142
+              v-model="indivUser.password"
143
+              id="inputPassword"
144
+              class="form-control uniInput my-2"
145
+              v-bind:class="{
146
+                'is-valid': indivUser.password,
147
+                'is-invalid':
148
+                  !requiredField(indivUser.password) && passwordLoad,
149
+              }"
150
+              v-on:keyup="passwordLoad = true"
151
+              v-on:blur="passwordLoad = true"
152
+            />
153
+            <div class="invalid-feedback">Password is required!</div>
154
+          </float-label>
117 155
         </div>
118 156
         <div class="col">
119
-          <input
120
-            type="password"
121
-            placeholder="Confirm Password"
122
-            v-model="indivUser.confirmPassword"
123
-            id="inputConfirmPassword"
124
-            class="form-control uniInput my-2"
125
-            v-bind:class="{'is-valid': indivUser.confirmPassword,
126
-                'is-invalid': !validConfirm(indivUser.confirmPassword) && confirmPasswordLoad}"
127
-            v-on:keyup="confirmPasswordLoad = true"
128
-            v-on:blur="confirmPasswordLoad = true"
129
-          />
130
-          <div class="invalid-feedback">Password and Confirm password must be the same!</div>
157
+          <float-label label="Confirm Password" style="width: 100%;">
158
+            <input
159
+              type="password"
160
+              placeholder="Confirm Password"
161
+              v-model="indivUser.confirmPassword"
162
+              id="inputConfirmPassword"
163
+              class="form-control uniInput my-2"
164
+              v-bind:class="{
165
+                'is-valid': indivUser.confirmPassword,
166
+                'is-invalid':
167
+                  !validConfirm(indivUser.confirmPassword) &&
168
+                  confirmPasswordLoad,
169
+              }"
170
+              v-on:keyup="confirmPasswordLoad = true"
171
+              v-on:blur="confirmPasswordLoad = true"
172
+            />
173
+            <div class="invalid-feedback">
174
+              Password and Confirm password must be the same!
175
+            </div>
176
+          </float-label>
131 177
         </div>
132 178
       </div>
133 179
       <div class="row">
134 180
         <div class="col">
135
-          <label for="tc"
136
-            ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
137
-          >
138
-          <input
139
-            name="tc"
140
-            type="checkbox"
141
-            class="ml-3 mt-2"
142
-            v-model="terms"
143
-            />
181
+          <label for="tc">
182
+            <router-link to="/termsConditionsView">
183
+              Terms & Conditions
184
+            </router-link>
185
+          </label>
186
+          <input name="tc" type="checkbox" class="ml-3 mt-2" v-model="terms" />
144 187
         </div>
145 188
       </div>
146 189
       <button
@@ -156,47 +199,52 @@
156 199
         data-toggle="modal"
157 200
         @click="navigate()"
158 201
         class="btn-white-border"
159
-        style="float:right"
202
+        style="float: right;"
160 203
         type="submit"
161 204
       >
162 205
         Cancel
163 206
       </button>
164
-      <button hidden :data-target="'#myModalAgency'" data-toggle="modal" ref="dataToggle"></button>
207
+      <button
208
+        hidden
209
+        :data-target="'#myModalAgency'"
210
+        data-toggle="modal"
211
+        ref="dataToggle"
212
+      ></button>
165 213
     </div>
166 214
   </main>
167 215
 </template>
168 216
 
169 217
 <script>
170 218
 /* eslint-disable */
171
-import { mapState, mapActions } from "vuex";
172
-import carousel from "vue-owl-carousel";
173
-import alert from "../shared/alert";
174
-import Log from "../../assets/Log";
219
+import { mapState, mapActions } from 'vuex'
220
+import carousel from 'vue-owl-carousel'
221
+import alert from '../shared/alert'
222
+import Log from '../../assets/Log'
175 223
 export default {
176 224
   components: {
177 225
     carousel,
178
-    alert
226
+    alert,
179 227
   },
180 228
   props: {
181
-    RegisterHeader: { type: String, default: undefined }
229
+    RegisterHeader: { type: String, default: undefined },
182 230
   },
183
-  name: "PrivateIndividual",
231
+  name: 'PrivateIndividual',
184 232
   data() {
185 233
     return {
186
-      isPasswordShown: "password",
187
-      selectItems: [{ text: "password", value: 0 }],
234
+      isPasswordShown: 'password',
235
+      selectItems: [{ text: 'password', value: 0 }],
188 236
       showPassword: false,
189 237
       boolMessage: false,
190 238
       terms: false,
191 239
       indivUser: {
192 240
         name: '',
193 241
         surname: '',
194
-        email:'',
242
+        email: '',
195 243
         cellNumber: '',
196 244
         telephone: '',
197 245
         username: '',
198 246
         password: '',
199
-        confirmPassword: ''
247
+        confirmPassword: '',
200 248
       },
201 249
       boolValidationError: false,
202 250
       nameLoad: false,
@@ -207,122 +255,134 @@ export default {
207 255
       usernameLoad: false,
208 256
       passwordLoad: false,
209 257
       confirmPasswordLoad: false,
210
-      errorOccurred: "",
211
-      errorMessage: ""
212
-    };
258
+      errorOccurred: '',
259
+      errorMessage: '',
260
+    }
213 261
   },
214 262
   computed: {
215
-    ...mapState("register", ["registerIndividual"]),
263
+    ...mapState('register', ['registerIndividual']),
216 264
     Header() {
217
-      return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
218
-    }
265
+      return this.RegisterHeader
266
+        ? 'Agency Administrator Details'
267
+        : 'Private Individual'
268
+    },
219 269
   },
220 270
   methods: {
221
-    ...mapActions("register", [
222
-      "getIndividual",
223
-      "saveIndividual",
224
-      "updateIndividual",
225
-      "clearIndividual"
271
+    ...mapActions('register', [
272
+      'getIndividual',
273
+      'saveIndividual',
274
+      'updateIndividual',
275
+      'clearIndividual',
226 276
     ]),
227 277
     navigate() {
228
-      if (Log.getUser().role !== "Super Admin") {
229
-        this.$router.push("/user/login");
278
+      if (Log.getUser().role !== 'Super Admin') {
279
+        this.$router.push('/user/login')
230 280
       }
231 281
     },
232 282
     togglePassword() {
233
-      this.showPassword = true;
234
-      this.isPasswordShown = "text";
283
+      this.showPassword = true
284
+      this.isPasswordShown = 'text'
235 285
     },
236 286
     passwordToggled() {
237
-      this.showPassword = false;
238
-      this.isPasswordShown = "password";
287
+      this.showPassword = false
288
+      this.isPasswordShown = 'password'
239 289
     },
240 290
     SubmitData() {
241
-      this.indivUser.acceptedTerms = this.terms;
291
+      this.indivUser.acceptedTerms = this.terms
242 292
       if (this.validatePage()) {
243
-          this.saveIndividual(this.indivUser)
244
-            .then(res => {
245
-              this.boolMessage = true;
246
-              setTimeout(() => {
247
-                if (Log.getUser().role !== "Super Admin") {
248
-                  this.$router.push("/user/login");
249
-                } else {
250
-                  this.$refs.dataToggle.click();
251
-                  this.$router.go();
252
-                }
253
-              }, 500);
254
-            })
255
-            .catch(err => {
256
-              console.log(err);
257
-              this.boolValidationError = true;
258
-              this.errorOccurred = "ERROR";
259
-              this.errorMessage = "Server Error: CONNECTION_REFUSED"; 
260
-              if (err) {
261
-                if (err.data.message) {
262
-                  this.errorMessage = err.data.message;
263
-                } else {
264
-                  this.errorMessage = "Error."
265
-                }
293
+        this.saveIndividual(this.indivUser)
294
+          .then((res) => {
295
+            this.boolMessage = true
296
+            setTimeout(() => {
297
+              if (Log.getUser().role !== 'Super Admin') {
298
+                this.$router.push('/user/login')
299
+              } else {
300
+                this.$refs.dataToggle.click()
301
+                this.$router.go()
266 302
               }
267
-            }); 
268
-      } 
303
+            }, 500)
304
+          })
305
+          .catch((err) => {
306
+            console.log(err)
307
+            this.boolValidationError = true
308
+            this.errorOccurred = 'ERROR'
309
+            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
310
+            if (err) {
311
+              if (err.data.message) {
312
+                this.errorMessage = err.data.message
313
+              } else {
314
+                this.errorMessage = 'Error.'
315
+              }
316
+            }
317
+          })
318
+      }
269 319
     },
270 320
     Close() {
271
-      this.$router.push("/user/login");
321
+      this.$router.push('/user/login')
272 322
     },
273
-    validatePage : function(){
323
+    validatePage: function () {
274 324
       console.log('validatePage')
275
-      if (this.indivUser.name && this.indivUser.surname && this.indivUser.email 
276
-         && this.indivUser.cellNumber && this.indivUser.username && this.indivUser.password
277
-         && this.indivUser.password === this.indivUser.confirmPassword){
278
-        this.errorOccurred = '';
279
-        this.errorMessage = '';
280
-        this.boolValidationError = false;
281
-        return true;
325
+      if (
326
+        this.indivUser.name &&
327
+        this.indivUser.surname &&
328
+        this.indivUser.email &&
329
+        this.indivUser.cellNumber &&
330
+        this.indivUser.username &&
331
+        this.indivUser.password &&
332
+        this.indivUser.password === this.indivUser.confirmPassword
333
+      ) {
334
+        this.errorOccurred = ''
335
+        this.errorMessage = ''
336
+        this.boolValidationError = false
337
+        return true
282 338
       } else {
283
-        this.boolValidationError = true;
284
-        this.nameLoad = true,
285
-        this.surnameLoad = true,
286
-        this.emailLoad = true,
287
-        this.cellNumberLoad= true,
288
-        this.telephoneLoad = true,
289
-        this.usernameLoad = true,
290
-        this.passwordLoad = true,
291
-        this.confirmPasswordLoad = true,
292
-        this.errorOccurred = "ERROR";
293
-        this.errorMessage = "Please check form and correct all input fields!";
294
-        return false;
339
+        this.boolValidationError = true
340
+        ;(this.nameLoad = true),
341
+          (this.surnameLoad = true),
342
+          (this.emailLoad = true),
343
+          (this.cellNumberLoad = true),
344
+          (this.telephoneLoad = true),
345
+          (this.usernameLoad = true),
346
+          (this.passwordLoad = true),
347
+          (this.confirmPasswordLoad = true),
348
+          (this.errorOccurred = 'ERROR')
349
+        this.errorMessage = 'Please check form and correct all input fields!'
350
+        return false
295 351
       }
296 352
     },
297
-    requiredField : function(tfield) {
298
-      if(tfield){
299
-        return true;
353
+    requiredField: function (tfield) {
354
+      if (tfield) {
355
+        return true
300 356
       } else {
301
-        return false;
357
+        return false
302 358
       }
303 359
     },
304
-    validEmail : function(email) {
305
-        var re = /(.+)@(.+){2,}\.(.+){2,}/;
306
-        return re.test(email.toLowerCase());
360
+    validEmail: function (email) {
361
+      var re = /(.+)@(.+){2,}\.(.+){2,}/
362
+      if (email) {
363
+        return re.test(email.toLowerCase())
364
+      } else {
365
+        return re.test(email)
366
+      }
307 367
     },
308
-    validConfirm : function(tfield) {
309
-      if (this.requiredField(tfield)){
310
-        if(tfield === this.indivUser.password){
311
-          return true;
368
+    validConfirm: function (tfield) {
369
+      if (this.requiredField(tfield)) {
370
+        if (tfield === this.indivUser.password) {
371
+          return true
312 372
         } else {
313
-          return false;
314
-        } 
373
+          return false
374
+        }
315 375
       } else {
316
-        return false;
376
+        return false
317 377
       }
318
-    }
319
-  }
320
-};
378
+    },
379
+  },
380
+}
321 381
 </script>
322 382
 
323 383
 <style lang="scss" scoped>
324 384
 .btn-disabled {
325
-  font-family: "Muli";
385
+  font-family: 'Muli';
326 386
   font-size: 15px;
327 387
   letter-spacing: 1px;
328 388
   display: inline-block;

+ 1
- 1
src/router/index.js 查看文件

@@ -53,7 +53,7 @@ import tenderWeekAdminPage from '../components/admin/status/tenderWeekAdminPage.
53 53
 import userManagementPage from '../components/admin/status/userManagementPage.vue'
54 54
 import changeLogPage from '../components/admin/status/changeLogPage.vue'
55 55
 import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue'
56
-import agentManagementPage from '../components/admin/status/agentsUserManagementPage.vue'
56
+import agentManagementPage from '../components/admin/status/agentUserManagementPage.vue'
57 57
 import agencyManagementPage from '../components/admin/status/agencyUserManagementPage.vue'
58 58
 import Fees from '../components/admin/fees/feesPage.vue'
59 59
 import PasswordOnLogin from '../components/user/firstLoginPasswordUpdate.vue'

+ 3
- 1
src/store/modules/timeshare/timeshare.js 查看文件

@@ -31,6 +31,7 @@ export default {
31 31
             resort: undefined,
32 32
             resortCode: undefined,
33 33
             resortName: undefined,
34
+            region: undefined,
34 35
             regionId: undefined,
35 36
             season: undefined,
36 37
             module: undefined,
@@ -39,6 +40,7 @@ export default {
39 40
             maxSleep: undefined,
40 41
             weekNumber: undefined,
41 42
             levyAmount: undefined,
43
+            weekType: undefined,
42 44
             currentYearBanked: false,
43 45
             bankedWith: undefined,
44 46
             leviesPaidInFull: false,
@@ -197,7 +199,7 @@ export default {
197 199
                 )
198 200
                 .then((result) => {
199 201
                     commit('addResort', result.data)
200
-                    console.log(result.data)
202
+                        //console.log(result.data)
201 203
                 })
202 204
                 .catch(console.error)
203 205
         },

+ 13
- 2
src/store/modules/user/register.js 查看文件

@@ -34,6 +34,7 @@ export default {
34 34
                 password: '',
35 35
                 confirm: '',
36 36
                 role: '',
37
+                acceptedTerms: false,
37 38
             },
38 39
         },
39 40
     },
@@ -102,6 +103,8 @@ export default {
102 103
                     username: '',
103 104
                     password: '',
104 105
                     confirm: '',
106
+                    role: '',
107
+                    acceptedTerms: false,
105 108
                 },
106 109
             }
107 110
         },
@@ -141,7 +144,11 @@ export default {
141 144
         getAgents({ commit }) {
142 145
             axios
143 146
                 .get('/api/agent')
144
-                .then((result) => commit('setAgents', result.data))
147
+                .then((result) => {
148
+                    //console.log('Agents')
149
+                    //console.log(result)
150
+                    commit('setAgents', result.data)
151
+                })
145 152
                 .catch(console.error)
146 153
         },
147 154
         async getAgentById({ commit }, userId) {
@@ -158,7 +165,11 @@ export default {
158 165
         getAgencies({ commit }) {
159 166
             axios
160 167
                 .get('/api/agency')
161
-                .then((result) => commit('setAgencies', result.data))
168
+                .then((result) => {
169
+                    //console.log('Agencies')
170
+                    //console.log(result)
171
+                    commit('setAgencies', result.data)
172
+                })
162 173
                 .catch(console.error)
163 174
         },
164 175
         getAgency({ commit }, id) {

Loading…
取消
儲存