Browse Source

Minor Changes (for sale/for rent)

master
30117125 4 years ago
parent
commit
a3b7b99a85

+ 8
- 5
src/components/property/commercial/singleView/carouselSection.vue View File

30
 import carousel from "vue-owl-carousel";
30
 import carousel from "vue-owl-carousel";
31
 export default {
31
 export default {
32
   components: {
32
   components: {
33
-    carousel,
33
+    carousel
34
   },
34
   },
35
   data() {
35
   data() {
36
     return {
36
     return {
37
-      images: [],
37
+      images: []
38
     };
38
     };
39
   },
39
   },
40
   props: {
40
   props: {
41
-    propertyImages: {},
41
+    propertyImages: {}
42
   },
42
   },
43
-  created() {
43
+  mounted() {
44
+    // setTimeout(() => {
45
+    //   this.wait = false;
46
+    // }, 2000);
44
     this.$emit("Loaded", true);
47
     this.$emit("Loaded", true);
45
-  },
48
+  }
46
 };
49
 };
47
 </script>
50
 </script>
48
 
51
 

+ 43
- 68
src/components/property/commercial/singleView/contentSection.vue View File

1
 <template>
1
 <template>
2
-  <section>
2
+  <section :class="propertyImages.length > 0 ? 'noImages' : 'images'">
3
     <div class="container">
3
     <div class="container">
4
       <div class="row" id="resort-profile">
4
       <div class="row" id="resort-profile">
5
         <div class="col-md-4">
5
         <div class="col-md-4">
13
               allowfullscreen
13
               allowfullscreen
14
               style="margin-bottom:-6px"
14
               style="margin-bottom:-6px"
15
             ></iframe>
15
             ></iframe>
16
-            <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
17
-              <div v-if="i < 3">
18
-                <img
19
-                  v-if="i === 0"
20
-                  style="width:100%; height:201px;object-fit: cover"
21
-                  :src="image.image"
22
-                />
23
-                <div v-else-if="i !== 0">
16
+            <div v-if="propertyImages.length > 0">
17
+              <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
18
+                <div v-if="i < 3">
24
                   <img
19
                   <img
25
-                    v-if="i % 2 === 0"
26
-                    style="width:50%; height:140px; float:right;"
20
+                    v-if="i === 0"
21
+                    style="width:100%; height:201px;object-fit: cover"
27
                     :src="image.image"
22
                     :src="image.image"
28
                   />
23
                   />
29
-                  <img v-else style="width:50%; height:140px; float:left" :src="image.image" />
24
+                  <div v-else-if="i !== 0">
25
+                    <img
26
+                      v-if="i % 2 === 0"
27
+                      style="width:50%; height:140px; float:right;"
28
+                      :src="image.image"
29
+                    />
30
+                    <img v-else style="width:50%; height:140px; float:left" :src="image.image" />
31
+                  </div>
30
                 </div>
32
                 </div>
31
               </div>
33
               </div>
34
+              <gallery :images="Images" :index="index" @close="index = null"></gallery>
32
             </div>
35
             </div>
33
-
34
-            <gallery :images="Images" :index="index" @close="index = null"></gallery>
35
           </div>
36
           </div>
36
 
37
 
37
-          <div class="panel-left p-5" style="margin-top:140px;">
38
+          <div
39
+            class="panel-left p-5"
40
+            :class="propertyImages.length > 0 ? 'galleryImages' : 'noGalleryImages'"
41
+          >
38
             <h2>Property Detial</h2>
42
             <h2>Property Detial</h2>
39
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
43
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
40
             <p>{{ property.city }}, {{ property.suburb }}</p>
44
             <p>{{ property.city }}, {{ property.suburb }}</p>
52
               </p>
56
               </p>
53
             </div>-->
57
             </div>-->
54
             <p>{{ property.shortDescription }}</p>
58
             <p>{{ property.shortDescription }}</p>
