Browse Source

Merge

master
Kobus 5 years ago
parent
commit
2f9affa5e5
42 changed files with 844 additions and 421 deletions
  1. BIN
      public/img/logos/UVProp.png
  2. BIN
      public/img/privacy.jpg
  3. 13
    0
      src/App.vue
  4. 9
    0
      src/assets/Log.js
  5. 4
    7
      src/components/about/aboutTimeshare.vue
  6. 9
    7
      src/components/about/aboutUsPage.vue
  7. 17
    8
      src/components/admin/property/propertyTypeList.vue
  8. 17
    8
      src/components/admin/property/userDefinedGroupsPage.vue
  9. 18
    8
      src/components/admin/status/changeLogPage.vue
  10. 16
    8
      src/components/admin/status/statusPage.vue
  11. 18
    8
      src/components/admin/status/tenderWeekAdminPage.vue
  12. 16
    8
      src/components/admin/status/timeshareAdminPage.vue
  13. 16
    8
      src/components/admin/status/userManagementPage.vue
  14. 16
    8
      src/components/admin/unitConfiguration/unitConfigurationPage.vue
  15. 2
    2
      src/components/home/propertySection.vue
  16. 24
    4
      src/components/home/testimonialSection.vue
  17. 3
    6
      src/components/misc/contactUs.vue
  18. 34
    29
      src/components/misc/privacyPolicyPage.vue
  19. 22
    9
      src/components/property/propertyList.vue
  20. 4
    2
      src/components/property/propertyPage.vue
  21. 165
    83
      src/components/property/propertySearchFields.vue
  22. 93
    73
      src/components/property/propertySearchPage.vue
  23. 32
    10
      src/components/property/propertyeditPage.vue
  24. 2
    2
      src/components/shared/footerSection.vue
  25. 30
    2
      src/components/shared/navBar.vue
  26. 22
    46
      src/components/shared/searchTab.vue
  27. 4
    4
      src/components/timeshare/buy/buyPage.vue
  28. 22
    3
      src/components/timeshare/buy/weekListPage.vue
  29. 3
    6
      src/components/timeshare/faqPage.vue
  30. 3
    3
      src/components/timeshare/resort/resortPage.vue
  31. 3
    3
      src/components/timeshare/resort/unitPage.vue
  32. 3
    6
      src/components/timeshare/sell/sellPage.vue
  33. 19
    0
      src/components/user/logOut.vue
  34. 14
    10
      src/components/user/loginPage.vue
  35. 5
    0
      src/components/user/secure.vue
  36. 19
    0
      src/main.js
  37. 2
    0
      src/router/index.js
  38. 4
    0
      src/store/index.js
  39. 1
    32
      src/store/modules/property/property.js
  40. 65
    0
      src/store/modules/property/propertySearch.js
  41. 67
    0
      src/store/modules/user/authentication.js
  42. 8
    8
      src/store/modules/user/register.js

BIN
public/img/logos/UVProp.png View File


BIN
public/img/privacy.jpg View File


+ 13
- 0
src/App.vue View File

1
 <template>
1
 <template>
2
   <div id="app">
2
   <div id="app">
3
+    <a href="#" class="back-to-top">
4
+      <i class="fa fa-chevron-up"></i>
5
+    </a>
3
     <div class="click-closed"></div>
6
     <div class="click-closed"></div>
4
     <SearchTab />
7
     <SearchTab />
5
     <NavBar @routerGoTo="routerGoTo" />
8
     <NavBar @routerGoTo="routerGoTo" />
21
     NavBar,
24
     NavBar,
22
     FooterSection,
25
     FooterSection,
23
   },
26
   },
