Browse Source

Validation and standardisation

master
Brian Conway 2 years ago
parent
commit
801a574e45

+ 1
- 1
src/components/admin/status/agencyUserManagementPage.vue View File

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

src/components/admin/status/agentsUserManagementPage.vue → src/components/admin/status/agentUserManagementPage.vue View File

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

+ 0
- 0
src/components/admin/test.html View File


+ 227
- 137
src/components/home/carouselSection.vue View File

1
 <template>
1
 <template>
2
   <section id="intro">
2
   <section id="intro">
3
     <div class="container">
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
                 </div>
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
                   </div>
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
                 </div>
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
                   </div>
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
                 </div>
141
                 </div>
112
               </div>
142
               </div>
113
-            </div>
114
 
143
 
115
-            <div></div>
144
+              <div></div>
145
+            </div>
116
           </div>
146
           </div>
117
         </div>
147
         </div>
118
       </div>
148
       </div>
125
       :autoplay="true"
155
       :autoplay="true"
126
       :loop="true"
156
       :loop="true"
127
       id="intro-carousel"
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
     </carousel>
200
     </carousel>
138
 
201
 
139
     <div id="intro-carousel" class="owl-carousel"></div>
202
     <div id="intro-carousel" class="owl-carousel"></div>
143
 
206
 
144
 <script>
207
 <script>