55
-            <p>{{ property.price | toCurrency }}</p>
59
+
60
+            <p v-if="property.statusString === 'For Sale'">{{ property.price | toCurrency }}</p>
61
+            <p v-else>{{ property.price | toCurrency }} Per Month</p>
56
           </div>
62
           </div>
57
           <div class="panel-left px-5 pb-5 text-center">
63
           <div class="panel-left px-5 pb-5 text-center">
58
             <h4 class="text-white">Share this Property</h4>
64
             <h4 class="text-white">Share this Property</h4>
136
             style="margin-bottom:-6px"
142
             style="margin-bottom:-6px"
137
             class="mt-3"
143
             class="mt-3"
138
           ></iframe>
144
           ></iframe>
139
-          <!-- <div>
140
-            <table class="table table-striped">
141
-              <thead>
142
-                <tr>
143
-                  <th scope="col">Reference</th>
144
-                  <th scope="col">Unit</th>
145
-                  <th scope="col">Location</th>
146
-                  <th scope="col">Kitchen</th>
147
-                  <th scope="col">Extras</th>
148
-                  <th scope="col"></th>
149
-                </tr>
150
-              </thead>
151
-              <tbody>
152
-                <tr>
153
-                  <td>#{{ property.id }}</td>
154
-                  <td>#{{ property.unit }}</td>
155
-                  <td>Second Floor</td>
156
-                  <td>yes</td>
157
-                  <td v-if="property.displayData && property.displayData.length > 0">
158
-                    <div class="row" v-for="(feat, i) in property.displayData[0].values" :key="i">
159
-                      <div class="col" v-if="feat.value.toUpperCase() !== 'NO'">
160
-                        <div></div>
161
-                        {{ feat.name }} ({{ feat.value }})
162
-                      </div>
163
-                    </div>
164
-                  </td>
165
-                  <td>
166
-                    
167
-                  </td>
168
-                </tr>
169
-              </tbody>
170
-            </table>
171
-          </div>-->
172
-
173
-          <!-- <div class="d-flex mt-3">
174
-            <iframe
175
-              width="100%"
176
-              height="200"
177
-              id="gmap_canvas"
178
-              src=""
179
-              frameborder="0"
180
-              scrolling="no"
181
-              marginheight="0"
182
-              marginwidth="0"
183
-            ></iframe>
184
-          </div>-->
185
         </div>
145
         </div>
186
       </div>
146
       </div>
187
     </div>
147
     </div>
199
     property: {},
159
     property: {},
200
     propertyImages: {}
160
     propertyImages: {}
201
   },
161
   },
