UnivateProperties/src/components/timeshare/myWeeksPage.vue

<template>
  <!-- eslint-disable max-len -->
  <main id="main" style="margin-top: -30px; padding-bottom: 50px;">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header" style="">
            <h2>My Timeshare Weeks</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-auto">
          <table
            class="table table-striped table-responsive"
            style="max-width: 1920px;"
          >
            <thead>
              <tr>
                <th scope="col" v-for="(col, c) in displayColumns" :key="c">
                  <div @click="sortBy(columns[c])" style="cursor: pointer;">
                    <div class="d-flex bd-highlight">
                      <div class="w-100 bd-highlight">{{ col }}</div>
                      <div class="flex-shrink-1 bd-highlight">
                        <img
                          src="../../../public/img/sort-up.png"
                          height="8px;"
                          v-if="sortKey === columns[c] && reverse"
                        />
                        <img
                          src="../../../public/img/sort-down.png"
                          height="8px;"
                          v-if="sortKey === columns[c] && !reverse"
                        />
                      </div>
                    </div>
                  </div>
                </th>
                <!-- <th scope="col">Property</th>
                <th scope="col">Unit</th>
                <th scope="col">Size</th>
                <th scope="col">Price Ex VAT</th>
                <th scope="col">Region</th>
                <th scope="col">Town</th>
                <th scope="col">Suburb</th>
                <th scope="col">Status</th>
                <th scope="col">Type</th>-->
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(item, i) in DisplayItems" :key="i">
                <td>#{{ item.id }}</td>
                <td>{{ item.owner }}</td>
                <td>{{ item.agent }}</td>
                <td>{{ item.resort.resortName }}</td>
                <td>{{ item.module }}</td>
                <td>{{ item.unitNumber }}</td>
                <td>{{ item.bedrooms }}</td>
                <td>{{ item.season }}</td>
                <td>{{ item.region.regionName }}</td>
                <td>{{ item.sellPrice | toCurrency }}</td>
                <td>{{ item.pulbishedDate | toDate }}</td>
                <td>{{ item.status.description }}</td>
                <td>{{ item.consent }}</td>
                <!-- <td v-if="!item.publish">
                  <a v-on:click="Publish(item)">
                    <img src="../../../public/img/icons/Upload.png" height="25" width="25" />
                  </a>
                </td>
                <td v-else>
                  <a v-on:click="Unpublish(item)">
                    <img src="../../../public/img/icons/Download-grey.png" height="25" width="25" />
                  </a>
                </td> -->
                <td>
                  <a v-on:click="Edit(item)">
                    <img
                      src="../../../public/img/icons/Edit.png"
                      height="25"
                      width="25"
                    />
                  </a>
                </td>
                <td>
                  <a v-on:click="Delete(item)">
                    <img
                      src="../../../public/img/icons/delete.png"
                      height="25"
                      width="25"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="d-flex justify-content-between" v-if="showPager">
            <div class="p-1">
              {{
                currentPage +
                ' / ' +
                PageCount +
                (' - (' + FilteredListings.length + ' items)')
              }}
            </div>
            <div class="p-1">
              <BasePagination
                :currentPage="currentPage"
                :pageCount="PageCount"
                @nextPage="pageChangeHandle('next')"
                @previousPage="pageChangeHandle('previous')"
                @loadPage="pageChangeHandle"
              />
            </div>
            <div class="p-2">
              <div class="d-flex flex-row">
                <div>
                  <select
                    class="form-control uniSelect"
                    v-model="visibleItemsPerPageCount"
                    @change="onChangeItemsPerPage()"
                  >
                    <option v-for="(item, i) in itemsPerPageList" :key="i">
                      {{ item }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="p-2">
            <div class="d-flex flex-row">
              <div>
                <button
                  v-if="sortKey !== 'id'"
                  class="btn-solid-blue"
                  @click="ClearSort"
                >
                  Clear Sort
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="wait" id="preloader"></div>
    </div>

    <!-- <div class="row">
      <div class="offset-1 col-md-3">
        {{ items[selectedItems] }}
        <button
          type="button"
          :class="{
            'form-control btn-solid-blue ': 1 === 1,
            'my-disable':
              !(selectedItems.length == 1) ||
              !items[selectedItems] ||
              items[selectedItems].status.code !== 'A2'
          }"
          value="Publish Week"
          :disabled="!(items.length == 1)"
        >
          Publish selected week
        </button>
      </div>
      <div class="offset-1 col-md-10">
        <ListView
          :items="items"
          @onNew="onNew"
          @onRowClick="onRowClick"
          @onClearSelected="onClearSelected"
        />
      </div>
    </div> -->
  </main>
