UnivateProperties/src/components/property/propertyCard.vue

<template>
  <div>
    <div class="form-group row" v-if="showSort">
      <button
        type="button"
        class="btn btn-link font-weight-bold color-b"
        style="width: 150px; height:40px;"
        @click="sortNewest()"
      >Newest</button>
      <button
        type="button"
        class="btn btn-link font-weight-bold color-b"
        style="width: 150px; height:40px;"
        @click="sortLowPrice()"
      >Lowest Price</button>
      <button
        type="button"
        class="btn btn-link font-weight-bold color-b"
        style="width: 150px; height:40px;"
        @click="sortHighPrice()"
      >Highest Price</button>
      <hr />
    </div>
    <div class="form-group row">
      <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
        <router-link :to="`/property/property/${currentProperty.id}`">
          <div class="card-box-a card-shadow">
            <div class="img-box-a">
              <img
                :src="currentProperty.displayImage"
                alt
                class="img-a img-fluid"
                style="height:466px; width:350px; object-fit: cover;"
              />
            </div>
            <div class="card-overlay">
              <div class="card-overlay-a-content">
                <div class="card-header-a">
                  <h4 class="card-title-a">
                    <router-link
                      :to="`/property/property/${currentProperty.id}`"
                      class="link-a"
                    >{{ currentProperty.shortDescription }}</router-link>
                  </h4>
                  <h4 class="card-title-c">
                    <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
                      {{ currentProperty.province }}
                      <br />
                      {{ currentProperty.city }}
                      <br />
                      {{ currentProperty.suburb }}
                    </router-link>
                  </h4>
                </div>
                <div class="card-body-a">
                  <div class="price-box d-flex">
                    <span
                      v-if="currentProperty.isSale"
                      class="price-a"
                    >sale | {{ currentProperty.displayPrice }}</span>
                    <span
                      v-if="!currentProperty.isSale"
                      class="price-a"
                    >rent | {{ currentProperty.displayPrice }}</span>
                  </div>
                  <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
                    Click here to view
                    <span class="ion-ios-arrow-forward"></span>
                  </router-link>
                </div>
                <div class="card-footer-a" v-if="currentProperty.showFooter">
                  <ul class="card-info d-flex justify-content-around">
                    <li v-if="currentProperty.area !== null">
                      <h4 class="card-info-title">
                        <img src="../../../public/img/icons/area.png" height="16px" width="16px" />
                        <!-- <i class="fa fa-ruler-combined"></i> -->
                      </h4>
                      <span v-html="currentProperty.area"></span>
                    </li>
                    <li v-if="currentProperty.beds !== null">
                      <h4 class="card-info-title">
                        <i class="fa fa-bed"></i>
                      </h4>
                      <span>{{ currentProperty.beds }}</span>
                    </li>
                    <li v-if="currentProperty.baths !== null">
                      <h4 class="card-info-title">
                        <i class="fa fa-bath"></i>
                      </h4>
                      <span>{{ currentProperty.baths }}</span>
                    </li>
                    <li v-if="currentProperty.garages !== null">
                      <h4 class="card-info-title">
                        <!-- <i class="fa fa-warehouse"></i> -->
                        <img src="../../../public/img/icons/garage.png" height="16px" width="16px" />
                      </h4>
                      <span>{{ currentProperty.garages }}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </router-link>
        <br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    properties: { type: Array, default: () => [] },
    showSort: { type: Boolean, default: true },
  },
  methods: {
    sortHighPrice() {
      function compare(a, b) {
        if (a.price < b.price) return 1;
        if (a.price > b.price) return -1;
        return 0;
      }

      return this.properties.sort(compare);
    },
    sortLowPrice() {
      function compare(a, b) {
        if (a.price < b.price) return -1;
        if (a.price > b.price) return 1;
        return 0;
      }

      return this.properties.sort(compare);
    },
    sortNewest() {
      function compare(a, b) {
        if (a.dateCreated < b.dateCreated) return 1;
        if (a.dateCreated > b.dateCreated) return -1;
        return 0;
      }

      return this.properties.sort(compare);
    },
  },
};
</script>