Minor Changes (for sale/for rent)

src/components/property/commercial/singleView/carouselSection.vue

 import carousel from "vue-owl-carousel";
 export default {
   components: {
-    carousel,
+    carousel
   },
   data() {
     return {
-      images: [],
+      images: []
     };
   },
   props: {
-    propertyImages: {},
+    propertyImages: {}
   },
-  created() {
+  mounted() {
+    // setTimeout(() => {
+    //   this.wait = false;
+    // }, 2000);
     this.$emit("Loaded", true);
-  },
+  }
 };
 </script>
 

src/components/property/commercial/singleView/contentSection.vue

 <template>
-  <section>
+  <section :class="propertyImages.length > 0 ? 'noImages' : 'images'">
     <div class="container">
       <div class="row" id="resort-profile">
         <div class="col-md-4">
               allowfullscreen
               style="margin-bottom:-6px"
             ></iframe>
-            <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
-              <div v-if="i < 3">
-                <img
-                  v-if="i === 0"
-                  style="width:100%; height:201px;object-fit: cover"
-                  :src="image.image"
-                />
-                <div v-else-if="i !== 0">
+            <div v-if="propertyImages.length > 0">
+              <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
+                <div v-if="i < 3">
                   <img
-                    v-if="i % 2 === 0"
-                    style="width:50%; height:140px; float:right;"
+                    v-if="i === 0"
+                    style="width:100%; height:201px;object-fit: cover"
                     :src="image.image"
                   />
-                  <img v-else style="width:50%; height:140px; float:left" :src="image.image" />
+                  <div v-else-if="i !== 0">
+                    <img
+                      v-if="i % 2 === 0"
+                      style="width:50%; height:140px; float:right;"
+                      :src="image.image"
+                    />
+                    <img v-else style="width:50%; height:140px; float:left" :src="image.image" />
+                  </div>
                 </div>
               </div>
+              <gallery :images="Images" :index="index" @close="index = null"></gallery>
             </div>
-
-            <gallery :images="Images" :index="index" @close="index = null"></gallery>
           </div>
 
-          <div class="panel-left p-5" style="margin-top:140px;">
+          <div
+            class="panel-left p-5"
+            :class="propertyImages.length > 0 ? 'galleryImages' : 'noGalleryImages'"
+          >
             <h2>Property Detial</h2>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
             <p>{{ property.city }}, {{ property.suburb }}</p>
               </p>
             </div>-->
             <p>{{ property.shortDescription }}</p>
-            <p>{{ property.price | toCurrency }}</p>
+
+            <p v-if="property.statusString === 'For Sale'">{{ property.price | toCurrency }}</p>
+            <p v-else>{{ property.price | toCurrency }} Per Month</p>
           </div>
           <div class="panel-left px-5 pb-5 text-center">
             <h4 class="text-white">Share this Property</h4>
             style="margin-bottom:-6px"
             class="mt-3"
           ></iframe>
-          <!-- <div>
-            <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th scope="col">Reference</th>
-                  <th scope="col">Unit</th>
-                  <th scope="col">Location</th>
-                  <th scope="col">Kitchen</th>
-                  <th scope="col">Extras</th>
-                  <th scope="col"></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>#{{ property.id }}</td>
-                  <td>#{{ property.unit }}</td>
-                  <td>Second Floor</td>
-                  <td>yes</td>
-                  <td v-if="property.displayData && property.displayData.length > 0">
-                    <div class="row" v-for="(feat, i) in property.displayData[0].values" :key="i">
-                      <div class="col" v-if="feat.value.toUpperCase() !== 'NO'">
-                        <div></div>
-                        {{ feat.name }} ({{ feat.value }})
-                      </div>
-                    </div>
-                  </td>
-                  <td>
-                    
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>-->
-
-          <!-- <div class="d-flex mt-3">
-            <iframe
-              width="100%"
-              height="200"
-              id="gmap_canvas"
-              src=""
-              frameborder="0"
-              scrolling="no"
-              marginheight="0"
-              marginwidth="0"
-            ></iframe>
-          </div>-->
         </div>
       </div>
     </div>
     property: {},
     propertyImages: {}
   },
-  mounted() {
-    console.log(this.property);
-  },
   data() {
     return {
       index: null,
   computed: {
     Images() {
       const list = [];
-      for (let i = 0; i < this.propertyImages.length; i++) {
-        list.push(this.propertyImages[i].image);
+      if (this.propertyImages) {
+        for (let i = 0; i < this.propertyImages.length; i++) {
+          list.push(this.propertyImages[i].image);
+        }
       }
       return list;
     }
   },
-  created() {
+  created() {},
+  mounted() {
     this.$emit("Loaded", true);
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.images {
+  padding-top: 100px;
+}
+
+.noImages {
+  padding-top: 0px;
+}
+
+.galleryImages {
+  margin-top: 140px;
+}
+
+.noGalleryImages {
+  margin-top: 0px;
+}
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 575px) {
   .resPortfolioSection {

src/components/property/commercial/singleView/singleCommercialPage.vue

 <template>
   <div>
-    <carouselSection
-      v-if="propertyImages.length > 0"
-      :propertyImages="propertyImages"
-      @Loaded="CarouselDone"
-    />
+    <carouselSection :propertyImages="propertyImages" @Loaded="carouselLoaded = true" />
     <main id="main" style="margin-top:-20px">
       <contentSection
-        v-if="propertyImages.length > 0"
         :property="property"
         :propertyImages="propertyImages"
-        @Loaded="ContentDone"
+        @Loaded="contentloaded = true"
       />
     </main>
     <div v-if="Wait" id="preloader"></div>
 <script>
 /* eslint-disable */
 
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import makeOffer from "../../../processFlow/makeOffer";
 import carouselSection from "./carouselSection";
 import contentSection from "./contentSection";
   components: {
     makeOffer,
     carouselSection,
-    contentSection,
+    contentSection
   },
   data() {
     return {
       index: null,
       date: new Date(),
-      wait: false,
+      wait: true,
       carouselLoaded: false,
       contentloaded: false,
+      dataProp: {},
+      dataImages: {}
     };
   },
   mounted() {
-    this.wait = true;
-    this.carouselLoaded = false;
-    this.contentloaded = false;
     this.clearPropertyImages();
-    this.getDisplayProperty(this.$route.params.id);
+    this.getDisplayProperty(this.$route.params.id).then(data => {
+      this.getSavedPropertyImages(data.id).then(() => {
+        this.wait = false;
+      });
+    });
     // await this.getPropertyImages(this.$route.params.id);
     // this.mayEditProperty(this.$route.params.id);
   },
         return true;
       }
       return false;
-    },
+    }
   },
   methods: {
-    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
+    ...mapActions("property", [
+      "getDisplayProperty",
+      "clearPropertyImages",
+      "getSavedPropertyImages"
+    ]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
     },
     ContentDone() {
       this.contentloaded = true;
-    },
+    }
   },
   beforeDestroy() {
     this.clearPropertyImages();
-  },
+  }
 };
 </script>
 

