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">
        <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">Area</h4>
                    <span v-html="currentProperty.area"></span>
                  </li>
                  <li v-if="currentProperty.beds !== null">
                    <h4 class="card-info-title">Beds</h4>
                    <span>{{ currentProperty.beds }}</span>
                  </li>
                  <li v-if="currentProperty.baths !== null">
                    <h4 class="card-info-title">Baths</h4>
                    <span>{{ currentProperty.baths }}</span>
                  </li>
                  <li v-if="currentProperty.garages !== null">
                    <h4 class="card-info-title">Garages</h4>
                    <span>{{ currentProperty.garages }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <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>