30117125 4 years ago
parent
commit
4295ff3762

+ 0
- 3
src/App.vue View File

4
       <i class="fa fa-chevron-up"></i>
4
       <i class="fa fa-chevron-up"></i>
5
     </a>
5
     </a>
6
     <div v-if="!isLandingPage" class="click-closed"></div>
6
     <div v-if="!isLandingPage" class="click-closed"></div>
7
-    <SearchTab v-if="!isLandingPage" />
8
     <NavBar v-if="!isLandingPage" @routerGoTo="routerGoTo" />
7
     <NavBar v-if="!isLandingPage" @routerGoTo="routerGoTo" />
9
     <div v-if="!isLandingPage"></div>
8
     <div v-if="!isLandingPage"></div>
10
     <router-view @setLandingPage="setLandingPage" style="margin-top:140px" />
9
     <router-view @setLandingPage="setLandingPage" style="margin-top:140px" />
14
 
13
 
15
 <script>
14
 <script>
16
 /* eslint-disable */
15
 /* eslint-disable */
17
-import SearchTab from "./components/shared/searchTab.vue";
18
 import NavBar from "./components/shared/navBar.vue";
16
 import NavBar from "./components/shared/navBar.vue";
19
 import FooterSection from "./components/shared/footerSection.vue";
17
 import FooterSection from "./components/shared/footerSection.vue";
20
 
18
 
26
     };
24
     };
27
   },
25
   },
28
   components: {
26
   components: {
29
-    SearchTab,
30
     NavBar,
27
     NavBar,
31
     FooterSection
28
     FooterSection
32
   },
29
   },

+ 57
- 101
src/components/home/carouselSection.vue View File

15
                   role="tab"
15
                   role="tab"
16
                   aria-controls="timeshare"
16
                   aria-controls="timeshare"
17
                   aria-selected="true"
17
                   aria-selected="true"
18
-                  >Timeshare</a
19
-                >
18
+                >Timeshare</a>
20
               </li>
19
               </li>
21
               <li class="nav-item">
20
               <li class="nav-item">
22
                 <a
21
                 <a
27
                   role="tab"
26
                   role="tab"
28
                   aria-controls="commercial"
27
                   aria-controls="commercial"
29
                   aria-selected="false"
28
                   aria-selected="false"
30
-                  >Commercial</a
31
-                >
29
+                >Commercial</a>
32
               </li>
30
               </li>
33
               <li class="nav-item">
31
               <li class="nav-item">
34
                 <a
32
                 <a
39
                   role="tab"
37
                   role="tab"
40
                   aria-controls="residential"
38
                   aria-controls="residential"
41
                   aria-selected="false"
39
                   aria-selected="false"
42
-                  >Residential</a
43
-                >
40
+                >Residential</a>
44
               </li>
41
               </li>
45
             </ul>
42
             </ul>
46
             <!--========    header tabs      ==========-->
43
             <!--========    header tabs      ==========-->
61
                 aria-labelledby="timeshare-tab"
58
                 aria-labelledby="timeshare-tab"
62
               >
59
               >
63
                 <H4>TIMESHARE SALES</H4>
60
                 <H4>TIMESHARE SALES</H4>
64
-                <p>
65
-                  Start exploring your posibilities
66
-                </p>
61
+                <p>Start exploring your posibilities</p>
67
                 <div id="row">
62
                 <div id="row">
68
-                  <!-- <div class="form-group">
69
-                    <input
70
-                      data-toggle="dropdown"
71
-                      name="region"
72
-                      class="form-control my-2"
73
-                      id="name"
74
-                      placeholder="Region"
75
-                      aria-haspopup="true"
76
-                      aria-expanded="false"
77
-                    />
78
-                    <input
79
-                      data-toggle="dropdown"
80
-                      name="resort"
81
-                      class="form-control my-2"
82
-                      id="name"
83
-                      placeholder="Resort"
84
-                      aria-haspopup="true"
85
-                      aria-expanded="false"
86
-                    />
87
-                  </div> -->
88
-                  <router-link to="/timeshare/buy" class="btn-solid-blue"
89
-                    ><i class="fa fa-search"></i> BUY</router-link
90
-                  >
91
-                  <router-link to="/timeshare/sell" class="btn-solid-blue"
92
-                    ><i class="fa chevron-circle-right"></i> SELL</router-link
93
-                  >
63
+                  <router-link to="/timeshare/buy" class="btn-solid-blue">
64
+                    <i class="fa fa-search"></i> BUY
65
+                  </router-link>
66
+                  <router-link to="/timeshare/sell" class="btn-solid-blue">
67
+                    <i class="fa chevron-circle-right"></i> SELL
68
+                  </router-link>
94
                 </div>
69
                 </div>
95
               </div>
70
               </div>
96
 
71
 
104
                 <p>Select the region you are looking for to start your search</p>
79
                 <p>Select the region you are looking for to start your search</p>
105
                 <div id="row">
80
                 <div id="row">
106
                   <div class="form-group">
81
                   <div class="form-group">
107
-                    <autoComplete
108
-                      align="left"
109
-                      class="col-md-11 offset-1"
110
-                      :items="suburbList"
111
-                      @selection="SelectedFilter"
112
-                      style="width:100%; margin-left:-15px"
113
-                    />
82
+                    <autoComplete @GoogleAddress="UpdateAddress" />
114
                   </div>
83
                   </div>
115
-                  <a v-on:click="SearchClickRentComm()" class="btn-solid-blue scrollto"
116
-                    ><i class="fa fa-search"></i> RENT</a
117
-                  >
118
-                  <a v-on:click="SearchClickBuyComm()" class="btn-solid-blue scrollto"
119
-                    ><i class="fa fa-search"></i> BUY</a
120
-                  >
84
+                  <a v-on:click="SearchClickRentComm()" class="btn-solid-blue scrollto">
85
+                    <i class="fa fa-search"></i> RENT
86
+                  </a>
87
+                  <a v-on:click="SearchClickBuyComm()" class="btn-solid-blue scrollto">
88
+                    <i class="fa fa-search"></i> BUY
89
+                  </a>
121
                 </div>
90
                 </div>
122
               </div>
91
               </div>
123
 
92
 
131
                 <p>Select the region you are looking for to start your search</p>
100
                 <p>Select the region you are looking for to start your search</p>
132
                 <div id="row">
101
                 <div id="row">
133
                   <div class="form-group">
102
                   <div class="form-group">
134
-                    <autoComplete
135
-                      align="left"
136
-                      class="col-md-11 offset-1"
137
-                      :items="suburbList"
138
-                      @selection="SelectedFilter"
139
-                      style="width:100%; margin-left:-15px"
140
-                    />
141
-                    <!-- <input
142
-                      data-toggle="dropdown"
143
-                      name="type"
144
-                      class="form-control my-2"
145
-                      id="type"
146
-                      placeholder="Type"
147
-                      aria-haspopup="true"
148
-                      aria-expanded="false"
149
-                    /> -->
103
+                    <autoComplete @GoogleAddress="UpdateAddress" />
150
                   </div>
104
                   </div>
151
-                  <a v-on:click="SearchClickRentRes()" class="btn-solid-blue scrollto"
152
-                    ><i class="fa fa-search"></i> RENT</a
153
-                  >
154
-                  <a v-on:click="SearchClickBuyRes()" class="btn-solid-blue scrollto"
155
-                    ><i class="fa fa-search"></i> BUY</a
156
-                  >
105
+                  <a v-on:click="SearchClickRentRes()" class="btn-solid-blue scrollto">
106
+                    <i class="fa fa-search"></i> RENT
107
+                  </a>
108
+                  <a v-on:click="SearchClickBuyRes()" class="btn-solid-blue scrollto">
109
+                    <i class="fa fa-search"></i> BUY
110
+                  </a>
157
                 </div>
111
                 </div>
158
               </div>
112
               </div>
159
             </div>
113
             </div>
174
       style="margin-top:-50px"
128
       style="margin-top:-50px"
175
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
129
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
176
     >
130
     >
177
-      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
178
-      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
179
-      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
180
-      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
181
-      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
182
-      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
131
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt />
132
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt />
133
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt />
134
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt />
135
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt />
136
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt />
183
     </carousel>
137
     </carousel>
184
 
138
 
185
     <div id="intro-carousel" class="owl-carousel"></div>
139
     <div id="intro-carousel" class="owl-carousel"></div>
191
 /* eslint-disable */
145
 /* eslint-disable */
192
 import { mapState, mapActions } from "vuex";
146
 import { mapState, mapActions } from "vuex";
193
 import carousel from "vue-owl-carousel";
147
 import carousel from "vue-owl-carousel";
194
-import autoComplete from "../shared/autoComplete";
148
+import autoComplete from "../shared/addressAutoComplete";
195
 export default {
149
 export default {
196
   components: {
150
   components: {
197
     carousel,
151
     carousel,
198
-    autoComplete
152
+    autoComplete,
199
   },
153
   },
200
   computed: {
154
   computed: {
201
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
155
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
202
   },
156
   },
203
   data() {
157
   data() {
204
     return {
158
     return {
205
       propertyUsageType: "Commercial",
159
       propertyUsageType: "Commercial",
206
       salesType: "Sale",
160
       salesType: "Sale",
207
       searchText: "",
161
       searchText: "",
208
-      clicked: false
162
+      clicked: false,
209
     };
163
     };
210
   },
164
   },
211
   methods: {
165
   methods: {
212
-    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
166
+    ...mapActions("propertySearch", ["applyFilter"]),
213
     SetSalesType(value) {
167
     SetSalesType(value) {
214
       this.salesType = value;
168
       this.salesType = value;
215
     },
169
     },
216
     SearchClickBuyRes() {
170
     SearchClickBuyRes() {
217
-      const item = this.suburbs.find(s => s.display === this.searchText);
218
-      this.propertySearch.province = item.province;
219
-      this.propertySearch.city = item.city;
220
-      this.propertySearch.suburb = item.suburb;
171
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
172
+      // this.propertySearch.province = item.province;
173
+      // this.propertySearch.city = item.city;
174
+      // this.propertySearch.suburb = item.suburb;
221
       this.propertySearch.propertyUsageType = "Residential";
175
       this.propertySearch.propertyUsageType = "Residential";
222
       this.propertySearch.salesType = "Sale";
176
       this.propertySearch.salesType = "Sale";
223
 
177
 
224
       this.$router.push("/property/residential/searchResult");
178
       this.$router.push("/property/residential/searchResult");
225
     },
179
     },
226
     SearchClickRentRes() {
180
     SearchClickRentRes() {
227
-      const item = this.suburbs.find(s => s.display === this.searchText);
228
-      this.propertySearch.province = item.province;
229
-      this.propertySearch.city = item.city;
230
-      this.propertySearch.suburb = item.suburb;
181
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
182
+      // this.propertySearch.province = item.province;
183
+      // this.propertySearch.city = item.city;
184
+      // this.propertySearch.suburb = item.suburb;
231
       this.propertySearch.propertyUsageType = "Residential";
185
       this.propertySearch.propertyUsageType = "Residential";
232
       this.propertySearch.salesType = "Rent";
186
       this.propertySearch.salesType = "Rent";
233
 
187
 
234
       this.$router.push("/property/residential/searchResult");
188
       this.$router.push("/property/residential/searchResult");
235
     },
189
     },
236
     SearchClickBuyComm() {
190
     SearchClickBuyComm() {
237
-      const item = this.suburbs.find(s => s.display === this.searchText);
238
-      this.propertySearch.province = item.province;
239
-      this.propertySearch.city = item.city;
240
-      this.propertySearch.suburb = item.suburb;
191
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
192
+      // this.propertySearch.province = item.province;
193
+      // this.propertySearch.city = item.city;
194
+      // this.propertySearch.suburb = item.suburb;
241
       this.propertySearch.propertyUsageType = "Commercial";
195
       this.propertySearch.propertyUsageType = "Commercial";
242
       this.propertySearch.salesType = "Sale";
196
       this.propertySearch.salesType = "Sale";
243
 
197
 
244
       this.$router.push("/property/commercial/searchResult");
198
       this.$router.push("/property/commercial/searchResult");
245
     },
199
     },
246
     SearchClickRentComm() {
200
     SearchClickRentComm() {
247
-      const item = this.suburbs.find(s => s.display === this.searchText);
248
-      this.propertySearch.province = item.province;
249
-      this.propertySearch.city = item.city;
250
-      this.propertySearch.suburb = item.suburb;
201
+      // const item = this.suburbs.find((s) => s.display === this.searchText);
202
+      // this.propertySearch.province = item.province;
203
+      // this.propertySearch.city = item.city;
204
+      // this.propertySearch.suburb = item.suburb;
251
       this.propertySearch.propertyUsageType = "Commercial";
205
       this.propertySearch.propertyUsageType = "Commercial";
252
       this.propertySearch.salesType = "Rent";
206
       this.propertySearch.salesType = "Rent";
253
 
207
 
255
     },
209
     },
256
     SelectedFilter(item) {
210
     SelectedFilter(item) {
257
       this.searchText = item;
211
       this.searchText = item;
258
-    }
212
+    },
213
+    UpdateAddress(place) {
214
+      this.propertySearch.province = place.province;
215
+      this.propertySearch.city = place.city;
216
+      this.propertySearch.suburb = place.suburb;
217
+    },
259
   },
218
   },
260
-  mounted() {
261
-    this.getSuburbs();
262
-  }
263
 };
219
 };
264
 </script>
220
 </script>
265
 
221
 

+ 21
- 91
src/components/misc/address.vue View File

4
     <div id="errormessage"></div>
4
     <div id="errormessage"></div>
5
     <form method="post" role="form" class="contactForm">
5
     <form method="post" role="form" class="contactForm">
6
       <div class="form-row">
6
       <div class="form-row">
7
+        <div class="form-group col-md-12">
8
+          <AutoComplete @GoogleAddress="UpdateAddress" />
9
+        </div>
7
         <div class="form-group col-md-6">
10
         <div class="form-group col-md-6">
8
           <input
11
           <input
9
             type="text"
12
             type="text"
14
             data-rule="minlen:4"
17
             data-rule="minlen:4"
15
             data-msg="Please enter your street number"
18
             data-msg="Please enter your street number"
16
             v-model="address.streetNumber"
19
             v-model="address.streetNumber"
20
+            disabled
17
           />
21
           />
18
           <div class="validation"></div>
22
           <div class="validation"></div>
19
         </div>
23
         </div>
26
             placeholder="Street Name"
30
             placeholder="Street Name"
27
             data-msg="Please enter your street name"
31
             data-msg="Please enter your street name"
28
             v-model="address.street"
32
             v-model="address.street"
33
+            disabled
29
           />
34
           />
30
           <div class="validation"></div>
35
           <div class="validation"></div>
31
         </div>
36
         </div>
39
             data-rule="minlen:4"
44
             data-rule="minlen:4"
40
             data-msg="Please enter your province"
45
             data-msg="Please enter your province"
41
             v-model="address.province"
46
             v-model="address.province"
47
+            disabled
42
           />
48
           />
43
           <div class="validation"></div>
49
           <div class="validation"></div>
44
         </div>
50
         </div>
52
             data-rule="minlen:4"
58
             data-rule="minlen:4"
53
             data-msg="Please enter your city"
59
             data-msg="Please enter your city"
54
             v-model="address.city"
60
             v-model="address.city"
61
+            disabled
55
           />
62
           />
56
           <div class="validation"></div>
63
           <div class="validation"></div>
57
         </div>
64
         </div>
65
             data-rule="minlen:4"
72
             data-rule="minlen:4"
66
             data-msg="Please enter your suburb"
73
             data-msg="Please enter your suburb"
67
             v-model="address.suburb"
74
             v-model="address.suburb"
75
+            disabled
68
           />
76
           />
69
           <div class="validation"></div>
77
           <div class="validation"></div>
70
         </div>
78
         </div>
77
             placeholder="Postal Code"
85
             placeholder="Postal Code"
78
             data-msg="Please enter your postal code"
86
             data-msg="Please enter your postal code"
79
             v-model="address.postalCode"
87
             v-model="address.postalCode"
88
+            disabled
80
           />
89
           />
81
           <div class="validation"></div>
90
           <div class="validation"></div>
82
         </div>
91
         </div>
87
 
96
 
88
 <script>
97
 <script>
89
 /* eslint-disable */
98
 /* eslint-disable */
90
-import { mapState, mapActions } from "vuex";
91
 import propField from "../property/propertyFieldEditor.vue";
99
 import propField from "../property/propertyFieldEditor.vue";
100
+import AutoComplete from "../shared/addressAutoComplete.vue";
92
 
101
 
93
 export default {
102
 export default {
94
   components: {
103
   components: {
95
-    propField
104
+    propField,
105
+    AutoComplete,
96
   },
106
   },
97
   data() {
107
   data() {
98
     return {
108
     return {
99
-      propertyType: "Residential"
109
+      propertyType: "Residential",
100
     };
110
     };
101
   },
111
   },
102
   props: {
112
   props: {
103
-    address: {}
104
-  },
105
-  computed: {
106
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"])
113
+    address: {},
107
   },
114
   },
108
   methods: {
115
   methods: {
109
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
110
-    ProvinceSelected(item) {
111
-      if (item.target.options.selectedIndex > 0) {
112
-        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
113
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
114
-      }
115
-    },
116
-    CitySelected(item) {
117
-      if (item.target.options.selectedIndex > 0) {
118
-        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
119
-        this.getSuburbs(
120
-          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
121
-        );
122
-      }
123
-    },
124
-    getPostalCode(item) {
125
-      this.address.postalCode = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
116
+    UpdateAddress(place) {
117
+      this.address.streetNumber = place.streetNumber;
118
+      this.address.street = place.streeName;
119
+      this.address.province = place.province;
120
+      this.address.city = place.city;
121
+      this.address.suburb = place.suburb;
122
+      this.address.postalCode = place.postalCode;
126
     },
123
     },
127
-    UpdateValue(item) {
128
-      if (item.fieldName) {
129
-        if (item.fieldName === "streetNumber") {
130
-          this.address.streetNumber = item.value;
131
-        }
132
-        if (item.fieldName === "street") {
133
-          this.address.street = item.value;
134
-        }
135
-        if (item.fieldName === "province") {
136
-          if (item.value !== "") {
137
-            this.address.province = item.value;
138
-            this.getCities(Object.assign({}, { province: item.value }));
139
-            this.address.city = null;
140
-            this.address.suburb = null;
141
-            this.address.postalCode = "";
142
-          } else {
143
-            this.address.province = null;
144
-            this.address.city = null;
145
-            this.address.suburb = null;
146
-            this.address.postalCode = "";
147
-            this.cities = [];
148
-            this.suburbs = [];
149
-          }
150
-        }
151
-        if (item.fieldName === "city") {
152
-          if (item.value !== "") {
153
-            this.address.city = item.value;
154
-            // this.address.city = newCity;
155
-            // this.address.cityId = newCity.id;
156
-            this.getSuburbs(
157
-              Object.assign(
158
-                {},
159
-                {
160
-                  province: item.value,
161
-                  city: item.value
162
-                }
163
-              )
164
-            );
165
-            this.address.suburb = null;
166
-            this.address.postalCode = "";
167
-          } else {
168
-            this.address.city = null;
169
-            this.address.suburb = null;
170
-            this.address.postalCode = "";
171
-            this.suburbs = [];
172
-          }
173
-        }
174
-        if (item.fieldName === "suburb") {
175
-          if (item.value !== "") {
176
-            // const newSuburb = this.suburbs.find(
177
-            //   p => p.description === item.value,
178
-            // );
179
-            // this.address.suburb = newSuburb;
180
-            // this.address.suburbId = newSuburb.id;
181
-            console.log(item.value);
182
-            this.address.suburb = item.value;
183
-            this.address.postalCode = this.address.suburb.postalCode;
184
-          } else {
185
-            this.address.suburb = null;
186
-            this.address.postalCode = "";
187
-          }
188
-        }
189
-      }
190
-    }
191
   },
124
   },
192
-  mounted() {
193
-    this.getProvince();
194
-  }
195
 };
125
 };
