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"
                  data-toggle="modal"
                  data-target="#myModal"
                >Make an Offer</button>
                <div id="myModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">
                    <!-- Modal content-->
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div padding-left="20px">
                        <makeOffer
                          name="MakeOffer"
                          :isMakeOffer="true"
                          :isProperty="false"
                          :item="item"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </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';
import makeOffer from '../../processFlow/makeOffer.vue';

export default {
  props: {
    resortCode: undefined,
  },
  components: {
    makeOffer,
  },
  computed: {
    ...mapState('weekList', ['weeks']),
    ...mapGetters({
      filteredWeeks: 'weekList/filteredWeeks',
    }),
  },
  mounted() {
    if (this.resortCode) {
      this.applyResortFilter(this.resortCode);
    }
    this.getWeeks();
  },
  methods: {
    ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
  },
};
</script>
<style>
</style>