src/components/property/propertyCardSearch.vue

                 </p>
                 <p
                   v-if="currentProperty.displayText != ''"
-                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
+                  :class="[
+                    currentProperty.displayColor === 'green'
+                      ? 'greenText'
+                      : currentProperty.displayColor === 'orange'
+                      ? 'pendingOffer'
+                      : currentProperty.displayColor === 'red'
+                      ? 'redText'
+                      : 'normalText'
+                  ]"
                 >
                   <strong>{{ currentProperty.displayText }}</strong>
                 </p>
                   <strong>Property Reference</strong>
                   {{ currentProperty.propertyReference }}
                 </p>
+                <p
+                  v-if="currentProperty.displayText != ''"
+                  :class="[
+                    currentProperty.displayColor === 'green'
+                      ? 'greenText'
+                      : currentProperty.displayColor === 'orange'
+                      ? 'pendingOffer'
+                      : currentProperty.displayColor === 'red'
+                      ? 'redText'
+                      : 'normalText'
+                  ]"
+                >
+                  <strong>{{ currentProperty.displayText }}</strong>
+                </p>
               </div>
             </router-link>
           </div>
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
-    salesType: { type: String, default: "Rent" },
+    salesType: { type: String, default: "Rent" }
   },
   methods: {
     sortHighPrice() {
       }
 
       return this.properties.sort(compare);
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/property/residential/residentialSearchResults.vue

       :properties="properties"
       :showSort="false"
     />
-    <!-- <section v-if="properties.length > 0">
-      <div class="container">
-        <div class="row justify-content-md-center">
-          <div
-            class="col-lg-3 col-md-6 col-sm-6"
-            v-for="currentProperty in properties"
-            :key="currentProperty.id"
-          >
-            <div>
-              <div class="portfolio-item">
-                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
-
-                <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
-                <p>{{ currentProperty.shortDescription }}</p>
-                <br />
-
-                <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a>
-                <router-link
-                  class="btn-white-border"
-                  :to="`/property/residential/property/${currentProperty.id}`"
-                  >VIEW</router-link
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section> -->
     <section v-else id="intro" style="margin-bottom:-50px">
       <div class="container">
         <div class="row d-flex justify-content-center">

src/components/property/residential/singleView/contentSection.vue

           <div class="panel-left p-5" style="margin-top:130px">
             <h2>Property Detial</h2>
             <!-- TODO: Make it dynamic -->
-            <h4 style="color:white">{{ property.price | toCurrency }}</h4>
+
+            <h4 style="color:white" v-if="property.statusString === 'For Sale'">
+              {{ property.price | toCurrency }}
+            </h4>
+            <h4 style="color:white" v-else>{{ property.price | toCurrency }} Per Month</h4>
             <p>#{{ property.propertyRef }}</p>
             <p v-if="property.showAddress">{{ property.addressOther }}</p>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
             </a>
           </div>
         </div>
-        <div></div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
             <div style="display:inline" v-if="property.propertyName !== null">
                 <h4>Property Features</h4>
               </div>
             </div>
+
             <div class="row">
               <div class="col-md-8">
                 <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">

src/components/property/residential/singleView/singleResidentialPage.vue

 <template>
   <div>
-    <carouselSection
-      v-if="propertyImages.length > 0"
-      :propertyImages="propertyImages"
-      @Loaded="CarouselDone"
-    />
+    <carouselSection :propertyImages="propertyImages" @Loaded="CarouselDone" />
     <main id="main" style="margin-top:-20px">
-      <contentSection
-        v-if="propertyImages.length > 0"
-        :property="property"
-        :propertyImages="propertyImages"
-        @Loaded="ContentDone"
-      />
+      <contentSection :property="property" :propertyImages="propertyImages" @Loaded="ContentDone" />
     </main>
     <div v-if="Wait" id="preloader"></div>
   </div>
   components: {
     makeOffer,
     carouselSection,
-    contentSection,
+    contentSection
   },
   data() {
     return {
       boolLoaded: false,
       wait: false,
       carouselLoaded: false,
-      contentloaded: false,
+      contentloaded: false
     };
   },
   async mounted() {
         return true;
       }
       return false;
-    },
+    }
   },
   methods: {
     ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
     },
     ContentDone() {
       this.contentloaded = true;
-    },
+    }
   },
   beforeDestroy() {
     this.clearPropertyImages();
-  },
+  }
 };
 </script>