UnivateProperties/src/components/timeshare/buy/weekListComponent.vue

<template>
  <div>
    <div v-if="filteredWeeks.length > 0">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Province</th>
            <th>Resort</th>
            <th>Unit</th>
            <th>Week</th>
            <th>Arrival</th>
            <th>Departure</th>
            <th>Bedrooms</th>
            <th style="width:15%">Price</th>
            <!-- <th>Status</th> -->
            <th>Interested</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in filteredWeeks" :key="i">
            <td>{{item.region ? item.region.regionName : ''}}</td>
            <td>{{item.resort ? item.resort.resortName : ''}}</td>
            <td>{{item.unitNumber}}</td>
            <td>{{item.weekNumber}}</td>
            <td>{{item.arrivalDate | toDate}}</td>
            <td>{{item.departureDate | toDate}}</td>
            <td>{{item.bedrooms}}</td>
            <td>{{item.sellPrice | toCurrency}}</td>
            <!-- <td>{{item.status ? item.status.description : ''}}</td> -->
            <td>
              <div class="col-md-12">
                <button type="button" class="btn btn-b-n" @click="View(item)">View</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else>
      <div class="row">
        <div class="col-md-12">
          <hr />No Results Found
          <hr />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  props: {
    resortCode: undefined,
  },
  components: {},
  computed: {
    ...mapState('weekList', ['weeks']),
    ...mapGetters({
      filteredWeeks: 'weekList/filteredWeeks',
    }),
  },
  mounted() {
    if (this.resortCode) {
      this.applyResortFilter(this.resortCode);
    }
    this.getWeeks();
  },
  methods: {
    View(item) {
      console.log(item);
      this.$router.push(`/resort/${item.resort.resortCode}/${item.id}`);
    },
    ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
  },
};
</script>
<style>
</style>