UnivateProperties/src/components/timeshare/searchTimeshare.vue

<template>
  <div class="panel-left p-5">
    <h2>Filter Weeks</h2>
    <p>*Select at least 1 filter field</p>
    <div class="input-group mt-2">
      <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
      <select class="form-control" name="season" id="season" v-model="filter.season">
        <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
      </select>
    </div>
    <div class="input-group mt-2">
      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect">Bedrooms</label>
      <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
        <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
      </select>
    </div>
    <input
      type="text"
      name="max-price"
      class="form-control my-1"
      id="max-price"
      placeholder="Maximum Price"
      v-model="filter.maxPrice"
    />
    <p class="mt-2">
      Date from
      <input
        type="date"
        name="arrival-from"
        class="form-control my-1"
        id="arrival-from"
        placeholder="mm/dd/yy"
        v-model="filter.date"
      />
    </p>
    <p>
      Date to
      <input
        type="date"
        name="arrival-to"
        class="form-control my-1"
        id="arrival-to"
        placeholder="mm/dd/yy"
        v-model="filter.ddate"
      />
    </p>
    <button class="btn-white-border" @click="ClearFilter()">
      <i class="fa fa-eraser"></i> CLEAR
    </button>
    <!-- <div class="btn-white-border">
      <i class="fa fa-search"></i> FILTER
    </div>-->
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import _ from "lodash";

export default {
  props: {
    hideTop: undefined,
    keyword: undefined,
  },
  data() {
    return {
      selectedSeason: null,
    };
  },
  created() {
    this.initTimeshare();
  },
  computed: {
    ...mapState("timeshare", [
      "resorts",
      "regions",
      "detailedRegion",
      "resortBedrooms",
      "maxSleep",
    ]),
    ...mapState("weekList", ["filter", "searchParams"]),
    ...mapState("timeshare", ["seasons"]),
    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"]),
    ...mapActions("timeshare", ["getSeasons"]),
    ClearFilter() {
      this.filter.season = null;
      this.filter.bedrooms = null;
      this.filter.maxPrice = null;
      this.filter.date = null;
      this.filter.ddate = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.uniSelectLabel {
  position: absolute;
  z-index: 2;
  margin-left: 15px;
  margin-top: 7px;
  font-family: "muli";
  font-size: 15px;
  color: rgb(118, 118, 118);
}
</style>