From c499946400c775f311d52236d9d1fef3f19a68ff Mon Sep 17 00:00:00 2001
From: Adam Carpenter <atc@53hor.net>
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

(limited to 'iridescence')

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
   }
 };
-- 
cgit v1.2.3