UnivateProperties/src/components/property/propertyCard.vue

<template>
  <section id="portfolio" class="wow fadeInUp">
    <div class="container-fluid">
      <div class="row">
        <div
          class="col-lg-3 col-md-6 col-sm-6 my-3"
          v-for="currentProperty in properties"
          :key="currentProperty.id"
        >
          <div v-if="currentProperty.propertyUsageType === 'Residential'">
            <router-link :to="`/property/residential/property/${currentProperty.id}`">
              <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                <div class="feature-top pt-3 mb-2">
                  <h3>{{ currentProperty.displayPrice }}</h3>
                  <div>
                    <img
                      style="height:165px; object-fit: cover;"
                      :src="currentProperty.displayImage"
                      alt
                    />
                  </div>
                </div>
                <h1>{{ currentProperty.suburb }}</h1>
                <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>
          <div v-else-if="currentProperty.propertyUsageType === 'Commercial'">
            <router-link :to="`/property/commercial/property/${currentProperty.id}`">
              <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                <div class="feature-top pt-3 mb-2">
                  <h3>{{ currentProperty.displayPrice }}</h3>
                  <img
                    style="height:165px; object-fit: cover;"
                    :src="currentProperty.displayImage"
                    alt
                  />
                </div>
                <h1>{{ currentProperty.suburb }}</h1>
                <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>
        </div>
      </div>
    </div>
  </section>
  <!-- #listings -->
</template>

<script>
/* eslint-disable */

export default {
  props: {
    properties: { type: Array, default: () => [] },
    showSort: { type: Boolean, default: true },
    salesType: { type: String, default: "Rent" },
  },
  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);
    },
    sortDateAvailable() {
      function compare(a, b) {
        if (a.dateAvailable > b.dateAvailable) return 1;
        if (a.dateAvailable < b.dateAvailable) return -1;
        return 0;
      }

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

<style lang="scss" scoped></style>