From c499946400c775f311d52236d9d1fef3f19a68ff Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Thu, 30 Apr 2020 21:31:30 -0400 Subject: moved search into InventorySearch and started work on filters; updated quantity display --- iridescence/src/components/InventoryCard.vue | 13 ++++++++- iridescence/src/components/InventoryFilter.vue | 39 ++++++-------------------- iridescence/src/components/InventoryList.vue | 20 ++++++------- iridescence/src/components/InventorySearch.vue | 36 ++++++++++++++++++++++++ iridescence/src/store/index.js | 4 +-- iridescence/src/views/Home.vue | 24 ++++++++++++++-- 6 files changed, 87 insertions(+), 49 deletions(-) create mode 100644 iridescence/src/components/InventorySearch.vue 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 @@

{{ dollars(cents) }}

-

{{ quantity }} in stock.

+

{{ stock }}

@@ -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 @@ 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 @@ 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 @@ + + + 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. --> -
- - +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+