path: root/iridescence/src/components/ProductSearch.vue

<template>
  <div id="productSearch">
    <div class="field is-grouped is-grouped-multiline">
      <div class="control is-expanded">
        <input
          class="input is-primary is-medium"
          type="text"
          placeholder="Find something in particular..."
          v-model.trim="term"
          @input="updateSearch"
          autofocus
        />
      </div>
      <div class="control">
        <div class="select is-primary is-medium">
          <select v-model="sortOptionName" @change="updateSort">
            <option v-for="name in sortOptionNames" :key="name" :value="name">
              {{ name }}
            </option>
          </select>
        </div>
      </div>
    </div>
    <content class="has-text-centered" v-if="noResults">
      <p>
        Couldn't find what you're looking for?
        <a href="#">We do custom orders too!</a>
      </p>
    </content>
  </div>
</template>

<script>
export default {
  name: "ProductSearch",
  data() {
    return {
      term: "",
      sortOptions: {
        "Featured Items": a => (a.featured ? -1 : 1),
        "In Stock": (a, b) => a.quantity < b.quantity,
        "Made to Order": (a, b) => a.quantity > b.quantity,
        "A to Z": (a, b) => a.name > b.name,
        "Z to A": (a, b) => a.name < b.name,
        "Newest to Oldest": (a, b) => a.id < b.id,
        "Oldest to Newest": (a, b) => a.id > b.id,
        "Price (Low to High)": (a, b) => a.cents > b.cents,
        "Price (High to Low)": (a, b) => a.cents < b.cents
      },
      sortOptionName: String
    };
  },
  created: function() {
    this.sortOptionName = this.sortOptionNames[0];
  },
  computed: {
    sortOptionNames() {
      return Object.keys(this.sortOptions);
    },
    noResults() {
      return !this.$store.getters.products.length && !this.$store.getters.busy;
    }
  },
  methods: {
    updateSearch() {
      this.$store.commit("searchTerm", this.term);
    },
    updateSort() {
      this.$store.commit("compare", this.sortOptions[this.sortOptionName]);
    }
  }
};
</script>