196
 </script>
126
 </script>
197
 
127
 

+ 26
- 45
src/components/property/commercial/commercialCarouselSection.vue View File

17
                   aria-controls="buy"
17
                   aria-controls="buy"
18
                   aria-selected="true"
18
                   aria-selected="true"
19
                   @click="SetSalesType('Sale')"
19
                   @click="SetSalesType('Sale')"
20
-                  >Buy office space</a
21
-                >
20
+                >Buy office space</a>
22
               </li>
21
               </li>
23
               <li class="nav-item">
22
               <li class="nav-item">
24
                 <a
23
                 <a
30
                   aria-controls="rent"
29
                   aria-controls="rent"
31
                   aria-selected="false"
30
                   aria-selected="false"
32
                   @click="SetSalesType('Rent')"
31
                   @click="SetSalesType('Rent')"
33
-                  >Rent an office</a
34
-                >
32
+                >Rent an office</a>
35
               </li>
33
               </li>
36
             </ul>
34
             </ul>
37
             <div class="tab-content" id="pills-tabContent">
35
             <div class="tab-content" id="pills-tabContent">
48
                 <h4>PROPERTIES FOR SALE</h4>
46
                 <h4>PROPERTIES FOR SALE</h4>
49
                 <div class="row">
47
                 <div class="row">
50
                   <div class="form-group col-md-12">
48
                   <div class="form-group col-md-12">
51
-                    <autoComplete
52
-                      align="left"
53
-                      class="col-md-11 offset-1"
54
-                      :items="suburbList"
55
-                      @selection="SelectedFilter"
56
-                      style="width:100%; margin-left:-15px"
57
-                    />
49
+                    <autoComplete @GoogleAddress="SetAddress" />
58
                   </div>
50
                   </div>
59
                 </div>
51
                 </div>
60
-                <a v-on:click="SearchClick" class="btn-solid-blue"
61
-                  ><i class="fa fa-search"></i> SEARCH</a
62
-                >
52
+                <a v-on:click="SearchClick" class="btn-solid-blue">
53
+                  <i class="fa fa-search"></i> SEARCH
54
+                </a>
63
               </div>
55
               </div>
64
 
56
 
65
               <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
57
               <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
66
                 <h4>RENTAL PROPERTIES</h4>
58
                 <h4>RENTAL PROPERTIES</h4>
67
                 <div class="row">
59
                 <div class="row">
68
                   <div class="form-group col-md-12">
60
                   <div class="form-group col-md-12">
69
-                    <autoComplete
70
-                      align="left"
71
-                      class="col-md-11 offset-1"
72
-                      :items="suburbList"
73
-                      @selection="SelectedFilter"
74
-                      style="width:100%; margin-left:-15px"
75
-                    />
61
+                    <autoComplete @GoogleAddress="SetAddress" />
76
                   </div>
62
                   </div>
77
                 </div>
63
                 </div>
78
-                <a v-on:click="SearchClick" class="btn-solid-blue"
79
-                  ><i class="fa fa-search"></i> FIND</a
80
-                >
64
+                <a v-on:click="SearchClick" class="btn-solid-blue">
65
+                  <i class="fa fa-search"></i> FIND
66
+                </a>
81
               </div>
67
               </div>
82
             </div>
68
             </div>
83
           </div>
69
           </div>
95
       style="margin-top:-50px"
81
       style="margin-top:-50px"
96
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
82
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
97
     >
83
     >
98
-      <img class="item" src="img/intro-carousel/comm-1.jpg" alt="" />
99
-      <img class="item" src="img/intro-carousel/comm-2.jpg" alt="" />
100
-      <img class="item" src="img/intro-carousel/comm-3.jpg" alt="" />
101
-      <img class="item" src="img/intro-carousel/comm-4.jpg" alt="" />
102
-      <img class="item" src="img/intro-carousel/comm-5.jpg" alt="" />
103
-      <img class="item" src="img/intro-carousel/comm-6.jpg" alt="" />
84
+      <img class="item" src="img/intro-carousel/comm-1.jpg" alt />
85
+      <img class="item" src="img/intro-carousel/comm-2.jpg" alt />
86
+      <img class="item" src="img/intro-carousel/comm-3.jpg" alt />
87
+      <img class="item" src="img/intro-carousel/comm-4.jpg" alt />
88
+      <img class="item" src="img/intro-carousel/comm-5.jpg" alt />
89
+      <img class="item" src="img/intro-carousel/comm-6.jpg" alt />
104
     </carousel>
90
     </carousel>
105
 
91
 
106
     <div id="intro-carousel" class="owl-carousel"></div>
92
     <div id="intro-carousel" class="owl-carousel"></div>
110
 <script>
96
 <script>
111
 /* eslint-disable */
97
 /* eslint-disable */
112
 import { mapState, mapActions } from "vuex";
98
 import { mapState, mapActions } from "vuex";
113
-import autoComplete from "../../shared/autoComplete";
99
+import autoComplete from "../../shared/addressAutoComplete";
114
 import carousel from "vue-owl-carousel";
100
 import carousel from "vue-owl-carousel";
115
 import searchResult from "./commercialSearchResults";
101
 import searchResult from "./commercialSearchResults";
116
 export default {
102
 export default {
117
   components: {
103
   components: {
118
     carousel,
104
     carousel,
119
     autoComplete,
105
     autoComplete,
120
-    searchResult
106
+    searchResult,
121
   },
107
   },
122
   data() {
108
   data() {
123
     return {
109
     return {
124
       propertyUsageType: "Commercial",
110
       propertyUsageType: "Commercial",
125
       salesType: "Sale",
111
       salesType: "Sale",
126
       searchText: "",
112
       searchText: "",
127
-      clicked: false
113
+      clicked: false,
128
     };
114
     };
129
   },
115
   },
130
   computed: {
116
   computed: {
131
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
117
+    ...mapState("propertySearch", ["propertySearch"]),
132
   },
118
   },
133
   methods: {
119
   methods: {
134
-    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
120
+    ...mapActions("propertySearch", ["applyFilter"]),
135
     SetSalesType(value) {
121
     SetSalesType(value) {
136
       this.salesType = value;
122
       this.salesType = value;
137
     },
123
     },
138
     SearchClick() {
124
     SearchClick() {
139
-      const item = this.suburbs.find(s => s.display === this.searchText);
140
-      this.propertySearch.province = item.province;
141
-      this.propertySearch.city = item.city;
142
-      this.propertySearch.suburb = item.suburb;
143
       this.propertySearch.propertyUsageType = this.propertyUsageType;
125
       this.propertySearch.propertyUsageType = this.propertyUsageType;
144
       this.propertySearch.salesType = this.salesType;
126
       this.propertySearch.salesType = this.salesType;
145
 
127
 
146
       this.$router.push("/property/commercial/searchResult");
128
       this.$router.push("/property/commercial/searchResult");
147
     },
129
     },
148
-    SelectedFilter(item) {
149
-      this.searchText = item;
150
-    }
130
+    SetAddress(place) {
131
+      this.propertySearch.province = place.province;
132
+      this.propertySearch.city = place.city;
133
+      this.propertySearch.suburb = place.suburb;
134
+    },
151
   },
135
   },
152
-  mounted() {
153
-    this.getSuburbs();
154
-  }
155
 };
136
 };
156
 </script>
137
 </script>
157
 
138
 

+ 26
- 18
src/components/property/commercial/commercialSearchResults.vue View File

2
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
2
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
3
     <section>
3
     <section>
4
       <div class="container">
4
       <div class="container">
5
-        <div class="row pt-5  justify-content-md-center">
5
+        <div class="row pt-5 justify-content-md-center">
6
           <h3 v-if="propertySearch.salesType === 'Sale'">COMMERCIAL PROPERTIES FOR SALE</h3>
6
           <h3 v-if="propertySearch.salesType === 'Sale'">COMMERCIAL PROPERTIES FOR SALE</h3>
7
           <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
7
           <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
8
         </div>
8
         </div>
14
           >
14
           >
15
             <div>
15
             <div>
16
               <div class="portfolio-item">
16
               <div class="portfolio-item">
17
-                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt="" />
17
+                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
18
 
18
 
19
                 <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
19
                 <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
20
-                <p>
21
-                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
22
-                  situated in the best location. Incredible bargain!
23
-                </p>
20
+                <p>{{currentProperty.shortDescription }}</p>
24
                 <br />
21
                 <br />
25
 
22
 
26
                 <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
23
                 <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
27
                 <router-link
24
                 <router-link
28
                   class="btn-white-border"
25
                   class="btn-white-border"
29
                   :to="`/property/commercial/property/${currentProperty.id}`"
26
                   :to="`/property/commercial/property/${currentProperty.id}`"
30
-                  >VIEW</router-link
31
-                >
27
+                >VIEW</router-link>
32
               </div>
28
               </div>
33
             </div>
29
             </div>
34
           </div>
30
           </div>
41
             <p>Sorry no listings where found matching your search</p>
37
             <p>Sorry no listings where found matching your search</p>
42
           </div>
38
           </div>
43
         </div>
39
         </div>
40
+        <div v-if="wait" id="preloader"></div>
44
       </div>
41
       </div>
45
     </section>
42
     </section>
46
   </main>
43
   </main>
54
 export default {
51
 export default {
55
   name: "propertysearch",
52
   name: "propertysearch",
56
   components: {
53
   components: {
57
-    propertyCard
54
+    propertyCard,
58
   },
55
   },
59
   data() {
56
   data() {
60
-    return {};
57
+    return {
58
+      wait: true,
59
+    };
61
   },
60
   },
62
   mounted() {
61
   mounted() {
62
+    this.wait = true;
63
     console.log(this.propertySearch.salesType);
63
     console.log(this.propertySearch.salesType);
64
 
64
 
65
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
65
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
69
       this.propertySearch.userName = this.user.username;
69
       this.propertySearch.userName = this.user.username;
70
     }
70
     }
71
 
71
 
72
-    this.searchProperties(this.propertySearch);
72
+    this.searchProperties(this.propertySearch).then((fulfilled) => {
73
+      this.wait = false;
74
+    });
73
   },
75
   },
74
   methods: {
76
   methods: {
75
     ...mapActions("propertySearch", [
77
     ...mapActions("propertySearch", [
76
       "searchProperties",
78
       "searchProperties",
77
       "clearProperties",
79
       "clearProperties",
78
-      "updateResultsShowing"
80
+      "updateResultsShowing",
79
     ]),
81
     ]),
80
     SetType(item) {
82
     SetType(item) {
81
       this.propertySearch.propertyUsageType = item;
83
       this.propertySearch.propertyUsageType = item;
83
     SearchPage() {
85
     SearchPage() {
84
       this.clearProperties();
86
       this.clearProperties();
85
       this.$router.push("/property/search");
87
       this.$router.push("/property/search");
86
-    }
88
+    },
87
   },
89
   },
88
   computed: {
90
   computed: {
89
-    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
91
+    ...mapState("propertySearch", [
92
+      "properties",
93
+      "propertySearch",
94
+      "resultsShowing",
95
+    ]),
90
     ...mapState("authentication", ["user"]),
96
     ...mapState("authentication", ["user"]),
91
     ParamsChanged() {
97
     ParamsChanged() {
92
       console.log(JSON.stringify(this.propertySearch));
98
       console.log(JSON.stringify(this.propertySearch));
94
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
100
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
95
         this.propertySearch.propertyUsageType = "Residential";
101
         this.propertySearch.propertyUsageType = "Residential";
96
       }
102
       }
97
-      this.searchProperties(this.propertySearch);
103
+      this.searchProperties(this.propertySearch).then((fulfilled) => {
104
+        this.wait = false;
105
+      });
98
       return null;
106
       return null;
99
-    }
107
+    },
100
   },
108
   },
101
   watch: {
109
   watch: {
102
     ParamsChanged() {
110
     ParamsChanged() {
103
       return null;
111
       return null;
104
-    }
105
-  }
112
+    },
113
+  },
106
 };
114
 };
107
 </script>
115
 </script>
108
 
116
 

+ 59
- 167
src/components/property/commercial/createProperty/commercialCreate.vue View File

37
               @change="PropertyTypeSelected"
37
               @change="PropertyTypeSelected"
38
             >
38
             >
39
               <option value="0">Please select type *</option>
39
               <option value="0">Please select type *</option>
40
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
41
-                {{ item.description }}
42
-              </option>
40
+              <option
41
+                v-for="item in propertyTypes"
42
+                :value="item.id"
43
+                :key="item.id"
44
+              >{{ item.description }}</option>
43
             </select>
45
             </select>
44
           </div>
46
           </div>
45
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
47
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
58
         <div class="row my-5">
60
         <div class="row my-5">
59
           <div class="col-md-6">
61
           <div class="col-md-6">
60
             <mapSection v-on:map-location="updateLocation" />
62
             <mapSection v-on:map-location="updateLocation" />
63
+            <input
64
+              type="checkbox"
65
+              v-model="property.showAddress"
66
+              style="margin-right: 10px; margin-top: 10px;"
67
+            />
68
+            <label>Show address on listing</label>
61
           </div>
69
           </div>
62
           <div class="col-md-6">
70
           <div class="col-md-6">
63
             <div class="row">
71
             <div class="row">
67
                     for="price"
75
                     for="price"
68
                     class="uniSelectLabel"
76
                     class="uniSelectLabel"
69
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
77
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
70
-                    >{{ salesType }} Price</label
71
-                  >
78
+                  >{{ salesType }} Price</label>
72
                 </div>
79
                 </div>
73
                 <input
80
                 <input
74
                   class="form-control uniInput"
81
                   class="form-control uniInput"
182
           :savedImages="propertyImages"
189
           :savedImages="propertyImages"
183
           @DefaultImage="UpdateDefaultImage"
190
           @DefaultImage="UpdateDefaultImage"
184
         />
191
         />
185
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
186
-          Save
187
-        </button>
188
-        <div v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError">
189
-          <p class="alert myError">
190
-            Missing fields. Please fill in all required fields. Marked with *
191
-          </p>
192
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
193
+        <div v-if="showPropertyTypeError">
194
+          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
192
         </div>
195
         </div>
193
-        <div v-if="wait" id="preloader"></div>
194
-        <!-- <div class="row">
195
-          <div class="col-md-6">
196
-            <div v-if="!property.addressLine1">
197
-              <label for="unit" class="uniSelectLabel">STREET NUMBER</label>
198
-            </div>
199
-            <input
200
-              class="form-control uniInput"
201
-              type="text"
202
-              name="streetnumber"
203
-              v-model="property.addressLine1"
204
-            />
205
-          </div>
206
-          <div class="col-md-6">
207
-            <div v-if="!property.addressLine2">
208
-              <label for="streetname" class="uniSelectLabel">STREET NAME</label>
209
-            </div>
210
-            <input
211
-              class="form-control uniInput"
212
-              type="text"
213
-              name="streetname"
214
-              id="streetname"
215
-              v-model="property.addressLine2"
216
-            />
217
-          </div>
218
-        </div>
219
-        <div class="row my-3">
220
-          <div class="col-md-6">
221
-            <div v-if="!property.provinceId">
222
-              <label for="province" class="uniSelectLabel">PROVINCE</label>
223
-            </div>
224
-            <input
225
-              class="form-control uniInput"
226
-              type="text"
227
-              name="province"
228
-              v-model="selectedProvince"
229
-            />
230
-          </div>
231
-          <div class="col-md-6">
232
-            <div v-if="!property.cityId">
233
-              <label for="city" class="uniSelectLabel">CITY</label>
234
-            </div>
235
-            <input
236
-              class="form-control uniInput"
237
-              type="text"
238
-              name="city"
239
-              id="city"
240
-              v-model="selectedCity"
241
-            />
242
-          </div>
196
+        <div v-if="!addressSet">
197
+          <p class="alert myError">Please enter an address.</p>
243
         </div>
198
         </div>
244
-        <div class="row my-3">
245
-          <div class="col-md-6">
246
-            <div v-if="!property.suburbId">
247
-              <label for="suburb" class="uniSelectLabel">SUBURB</label>
248
-            </div>
249
-            <input
250
-              class="form-control uniInput"
251
-              type="text"
252
-              name="suburb"
253
-              v-model="selectedSuburb"
254
-            />
255
-          </div>
256
-          <div class="col-md-6">
257
-            <div v-if="!property.addressLine3">
258
-              <label for="code" class="uniSelectLabel">POSTAL CODE</label>
259
-            </div>
260
-            <input
261
-              class="form-control uniInput"
262
-              type="text"
263
-              name="code"
264
-              id="code"
265
-              v-model="property.addressLine3"
266
-            />
267
-          </div>
268
-        </div> -->
199
+        <div v-if="wait" id="preloader"></div>
269
       </div>
200
       </div>
270
     </main>
201
     </main>
271
   </div>
202
   </div>
288
     ImageLoad,
219
     ImageLoad,
289
     VueEditor,
220
     VueEditor,
290
     carouselSection,
221
     carouselSection,
291
-    mapSection
222
+    mapSection,
292
   },
223
   },
293
   data() {
224
   data() {
294
     return {
225
     return {
295
       propertyType: "Commercial",
226
       propertyType: "Commercial",
296
       salesType: "Rental",
227
       salesType: "Rental",
297
-      selectedProvince: "",
298
-      selectedCity: "",
299
-      selectedSuburb: "",
300
       images: [],
228
       images: [],
301
       propertyFieldValues: [],
229
       propertyFieldValues: [],
302
       defaultImage: 0,
230
       defaultImage: 0,
304
       customToolbar: [
232
       customToolbar: [
305
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
233
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
306
         ["bold", "italic", "underline", "strike"],
234
         ["bold", "italic", "underline", "strike"],
307
-        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
235
+        [
236
+          { align: "" },
237
+          { align: "center" },
238
+          { align: "right" },
239
+          { align: "justify" },
240
+        ],
308
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
241
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
309
         [{ script: "sub" }, { script: "super" }],
242
         [{ script: "sub" }, { script: "super" }],
310
-        [{ indent: "-1" }, { indent: "+1" }]
243
+        [{ indent: "-1" }, { indent: "+1" }],
311
       ],
244
       ],
312
       error: "",
245
       error: "",
246
+      addressSet: false,
313
       showPropertyTypeError: false,
247
       showPropertyTypeError: false,
314
-      showProvinceError: false,
315
-      showCityError: false,
316
-      showSuburbError: false,
317
       showDateError: false,
248
       showDateError: false,
318
       user: Log.getUser(),
249
       user: Log.getUser(),
319
-      mayEdit: Log.isLoggedIn()
250
+      mayEdit: Log.isLoggedIn(),
320
     };
251
     };
321
   },
252
   },