27
+  // created() {
28
+  //   this.$http.interceptors.response.use(undefined, (err) => {
29
+  //     return new Promise(function(resolve, reject) {
30
+  //       if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
31
+  //         this.$store.dispatch(logout);
32
+  //       }
33
+  //       throw err;
34
+  //     });
35
+  //   });
36
+  // },
24
   methods: {
37
   methods: {
25
     routerGoTo(goTo) {
38
     routerGoTo(goTo) {
26
       this.$router.push(goTo);
39
       this.$router.push(goTo);

+ 9
- 0
src/assets/Log.js View File

1
+const items = {
2
+  isLoggedIn() {
3
+    return localStorage.getItem('token') !== undefined;
4
+  },
5
+  getUser() {
6
+    return localStorage.getItem('User');
7
+  },
8
+};
9
+export default items;

+ 4
- 7
src/components/about/aboutTimeshare.vue View File

9
               src="img/timeshare2.jpg"
9
               src="img/timeshare2.jpg"
10
               alt="About Timeshare"
10
               alt="About Timeshare"
11
               class="img-fluid"
11
               class="img-fluid"
12
-              style="width:800px;height:400px;"
12
+              style="width:800px;height:400px; border-radius:10px"
13
             />
13
             />
14
           </div>
14
           </div>
15
-          <div class="sinse-box">
16
-            <h3 class="sinse-title">
17
-              Timeshare Resales
18
-              <span></span>
19
-            </h3>
15
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
16
+            <h3 class="sinse-title">Timeshare Resales</h3>
20
           </div>
17
           </div>
21
         </div>
18
         </div>
22
         <div class="col-md-12 section-t8">
19
         <div class="col-md-12 section-t8">
65
                   src="img/timeshare.jpg"
62
                   src="img/timeshare.jpg"
66
                   alt
63
                   alt
67
                   class="img-fluid"
64
                   class="img-fluid"
68
-                  style="width:500px;height:330px;"
65
+                  style="width:500px;height:330px; border-radius:10px"
69
                 />
66
                 />
70
               </p>
67
               </p>
71
             </div>
68
             </div>

+ 9
- 7
src/components/about/aboutUsPage.vue View File

9
               src="img/slide-about-1.jpg"
9
               src="img/slide-about-1.jpg"
10
               alt
10
               alt
11
               class="img-fluid"
11
               class="img-fluid"
12
-              style="width:800px;height:400px;"
12
+              style="width:800px;height:400px; border-radius:10px"
13
             />
13
             />
14
           </div>
14
           </div>
15
-          <div class="sinse-box">
16
-            <h3 class="sinse-title">
17
-              About Us
18
-              <span></span>
19
-            </h3>
15
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
16
+            <h3 class="sinse-title">About Us</h3>
20
           </div>
17
           </div>
21
         </div>
18
         </div>
22
         <div class="col-md-12 section-t8">
19
         <div class="col-md-12 section-t8">
69
                 <strong>Uni-Vate is able to assist you.</strong>
66
                 <strong>Uni-Vate is able to assist you.</strong>
70
               </p>
67
               </p>
71
               <p>
68
               <p>
72
-                <img src="img/plan2.jpg" alt class="img-fluid" style="width:450px;height:200px;" />
69
+                <img
70
+                  src="img/plan2.jpg"
71
+                  alt
72
+                  class="img-fluid"
73
+                  style="width:450px;height:200px; border-radius:10px"
74
+                />
73
               </p>
75
               </p>
74
             </div>
76
             </div>
75
           </div>
77
           </div>

+ 17
- 8
src/components/admin/property/propertyTypeList.vue View File

2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
   <div>
3
   <div>
4
     <div class="container">
4
     <div class="container">
5
-      <section class="intro-single">
6
-        <div class="container">
7
-          <div class="row">
8
-            <div class="col-md-12 col-lg-8">
9
-              <div class="title-single-box">
10
-                <h1 class="title-single">Property Types</h1>
11
-              </div>
5
+      <!-- <section class="intro-single"> -->
6
+      <div class="container">
7
+        <br />
8
+        <br />
9
+        <br />
10
+        <br />
11
+        <div class="row">
12
+          <div class="col-md-12 col-lg-8">
13
+            <!-- <div class="title-single-box"> -->
14
+            <!-- <h1 class="title-single">Property Types</h1> -->
15
+            <!-- </div> -->
16
+            <div class="title-box-d">
17
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Property Types</h1>
12
             </div>
18
             </div>
19
+            <br />
13
           </div>
20
           </div>
14
         </div>
21
         </div>
15
-      </section>
22
+      </div>
23
+      <!-- </section> -->
16
     </div>
24
     </div>
17
     <div class="container">
25
     <div class="container">
18
       <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
26
       <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
52
         </tbody>
60
         </tbody>
53
       </table>
61
       </table>
54
     </div>
62
     </div>
63
+    <br />
55
   </div>
64
   </div>
56
 </template>
65
 </template>
57
 
66
 

+ 17
- 8
src/components/admin/property/userDefinedGroupsPage.vue View File

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
   <div>
3
   <div>
4
-    <section class="intro-single">
5
-      <div class="container">
6
-        <div class="row">
7
-          <div class="col-md-12 col-lg-8">
8
-            <div class="title-single-box">
9
-              <h2 class="title-single">User Defined Groups List</h2>
10
-            </div>
4
+    <!-- <section class="intro-single"> -->
5
+    <div class="container">
6
+      <br />
7
+      <br />
8
+      <br />
9
+      <br />
10
+      <div class="row">
11
+        <div class="col-md-12 col-lg-8">
12
+          <!-- <div class="title-single-box"> -->
13
+          <!-- <h2 class="title-single">User Defined Groups List</h2> -->
14
+          <!-- </div> -->
15
+          <div class="title-box-d">
16
+            <h1 class="title-d" style="text-align:left; font-size: 250%">User Defined Groups List</h1>
11
           </div>
17
           </div>
18
+          <br />
12
         </div>
19
         </div>
13
       </div>
20
       </div>
14
-    </section>
21
+    </div>
22
+    <!-- </section> -->
15
     <div class="container">
23
     <div class="container">
16
       <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
24
       <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
17
       <table class="table table-bordered">
25
       <table class="table table-bordered">
51
         </tbody>
59
         </tbody>
52
       </table>
60
       </table>
53
     </div>
61
     </div>
62
+    <br />
54
   </div>
63
   </div>
55
 </template>
64
 </template>
56
 <script>
65
 <script>

+ 18
- 8
src/components/admin/status/changeLogPage.vue View File

1
 <template>
1
 <template>
2
-  <section class="intro-single">
3
-    <div class="container">
4
-      <div class="row">
5
-        <div class="col-md-12 col-lg-8">
6
-          <div class="title-single-box">
7
-            <h1 class="title-single" style="text-align:left;">Change Log</h1>
8
-          </div>
2
+  <!-- <section class="intro-single"> -->
3
+  <div class="container">
4
+    <br />
5
+    <br />
6
+    <br />
7
+    <br />
8
+    <div class="row">
9
+      <div class="col-md-12 col-lg-8">
10
+        <!-- <div class="title-single-box"> -->
11
+        <!-- <h1 class="title-single" style="text-align:left;">Change Log</h1> -->
12
+        <!-- </div> -->
13
+        <div class="title-box-d">
14
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Change Log</h1>
9
         </div>
15
         </div>
16
+        <br />
10
       </div>
17
       </div>
11
     </div>
18
     </div>
12
     <div id="table" class="col-xs-12 table-responsive">
19
     <div id="table" class="col-xs-12 table-responsive">
13
       <datatable :columns="columns" :data="rows"></datatable>
20
       <datatable :columns="columns" :data="rows"></datatable>
14
     </div>
21
     </div>
15
-  </section>
22
+    <br />
23
+  </div>
24
+
25
+  <!-- </section> -->
16
 </template>
26
 </template>
17
 <script>
27
 <script>
18
 import { mapState, mapActions } from 'vuex';
28
 import { mapState, mapActions } from 'vuex';

+ 16
- 8
src/components/admin/status/statusPage.vue View File

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <section class="intro-single">
4
-      <div class="container">
5
-        <div class="row">
6
-          <div class="col-md-12 col-lg-8">
7
-            <div class="title-single-box">
8
-              <h2 class="title-single">Status List</h2>
9
-            </div>
3
+    <!-- <section class="intro-single"> -->
4
+    <div class="container">
5
+      <br />
6
+      <br />
7
+      <br />
8
+      <br />
9
+      <div class="row">
10
+        <div class="col-md-12 col-lg-8">
11
+          <!-- <div class="title-single-box"> -->
12
+          <!-- <h2 class="title-single">Status List</h2> -->
13
+          <!-- </div> -->
14
+          <div class="title-box-d">
15
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Status List</h1>
10
           </div>
16
           </div>
17
+          <br />
11
         </div>
18
         </div>
12
       </div>
19
       </div>
13
-    </section>
20
+    </div>
21
+    <!-- </section> -->
14
     <div class="container">
22
     <div class="container">
15
       <table class="table table-bordered">
23
       <table class="table table-bordered">
16
         <thead>
24
         <thead>

+ 18
- 8
src/components/admin/status/tenderWeekAdminPage.vue View File

1
 <template>
1
 <template>
2
-  <section class="intro-single">
3
-    <div class="container">
4
-      <div class="row">
5
-        <div class="col-md-12 col-lg-8">
6
-          <div class="title-single-box">
7
-            <h1 class="title-single" style="text-align:left;">Tender Week Admin</h1>
8
-          </div>
2
+  <!-- <section class="intro-single"> -->
3
+  <div class="container">
4
+    <br />
5
+    <br />
6
+    <br />
7
+    <br />
8
+    <div class="row">
9
+      <div class="col-md-12 col-lg-8">
10
+        <!-- <div class="title-single-box"> -->
11
+        <!-- <h1 class="title-single" style="text-align:left;">Tender Week Admin</h1> -->
12
+        <!-- </div> -->
13
+        <div class="title-box-d">
14
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Tender Week Admin</h1>
9
         </div>
15
         </div>
16
+        <br />
10
       </div>
17
       </div>
11
     </div>
18
     </div>
12
     <div id="table" class="col-xs-12 table-responsive">
19
     <div id="table" class="col-xs-12 table-responsive">
13
       <datatable :columns="columns" :data="rows"></datatable>
20
       <datatable :columns="columns" :data="rows"></datatable>
14
     </div>
21
     </div>
15
-  </section>
22
+    <br />
23
+  </div>
24
+
25
+  <!-- </section> -->
16
 </template>
26
 </template>
17
 <script>
27
 <script>
18
 import { mapState, mapActions } from 'vuex';
28
 import { mapState, mapActions } from 'vuex';

+ 16
- 8
src/components/admin/status/timeshareAdminPage.vue View File

1
 <template>
1
 <template>
2
-  <section class="intro-single">
3
-    <div class="container">
4
-      <div class="row">
5
-        <div class="col-md-12 col-lg-8">
6
-          <div class="title-single-box">
7
-            <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1>
8
-          </div>
2
+  <!-- <section class="intro-single"> -->
3
+  <div class="container">
4
+    <br />
5
+    <br />
6
+    <br />
7
+    <br />
8
+    <div class="row">
9
+      <div class="col-md-12 col-lg-8">
10
+        <!-- <div class="title-single-box"> -->
11
+        <!-- <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1> -->
12
+        <!-- </div> -->
13
+        <div class="title-box-d">
14
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Timeshare Admin</h1>
9
         </div>
15
         </div>
16
+        <br />
10
       </div>
17
       </div>
11
     </div>
18
     </div>
12
     <div id="table" class="col-xs-12 table-responsive">
19
     <div id="table" class="col-xs-12 table-responsive">
13
       <datatable :columns="columns" :data="rows"></datatable>
20
       <datatable :columns="columns" :data="rows"></datatable>
14
     </div>
21
     </div>
15
-  </section>
22
+  </div>
23
+  <!-- </section> -->
16
 </template>
24
 </template>
17
 <script>
25
 <script>
18
 import { mapState, mapActions } from 'vuex';
26
 import { mapState, mapActions } from 'vuex';

+ 16
- 8
src/components/admin/status/userManagementPage.vue View File

1
 <template>
1
 <template>
2
-  <section class="intro-single">
3
-    <div class="container">
4
-      <div class="row">
5
-        <div class="col-md-12 col-lg-8">
6
-          <div class="title-single-box">
7
-            <h1 class="title-single" style="text-align:left;">User Management</h1>
8
-          </div>
2
+  <!-- <section class="intro-single"> -->
3
+  <div class="container">
4
+    <br />
5
+    <br />
6
+    <br />
7
+    <br />
8
+    <div class="row">
9
+      <div class="col-md-12 col-lg-8">
10
+        <!-- <div class="title-single-box"> -->
11
+        <!-- <h1 class="title-single" style="text-align:left;">User Management</h1> -->
12
+        <!-- </div> -->
13
+        <div class="title-box-d">
14
+          <h1 class="title-d" style="text-align:left; font-size: 250%">User Management</h1>
9
         </div>
15
         </div>
16
+        <br />
10
       </div>
17
       </div>
11
     </div>
18
     </div>
12
     <div id="table" class="col-xs-12 table-responsive">
19
     <div id="table" class="col-xs-12 table-responsive">
13
       <datatable :columns="columns" :data="rows"></datatable>
20
       <datatable :columns="columns" :data="rows"></datatable>
14
     </div>
21
     </div>
15
-  </section>
22
+  </div>
23
+  <!-- </section> -->
16
 </template>
24
 </template>
17
 <script>
25
 <script>
18
 import { mapState, mapActions } from 'vuex';
26
 import { mapState, mapActions } from 'vuex';

+ 16
- 8
src/components/admin/unitConfiguration/unitConfigurationPage.vue View File

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <section class="intro-single">
4
-      <div class="container">
5
-        <div class="row">
6
-          <div class="col-md-12 col-lg-8">
7
-            <div class="title-single-box">
8
-              <h2 class="title-single">Unit Configuration List</h2>
9
-            </div>
3
+    <!-- <section class="intro-single"> -->
4
+    <div class="container">
5
+      <br />
6
+      <br />
7
+      <br />
8
+      <br />
9
+      <div class="row">
10
+        <div class="col-md-12 col-lg-8">
11
+          <!-- <div class="title-single-box"> -->
12
+          <!-- <h2 class="title-single">Unit Configuration List</h2> -->
13
+          <!-- </div> -->
14
+          <div class="title-box-d">
15
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Unit Configuration List</h1>
10
           </div>
16
           </div>
17
+          <br />
11
         </div>
18
         </div>
12
       </div>
19
       </div>
13
-    </section>
20
+    </div>
21
+    <!-- </section> -->
14
     <div class="container">
22
     <div class="container">
15
       <table class="table table-bordered">
23
       <table class="table table-bordered">
16
         <thead>
24
         <thead>

+ 2
- 2
src/components/home/propertySection.vue View File

30
     propertyCard,
30
     propertyCard,
31
   },
31
   },
32
   computed: {
32
   computed: {
33
-    ...mapState('property', ['latestProperties']),
33
+    ...mapState('propertySearch', ['latestProperties']),
34
   },
34
   },
35
   methods: {
35
   methods: {
36
-    ...mapActions('property', ['searchLatestProperties']),
36
+    ...mapActions('propertySearch', ['searchLatestProperties']),
37
   },
37
   },
38
   mounted() {
38
   mounted() {
39
     this.searchLatestProperties();
39
     this.searchLatestProperties();

+ 24
- 4
src/components/home/testimonialSection.vue View File

19
                 <div class="col-sm-12 col-md-6">
19
                 <div class="col-sm-12 col-md-6">
20
                   <div class="testimonial-img">
20
                   <div class="testimonial-img">
21
                     <router-link to="/resort/csp">
21
                     <router-link to="/resort/csp">
22
-                      <img src="img/testimonial-1.png" alt class="CrystalSprings" />
22
+                      <img
23
+                        src="img/testimonial-1.png"
24
+                        alt
25
+                        class="CrystalSprings"
26
+                        style="border-radius:10px"
27
+                      />
23
                     </router-link>
28
                     </router-link>
24
                   </div>
29
                   </div>
25
                 </div>
30
                 </div>
51
                 <div class="col-sm-12 col-md-6">
56
                 <div class="col-sm-12 col-md-6">
52
                   <div class="testimonial-img">
57
                   <div class="testimonial-img">
53
                     <router-link to="/resort/nl">
58
                     <router-link to="/resort/nl">
54
-                      <img src="img/testimonial-2.png" alt class="Ngwenya Lodge" />
59
+                      <img
60
+                        src="img/testimonial-2.png"
61
+                        alt
62
+                        class="Ngwenya Lodge"
63
+                        style="border-radius:10px"
64
+                      />
55
                     </router-link>
65
                     </router-link>
56
                   </div>
66
                   </div>
57
                 </div>
67
                 </div>
81
                 <div class="col-sm-12 col-md-6">
91
                 <div class="col-sm-12 col-md-6">
82
                   <div class="testimonial-img">
92
                   <div class="testimonial-img">
83
                     <router-link to="/resort/mnr">
93
                     <router-link to="/resort/mnr">
84
-                      <img src="img/testimonial-3.2.jpg" alt class="Mabalingwe Nature Reserve" />
94
+                      <img
95
+                        src="img/testimonial-3.2.jpg"
96
+                        alt
97
+                        class="Mabalingwe Nature Reserve"
98
+                        style="border-radius:10px"
99
+                      />
85
                     </router-link>
100
                     </router-link>
86
                   </div>
101
                   </div>
87
                 </div>
102
                 </div>
111
                 <div class="col-sm-12 col-md-6">
126
                 <div class="col-sm-12 col-md-6">
112
                   <div class="testimonial-img">
127
                   <div class="testimonial-img">
113
                     <router-link to="/resort/le">
128
                     <router-link to="/resort/le">
114
-                      <img src="img/testimonial-4.png" alt class="Little Eden" />
129
+                      <img
130
+                        src="img/testimonial-4.png"
131
+                        alt
132
+                        class="Little Eden"
133
+                        style="border-radius:10px"
134
+                      />
115
                     </router-link>
135
                     </router-link>
116
                   </div>
136
                   </div>
117
                 </div>
137
                 </div>

+ 3
- 6
src/components/misc/contactUs.vue View File

8
             src="img/contact-us.jpg"
8
             src="img/contact-us.jpg"
9
             alt="Frequently Asked Questions"
9
             alt="Frequently Asked Questions"
10
             class="img-fluid"
10
             class="img-fluid"
11
-            style="width:800px;height:400px;"
11
+            style="width:800px;height:400px; border-radius:10px"
12
           />
12
           />
13
         </div>
13
         </div>
14
-        <div class="sinse-box">
15
-          <h3 class="sinse-title">
16
-            Contact Us
17
-            <span></span>
18
-          </h3>
14
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
15
+          <h3 class="sinse-title">Contact Us</h3>
19
         </div>
16
         </div>
20
       </div>
17
       </div>
21
       <div class="container col-md-10">
18
       <div class="container col-md-10">

+ 34
- 29
src/components/misc/privacyPolicyPage.vue View File

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
   <div class="container">
3
   <div class="container">
4
-    <section class="intro-single">
5
-      <div class="container">
6
-        <div class="row">
7
-          <div class="col-md-12 col-lg-8">
8
-            <div class="title-single-box">
9
-              <h1 class="title-single" style="text-align:left;">Privacy Policy</h1>
10
-            </div>
11
-          </div>
4
+    <div class="row">
5
+      <div class="col-sm-12">
6
+        <div class="about-img-box">
7
+          <img
8
+            src="img/privacy.jpg"
9
+            alt="Privacy Policy"
10
+            class="img-fluid"
11
+            style="width:800px;height:400px; border-radius:10px"
12
+          />
13
+        </div>
14
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
15
+          <h3 class="sinse-title">Privacy Policy</h3>
12
         </div>
16
         </div>
13
       </div>
17
       </div>
14
-    </section>
15
-    <div class="col-md-12 text-left">
16
-      <h3>Privacy</h3>
17
-      <p>We respect your privacy. This Privacy Policy governs the manner in which we will treat your personal information collected when using our website.</p>
18
+      <div class="col-md-12 text-left">
19
+        <br />
20
+        <h3>Privacy</h3>
21
+        <p>We respect your privacy. This Privacy Policy governs the manner in which we will treat your personal information collected when using our website.</p>
18
 
22
 
19
-      <h3>How do we collect your personal information?</h3>
20
-      <p>Your personal information may be collected while using this website: when you contact us, when you complete an application form, when you check-in at your destination or when you make use of the services of one of our affiliated business partners. Personal information includes any information by which you can be identified and which relates to you as an identifiable individual, such as: your name, physical and postal addresses, email address, sex, age and internet address from the domain from which you are visiting.</p>
23
+        <h3>How do we collect your personal information?</h3>
24
+        <p>Your personal information may be collected while using this website: when you contact us, when you complete an application form, when you check-in at your destination or when you make use of the services of one of our affiliated business partners. Personal information includes any information by which you can be identified and which relates to you as an identifiable individual, such as: your name, physical and postal addresses, email address, sex, age and internet address from the domain from which you are visiting.</p>
21
 
25
 
22
-      <h3>User of your personal information</h3>
23
-      <p>We need to process your personal information when you make use of our service. We use your personal information in the ordinary course of our business and to send you marketing material relating to our service offering. You can unsubscribe at any time and we will thereafter no longer use your personal information. We will not disclose your personal information to third parties unless justifiable in terms of an agreement between us.</p>
26
+        <h3>User of your personal information</h3>
27
+        <p>We need to process your personal information when you make use of our service. We use your personal information in the ordinary course of our business and to send you marketing material relating to our service offering. You can unsubscribe at any time and we will thereafter no longer use your personal information. We will not disclose your personal information to third parties unless justifiable in terms of an agreement between us.</p>
24
 
28
 
25
-      <h3>Access to and correction of personal information</h3>
26
-      <p>You may access your personal information that we hold by sending an email to: info@univateproperties.co.za</p>
27
-      <p>In the event that you want to update or correct your personal information held by us, you can send an email to: info@univateproperties.co.za</p>
29
+        <h3>Access to and correction of personal information</h3>
30
+        <p>You may access your personal information that we hold by sending an email to: info@univateproperties.co.za</p>
31
+        <p>In the event that you want to update or correct your personal information held by us, you can send an email to: info@univateproperties.co.za</p>
28
 
32
 
29
-      <h3>Protection of your personal information</h3>
30
-      <p>We take reasonable steps and measures to keep your information secure from loss, misuse or unauthorised alteration. Our database has built-in safeguards to ensure the privacy and confidentiality of your information. We do not have control over the websites of affiliated parties or sites linked into from this site and you must therefore refer to the privacy policies of any such parties to see how they protect your personal information.</p>
33
+        <h3>Protection of your personal information</h3>
34
+        <p>We take reasonable steps and measures to keep your information secure from loss, misuse or unauthorised alteration. Our database has built-in safeguards to ensure the privacy and confidentiality of your information. We do not have control over the websites of affiliated parties or sites linked into from this site and you must therefore refer to the privacy policies of any such parties to see how they protect your personal information.</p>
31
 
35
 
32
-      <h3>Cookies</h3>
33
-      <p>We may use cookies. Cookies are programmes that we transfer to your computer's hard drive to personalise your experience on this website. In this way, the next time you visit, we will know who you are and that you have visited this website before. This will enable us to enhance your browsing experience. You can set your browser to notify you if cookies are to be transferred or to reject cookies but this may prevent your use of some of the web pages.</p>
36
+        <h3>Cookies</h3>
37
+        <p>We may use cookies. Cookies are programmes that we transfer to your computer's hard drive to personalise your experience on this website. In this way, the next time you visit, we will know who you are and that you have visited this website before. This will enable us to enhance your browsing experience. You can set your browser to notify you if cookies are to be transferred or to reject cookies but this may prevent your use of some of the web pages.</p>
34
 
38
 
35
-      <h3>Email Monitoring</h3>
36
-      <p>We provide email addresses on the website which enable you to contact us. Forms that you complete via this website will also be transmitted via email. In order to check for viruses and to monitor service we reserve the right to monitor and inspect all material and information transmitted over our system.</p>
39
+        <h3>Email Monitoring</h3>
40
+        <p>We provide email addresses on the website which enable you to contact us. Forms that you complete via this website will also be transmitted via email. In order to check for viruses and to monitor service we reserve the right to monitor and inspect all material and information transmitted over our system.</p>
37
 
41
 
38
-      <h3>Changes to this privacy policy</h3>
39
-      <p>We reserve the right, in our sole discretion, to amend this Privacy Policy from time to time. You agree to review the Privacy Policy whenever you visit this website for any such amendments. The amended version of the Privacy Policy shall supersede and replace all previous versions thereof.</p>
42
+        <h3>Changes to this privacy policy</h3>
43
+        <p>We reserve the right, in our sole discretion, to amend this Privacy Policy from time to time. You agree to review the Privacy Policy whenever you visit this website for any such amendments. The amended version of the Privacy Policy shall supersede and replace all previous versions thereof.</p>
40
 
44
 
41
-      <h3>Which laws apply to your dealings with us?</h3>
42
-      <p>This policy will be governed and interpreted in accordance with the laws of South Africa. To the extent that a court has jurisdiction over any dispute which may arise out of or in connection with this Privacy Policy, we both submit to the jurisdiction of the South African Courts.</p>
45
+        <h3>Which laws apply to your dealings with us?</h3>
46
+        <p>This policy will be governed and interpreted in accordance with the laws of South Africa. To the extent that a court has jurisdiction over any dispute which may arise out of or in connection with this Privacy Policy, we both submit to the jurisdiction of the South African Courts.</p>
47
+      </div>
43
     </div>
48
     </div>
44
   </div>
49
   </div>
45
 </template>
50
 </template>

+ 22
- 9
src/components/property/propertyList.vue View File

2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
   <div>
3
   <div>
4
     <div class="container">
4
     <div class="container">
5
-      <section class="intro-single">
6
-        <div class="container">
7
-          <div class="row">
8
-            <div class="col-md-12 col-lg-8">
9
-              <div class="title-single-box">
10
-                <h1 v-if="user !== 'All'" class="title-single">My {{ propertyType }} Properties</h1>
11
-                <h1 v-else class="title-single">All {{ propertyType }} Properties</h1>
12
-              </div>
5
+      <!-- <section class="intro-single"> -->
6
+      <div class="container">
7
+        <br />
8
+        <br />
9
+        <br />
10
+        <br />
11
+        <div class="row">
12
+          <div class="col-md-12 col-lg-8">
13
+            <div class="title-box-d">
14
+              <h1
15
+                v-if="user !== 'All'"
16
+                class="title-d"
17
+                style="text-align:left; font-size: 250%"
18
+              >My {{ propertyType }} Properties</h1>
19
+              <h1
20
+                v-else
21
+                class="title-d"
22
+                style="text-align:left; font-size: 250%"
23
+              >All {{ propertyType }} Properties</h1>
13
             </div>
24
             </div>
14
           </div>
25
           </div>
15
         </div>
26
         </div>
16
-      </section>
27
+      </div>
28
+      <!-- </section> -->
17
     </div>
29
     </div>
18
     <div class="container">
30
     <div class="container">
19
       <table class="table table-bordered">
31
       <table class="table table-bordered">
54
         </tbody>
66
         </tbody>
55
       </table>
67
       </table>
56
     </div>
68
     </div>
69
+    <br />
57
   </div>
70
   </div>
58
 </template>
71
 </template>
59
 
72
 

+ 4
- 2
src/components/property/propertyPage.vue View File

93
                       </li>
93
                       </li>
94
                       <li class="d-flex justify-content-between">
94
                       <li class="d-flex justify-content-between">
95
                         <strong>Status:</strong>
95
                         <strong>Status:</strong>
96
-                        <span>{{ property.status.code }} - {{ property.status.description }}</span>
96
+                        <span
97
+                          v-if="property.status"
98
+                        >{{ property.status.code }} - {{ property.status.description }}</span>
97
                       </li>
99
                       </li>
98
                       <li class="d-flex justify-content-between">
100
                       <li class="d-flex justify-content-between">
99
                         <strong>Address:</strong>
101
                         <strong>Address:</strong>
100
                         <span
102
                         <span
103
+                          style="text-align:right"
101
                           v-if="property"
104
                           v-if="property"
102
                           v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb ? property.suburb.description : '') + formatAddress(property.city ? property.city.description : '') + formatAddress(property.province ? property.province.description : '') "
105
                           v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb ? property.suburb.description : '') + formatAddress(property.city ? property.city.description : '') + formatAddress(property.province ? property.province.description : '') "
103
                         ></span>
106
                         ></span>
111
                     class="btn btn-b-n"
114
                     class="btn btn-b-n"
112
                     data-toggle="modal"
115
                     data-toggle="modal"
113
                     data-target="#myModal"
116
                     data-target="#myModal"
114
-                    :disabled="property.status.code === 'E1'"
115
                   >Make an Offer</button>
117
                   >Make an Offer</button>
116
                   <div id="myModal" class="modal fade" role="dialog">
118
                   <div id="myModal" class="modal fade" role="dialog">
117
                     <div class="modal-dialog modal-lg">
119
                     <div class="modal-dialog modal-lg">

+ 165
- 83
src/components/property/propertySearchFields.vue View File

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <div class="col-md-6 mb-2">
3
+    <div class="container text-left">
4
       <div class="form-group">
4
       <div class="form-group">
5
         <label for="city">For:</label>
5
         <label for="city">For:</label>
6
-        <select
7
-          class="form-control form-control-lg form-control-a"
8
-          id="forSelector"
9
-          v-model="selectedType"
10
-          @change="TypeSelected"
11
-        >
12
-          <option value="Sale">Sale</option>
13
-          <option value="Rent">Rent</option>
14
-        </select>
6
+        <div class="input-group mb-3">
7
+          <div class="input-group-prepend">
8
+            <span class="input-group-text" style="color: #60CBEB">
9
+              <b>F</b>
10
+            </span>
11
+          </div>
12
+          <select
13
+            class="form-control form-control-lg form-control-a"
14
+            id="forSelector"
15
+            v-model="propertySearch.salesType"
16
+            @change="salesTypeSelected"
17
+          >
18
+            <option value="Sale">Sale</option>
19
+            <option value="Rent">Rent</option>
20
+          </select>
21
+        </div>
15
       </div>
22
       </div>
16
       <div class="form-group" v-if="propertyType === 'Residential'">
23
       <div class="form-group" v-if="propertyType === 'Residential'">
17
-        <label for="city">Property Type</label>
18
-        <select
19
-          class="form-control form-control-lg form-control-a"
20
-          id="forSelector"
21
-          v-model="selectedPropertyTypeRes"
22
-          @change="PropertyTypeSelected"
23
-        >
24
-          <option>All</option>
25
-          <option
26
-            v-for="(propertyType, i) in propertyTypesRes"
27
-            :key="i"
28
-          >{{ propertyType.description }}</option>
29
-        </select>
24
+        <label for="propertytype">Property Type</label>
25
+        <div class="input-group mb-3">
26
+          <div class="input-group-prepend">
27
+            <span class="input-group-text" style="color: #60CBEB">
28
+              <b>T</b>
29
+            </span>
30
+          </div>
31
+          <select
32
+            class="form-control form-control-lg form-control-a"
33
+            id="forSelector"
34
+            v-model="resType"
35
+            @change="PropertyTypeSelected"
36
+          >
37
+            <option>All</option>
38
+            <option
39
+              v-for="(propertyType, i) in propertyTypesRes"
40
+              :key="i"
41
+            >{{ propertyType.description }}</option>
42
+          </select>
43
+          <div class="input-group-append" @click="clearResType">
44
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
45
+              <b>X</b>
46
+            </span>
47
+          </div>
48
+        </div>
30
       </div>
49
       </div>
31
       <div v-else class="form-group">
50
       <div v-else class="form-group">
32
-        <label for="city">Property Type</label>
33
-        <select
34
-          class="form-control form-control-lg form-control-a"
35
-          id="forSelector"
36
-          v-model="selectedPropertyTypeCom"
37
-          @change="PropertyTypeSelected"
38
-        >
39
-          <option>All</option>
40
-          <option
41
-            v-for="(propertyType, i) in propertyTypesCom"
42
-            :key="i"
43
-          >{{ propertyType.description }}</option>
44
-        </select>
51
+        <label for="propertytype">Property Type</label>
52
+        <div class="input-group mb-3">
53
+          <div class="input-group-prepend">
54
+            <span class="input-group-text" style="color: #60CBEB">
55
+              <b>T</b>
56
+            </span>
57
+          </div>
58
+          <select
59
+            class="form-control form-control-lg form-control-a"
60
+            id="forSelector"
61
+            v-model="comType"
62
+            @change="PropertyTypeSelected"
63
+          >
64
+            <option>All</option>
65
+            <option
66
+              v-for="(propertyType, i) in propertyTypesCom"
67
+              :key="i"
68
+            >{{ propertyType.description }}</option>
69
+          </select>
70
+          <div class="input-group-append" @click="clearComType">
71
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
72
+              <b>X</b>
73
+            </span>
74
+          </div>
75
+        </div>
45
       </div>
76
       </div>
46
       <div class="form-group">
77
       <div class="form-group">
47
-        <label for="city">Province</label>
48
-        <select
49
-          class="form-control form-control-lg form-control-a"
50
-          id="provinceselector"
51
-          @change="ProvinceSelected"
52
-          v-model="selectedProvince"
53
-        >
54
-          <option>All</option>
55
-          <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
56
-        </select>
78
+        <label for="province">Province</label>
79
+        <div class="input-group mb-3">
80
+          <div class="input-group-prepend">
81
+            <span class="input-group-text" style="color: #60CBEB">
82
+              <b>P</b>
83
+            </span>
84
+          </div>
85
+          <select
86
+            class="form-control form-control-lg form-control-a"
87
+            id="provinceselector"
88
+            @change="ProvinceSelected"
89
+            v-model="propertySearch.province"
90
+          >
91
+            <option>All</option>
92
+            <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
93
+          </select>
94
+          <div class="input-group-append" @click="clearFilter('province')">
95
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
96
+              <b>X</b>
97
+            </span>
98
+          </div>
99
+        </div>
57
       </div>
100
       </div>
58
     </div>
101
     </div>
59
-    <div class="col-md-6 mb-2">
102
+    <div class="container text-left">
60
       <div class="form-group">
103
       <div class="form-group">
61
         <label for="city">City</label>
104
         <label for="city">City</label>
62
-        <select
63
-          class="form-control form-control-lg form-control-a"
64
-          id="cityselector"
65
-          @change="CitySelected"
66
-          v-model="selectedCity"
67
-        >
68
-          <option>All</option>
69
-          <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
70
-        </select>
105
+        <div class="input-group mb-3">
106
+          <div class="input-group-prepend">
107
+            <span class="input-group-text" style="color: #60CBEB">
108
+              <b>C</b>
109
+            </span>
110
+          </div>
111
+          <select
112
+            class="form-control form-control-lg form-control-a"
113
+            id="cityselector"
114
+            @change="CitySelected"
115
+            v-model="propertySearch.city"
116
+          >
117
+            <option>All</option>
118
+            <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
119
+          </select>
120
+          <div class="input-group-append" @click="clearFilter('city')">
121
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
122
+              <b>X</b>
123
+            </span>
124
+          </div>
125
+        </div>
71
       </div>
126
       </div>
72
     </div>
127
     </div>
73
-    <div class="col-md-6 mb-2">
128
+    <div class="container text-left">
74
       <div class="form-group">
129
       <div class="form-group">
75
-        <label for="city">Suburb</label>
76
-        <select
77
-          class="form-control form-control-lg form-control-a"
78
-          id="suburbselector"
79
-          v-model="selectedSuburb"
80
-          @change="SuburbSelected"
81
-        >
82
-          <option>All</option>
83
-          <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
84
-        </select>
130
+        <label for="suburb">Suburb</label>
131
+        <div class="input-group mb-3">
132
+          <div class="input-group-prepend">
133
+            <span class="input-group-text" style="color: #60CBEB">
134
+              <b>S</b>
135
+            </span>
136
+          </div>
137
+          <select
138
+            class="form-control form-control-lg form-control-a"
139
+            id="suburbselector"
140
+            v-model="propertySearch.suburb"
141
+            @change="SuburbSeleted"
142
+          >
143
+            <option>All</option>
144
+            <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
145
+          </select>
146
+          <div class="input-group-append" @click="clearFilter('suburb')">
147
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
148
+              <b>X</b>
149
+            </span>
150
+          </div>
151
+        </div>
85
       </div>
152
       </div>
86
     </div>
153
     </div>
87
   </div>
154
   </div>
96
   },
163
   },
