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

<template>
  <div>
    <div v-if="filteredWeeks.length > 0">
      <table class="table table-striped table-responsive text-nowrap">
        <thead>
          <tr>
            <th scope="col">Ref</th>
            <th scope="col">Unit</th>
            <th scope="col">Module</th>
            <th scope="col">Arrival</th>
            <th scope="col">Departure</th>
            <th scope="col">Bedrooms</th>
            <th scope="col">Season</th>
            <th scope="col">Type</th>
            <th scope="col">Price Incl VAT</th>
            <th scope="col">Status</th>
            <th scope="col">Interested?</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in DisplayItems" :key="i">
            <td>#{{ item.id }}</td>
            <td>{{ item.unitNumber }}</td>
            <td>{{ item.module }}</td>
            <td
              v-if="
                item.arrivalDate === '0001-01-01T00:00:00' ||
                  item.arrivalDate === '1753-01-01T00:00:00'
              "
            ></td>
            <td v-else>{{ item.arrivalDate | toDate }}</td>
            <td
              v-if="
                item.departureDate === '0001-01-01T00:00:00' ||
                  item.departureDate === '1753-01-01T00:00:00'
              "
            ></td>
            <td v-else>{{ item.departureDate | toDate }}</td>
            <td>{{ item.bedrooms }}</td>
            <td>{{ item.season }}</td>
            <td>{{ item.weekType }}</td>
            <td>{{ item.sellPrice | toCurrency }}</td>
            <td v-if="item.status">{{ item.status.description }}</td>
            <!-- <td>{{ item.region ? item.region.regionName : "" }}</td>
            <td>{{ item.resort ? item.resort.resortName : "" }}</td>

            <td>{{ item.arrivalDate | toDate }}</td>
            <td>{{ item.departureDate | toDate }}</td>-->

            <!-- <td>{{item.status ? item.status.description : ''}}</td> -->

            <td>
              <button
                :disabled="checkStatus(item)"
                v-on:click="View(item)"
                :class="checkStatus(item) ? 'btn-disabled' : 'btn-solid-blue'"
                style="color: white"
              >
                Yes
              </button>
            </td>
            <!-- <div class="col-md-12">
                <button type="button" class="btn btn-b-n" >View</button>
            </div>-->
          </tr>
        </tbody>
      </table>
      <div class="row">
        <div class="col-md-2">
          Items Per Page:
          <select
            class="form-control"
            v-model="visibleItemsPerPageCount"
            @change="onChangeItemsPerPage()"
          >
            <option v-for="(item, i) in visibleItemSelector" :key="i">
              {{ item }}
            </option>
          </select>
        </div>
        <div class="col-md-10 mt-4">
          <div style="float: right">
            <BasePagination
              :currentPage="currentPage"
              :pageCount="PageCount"
              @nextPage="pageChangeHandle('next')"
              @previousPage="pageChangeHandle('previous')"
              @loadPage="pageChangeHandle"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="row">
        <hr />
        <div class="col-md-12" v-if="status !== '' && status !== undefined">
          <b>{{ status }}</b>
        </div>
        <div class="col-md-12" v-if="status !== '' && status !== undefined">
          <img
            class="img-fluid"
            src="/img/kloader.gif"
            alt="UVProp logo"
            style="width: 128px; height: 128px"
          />
        </div>
        <div v-else>No Results Found</div>
        <hr />
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import BasePagination from "../../shared/basePagination";
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  props: {
    resortCode: undefined,
    userId: undefined,
    currentPage: {
      default: 1
    }
  },
  data() {
    return {
      visibleItemsPerPageCount: 8,
      visibleItemSelector: [5, 8, 10, 20, 50, 100]
    };
  },
  components: {
    BasePagination
  },
  computed: {
    ...mapState("weekList", ["weeks", "status"]),
    ...mapGetters({
      filteredWeeks: "weekList/filteredWeeks",
      getRegions: "weekList/getRegions"
    }),
    DisplayItems() {
      const list = [];
      this.filteredWeeks.forEach(week => {
        if (week.publish) {
          list.push(week);
        }
      });

      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
      if (endSlice > list.length) {
        endSlice = list.length;
      }
      return list.slice(startSlice, endSlice);
    },
    PageCount() {
      var list = [];
      this.filteredWeeks.forEach(week => {
        if (!week.isTender) {
          list.push(week);
        }
      });
      return this.visibleItemsPerPageCount !== 0
        ? Math.ceil(list.length / this.visibleItemsPerPageCount)
        : 1;
    }
  },
  mounted() {
    //if (this.resortCode) {
    //  this.applyResortFilter(this.resortCode);
    //}
    this.getByResortCode(this.$route.params.resortCode);
    //this.getWeeks();
  },
  methods: {
    ...mapActions("weekList", ["getWeeks", "applyResortFilter", "getByResortCode"]),
    View(item) {
      this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`);
    },
    onChangeItemsPerPage() {
      if (this.currentPage !== 1) {
        this.currentPage = 1;
      }
    },
    async pageChangeHandle(value) {
      switch (value) {
        case "next":
          this.currentPage += 1;
          break;
        case "previous":
          this.currentPage -= 1;
          break;
        default:
          this.currentPage = value;
      }
    },
    checkStatus(item) {
      if (item.status.code === "CIP" || item.status.code === "S" || item.status.code === "P") {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-disabled {
  font-family: "Muli";
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 32px;
  border-radius: 2px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: grey;
  border-color: black;
  color: black;
  cursor: not-allowed;
}
.btn-disabled :hover {
  background: grey;
  border-color: black;
  color: black;
  cursor: not-allowed;
}
</style>