322
   methods: {
253
   methods: {
323
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
324
     ...mapActions("property", [
254
     ...mapActions("property", [
325
       "getPropertyTypes",
255
       "getPropertyTypes",
326
       "getPropertyOverviewFields",
256
       "getPropertyOverviewFields",
328
       "saveProperty",
258
       "saveProperty",
329
       "getProperty",
259
       "getProperty",
330
       "getPropertyImages",
260
       "getPropertyImages",
331
-      "clearProperty",
332
       "clearPropertyImages",
261
       "clearPropertyImages",
333
       "getPropertyEditDisplay",
262
       "getPropertyEditDisplay",
334
       "getPropertySavedOverviewFields",
263
       "getPropertySavedOverviewFields",
335
       "getPropertySavedFields",
264
       "getPropertySavedFields",
336
-      "getSavedPropertyData"
265
+      "getSavedPropertyData",
337
     ]),
266
     ]),
338
     updateLocation(place) {
267
     updateLocation(place) {
339
-      this.property.addressLine1 = place.mapComponents[0].short_name;
340
-      this.property.addressLine2 = place.mapComponents[1].short_name;
341
-      this.property.addressLine3 = place.mapComponents[7].short_name;
342
-      this.property.provinceId = place.provinceId;
343
-      this.property.cityId = place.cityId;
344
-      this.property.suburbId = place.suburbId;
268
+      this.addressSet = true;
269
+      this.property.streetNumber = place.streetNumber;
270
+      this.property.streetName = place.streetName;
271
+      this.property.suburb = place.suburb;
272
+      this.property.city = place.city;
273
+      this.property.province = place.province;
274
+      this.property.country = place.country;
275
+      this.property.postalCode = place.postalCode;
276
+      this.property.addressUrl = place.url;
345
       this.property.propertCoords = place.coords;
277
       this.property.propertCoords = place.coords;
346
     },
278
     },
347
     TypeChanged() {
279
     TypeChanged() {
351
       if (this.property.propertyTypeId === 0) {
283
       if (this.property.propertyTypeId === 0) {
352
         this.showPropertyTypeError = true;
284
         this.showPropertyTypeError = true;
353
       }
285
       }
354
-      if (this.property.provinceId === 0) {
355
-        this.showProvinceError = true;
356
-      }
357
-      if (this.property.cityId === 0) {
358
-        this.showCityError = true;
359
-      }
360
-      if (this.property.suburbId === 0) {
361
-        this.showSuburbError = true;
362
-      }
363
 
286
 
364
-      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
287
+      if (
288
+        this.salesType === "Rental" &&
289
+        this.property.dateAvailable === "undef"
290
+      ) {
365
         this.showDateError = true;
291
         this.showDateError = true;
366
       }
292
       }
367
 
293
 
368
-      if (
369
-        this.showPropertyTypeError ||
370
-        this.showProvinceError ||
371
-        this.showCityError ||
372
-        this.showSuburbError ||
373
-        this.showDateError
374
-      ) {
294
+      if (this.showPropertyTypeError || this.showDateError) {
375
         return;
295
         return;
376
       }
296
       }
377
 
297
 
380
         this.property.isSale = true;
300
         this.property.isSale = true;
381
         this.property.dateAvailable = new Date();
301
         this.property.dateAvailable = new Date();
382
       }
302
       }
303
+      if (this.images.length > 0) {
304
+        this.property.propertyImages = [];
305
+      }
383
       // eslint-disable-next-line no-plusplus
306
       // eslint-disable-next-line no-plusplus
384
       for (let i = 0; i < this.images.length; i++) {
307
       for (let i = 0; i < this.images.length; i++) {
385
         let setAsDefault = false;
308
         let setAsDefault = false;
388
         }
311
         }
389
         this.property.propertyImages.push({
312
         this.property.propertyImages.push({
390
           image: this.images[i],
313
           image: this.images[i],
391
-          isDefault: setAsDefault
314
+          isDefault: setAsDefault,
392
         });
315
         });
393
       }
316
       }
394
       this.property.propertyUserFields = this.propertyFieldValues;
317
       this.property.propertyUserFields = this.propertyFieldValues;
397
         this.property.userId = this.user.id;
320
         this.property.userId = this.user.id;
398
       }
321
       }
399
 
322
 
400
-      console.log(this.property);
401
-
402
       this.saveProperty(this.property)
323
       this.saveProperty(this.property)
403
-        .then(fulfilled => {
404
-          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
324
+        .then((fulfilled) => {
325
+          this.$router.push(
326
+            `/property/commercial/property/${fulfilled.data.id}`
327
+          );
405
         })
328
         })
406
-        .catch(error => {
329
+        .catch((error) => {
407
           console.log(error.message);
330
           console.log(error.message);
408
         });
331
         });
409
     },
332
     },
420
         this.showPropertyTypeError = true;
343
         this.showPropertyTypeError = true;
421
       }
344
       }
422
     },
345
     },
423
-    ProvinceSelected(item) {
424
-      if (item.target.options.selectedIndex > 0) {
425
-        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
426
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
427
-        this.showProvinceError = false;
428
-      } else {
429
-        this.showProvinceError = true;
430
-      }
431
-    },
432
-    CitySelected(item) {
433
-      if (item.target.options.selectedIndex > 0) {
434
-        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
435
-        this.getSuburbs(
436
-          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
437
-        );
438
-        this.showCityError = false;
439
-      } else {
440
-        this.showCityError = true;
441
-      }
442
-    },
443
-    getPostalCode(item) {
444
-      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
445
-      if (item.target.options.selectedIndex > 0) {
446
-        this.showSuburbError = false;
447
-      } else {
448
-        this.showSuburbError = true;
449
-      }
450
-    },
451
     loadedImages(values) {
346
     loadedImages(values) {
452
       this.images = values;
347
       this.images = values;
453
     },
348
     },
454
     UpdateUserDefinedFields(item) {
349
     UpdateUserDefinedFields(item) {
455
       let update = false;
350
       let update = false;
456
-      this.propertyFieldValues.forEach(element => {
351
+      this.propertyFieldValues.forEach((element) => {
457
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
352
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
458
           element.value = item.value;
353
           element.value = item.value;
459
           update = true;
354
           update = true;
465
     },
360
     },
466
     UpdateDefaultImage(item) {
361
     UpdateDefaultImage(item) {
467
       this.defaultImage = item;
362
       this.defaultImage = item;
468
-    }
363
+    },
469
   },
364
   },
470
   mounted() {
365
   mounted() {
471
     this.wait = false;
366
     this.wait = false;
472
-    this.clearProperty();
367
+    this.getProperty(0);
473
     this.clearPropertyImages();
368
     this.clearPropertyImages();
474
     this.images = [];
369
     this.images = [];
475
     this.defaultImage = 0;
370
     this.defaultImage = 0;
491
 
386
 
492
     this.getPropertyTypes(this.propertyType);
387
     this.getPropertyTypes(this.propertyType);
493
 
388
 
494
-    this.getProvince();
495
     this.getPropertyOverviewFields();
389
     this.getPropertyOverviewFields();
496
     this.getPropertyFields(this.propertyType);
390
     this.getPropertyFields(this.propertyType);
497
   },
391
   },
498
   computed: {
392
   computed: {
499
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
500
     ...mapState("property", [
393
     ...mapState("property", [
501
       "propertyTypes",
394
       "propertyTypes",
502
       "propertyOverviewFields",
395
       "propertyOverviewFields",
503
       "propertyFields",
396
       "propertyFields",
504
       "property",
397
       "property",
505
-      "propertyImages"
398
+      "propertyImages",
506
     ]),
399
     ]),
507
-    ...mapState("authentication", ["user"]),
508
     SalesTypeChanged() {
400
     SalesTypeChanged() {
509
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
401
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
510
       // this.propertyType = this.$route.params.propType;
402
       // this.propertyType = this.$route.params.propType;
522
       this.getPropertyTypes(this.propertyType);
414
       this.getPropertyTypes(this.propertyType);
523
 
415
 
524
       return this.propertyType;
416
       return this.propertyType;
525
-    }
417
+    },
526
   },
418
   },
527
   watch: {
419
   watch: {
528
     SalesTypeChanged() {
420
     SalesTypeChanged() {
529
       return null;
421
       return null;
530
-    }
531
-  }
422
+    },
423
+  },
532
 };
424
 };
533
 </script>
425
 </script>
534
 
426
 

+ 16
- 17
src/components/property/commercial/singleView/contentSection.vue View File

6
           <div class="resPortfolioSection" style="margin-top:-5px">
6
           <div class="resPortfolioSection" style="margin-top:-5px">
7
             <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
7
             <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
8
               <div v-if="i < 3">
8
               <div v-if="i < 3">
9
-                <img
10
-                  v-if="i === 0"
11
-                  style="width:100%; height:201px;object-fit: cover"
12
-                  :src="image"
13
-                />
9
+                <img v-if="i === 0" style="width:100%; height:201px;object-fit: cover" :src="image" />
14
                 <div v-else-if="i !== 0">
10
                 <div v-else-if="i !== 0">
15
                   <img
11
                   <img
16
                     v-if="i % 2 === 0"
12
                     v-if="i % 2 === 0"
27
 
23
 
28
           <div class="panel-left p-5" style="margin-top:140px; margin-bottom:50px">
24
           <div class="panel-left p-5" style="margin-top:140px; margin-bottom:50px">
29
             <h2>Property Detial</h2>
25
             <h2>Property Detial</h2>
30
-            <p>{{ property.addressLine1 }} {{ property.addressLine2 }}</p>
31
-            <p>{{ property.city.description }}, {{ property.suburb.description }}</p>
26
+            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
27
+            <p>{{ property.suburb }}, {{ property.city }}</p>
32
             <p>{{ property.shortDescription }}</p>
28
             <p>{{ property.shortDescription }}</p>
33
             <p>{{ property.price | toCurrency }}</p>
29
             <p>{{ property.price | toCurrency }}</p>
34
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
30
+            <div class="btn-white-border">
31
+              <i class="fa fa-search"></i>BOOK A VIEWING
32
+            </div>
35
           </div>
33
           </div>
36
         </div>
34
         </div>
37
         <div class="col-md-8 p-5 resort-profile">
35
         <div class="col-md-8 p-5 resort-profile">