202
-  mounted() {
203
-    console.log(this.property);
204
-  },
205
   data() {
162
   data() {
206
     return {
163
     return {
207
       index: null,
164
       index: null,
211
   computed: {
168
   computed: {
212
     Images() {
169
     Images() {
213
       const list = [];
170
       const list = [];
214
-      for (let i = 0; i < this.propertyImages.length; i++) {
215
-        list.push(this.propertyImages[i].image);
171
+      if (this.propertyImages) {
172
+        for (let i = 0; i < this.propertyImages.length; i++) {
173
+          list.push(this.propertyImages[i].image);
174
+        }
216
       }
175
       }
217
       return list;
176
       return list;
218
     }
177
     }
219
   },
178
   },
220
-  created() {
179
+  created() {},
180
+  mounted() {
221
     this.$emit("Loaded", true);
181
     this.$emit("Loaded", true);
222
   }
182
   }
223
 };
183
 };
224
 </script>
184
 </script>
225
 
185
 
226
 <style lang="scss" scoped>
186
 <style lang="scss" scoped>
187
+.images {
188
+  padding-top: 100px;
189
+}
190
+
191
+.noImages {
192
+  padding-top: 0px;
193
+}
194
+
195
+.galleryImages {
196
+  margin-top: 140px;
197
+}
198
+
199
+.noGalleryImages {
200
+  margin-top: 0px;
201
+}
227
 /* Extra small devices (phones, 600px and down) */
202
 /* Extra small devices (phones, 600px and down) */
228
 @media only screen and (max-width: 575px) {
203
 @media only screen and (max-width: 575px) {
229
   .resPortfolioSection {
204
   .resPortfolioSection {

+ 20
- 18
src/components/property/commercial/singleView/singleCommercialPage.vue View File

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <carouselSection
4
-      v-if="propertyImages.length > 0"
5
-      :propertyImages="propertyImages"
6
-      @Loaded="CarouselDone"
7
-    />
3
+    <carouselSection :propertyImages="propertyImages" @Loaded="carouselLoaded = true" />
8
     <main id="main" style="margin-top:-20px">
4
     <main id="main" style="margin-top:-20px">
9
       <contentSection
5
       <contentSection
10
-        v-if="propertyImages.length > 0"
11
         :property="property"
6
         :property="property"
12
         :propertyImages="propertyImages"
7
         :propertyImages="propertyImages"
13
-        @Loaded="ContentDone"
8
+        @Loaded="contentloaded = true"
14
       />
9
       />
15
     </main>
10
     </main>
16
     <div v-if="Wait" id="preloader"></div>
11
     <div v-if="Wait" id="preloader"></div>
21
 <script>
16
 <script>
22
 /* eslint-disable */
17
 /* eslint-disable */
23
 
18
 
24
-import { mapState, mapActions } from "vuex";
19
+import { mapState, mapActions, mapGetters } from "vuex";
25
 import makeOffer from "../../../processFlow/makeOffer";
20
 import makeOffer from "../../../processFlow/makeOffer";
26
 import carouselSection from "./carouselSection";
21
 import carouselSection from "./carouselSection";
27
 import contentSection from "./contentSection";
22
 import contentSection from "./contentSection";
31
   components: {
26
   components: {
32
     makeOffer,
27
     makeOffer,
33
     carouselSection,
28
     carouselSection,
34
-    contentSection,
29
+    contentSection
35
   },
30
   },
36
   data() {
31
   data() {
37
     return {
32
     return {
38
       index: null,
33
       index: null,
39
       date: new Date(),
34
       date: new Date(),
40
-      wait: false,
35
+      wait: true,
41
       carouselLoaded: false,
36
       carouselLoaded: false,
42
       contentloaded: false,
37
       contentloaded: false,
38
+      dataProp: {},
39
+      dataImages: {}
43
     };
40
     };
44
   },
41
   },
45
   mounted() {
42
   mounted() {
46
-    this.wait = true;
47
-    this.carouselLoaded = false;
48
-    this.contentloaded = false;
49
     this.clearPropertyImages();
43
     this.clearPropertyImages();
50
-    this.getDisplayProperty(this.$route.params.id);
44
+    this.getDisplayProperty(this.$route.params.id).then(data => {
45
+      this.getSavedPropertyImages(data.id).then(() => {
46
+        this.wait = false;
47
+      });
48
+    });
51
     // await this.getPropertyImages(this.$route.params.id);
49
     // await this.getPropertyImages(this.$route.params.id);
52
     // this.mayEditProperty(this.$route.params.id);
50
     // this.mayEditProperty(this.$route.params.id);
53
   },
51
   },
58
         return true;
56
         return true;
59
       }
57
       }
60
       return false;
58
       return false;
61
-    },
59
+    }
62
   },
60
   },
63
   methods: {
61
   methods: {
64
-    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
62
+    ...mapActions("property", [
63
+      "getDisplayProperty",
64
+      "clearPropertyImages",
65
+      "getSavedPropertyImages"
66
+    ]),
65
     formatPrice(value) {
67
     formatPrice(value) {
66
       const val = (value / 1).toFixed(2);
68
       const val = (value / 1).toFixed(2);
67
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
69
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
77
     },
79
     },
78
     ContentDone() {
80
     ContentDone() {
79
       this.contentloaded = true;
81
       this.contentloaded = true;
80
-    },
82
+    }
81
   },
83
   },
82
   beforeDestroy() {
84
   beforeDestroy() {
83
     this.clearPropertyImages();
85
     this.clearPropertyImages();
84
-  },
86
+  }
85
 };
87
 };