97
   data() {
164
   data() {
98
     return {
165
     return {
99
-      selectedType: 'Sale',
100
-      selectedProvince: 'All',
101
-      selectedCity: 'All',
102
-      selectedSuburb: 'All',
103
-      selectedPropertyTypeRes: 'All',
104
-      selectedPropertyTypeCom: 'All',
166
+      resType: 'All',
167
+      comType: 'All',
105
     };
168
     };
106
   },
169
   },
107
   mounted() {
170
   mounted() {
108
     this.getProvince();
171
     this.getProvince();
109
-    this.$emit('TypeSelectedUpdated', this.selectedType);
110
     this.getPropertyTypesRes();
172
     this.getPropertyTypesRes();
111
     this.getPropertyTypesCom();
173
     this.getPropertyTypesCom();
174
+    this.getPropertySearchObject();
175
+    setTimeout(() => {
176
+      this.propertySearch.propertyUsageType = this.propertyType;
177
+    }, 100);
112
   },
178
   },
113
   computed: {
179
   computed: {
114
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
180
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
115
     ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
181
     ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
182
+    ...mapState('propertySearch', ['propertySearch']),
116
   },
183
   },
117
   methods: {
184
   methods: {
118
     ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
185
     ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
119
     ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
186
     ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
120
-    TypeSelected(item) {
121
-      this.$emit('TypeSelectedUpdated', item.target.value);
187
+    ...mapActions('propertySearch', ['getPropertySearchObject', 'clearFilter']),
188
+    clearResType() {
189
+      this.clearFilter('propertyType');
190
+      this.resType = 'All';
191
+    },
192
+    clearComType() {
193
+      this.clearFilter('propertyType');
194
+      this.comType = 'All';
195
+    },
196
+    salesTypeSelected() {
197
+      this.$emit('updateSearch', this.propertySearch);
122
     },
198
     },
123
     PropertyTypeSelected(item) {
199
     PropertyTypeSelected(item) {
124
-      this.$emit('PropertyTypeSelectedUpdated', item.target.value);
200
+      this.propertySearch.propertyType = item.target.value;
201
+      this.$emit('updateSearch', this.propertySearch);
125
     },
202
     },
126
     ProvinceSelected(item) {
203
     ProvinceSelected(item) {
127
       if (item.target.value !== 'All') {
204
       if (item.target.value !== 'All') {
128
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
205
+        this.getCities(
206
+          Object.assign({}, { province: this.propertySearch.province }),
207
+        );
129
       }
208
       }
130
-      this.$emit('ProvinceSelectedUpdated', item.target.value);
209
+      this.$emit('updateSearch', this.propertySearch);
131
     },
210
     },
132
     CitySelected(item) {
211
     CitySelected(item) {
133
       if (item.target.value !== 'All') {
212
       if (item.target.value !== 'All') {
134
         this.getSuburbs(
213
         this.getSuburbs(
135
           Object.assign(
214
           Object.assign(
136
             {},
215
             {},
137
-            { province: this.selectedProvince, city: this.selectedCity },
216
+            {
217
+              province: this.propertySearch.province,
218
+              city: this.propertySearch.city,
219
+            },
138
           ),
220
           ),
139
         );
221
         );
140
       }
222
       }
141
-      this.$emit('CitySelectedUpdated', item.target.value);
223
+      this.$emit('updateSearch', this.propertySearch);
142
     },
224
     },
143
-    SuburbSelected(item) {
144
-      this.$emit('SuburbSelectedUpdated', item.target.value);
225
+    SuburbSeleted() {
226
+      this.$emit('updateSearch', this.propertySearch);
145
     },
227
     },
146
   },
228
   },