38
-          <h2>
39
-            {{ property.propertyName }} / {{ property.addressLine1 }} {{ property.addressLine2 }}
40
-          </h2>
36
+          <h2
37
+            v-if="property.showAddress"
38
+          >{{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}</h2>
39
+          <h2>{{ property.propertyName }}</h2>
41
           <div>
40
           <div>
42
             <table class="table table-striped">
41
             <table class="table table-striped">
43
               <thead>
42
               <thead>
56
                   <td>#{{ property.unit }}</td>
55
                   <td>#{{ property.unit }}</td>
57
                   <td>Second Floor</td>
56
                   <td>Second Floor</td>
58
                   <td>yes</td>
57
                   <td>yes</td>
59
-                  <td>
58
+                  <td v-if="property.displayData && property.displayData.length > 0">
60
                     <div class="row" v-for="(feat, i) in property.displayData[0].values" :key="i">
59
                     <div class="row" v-for="(feat, i) in property.displayData[0].values" :key="i">
61
                       <div class="col" v-if="feat.value.toUpperCase() !== 'NO'">
60
                       <div class="col" v-if="feat.value.toUpperCase() !== 'NO'">
62
                         <div></div>
61
                         <div></div>
83
               marginheight="0"
82
               marginheight="0"
84
               marginwidth="0"
83
               marginwidth="0"
85
             ></iframe>
84
             ></iframe>
86
-          </div> -->
85
+          </div>-->
87
         </div>
86
         </div>
88
       </div>
87
       </div>
89
     </div>
88
     </div>
95
 import gallery from "../../../shared/gallerySlideShow";
94
 import gallery from "../../../shared/gallerySlideShow";
96
 export default {
95
 export default {
97
   components: {
96
   components: {
98
-    gallery
97
+    gallery,
99
   },
98
   },
100
   props: {
99
   props: {
101
     property: {},
100
     property: {},
102
-    propertyImages: {}
101
+    propertyImages: {},
103
   },
102
   },
104
   mounted() {
103
   mounted() {
105
     console.log(this.property);
104
     console.log(this.property);
107
   data() {
106
   data() {
108
     return {
107
     return {
109
       index: null,
108
       index: null,
110
-      date: new Date()
109
+      date: new Date(),
111
     };
110
     };
112
-  }
111
+  },
113
 };
112
 };
114
 </script>
113
 </script>
115
 
114
 

+ 62
- 66
src/components/property/mapSection.vue View File

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <gmap-autocomplete
4
-      class="form-control mb-3 uniInput"
5
-      @place_changed="setPlace"
6
-    ></gmap-autocomplete>
3
+    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace">*</gmap-autocomplete>
7
     <GmapMap
4
     <GmapMap
8
       :center="mapCenter"
5
       :center="mapCenter"
9
       :zoom="mapZoom"
6
       :zoom="mapZoom"
18
 
15
 
19
 <script>
16
 <script>
20
 /* eslint-disable */
17
 /* eslint-disable */
21
-import { mapState, mapActions } from "vuex";
22
 import { gmapApi } from "vue2-google-maps";
18
 import { gmapApi } from "vue2-google-maps";
23
 export default {
19
 export default {
24
   computed: {
20
   computed: {
25
     google: gmapApi,
21
     google: gmapApi,
26
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"])
27
   },
22
   },
28
   data() {
23
   data() {
29
     return {
24
     return {
30
       place: null,
25
       place: null,
31
       mapCenter: { lat: -26.195246, lng: 28.034088 },
26
       mapCenter: { lat: -26.195246, lng: 28.034088 },
32
       mapZoom: 11,
27
       mapZoom: 11,
33
-      selectedProvince: "",
34
-      selectedCity: "",
35
-      selectedSuburb: "",
36
-      mapObj: {
37
-        provinceId: "",
38
-        cityId: "",
39
-        suburbId: "",
40
-        mapComponents: null
41
-      }
28
+      streetNumber: "",
29
+      streetName: "",
30
+      suburb: "",
31
+      city: "",
32
+      province: "",
33
+      country: "",
34
+      postalCode: "",
35
+      url: "",
36
+      coords: {},
42
     };
37
     };
43
   },
38
   },
44
 
39
 
45
   methods: {
40
   methods: {
46
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
47
-    async pullProvince(provinceParam) {
48
-      await this.provinces.forEach(province => {
49
-        if (province.code === provinceParam) {
50
-          this.mapObj.provinceId = province.id;
51
-          this.selectedProvince = province.description;
52
-        }
53
-      });
54
-      await this.getCities(Object.assign({}, { province: this.selectedProvince }));
55
-      return Promise.resolve();
56
-    },
57
-    async pullCities(cityParam) {
58
-      await this.cities.forEach(city => {
59
-        if (city.description === cityParam) {
60
-          this.mapObj.cityId = city.id;
61
-          this.selectedCity = city.description;
62
-        }
63
-      });
64
-      await this.getSuburbs(
65
-        Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
66
-      );
67
-      return Promise.resolve();
68
-    },
69
-    async pullSuburbs(suburbParam) {
70
-      await this.suburbs.forEach(suburb => {
71
-        if (suburb.description === suburbParam) {
72
-          this.mapObj.suburbId = suburb.id;
73
-          this.selectedSuburb = suburb.description;
74
-        }
75
-      });
76
-      return Promise.resolve();
77
-    },
78
     setPlace(place) {
41
     setPlace(place) {
79
       this.place = place;
42
       this.place = place;
80
       this.mapCenter = place.geometry.location;
43
       this.mapCenter = place.geometry.location;
81
       this.mapZoom = 17;
44
       this.mapZoom = 17;
82
-      this.mapObj.mapComponents = place.address_components;
83
 
45
 
84
-      this.pullProvince(place.address_components[5].short_name).then(() => {
85
-        setTimeout(
86
-          () =>
87
-            this.pullCities(place.address_components[3].short_name).then(() => {
88
-              setTimeout(
89
-                () =>
90
-                  this.pullSuburbs(place.address_components[2].short_name).then(() => {
91
-                    var coords = place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
92
-                    this.mapObj.coords = coords;
93
-                    this.$emit("map-location", this.mapObj);
94
-                  }),
95
-                1000
96
-              );
97
-            }),
98
-          1000
99
-        );
46
+      this.streetNumber = "";
47
+      this.streetName = "";
48
+      this.suburb = "";
49
+      this.city = "";
50
+      this.province = "";
51
+      this.country = "";
52
+      this.postalCode = "";
53
+      this.url = "";
54
+      this.coords = {};
55
+      for (let i = 0; i < place.address_components.length; i++) {
56
+        if (place.address_components[i].types[0] === "street_number") {
57
+          this.streetNumber = place.address_components[i].long_name;
58
+        }
59
+        if (place.address_components[i].types[0] === "route") {
60
+          this.streetName = place.address_components[i].long_name;
61
+        }
62
+        if (place.address_components[i].types[0] === "sublocality_level_1") {
63
+          this.suburb = place.address_components[i].long_name;
64
+        }
65
+        if (place.address_components[i].types[0] === "locality") {
66
+          this.city = place.address_components[i].long_name;
67
+        }
68
+        if (
69
+          place.address_components[i].types[0] === "administrative_area_level_1"
70
+        ) {
71
+          this.province = place.address_components[i].long_name;
72
+        }
73
+        if (place.address_components[i].types[0] === "country") {
74
+          this.country = place.address_components[i].long_name;
75
+        }
76
+        if (place.address_components[i].types[0] === "postal_code") {
77
+          this.postalCode = place.address_components[i].long_name;
78
+        }
79
+        this.url = place.url;
80
+      }
81
+
82
+      var coords =
83
+        place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
84
+      this.coords = coords;
85
+
86
+      this.$emit("map-location", {
87
+        streetNumber: this.streetNumber,
88
+        streetName: this.streetName,
89
+        suburb: this.suburb,
90
+        city: this.city,
91
+        province: this.province,
92
+        country: this.country,
93
+        postalCode: this.postalCode,
94
+        url: this.url,
95
+        coords: this.coords,
100
       });
96
       });
101
-    }
102
-  }
97
+    },
98
+  },
103
 };
99
 };
104
 </script>
100
 </script>
105
 
101
 

+ 81
- 99
src/components/property/propertyCreate.vue View File

35
             class="btn btn-b-n"
35
             class="btn btn-b-n"
36
             style="width: 150px; height:40px;"
36
             style="width: 150px; height:40px;"
37
             @click="Login"
37
             @click="Login"
38
-          >
39
-            Login
40
-          </button>
38
+          >Login</button>
41
         </div>
39
         </div>
42
       </div>
40
       </div>
43
       <div class="row" v-if="mayEdit">
41
       <div class="row" v-if="mayEdit">
86
                     @change="PropertyTypeSelected"
84
                     @change="PropertyTypeSelected"
87
                   >
85
                   >
88
                     <option value="0">Please select type</option>
86
                     <option value="0">Please select type</option>
89
-                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
90
-                      {{ item.description }}
91
-                    </option>
87
+                    <option
88
+                      v-for="item in propertyTypes"
89
+                      :value="item.id"
90
+                      :key="item.id"
91
+                    >{{ item.description }}</option>
92
                   </select>
92
                   </select>
93
                 </div>
93
                 </div>
94
                 <div v-if="showPropertyTypeError">
94
                 <div v-if="showPropertyTypeError">
170
                     v-model="property.provinceId"
170
                     v-model="property.provinceId"
171
                   >
171
                   >
172
                     <option value="0">Please select province</option>
172
                     <option value="0">Please select province</option>
173
-                    <option v-for="province in provinces" :value="province.id" :key="province.id">
174
-                      {{ province.description }}
175
-                    </option>
173
+                    <option
174
+                      v-for="province in provinces"
175
+                      :value="province.id"
176
+                      :key="province.id"
177
+                    >{{ province.description }}</option>
176
                   </select>
178
                   </select>
177
                 </div>
179
                 </div>
178
                 <div v-if="showProvinceError">
180
                 <div v-if="showProvinceError">
194
                     v-model="property.cityId"
196
                     v-model="property.cityId"
195
                   >
197
                   >
196
                     <option value="0">Please select city</option>
198
                     <option value="0">Please select city</option>
197
-                    <option v-for="city in cities" :value="city.id" :key="city.id">
198
-                      {{ city.description }}
199
-                    </option>
199
+                    <option
200
+                      v-for="city in cities"
201
+                      :value="city.id"
202
+                      :key="city.id"
203
+                    >{{ city.description }}</option>
200
                   </select>
204
                   </select>
201
                 </div>
205
                 </div>
202
                 <div v-if="showCityError">
206
                 <div v-if="showCityError">
217
                     @change="getPostalCode"
221
                     @change="getPostalCode"
218
                   >
222
                   >
219
                     <option value="0">Please select suburb</option>
223
                     <option value="0">Please select suburb</option>
220
-                    <option v-for="suburb in suburbs" :value="suburb.id" :key="suburb.id">
221
-                      {{ suburb.description }}
222
-                    </option>
224
+                    <option
225
+                      v-for="suburb in suburbs"
226
+                      :value="suburb.id"
227
+                      :key="suburb.id"
228
+                    >{{ suburb.description }}</option>
223
                   </select>
229
                   </select>
224
                 </div>
230
                 </div>
225
                 <div v-if="showSuburbError">
231
                 <div v-if="showSuburbError">
382
               @click="SubmitData()"
388
               @click="SubmitData()"
383
               class="btn btn-b-n"
389
               class="btn btn-b-n"
384
               style="width: 85px; height:40px;"
390
               style="width: 85px; height:40px;"
385
-            >
386
-              Save
387
-            </button>
391
+            >Save</button>
388
             <div
392
             <div
389
               v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
393
               v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
390
             >
394
             >
391
-              <p class="alert myError">
392
-                Missing fields. Please fill in all required fields. Marked with *
393
-              </p>
395
+              <p
396
+                class="alert myError"
397
+              >Missing fields. Please fill in all required fields. Marked with *</p>
394
             </div>
398
             </div>
395
             <div v-if="wait" id="preloader"></div>
399
             <div v-if="wait" id="preloader"></div>
396
           </form>
400
           </form>
401
 </template>
405
 </template>
402
 
406
 
403
 <script>
407
 <script>
404
-import { mapState, mapActions } from 'vuex';
405
-import { VueEditor } from 'vue2-editor';
406
-import UserField from './propertyUserField.vue';
407
-import ImageLoad from './propertyImage.vue';
408
-import Log from '../../assets/Log';
408
+import { mapState, mapActions } from "vuex";
409
+import { VueEditor } from "vue2-editor";
410
+import UserField from "./propertyUserField.vue";
411
+import ImageLoad from "./propertyImage.vue";
412
+import Log from "../../assets/Log";
409
 
413
 
410
 export default {
414
 export default {
411
-  name: 'PropertyCreate',
415
+  name: "PropertyCreate",
412
   components: {
416
   components: {
413
     UserField,
417
     UserField,
414
     ImageLoad,
418
     ImageLoad,
416
   },
420
   },
417
   data() {
421
   data() {
418
     return {
422
     return {
419
-      propertyType: 'Residential',
420
-      salesType: 'Rental',
421
-      selectedProvince: '',
422
-      selectedCity: '',
423
+      propertyType: "Residential",
424
+      salesType: "Rental",
425
+      selectedProvince: "",
426
+      selectedCity: "",
423
       images: [],
427
       images: [],
424
       propertyFieldValues: [],
428
       propertyFieldValues: [],
425
       defaultImage: 0,
429
       defaultImage: 0,
426
       wait: false,
430
       wait: false,
427
       customToolbar: [
431
       customToolbar: [
428
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
432
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
429
-        ['bold', 'italic', 'underline', 'strike'],
430
-        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
431
-        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
432
-        [{ script: 'sub' }, { script: 'super' }],
433
-        [{ indent: '-1' }, { indent: '+1' }],
433
+        ["bold", "italic", "underline", "strike"],
434
+        [
435
+          { align: "" },
436
+          { align: "center" },
437
+          { align: "right" },
438
+          { align: "justify" },
439
+        ],
440
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
441
+        [{ script: "sub" }, { script: "super" }],
442
+        [{ indent: "-1" }, { indent: "+1" }],
434
       ],
443
       ],
435
-      error: '',
444
+      error: "",
436
       showPropertyTypeError: false,
445
       showPropertyTypeError: false,
437
       showProvinceError: false,
446
       showProvinceError: false,
438
       showCityError: false,
447
       showCityError: false,
443
     };
452
     };
444
   },
453
   },
445
   methods: {
454
   methods: {
446
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
447
-    ...mapActions('property', [
448
-      'getPropertyTypes',
449
-      'getPropertyOverviewFields',
450
-      'getPropertyFields',
451
-      'saveProperty',
452
-      'getProperty',
453
-      'getPropertyImages',
454
-      'clearProperty',
455
-      'clearPropertyImages',
456
-      'getPropertyEditDisplay',
457
-      'getPropertySavedOverviewFields',
458
-      'getPropertySavedFields',
459
-      'getSavedPropertyData',
455
+    ...mapActions("property", [
456
+      "getPropertyTypes",
457
+      "getPropertyOverviewFields",
458
+      "getPropertyFields",
459
+      "saveProperty",
460
+      "getProperty",
461
+      "getPropertyImages",
462
+      "clearProperty",
463
+      "clearPropertyImages",
464
+      "getPropertyEditDisplay",
465
+      "getPropertySavedOverviewFields",
466
+      "getPropertySavedFields",
467
+      "getSavedPropertyData",
460
     ]),
468
     ]),
461
     TypeChanged() {
469
     TypeChanged() {
462
       this.property.propertyUsageType = this.propertyType;
470
       this.property.propertyUsageType = this.propertyType;
475
         this.showSuburbError = true;
483
         this.showSuburbError = true;
476
       }
484
       }
477
 
485
 
478
-      if (this.salesType === 'Rental' && this.property.dateAvailable === 'undef') {
486
+      if (
487
+        this.salesType === "Rental" &&
488
+        this.property.dateAvailable === "undef"
489
+      ) {
479
         this.showDateError = true;
490
         this.showDateError = true;
480
       }
491
       }
481
 
492
 
482
       if (
493
       if (
483
-        this.showPropertyTypeError
484
-        || this.showProvinceError
485
-        || this.showCityError
486
-        || this.showSuburbError
487
-        || this.showDateError
494
+        this.showPropertyTypeError ||
495
+        this.showProvinceError ||
496
+        this.showCityError ||
497
+        this.showSuburbError ||
498
+        this.showDateError
488
       ) {
499
       ) {
489
         return;
500
         return;
490
       }
501
       }
491
 
502
 
492
       this.wait = true;
503
       this.wait = true;
493
-      if (this.salesType === 'Sale') {
504
+      if (this.salesType === "Sale") {
494
         this.property.isSale = true;
505
         this.property.isSale = true;
495
         this.property.dateAvailable = new Date();
506
         this.property.dateAvailable = new Date();
496
       }
507
       }
520
         });
531
         });
521
     },
532
     },
522
     Close() {
533
     Close() {
523
-      this.$router.push('/property/admin/list/my');
534
+      this.$router.push("/property/admin/list/my");
524
     },
535
     },
525
     Login() {
536
     Login() {
526
-      this.$router.push('/user/login');
537
+      this.$router.push("/user/login");
527
     },
538
     },
528
     PropertyTypeSelected(item) {
539
     PropertyTypeSelected(item) {
529
       if (item.target.options.selectedIndex > 0) {
540
       if (item.target.options.selectedIndex > 0) {
532
         this.showPropertyTypeError = true;
543
         this.showPropertyTypeError = true;
533
       }
544
       }
534
     },
545
     },
535
-    ProvinceSelected(item) {
536
-      if (item.target.options.selectedIndex > 0) {
537
-        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
538
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
539
-        this.showProvinceError = false;
540
-      } else {
541
-        this.showProvinceError = true;
542
-      }
543
-    },
544
-    CitySelected(item) {
545
-      if (item.target.options.selectedIndex > 0) {
546
-        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
547
-        this.getSuburbs(
548
-          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity }),
549
-        );
550
-        this.showCityError = false;
551
-      } else {
552
-        this.showCityError = true;
553
-      }
554
-    },
555
-    getPostalCode(item) {
556
-      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
557
-      if (item.target.options.selectedIndex > 0) {
558
-        this.showSuburbError = false;
559
-      } else {
560
-        this.showSuburbError = true;
561
-      }
562
-    },
546
+
563
     loadedImages(values) {
547
     loadedImages(values) {
564
       this.images = values;
548
       this.images = values;
565
     },
549
     },
592
     if (this.propertyFields.length > 0) {
576
     if (this.propertyFields.length > 0) {
593
       this.propertyFields = [];
577
       this.propertyFields = [];
594
     }
578
     }
595
-    if (this.property.description !== '') {
596
-      this.property.description = '';
579
+    if (this.property.description !== "") {
580
+      this.property.description = "";
597
     }
581
     }
598
 
582
 
599
     if (this.$route.params.propertyUsageType) {
583
     if (this.$route.params.propertyUsageType) {
603
 
587
 
604
     this.getPropertyTypes(this.propertyType);
588
     this.getPropertyTypes(this.propertyType);
605
 
589
 
606
-    this.getProvince();
607
     this.getPropertyOverviewFields();
590
     this.getPropertyOverviewFields();
608
     this.getPropertyFields(this.propertyType);
591
     this.getPropertyFields(this.propertyType);
609
   },
592
   },
