UnivateProperties/src/components/timeshare/searchTimeshare.vue

<template>
  <div class="container">
    <form
      id="mainForm"
      method="POST"
      action="/filter"
      accept-charset="UTF-8"
      enctype="multipart/form-data"
    >
      <div class="form-group text-left" v-if="!hideTop">
        <label>Province</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>P</b>
            </span>
          </div>
          <select class="form-control" name="region" id="region" v-model="filter.region">
            <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
          </select>
          <div class="input-group-append" @click="clearFilter('region')">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
      <div class="form-group text-left" v-if="!hideTop">
        <label>Resort Name</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>RN</b>
            </span>
          </div>
          <select class="form-control" name="resort" id="resort" v-model="filter.resort">
            <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
          </select>
          <div class="input-group-append" @click="clearFilter('resort')">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
      <div class="form-group text-left">
        <label>Bedrooms</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>Bed</b>
            </span>
          </div>
          <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
            <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
          </select>
          <div class="input-group-append" @click="clearFilter('bedrooms')">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
      <hr />
      <div class="form-group text-left">
        <label>Date</label>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" style="color: #60CBEB">
              <b>D</b>
            </span>
          </div>
          <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
          <div class="input-group-append" @click="clearFilter('date')">
            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
              <b>X</b>
            </span>
          </div>
        </div>
      </div>
      <hr />
      <div class="form-group">
        <div class="row">
          <div class="col-md-6 text-left">
            <label>Minimum Price</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>R</b>
                </span>
              </div>
              <input
                class="form-control"
                type="number"
                step="any"
                id="minPrice"
                name="minPrice"
                placeholder="Minimum Price"
                v-model="filter.minPrice"
              />
              <div class="input-group-append" @click="clearFilter('minPrice')">
                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
                  <b>X</b>
                </span>
              </div>
            </div>
          </div>
          <div class="col-md-6 text-left">
            <label>Maximum Price</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" style="color: #60CBEB">
                  <b>R</b>
                </span>
              </div>
              <input
                class="form-control"
                type="number"
                step="any"
                id="maxPrice"
                name="maxPrice"
                placeholder="Maximum Price"
                v-model="filter.maxPrice"
              />
              <div class="input-group-append" @click="clearFilter('maxPrice')">
                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
                  <b>X</b>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import _ from 'lodash';

export default {
  props: {
    hideTop: undefined,
  },
  created() {
    this.initTimeshare();
  },
  computed: {
    ...mapState('timeshare', [
      'resorts',
      'regions',
      'detailedRegion',
      'resortBedrooms',
      'maxSleep',
    ]),
    ...mapState('weekList', ['filter']),
    filteredResorts() {
      if (this.selectedRegion) {
        const list = _.find(
          this.detailedRegion,
          i => i.region.regionName === this.selectedRegion,
        ).children;
        return _.sortBy(list, r => r.resortName);
      }
      return this.resorts;
    },
  },
  methods: {
    ...mapActions('timeshare', ['initTimeshare']),
    ...mapActions('weekList', ['clearFilter']),
  },
};
</script>

<style scoped>
</style>