147
 };
229
 };

+ 93
- 73
src/components/property/propertySearchPage.vue View File

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
   <div class="container">
3
   <div class="container">
4
-    <div class="container col-md-12" v-if="propertyType === 'Residential'">
4
+    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Residential'">
5
       <div class="col-sm-12">
5
       <div class="col-sm-12">
6
         <div class="about-img-box">
6
         <div class="about-img-box">
7
           <img
7
           <img
8
             src="img/Pretoria-South-Africa.jpg"
8
             src="img/Pretoria-South-Africa.jpg"
9
             alt="Property Listing"
9
             alt="Property Listing"
10
             class="img-fluid"
10
             class="img-fluid"
11
-            style="width:800px;height:400px;"
11
+            style="width:800px;height:400px; border-radius:10px"
12
           />
12
           />
13
         </div>
13
         </div>
14
-        <div class="sinse-box">
15
-          <h3 class="sinse-title">
16
-            Property Listing
17
-            <span></span>
18
-          </h3>
14
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
15
+          <h3 class="sinse-title">Property Listing</h3>
19
         </div>
16
         </div>
20
       </div>
17
       </div>
21
       <br />
18
       <br />
66
       <br />
63
       <br />
67
     </div>
64
     </div>
68
 
65
 
69
-    <div class="container col-md-12" v-if="propertyType === 'Commercial'">
66
+    <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Commercial'">
70
       <div class="col-sm-12">
