Changes to add Latest 3 proeprties

src/components/home/propertySection.vue

@@ -8,225 +8,34 @@
               <div class="title-box">
                 <h2 class="title-a">Latest Properties</h2>
               </div>
-              <div class="title-link">
-                <router-link to="/timeshare/buy">
-                  All Properties
-                  <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
-                </router-link>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div id="property-carousel" class="owl-carousel owl-theme">
-          <div class="carousel-item-b">
-            <div class="card-box-a card-shadow">
-              <div class="img-box-a">
-                <img src="img/property-6.jpg" alt class="img-a img-fluid" />
-              </div>
-              <div class="card-overlay">
-                <div class="card-overlay-a-content">
-                  <div class="card-header-a">
-                    <h2 class="card-title-a">
-                      <a href="property-single.html">
-                        206 Mount
-                        <br />Olive Road Two
-                      </a>
-                    </h2>
-                  </div>
-                  <div class="card-body-a">
-                    <div class="price-box d-flex">
-                      <span class="price-a">rent | $ 12.000</span>
-                    </div>
-                    <a href="#" class="link-a">
-                      Click here to view
-                      <span class="ion-ios-arrow-forward"></span>
-                    </a>
-                  </div>
-                  <div class="card-footer-a">
-                    <ul class="card-info d-flex justify-content-around">
-                      <li>
-                        <h4 class="card-info-title">Area</h4>
-                        <span>
-                          340m
-                          <sup>2</sup>
-                        </span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Beds</h4>
-                        <span>2</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Baths</h4>
-                        <span>4</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Garages</h4>
-                        <span>1</span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="carousel-item-b">
-            <div class="card-box-a card-shadow">
-              <div class="img-box-a">
-                <img src="img/property-3.jpg" alt class="img-a img-fluid" />
-              </div>
-              <div class="card-overlay">
-                <div class="card-overlay-a-content">
-                  <div class="card-header-a">
-                    <h2 class="card-title-a">
-                      <a href="property-single.html">
-                        157 West
-                        <br />Central Park
-                      </a>
-                    </h2>
-                  </div>
-                  <div class="card-body-a">
-                    <div class="price-box d-flex">
-                      <span class="price-a">rent | $ 12.000</span>
-                    </div>
-                    <a href="property-single.html" class="link-a">
-                      Click here to view
-                      <span class="ion-ios-arrow-forward"></span>
-                    </a>
-                  </div>
-                  <div class="card-footer-a">
-                    <ul class="card-info d-flex justify-content-around">
-                      <li>
-                        <h4 class="card-info-title">Area</h4>
-                        <span>
-                          340m
-                          <sup>2</sup>
-                        </span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Beds</h4>
-                        <span>2</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Baths</h4>
-                        <span>4</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Garages</h4>
-                        <span>1</span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="carousel-item-b">
-            <div class="card-box-a card-shadow">
-              <div class="img-box-a">
-                <img src="img/property-7.jpg" alt class="img-a img-fluid" />
-              </div>
-              <div class="card-overlay">
-                <div class="card-overlay-a-content">
-                  <div class="card-header-a">
-                    <h2 class="card-title-a">
-                      <a href="property-single.html">
-                        245 Azabu
-                        <br />Nishi Park let
-                      </a>
-                    </h2>
-                  </div>
-                  <div class="card-body-a">
-                    <div class="price-box d-flex">
-                      <span class="price-a">rent | $ 12.000</span>
-                    </div>
-                    <a href="property-single.html" class="link-a">
-                      Click here to view
-                      <span class="ion-ios-arrow-forward"></span>
-                    </a>
-                  </div>
-                  <div class="card-footer-a">
-                    <ul class="card-info d-flex justify-content-around">
-                      <li>
-                        <h4 class="card-info-title">Area</h4>
-                        <span>
-                          340m
-                          <sup>2</sup>
-                        </span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Beds</h4>
-                        <span>2</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Baths</h4>
-                        <span>4</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Garages</h4>
-                        <span>1</span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="carousel-item-b">
-            <div class="card-box-a card-shadow">
-              <div class="img-box-a">
-                <img src="img/property-10.jpg" alt class="img-a img-fluid" />
-              </div>
-              <div class="card-overlay">
-                <div class="card-overlay-a-content">
-                  <div class="card-header-a">
-                    <h2 class="card-title-a">
-                      <a href="property-single.html">
-                        204 Montal
-                        <br />South Bela Two
-                      </a>
-                    </h2>
-                  </div>
-                  <div class="card-body-a">
-                    <div class="price-box d-flex">
-                      <span class="price-a">rent | $ 12.000</span>
-                    </div>
-                    <a href="property-single.html" class="link-a">
-                      Click here to view
-                      <span class="ion-ios-arrow-forward"></span>
-                    </a>
-                  </div>
-                  <div class="card-footer-a">
-                    <ul class="card-info d-flex justify-content-around">
-                      <li>
-                        <h4 class="card-info-title">Area</h4>
-                        <span>
-                          340m
-                          <sup>2</sup>
-                        </span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Beds</h4>
-                        <span>2</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Baths</h4>
-                        <span>4</span>
-                      </li>
-                      <li>
-                        <h4 class="card-info-title">Garages</h4>
-                        <span>1</span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
+        <propertyCard
+          v-if="latestProperties.length > 0"
+          name="propertyholder"
+          :properties="latestProperties"
+        />
       </div>
     </section>
   </div>
 </template>
 <script>
-export default {};
+import { mapState, mapActions } from 'vuex';
+import propertyCard from '../property/propertyCard.vue';
+
+export default {
+  components: {
+    propertyCard,
+  },
+  computed: {
+    ...mapState('property', ['latestProperties']),
+  },
+  methods: {
+    ...mapActions('property', ['searchLatestProperties']),
+  },
+  mounted() {
+    this.searchLatestProperties();
+  },
+};
 </script>

src/components/property/propertyCard.vue

@@ -76,7 +76,7 @@
 <script>
 export default {
   props: {
-    properties: Object,
+    properties: { type: Array, default: () => [] },
   },
 };
 </script>

src/store/modules/property/property.js

@@ -28,6 +28,7 @@ export default {
     propertyOverviewFields: [],
     propertyFields: [],
     properties: [],
+    latestProperties: [],
   },
   mutations: {
     setProperty(state, property) {
@@ -57,6 +58,9 @@ export default {
     updateSearch(state, propertySearch) {
       state.properties = propertySearch;
     },
+    setLatestProperties(state, properties) {
+      state.latestProperties = properties;
+    },
   },
   getters: {},
   actions: {
@@ -117,9 +121,15 @@ export default {
     },
     searchPropertiesKeyword({ commit }, item) {
       axios
-        .get(`http://localhost:57260/Property/Property/Search/Keyword/${item.keyword}`)
+        .get(`http://localhost:57260/Property/Property/Search/${item.keyword}`)
         .then(response => commit('updateSearch', response.data))
         .catch(console.error);
     },
+    searchLatestProperties({ commit }) {
+      axios
+        .get('http://localhost:57260/property/property/latestProperties')
+        .then(response => commit('setLatestProperties', response.data))
+        .catch(console.error);
+    },
   },
 };