UnivateProperties/src/components/property/propertyCardSearch.vue

<template>
  <section id="portfolio">
    <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">
                  <div class="pb-2">
                    <h3 style="color:white !important;display:inline">
                      {{ currentProperty.displayPrice }}
                    </h3>
                    <p
                      v-if="!currentProperty.isSale"
                      class="ml-1"
                      style="display:inline; color:white"
                    >
                      Per Month
                    </p>
                  </div>

                  <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 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">
                  <div class="pb-2">
                    <h3 style="color:white !important;display:inline">
                      {{ currentProperty.displayPrice }}
                    </h3>
                    <p
                      v-if="!currentProperty.isSale"
                      class="ml-1"
                      style="display:inline; color:white"
                    >
                      Per Month
                    </p>
                  </div>
                  <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>