610
   computed: {
593
   computed: {
611
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
612
-    ...mapState('property', [
613
-      'propertyTypes',
614
-      'propertyOverviewFields',
615
-      'propertyFields',
616
-      'property',
617
-      'propertyImages',
594
+    ...mapState("property", [
595
+      "propertyTypes",
596
+      "propertyOverviewFields",
597
+      "propertyFields",
598
+      "property",
599
+      "propertyImages",
618
     ]),
600
     ]),
619
-    ...mapState('authentication', ['user']),
601
+    ...mapState("authentication", ["user"]),
620
     SalesTypeChanged() {
602
     SalesTypeChanged() {
621
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
603
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
622
       // this.propertyType = this.$route.params.propType;
604
       // this.propertyType = this.$route.params.propType;

+ 16
- 39
src/components/property/propertySearchFields.vue View File

210
 </template>
210
 </template>
211
 
211
 
212
 <script>
212
 <script>
213
-import { mapState, mapActions } from 'vuex';
213
+import { mapState, mapActions } from "vuex";
214
 
214
 
215
 export default {
215
 export default {
216
   props: {
216
   props: {
218
   },
218
   },
219
   data() {
219
   data() {
220
     return {
220
     return {
221
-      resType: 'All',
222
-      comType: 'All',
221
+      resType: "All",
222
+      comType: "All",
223
     };
223
     };
224
   },
224
   },
225
   mounted() {
225
   mounted() {
226
-    this.getProvince();
227
     this.getPropertyTypesRes();
226
     this.getPropertyTypesRes();
228
     this.getPropertyTypesCom();
227
     this.getPropertyTypesCom();
229
     this.propertySearch.propertyUsageType = this.propertyType;
228
     this.propertySearch.propertyUsageType = this.propertyType;
230
   },
229
   },
231
   computed: {
230
   computed: {
232
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
233
-    ...mapState('property', ['propertyTypesRes', 'propertyTypesCom']),
234
-    ...mapState('propertySearch', ['propertySearch']),
231
+    ...mapState("property", ["propertyTypesRes", "propertyTypesCom"]),
232
+    ...mapState("propertySearch", ["propertySearch"]),
235
   },
233
   },
236
   methods: {
234
   methods: {
237
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
238
-    ...mapActions('property', ['getPropertyTypesRes', 'getPropertyTypesCom']),
239
-    ...mapActions('propertySearch', ['clearFilter']),
235
+    ...mapActions("property", ["getPropertyTypesRes", "getPropertyTypesCom"]),
236
+    ...mapActions("propertySearch", ["clearFilter"]),
240
     clearResType() {
237
     clearResType() {
241
-      this.clearFilter('propertyType');
242
-      this.resType = 'All';
238
+      this.clearFilter("propertyType");
239
+      this.resType = "All";
243
     },
240
     },
244
     clearComType() {
241
     clearComType() {
245
-      this.clearFilter('propertyType');
246
-      this.comType = 'All';
242
+      this.clearFilter("propertyType");
243
+      this.comType = "All";
247
     },
244
     },
248
     PropertyTypeSelected(item) {
245
     PropertyTypeSelected(item) {
249
       this.propertySearch.propertyType = item.target.value;
246
       this.propertySearch.propertyType = item.target.value;
250
       let typeitem = this.propertyTypesCom.find(
247
       let typeitem = this.propertyTypesCom.find(
251
-        t => t.description === item.target.value,
248
+        (t) => t.description === item.target.value
252
       );
249
       );
253
-      if (typeof typeitem === 'undefined') {
250
+      if (typeof typeitem === "undefined") {
254
         typeitem = this.propertyTypesRes.find(
251
         typeitem = this.propertyTypesRes.find(
255
-          t => t.description === item.target.value,
252
+          (t) => t.description === item.target.value
256
         );
253
         );
257
       }
254
       }
258
       if (typeitem.usageType === 1) {
255
       if (typeitem.usageType === 1) {
259
-        this.propertySearch.propertyUsageType = 'Commercial';
256
+        this.propertySearch.propertyUsageType = "Commercial";
260
       } else {
257
       } else {
261
-        this.propertySearch.propertyUsageType = 'Residential';
262
-      }
263
-    },
264
-    ProvinceSelected(item) {
265
-      if (item.target.value !== 'All') {
266
-        this.getCities(
267
-          Object.assign({}, { province: this.propertySearch.province }),
268
-        );
269
-      }
270
-    },
271
-    CitySelected(item) {
272
-      if (item.target.value !== 'All') {
273
-        this.getSuburbs(
274
-          Object.assign(
275
-            {},
276
-            {
277
-              province: this.propertySearch.province,
278
-              city: this.propertySearch.city,
279
-            },
280
-          ),
281
-        );
258
+        this.propertySearch.propertyUsageType = "Residential";
282
       }
259
       }
283
     },
260
     },
284
   },
261
   },

+ 11
- 12
src/components/property/propertySearchPage.vue View File

150
   </div>
150
   </div>
151
 </template>
151
 </template>
152
 <script>
152
 <script>
153
-import { mapState, mapActions } from 'vuex';
154
-import autoComplete from '../shared/autoComplete.vue';
153
+import { mapState, mapActions } from "vuex";
154
+import autoComplete from "../shared/autoComplete.vue";
155
 
155
 
156
 export default {
156
 export default {
157
-  name: 'propertysearch',
157
+  name: "propertysearch",
158
   components: {
158
   components: {
159
     autoComplete,
159
     autoComplete,
160
   },
160
   },
161
   data() {
161
   data() {
162
     return {
162
     return {
163
-      propertyUsageType: 'Residential',
164
-      salesType: 'Sale',
165
-      searchText: '',
163
+      propertyUsageType: "Residential",
164
+      salesType: "Sale",
165
+      searchText: "",
166
     };
166
     };
167
   },
167
   },
168
   computed: {
168
   computed: {
169
-    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
169
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"]),
170
   },
170
   },
171
   methods: {
171
   methods: {
172
-    ...mapActions('propertySearch', ['getSuburbs', 'applyFilter']),
172
+    ...mapActions("propertySearch", ["applyFilter"]),
173
     SetType(item) {
173
     SetType(item) {
174
       this.propertyUsageType = item;
174
       this.propertyUsageType = item;
175
       localStorage.propertySearchUsageType = item;
175
       localStorage.propertySearchUsageType = item;
176
     },
176
     },
177
     SearchClick() {
177
     SearchClick() {
178
-      const item = this.suburbs.find(s => s.display === this.searchText);
178
+      const item = this.suburbs.find((s) => s.display === this.searchText);
179
       this.propertySearch.province = item.province;
179
       this.propertySearch.province = item.province;
180
       this.propertySearch.city = item.city;
180
       this.propertySearch.city = item.city;
181
       this.propertySearch.suburb = item.suburb;
181
       this.propertySearch.suburb = item.suburb;
182
       this.propertySearch.propertyUsageType = this.propertyUsageType;
182
       this.propertySearch.propertyUsageType = this.propertyUsageType;
183
       this.propertySearch.salesType = this.salesType;
183
       this.propertySearch.salesType = this.salesType;
184
 
184
 
185
-      this.$router.push('/property/propertySearch/results');
185
+      this.$router.push("/property/propertySearch/results");
186
     },
186
     },
187
     Filter() {
187
     Filter() {
188
       this.applyFilter(this.searchText);
188
       this.applyFilter(this.searchText);
195
     },
195
     },
196
   },
196
   },
197
   mounted() {
197
   mounted() {
198
-    this.getSuburbs();
199
     if (this.$route.params.propertyUsageType) {
198
     if (this.$route.params.propertyUsageType) {
200
       this.propertyUsageType = this.$route.params.propertyUsageType;
199
       this.propertyUsageType = this.$route.params.propertyUsageType;
201
     } else if (localStorage.propertySearchUsageType) {
200
     } else if (localStorage.propertySearchUsageType) {
202
       this.propertyUsageType = localStorage.propertySearchUsageType;
201
       this.propertyUsageType = localStorage.propertySearchUsageType;
203
     } else {
202
     } else {
204
-      this.propertyUsageType = 'Residential';
203
+      this.propertyUsageType = "Residential";
205
     }
204
     }
206
   },
205
   },
207
 };
206
 };

+ 50
- 87
src/components/property/propertyeditPage.vue View File

324
 </template>
324
 </template>
325
 
325
 
326
 <script>
326
 <script>
327
-import { mapState, mapActions } from 'vuex';
328
-import { VueEditor } from 'vue2-editor';
329
-import ImageLoad from './propertyImage.vue';
330
-import propField from './propertyFieldEditor.vue';
331
-import field from '../shared/fieldEditor.vue';
327
+import { mapState, mapActions } from "vuex";
328
+import { VueEditor } from "vue2-editor";
329
+import ImageLoad from "./propertyImage.vue";
330
+import propField from "./propertyFieldEditor.vue";
331
+import field from "../shared/fieldEditor.vue";
332
 
332
 
333
 export default {
333
 export default {
334
-  name: 'PropertyEdit',
334
+  name: "PropertyEdit",
335
   components: {
335
   components: {
336
     ImageLoad,
336
     ImageLoad,
337
     VueEditor,
337
     VueEditor,
340
   },
340
   },
341
   data() {
341
   data() {
342
     return {
342
     return {
343
-      propertyType: 'Residential',
344
-      salesType: 'Rental',
343
+      propertyType: "Residential",
344
+      salesType: "Rental",
345
       images: [],
345
       images: [],
346
       propertyFieldValues: [],
346
       propertyFieldValues: [],
347
       defaultImage: 0,
347
       defaultImage: 0,
348
       wait: false,
348
       wait: false,
349
       customToolbar: [
349
       customToolbar: [
350
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
350
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
351
-        ['bold', 'italic', 'underline', 'strike'],
351
+        ["bold", "italic", "underline", "strike"],
352
         [
352
         [
353
-          { align: '' },
354
-          { align: 'center' },
355
-          { align: 'right' },
356
-          { align: 'justify' },
353
+          { align: "" },
354
+          { align: "center" },
355
+          { align: "right" },
356
+          { align: "justify" },
357
         ],
357
         ],
358
-        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
359
-        [{ script: 'sub' }, { script: 'super' }],
360
-        [{ indent: '-1' }, { indent: '+1' }],
358
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
359
+        [{ script: "sub" }, { script: "super" }],
360
+        [{ indent: "-1" }, { indent: "+1" }],
361
       ],
361
       ],
362
       salesTypeArr: [
362
       salesTypeArr: [
363
-        { id: 1, description: 'Sale' },
364
-        { id: 2, description: 'Rental' },
363
+        { id: 1, description: "Sale" },
364
+        { id: 2, description: "Rental" },
365
       ],
365
       ],
366
-      pricePerArr: ['Month', 'Day'],
367
-      yesno: ['Yes', 'No'],
366
+      pricePerArr: ["Month", "Day"],
367
+      yesno: ["Yes", "No"],
368
       showPropertyTypeError: false,
368
       showPropertyTypeError: false,
369
       showProvinceError: false,
369
       showProvinceError: false,
370
       showCityError: false,
370
       showCityError: false,
372
     };
372
     };
373
   },
373
   },
374
   methods: {
374
   methods: {
375
-    ...mapActions('searchTab', [
376
-      'getProvince',
377
-      'getCities',
378
-      'getSuburbs',
379
-      'getListsForPropertyEdit',
375
+    ...mapActions("property", ["getPropertyTypes"]),
376
+    ...mapActions("propertyEdit", [
377
+      "getSavedPropertyData",
378
+      "updateProperty",
379
+      "mayEditProperty",
380
     ]),
380
     ]),
381
-    ...mapActions('property', ['getPropertyTypes']),
382
-    ...mapActions('propertyEdit', [
383
-      'getSavedPropertyData',
384
-      'updateProperty',
385
-      'mayEditProperty',
386
-    ]),
387
-    provChanged(item) {
388
-      this.getCities(Object.assign({}, { province: item.description }));
389
-      this.property.city = null;
390
-      this.property.suburb = null;
391
-      this.property.addressLine3 = '';
392
-      this.showProvinceError = false;
393
-      this.showCityError = true;
394
-      this.showSuburbError = true;
395
-    },
396
-    cityChanged(item) {
397
-      this.getSuburbs(
398
-        Object.assign(
399
-          {},
400
-          {
401
-            province: this.property.province.description,
402
-            city: item.description,
403
-          },
404
-        ),
405
-      );
406
-      this.property.suburb = null;
407
-      this.property.addressLine3 = '';
408
-      this.showCityError = false;
409
-      this.showSuburbError = true;
410
-    },
411
-    suburbChanged(item) {
412
-      const newSuburb = this.suburbs.find(
413
-        p => p.description === item.description,
414
-      );
415
-      this.property.addressLine3 = newSuburb.postalCode;
416
-      this.showSuburbError = false;
417
-    },
418
     salesTypeChanged(item) {
381
     salesTypeChanged(item) {
419
       console.log(item);
382
       console.log(item);
420
     },
383
     },
421
     UpdateValue(item) {
384
     UpdateValue(item) {
422
       if (item.isUDF) {
385
       if (item.isUDF) {
423
         if (item.isPropOverview) {
386
         if (item.isPropOverview) {
424
-          this.propertyOverviewFields[0].fields[item.arrayIndex].value = item.value;
387
+          this.propertyOverviewFields[0].fields[item.arrayIndex].value =
388
+            item.value;
425
         } else if (item.isPropOverview === false) {
389
         } else if (item.isPropOverview === false) {
426
           this.propertyFields[item.arrayIndex].fields[
390
           this.propertyFields[item.arrayIndex].fields[
427
             item.arrayItemIndex
391
             item.arrayItemIndex
429
         }
393
         }
430
       } else if (!item.isUDF) {
394
       } else if (!item.isUDF) {
431
         if (item.fieldName) {
395
         if (item.fieldName) {
432
-          if (item.fieldName === 'isSale') {
396
+          if (item.fieldName === "isSale") {
433
             let isSaleValue = false;
397
             let isSaleValue = false;
434
-            if (item.value === 'Sale') {
398
+            if (item.value === "Sale") {
435
               isSaleValue = true;
399
               isSaleValue = true;
436
             } else isSaleValue = false;
400
             } else isSaleValue = false;
437
             this.property.isSale = isSaleValue;
401
             this.property.isSale = isSaleValue;
457
       }
421
       }
458
 
422
 
459
       if (
423
       if (
460
-        this.showPropertyTypeError
461
-        || this.showProvinceError
462
-        || this.showCityError
463
-        || this.showSuburbError
424
+        this.showPropertyTypeError ||
425
+        this.showProvinceError ||
426
+        this.showCityError ||
427
+        this.showSuburbError
464
       ) {
428
       ) {
465
         return;
429
         return;
466
       }
430
       }
481
       this.property.propertyImages = this.propertyImages;
445
       this.property.propertyImages = this.propertyImages;
482
       // eslint-disable-next-line no-plusplus
446
       // eslint-disable-next-line no-plusplus
483
       for (let i = 0; i < this.property.propertyImages.length; i++) {
447
       for (let i = 0; i < this.property.propertyImages.length; i++) {
484
-        this.property.propertyImages[i].image = '';
448
+        this.property.propertyImages[i].image = "";
485
       }
449
       }
486
       this.property.propertyOverviewFields = this.propertyOverviewFields;
450
       this.property.propertyOverviewFields = this.propertyOverviewFields;
487
       this.property.propertyFields = this.propertyFields;
451
       this.property.propertyFields = this.propertyFields;
489
         property: this.property,
453
         property: this.property,
490
         images: this.newPropertyImages,
454
         images: this.newPropertyImages,
491
       }).then(() => {
455
       }).then(() => {
492
-        this.$router.push('/properties');
456
+        this.$router.push("/properties");
493
       });
457
       });
494
     },
458
     },
495
     Close() {
459
     Close() {
496
-      this.$router.push('/properties');
460
+      this.$router.push("/properties");
497
     },
461
     },
498
     loadedImages(values) {
462
     loadedImages(values) {
499
       this.images = values;
463
       this.images = values;
502
       this.defaultImage = item;
466
       this.defaultImage = item;
503
     },
467
     },
504
     DeleteImage(image) {
468
     DeleteImage(image) {
505
-      this.propertyImages.find(item => item.id === image.id).isDeleted = true;
469
+      this.propertyImages.find((item) => item.id === image.id).isDeleted = true;
506
     },
470
     },
507
   },
471
   },
508
   mounted() {
472
   mounted() {
517
     if (this.propertyFields.length > 0) {
481
     if (this.propertyFields.length > 0) {
518
       this.propertyFields = [];
482
       this.propertyFields = [];
519
     }
483
     }
520
-    if (this.property.description !== '') {
521
-      this.property.description = '';
484
+    if (this.property.description !== "") {
485
+      this.property.description = "";
522
     }
486
     }
523
 
487
 
524
     if (this.$route.params.propertyUsageType) {
488
     if (this.$route.params.propertyUsageType) {
531
     this.getListsForPropertyEdit(this.$route.query.id);
495
     this.getListsForPropertyEdit(this.$route.query.id);
532
 
496
 
533
     this.getSavedPropertyData(
497
     this.getSavedPropertyData(
534
-      Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
498
+      Object.assign({}, { id: this.$route.query.id, type: this.propertyType })
535
     );
499
     );
536
 
500
 
537
     this.mayEditProperty(this.$route.query.id);
501
     this.mayEditProperty(this.$route.query.id);
538
   },
502
   },
539
   computed: {
503
   computed: {
540
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
541
-    ...mapState('property', ['propertyTypes']),
542
-    ...mapState('propertyEdit', [
543
-      'propertyOverviewFields',
544
-      'propertyFields',
545
-      'property',
546
-      'propertyImages',
547
-      'mayEdit',
548
-      'newPropertyImages',
504
+    ...mapState("property", ["propertyTypes"]),
505
+    ...mapState("propertyEdit", [
506
+      "propertyOverviewFields",
507
+      "propertyFields",
508
+      "property",
509
+      "propertyImages",
510
+      "mayEdit",
511
+      "newPropertyImages",
549
     ]),
512
     ]),
550
-    ...mapState('authentication', ['user']),
513
+    ...mapState("authentication", ["user"]),
551
     SalesTypeChanged() {
514
     SalesTypeChanged() {
552
       if (this.property && this.property.propertyUsageType) {
515
       if (this.property && this.property.propertyUsageType) {
553
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
516
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
554
         this.propertyType = this.property.propertyUsageType;
517
         this.propertyType = this.property.propertyUsageType;
555
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
518
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
556
-        this.salesType = this.property.isSale ? 'Sale' : 'Rental';
519
+        this.salesType = this.property.isSale ? "Sale" : "Rental";
557
       }
520
       }
558
 
521
 
559
       this.getPropertyTypes(this.propertyType);
522
       this.getPropertyTypes(this.propertyType);

+ 57
- 165
src/components/property/residential/createProperty/residentialCreate.vue View File

38
               @change="PropertyTypeSelected"
38
               @change="PropertyTypeSelected"
39
             >
39
             >
40
               <option value="0">Please select type *</option>
40
               <option value="0">Please select type *</option>
41
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
42
-                {{ item.description }}
43
-              </option>
41
+              <option
42
+                v-for="item in propertyTypes"
43
+                :value="item.id"
44
+                :key="item.id"
45
+              >{{ item.description }}</option>
44
             </select>
46
             </select>
45
           </div>
47
           </div>
46
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
48
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
59
         <div class="row my-5">
61
         <div class="row my-5">
60
           <div class="col-md-6">
62
           <div class="col-md-6">
61
             <mapSection v-on:map-location="updateLocation" />
63
             <mapSection v-on:map-location="updateLocation" />
64
+            <input
65
+              type="checkbox"
66
+              v-model="property.showAddress"
67
+              style="margin-right: 10px; margin-top: 10px;"
68
+            />
69
+            <label>Show address on listing</label>
62
           </div>
70
           </div>
63
           <div class="col-md-6">
71
           <div class="col-md-6">
64
             <div class="row">
72
             <div class="row">
68
                     for="price"
76
                     for="price"
69
                     class="uniSelectLabel"
77
                     class="uniSelectLabel"
70
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
78
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
71
-                    >{{ salesType }} Price</label
72
-                  >
79
+                  >{{ salesType }} Price</label>
73
                 </div>
80
                 </div>
74
                 <input
81
                 <input
75
                   class="form-control uniInput"
82
                   class="form-control uniInput"
115
             </div>
122
             </div>
116
           </div>
123
           </div>
117
         </div>
124
         </div>
118
-        <div class=" row" />
125
+        <div class="row" />
119
 
126
 
120
         <div class="section-header">
127
         <div class="section-header">
121
           <h2>Extra Information</h2>
128
           <h2>Extra Information</h2>
195
           :savedImages="propertyImages"
202
           :savedImages="propertyImages"
196
           @DefaultImage="UpdateDefaultImage"
203
           @DefaultImage="UpdateDefaultImage"
197
         />
204
         />
198
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
199
-          Save
200
-        </button>
201
-        <div v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError">
202
-          <p class="alert myError">
203
-            Missing fields. Please fill in all required fields. Marked with *
204
-          </p>
205
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
206
+        <div v-if="showPropertyTypeError">
207
+          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
205
         </div>
208
         </div>
206
         <div v-if="wait" id="preloader"></div>
209
         <div v-if="wait" id="preloader"></div>
207
-        <!-- <div class="row">
208
-          <div class="col-md-6">
209
-            <div v-if="!property.addressLine1">
210
-              <label for="unit" class="uniSelectLabel">STREET NUMBER</label>
211
-            </div>
212
-            <input
213
-              class="form-control uniInput"
214
-              type="text"
215
-              name="streetnumber"
216
-              v-model="property.addressLine1"
217
-            />
218
-          </div>
219
-          <div class="col-md-6">
220
-            <div v-if="!property.addressLine2">
221
-              <label for="streetname" class="uniSelectLabel">STREET NAME</label>
222
-            </div>
223
-            <input
224
-              class="form-control uniInput"
225
-              type="text"
226
-              name="streetname"
227
-              id="streetname"
228
-              v-model="property.addressLine2"
229
-            />
230
-          </div>
231
-        </div>
232
-        <div class="row my-3">
233
-          <div class="col-md-6">
234
-            <div v-if="!property.provinceId">
235
-              <label for="province" class="uniSelectLabel">PROVINCE</label>
236
-            </div>
237
-            <input
238
-              class="form-control uniInput"
239
-              type="text"
240
-              name="province"
241
-              v-model="selectedProvince"
242
-            />
243
-          </div>
244
-          <div class="col-md-6">
245
-            <div v-if="!property.cityId">
246
-              <label for="city" class="uniSelectLabel">CITY</label>
247
-            </div>
248
-            <input
249
-              class="form-control uniInput"
250
-              type="text"
251
-              name="city"
252
-              id="city"
253
-              v-model="selectedCity"
254
-            />
255
-          </div>
256
-        </div>
257
-        <div class="row my-3">
258
-          <div class="col-md-6">
259
-            <div v-if="!property.suburbId">
260
-              <label for="suburb" class="uniSelectLabel">SUBURB</label>
261
-            </div>
262
-            <input
263
-              class="form-control uniInput"
264
-              type="text"
265
-              name="suburb"
266
-              v-model="selectedSuburb"
267
-            />
268
-          </div>
269
-          <div class="col-md-6">
270
-            <div v-if="!property.addressLine3">
271
-              <label for="code" class="uniSelectLabel">POSTAL CODE</label>
272
-            </div>
273
-            <input
274
-              class="form-control uniInput"
275
-              type="text"
276
-              name="code"
277
-              id="code"
278
-              v-model="property.addressLine3"
279
-            />
280
-          </div>
281
-        </div> -->
282
       </div>
210
       </div>
283
     </main>
211
     </main>
284
   </div>
212
   </div>
301
     ImageLoad,
229
     ImageLoad,
302
     VueEditor,
230
     VueEditor,
303
     carouselSection,
231
     carouselSection,
304
-    mapSection
232
+    mapSection,
305
   },
233
   },
306
   data() {
234
   data() {
307
     return {
235
     return {
308
       propertyType: "Residential",
236
       propertyType: "Residential",
309
       salesType: "Rental",
237
       salesType: "Rental",
310
-      selectedProvince: "",
311
-      selectedCity: "",
312
-      selectedSuburb: "",
313
       images: [],
238
       images: [],
314
       propertyFieldValues: [],
239
       propertyFieldValues: [],
315
       defaultImage: 0,
240
       defaultImage: 0,
317
       customToolbar: [
242
       customToolbar: [
318
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
243
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
319
         ["bold", "italic", "underline", "strike"],
244
         ["bold", "italic", "underline", "strike"],
320
-        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
245
+        [
246
+          { align: "" },
247
+          { align: "center" },
248
+          { align: "right" },
249
+          { align: "justify" },
250
+        ],
321
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
251
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
322
         [{ script: "sub" }, { script: "super" }],
252
         [{ script: "sub" }, { script: "super" }],
323
-        [{ indent: "-1" }, { indent: "+1" }]
253
+        [{ indent: "-1" }, { indent: "+1" }],
324
       ],
254
       ],
325
       error: "",
255
       error: "",
256
+      addressSet: false,
326
       showPropertyTypeError: false,
257
       showPropertyTypeError: false,
327
-      showProvinceError: false,
328
-      showCityError: false,
329
-      showSuburbError: false,
330
       showDateError: false,
258
       showDateError: false,
331
       user: Log.getUser(),
259
       user: Log.getUser(),
332
-      mayEdit: Log.isLoggedIn()
260
+      mayEdit: Log.isLoggedIn(),
333
     };
261
     };
334
   },
262
   },
335
   methods: {
263
   methods: {
336
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
337
     ...mapActions("property", [
264
     ...mapActions("property", [
338
       "getPropertyTypes",
265
       "getPropertyTypes",
339
       "getPropertyOverviewFields",
266
       "getPropertyOverviewFields",
341
       "saveProperty",
268
       "saveProperty",
342
       "getProperty",
269
       "getProperty",
343
       "getPropertyImages",
270
       "getPropertyImages",
344
-      "clearProperty",
345
       "clearPropertyImages",
271
       "clearPropertyImages",
346
       "getPropertyEditDisplay",
272
       "getPropertyEditDisplay",
347
       "getPropertySavedOverviewFields",
273
       "getPropertySavedOverviewFields",
348
       "getPropertySavedFields",
274
       "getPropertySavedFields",
349
-      "getSavedPropertyData"
275
+      "getSavedPropertyData",
350
     ]),
276
     ]),
351
     updateLocation(place) {
277
     updateLocation(place) {
352
-      this.property.addressLine1 = place.mapComponents[0].short_name;
353
-      this.property.addressLine2 = place.mapComponents[1].short_name;
354
-      this.property.addressLine3 = place.mapComponents[7].short_name;
355
-      this.property.provinceId = place.provinceId;
356
-      this.property.cityId = place.cityId;
357
-      this.property.suburbId = place.suburbId;
278
+      this.addressSet = true;
279
+      this.property.streetNumber = place.streetNumber;
280
+      this.property.streetName = place.streetName;
281
+      this.property.suburb = place.suburb;
282
+      this.property.city = place.city;
283
+      this.property.province = place.province;
284
+      this.property.country = place.country;
285
+      this.property.postalCode = place.postalCode;
286
+      this.property.addressUrl = place.url;
358
       this.property.propertCoords = place.coords;
287
       this.property.propertCoords = place.coords;
359
     },
288
     },
360
     TypeChanged() {
289
     TypeChanged() {
364
       if (this.property.propertyTypeId === 0) {
293
       if (this.property.propertyTypeId === 0) {
365
         this.showPropertyTypeError = true;
294
         this.showPropertyTypeError = true;
366
       }
295
       }
367
-      if (this.property.provinceId === 0) {
368
-        this.showProvinceError = true;
369
-      }
370
-      if (this.property.cityId === 0) {
371
-        this.showCityError = true;
372
-      }
373
-      if (this.property.suburbId === 0) {
374
-        this.showSuburbError = true;
375
-      }
376
 
296
 
377
-      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
297
+      if (
298
+        this.salesType === "Rental" &&
299
+        this.property.dateAvailable === "undef"
300
+      ) {
378
         this.showDateError = true;
301
         this.showDateError = true;
379
       }
302
       }
380
 
303
 
381
-      if (
382
-        this.showPropertyTypeError ||
383
-        this.showProvinceError ||
384
-        this.showCityError ||
385
-        this.showSuburbError ||
386
-        this.showDateError
387
-      ) {
304
+      if (this.showPropertyTypeError || this.showDateError) {
388
         return;
305
         return;
389
       }
306
       }
390
 
307
 
393
         this.property.isSale = true;
310
         this.property.isSale = true;
394
         this.property.dateAvailable = new Date();
311
         this.property.dateAvailable = new Date();
395
       }
312
       }
313
+      if (this.images.length > 0) {
314
+        this.property.propertyImages = [];
315
+      }
396
       // eslint-disable-next-line no-plusplus
316
       // eslint-disable-next-line no-plusplus
397
       for (let i = 0; i < this.images.length; i++) {
317
       for (let i = 0; i < this.images.length; i++) {
398
         let setAsDefault = false;
318
         let setAsDefault = false;
401
         }
321
         }
402
         this.property.propertyImages.push({
322
         this.property.propertyImages.push({
403
           image: this.images[i],
323
           image: this.images[i],
404
-          isDefault: setAsDefault
324
+          isDefault: setAsDefault,
405
         });
325
         });
406
       }
326
       }
407
       this.property.propertyUserFields = this.propertyFieldValues;
327
       this.property.propertyUserFields = this.propertyFieldValues;
411
       }
331
       }
412
 
332
 
413
       this.saveProperty(this.property)
333
       this.saveProperty(this.property)
414
-        .then(fulfilled => {
415
-          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
334
+        .then((fulfilled) => {
335
+          this.$router.push(
336
+            `/property/residential/property/${fulfilled.data.id}`
337
+          );
416
         })
338
         })
417
-        .catch(error => {
339
+        .catch((error) => {
418
           console.log(error.message);
340
           console.log(error.message);
419
         });
341
         });
420
     },
342
     },
431
         this.showPropertyTypeError = true;
353
         this.showPropertyTypeError = true;
432
       }
354
       }
433
     },
355
     },
434
-    ProvinceSelected(item) {
435
-      if (item.target.options.selectedIndex > 0) {
436
-        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
437
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
438
-        this.showProvinceError = false;
439
-      } else {
440
-        this.showProvinceError = true;
441
-      }
442
-    },
443
-    CitySelected(item) {
444
-      if (item.target.options.selectedIndex > 0) {
445
-        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
446
-        this.getSuburbs(
447
-          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
448
-        );
449
-        this.showCityError = false;
450
-      } else {
451
-        this.showCityError = true;
452
-      }
453
-    },
454
-    getPostalCode(item) {
455
-      this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
456
-      if (item.target.options.selectedIndex > 0) {
457
-        this.showSuburbError = false;
458
-      } else {
459
-        this.showSuburbError = true;
460
-      }
461
-    },
462
     loadedImages(values) {
356
     loadedImages(values) {
463
       this.images = values;
357
       this.images = values;
464
     },
358
     },
465
     UpdateUserDefinedFields(item) {
359
     UpdateUserDefinedFields(item) {
466
       let update = false;
360
       let update = false;
467
-      this.propertyFieldValues.forEach(element => {
361
+      this.propertyFieldValues.forEach((element) => {
468
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
362
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
469
           element.value = item.value;
363
           element.value = item.value;
470
           update = true;
364
           update = true;
476
     },
370
     },
477
     UpdateDefaultImage(item) {
371
     UpdateDefaultImage(item) {
478
       this.defaultImage = item;
372
       this.defaultImage = item;
479
-    }
373
+    },
480
   },
374
   },
481
   mounted() {
375
   mounted() {
482
     this.wait = false;
376
     this.wait = false;
483
-    this.clearProperty();
377
+    this.getProperty(0);
484
     this.clearPropertyImages();
378
     this.clearPropertyImages();
485
     this.images = [];
379
     this.images = [];
486
     this.defaultImage = 0;
380
     this.defaultImage = 0;
502
 
396
 
503
     this.getPropertyTypes(this.propertyType);
397
     this.getPropertyTypes(this.propertyType);
504
 
398
 
505
-    this.getProvince();
506
     this.getPropertyOverviewFields();
399
     this.getPropertyOverviewFields();
507
     this.getPropertyFields(this.propertyType);
400
     this.getPropertyFields(this.propertyType);
508
   },
401
   },
509
   computed: {
402
   computed: {
510
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
511
     ...mapState("property", [
403
     ...mapState("property", [
512
       "propertyTypes",
404
       "propertyTypes",
513
       "propertyOverviewFields",
405
       "propertyOverviewFields",
514
       "propertyFields",
406
       "propertyFields",
515
       "property",
407
       "property",
516
-      "propertyImages"
408
+      "propertyImages",
517
     ]),
409
     ]),
518
     ...mapState("authentication", ["user"]),
410
     ...mapState("authentication", ["user"]),
519
     SalesTypeChanged() {
411
     SalesTypeChanged() {
533
       this.getPropertyTypes(this.propertyType);
425
       this.getPropertyTypes(this.propertyType);
534
 
426
 
535
       return this.propertyType;
427
       return this.propertyType;
536
-    }
428
+    },
537
   },
429
   },
538
   watch: {
430
   watch: {
539
     SalesTypeChanged() {
431
     SalesTypeChanged() {
540
       return null;
432
       return null;
541
-    }
542
-  }
433
+    },
434
+  },
543
 };
435
 };
544
 </script>
436
 </script>
545
 
437
 

+ 27
- 154
src/components/property/residential/residentialCarouselSection.vue View File

18
                     aria-controls="buy"
18
                     aria-controls="buy"
19
                     aria-selected="true"
19
                     aria-selected="true"
20
                     @click="SetSalesType('Sale')"
20
                     @click="SetSalesType('Sale')"
21
-                    >Buy</a
22
-                  >
21
+                  >Buy</a>
23
                 </li>
22
                 </li>
24
                 <li class="nav-item">
23
                 <li class="nav-item">
25
                   <a
24
                   <a
31
                     aria-controls="rent"
30
                     aria-controls="rent"
32
                     aria-selected="false"
31
                     aria-selected="false"
33
                     @click="SetSalesType('Rent')"
32
                     @click="SetSalesType('Rent')"
34
-                    >Rent</a
35
-                  >
33
+                  >Rent</a>
36
                 </li>
34
                 </li>
37
               </ul>
35
               </ul>
38
               <div class="tab-content" id="pills-tabContent">
36
               <div class="tab-content" id="pills-tabContent">
49
                   <h4>PROPERTIES FOR SALE</h4>
47
                   <h4>PROPERTIES FOR SALE</h4>
50
                   <div class="row">
48
                   <div class="row">
51
                     <div align="left" class="form-group col-md-12">
49
                     <div align="left" class="form-group col-md-12">
52
-                      <autoComplete
53
-                        align="left"
54
-                        class="col-md-11 offset-1"
55
-                        :items="suburbList"
56
-                        @selection="SelectedFilter"
57
-                        style="width:100%; margin-left:-15px"
58
-                      />
50
+                      <autoComplete @GoogleAddress="UpdateAddress" />
59
                     </div>
51
                     </div>
60
-                    <!-- <div class="form-group col-md-6">
61
-                    <input
62
-                      data-toggle="dropdown"
63
-                      name="region"
64
-                      class="form-control my-2"
65
-                      id="name"
66
-                      placeholder="Region"
67
-                      aria-haspopup="true"
68
-                      aria-expanded="false"
69
-                    />
70
-                    
71
-                    <input
72
-                      data-toggle="dropdown"
73
-                      name="town"
74
-                      class="form-control my-2"
75
-                      id="name"
76
-                      placeholder="Town"
77
-                      aria-haspopup="true"
78
-                      aria-expanded="false"
79
-                    />
80
                   </div>
52
                   </div>
81
-                  <div class="form-group col-md-6">
82
-                    <input
83
-                      data-toggle="dropdown"
84
-                      name="suburb"
85
-                      class="form-control my-2"
86
-                      id="name"
87
-                      placeholder="Suburb"
88
-                      aria-haspopup="true"
89
-                      aria-expanded="false"
90
-                    />
91
-                    <input
92
-                      data-toggle="dropdown"
93
-                      name="type"
94
-                      class="form-control my-2"
95
-                      id="name"
96
-                      placeholder="Property Type"
97
-                      aria-haspopup="true"
98
-                      aria-expanded="false"
99
-                    /> -->
100
-                    <!-- </div> -->
101
-                  </div>
102
-                  <a v-on:click="SearchClick" class="btn-solid-blue"
103
-                    ><i class="fa fa-search"></i> SEARCH</a
104
-                  >
53
+                  <a v-on:click="SearchClick" class="btn-solid-blue">
54
+                    <i class="fa fa-search"></i> SEARCH
55
+                  </a>
105
                 </div>
56
                 </div>
106
 
57
 
107
                 <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
58
                 <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
108
                   <h4>RENTAL PROPERTIES</h4>
59
                   <h4>RENTAL PROPERTIES</h4>
109
                   <div class="row">
60
                   <div class="row">
110
                     <div align="left" class="form-group col">
61
                     <div align="left" class="form-group col">
111
-                      <autoComplete
112
-                        align="left"
113
-                        class="col-md-11 offset-1"
114
-                        :items="suburbList"
115
-                        @selection="SelectedFilter"
116
-                        style="width:100%; margin-left:-15px"
117
-                      />
62
+                      <autoComplete @GoogleAddress="UpdateAddress" />
118
                     </div>
63
                     </div>
119
-                    <!-- <div class="form-group col-md-6">
120
-                    <input
121
-                      data-toggle="dropdown"
122
-                      name="region"
123
-                      class="form-control my-2"
124
-                      id="name"
125
-                      placeholder="Region"
126
-                      aria-haspopup="true"
127
-                      aria-expanded="false"
128
-                    />
129
-                    <input
130
-                      data-toggle="dropdown"
131
-                      name="town"
132
-                      class="form-control my-2"
133
-                      id="name"
134
-                      placeholder="Town"
135
-                      aria-haspopup="true"
136
-                      aria-expanded="false"
137
-                    />
138
-                  </div>
139
-                  <div class="form-group col-md-6">
140
-                    <input
141
-                      data-toggle="dropdown"
142
-                      name="suburb"
143
-                      class="form-control my-2"
144
-                      id="name"
145
-                      placeholder="Suburb"
146
-                      aria-haspopup="true"
147
-                      aria-expanded="false"
148
-                    />
149
-                    <input
150
-                      data-toggle="dropdown"
151
-                      name="type"
152
-                      class="form-control my-2"
153
-                      id="name"
154
-                      placeholder="Property Type"
155
-                      aria-haspopup="true"
156
-                      aria-expanded="false"
157
-                    />
158
-                  </div> -->
159
                   </div>
64
                   </div>
160
-                  <a v-on:click="SearchClick" class="btn-solid-blue"
161
-                    ><i class="fa fa-search"></i> FIND</a
162
-                  >
65
+                  <a v-on:click="SearchClick" class="btn-solid-blue">
66
+                    <i class="fa fa-search"></i> FIND
67
+                  </a>
163
                 </div>
68
                 </div>
164
               </div>
69
               </div>
165
             </div>
70
             </div>
177
         style="margin-top:-50px"
82
         style="margin-top:-50px"
178
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
83
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
179
       >
84
       >
180
-        <img
181
-          class="item"
182
-          src="img/intro-carousel/residential-1.jpg"
183
-          style="object-fit: cover"
184
-          alt=""
185
-        />
186
-        <img
187
-          class="item"
188
-          src="img/intro-carousel/residential-2.jpg"
189
-          style="object-fit: cover"
190
-          alt=""
191
-        />
192
-        <img
193
-          class="item"
194
-          src="img/intro-carousel/residential-3.jpg"
195
-          style="object-fit: cover"
196
-          alt=""
197
-        />
198
-        <img
199
-          class="item"
200
-          src="img/intro-carousel/residential-4.jpg"
201
-          style="object-fit: cover"
202
-          alt=""
203
-        />
204
-        <img
205
-          class="item"
206
-          src="img/intro-carousel/residential-5.jpg"
207
-          style="object-fit: cover"
208
-          alt=""
209
-        />
210
-        <img
211
-          class="item"
212
-          src="img/intro-carousel/residential-6.jpg"
213
-          style="object-fit: cover"
214
-          alt=""
215
-        />
85
+        <img class="item" src="img/intro-carousel/residential-1.jpg" style="object-fit: cover" alt />
86
+        <img class="item" src="img/intro-carousel/residential-2.jpg" style="object-fit: cover" alt />
87
+        <img class="item" src="img/intro-carousel/residential-3.jpg" style="object-fit: cover" alt />
88
+        <img class="item" src="img/intro-carousel/residential-4.jpg" style="object-fit: cover" alt />
89
+        <img class="item" src="img/intro-carousel/residential-5.jpg" style="object-fit: cover" alt />
90
+        <img class="item" src="img/intro-carousel/residential-6.jpg" style="object-fit: cover" alt />
216
       </carousel>
91
       </carousel>
217
     </section>
92
     </section>
218
     <main id="main" style="margin-top:-20px">
93
     <main id="main" style="margin-top:-20px">
237
 <script>
112
 <script>
238
 /* eslint-disable */
113
 /* eslint-disable */
239
 import { mapState, mapActions } from "vuex";
114
 import { mapState, mapActions } from "vuex";
240
-import autoComplete from "../../shared/autoComplete";
115
+import autoComplete from "../../shared/addressAutoComplete";
241
 import carousel from "vue-owl-carousel";
116
 import carousel from "vue-owl-carousel";
242
 import searchResult from "../propertySearchResults";
117
 import searchResult from "../propertySearchResults";
243
 export default {
118
 export default {
244
   components: {
119
   components: {
245
     carousel,
120
     carousel,
246
     autoComplete,
121
     autoComplete,
247
-    searchResult
122
+    searchResult,
248
   },
123
   },
249
   data() {
124
   data() {
250
     return {
125
     return {
251
       propertyUsageType: "Residential",
126
       propertyUsageType: "Residential",
252
       salesType: "Sale",
127
       salesType: "Sale",
253
       searchText: "",
128
       searchText: "",
254
-      clicked: false
129
+      clicked: false,
255
     };
130
     };
256
   },
131
   },
257
   computed: {
132
   computed: {
258
-    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
133
+    ...mapState("propertySearch", ["propertySearch"]),
259
   },
134
   },
260
   methods: {
135
   methods: {
261
-    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
136
+    ...mapActions("propertySearch", ["applyFilter"]),
262
     SetSalesType(value) {
137
     SetSalesType(value) {
263
       this.salesType = value;
138
       this.salesType = value;
264
     },
139
     },
265
     SearchClick() {
140
     SearchClick() {
266
-      const item = this.suburbs.find(s => s.display === this.searchText);
267
-      this.propertySearch.province = item.province;
268
-      this.propertySearch.city = item.city;
269
-      this.propertySearch.suburb = item.suburb;
270
       this.propertySearch.propertyUsageType = this.propertyUsageType;
141
       this.propertySearch.propertyUsageType = this.propertyUsageType;
271
       this.propertySearch.salesType = this.salesType;
142
       this.propertySearch.salesType = this.salesType;
272
 
143
 
275
     },
146
     },
276
     SelectedFilter(item) {
147
     SelectedFilter(item) {
277
       this.searchText = item;
148
       this.searchText = item;
278
-    }
149
+    },
150
+    UpdateAddress(place) {
151
+      this.propertySearch.province = place.province;
152
+      this.propertySearch.city = place.city;
153
+      this.propertySearch.suburb = place.suburb;
154
+    },
279
   },
155
   },
280
-  mounted() {
281
-    this.getSuburbs();
282
-  }
283
 };
156
 };
284
 </script>
157
 </script>
285
 
158
 

+ 26
- 18
src/components/property/residential/residentialSearchResults.vue View File

2
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
2
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
3
     <section>
3
     <section>
4
       <div class="container">
4
       <div class="container">
5
-        <div class="row pt-5  justify-content-md-center">
5
+        <div class="row pt-5 justify-content-md-center">
6
           <h3 v-if="propertySearch.salesType === 'Sale'">RESIDENTIAL PROPERTIES FOR SALE</h3>
6
           <h3 v-if="propertySearch.salesType === 'Sale'">RESIDENTIAL PROPERTIES FOR SALE</h3>
7
           <h3 v-else-if="propertySearch.salesType === 'Rent'">RESIDENTIAL PROPERTIES FOR RENT</h3>
7
           <h3 v-else-if="propertySearch.salesType === 'Rent'">RESIDENTIAL PROPERTIES FOR RENT</h3>
8
         </div>
8
         </div>
14
           >
14
           >
15
             <div>
15
             <div>
16
               <div class="portfolio-item">
16
               <div class="portfolio-item">
17
-                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt="" />
17
+                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
18
 
18
 
19
                 <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
19
                 <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
20
-                <p>
21
-                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
22
-                  situated in the best location. Incredible bargain!
23
-                </p>
20
+                <p>{{currentProperty.shortDescription }}</p>
24
                 <br />
21
                 <br />
25
 
22
 
26
                 <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
23
                 <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
27
                 <router-link
24
                 <router-link
28
                   class="btn-white-border"
25
                   class="btn-white-border"
29
                   :to="`/property/residential/property/${currentProperty.id}`"
26
                   :to="`/property/residential/property/${currentProperty.id}`"
30
-                  >VIEW</router-link
31
-                >
27
+                >VIEW</router-link>
32
               </div>
28
               </div>
33
             </div>
29
             </div>
34
           </div>
30
           </div>
41
             <p>Sorry no listings where found matching your search</p>
37
             <p>Sorry no listings where found matching your search</p>
42
           </div>
38
           </div>
43
         </div>
39
         </div>
40
+        <div v-if="wait" id="preloader"></div>
44
       </div>
41
       </div>
45
     </section>
42
     </section>
46
   </main>
43
   </main>
54
 export default {
51
 export default {
55
   name: "propertysearch",
52
   name: "propertysearch",
56
   components: {
53
   components: {
57
-    propertyCard
54
+    propertyCard,
58
   },
55
   },
59
   data() {
56
   data() {
60
-    return {};
57
+    return {
58
+      wait: true,
59
+    };
61
   },
60
   },
62
   mounted() {
61
   mounted() {
62
+    this.wait = true;
63
     console.log(this.propertySearch.salesType);
63
     console.log(this.propertySearch.salesType);
64
 
64
 
65
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
65
     if (typeof this.propertySearch.propertyUsageType === "undefined") {
69
       this.propertySearch.userName = this.user.username;
69
       this.propertySearch.userName = this.user.username;
70
     }
70
     }
71
 
71
 
72
-    this.searchProperties(this.propertySearch);
72
+    this.searchProperties(this.propertySearch).then((fulfilled) => {
73
+      this.wait = false;
74
+    });
73
   },
75
   },
74
   methods: {
76
   methods: {
75
     ...mapActions("propertySearch", [
77
     ...mapActions("propertySearch", [
76
       "searchProperties",
78
       "searchProperties",
77
       "clearProperties",
79
       "clearProperties",
78
-      "updateResultsShowing"
80
+      "updateResultsShowing",
79
     ]),
81
     ]),
80
     SetType(item) {
82
     SetType(item) {
81
       this.propertySearch.propertyUsageType = item;
83
       this.propertySearch.propertyUsageType = item;
83
     SearchPage() {
85
     SearchPage() {
84
       this.clearProperties();
86
       this.clearProperties();
85
       this.$router.push("/property/search");
87
       this.$router.push("/property/search");
86
-    }
88
+    },
87
   },
89
   },
88
   computed: {
90
   computed: {
89
-    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
91
+    ...mapState("propertySearch", [
92
+      "properties",
93
+      "propertySearch",
94
+      "resultsShowing",
95
+    ]),
90
     ...mapState("authentication", ["user"]),
96
     ...mapState("authentication", ["user"]),
91
     ParamsChanged() {
97
     ParamsChanged() {
92
       console.log(JSON.stringify(this.propertySearch));
98
       console.log(JSON.stringify(this.propertySearch));
94
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
100
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
95
         this.propertySearch.propertyUsageType = "Residential";
101
         this.propertySearch.propertyUsageType = "Residential";
96
       }
102
       }
97
-      this.searchProperties(this.propertySearch);
103
+      this.searchProperties(this.propertySearch).then((fulfilled) => {
104
+        this.wait = false;
105
+      });
98
       return null;
106
       return null;
99
-    }
107
+    },
100
   },
108
   },
101
   watch: {
109
   watch: {
102
     ParamsChanged() {
110
     ParamsChanged() {
103
       return null;
111
       return null;
104
-    }
105
-  }
112
+    },
113
+  },
106
 };
114
 };
107
 </script>
115
 </script>
108
 
116
 

+ 42
- 32
src/components/property/residential/singleView/contentSection.vue View File

22
           </div>
22
           </div>
23
           <div class="panel-left p-5" style="margin-top:130px">
23
           <div class="panel-left p-5" style="margin-top:130px">
24
             <h2>Property Detial</h2>
24
             <h2>Property Detial</h2>
25
-            <p>{{ property.addressLine1 }} {{ property.addressLine2 }}</p>
26
-
27
-            <p>{{ property.city.description }}, {{ property.suburb.description }}</p>
25
+            <p v-if="property.showAddress">{{ property.addressOther }}</p>
26
+            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
27
+            <p>{{ property.suburb }}, {{ property.city }}</p>
28
             <p>{{ property.shortDescription }}</p>
28
             <p>{{ property.shortDescription }}</p>
29
             <p>{{ property.price | toCurrency }}</p>
29
             <p>{{ property.price | toCurrency }}</p>
30
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
30
+            <div class="btn-white-border">
31
+              <i class="fa fa-search"></i>BOOK A VIEWING
32
+            </div>
31
           </div>
33
           </div>
32
         </div>
34
         </div>
33
         <div class="col-md-8 p-5 resort-profile">
35
         <div class="col-md-8 p-5 resort-profile">
34
-          <h2>
35
-            {{ property.propertyName }} / {{ property.addressLine1 }} {{ property.addressLine2 }}
36
-          </h2>
36
+          <h2
37
+            v-if="property.showAddress"
38
+          >{{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}</h2>
39
+          <h2 v-else>{{ property.propertyName }}</h2>
37
           <div class="container">
40
           <div class="container">
38
             <div class="row">
41
             <div class="row">
39
               <div class="col">
42
               <div class="col">
64
                   <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
67
                   <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
65
                 </tr>
68
                 </tr>
66
               </tbody>
69
               </tbody>
67
-            </table> -->
70
+            </table>-->
68
             <div v-for="(data, i) in property.displayData" :key="i">
71
             <div v-for="(data, i) in property.displayData" :key="i">
69
               <div class="content-header">
72
               <div class="content-header">
70
                 <h2>{{ data.groupName }}</h2>
73
                 <h2>{{ data.groupName }}</h2>
72
               <table class="table table-striped">
75
               <table class="table table-striped">
73
                 <thead>
76
                 <thead>
74
                   <tr>
77
                   <tr>
75
-                    <th v-for="(tableHead, j) in data.values" :key="j" scope="col">
76
-                      {{ tableHead.name }}
77
-                    </th>
78
+                    <th
79
+                      v-for="(tableHead, j) in data.values"
80
+                      :key="j"
81
+                      scope="col"
82
+                    >{{ tableHead.name }}</th>
78
                   </tr>
83
                   </tr>
79
                 </thead>
84
                 </thead>
80
                 <tbody>
85
                 <tbody>
81
                   <tr>
86
                   <tr>
82
-                    <td v-for="(tableVal, k) in data.values" :key="k" scope="col">
83
-                      {{ tableVal.value }}
84
-                    </td>
87
+                    <td
88
+                      v-for="(tableVal, k) in data.values"
89
+                      :key="k"
90
+                      scope="col"
91
+                    >{{ tableVal.value }}</td>
85
                   </tr>
92
                   </tr>
86
                 </tbody>
93
                 </tbody>
87
               </table>
94
               </table>
112
 import gallery from "../../../shared/gallerySlideShow";
119
 import gallery from "../../../shared/gallerySlideShow";
113
 export default {
120
 export default {
114
   components: {
121
   components: {
115
-    gallery
122
+    gallery,
116
   },
123
   },
117
   props: {
124
   props: {
118
     property: {},
125
     property: {},
119
-    propertyImages: {}
126
+    propertyImages: {},
120
   },
127
   },
121
   created() {
128
   created() {
122
-    this.getListsForPropertyEdit(this.property.id);
129
+    //this.getListsForPropertyEdit(this.property.id);
123
     console.log(this.property.displayData);
130
     console.log(this.property.displayData);
124
   },
131
   },
125
   data() {
132
   data() {
126
     return {
133
     return {
127
       index: null,
134
       index: null,
128
-      date: new Date()
135
+      date: new Date(),
129
     };
136
     };
130
   },
137
   },
131
   methods: {
138
   methods: {
132
-    ...mapActions("searchTab", ["getListsForPropertyEdit"])
139
+    //...mapActions("searchTab", ["getListsForPropertyEdit"])
133
   },
140
   },
134
   computed: {
141
   computed: {
135
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
142
+    //...mapState("searchTab", ["provinces", "cities", "suburbs"]),
136
     propertyMap() {
143
     propertyMap() {
137
-      var lat = this.property.propertCoords.split(",")[0];
138
-      var lng = this.property.propertCoords.split(",")[1];
139
-      // var url =
140
-      //   "https://maps.google.com/maps?q=" +
141
-      //   lat.replace(".", ",") +
142
-      //   "," +
143
-      //   lng.replace(".", ",") +
144
-      //   "&hl=es&z=14&amp;output=embed";
145
-      var url = "";
146
-      return url;
147
-    }
148
-  }
144
+      if (this.property.propertCoords) {
145
+        var lat = this.property.propertCoords.split(",")[0];
146
+        var lng = this.property.propertCoords.split(",")[1];
147
+        // var url =
148
+        //   "https://maps.google.com/maps?q=" +
149
+        //   lat.replace(".", ",") +
150
+        //   "," +
151
+        //   lng.replace(".", ",") +
152
+        //   "&hl=es&z=14&amp;output=embed";
153
+        var url = "";
154
+        return url;
155
+      }
156
+      return "";
157
+    },
158
+  },
149
 };
159
 };
150
 </script>
160
 </script>
151
 
161
 

+ 24
- 20
src/components/shared/addressAutoComplete.vue View File

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
3
+    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace"></gmap-autocomplete>
4
   </div>
4
   </div>
5
 </template>
5
 </template>
6
 
6
 
9
   name: "AddressAutoComplete",
9
   name: "AddressAutoComplete",
10
   props: {
10
   props: {
11
     placeholder: {
11
     placeholder: {
12
-      default: "ENTER LOCATION"
13
-    }
12
+      default: "ENTER LOCATION",
13
+    },
14
   },
14
   },
15
   data() {
15
   data() {
16
     return {
16
     return {
21
       province: "",
21
       province: "",
22
       country: "",
22
       country: "",
23
       postalCode: "",
23
       postalCode: "",
24
-      url: ""
24
+      url: "",
25
+      coords: {},
25
     };
26
     };
26
   },
27
   },
27
   methods: {
28
   methods: {
34
       this.country = "";
35
       this.country = "";
35
       this.postalCode = "";
36
       this.postalCode = "";
36
       this.url = "";
37
       this.url = "";
37
-
38
+      this.coords = {};
38
       for (let i = 0; i < place.address_components.length; i++) {
39
       for (let i = 0; i < place.address_components.length; i++) {
39
         if (place.address_components[i].types[0] === "street_number") {
40
         if (place.address_components[i].types[0] === "street_number") {
40
           this.streetNumber = place.address_components[i].long_name;
41
           this.streetNumber = place.address_components[i].long_name;
48
         if (place.address_components[i].types[0] === "locality") {
49
         if (place.address_components[i].types[0] === "locality") {
49
           this.city = place.address_components[i].long_name;
50
           this.city = place.address_components[i].long_name;
50
         }
51
         }
51
-        if (place.address_components[i].types[0] === "administrative_area_level_1") {
52
+        if (
53
+          place.address_components[i].types[0] === "administrative_area_level_1"
54
+        ) {
52
           this.province = place.address_components[i].long_name;
55
           this.province = place.address_components[i].long_name;
53
         }
56
         }
54
         if (place.address_components[i].types[0] === "country") {
57
         if (place.address_components[i].types[0] === "country") {
57
         if (place.address_components[i].types[0] === "postal_code") {
60
         if (place.address_components[i].types[0] === "postal_code") {
58
           this.postalCode = place.address_components[i].long_name;
61
           this.postalCode = place.address_components[i].long_name;
59
         }
62
         }
60
-        this.url = place.url;
61
-
62
-        this.$emit("GoogleAddress", {
63
-          streetNumber: this.streetNumber,
64
-          streetName: this.streetName,
65
-          suburb: this.suburb,
66
-          city: this.city,
67
-          province: this.province,
68
-          country: this.country,
69
-          postalCode: this.postalCode,
70
-          url: this.url
71
-        });
72
       }
63
       }
73
-    }
74
-  }
64
+      this.url = place.url;
65
+      this.coords = place.geometry.location;
66
+      this.$emit("GoogleAddress", {
67
+        streetNumber: this.streetNumber,
68
+        streetName: this.streetName,
69
+        suburb: this.suburb,
70
+        city: this.city,
71
+        province: this.province,
72
+        country: this.country,
73
+        postalCode: this.postalCode,
74
+        url: this.url,
75
+        coords: this.coords,
76
+      });
77
+    },
78
+  },
75
 };
79
 };
76
 </script>
80
 </script>

+ 20
- 45
src/components/user/timeshareIndividual.vue View File

2
   <div class="form">
2
   <div class="form">
3
     <div id="sendmessage">Your details has been sent. Thank you!</div>
3
     <div id="sendmessage">Your details has been sent. Thank you!</div>
4
     <div id="errormessage"></div>
4
     <div id="errormessage"></div>
5
-    <form action="" method="post" role="form" class="contactForm">
5
+    <form action method="post" role="form" class="contactForm">
6
       <div class="form-row">
6
       <div class="form-row">
7
         <div class="form-group col-md-10">
7
         <div class="form-group col-md-10">
8
           <div class="section-header">
8
           <div class="section-header">
146
     BankAccount,
146
     BankAccount,
147
     Address,
147
     Address,
148
     SelectIndividual,
148
     SelectIndividual,
149
-    propField
149
+    propField,
150
   },
150
   },
151
   data() {
151
   data() {
152
     return {
152
     return {
159
         cellNumber: undefined,
159
         cellNumber: undefined,
160
         landlineNumber: undefined,
160
         landlineNumber: undefined,
161
         bankingDetails: {},
161
         bankingDetails: {},
162
-        address: {}
163
-      }
162
+        address: {},
163
+      },
164
     };
164
     };
165
   },
165
   },
166
   props: {
166
   props: {
167
     showChangeCurrentUser: {
167
     showChangeCurrentUser: {
168
-      default: false
168
+      default: false,
169
     },
169
     },
170
     showBank: {
170
     showBank: {
171
-      default: false
171
+      default: false,
172
     },
172
     },
173
     showAddress: {
173
     showAddress: {
174
-      default: false
175
-    }
174
+      default: false,
175
+    },
176
   },
176
   },
177
   computed: {
177
   computed: {
178
     ...mapState("timeshare", ["maritalStatus"]),
178
     ...mapState("timeshare", ["maritalStatus"]),
179
     ...mapState("individual", ["indiv"]),
179
     ...mapState("individual", ["indiv"]),
180
-    ...mapState("searchTab", ["provinces", "cities", "suburbs"]),
181
     ...mapGetters({
180
     ...mapGetters({
182
-      user: "authentication/getUser"
183
-    })
181
+      user: "authentication/getUser",
182
+    }),
184
   },
183
   },
185
   methods: {
184
   methods: {
186
     ...mapActions("individual", ["getIndividual", "updateIndividual"]),
185
     ...mapActions("individual", ["getIndividual", "updateIndividual"]),
187
-    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
188
     onSelectedItemItemChange(item) {
186
     onSelectedItemItemChange(item) {
189
       this.currentUser = item;
187
       this.currentUser = item;
190
     },
188
     },
191
-    ProvinceSelected(item) {
192
-      if (item.target.options.selectedIndex > 0) {
193
-        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
194
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
195
-      }
196
-    },
197
-    CitySelected(item) {
198
-      if (item.target.options.selectedIndex > 0) {
199
-        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
200
-        this.getSuburbs(
201
-          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
202
-        );
203
-      }
204
-    },
205
-    getPostalCode(item) {
206
-      this.address.postalCode = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
207
-    },
208
     UpdateValue(item) {
189
     UpdateValue(item) {
209
       if (item.fieldName) {
190
       if (item.fieldName) {
210
         if (item.fieldName === "name") {
191
         if (item.fieldName === "name") {
239
         }
220
         }
240
         if (item.fieldName === "province") {
221
         if (item.fieldName === "province") {
241
           if (item.value !== "") {
222
           if (item.value !== "") {
242
-            this.address.province = this.provinces.find(p => p.description === item.value);
223
+            this.address.province = this.provinces.find(
224
+              (p) => p.description === item.value
225
+            );
243
             this.address.provinceId = this.address.province.id;
226
             this.address.provinceId = this.address.province.id;
244
             this.getCities(Object.assign({}, { province: item.value }));
227
             this.getCities(Object.assign({}, { province: item.value }));
245
             this.address.city = null;
228
             this.address.city = null;
256
         }
239
         }
257
         if (item.fieldName === "city") {
240
         if (item.fieldName === "city") {
258
           if (item.value !== "") {
241
           if (item.value !== "") {
259
-            const newCity = this.cities.find(p => p.description === item.value);
242
+            const newCity = this.cities.find(
243
+              (p) => p.description === item.value
244
+            );
260
             this.address.city = newCity;
245
             this.address.city = newCity;
261
             this.address.cityId = newCity.id;
246
             this.address.cityId = newCity.id;
262
-            this.getSuburbs(
263
-              Object.assign(
264
-                {},
265
-                {
266
-                  province: this.address.province.description,
267
-                  city: item.value
268
-                }
269
-              )
270
-            );
271
             this.address.suburb = null;
247
             this.address.suburb = null;
272
             this.address.postalCode = "";
248
             this.address.postalCode = "";
273
           } else {
249
           } else {
279
         }
255
         }
280
         if (item.fieldName === "suburb") {
256
         if (item.fieldName === "suburb") {
281
           if (item.value !== "") {
257
           if (item.value !== "") {
282
-            const newSuburb = this.suburbs.find(p => p.description === item.value);
258
+            const newSuburb = this.suburbs.find(
259
+              (p) => p.description === item.value
260
+            );
283
             this.address.suburb = newSuburb;
261
             this.address.suburb = newSuburb;
284
             this.address.suburbId = newSuburb.id;
262
             this.address.suburbId = newSuburb.id;
285
             this.address.postalCode = this.address.suburb.postalCode;
263
             this.address.postalCode = this.address.suburb.postalCode;
297
     },
275
     },
298
     Close() {
276
     Close() {
299
       this.$router.push("/status/userManagementPage");
277
       this.$router.push("/status/userManagementPage");
300
-    }
278
+    },
301
   },
279
   },
302
-  mounted() {
303
-    this.getProvince();
304
-  }
305
 };
280
 };
306
 </script>
281
 </script>
307
 
282
 

+ 2
- 2
src/main.js View File

25
 });
25
 });
26
 Vue.config.productionTip = false;
26
 Vue.config.productionTip = false;
27
 //axios.defaults.baseURL = "http://localhost:57260";
27
 //axios.defaults.baseURL = "http://localhost:57260";
28
-//axios.defaults.baseURL = "http://training.provision-sa.com:82";
29
-axios.defaults.baseURL = "http://localhost:8080/";
28
+axios.defaults.baseURL = "http://training.provision-sa.com:82";
29
+//axios.defaults.baseURL = "http://localhost:8080/";
30
 
30
 
31
 Vue.prototype.$axios = axios;
31
 Vue.prototype.$axios = axios;
32
 
32
 

+ 37
- 84
src/store/modules/property/property.js View File

1
-import axios from 'axios';
2
-import { Date } from 'core-js';
1
+import axios from "axios";
2
+import { Date } from "core-js";
3
 
3
 
4
 export default {
4
 export default {
5
   namespaced: true,
5
   namespaced: true,
6
   state: {
6
   state: {
7
-    property: {
8
-      createdBy: '',
9
-      propertyTypeId: 0,
10
-      propertyName: '',
11
-      unit: '',
12
-      operationalCosts: 0.0,
13
-      price: 0,
14
-      pricePer: '',
15
-      isSale: false,
16
-      description: '',
17
-      shortDescription: '',
18
-      addressLine1: '',
19
-      addressLine2: '',
20
-      addressLine3: '',
21
-      suburbId: 0,
22
-      cityId: 0,
23
-      provinceId: 0,
24
-      published: false,
25
-      propertyUserFields: [],
26
-      propertyImages: [],
27
-      id: 0,
28
-      virtualTour: '',
29
-      video: '',
30
-      userId: 0,
31
-      dateAvailable: Date,
32
-    },
7
+    property: {},
33
     propertyImages: [],
8
     propertyImages: [],
34
     propertyTypes: [],
9
     propertyTypes: [],
35
     propertyTypesRes: [],
10
     propertyTypesRes: [],
36
     propertyTypesCom: [],
11
     propertyTypesCom: [],
37
     propertyOverviewFields: [],
12
     propertyOverviewFields: [],
38
-    propertyFields: [],
13
+    propertyFields: []
39
   },
14
   },
40
   mutations: {
15
   mutations: {
41
     setProperty(state, property) {
16
     setProperty(state, property) {
64
         state.properties.push(property);
39
         state.properties.push(property);
65
       }
40
       }
66
     },
41
     },
67
-    clearProperty(state) {
68
-      state.property = {
69
-        createdBy: '',
70
-        propertyTypeId: 0,
71
-        propertyName: '',
72
-        unit: '',
73
-        operationalCosts: 0.0,
74
-        price: 0,
75
-        pricePer: '',
76
-        isSale: false,
77
-        description: '',
78
-        shortDescription: '',
79
-        addressLine1: '',
80
-        addressLine2: '',
81
-        addressLine3: '',
82
-        suburbId: 0,
83
-        cityId: 0,
84
-        provinceId: 0,
85
-        published: false,
86
-        propertyUserFields: [],
87
-        propertyImages: [],
88
-        id: 0,
89
-        virtualTour: '',
90
-        video: '',
91
-        userId: 0,
92
-        dateAvailable: Date,
93
-      };
94
-    },
95
     clearPropertyImages(state) {
42
     clearPropertyImages(state) {
96
       state.propertyImages = [];
43
       state.propertyImages = [];
97
-    },
44
+    }
98
   },
45
   },
99
   getters: {},
46
   getters: {},
100
   actions: {
47
   actions: {
101
     getProperty({ commit }, id) {
48
     getProperty({ commit }, id) {
102
       axios
49
       axios
103
         .get(`/api/Property/getDetailed/${id}`)
50
         .get(`/api/Property/getDetailed/${id}`)
104
-        .then(result => commit('setProperty', result.data))
51
+        .then(result => commit("setProperty", result.data))
105
         .catch(console.error);
52
         .catch(console.error);
106
     },
53
     },
107
     getPropertyImages({ commit }, id) {
54
     getPropertyImages({ commit }, id) {
108
       axios
55
       axios
109
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)
56
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)
110
-        .then(result => commit('setPropertyImages', result.data))
57
+        .then(result => commit("setPropertyImages", result.data))
111
         .catch(console.error);
58
         .catch(console.error);
112
     },
59
     },
113
     getPropertyTypes({ commit }, propertyType) {
60
     getPropertyTypes({ commit }, propertyType) {
114
       axios
61
       axios
115
         .get(`/api/PropertyType/type/${propertyType}`)
62
         .get(`/api/PropertyType/type/${propertyType}`)
116
-        .then(result => commit('setPropertyTypes', result.data))
63
+        .then(result => commit("setPropertyTypes", result.data))
117
         .catch(console.error);
64
         .catch(console.error);
118
     },
65
     },
119
     getPropertyTypesRes({ commit }) {
66
     getPropertyTypesRes({ commit }) {
120
       axios
67
       axios
121
-        .get('/api/PropertyType/type/Residential')
122
-        .then(result => commit('setPropertyTypesRes', result.data))
68
+        .get("/api/PropertyType/type/Residential")
69
+        .then(result => commit("setPropertyTypesRes", result.data))
123
         .catch(console.error);
70
         .catch(console.error);
124
     },
71
     },
125
     getPropertyTypesCom({ commit }) {
72
     getPropertyTypesCom({ commit }) {
126
       axios
73
       axios
127
-        .get('/api/PropertyType/type/Commercial')
128
-        .then(result => commit('setPropertyTypesCom', result.data))
74
+        .get("/api/PropertyType/type/Commercial")
75
+        .then(result => commit("setPropertyTypesCom", result.data))
129
         .catch(console.error);
76
         .catch(console.error);
130
     },
77
     },
131
     getPropertyOverviewFields({ commit }) {
78
     getPropertyOverviewFields({ commit }) {
132
       axios
79
       axios
133
-        .get('/api/PropertyFields/Property Overview')
134
-        .then(response => commit('setPropertyOverviewFields', response.data));
80
+        .get("/api/PropertyFields/Property Overview")
81
+        .then(response => commit("setPropertyOverviewFields", response.data));
135
     },
82
     },
136
     getPropertyFields({ commit }, propertyType) {
83
     getPropertyFields({ commit }, propertyType) {
137
       axios
84
       axios
138
         .get(`/api/propertyFields/PropertyType/${propertyType}`)
85
         .get(`/api/propertyFields/PropertyType/${propertyType}`)
139
-        .then(response => commit('setPropertyFields', response.data));
86
+        .then(response => commit("setPropertyFields", response.data));
140
     },
87
     },
141
     getPropertySavedOverviewFields({ commit }, id) {
88
     getPropertySavedOverviewFields({ commit }, id) {
142
       axios
89
       axios
143
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
90
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
144
-        .then(response => commit('setPropertyOverviewFields', response.data))
91
+        .then(response => commit("setPropertyOverviewFields", response.data))
145
         .catch(console.error);
92
         .catch(console.error);
146
     },
93
     },
147
     getPropertySavedFields({ commit }, item) {
94
     getPropertySavedFields({ commit }, item) {
148
       axios
95
       axios
149
         .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
96
         .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
150
-        .then(response => commit('setPropertyFields', response.data))
97
+        .then(response => commit("setPropertyFields", response.data))
151
         .catch(console.error);
98
         .catch(console.error);
152
     },
99
     },
153
     saveProperty({ commit }, item) {
100
     saveProperty({ commit }, item) {
154
       return new Promise((resolve, reject) => {
101
       return new Promise((resolve, reject) => {
155
         axios
102
         axios
156
-          .post('/api/Property', item)
157
-          .then((resp) => {
158
-            commit('updateCurrentProperty', resp);
103
+          .post("/api/Property", item)
104
+          .then(resp => {
105
+            commit("updateCurrentProperty", resp);
159
             resolve(resp);
106
             resolve(resp);
160
           })
107
           })
161
           .catch(() => {
108
           .catch(() => {
164
       });
111
       });
165
     },
112
     },
166
     clearProperty({ commit }) {
113
     clearProperty({ commit }) {
167
-      commit('clearProperty');
114
+      axios
115
+        .get("/api/Property/getDetailed/0")
116
+        .then(result => {
117
+          alert(JSON.stringify(result.data));
118
+          commit("setProperty", result.data);
119
+        })
120
+        .catch(console.error);
168
     },
121
     },
169
     clearPropertyImages({ commit }) {
122
     clearPropertyImages({ commit }) {
170
-      commit('clearPropertyImages');
123
+      commit("clearPropertyImages");
171
     },
124
     },
172
     getSavedPropertyData({ commit }, item) {
125
     getSavedPropertyData({ commit }, item) {
173
-      commit('clearProperty');
174
-      commit('clearPropertyImages');
126
+      commit("clearProperty");
127
+      commit("clearPropertyImages");
175
 
128
 
176
       axios
129
       axios
177
         .get(`/api/Property/getProperty/${item.id}`)
130
         .get(`/api/Property/getProperty/${item.id}`)
178
-        .then(result => commit('setProperty', result.data))
131
+        .then(result => commit("setProperty", result.data))
179
         .catch(console.error);
132
         .catch(console.error);
180
 
133
 
181
       axios
134
       axios
182
         .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
135
         .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
183
-        .then(result => commit('setPropertyImages', result.data))
136
+        .then(result => commit("setPropertyImages", result.data))
184
         .catch(console.error);
137
         .catch(console.error);
185
 
138
 
186
       axios
139
       axios
187
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${item.id}`)
140
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${item.id}`)
188
-        .then(response => commit('setPropertyOverviewFields', response.data))
141
+        .then(response => commit("setPropertyOverviewFields", response.data))
189
         .catch(console.error);
142
         .catch(console.error);
190
 
143
 
191
       axios
144
       axios
192
         .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
145
         .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
193
-        .then(response => commit('setPropertyFields', response.data))
146
+        .then(response => commit("setPropertyFields", response.data))
194
         .catch(console.error);
147
         .catch(console.error);
195
     },
148
     },
196
     getSavedPropertyImages({ commit }, id) {
149
     getSavedPropertyImages({ commit }, id) {
197
       axios
150
       axios
198
         .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
151
         .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
199
-        .then(result => commit('setPropertyImages', result.data))
152
+        .then(result => commit("setPropertyImages", result.data))
200
         .catch(console.error);
153
         .catch(console.error);
201
-    },
202
-  },
154
+    }
155
+  }
203
 };
156
 };

+ 57
- 54
src/store/modules/property/propertySearch.js View File

1
 /* eslint-disable valid-typeof */
1
 /* eslint-disable valid-typeof */
2
 /* eslint-disable max-len */
2
 /* eslint-disable max-len */
3
 /* eslint-disable indent */
3
 /* eslint-disable indent */
4
-import axios from 'axios';
5
-import _ from 'lodash';
6
-import log from '../../../assets/Log';
4
+import axios from "axios";
5
+import _ from "lodash";
6
+import log from "../../../assets/Log";
7
 
7
 
8
 export default {
8
 export default {
9
   namespaced: true,
9
   namespaced: true,
10
   state: {
10
   state: {
11
     propertySearch: {
11
     propertySearch: {
12
-      userName: '',
13
-      salesType: 'Sale',
14
-      propertyUsageType: 'All',
15
-      propertyType: 'All',
16
-      province: 'All',
17
-      city: 'All',
18
-      suburb: 'All',
12
+      userName: "",
13
+      salesType: "Sale",
14
+      propertyUsageType: "All",
15
+      propertyType: "All",
16
+      province: "All",
17
+      city: "All",
18
+      suburb: "All",
19
       minPrice: 0,
19
       minPrice: 0,
20
       maxPrice: 0,
20
       maxPrice: 0,
21
       availableFrom: undefined,
21
       availableFrom: undefined,
22
-      propertyId: 0,
22
+      propertyId: 0
23
     },
23
     },
24
     properties: [],
24
     properties: [],
25
     latestProperties: [],
25
     latestProperties: [],
26
     suburbs: [],
26
     suburbs: [],
27
-    searchText: '',
27
+    searchText: "",
28
     suburbList: [],
28
     suburbList: [],
29
-    resultsShowing: false,
29
+    resultsShowing: false
30
   },
30
   },
31
   mutations: {
31
   mutations: {
32
     updateSearch(state, propertySearch) {
32
     updateSearch(state, propertySearch) {
40
       state.propertySearch = search;
40
       state.propertySearch = search;
41
     },
41
     },
42
     onClearFilter(state, filter) {
42
     onClearFilter(state, filter) {
43
-      if (filter === 'availableFrom') {
43
+      if (filter === "availableFrom") {
44
         state.propertySearch[filter] = undefined;
44
         state.propertySearch[filter] = undefined;
45
       } else {
45
       } else {
46
-        state.propertySearch[filter] = 'All';
46
+        state.propertySearch[filter] = "All";
47
       }
47
       }
48
     },
48
     },
49
     setSuburbs(state, items) {
49
     setSuburbs(state, items) {
59
     },
59
     },
60
     setResultsShowing(state, value) {
60
     setResultsShowing(state, value) {
61
       state.resultsShowing = value;
61
       state.resultsShowing = value;
62
-    },
62
+    }
63
   },
63
   },
64
   getters: {
64
   getters: {
65
-    filterSuburbs: (state) => {
65
+    filterSuburbs: state => {
66
       let subs = state.suburbs;
66
       let subs = state.suburbs;
67
       if (state.searchText) {
67
       if (state.searchText) {
68
         subs = _.filter(subs, s => s.display.contains(state.searchText));
68
         subs = _.filter(subs, s => s.display.contains(state.searchText));
69
       }
69
       }
70
       return subs;
70
       return subs;
71
-    },
71
+    }
72
   },
72
   },
73
   actions: {
73
   actions: {
74
     clearFilter({ commit }, filter) {
74
     clearFilter({ commit }, filter) {
75
-      commit('onClearFilter', filter);
75
+      commit("onClearFilter", filter);
76
     },
76
     },
77
     searchProperties({ commit }, item) {
77
     searchProperties({ commit }, item) {
78
-      if (item.keyword === '') {
79
-        item.keyword = 'All';
80
-      }
81
-      if (log.isLoggedIn()) {
82
-        item.userName = log.getUser().username;
83
-      } else if (item.userName === '') {
84
-        item.userName = 'Unknown';
85
-      }
86
-      if (item.suburb === '') {
87
-        item.suburb = 'All';
88
-      }
89
-      if (item.city === '') {
90
-        item.city = 'All';
91
-      }
92
-      if (item.province === '') {
93
-        item.province = 'All';
94
-      }
95
-      axios
96
-        .get(
97
-          `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`,
98
-        )
99
-        .then(result => commit('updateSearch', result.data))
100
-        .catch(console.error);
78
+      return new Promise((resolve, reject) => {
79
+        if (item.keyword === "") {
80
+          item.keyword = "All";
81
+        }
82
+        if (log.isLoggedIn()) {
83
+          item.userName = log.getUser().username;
84
+        } else if (item.userName === "") {
85
+          item.userName = "Unknown";
86
+        }
87
+        if (item.suburb === "") {
88
+          item.suburb = "All";
89
+        }
90
+        if (item.city === "") {
91
+          item.city = "All";
92
+        }
93
+        if (item.province === "") {
94
+          item.province = "All";
95
+        }
96
+        console.log(
97
+          `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`
98
+        );
99
+
100
+        axios
101
+          .get(
102
+            `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}/${item.availableFrom}/${item.propertyId}`
103
+          )
104
+          .then(result => {
105
+            commit("updateSearch", result.data);
106
+            resolve();
107
+          })
108
+          .catch(errro => reject(new Error(error.message)));
109
+      });
101
     },
110
     },
102
     searchLatestProperties({ commit }) {
111
     searchLatestProperties({ commit }) {
103
       axios
112
       axios
104
-        .get('/api/property/latestProperties')
105
-        .then(response => commit('setLatestProperties', response.data))
106
-        .catch(console.error);
107
-    },
108
-    getSuburbs({ commit }) {
109
-      axios
110
-        .get('/api/suburb/GetSearchList')
111
-        .then(response => commit('setSuburbs', response.data))
113
+        .get("/api/property/latestProperties")
114
+        .then(response => commit("setLatestProperties", response.data))
112
         .catch(console.error);
115
         .catch(console.error);
113
     },
116
     },
114
     applyFilter({ commit }, value) {
117
     applyFilter({ commit }, value) {
115
-      commit('setFilter', { value });
118
+      commit("setFilter", { value });
116
     },
119
     },
117
     updateResultsShowing({ commit }, value) {
120
     updateResultsShowing({ commit }, value) {
118
-      commit('setResultsShowing', value);
119
-    },
120
-  },
121
+      commit("setResultsShowing", value);
122
+    }
123
+  }
121
 };
124
 };

+ 7
- 41
src/store/modules/searchTab.js View File

1
-import axios from 'axios';
1
+import axios from "axios";
2
 
2
 
3
 export default {
3
 export default {
4
   namespaced: true,
4
   namespaced: true,
5
   state: {
5
   state: {
6
-    provinces: [],
7
-    cities: [],
8
-    suburbs: [],
6
+    provinces: []
9
   },
7
   },
10
   mutations: {
8
   mutations: {
11
     setProvince(state, provinces) {
9
     setProvince(state, provinces) {
12
       state.provinces = provinces;
10
       state.provinces = provinces;
13
-    },
14
-    setCities(state, cities) {
15
-      state.cities = cities;
16
-    },
17
-    setSuburbs(state, suburbs) {
18
-      state.suburbs = suburbs;
19
-    },
11
+    }
20
   },
12
   },
21
   getters: {},
13
   getters: {},
22
   actions: {
14
   actions: {
23
     getProvince({ commit }) {
15
     getProvince({ commit }) {
24
       axios
16
       axios
25
-        .get('/api/province')
26
-        .then(result => commit('setProvince', result.data))
17
+        .get("/api/province")
18
+        .then(result => commit("setProvince", result.data))
27
         .catch(console.error);
19
         .catch(console.error);
28
-    },
29
-    getCities({ commit }, item) {
30
-      axios
31
-        .get(`/api/city/getBy/${item.province}`)
32
-        .then(result => commit('setCities', result.data));
33
-    },
34
-    getSuburbs({ commit }, item) {
35
-      axios
36
-        .get(`/api/Suburb/${item.province}/${item.city}`)
37
-        .then(result => commit('setSuburbs', result.data));
38
-    },
39
-    getListsForPropertyEdit({ commit }, propertyId) {
40
-      axios
41
-        .get('/api/province')
42
-        .then(result => commit('setProvince', result.data))
43
-        .catch(console.error);
44
-
45
-      axios
46
-        .get(`/api/City/GetByProperty/${propertyId}`)
47
-        .then(result => commit('setCities', result.data))
48
-        .catch(console.error);
49
-
50
-      axios
51
-        .get(`/api/Suburb/GetByProperty/${propertyId}`)
52
-        .then(result => commit('setSuburbs', result.data))
53
-        .catch(console.error);
54
-    },
55
-  },
20
+    }
21
+  }
56
 };
22
 };

+ 2
- 2
vue.config.js View File

2
   devServer: {
2
   devServer: {
3
     proxy: {
3
     proxy: {
4
       "/api": {
4
       "/api": {
5
-        target: "http://localhost:57260/",
6
-        //target: "http://training.provision-sa.com:82",
5
+        //target: "http://localhost:57260/",
6
+        target: "http://training.provision-sa.com:82",
7
         changeOrigin: true
7
         changeOrigin: true
8
       },
8
       },
9
       "/nph-srep": {
9
       "/nph-srep": {

Loading…
Cancel
Save