86
 </script>
88
 </script>
87
 
89
 

+ 26
- 4
src/components/property/propertyCardSearch.vue View File

25
                 </p>
25
                 </p>
26
                 <p
26
                 <p
27
                   v-if="currentProperty.displayText != ''"
27
                   v-if="currentProperty.displayText != ''"
28
-                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
28
+                  :class="[
29
+                    currentProperty.displayColor === 'green'
30
+                      ? 'greenText'
31
+                      : currentProperty.displayColor === 'orange'
32
+                      ? 'pendingOffer'
33
+                      : currentProperty.displayColor === 'red'
34
+                      ? 'redText'
35
+                      : 'normalText'
36
+                  ]"
29
                 >
37
                 >
30
                   <strong>{{ currentProperty.displayText }}</strong>
38
                   <strong>{{ currentProperty.displayText }}</strong>
31
                 </p>
39
                 </p>
48
                   <strong>Property Reference</strong>
56
                   <strong>Property Reference</strong>
49
                   {{ currentProperty.propertyReference }}
57
                   {{ currentProperty.propertyReference }}
50
                 </p>
58
                 </p>
59
+                <p
60
+                  v-if="currentProperty.displayText != ''"
61
+                  :class="[
62
+                    currentProperty.displayColor === 'green'
63
+                      ? 'greenText'
64
+                      : currentProperty.displayColor === 'orange'
65
+                      ? 'pendingOffer'
66
+                      : currentProperty.displayColor === 'red'
67
+                      ? 'redText'
68
+                      : 'normalText'
69
+                  ]"
70
+                >
71
+                  <strong>{{ currentProperty.displayText }}</strong>
72
+                </p>
51
               </div>
73
               </div>
52
             </router-link>
74
             </router-link>
53
           </div>
75
           </div>
65
   props: {
87
   props: {
66
     properties: { type: Array, default: () => [] },
88
     properties: { type: Array, default: () => [] },
67
     showSort: { type: Boolean, default: true },
89
     showSort: { type: Boolean, default: true },
68
-    salesType: { type: String, default: "Rent" },
90
+    salesType: { type: String, default: "Rent" }
69
   },
91
   },
70
   methods: {
92
   methods: {
71
     sortHighPrice() {
93
     sortHighPrice() {
103
       }
125
       }
104
 
126
 
105
       return this.properties.sort(compare);
127
       return this.properties.sort(compare);
106
-    },
107
-  },
128
+    }
129
+  }
108
 };
130
 };
109
 </script>
131
 </script>
110
 
132
 

+ 0
- 28
src/components/property/residential/residentialSearchResults.vue View File

11
       :properties="properties"
11
       :properties="properties"
12
       :showSort="false"
12
       :showSort="false"
13
     />
13
     />
14
-    <!-- <section v-if="properties.length > 0">
15
-      <div class="container">
16
-        <div class="row justify-content-md-center">
17
-          <div
18
-            class="col-lg-3 col-md-6 col-sm-6"
19
-            v-for="currentProperty in properties"
20
-            :key="currentProperty.id"
21
-          >
22
-            <div>
23
-              <div class="portfolio-item">
24
-                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
25
-
26
-                <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
27
-                <p>{{ currentProperty.shortDescription }}</p>
28
-                <br />
29
-
30
-                <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a>
31
-                <router-link
32
-                  class="btn-white-border"
33
-                  :to="`/property/residential/property/${currentProperty.id}`"
34
-                  >VIEW</router-link
35
-                >
36
-              </div>
37
-            </div>
38
-          </div>
39
-        </div>
40
-      </div>
41
-    </section> -->
42
     <section v-else id="intro" style="margin-bottom:-50px">
14
     <section v-else id="intro" style="margin-bottom:-50px">
43
       <div class="container">
15
       <div class="container">
44
         <div class="row d-flex justify-content-center">
16
         <div class="row d-flex justify-content-center">

+ 6
- 2
src/components/property/residential/singleView/contentSection.vue View File

32
           <div class="panel-left p-5" style="margin-top:130px">