145
 /* eslint-disable */
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
 export default {
212
 export default {
150
   components: {
213
   components: {
151
     carousel,
214
     carousel,
152
     autoComplete,
215
     autoComplete,
153
   },
216
   },
154
   computed: {
217
   computed: {
155
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
218
+    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
156
   },
219
   },
157
   data() {
220
   data() {
158
     return {
221
     return {
159
-      propertyUsageType: "Commercial",
160
-      salesType: "Sale",
161
-      searchText: "",
222
+      propertyUsageType: 'Commercial',
223
+      salesType: 'Sale',
224
+      searchText: '',
162
       clicked: false,
225
       clicked: false,
163
-    };
226
+    }
164
   },
227
   },
165
   methods: {
228
   methods: {
166
-    ...mapActions("propertySearch", ["applyFilter"]),
229
+    ...mapActions('propertySearch', ['applyFilter']),
167
     SetSalesType(value) {
230
     SetSalesType(value) {
168
-      this.salesType = value;
231
+      this.salesType = value
169
     },
232
     },
170
     SearchClickBuyRes() {
233
     SearchClickBuyRes() {
171
       // const item = this.suburbs.find((s) => s.display === this.searchText);
234
       // const item = this.suburbs.find((s) => s.display === this.searchText);
172
       // this.propertySearch.province = item.province;
235
       // this.propertySearch.province = item.province;
173
       // this.propertySearch.city = item.city;
236
       // this.propertySearch.city = item.city;
174
       // this.propertySearch.suburb = item.suburb;
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
     SearchClickRentRes() {
243
     SearchClickRentRes() {
181
       // const item = this.suburbs.find((s) => s.display === this.searchText);
244
       // const item = this.suburbs.find((s) => s.display === this.searchText);
182
       // this.propertySearch.province = item.province;
245
       // this.propertySearch.province = item.province;
183
       // this.propertySearch.city = item.city;
246
       // this.propertySearch.city = item.city;
184
       // this.propertySearch.suburb = item.suburb;
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
     SearchClickBuyComm() {
253
     SearchClickBuyComm() {
191
       // const item = this.suburbs.find((s) => s.display === this.searchText);
254
       // const item = this.suburbs.find((s) => s.display === this.searchText);
192
       // this.propertySearch.province = item.province;
255
       // this.propertySearch.province = item.province;
193
       // this.propertySearch.city = item.city;
256
       // this.propertySearch.city = item.city;
194
       // this.propertySearch.suburb = item.suburb;
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
     SearchClickRentComm() {
263
     SearchClickRentComm() {
201
       // const item = this.suburbs.find((s) => s.display === this.searchText);
264
       // const item = this.suburbs.find((s) => s.display === this.searchText);
202
       // this.propertySearch.province = item.province;
265
       // this.propertySearch.province = item.province;
203
       // this.propertySearch.city = item.city;
266
       // this.propertySearch.city = item.city;
204
       // this.propertySearch.suburb = item.suburb;
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
     SelectedFilter(item) {
273
     SelectedFilter(item) {
211
-      this.searchText = item;
274
+      this.searchText = item
212
     },
275
     },
213
     UpdateAddress(place) {
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
 </script>
283
 </script>
221
 
284
 
222
 <style lang="scss" scoped>
285
 <style lang="scss" scoped>
254
     margin-top: 120px !important;
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
 </style>
347
 </style>

+ 123
- 84
src/components/property/commercial/commercialCarouselSection.vue View File

1
 <template>
1
 <template>
2
   <section id="intro">
2
   <section id="intro">
3
     <div class="container">
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
                   </div>
51
                   </div>
52
+                  <a v-on:click="SearchClick" class="btn-white-border">
53
+                    <i class="fa fa-search"></i>
54
+                    Search
55
+                  </a>
51
                 </div>
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
                   </div>
69
                   </div>
70
+                  <a v-on:click="SearchClick" class="btn-white-border">
71
+                    <i class="fa fa-search"></i>
72
+                    Search
73
+                  </a>
63
                 </div>
74
                 </div>
64
-                <a v-on:click="SearchClick" class="btn-solid-blue">
65
-                  <i class="fa fa-search"></i> FIND
66
-                </a>
67
               </div>
75
               </div>
68
             </div>
76
             </div>
69
           </div>
77
           </div>
78
       :autoplay="true"
86
       :autoplay="true"
79
       :loop="true"
87
       :loop="true"
80
       id="intro-carousel"
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
       <img class="item" src="img/intro-carousel/comm-1.jpg" alt />
95
       <img class="item" src="img/intro-carousel/comm-1.jpg" alt />
85
       <img class="item" src="img/intro-carousel/comm-2.jpg" alt />
96
       <img class="item" src="img/intro-carousel/comm-2.jpg" alt />
95
 
106
 
96
 <script>
107
 <script>
97
 /* eslint-disable */
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
 export default {
113
 export default {
103
   components: {
114
   components: {
104
     carousel,
115
     carousel,
107
   },
118
   },
108
   data() {
119
   data() {
109
     return {
120
     return {
110
-      propertyUsageType: "Commercial",
111
-      salesType: "Sale",
112
-      searchText: "",
121
+      propertyUsageType: 'Commercial',
122
+      salesType: 'Sale',
123
+      searchText: '',
113
       clicked: false,
124
       clicked: false,
114
-    };
125
+    }
115
   },
126
   },
116
   computed: {
127
   computed: {
117
-    ...mapState("propertySearch", ["propertySearch"]),
128
+    ...mapState('propertySearch', ['propertySearch']),
118
   },
129
   },
119
   methods: {
130
   methods: {
120
-    ...mapActions("propertySearch", ["applyFilter"]),
131
+    ...mapActions('propertySearch', ['applyFilter']),
121
     SetSalesType(value) {
132
     SetSalesType(value) {
122
-      this.salesType = value;
133
+      this.salesType = value
123
     },
134
     },
124
     SearchClick() {
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
     SetAddress(place) {
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
 </script>
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 View File

6
       <div class="row">
6
       <div class="row">
7
         <div class="col-md-12 col-lg-8">
7
         <div class="col-md-12 col-lg-8">
8
           <div class="title-box-d">
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
           </div>
12
           </div>
14
         </div>
13
         </div>
15
       </div>
14
       </div>
30
                 :key="i"
29
                 :key="i"
31
               />
30
               />
32
             </div>
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
           </div>
37
           </div>
35
         </div>
38
         </div>
36
         <br />
39
         <br />
41
                 <div class="row">
44
                 <div class="row">
42
                   <div class="col-sm-12">
45
                   <div class="col-sm-12">
43
                     <div class="title-box-d">
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
                     </div>
50
                     </div>
46
                   </div>
51
                   </div>
47
                 </div>
52
                 </div>
48
                 <div
53
                 <div
49
                   class="property-description"
54
                   class="property-description"
50
-                  style="text-align:left"
55
+                  style="text-align: left;"
51
                   v-html="property.description"
56
                   v-html="property.description"
52
                 />
57
                 />
53
                 <div v-for="display in property.displayData" :key="display.id">
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
                     <div class="col-sm-12">
60
                     <div class="col-sm-12">
56
                       <div class="title-box-d">
61
                       <div class="title-box-d">
57
                         <h3 class="title-d">{{ display.groupName }}</h3>
62
                         <h3 class="title-d">{{ display.groupName }}</h3>
59
                     </div>
64
                     </div>
60
                   </div>
65
                   </div>
61
                   <div class="summary-list">
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
                       <li class="d-flex justify-content-between">
72
                       <li class="d-flex justify-content-between">
64
                         <strong>{{ item.name }}:</strong>
73
                         <strong>{{ item.name }}:</strong>
65
                         <span v-html="item.value"></span>
74
                         <span v-html="item.value"></span>
71
               <div class="col-md-5 col-lg-4">
80
               <div class="col-md-5 col-lg-4">
72
                 <div class="property-price d-flex justify-content-center foo">
81
                 <div class="property-price d-flex justify-content-center foo">
73
                   <!-- <div class="card-header-c d-flex"> -->
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
                     <!-- <span class="ion-money">R</span> -->
91
                     <!-- <span class="ion-money">R</span> -->
76
 
92
 
77
                     <div class="card-title-c align-self-center">
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
                     </div>
100
                     </div>
81
                   </div>
101
                   </div>
82
                   <!-- </div> -->
102
                   <!-- </div> -->
85
                   <div class="row">
105
                   <div class="row">
86
                     <div class="col-sm-12">
106
                     <div class="col-sm-12">
87
                       <div class="title-box-d section-t4">
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
                       </div>
111
                       </div>
90
                     </div>
112
                     </div>
91
                   </div>
113
                   </div>
92
                   <div class="summary-list">
114
                   <div class="summary-list">
93
                     <ul class="list">
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
                         <strong>Available:</strong>
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
                         <span v-else>Now</span>
124
                         <span v-else>Now</span>
100
                       </li>
125
                       </li>
101
                       <li class="d-flex justify-content-between">
126
                       <li class="d-flex justify-content-between">
112
                       <li class="d-flex justify-content-between">
137
                       <li class="d-flex justify-content-between">
113
                         <strong>Address:</strong>
138
                         <strong>Address:</strong>
114
                         <span
139
                         <span
115
-                          style="text-align:right"
140
+                          style="text-align: right;"
116
                           v-if="property"
141
                           v-if="property"
117
                           v-html="
142
                           v-html="
118
                             formatAddress(property.addressLine1) +
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
                         ></span>
160
                         ></span>
126
                       </li>
161
                       </li>
133
                     class="btn btn-b-n"
168
                     class="btn btn-b-n"
134
                     data-toggle="modal"
169
                     data-toggle="modal"
135
                     data-target="#myModal"
170
                     data-target="#myModal"
136
-                  >Make an Offer</button>
171
+                  >
172
+                    Make an Offer
173
+                  </button>
137
                   <div id="myModal" class="modal fade" role="dialog">
174
                   <div id="myModal" class="modal fade" role="dialog">
138
                     <div class="modal-dialog modal-lg">
175
                     <div class="modal-dialog modal-lg">
139
                       <!-- Modal content-->
176
                       <!-- Modal content-->
140
                       <div class="modal-content">
177
                       <div class="modal-content">
141
                         <div class="modal-header">
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
                         </div>
186
                         </div>
144
                         <div padding-left="20px">
187
                         <div padding-left="20px">
145
                           <makeOffer
188
                           <makeOffer
150
                               id: property.id,
193
                               id: property.id,
151
                               shortDescription: property.shortDescription,
194
                               shortDescription: property.shortDescription,
152
                               description: property.description,
195
                               description: property.description,
153
-                              price: property.price
196
+                              price: property.price,
154
                             }"
197
                             }"
155
                           />
198
                           />
156
                         </div>
199
                         </div>
171
                   <div class="row section-t3">
214
                   <div class="row section-t3">
172
                     <div class="col-sm-12">
215
                     <div class="col-sm-12">
173
                       <div class="title-box-d">
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
                       </div>
220
                       </div>
176
                     </div>
221
                     </div>
177
                   </div>
222
                   </div>
217
                               </div>
262
                               </div>
218
                             </div>
263
                             </div>
219
                             <div class="col-md-12">
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
                             </div>
268
                             </div>
222
                           </div>
269
                           </div>
223
                         </form>
270
                         </form>
233
         <!-- Tab Control -->
280
         <!-- Tab Control -->
234
         <div class="row">
281
         <div class="row">
235
           <div class="col-md-12">
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
               <div class="col-md-12 col-lg-12 section-md-t3">
287
               <div class="col-md-12 col-lg-12 section-md-t3">
238
                 <div class="row">
288
                 <div class="row">
239
                   <div class="col-md-12">
289
                   <div class="col-md-12">
240
                     <div class="title-box-d">
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
                     </div>
294
                     </div>
243
                   </div>
295
                   </div>
244
                 </div>
296
                 </div>
261
                 <div class="row">
313
                 <div class="row">
262
                   <div class="col-md-12">
314
                   <div class="col-md-12">
263
                     <div class="title-box-d">
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
                     </div>
317
                     </div>
266
                   </div>
318
                   </div>
267
                 </div>
319
                 </div>
270
                   width="100%"
322
                   width="100%"
271
                   height="700"
323
                   height="700"
272
                   frameborder="0"
324
                   frameborder="0"
273
-                  style="border:0"
325
+                  style="border: 0;"
274
                   allowfullscreen
326
                   allowfullscreen
275
                 ></iframe>
327
                 ></iframe>
276
               </div>
328
               </div>
284
 </template>
336
 </template>
285
 
337
 
286
 <script>
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
 export default {
343
 export default {
292
-  name: "property",
344
+  name: 'property',
293
   components: {
345
   components: {
294
     makeOffer,
346
     makeOffer,
295
-    gallery
347
+    gallery,
296
   },
348
   },
297
   data() {
349
   data() {
298
     return {
350
     return {
299
       index: null,
351
       index: null,
300
-      date: new Date()
301
-    };
352
+      date: new Date(),
353
+    }
302
   },
354
   },
303
   mounted() {
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
   computed: {
360
   computed: {
309
-    ...mapState("property", ["property", "propertyImages"]),
310
-    ...mapState("propertyEdit", ["mayEdit"])
361
+    ...mapState('property', ['property', 'propertyImages']),
362
+    ...mapState('propertyEdit', ['mayEdit']),
311
   },
363
   },
312
   methods: {
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
     formatPrice(value) {
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
     formatAddress(value) {
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
   beforeDestroy() {
382
   beforeDestroy() {
331
-    this.clearPropertyImages();
332
-  }
333
-};
383
+    this.clearPropertyImages()
384
+  },
385
+}
334
 </script>
386
 </script>
335
 
387
 
336
 <style lang="scss">
388
 <style lang="scss">

+ 159
- 90
src/components/property/residential/residentialCarouselSection.vue View File

2
   <div>
2
   <div>
3
     <section id="intro">
3
     <section id="intro">
4
       <div class="container">
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
                     </div>
53
                     </div>
54
+                    <a v-on:click="SearchClick" class="btn-white-border">
55
+                      <i class="fa fa-search"></i>
56
+                      Search
57
+                    </a>
52
                   </div>
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
                     </div>
71
                     </div>
72
+                    <a v-on:click="SearchClick" class="btn-white-border">
73
+                      <i class="fa fa-search"></i>
74
+                      Search
75
+                    </a>
64
                   </div>
76
                   </div>
65
-                  <a v-on:click="SearchClick" class="btn-solid-blue">
66
-                    <i class="fa fa-search"></i> FIND
67
-                  </a>
68
                 </div>
77
                 </div>
69
               </div>
78
               </div>
70
             </div>
79
             </div>
79
         :autoplay="true"
88
         :autoplay="true"
80
         :loop="true"
89
         :loop="true"
81
         id="intro-carousel"
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
       </carousel>
133
       </carousel>
92
     </section>
134
     </section>
93
-    <main id="main" style="margin-top:-20px">
135
+    <main id="main" style="margin-top: -20px;">
94
       <div class="container-fluid">
136
       <div class="container-fluid">
95
         <div class="row">
137
         <div class="row">
96
           <div
138
           <div
111
 
153
 
112
 <script>
154
 <script>
113
 /* eslint-disable */
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
 export default {
160
 export default {
119
   components: {
161
   components: {
120
     carousel,
162
     carousel,
123
   },
165
   },
124
   data() {
166
   data() {
125
     return {
167
     return {
126
-      propertyUsageType: "Residential",
127
-      salesType: "Sale",
128
-      searchText: "",
168
+      propertyUsageType: 'Residential',
169
+      salesType: 'Sale',
170
+      searchText: '',
129
       clicked: false,
171
       clicked: false,
130
-    };
172
+    }
131
   },
173
   },
132
   computed: {
174
   computed: {
133
-    ...mapState("propertySearch", ["propertySearch"]),
175
+    ...mapState('propertySearch', ['propertySearch']),
134
   },
176
   },
135
   methods: {
177
   methods: {
136
-    ...mapActions("propertySearch", ["applyFilter"]),
178
+    ...mapActions('propertySearch', ['applyFilter']),
137
     SetSalesType(value) {
179
     SetSalesType(value) {
138
-      this.salesType = value;
180
+      this.salesType = value
139
     },
181
     },
140
     SearchClick() {
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
       //this.clicked = true;
186
       //this.clicked = true;
145
-      this.$router.push("/property/residential/searchResult");
187
+      this.$router.push('/property/residential/searchResult')
146
     },
188
     },
147
     SelectedFilter(item) {
189
     SelectedFilter(item) {
148
-      this.searchText = item;
190
+      this.searchText = item
149
     },
191
     },
150
     UpdateAddress(place) {
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
 </script>
204
 </script>
163
 
205
 
164
 <style lang="scss" scoped>
206
 <style lang="scss" scoped>
215
 .searchComponent--clicked {
257
 .searchComponent--clicked {
216
   opacity: 1;
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
 </style>
287
 </style>

+ 131
- 111
src/components/shared/contactUsSection.vue View File

7
           <alert :text="errorMessage" :type="errorOccurred" />
7
           <alert :text="errorMessage" :type="errorOccurred" />
8
         </div>
8
         </div>
9
       </div>
9
       </div>
10
-      <div class="form-row">
10
+      <div class="row">
11
         <div class="form-group col-md-6">
11
         <div class="form-group col-md-6">
12
-          <input
12
+          <float-label label="Name" style="width: 100%;">
13
+            <input
13
               type="text"
14
               type="text"
14
               id="name"
15
               id="name"
15
-              class="form-control"
16
+              class="form-control uniInput my-2"
16
               v-model="name"
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
               v-on:keyup="nameLoad = true"
22
               v-on:keyup="nameLoad = true"
20
               v-on:blur="nameLoad = true"
23
               v-on:blur="nameLoad = true"
21
               placeholder="Name"
24
               placeholder="Name"
22
             />
25
             />
23
             <div class="invalid-feedback">Name is required!</div>
26
             <div class="invalid-feedback">Name is required!</div>
27
+          </float-label>
24
         </div>
28
         </div>
25
         <div class="form-group col-md-6">
29
         <div class="form-group col-md-6">
26
-          <input
30
+          <float-label label="Email" style="width: 100%;">
31
+            <input
27
               type="email"
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
               placeholder="Email"
42
               placeholder="Email"
36
             />
43
             />
37
             <div class="invalid-feedback">Valid email address is required!</div>
44
             <div class="invalid-feedback">Valid email address is required!</div>
45
+          </float-label>
38
         </div>
46
         </div>
39
         <div class="form-group col-md-6">
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
         </div>
58
         </div>
49
         <div class="form-group col-md-6">
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
         </div>
70
         </div>
59
       </div>
71
       </div>
60
       <div class="form-group">
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
       </div>
90
       </div>
76
       <div class="text-center">
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
       </div>
93
       </div>
79
       <div v-if="boolSent">
94
       <div v-if="boolSent">
80
         <alert :text="alertMsg" :type="'SUCCESS'" />
95
         <alert :text="alertMsg" :type="'SUCCESS'" />
85
 
100
 
86
 <script>
101
 <script>
87
 /* eslint-disable */
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
 export default {
106
 export default {
92
   components: {
107
   components: {
93
-    alert
108
+    alert,
94
   },
109
   },
95
   data() {
110
   data() {
96
     return {
111
     return {
97
-      alertMsg: "Sent! You can expect a reply soon!",
112
+      alertMsg: 'Sent! You can expect a reply soon!',
98
       name: '',
113
       name: '',
99
-      email: '',
114
+      contactemail: '',
100
       phone: '',
115
       phone: '',
101
       property: '',
116
       property: '',
102
       message: '',
117
       message: '',
103
       boolSent: false,
118
       boolSent: false,
104
-      errorOccurred: "",
105
-      errorMessage: "",
119
+      errorOccurred: '',
120
+      errorMessage: '',
106
       boolValidationError: false,
121
       boolValidationError: false,
107
       nameLoad: false,
122
       nameLoad: false,
108
-      emailLoad: false,
109
-      messageLoad: false
110
-    };
123
+      contactemailLoad: false,
124
+      messageLoad: false,
125
+    }
111
   },
126
   },
112
   mounted() {
127
   mounted() {
113
-    this.boolSent = false;
128
+    this.boolSent = false
129
+    console.log('Email')
130
+    console.log(this.contactemail)
114
   },
131
   },
115
   methods: {
132
   methods: {
116
     async sendMail() {
133
     async sendMail() {
117
       if (this.validatePage()) {
134
       if (this.validatePage()) {
118
         var mailObj = {
135
         var mailObj = {
119
           name: this.name,
136
           name: this.name,
120
-          email: this.email,
137
+          email: this.contactemail,
121
           phone: this.phone,
138
           phone: this.phone,
122
           property: this.property,
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
               } else {
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
     countDownChanged(dismissCountDown) {
177
     countDownChanged(dismissCountDown) {
154
-      this.dismissCountDown = dismissCountDown;
178
+      this.dismissCountDown = dismissCountDown
155
     },
179
     },
156
-    validatePage : function(){
180
+    validatePage: function () {
157
       //console.log('validatePage')
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
       } else {
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
       } else {
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
 </script>
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 View File

1
 <template>
1
 <template>
2
   <section id="intro">
2
   <section id="intro">
3
     <div class="container">
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
                 </div>
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
                 </div>
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
               </div>
81
               </div>
82
+              <button class="btn-white-border" @click="Search()">
83
+                <i class="fa fa-search"></i>
84
+                Search
85
+              </button>
73
             </div>
86
             </div>
74
-            <button class="btn-solid-blue" @click="Search()">
75
-              <i class="fa fa-search"></i> SEARCH
76
-            </button>
77
           </div>
87
           </div>
78
         </div>
88
         </div>
79
       </div>
89
       </div>
86
       :autoplay="true"
96
       :autoplay="true"
87
       :loop="true"
97
       :loop="true"
88
       id="intro-carousel"
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
     </carousel>
141
     </carousel>
99
 
142
 
100
     <div id="intro-carousel" class="owl-carousel"></div>
143
     <div id="intro-carousel" class="owl-carousel"></div>
104
 <script>
147
 <script>
105
 /* eslint-disable */
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
 export default {
152
 export default {
110
   components: {
153
   components: {
111
-    carousel
154
+    carousel,
112
   },
155
   },
113
   data() {
156
   data() {
114
     return {
157
     return {
115
       regionObj: {},
158
       regionObj: {},
116
       resortObj: {},
159
       resortObj: {},
117
-      region: "",
118
-      resort: "",
160
+      region: '',
161
+      resort: '',
119
       priceMin: undefined,
162
       priceMin: undefined,
120
-      priceMax: undefined
121
-    };
163
+      priceMax: undefined,
164
+    }
122
   },
165
   },
123
   methods: {
166
   methods: {
124
-    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
125
-    ...mapActions("resort", ["getResortWithListings"]),
167
+    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
168
+    ...mapActions('resort', ['getResortWithListings']),
126
     regionChange(item) {
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
     resortChange(item) {
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
     Search() {
177
     Search() {
135
       if (this.searchParams.price) {
178
       if (this.searchParams.price) {
136
-        this.filter.minPrice = this.searchParams.price;
179
+        this.filter.minPrice = this.searchParams.price
137
       }
180
       }
138
       if (this.searchParams.week) {
181
       if (this.searchParams.week) {
139
-        this.filter.keyword = this.week;
182
+        this.filter.keyword = this.week
140
       }
183
       }
141
 
184
 
142
       if (!this.searchParams.resort) {
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
       } else {
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
   computed: {
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
     filteredResort() {
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
           if (
202
           if (
160
             resortListing.resortRegion[0].code.toUpperCase() ===
203
             resortListing.resortRegion[0].code.toUpperCase() ===
161
             this.regionObj.regionCode.toUpperCase()
204
             this.regionObj.regionCode.toUpperCase()
162
           ) {
205
           ) {
163
-            itemList.push(resortListing);
206
+            itemList.push(resortListing)
164
           }
207
           }
165
-        });
208
+        })
166
         if (itemList.length > 0) {
209
         if (itemList.length > 0) {
167
-          list = itemList;
210
+          list = itemList
168
         } else {
211
         } else {
169
           list[0] = {
212
           list[0] = {
170
-            resortName: " - No Listings - "
171
-          };
213
+            resortName: ' - No Listings - ',
214
+          }
172
         }
215
         }
173
       } else {
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
     // filteredResort() {
221
     // filteredResort() {
179
     //   let list = [];
222
     //   let list = [];
180
     //   if (this.searchParams.region && this.searchParams.region !== "") {
223
     //   if (this.searchParams.region && this.searchParams.region !== "") {
191
     // }
234
     // }
192
   },
235
   },
193
   created() {
236
   created() {
194
-    this.initTimeshare(this.weekId);
195
-    this.getResortWithListings();
237
+    this.initTimeshare(this.weekId)
238
+    this.getResortWithListings()
196
   },
239
   },
197
   mounted() {
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
 </script>
247
 </script>
205
 
248
 
206
 <style lang="scss" scoped></style>
249
 <style lang="scss" scoped></style>

+ 5
- 11
src/components/timeshare/searchTimeshare.vue View File

5
     <div class="input-group mt-2">
5
     <div class="input-group mt-2">
6
       <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
6
       <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
7
       <select class="form-control" name="season" id="season" v-model="filter.season">
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
       </select>
10
       </select>
10
     </div>
11
     </div>
11
     <div class="input-group mt-2">
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
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
15
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
14
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
16
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
15
       </select>
17
       </select>
108
 </script>
110
 </script>
109
 
111
 
110
 <style lang="scss" scoped>
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
 </style>
114
 </style>

+ 43
- 11
src/components/timeshare/sell/carouselSection.vue View File

6
           <div class="intro-content box">
6
           <div class="intro-content box">
7
             <h2>Sell your Timeshare</h2>
7
             <h2>Sell your Timeshare</h2>
8
             <p>
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
             </p>
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
           </div>
27
           </div>
14
         </div>
28
         </div>
15
       </div>
29
       </div>
22
       :autoplay="true"
36
       :autoplay="true"
23
       :loop="true"
37
       :loop="true"
24
       id="intro-carousel"
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
       <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
45
       <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
29
       <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
46
       <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
40
 <script>
57
 <script>
41
 /* eslint-disable */
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
 export default {
64
 export default {
46
   components: {
65
   components: {
47
-    carousel
66
+    carousel,
67
+  },
68
+  data() {
69
+    return {
70
+      userLoggedIn: Log.isLoggedIn(),
71
+    }
48
   },
72
   },
49
   computed: {
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
 </script>
85
 </script>
54
 
86
 
55
 <style lang="scss" scoped></style>
87
 <style lang="scss" scoped></style>

+ 1607
- 1060
src/components/timeshare/sell/contentSectionNew.vue
File diff suppressed because it is too large
View File


+ 55
- 50
src/components/user/forgotPassword.vue View File

1
 <template>
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
       <div class="row">
4
       <div class="row">
5
         <div class="col">
5
         <div class="col">
6
           <div class="section-header">
6
           <div class="section-header">
15
       </div>
15
       </div>
16
       <div class="row">
16
       <div class="row">
17
         <div class="col-md-6">
17
         <div class="col-md-6">
18
-          <float-label>
18
+          <float-label label="Email" style="width: 100%;">
19
             <input
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
             <div class="invalid-feedback">Valid Email is required!</div>
35
             <div class="invalid-feedback">Valid Email is required!</div>
34
           </float-label>
36
           </float-label>
44
 </template>
46
 </template>
45
 
47
 
46
 <script>
48
 <script>
47
-import { mapActions } from 'vuex';
48
 /* eslint-disable */
49
 /* eslint-disable */
49
-
50
-import alert from "../shared/alert";
50
+import { mapActions } from 'vuex'
51
+import alert from '../shared/alert'
51
 
52
 
52
 export default {
53
 export default {
53
   components: {
54
   components: {
54
-    alert
55
+    alert,
55
   },
56
   },
56
   data() {
57
   data() {
57
     return {
58
     return {
58
-      email: "",
59
+      email: '',
59
       emailLoad: false,
60
       emailLoad: false,
60
-      errorOccurred: "",
61
-      errorMessage: ""
62
-    };
61
+      errorOccurred: '',
62
+      errorMessage: '',
63
+    }
63
   },
64
   },
64
   methods: {
65
   methods: {
65
-    ...mapActions("register", ["forgotPasswordCheck"]),
66
+    ...mapActions('register', ['forgotPasswordCheck']),
66
     checkMail() {
67
     checkMail() {
67
-      if (this.email){
68
-        console.log(this.email);
68
+      if (this.email) {
69
+        console.log(this.email)
69
         this.forgotPasswordCheck(this.email)
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
       } else {
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
 </script>
103
 </script>
98
 
104
 
99
 <style lang="scss" scoped></style>
105
 <style lang="scss" scoped></style>
100
-

+ 7
- 3
src/components/user/loginPage.vue View File

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

+ 336
- 240
src/components/user/registerAgencySection.vue View File

1
 <template>
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
       <div v-if="boolMessage" class="row">
4
       <div v-if="boolMessage" class="row">
5
         <div class="col">
5
         <div class="col">
6
           <alert :text="'Register Success!'" :type="'SUCCESS'" />
6
           <alert :text="'Register Success!'" :type="'SUCCESS'" />
15
       <div class="row my-3">
15
       <div class="row my-3">
16
         <div class="col-sm-12 col-md-6">
16
         <div class="col-sm-12 col-md-6">
17
           <div class="form-group">
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
           </div>
35
           </div>
31
         </div>
36
         </div>
32
         <div class="col-sm-12 col-md-6">
37
         <div class="col-sm-12 col-md-6">
33
           <div class="form-group">
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
           </div>
57
           </div>
47
         </div>
58
         </div>
48
       </div>
59
       </div>
49
       <div class="row my-3">
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
         </div>
87
         </div>
65
-       </div>
66
       </div>
88
       </div>
67
       <h3 class="card-title text-center">Agency Administrator</h3>
89
       <h3 class="card-title text-center">Agency Administrator</h3>
68
       <hr />
90
       <hr />
69
       <div class="row my-3">
91
       <div class="row my-3">
70
         <div class="col-sm-12 col-md-6">
92
         <div class="col-sm-12 col-md-6">
71
           <div class="form-group">
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
           </div>
114
           </div>
85
           <div class="form-group">
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
           </div>
136
           </div>
99
           <div class="form-group">
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
           </div>
155
           </div>
113
         </div>
156
         </div>
114
         <div class="col-sm-12 col-md-6">
157
         <div class="col-sm-12 col-md-6">
115
           <div class="form-group">
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
           </div>
177
           </div>
130
           <div class="form-group">
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
           </div>
189
           </div>
140
         </div>
190
         </div>
141
       </div>
191
       </div>
143
       <div class="row my-3">
193
       <div class="row my-3">
144
         <div class="col-sm-12">
194
         <div class="col-sm-12">
145
           <div class="form-group">
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
           </div>
214
           </div>
159
         </div>
215
         </div>
160
       </div>
216
       </div>
161
       <div class="row my-3">
217
       <div class="row my-3">
162
         <div class="col-sm-12 col-md-6">
218
         <div class="col-sm-12 col-md-6">
163
           <div class="form-group">
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
           </div>
238
           </div>
177
         </div>
239
         </div>
178
         <div class="col">
240
         <div class="col">
179
           <div class="form-group">
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
           </div>
262
           </div>
193
         </div>
263
         </div>
194
       </div>
264
       </div>
195
       <div class="row">
265
       <div class="row">
196
         <div class="col">
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
           <input
272
           <input
201
             name="agencytc"
273
             name="agencytc"
202
             type="checkbox"
274
             type="checkbox"
211
         v-on:click="SubmitData()"
283
         v-on:click="SubmitData()"
212
         type="submit"
284
         type="submit"
213
       >
285
       >
214
-      SUBMIT
286
+        SUBMIT
215
       </button>
287
       </button>
216
       <button
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
       </button>
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
     </div>
304
     </div>
228
   </main>
305
   </main>
229
 </template>
306
 </template>
230
 
307
 
231
 <script>
308
 <script>
232
 /* eslint-disable */
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
 export default {
314
 export default {
238
   components: {
315
   components: {
239
     carousel,
316
     carousel,
240
-    alert
317
+    alert,
241
   },
318
   },
242
   props: {
319
   props: {
243
-    RegisterHeader: { type: String, default: undefined }
320
+    RegisterHeader: { type: String, default: undefined },
244
   },
321
   },
245
-  name: "Agency",
322
+  name: 'Agency',
246
   data() {
323
   data() {
247
     return {
324
     return {
248
-      isPasswordShown: "password",
249
-      selectItems: [{ text: "password", value: 0 }],
325
+      isPasswordShown: 'password',
326
+      selectItems: [{ text: 'password', value: 0 }],
250
       boolMessage: false,
327
       boolMessage: false,
251
       boolValidationError: false,
328
       boolValidationError: false,
252
       showPassword: false,
329
       showPassword: false,
260
       agencyusernameLoad: false,
337
       agencyusernameLoad: false,
261
       agencypasswordLoad: false,
338
       agencypasswordLoad: false,
262
       agencyconfirmLoad: false,
339
       agencyconfirmLoad: false,
263
-      errorOccurred: "",
264
-      errorMessage: ""
265
-    };
340
+      errorOccurred: '',
341
+      errorMessage: '',
342
+    }
266
   },
343
   },
267
   computed: {
344
   computed: {
268
-    ...mapState("register", ["registerAgency"]),
345
+    ...mapState('register', ['registerAgency']),
269
     Header() {
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
   methods: {
352
   methods: {
274
-    ...mapActions("register", ["getAgency", "saveAgency", "updateAgency", "clearAgency"]),
353
+    ...mapActions('register', [
354
+      'getAgency',
355
+      'saveAgency',
356
+      'updateAgency',
357
+      'clearAgency',
358
+    ]),
275
     navigate() {
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
     togglePassword() {
364
     togglePassword() {
281
-      this.showPassword = true;
282
-      this.isPasswordShown = "text";
365
+      this.showPassword = true
366
+      this.isPasswordShown = 'text'
283
     },
367
     },
284
     passwordToggled() {
368
     passwordToggled() {
285
-      this.showPassword = false;
286
-      this.isPasswordShown = "password";
369
+      this.showPassword = false
370
+      this.isPasswordShown = 'password'
287
     },
371
     },
288
     SubmitData() {
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
         this.saveAgency(this.registerAgency)
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
     Close() {
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
       } else {
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
       } else {
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
       //console.log(tfield);
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
         } else {
465
         } else {
370
-          return false;
371
-        } 
466
+          return false
467
+        }
372
       } else {
468
       } else {
373
-        return false;
469
+        return false
374
       }
470
       }
375
-    }
376
-  }
377
-};
471
+    },
472
+  },
473
+}
378
 </script>
474
 </script>
379
 
475
 
380
 <style lang="scss" scoped>
476
 <style lang="scss" scoped>
381
 .btn-disabled {
477
 .btn-disabled {
382
-  font-family: "Muli";
478
+  font-family: 'Muli';
383
   font-size: 15px;
479
   font-size: 15px;
384
   letter-spacing: 1px;
480
   letter-spacing: 1px;
385
   display: inline-block;
481
   display: inline-block;

+ 458
- 0
src/components/user/registerAgentSection.vue View File

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 View File

1
 <template>
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
       <div v-if="boolMessage" class="row">
4
       <div v-if="boolMessage" class="row">
5
         <div class="col">
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
         </div>
10
         </div>
8
       </div>
11
       </div>
9
       <div v-if="boolValidationError" class="row">
12
       <div v-if="boolValidationError" class="row">
13
       </div>
16
       </div>
14
       <h3 class="card-title text-center">User Details</h3>
17
       <h3 class="card-title text-center">User Details</h3>
15
       <div class="row">
18
       <div class="row">
16
-        <div class="col-sm-12 col-md-6 ">
19
+        <div class="col-sm-12 col-md-6">
17
           <div class="form-group">
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
           </div>
37
           </div>
31
           <div class="form-group">
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
           </div>
56
           </div>
45
           <div class="form-group">
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
           </div>
76
           </div>
59
         </div>
77
         </div>
60
 
78
 
61
         <div class="col-sm-12 col-md-6">
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
         </div>
112
         </div>
85
       </div>
113
       </div>
86
       <hr />
114
       <hr />
87
       <div class="row">
115
       <div class="row">
88
         <div class="col-sm-12">
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
         </div>
134
         </div>
102
       </div>
135
       </div>
103
       <div class="row">
136
       <div class="row">
104
         <div class="col-sm-12 col-md-6">
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
         </div>
155
         </div>
118
         <div class="col">
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
         </div>
177
         </div>
132
       </div>
178
       </div>
133
       <div class="row">
179
       <div class="row">
134
         <div class="col">
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
         </div>
187
         </div>
145
       </div>
188
       </div>
146
       <button
189
       <button
156
         data-toggle="modal"
199
         data-toggle="modal"
157
         @click="navigate()"
200
         @click="navigate()"
158
         class="btn-white-border"
201
         class="btn-white-border"
159
-        style="float:right"
202
+        style="float: right;"
160
         type="submit"
203
         type="submit"
161
       >
204
       >
162
         Cancel
205
         Cancel
163
       </button>
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
     </div>
213
     </div>
166
   </main>
214
   </main>
167
 </template>
215
 </template>
168
 
216
 
169
 <script>
217
 <script>
170
 /* eslint-disable */
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
 export default {
223
 export default {
176
   components: {
224
   components: {
177
     carousel,
225
     carousel,
178
-    alert
226
+    alert,
179
   },
227
   },
180
   props: {
228
   props: {
181
-    RegisterHeader: { type: String, default: undefined }
229
+    RegisterHeader: { type: String, default: undefined },
182
   },
230
   },
183
-  name: "PrivateIndividual",
231
+  name: 'PrivateIndividual',
184
   data() {
232
   data() {
185
     return {
233
     return {
186
-      isPasswordShown: "password",
187
-      selectItems: [{ text: "password", value: 0 }],
234
+      isPasswordShown: 'password',
235
+      selectItems: [{ text: 'password', value: 0 }],
188
       showPassword: false,
236
       showPassword: false,
189
       boolMessage: false,
237
       boolMessage: false,
190
       terms: false,
238
       terms: false,
191
       indivUser: {
239
       indivUser: {
192
         name: '',
240
         name: '',
193
         surname: '',
241
         surname: '',
194
-        email:'',
242
+        email: '',
195
         cellNumber: '',
243
         cellNumber: '',
196
         telephone: '',
244
         telephone: '',
197
         username: '',
245
         username: '',
198
         password: '',
246
         password: '',
199
-        confirmPassword: ''
247
+        confirmPassword: '',
200
       },
248
       },
201
       boolValidationError: false,
249
       boolValidationError: false,
202
       nameLoad: false,
250
       nameLoad: false,
207
       usernameLoad: false,
255
       usernameLoad: false,
208
       passwordLoad: false,
256
       passwordLoad: false,
209
       confirmPasswordLoad: false,
257
       confirmPasswordLoad: false,
210
-      errorOccurred: "",
211
-      errorMessage: ""
212
-    };
258
+      errorOccurred: '',
259
+      errorMessage: '',
260
+    }
213
   },
261
   },
214
   computed: {
262
   computed: {
215
-    ...mapState("register", ["registerIndividual"]),
263
+    ...mapState('register', ['registerIndividual']),
216
     Header() {
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
   methods: {
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
     navigate() {
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
     togglePassword() {
282
     togglePassword() {
233
-      this.showPassword = true;
234
-      this.isPasswordShown = "text";
283
+      this.showPassword = true
284
+      this.isPasswordShown = 'text'
235
     },
285
     },
236
     passwordToggled() {
286
     passwordToggled() {
237
-      this.showPassword = false;
238
-      this.isPasswordShown = "password";
287
+      this.showPassword = false
288
+      this.isPasswordShown = 'password'
239
     },
289
     },
240
     SubmitData() {
290
     SubmitData() {
241
-      this.indivUser.acceptedTerms = this.terms;
291
+      this.indivUser.acceptedTerms = this.terms
242
       if (this.validatePage()) {
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
     Close() {
320
     Close() {
271
-      this.$router.push("/user/login");
321
+      this.$router.push('/user/login')
272
     },
322
     },
273
-    validatePage : function(){
323
+    validatePage: function () {
274
       console.log('validatePage')
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
       } else {
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
       } else {
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
         } else {
372
         } else {
313
-          return false;
314
-        } 
373
+          return false
374
+        }
315
       } else {
375
       } else {
316
-        return false;
376
+        return false
317
       }
377
       }
318
-    }
319
-  }
320
-};
378
+    },
379
+  },
380
+}
321
 </script>
381
 </script>
322
 
382
 
323
 <style lang="scss" scoped>
383
 <style lang="scss" scoped>
324
 .btn-disabled {
384
 .btn-disabled {
325
-  font-family: "Muli";
385
+  font-family: 'Muli';
326
   font-size: 15px;
386
   font-size: 15px;
327
   letter-spacing: 1px;
387
   letter-spacing: 1px;
328
   display: inline-block;
388
   display: inline-block;

+ 1
- 1
src/router/index.js View File

53
 import userManagementPage from '../components/admin/status/userManagementPage.vue'
53
 import userManagementPage from '../components/admin/status/userManagementPage.vue'
54
 import changeLogPage from '../components/admin/status/changeLogPage.vue'
54
 import changeLogPage from '../components/admin/status/changeLogPage.vue'
55
 import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue'
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
 import agencyManagementPage from '../components/admin/status/agencyUserManagementPage.vue'
57
 import agencyManagementPage from '../components/admin/status/agencyUserManagementPage.vue'
58
 import Fees from '../components/admin/fees/feesPage.vue'
58
 import Fees from '../components/admin/fees/feesPage.vue'
59
 import PasswordOnLogin from '../components/user/firstLoginPasswordUpdate.vue'
59
 import PasswordOnLogin from '../components/user/firstLoginPasswordUpdate.vue'

+ 3
- 1
src/store/modules/timeshare/timeshare.js View File

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

+ 13
- 2
src/store/modules/user/register.js View File

34
                 password: '',
34
                 password: '',
35
                 confirm: '',
35
                 confirm: '',
36
                 role: '',
36
                 role: '',
37
+                acceptedTerms: false,
37
             },
38
             },
38
         },
39
         },
39
     },
40
     },
102
                     username: '',
103
                     username: '',
103
                     password: '',
104
                     password: '',
104
                     confirm: '',
105
                     confirm: '',
106
+                    role: '',
107
+                    acceptedTerms: false,
105
                 },
108
                 },
106
             }
109
             }
107
         },
110
         },
141
         getAgents({ commit }) {
144
         getAgents({ commit }) {
142
             axios
145
             axios
143
                 .get('/api/agent')
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
                 .catch(console.error)
152
                 .catch(console.error)
146
         },
153
         },
147
         async getAgentById({ commit }, userId) {
154
         async getAgentById({ commit }, userId) {
158
         getAgencies({ commit }) {
165
         getAgencies({ commit }) {
159
             axios
166
             axios
160
                 .get('/api/agency')
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
                 .catch(console.error)
173
                 .catch(console.error)
163
         },
174
         },
164
         getAgency({ commit }, id) {
175
         getAgency({ commit }, id) {

Loading…
Cancel
Save