67
       <div class="col-sm-12">
71
         <div class="about-img-box">
68
         <div class="about-img-box">
72
           <img
69
           <img
73
             src="img/Johannesburg-south-africa-1.jpg"
70
             src="img/Johannesburg-south-africa-1.jpg"
74
             alt="Property Listing"
71
             alt="Property Listing"
75
             class="img-fluid"
72
             class="img-fluid"
76
-            style="width:800px;height:400px;"
73
+            style="width:800px;height:400px; border-radius:10px"
77
           />
74
           />
78
         </div>
75
         </div>
79
-        <div class="sinse-box">
80
-          <h3 class="sinse-title">
81
-            Property Listing
82
-            <span></span>
83
-          </h3>
76
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
77
+          <h3 class="sinse-title">Property Listing</h3>
84
         </div>
78
         </div>
85
       </div>
79
       </div>
86
       <br />
80
       <br />
113
         </div>
107
         </div>
114
         <div class="col-md-4">
108
         <div class="col-md-4">
115
           <p>
109
           <p>
116
-            <img class="img-fluid" src="./../../../public/img/commercial.jpg" alt="About Resale" />
110
+            <img
111
+              class="img-fluid"
112
+              src="./../../../public/img/commercial.jpg"
113
+              alt="About Resale"
114
+              style="border-radius:10px"
115
+            />
117
           </p>
116
           </p>
118
         </div>
117
         </div>
119
       </div>
118
       </div>
120
       <div>
119
       <div>
121
-        <propertyCard
122
-          v-if="properties.length > 0"
123
-          name="propertyholder"
124
-          :properties="properties"
125
-          :key="propertysearch"
126
-        />
120
+        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
127
         <div v-if="properties.length === 0">
121
         <div v-if="properties.length === 0">
128
           <img src="../../../public/img/no-homes.gif" />
122
           <img src="../../../public/img/no-homes.gif" />
129
           <br />
123
           <br />
155
       suburb: '',
149
       suburb: '',
156
       proptype: '',
150
       proptype: '',
157
       keyword: '',
151
       keyword: '',
152
+      propertySearch: {
153
+        userID: 0,
154
+        keyword: '',
155
+        salesType: 'All',
156
+        propertyUsageType: 'All',
157
+        propertyType: 'All',
158
+        province: 'All',
159
+        city: 'All',
160
+        suburb: 'All',
161
+      },
158
     };
162
     };
159
   },
163
   },
160
   methods: {
164
   methods: {
161
-    ...mapActions('property', [
162
-      'searchPropertiesParams',
163
-      'searchPropertiesKeyword',
164
-    ]),
165
+    ...mapActions('propertySearch', ['searchProperties']),
165
   },
166
   },
166
   computed: {
167
   computed: {
167
-    ...mapState('property', ['properties']),
168
+    ...mapState('propertySearch', ['properties']),
168
     ParamsChanged() {
169
     ParamsChanged() {
169
-      this.propertyTypeparam = this.$route.params.propertyType;
170
-      this.type = this.$route.query.type;
171
-      this.propertyType = this.$route.query.propertyType;
172
-      this.province = this.$route.query.province;
173
-      this.city = this.$route.query.city;
174
-      this.suburb = this.$route.query.suburb;
175
-      this.proptype = this.$route.query.propType;
176
-      this.keyword = this.$route.query.keyword;
177
-
178
-      if (typeof this.propertyType === 'undefined') {
179
-        this.propertyType = this.propertyTypeparam;
180
-      }
170
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
171
+      this.propertySearch = {
172
+        userID: 0,
173
+        keyword: '',
174
+        salesType: 'All',
175
+        propertyUsageType: 'All',
176
+        propertyType: 'All',
177
+        province: 'All',
178
+        city: 'All',
179
+        suburb: 'All',
180
+      };
181
 
181
 
182
-      if (this.type === '') {
183
-        this.type = 'undefined';
184
-      }
185
-      if (this.propertyType === '') {
186
-        this.propertyType = 'undefined';
187
-      }
188
-      if (this.province === '') {
189
-        this.province = 'undefined';
190
-      }
191
-      if (this.city === '') {
192
-        this.city = 'undefined';
193
-      }
194
-      if (this.suburb === '') {
195
-        this.suburb = 'undefined';
196
-      }
197
-      if (this.proptype === '') {
198
-        this.propType = 'undefined';
199
-      }
200
-      if (typeof this.keyword === 'undefined' || this.keyword === '') {
201
-        this.searchPropertiesParams(
202
-          Object.assign(
203
-            {},
204
-            {
205
-              type: this.type,
206
-              propertyType: this.propertyType,
207
-              province: this.province,
208
-              city: this.city,
209
-              suburb: this.suburb,
210
-              propType: this.proptype,
211
-            },
212
-          ),
213
-        );
182
+      if (typeof this.$route.params.propertyType === 'undefined') {
183
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
184
+        this.propertySearch = this.$route.query;
214
       } else {
185
       } else {
215
-        this.searchPropertiesKeyword(
216
-          Object.assign({}, { keyword: this.keyword }),
217
-        );
186
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
187
+        this.propertySearch.propertyUsageType = this.$route.params.propertyType;
218
       }
188
       }
219
 
189
 
190
+      console.log('PropertySearch = ' + JSON.stringify(this.propertySearch));
191
+
192
+      this.searchProperties(this.propertySearch);
193
+      // this.type = this.$route.query.type;
194
+      // this.propertyType = this.$route.query.propertyType;
195
+      // this.province = this.$route.query.province;
196
+      // this.city = this.$route.query.city;
197
+      // this.suburb = this.$route.query.suburb;
198
+      // this.proptype = this.$route.query.propType;
199
+      // this.keyword = this.$route.query.keyword;
200
+      // if (typeof this.propertyType === 'undefined') {
201
+      //   this.propertyType = this.propertyTypeparam;
202
+      // }
203
+      // if (this.type === '') {
204
+      //   this.type = 'undefined';
205
+      // }
206
+      // if (this.propertyType === '') {
207
+      //   this.propertyType = 'undefined';
208
+      // }
209
+      // if (this.province === '') {
210
+      //   this.province = 'undefined';
211
+      // }
212
+      // if (this.city === '') {
213
+      //   this.city = 'undefined';
214
+      // }
215
+      // if (this.suburb === '') {
216
+      //   this.suburb = 'undefined';
217
+      // }
218
+      // if (this.proptype === '') {
219
+      //   this.propType = 'undefined';
220
+      // }
221
+      // if (typeof this.keyword === 'undefined' || this.keyword === '') {
222
+      //   this.searchPropertiesParams(
223
+      //     Object.assign(
224
+      //       {},
225
+      //       {
226
+      //         type: this.type,
227
+      //         propertyType: this.propertyType,
228
+      //         province: this.province,
229
+      //         city: this.city,
230
+      //         suburb: this.suburb,
231
+      //         propType: this.proptype,
232
+      //       },
233
+      //     ),
234
+      //   );
235
+      // } else {
236
+      //   this.searchPropertiesKeyword(
237
+      //     Object.assign({}, { keyword: this.keyword }),
238
+      //   );
239
+      // }
220
       return null;
240
       return null;
221
     },
241
     },
222
   },
242
   },

+ 32
- 10
src/components/property/propertyeditPage.vue View File

8
             src="img/Listings2.jpg"
8
             src="img/Listings2.jpg"
9
             alt="Timeshare To Buy"
9
             alt="Timeshare To Buy"
10
             class="img-fluid"
10
             class="img-fluid"
11
-            style="width:800px;height:400px;"
11
+            style="width:800px;height:400px; border-radius:10px"
12
           />
12
           />
13
         </div>
13
         </div>
14
-        <div class="sinse-box">
15
-          <h3 class="sinse-title">
16
-            List {{ propertyType }} {{ salesType }} Property
17
-            <span></span>
18
-          </h3>
14
+        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
15
+          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property</h3>
19
         </div>
16
         </div>
20
       </div>
17
       </div>
21
       <br />
18
       <br />
168
                     name="propertyType"
165
                     name="propertyType"
169
                     id="suburbselector"
166
                     id="suburbselector"
170
                     v-model="property.suburbId"
167
                     v-model="property.suburbId"
168
+                    @change="getPostalCode"
171
                   >
169
                   >
172
                     <option value="0">Please select suburb</option>
170
                     <option value="0">Please select suburb</option>
173
                     <option
171
                     <option
184
                   <span class="input-group-text">
182
                   <span class="input-group-text">
185
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
183
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
186
                   </span>
184
                   </span>
187
-                  <input class="form-control" type="text" name="postalcode" />
185
+                  <input
186
+                    class="form-control"
187
+                    type="text"
188
+                    name="postalcode"
189
+                    v-model="property.addressLine3"
190
+                  />
188
                 </div>
191
                 </div>
189
               </div>
192
               </div>
190
             </div>
193
             </div>
269
                 </div>
272
                 </div>
270
               </div>
273
               </div>
271
             </div>
274
             </div>
272
-            <ImageLoad :loadedImages="loadedImages" :savedImages="propertyImages" />
275
+            <ImageLoad
276
+              :loadedImages="loadedImages"
277
+              :savedImages="propertyImages"
278
+              @DefaultImage="UpdateDefaultImage"
279
+            />
273
             <button
280
             <button
274
               v-if="!wait"
281
               v-if="!wait"
275
               type="button"
282
               type="button"
288
 <script>
295
 <script>
289
 import { mapState, mapActions } from 'vuex';
296
 import { mapState, mapActions } from 'vuex';
290
 import TextEditor from 'vue-trix';
297
 import TextEditor from 'vue-trix';
298
+import { setTimeout } from 'timers';
291
 import UserField from './propertyUserField.vue';
299
 import UserField from './propertyUserField.vue';