32
           <div class="panel-left p-5" style="margin-top:130px">
33
             <h2>Property Detial</h2>
33
             <h2>Property Detial</h2>
34
             <!-- TODO: Make it dynamic -->
34
             <!-- TODO: Make it dynamic -->
35
-            <h4 style="color:white">{{ property.price | toCurrency }}</h4>
35
+
36
+            <h4 style="color:white" v-if="property.statusString === 'For Sale'">
37
+              {{ property.price | toCurrency }}
38
+            </h4>
39
+            <h4 style="color:white" v-else>{{ property.price | toCurrency }} Per Month</h4>
36
             <p>#{{ property.propertyRef }}</p>
40
             <p>#{{ property.propertyRef }}</p>
37
             <p v-if="property.showAddress">{{ property.addressOther }}</p>
41
             <p v-if="property.showAddress">{{ property.addressOther }}</p>
38
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
42
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
73
             </a>
77
             </a>
74
           </div>
78
           </div>
75
         </div>
79
         </div>
76
-        <div></div>
77
         <div class="col-md-8 p-5 resort-profile">
80
         <div class="col-md-8 p-5 resort-profile">
78
           <h2 v-if="property.showAddress">
81
           <h2 v-if="property.showAddress">
79
             <div style="display:inline" v-if="property.propertyName !== null">
82
             <div style="display:inline" v-if="property.propertyName !== null">
94
                 <h4>Property Features</h4>
97
                 <h4>Property Features</h4>
95
               </div>
98
               </div>
96
             </div>
99
             </div>
100
+
97
             <div class="row">
101
             <div class="row">
98
               <div class="col-md-8">
102
               <div class="col-md-8">
99
                 <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
103
                 <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">

+ 7
- 16
src/components/property/residential/singleView/singleResidentialPage.vue View File

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <carouselSection
4
-      v-if="propertyImages.length > 0"
5
-      :propertyImages="propertyImages"
6
-      @Loaded="CarouselDone"
7
-    />
3
+    <carouselSection :propertyImages="propertyImages" @Loaded="CarouselDone" />
8
     <main id="main" style="margin-top:-20px">
4
     <main id="main" style="margin-top:-20px">
9
-      <contentSection
10
-        v-if="propertyImages.length > 0"
11
-        :property="property"
12
-        :propertyImages="propertyImages"
13
-        @Loaded="ContentDone"
14
-      />
5
+      <contentSection :property="property" :propertyImages="propertyImages" @Loaded="ContentDone" />
15
     </main>
6
     </main>
16
     <div v-if="Wait" id="preloader"></div>
7
     <div v-if="Wait" id="preloader"></div>
17
   </div>
8
   </div>
30
   components: {
21
   components: {
31
     makeOffer,
22
     makeOffer,
32
     carouselSection,
23
     carouselSection,
33
-    contentSection,
24
+    contentSection
34
   },
25
   },
35
   data() {
26
   data() {
36
     return {
27
     return {
39
       boolLoaded: false,
30
       boolLoaded: false,
40
       wait: false,
31
       wait: false,
41
       carouselLoaded: false,
32
       carouselLoaded: false,
42
-      contentloaded: false,
33
+      contentloaded: false
43
     };
34
     };
44
   },
35
   },
45
   async mounted() {
36
   async mounted() {
65
         return true;
56
         return true;
66
       }
57
       }
67
       return false;
58
       return false;
68
-    },
59
+    }
69
   },
60
   },
70
   methods: {
61
   methods: {
71
     ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
62
     ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
86
     },
77
     },
87
     ContentDone() {
78
     ContentDone() {
88
       this.contentloaded = true;
79
       this.contentloaded = true;
89
-    },
80
+    }
90
   },
81
   },
91
   beforeDestroy() {
82
   beforeDestroy() {
92
     this.clearPropertyImages();
83
     this.clearPropertyImages();
93
-  },
84
+  }
94
 };
85
 };
95
 </script>
86
 </script>
96
 
87
 

Loading…
Cancel
Save