</template>
<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from 'vuex'
import Log from '../../assets/Log'
import ListView from '../shared/listView.vue'
import BasePagination from '../shared/basePagination'
import ItemsPerPageList from '../../assets/staticData/itemsPerPageFive'
import _ from 'lodash'

export default {
  components: {
    ListView,
    BasePagination,
  },
  data() {
    return {
      filter: undefined,
      wait: true,
      showPager: true,
      visibleItemsPerPageCount: 10,
      itemsPerPageList: ItemsPerPageList,
      reverse: true,
      currentPage: 1,
      sortKey: 'id',
      displayColumns: [
        'Ref',
        'Owner',
        'Agent',
        'Resort',
        'Week Module',
        'Unit',
        'Beds',
        'Season',
        'Region',
        'Amount',
        'Submitted',
        'Status',
        'Consent',
      ],
      columns: [
        'id',
        'owner',
        'agent',
        'resort',
        'module',
        'unitNumber',
        'bedrooms',
        'season',
        'region',
        'sellPrice',
        'weekStatus',
        'consent',
      ],
    }
  },
  created() {
    this.getItems(Log.getUser().id).then(() => {
      this.wait = false
    })
  },
  mounted() {},
  computed: {
    ...mapGetters({ getNeedsVerify: 'myWeeks/getNeedsVerify' }),
    ...mapState('myWeeks', ['items']),
    FilteredListings() {
      if (this.filter) {
        const list = _.filter(this.getNeedsVerify, (item) =>
          Object.values(item).some(
            (i) =>
              JSON.stringify(i)
                .toLowerCase()
                .indexOf(this.filter.toLowerCase()) > -1,
          ),
        )
        return _.orderBy(list, this.sortKey, this.SortDirection)
      } else {
        return _.orderBy(this.getNeedsVerify, this.sortKey, this.SortDirection)
      }
    },
    PageCount() {
      return this.visibleItemsPerPageCount !== 0
        ? Math.ceil(this.items.length / this.visibleItemsPerPageCount)
        : 1
    },
    DisplayItems() {
      const list = this.FilteredListings
      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)
    },
    SortDirection() {
      return this.reverse ? 'desc' : 'asc'
    },
  },
  methods: {
    ...mapActions('myWeeks', ['getItems']),
    onEdit(item) {
      this.$router.push(`/timeshare/${item.id}`)
    },
    onNew() {
      this.$router.push('/timeshare/sell')
    },
    onRowClick(items) {
      this.selectedItems = items
    },
    onClearSelected() {
      this.selectedItems = []
    },
    Edit(item) {
      this.$router.push({ name: 'EditTimeshare', params: { weekParam: item } })
      // this.$router.push(`/editTimeShare/${item.id}`);
    },
    Delete(item) {
      this.deleteListing(item.id)
    },
    async pageChangeHandle(value) {
      switch (value) {
        case 'next':
          this.currentPage += 1
          break
        case 'previous':
          this.currentPage -= 1
          break
        default:
          this.currentPage = value
      }
    },
    sortBy(sortKey) {
      this.reverse = this.sortKey === sortKey ? !this.reverse : false
      this.sortKey = sortKey
    },
    ClearSort() {
      this.reverse = true
      this.sortKey = 'id'
    },
  },
}
</script>
<style scoped>
.my-disable {
  background-color: silver;
  border-color: silver;
}
.my-disable:hover {
  background-color: lightgray;
  border-color: lightgray;
}
</style>