292
 import ImageLoad from './propertyImage.vue';
300
 import ImageLoad from './propertyImage.vue';
293
 
301
 
328
     ]),
336
     ]),
329
     SubmitData() {
337
     SubmitData() {
330
       this.wait = true;
338
       this.wait = true;
339
+      if (this.salesType === 'Sale') {
340
+        this.property.isSale = true;
341
+      }
331
       for (let i = 0; i < this.images.length; i++) {
342
       for (let i = 0; i < this.images.length; i++) {
332
         let setAsDefault = false;
343
         let setAsDefault = false;
333
         if (i === this.defaultImage) {
344
         if (i === this.defaultImage) {
338
           isDefault: setAsDefault,
349
           isDefault: setAsDefault,
339
         });
350
         });
340
       }
351
       }
341
-      this.property.createdBy = 'GeorgeW';
352
+      this.property.propertyUserFields = this.propertyFieldValues;
342
 
353
 
343
       this.saveProperty(this.property);
354
       this.saveProperty(this.property);
344
 
355
 
345
       setTimeout(
356
       setTimeout(
346
         () => this.$router.push({
357
         () => this.$router.push({
347
             path: '/property/search',
358
             path: '/property/search',
348
-            query: { type: this.salesType, propertyType: this.propertyType },
359
+            query: {
360
+              salesType: this.salesType,
361
+              propertyUsageType: this.propertyType,
362
+            },
349
           }),
363
           }),
350
         3000,
364
         3000,
351
       );
365
       );
371
         );
385
         );
372
       }
386
       }
373
     },
387
     },
388
+    getPostalCode(item) {
389
+      this.property.addressLine3 = this.suburbs[
390
+        item.target.options.selectedIndex - 1
391
+      ].postalCode;
392
+    },
374
     loadedImages(values) {
393
     loadedImages(values) {
375
       this.images = values;
394
       this.images = values;
376
     },
395
     },
403
     if (this.propertyFields.length > 0) {
422
     if (this.propertyFields.length > 0) {
404
       this.propertyFields = [];
423
       this.propertyFields = [];
405
     }
424
     }
425
+    if (this.property.description !== '') {
426
+      this.property.description = '';
427
+    }
406
 
428
 
407
     this.propertyType = this.$route.params.propType;
429
     this.propertyType = this.$route.params.propType;
408
     this.salesType = this.$route.params.saleType;
430
     this.salesType = this.$route.params.saleType;

+ 2
- 2
src/components/shared/footerSection.vue View File

112
             </div>
112
             </div>
113
             <div class="credits">
113
             <div class="credits">
114
               Site created by
114
               Site created by
115
-              <router-link to="https://provision-sa.com">
115
+              <a href="http://www.provision-sa.co.za/">
116
                 <img
116
                 <img
117
                   src="img/logos/provision-logocropped.png"
117
                   src="img/logos/provision-logocropped.png"
118
                   alt
118
                   alt
119
                   class="Provision Logo"
119
                   class="Provision Logo"
120
                   style="width: 250px; height:15px;"
120
                   style="width: 250px; height:15px;"
121
                 />
121
                 />
122
-              </router-link>
122
+              </a>
123
             </div>
123
             </div>
124
           </div>
124
           </div>
125
         </div>
125
         </div>

+ 30
- 2
src/components/shared/navBar.vue View File

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
   <nav class="navbar navbar-default navbar-trans navbar-expand-lg fixed-top">
3
   <nav class="navbar navbar-default navbar-trans navbar-expand-lg fixed-top">
4
-    <div class="container">
4
+    <div class="container-fluid">
5
       <button
5
       <button
6
         class="navbar-toggler collapsed"
6
         class="navbar-toggler collapsed"
7
         type="button"
7
         type="button"
16
         <span></span>
16
         <span></span>
17
       </button>
17
       </button>
18
       <a class="navbar-brand text-brand" @click="routerGoTo('/')">
18
       <a class="navbar-brand text-brand" @click="routerGoTo('/')">
19
+        <img
20
+          class="img-fluid"
21
+          src="/img/logos/UVProp.png"
22
+          alt="UVProp logo"
23
+          style="width:110px;height:60px;"
24
+        />
19
         Uni-Vate
25
         Uni-Vate
20
         <span class="color-b">Properties</span>
26
         <span class="color-b">Properties</span>
21
       </a>
27
       </a>
194
             >Login</a>
200
             >Login</a>
195
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
201
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
196
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
202
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
197
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Logout</a>
203
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
198
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
204
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
199
               <a
205
               <a
200
                 class="dropdown-item cursor-pointer"
206
                 class="dropdown-item cursor-pointer"
214
         <span class="fa fa-search" aria-hidden="true"></span>
220
         <span class="fa fa-search" aria-hidden="true"></span>
215
       </button>
221
       </button>
216
     </div>
222
     </div>
223
+    <span v-if="showLogout">
224
+      <a @click="logout()">Logout</a>
225
+    </span>
226
+    <span v-else></span>
217
   </nav>
227
   </nav>
218
 </template>
228
 </template>
229
+
219
 <script>
230
 <script>
