diff options
| -rw-r--r-- | iridescence/src/components/InventoryCard.vue | 13 | ||||
| -rw-r--r-- | iridescence/src/components/InventoryFilter.vue | 39 | ||||
| -rw-r--r-- | iridescence/src/components/InventoryList.vue | 20 | ||||
| -rw-r--r-- | iridescence/src/components/InventorySearch.vue | 36 | ||||
| -rw-r--r-- | iridescence/src/store/index.js | 4 | ||||
| -rw-r--r-- | iridescence/src/views/Home.vue | 24 |
6 files changed, 87 insertions, 49 deletions
diff --git a/iridescence/src/components/InventoryCard.vue b/iridescence/src/components/InventoryCard.vue index 75e683a..6bcc548 100644 --- a/iridescence/src/components/InventoryCard.vue +++ b/iridescence/src/components/InventoryCard.vue @@ -15,7 +15,7 @@ <p class="subtitle is-4"> {{ dollars(cents) }} </p> - <p class="subtitle is-6">{{ quantity }} in stock.</p> + <p class="subtitle is-6">{{ stock }}</p> </div> <div class="content"> @@ -37,6 +37,17 @@ export default { imgPath: String, description: String }, + computed: { + stock() { + if (this.quantity < 0) { + return "Made to order"; + } else if (this.quantity == 0) { + return "Out of stock"; + } else { + return [this.quantity, "in stock"].join(" "); + } + } + }, methods: { dollars: cents => "$ " + (cents / 100).toFixed(2) } diff --git a/iridescence/src/components/InventoryFilter.vue b/iridescence/src/components/InventoryFilter.vue index 365c1e8..58547eb 100644 --- a/iridescence/src/components/InventoryFilter.vue +++ b/iridescence/src/components/InventoryFilter.vue @@ -1,40 +1,17 @@ <template> <div id="inventoryFilter"> - <section class="section"> - <div class="container"> - <input - class="input is-primary is-medium" - type="text" - placeholder="Find something in particular..." - v-model.trim="term" - @input="updateFilter" - autofocus - /> - </div> - <content class="has-text-centered" v-if="noResults"> - <p>We couldn't find anything like that...</p> - </content> - </section> + <h1 class="subtitle"> + Filter Products + </h1> + <label class="checkbox"> + <input type="checkbox" /> + Remember me + </label> </div> </template> <script> export default { - name: "InventoryFilter", - data() { - return { - term: "" - }; - }, - computed: { - noResults() { - return !this.$store.getters.inventory.length; - } - }, - methods: { - updateFilter() { - this.$store.commit("filterTerm", this.term); - } - } + name: "InventoryFilter" }; </script> diff --git a/iridescence/src/components/InventoryList.vue b/iridescence/src/components/InventoryList.vue index dbda9a4..a4962cd 100644 --- a/iridescence/src/components/InventoryList.vue +++ b/iridescence/src/components/InventoryList.vue @@ -1,18 +1,14 @@ <template> <div id="inventoryList"> - <section class="section"> - <div class="container"> - <div class="columns is-multiline is-variable is-7-desktop"> - <div - class="column is-one-quarter" - v-for="item in inventory" - :key="item.id" - > - <InventoryCard v-bind="item"></InventoryCard> - </div> - </div> + <div class="columns is-multiline is-variable is-7-desktop"> + <div + class="column is-one-quarter" + v-for="item in inventory" + :key="item.id" + > + <InventoryCard v-bind="item"></InventoryCard> </div> - </section> + </div> </div> </template> diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/InventorySearch.vue new file mode 100644 index 0000000..fbcaabb --- /dev/null +++ b/iridescence/src/components/InventorySearch.vue @@ -0,0 +1,36 @@ +<template> + <div id="inventorySearch"> + <input + class="input is-primary is-medium" + type="text" + placeholder="Find something in particular..." + v-model.trim="term" + @input="updateSearch" + autofocus + /> + <content class="has-text-centered" v-if="noResults"> + <p>We couldn't find anything like that...</p> + </content> + </div> +</template> + +<script> +export default { + name: "InventorySearch", + data() { + return { + term: "" + }; + }, + computed: { + noResults() { + return !this.$store.getters.inventory.length; + } + }, + methods: { + updateSearch() { + this.$store.commit("filterTerm", this.term); + } + } +}; +</script> diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js index eaf9a9f..2d88e02 100644 --- a/iridescence/src/store/index.js +++ b/iridescence/src/store/index.js @@ -9,7 +9,7 @@ export default new Vuex.Store({ { id: 1, name: "Beach Box", - quantity: 5, + quantity: -1, // quantity of -1 could mean made on demand cents: 1100, imgPath: "/beach_box.jpg", description: "This is a beach box." @@ -17,7 +17,7 @@ export default new Vuex.Store({ { id: 2, name: "Wind Chime", - quantity: 2, + quantity: 0, cents: 4500, imgPath: "/wind-chime.jpg", description: "Makes noise when the wind blows." diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue index c4a2184..9272d90 100644 --- a/iridescence/src/views/Home.vue +++ b/iridescence/src/views/Home.vue @@ -3,20 +3,38 @@ allow users to sort, filter, and search for items and add them to their cart. --> - <div id="home"> - <InventoryFilter></InventoryFilter> - <InventoryList></InventoryList> + <div id="home" class="container"> + <div class="columns"> + <div class="column is-narrow"> + <section class="section"> + <div class="box"> + <InventoryFilter></InventoryFilter> + </div> + </section> + </div> + + <div class="column"> + <section class="section"> + <InventorySearch></InventorySearch> + </section> + <section class="section"> + <InventoryList></InventoryList> + </section> + </div> + </div> </div> </template> <script> import InventoryList from "@/components/InventoryList.vue"; import InventoryFilter from "@/components/InventoryFilter.vue"; +import InventorySearch from "@/components/InventorySearch.vue"; export default { name: "Home", components: { InventoryList, + InventorySearch, InventoryFilter } }; |