search.vue

<template>
  <q-page padding>
    <div class="text-center">
      <h2>Search</h2>
    </div>
    <q-form @submit="search" class="q-gutter-md">
      <q-input
        filled
        v-model="searchData.keyword"
        label="Keyword *"
        lazy-rules
        :rules="[ val => val && val.length > 0 || 'Keyword is required']"
      />
      <q-input
        filled
        v-model="searchData.beginDate"
        mask="date"
        :rules="['date']"
        label="Begin Date"
      >
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy ref="beginDateProxy" transition-show="scale" transition-hide="scale">
              <q-date
                v-model="searchData.beginDate"
                @input="() => $refs.beginDateProxy.hide()"
                :options="optionsFn"
              />
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
<q-input filled v-model="searchData.endDate" mask="date" :rules="['date']" label="End Date">
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy ref="endDateProxy" transition-show="scale" transition-hide="scale">
              <q-date
                v-model="searchData.endDate"
                @input="() => $refs.endDateProxy.hide()"
                :options="optionsFn"
              />
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
     <q-select
        filled
        v-model="searchData.sort"
        :options="options"
        label="Sort By"
        emit-value
        map-options
      />
      <q-btn label="Submit" type="submit" color="primary" />
    </q-form>
    <br />
    <SearchResults />
  </q-page>
</template>
<script>
import { nytMixin } from "../mixins/nytMixin";
import SearchResults from "@/components/SearchResults.vue";
import * as moment from "moment";
export default {
  name: "search",
  mixins: [nytMixin],
  components: {
    SearchResults
  },
  computed: {},
  data: () => {
    return {
      searchData: {
        sort: "newest",
        beginDate: moment(new Date()).format("YYYY/MM/DD"),
        endDate: moment(new Date()).format("YYYY/MM/DD")
      },
      disabledDates: date => {
        return +date >= +new Date();
      },
      options: [
        {
          label: "Newest",
          value: "newest"
        },
        {
          label: "Oldest",
          value: "oldest"
        },
        {
          label: "Relevance",
          value: "relevance"
        }
      ]
    };
  },
  methods: {
    async search(evt) {
      evt.preventDefault();
      const data = {
        q: this.searchData.keyword,
        begin_date: moment(this.searchData.beginDate, "YYYY/MM/DD").format(
          "YYYYMMDD"
        ),
        end_date: moment(this.searchData.endDate, "YYYY/MM/DD").format(
          "YYYYMMDD"
        ),
        sort: this.searchData.sort
      };
      const response = await this.searchArticles(data);
      this.$store.commit("setSearchResults", response.data.response.docs);
    },
optionsFn(date) {
      return +moment(date, "YYYY/MM/DD").toDate() <= +new Date();
    }
  }
};
</script>