231
+import { mapGetters, mapActions } from 'vuex';
232
+
220
 export default {
233
 export default {
234
+  data() {
235
+    return {};
236
+  },
237
+  computed: {
238
+    showLogout() {
239
+      return this.$store.state.authentication.status === 'success';
240
+    },
241
+    Logout() {
242
+      return this.$store.state.authentication.methods.logout;
243
+    },
244
+  },
245
+
221
   methods: {
246
   methods: {
247
+    ...mapGetters('authentication', ['isLoggedIn']),
248
+    ...mapActions('authentication', ['logout']),
249
+
222
     routerGoTo(goTo) {
250
     routerGoTo(goTo) {
223
       console.log(goTo);
251
       console.log(goTo);
224
       this.$emit('routerGoTo', goTo);
252
       this.$emit('routerGoTo', goTo);

+ 22
- 46
src/components/shared/searchTab.vue View File

2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
   <div class="box-collapse">
3
   <div class="box-collapse">
4
     <div class="title-box-d">
4
     <div class="title-box-d">
5
-      <h3 class="title-d">Search</h3>
5
+      <h3 class="title-d" style="text-align:left">Search</h3>
6
     </div>
6
     </div>
7
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
7
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
8
     <div class="box-collapse-wrap">
8
     <div class="box-collapse-wrap">
9
       <form class="form-a">
9
       <form class="form-a">
10
         <div class="row">
10
         <div class="row">
11
           <div class="col-md-12 mb-2">
11
           <div class="col-md-12 mb-2">
12
-            <div class="form-group">
12
+            <div class="form-group" style="text-align:left">
13
               <label for="Type">Keyword</label>
13
               <label for="Type">Keyword</label>
14
               <input
14
               <input
15
                 type="text"
15
                 type="text"
73
                 role="tabpanel"
73
                 role="tabpanel"
74
                 aria-labelledby="pills-plans-tab"
74
                 aria-labelledby="pills-plans-tab"
75
               >
75
               >
76
-                <propertySearch
77
-                  propertyType="Residential"
78
-                  @TypeSelectedUpdated="TypeSelectedUpdated"
79
-                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
80
-                  @CitySelectedUpdated="CitySelectedUpdated"
81
-                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
82
-                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
83
-                />
76
+                <propertySearch propertyType="Residential" @updateSearch="updateSearch" />
84
               </div>
77
               </div>
85
               <div
78
               <div
86
                 class="tab-pane fade"
79
                 class="tab-pane fade"
88
                 role="tabpanel"
81
                 role="tabpanel"
89
                 aria-labelledby="pills-map-tab"
82
                 aria-labelledby="pills-map-tab"
90
               >
83
               >
91
-                <propertySearch
92
-                  propertyType="Commercial"
93
-                  @TypeSelectedUpdated="TypeSelectedUpdated"
94
-                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
95
-                  @CitySelectedUpdated="CitySelectedUpdated"
96
-                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
97
-                  @PropertyTypeSelectedUpdated="PropertyTypeSelectedUpdated"
98
-                />
84
+                <propertySearch propertyType="Commercial" />
99
               </div>
85
               </div>
100
             </div>
86
             </div>
101
           </div>
87
           </div>
109
 </template>
95
 </template>
110
 
96
 
111
 <script>
97
 <script>
98
+import { mapState, mapActions } from 'vuex';
112
 import propertySearch from '../property/propertySearchFields.vue';
99
 import propertySearch from '../property/propertySearchFields.vue';
113
 import timeshareSearch from '../timeshare/searchTimeshare.vue';
100
 import timeshareSearch from '../timeshare/searchTimeshare.vue';
114
 
101
 
120
   data() {
107
   data() {
121
     return {
108
     return {
122
       selectedPropertyType: 'timeshare',
109
       selectedPropertyType: 'timeshare',
123
-      selectedType: '',
124
-      selectedProvince: '',
125
-      selectedCity: '',
126
-      selectedSuburb: '',
127
-      selectedPropType: '',
128
       keyword: '',
110
       keyword: '',
111
+      propertySearch: {
112
+        userID: 0,
113
+        keyword: '',
114
+        salesType: 'Sale',
115
+        propertyUsageType: 'All',
116
+        propertyType: 'All',
117
+        province: 'All',
118
+        city: 'All',
119
+        suburb: 'All',
120
+      },
129
     };
121
     };
130
   },
122
   },
123
+  computed: {},
131
   methods: {
124
   methods: {
132
     updateType(item) {
125
     updateType(item) {
133
       this.selectedPropertyType = item;
126
       this.selectedPropertyType = item;
134
     },
127
     },
135
-    TypeSelectedUpdated(item) {
136
-      this.selectedType = item;
137
-    },
138
-    PropertyTypeSelectedUpdated(item) {
139
-      this.selectedPropType = item;
140
-    },
141
-    ProvinceSelectedUpdated(item) {
142
-      this.selectedProvince = item;
143
-    },
144
-    CitySelectedUpdated(item) {
145
-      this.selectedCity = item;
146
-    },
147
-    SuburbSelectedUpdated(item) {
148
-      this.selectedSuburb = item;
128
+    updateSearch(item) {
129
+      this.propertySearch = item;
130
+      this.propertySearch.propertyUsageType = this.selectedPropertyType;
131
+      this.propertySearch.keyword = this.keyword;
149
     },
132
     },
150
     Search() {
133
     Search() {
151
       if (this.selectedPropertyType === 'timeshare') {
134
       if (this.selectedPropertyType === 'timeshare') {
153
       } else {
136
       } else {
154
         this.$router.push({
137
         this.$router.push({
155
           path: '/property/search',
138
           path: '/property/search',
156
-          query: {
157
-            type: this.selectedType,
158
-            propertyType: this.selectedPropertyType,
159
-            province: this.selectedProvince,
160
-            city: this.selectedCity,
161
-            suburb: this.selectedSuburb,
162
-            propType: this.selectedPropType,
163
-            keyword: this.keyword,
164
-          },
139
+          query: this.propertySearch,
165
         });
140
         });
141
+        // this.$router.push('/property/search');
166
       }
142
       }
167
     },
143
     },
168
   },
144
   },

+ 4
- 4
src/components/timeshare/buy/buyPage.vue View File

9
               src="img/buy.jpg"
9
               src="img/buy.jpg"
10
               alt="Timeshare To Buy"
10
               alt="Timeshare To Buy"
11
               class="img-fluid"
11
               class="img-fluid"
12
-              style="width:800px;height:400px;"
12
+              style="width:800px;height:400px; border-radius:10px"
13
             />
13
             />
14
           </div>
14
           </div>
15
-          <div class="sinse-box">
16
-            <h3 class="sinse-title">Timshare</h3>
15
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
16
+            <h3 class="sinse-title">Timeshare To Buy</h3>
17
           </div>
17
           </div>
18
         </div>
18
         </div>
19
 
19
 
92
                     width="100%"
92
                     width="100%"
93
                     height="450"
93
                     height="450"
94
                     frameborder="0"
94
                     frameborder="0"
95
-                    style="border:0"
95
+                    style="border-radius:10px"
96
                     allowfullscreen
96
                     allowfullscreen
97
                   ></iframe>
97
                   ></iframe>
98
                   <br />
98
                   <br />

+ 22
- 3
src/components/timeshare/buy/weekListPage.vue View File

1
 <template>
1
 <template>
2
-  <div>
3
-    <br />
4
-    <br />
2
+  <!-- eslint-disable max-len -->
3
+  <div class="container">
5
     <br />
4
     <br />
6
     <br />
5
     <br />
7
     <br />
6
     <br />
8
     <br />
7
     <br />
8
+    <div class="row">
9
+      <div class="col-md-12 col-lg-8">
10
+        <div class="title-box-d">
11
+          <h1 class="title-d" style="text-align:left; font-size: 250%">Search Results</h1>
12
+        </div>
13
+        <br />
14
+      </div>
15
+      <!-- <div class="row mb-4">
16
+        <div class="col-md-4">
17
+          <img />
18
+        </div>
19
+        <div class="col-md-4">
20
+          <img />
21
+        </div>
22
+        <div class="col-md-4">
23
+          <img />
24
+        </div>
25
+      </div>-->
26
+    </div>
9
     <br />
27
     <br />
10
     <WeekListComponent />
28
     <WeekListComponent />
29
+    <br />
11
   </div>
30
   </div>
12
 </template>
31
 </template>
13
 <script>
32
 <script>

+ 3
- 6
src/components/timeshare/faqPage.vue View File

9
               src="img/questions.jpg"
9
               src="img/questions.jpg"
10
               alt="Frequently Asked Questions"
10
               alt="Frequently Asked Questions"
11
               class="img-fluid"
11
               class="img-fluid"
12
-              style="width:800px;height:400px;"
12
+              style="width:800px;height:400px; border-radius:10px"
13
             />
13
             />
14
           </div>
14
           </div>
15
-          <div class="sinse-box">
16
-            <h3 class="sinse-title">
17
-              Frequently Asked Questions
18
-              <span></span>
19
-            </h3>
15
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
16
+            <h3 class="sinse-title">Frequently Asked Questions</h3>
20
           </div>
17
           </div>
21
         </div>
18
         </div>
22
         <div class="container col-md-10">
19
         <div class="container col-md-10">

+ 3
- 3
src/components/timeshare/resort/resortPage.vue View File

15
         </div>
15
         </div>
16
         <div class="row mb-4">
16
         <div class="row mb-4">
17
           <div class="col-md-4">
17
           <div class="col-md-4">
18
-            <img class="img-fluid" :src="image1" alt="Resort Image" />
18
+            <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
19
           </div>
19
           </div>
20
           <div class="col-md-4">
20
           <div class="col-md-4">
21
-            <img class="img-fluid" :src="image2" alt="Resort Image" />
21
+            <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
22
           </div>
22
           </div>
23
           <div class="col-md-4">
23
           <div class="col-md-4">
24
-            <img class="img-fluid" :src="image3" alt="Resort Image" />
24
+            <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
25
           </div>
25
           </div>
26
         </div>
26
         </div>
27
       </div>
27
       </div>

+ 3
- 3
src/components/timeshare/resort/unitPage.vue View File

14
       </div>
14
       </div>
15
       <div class="row mb-4">
15
       <div class="row mb-4">
16
         <div class="col-md-4">
16
         <div class="col-md-4">
17
-          <img class="img-fluid" :src="image1" alt="Resort Image" />
17
+          <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
18
         </div>
18
         </div>
19
         <div class="col-md-4">
19
         <div class="col-md-4">
20
-          <img class="img-fluid" :src="image2" alt="Resort Image" />
20
+          <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
21
         </div>
21
         </div>
22
         <div class="col-md-4">
22
         <div class="col-md-4">
23
-          <img class="img-fluid" :src="image3" alt="Resort Image" />
23
+          <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
24
         </div>
24
         </div>
25
       </div>
25
       </div>
26
     </div>
26
     </div>

+ 3
- 6
src/components/timeshare/sell/sellPage.vue View File

9
               src="img/sell2.jpg"
9
               src="img/sell2.jpg"
10
               alt="Timeshare To Sell"
10
               alt="Timeshare To Sell"
11
               class="img-fluid"
11
               class="img-fluid"
12
-              style="width:800px;height:400px;"
12
+              style="width:800px;height:400px; border-radius:10px"
13
             />
13
             />
14
           </div>
14
           </div>
15
-          <div class="sinse-box">
16
-            <h3 class="sinse-title">
17
-              Timeshare To Sell
18
-              <span></span>
19
-            </h3>
15
+          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
16
+            <h3 class="sinse-title">Timeshare To Sell</h3>
20
           </div>
17
           </div>
21
         </div>
18
         </div>
22
         <br />
19
         <br />

+ 19
- 0
src/components/user/logOut.vue View File

1
+<script>
2
+import { mapActions } from 'vuex';
3
+
4
+export default {
5
+  computed: {
6
+    isLoggedIn() {
7
+      return this.$store.getters.isLoggedIn;
8
+    },
9
+  },
10
+  methods: {
11
+    ...mapActions('authentication', ['logout']),
12
+    Logout() {
13
+      this.logout('logout').then(() => {
14
+        this.$router.push('/users/login');
15
+      });
16
+    },
17
+  },
18
+};
19
+</script>

+ 14
- 10
src/components/user/loginPage.vue View File

6
         <div class="form">
6
         <div class="form">
7
           <div>
7
           <div>
8
             <h4>Login</h4>
8
             <h4>Login</h4>
9
+            <br />
9
           </div>
10
           </div>
10
           <div class="row">
11
           <div class="row">
11
             <div class="col-md-11" style="margin-bottom: 1em">
12
             <div class="col-md-11" style="margin-bottom: 1em">
19
                     type="text"
20
                     type="text"
20
                     name="username"
21
                     name="username"
21
                     placeholder="Username"
22
                     placeholder="Username"
23
+                    v-model="username"
22
                     value
24
                     value
23
                   />
25
                   />
24
                 </div>
26
                 </div>
57
           <p v-if="user !== null">{{ user }}</p>
59
           <p v-if="user !== null">{{ user }}</p>
58
         </div>
60
         </div>
59
       </form>
61
       </form>
60
-
61
       <form id="forgot">
62
       <form id="forgot">
62
         <div class="form">
63
         <div class="form">
63
           <h5>Trouble signing in?</h5>
64
           <h5>Trouble signing in?</h5>
82
 </template>
83
 </template>
83
 
84
 
84
 <script>
85
 <script>
85
-const axios = require('axios');
86
+import { mapActions, mapState } from 'vuex';
87
+// import axios from 'axios';
88
+// import User from '../../assets/Log';
86
 
89
 
87
 export default {
90
 export default {
88
   name: 'Login',
91
   name: 'Login',
98
       text: '',
101
       text: '',
99
       showPassword: false,
102
       showPassword: false,
100
       password: '',
103
       password: '',
104
+      email: '',
101
     };
105
     };
102
   },
106
   },
107
+  computed: {
108
+    ...mapState('authentication', ['token', 'status']),
109
+  },
103
   methods: {
110
   methods: {
111
+    ...mapActions('authentication', ['login']),
104
     Login() {
112
     Login() {
105
-      axios
106
-        .post('/api/register/authenticate', {
107
-          username: this.username,
108
-          password: this.password,
109
-        })
110
-        .then(response => console.log(response.data))
111
-        .catch(error => console.log(error.push));
112
-      this.$router.push('/');
113
+      this.login({ username: this.username, password: this.password })
114
+        .then(() => this.router.push('/'))
115
+        .catch(err => console.log(err));
116
+      this.$router.push('/about/us');
113
     },
117
     },
114
     togglePassword() {
118
     togglePassword() {
115
       this.showPassword = true;
119
       this.showPassword = true;

+ 5
- 0
src/components/user/secure.vue View File

1
+<template>
2
+  <div>
3
+    <h1>This page is protected by auth</h1>
4
+  </div>
5
+</template>

+ 19
- 0
src/main.js View File

1
 /* eslint-disable prefer-template */
1
 /* eslint-disable prefer-template */
2
 import Vue from 'vue';
2
 import Vue from 'vue';
3
 import EvaIcons from 'vue-eva-icons';
3
 import EvaIcons from 'vue-eva-icons';
4
+import axios from 'axios';
4
 import App from './App.vue';
5
 import App from './App.vue';
5
 import router from './router';
6
 import router from './router';
6
 import store from './store';
7
 import store from './store';
9
 
10
 
10
 Vue.config.productionTip = false;
11
 Vue.config.productionTip = false;
11
 
12
 
13
+Vue.prototype.$http = axios;
14
+const token = localStorage.getItem('token');
15
+if (token) {
16
+  Vue.prototype.$http.defaults.headers.common.Authorization = token;
17
+}
18
+
19
+router.beforeEach((to, from, next) => {
20
+  if (to.matched.some(record => record.meta.requiresAuth)) {
21
+    if (store.getters.isLoggedIn) {
22
+      next();
23
+      return;
24
+    }
25
+    next('/users/login');
26
+  } else {
27
+    next();
28
+  }
29
+});
30
+
12
 Vue.filter('toCurrency', (value) => {
31
 Vue.filter('toCurrency', (value) => {
13
   if (typeof value !== 'number') {
32
   if (typeof value !== 'number') {
14
     return value;
33
     return value;

+ 2
- 0
src/router/index.js View File

1
+/* eslint-disable import/prefer-default-export */
1
 import Vue from 'vue';
2
 import Vue from 'vue';
2
 import Router from 'vue-router';
3
 import Router from 'vue-router';
3
 
4
 
39
 
40
 
40
 import MakeOffer from '../components/processFlow/makeOffer.vue';
41
 import MakeOffer from '../components/processFlow/makeOffer.vue';
41
 import Offer from '../components/processFlow/offers.vue';
42
 import Offer from '../components/processFlow/offers.vue';
43
+// import store from '../store';
42
 
44
 
43
 Vue.use(Router);
45
 Vue.use(Router);
44
 
46
 

+ 4
- 0
src/store/index.js View File

16
 import Register from './modules/user/register';
16
 import Register from './modules/user/register';
17
 import WeekList from './modules/timeshare/weekList';
17
 import WeekList from './modules/timeshare/weekList';
18
 import Bid from './modules/processFlow/bid';
18
 import Bid from './modules/processFlow/bid';
19
+import Authentication from './modules/user/authentication';
20
+import PropertySearch from './modules/property/propertySearch';
19
 
21
 
20
 Vue.use(Vuex);
22
 Vue.use(Vuex);
21
 /* eslint no-param-reassign: ["error", { "props": false }] */
23
 /* eslint no-param-reassign: ["error", { "props": false }] */
37
     registerAgency: Register,
39
     registerAgency: Register,
38
     weekList: WeekList,
40
     weekList: WeekList,
39
     bid: Bid,
41
     bid: Bid,
42
+    authentication: Authentication,
43
+    propertySearch: PropertySearch,
40
   },
44
   },
41
 });
45
 });

+ 1
- 32
src/store/modules/property/property.js View File

31
     propertyTypesCom: [],
31
     propertyTypesCom: [],
32
     propertyOverviewFields: [],
32
     propertyOverviewFields: [],
33
     propertyFields: [],
33
     propertyFields: [],
34
-    properties: [],
35
-    latestProperties: [],
36
   },
34
   },
37
   mutations: {
35
   mutations: {
38
     setProperty(state, property) {
36
     setProperty(state, property) {
57
       state.propertyFields = fields;
55
       state.propertyFields = fields;
58
     },
56
     },
59
     updateCurrentProperty(state, property) {
57
     updateCurrentProperty(state, property) {
60
-      state.property = property;
61
-    },
62
-    updateSearch(state, propertySearch) {
63
-      state.properties = propertySearch;
64
-    },
65
-    setLatestProperties(state, properties) {
66
-      state.latestProperties = properties;
58
+      state.properties.push(property);
67
     },
59
     },
68
     clearProperty(state) {
60
     clearProperty(state) {
69
       state.property = {
61
       state.property = {
92
     clearPropertyImages(state) {
84
     clearPropertyImages(state) {
93
       state.propertyImages = [];
85
       state.propertyImages = [];
94
     },
86
     },
95
-    setProperties(state, properties) {
96
-      state.properties = properties;
97
-    },
98
   },
87
   },
99
   getters: {},
88
   getters: {},
100
   actions: {
89
   actions: {
156
         .then(result => commit('updateCurrentProperty', result.data))
145
         .then(result => commit('updateCurrentProperty', result.data))
157
         .catch(console.error);
146
         .catch(console.error);
158
     },
147
     },
159
-    searchPropertiesParams({ commit }, item) {
160
-      axios
161
-        .get(
162
-          `/api/property/search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
163
-        )
164
-        .then(response => commit('updateSearch', response.data))
165
-        .catch(console.error);
166
-    },
167
-    searchPropertiesKeyword({ commit }, item) {
168
-      axios
169
-        .get(`/api/Property/Search/${item.keyword}`)
170
-        .then(response => commit('updateSearch', response.data))
171
-        .catch(console.error);
172
-    },
173
-    searchLatestProperties({ commit }) {
174
-      axios
175
-        .get('/api/property/latestProperties')
176
-        .then(response => commit('setLatestProperties', response.data))
177
-        .catch(console.error);
178
-    },
179
     clearProperty({ commit }) {
148
     clearProperty({ commit }) {
180
       commit('clearProperty');
149
       commit('clearProperty');
181
     },
150
     },

+ 65
- 0
src/store/modules/property/propertySearch.js View File

1
+import axios from 'axios';
2
+
3
+export default {
4
+  namespaced: true,
5
+  state: {
6
+    propertySearch: {
7
+      userID: 0,
8
+      keyword: '',
9
+      salesType: 'Sale',
10
+      propertyUsageType: 'All',
11
+      propertyType: 'All',
12
+      province: 'All',
13
+      city: 'All',
14
+      suburb: 'All',
15
+    },
16
+    properties: [],
17
+    latestProperties: [],
18
+  },
19
+  mutations: {
20
+    updateSearch(state, propertySearch) {
21
+      state.properties = [];
22
+      state.properties = propertySearch;
23
+    },
24
+    setLatestProperties(state, properties) {
25
+      state.latestProperties = properties;
26
+    },
27
+    setPropertySearch(state, search) {
28
+      state.propertySearch = search;
29
+    },
30
+    onClearFilter(state, filter) {
31
+      state.propertySearch[filter] = 'All';
32
+    },
33
+  },
34
+  getters: {},
35
+  actions: {
36
+    clearFilter({ commit }, filter) {
37
+      commit('onClearFilter', filter);
38
+    },
39
+    getPropertySearchObject({ commit }) {
40
+      const search = {
41
+        userID: 0,
42
+        keyword: '',
43
+        salesType: 'Sale',
44
+        propertyUsageType: 'All',
45
+        propertyType: 'All',
46
+        province: 'All',
47
+        city: 'All',
48
+        suburb: 'All',
49
+      };
50
+      commit('setPropertySearch', search);
51
+    },
52
+    searchProperties({ commit }, item) {
53
+      axios
54
+        .post('/api/Property/Search', item)
55
+        .then(result => commit('updateSearch', result.data))
56
+        .catch(console.error);
57
+    },
58
+    searchLatestProperties({ commit }) {
59
+      axios
60
+        .get('/api/property/latestProperties')
61
+        .then(response => commit('setLatestProperties', response.data))
62
+        .catch(console.error);
63
+    },
64
+  },
65
+};

+ 67
- 0
src/store/modules/user/authentication.js View File

1
+import Vue from 'vue';
2
+import Vuex from 'vuex';
3
+import axios from 'axios';
4
+
5
+Vue.use(Vuex);
6
+export default {
7
+  namespaced: true,
8
+  state: {
9
+    status: '',
10
+    token: localStorage.getItem('token') || '',
11
+    user: {},
12
+  },
13
+  mutations: {
14
+    auth_request(state) {
15
+      state.status = 'loading';
16
+    },
17
+    auth_success(state, token, user) {
18
+      state.status = 'success';
19
+      state.token = token;
20
+      state.user = user;
21
+    },
22
+    auth_error(state) {
23
+      state.status = 'error';
24
+    },
25
+    logout(state) {
26
+      state.status = '';
27
+      state.token = '';
28
+    },
29
+  },
30
+  getters: {
31
+    isLoggedIn: state => !!state.token,
32
+    authStatus: state => state.status,
33
+  },
34
+  actions: {
35
+    login({
36
+      commit,
37
+    }, user) {
38
+      return new Promise((reject) => {
39
+        commit('auth_request');
40
+        axios({
41
+          url: '/api/register/authenticate',
42
+          data: user,
43
+          method: 'POST',
44
+        })
45
+          .then((resp) => {
46
+            console.log(resp.data);
47
+            localStorage.setItem('token', resp.data.token);
48
+            commit('auth_success', resp.data.token, resp.data);
49
+          })
50
+          .catch((err) => {
51
+            commit('auth_error');
52
+            localStorage.removeItem('token');
53
+            reject(err);
54
+          });
55
+      });
56
+    },
57
+    logout({
58
+      commit,
59
+    }) {
60
+      return new Promise(() => {
61
+        commit('logout');
62
+        localStorage.removeItem('token');
63
+        delete axios.defaults.headers.common.Authorization;
64
+      });
65
+    },
66
+  },
67
+};

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

86
     //   commit,
86
     //   commit,
87
     // }, id) {
87
     // }, id) {
88
     //   axios
88
     //   axios
89
-    //     .get(`http://192.168.6.188:5000/api/user/${id}`)
89
+    //     .get(`/api/user/${id}`)
90
     //     .then(result => commit('setIndividual', result.data))
90
     //     .then(result => commit('setIndividual', result.data))
91
     //     .catch(console.error);
91
     //     .catch(console.error);
92
     // },
92
     // },
94
     //   commit,
94
     //   commit,
95
     // }, id) {
95
     // }, id) {
96
     //   axios
96
     //   axios
97
-    //     .get(`http://192.168.6.188:5000/api/agency/${id}`)
97
+    //     .get(`/api/agency/${id}`)
98
     //     .then(result => commit('setAgency', result.data))
98
     //     .then(result => commit('setAgency', result.data))
99
     //     .catch(console.error);
99
     //     .catch(console.error);
100
     // },
100
     // },
103
       commit,
103
       commit,
104
     }, item) {
104
     }, item) {
105
       axios
105
       axios
106
-        .post('http://192.168.6.188:5000/api/register/register', item)
106
+        .post('/api/register/register', item)
107
         .then(result => commit('addIndividual', result.data))
107
         .then(result => commit('addIndividual', result.data))
108
         .catch(console.error);
108
         .catch(console.error);
109
     },
109
     },
111
       commit,
111
       commit,
112
     }, item) {
112
     }, item) {
113
       axios
113
       axios
114
-        .post('http://192.168.6.188:5000/api/register/registeragency', item)
114
+        .post('/api/register/registeragency', item)
115
         .then(result => commit('addAgency', result.data))
115
         .then(result => commit('addAgency', result.data))
116
         .catch(console.error);
116
         .catch(console.error);
117
     },
117
     },
119
     //   commit,
119
     //   commit,
120
     // }, item) {
120
     // }, item) {
121
     //   axios
121
     //   axios
122
-    //     .put('http://192.168.6.188:5000/api/individual', item)
122
+    //     .put('/api/individual', item)
123
     //     .then(result => commit('updateIndividual', item))
123
     //     .then(result => commit('updateIndividual', item))
124
     //     .catch(console.error);
124
     //     .catch(console.error);
125
     // },
125
     // },
127
     //   commit,
127
     //   commit,
128
     // }, item) {
128
     // }, item) {
129
     //   axios
129
     //   axios
130
-    //     .put('http://192.168.6.188:5000/api/agency', item)
130
+    //     .put('/api/agency', item)
131
     //     .then(result => commit('updateAgency', item))
131
     //     .then(result => commit('updateAgency', item))
132
     //     .catch(console.error);
132
     //     .catch(console.error);
133
     // },
133
     // },
145
     //   commit,
145
     //   commit,
146
     // }, id) {
146
     // }, id) {
147
     //   axios
147
     //   axios
148
-    //     .delete(`http://192.168.6.188:5000/api/individual/${id}`)
148
+    //     .delete(`/api/individual/${id}`)
149
     //     .then(result => commit('removeIndividual', id))
149
     //     .then(result => commit('removeIndividual', id))
150
     //     .catch(console.error);
150
     //     .catch(console.error);
151
     // },
151
     // },
153
     //   commit,
153
     //   commit,
154
     // }, id) {
154
     // }, id) {
155
     //   axios
155
     //   axios
156
-    //     .delete(`http://192.168.6.188:5000/api/agency/${id}`)
156
+    //     .delete(`/api/agency/${id}`)
157
     //     .then(result => commit('removeAgency', id))
157
     //     .then(result => commit('removeAgency', id))
158
     //     .catch(console.error);
158
     //     .catch(console.error);
159
     // },
159
     // },

Loading…
Cancel
Save