From 92b5b5cc69fdd3dfe67ea07a0fcf26bdd3c930f8 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Sat, 12 Sep 2020 08:35:13 -0400
Subject: Moved testing products into api/dichroism; renamed inventory to
 products.

---
 iridescence/src/api/dichroism.js               | 58 +++++++++++++++++++
 iridescence/src/components/InventoryCard.vue   | 55 ------------------
 iridescence/src/components/InventoryFilter.vue | 52 -----------------
 iridescence/src/components/InventoryList.vue   | 33 -----------
 iridescence/src/components/InventorySearch.vue | 52 -----------------
 iridescence/src/components/Navbar.vue          |  7 +--
 iridescence/src/components/ProductCard.vue     | 55 ++++++++++++++++++
 iridescence/src/components/ProductFilter.vue   | 52 +++++++++++++++++
 iridescence/src/components/ProductList.vue     | 36 ++++++++++++
 iridescence/src/components/ProductSearch.vue   | 52 +++++++++++++++++
 iridescence/src/models/category.js             | 14 -----
 iridescence/src/store/index.js                 | 80 ++++++--------------------
 iridescence/src/views/Home.vue                 | 18 +++---
 13 files changed, 282 insertions(+), 282 deletions(-)
 create mode 100644 iridescence/src/api/dichroism.js
 delete mode 100644 iridescence/src/components/InventoryCard.vue
 delete mode 100644 iridescence/src/components/InventoryFilter.vue
 delete mode 100644 iridescence/src/components/InventoryList.vue
 delete mode 100644 iridescence/src/components/InventorySearch.vue
 create mode 100644 iridescence/src/components/ProductCard.vue
 create mode 100644 iridescence/src/components/ProductFilter.vue
 create mode 100644 iridescence/src/components/ProductList.vue
 create mode 100644 iridescence/src/components/ProductSearch.vue
 delete mode 100644 iridescence/src/models/category.js

diff --git a/iridescence/src/api/dichroism.js b/iridescence/src/api/dichroism.js
new file mode 100644
index 0000000..2bbad2b
--- /dev/null
+++ b/iridescence/src/api/dichroism.js
@@ -0,0 +1,58 @@
+const _products = [
+  {
+    id: 1,
+    name: "Beach Box",
+    quantity: 0,
+    cents: 1100,
+    imgPath: "/beach_box.jpg",
+    description: "This is a beach box.",
+    featured: false,
+    categories: ["Fused Glass", ["Beachy"]]
+  },
+  {
+    id: 2,
+    name: "Wind Chime",
+    quantity: 0,
+    cents: 4500,
+    imgPath: "/wind-chime.jpg",
+    description: "Makes noise when the wind blows.",
+    featured: false,
+    categories: ["Fused Glass", ["Beachy"]]
+  },
+  {
+    id: 3,
+    name: "Beach Box",
+    quantity: 5,
+    cents: 1100,
+    imgPath: "/beach_box.jpg",
+    description: "This is a beach box.",
+    featured: false,
+    categories: ["Stained Glass", ["Christmas"]]
+  },
+  {
+    id: 4,
+    name: "Wind Chime",
+    quantity: 2,
+    cents: 4500,
+    imgPath: "/wind-chime.jpg",
+    description: "Makes noise when the wind blows.",
+    featured: false,
+    categories: ["Fused Glass", ["Kiln-y"]]
+  },
+  {
+    id: 5,
+    name: "Beach Box (New!)",
+    quantity: 5,
+    cents: 1100,
+    imgPath: "/beach_box.jpg",
+    description: "This is a beach box.",
+    featured: true,
+    categories: ["Stained Glass", ["Christmas"]]
+  }
+];
+
+export default {
+  getProducts() {
+    return _products;
+  }
+};
diff --git a/iridescence/src/components/InventoryCard.vue b/iridescence/src/components/InventoryCard.vue
deleted file mode 100644
index 6bcc548..0000000
--- a/iridescence/src/components/InventoryCard.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div id="inventoryCard">
-    <div class="card">
-      <div class="card-image">
-        <figure class="image is-4by3">
-          <img
-            src="https://bulma.io/images/placeholders/1280x960.png"
-            :alt="name"
-          />
-        </figure>
-      </div>
-      <div class="card-content">
-        <div class="content">
-          <p class="title is-4">{{ name }}</p>
-          <p class="subtitle is-4">
-            {{ dollars(cents) }}
-          </p>
-          <p class="subtitle is-6">{{ stock }}</p>
-        </div>
-
-        <div class="content">
-          {{ description }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "InventoryCard",
-  props: {
-    id: Number,
-    name: String,
-    quantity: Number,
-    cents: Number,
-    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)
-  }
-};
-</script>
diff --git a/iridescence/src/components/InventoryFilter.vue b/iridescence/src/components/InventoryFilter.vue
deleted file mode 100644
index 349b0f5..0000000
--- a/iridescence/src/components/InventoryFilter.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div id="inventoryFilter">
-    <aside class="menu">
-      <p class="menu-label">
-        Availability
-      </p>
-      <ul class="menu-list">
-        <li>
-          <label class="radio">
-            <input type="radio" name="availability" />
-            In stock
-          </label>
-        </li>
-        <li>
-          <label class="radio">
-            <input type="radio" name="availability" />
-            Made to order
-          </label>
-        </li>
-      </ul>
-      <p class="menu-label">
-        Category
-      </p>
-      <ul class="menu-list">
-        <li>
-          <label class="radio">
-            <input type="radio" name="category" />
-            Garden
-          </label>
-        </li>
-        <li>
-          <label class="radio">
-            <input type="radio" name="category" />
-            Beach
-          </label>
-        </li>
-        <li>
-          <label class="radio">
-            <input type="radio" name="category" />
-            Pets
-          </label>
-        </li>
-      </ul>
-    </aside>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "InventoryFilter"
-};
-</script>
diff --git a/iridescence/src/components/InventoryList.vue b/iridescence/src/components/InventoryList.vue
deleted file mode 100644
index a4962cd..0000000
--- a/iridescence/src/components/InventoryList.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div id="inventoryList">
-    <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>
-</template>
-
-<script>
-import InventoryCard from "@/components/InventoryCard.vue";
-
-export default {
-  name: "InventoryList",
-  components: {
-    InventoryCard
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    inventory() {
-      return this.$store.getters.inventory;
-    }
-  },
-  methods: {}
-};
-</script>
diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/InventorySearch.vue
deleted file mode 100644
index 6145246..0000000
--- a/iridescence/src/components/InventorySearch.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div id="inventorySearch">
-    <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>
-            <option>Featured</option>
-            <option>Name/A-Z</option>
-            <option>Newest to Oldest</option>
-            <option>Oldest to Newest</option>
-            <option>Low to High</option>
-            <option>High to Low</option>
-          </select>
-        </div>
-      </div>
-    </div>
-    <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/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 65d5032..551ce5a 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -77,11 +77,8 @@ export default {
       }
     },
     categories() {
-      const inventory = this.$store.getters.inventory;
-      console.log(inventory);
-      console.log(inventory.map(item => item.categories));
-
-      //console.log(cats);
+      const products = this.$store.getters.products;
+      console.log(products.map(item => item.categories));
       return [];
     }
   },
diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
new file mode 100644
index 0000000..269e416
--- /dev/null
+++ b/iridescence/src/components/ProductCard.vue
@@ -0,0 +1,55 @@
+<template>
+  <div id="productCard">
+    <div class="card">
+      <div class="card-image">
+        <figure class="image is-4by3">
+          <img
+            src="https://bulma.io/images/placeholders/1280x960.png"
+            :alt="name"
+          />
+        </figure>
+      </div>
+      <div class="card-content">
+        <div class="content">
+          <p class="title is-4">{{ name }}</p>
+          <p class="subtitle is-4">
+            {{ dollars(cents) }}
+          </p>
+          <p class="subtitle is-6">{{ stock }}</p>
+        </div>
+
+        <div class="content">
+          {{ description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductCard",
+  props: {
+    id: Number,
+    name: String,
+    quantity: Number,
+    cents: Number,
+    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)
+  }
+};
+</script>
diff --git a/iridescence/src/components/ProductFilter.vue b/iridescence/src/components/ProductFilter.vue
new file mode 100644
index 0000000..6fdd461
--- /dev/null
+++ b/iridescence/src/components/ProductFilter.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="productFilter">
+    <aside class="menu">
+      <p class="menu-label">
+        Availability
+      </p>
+      <ul class="menu-list">
+        <li>
+          <label class="radio">
+            <input type="radio" name="availability" />
+            In stock
+          </label>
+        </li>
+        <li>
+          <label class="radio">
+            <input type="radio" name="availability" />
+            Made to order
+          </label>
+        </li>
+      </ul>
+      <p class="menu-label">
+        Category
+      </p>
+      <ul class="menu-list">
+        <li>
+          <label class="radio">
+            <input type="radio" name="category" />
+            Garden
+          </label>
+        </li>
+        <li>
+          <label class="radio">
+            <input type="radio" name="category" />
+            Beach
+          </label>
+        </li>
+        <li>
+          <label class="radio">
+            <input type="radio" name="category" />
+            Pets
+          </label>
+        </li>
+      </ul>
+    </aside>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductFilter"
+};
+</script>
diff --git a/iridescence/src/components/ProductList.vue b/iridescence/src/components/ProductList.vue
new file mode 100644
index 0000000..537e802
--- /dev/null
+++ b/iridescence/src/components/ProductList.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="productsList">
+    <div class="columns is-multiline is-variable is-7-desktop">
+      <div
+        class="column is-one-quarter"
+        v-for="item in products"
+        :key="item.id"
+      >
+        <ProductCard v-bind="item"></ProductCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductCard from "@/components/ProductCard.vue";
+
+export default {
+  name: "ProductsList",
+  components: {
+    ProductCard
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    products() {
+      return this.$store.getters.products;
+    }
+  },
+  methods: {},
+  created() {
+    this.$store.dispatch("refreshProducts");
+  }
+};
+</script>
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue
new file mode 100644
index 0000000..d452e83
--- /dev/null
+++ b/iridescence/src/components/ProductSearch.vue
@@ -0,0 +1,52 @@
+<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>
+            <option>Featured</option>
+            <option>Name/A-Z</option>
+            <option>Newest to Oldest</option>
+            <option>Oldest to Newest</option>
+            <option>Low to High</option>
+            <option>High to Low</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <content class="has-text-centered" v-if="noResults">
+      <p>We couldn't find anything like that...</p>
+    </content>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductSearch",
+  data() {
+    return {
+      term: ""
+    };
+  },
+  computed: {
+    noResults() {
+      return !this.$store.getters.products.length;
+    }
+  },
+  methods: {
+    updateSearch() {
+      this.$store.commit("searchTerm", this.term);
+    }
+  }
+};
+</script>
diff --git a/iridescence/src/models/category.js b/iridescence/src/models/category.js
deleted file mode 100644
index 04966f5..0000000
--- a/iridescence/src/models/category.js
+++ /dev/null
@@ -1,14 +0,0 @@
-
-export class Category {
-  name: string;
-  subcategory: Category;
-
-  /**
-   * @param {string} name
-   * @param {Category=} subcategory
-   */
-  constructor(name, subcategory) {
-    this.name = name;
-    this.subcategory = subcategory;
-  }
-}
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index b5b0445..e2b40b4 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -1,82 +1,38 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import Dichroism from "@/api/dichroism.js";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    inventory: [
-      {
-        id: 1,
-        name: "Beach Box",
-        quantity: 0,
-        cents: 1100,
-        imgPath: "/beach_box.jpg",
-        description: "This is a beach box.",
-        featured: false,
-        category: { name: "Stained Glass", subcategory: { name: "Gardeny" } }
-      },
-      {
-        id: 2,
-        name: "Wind Chime",
-        quantity: 0,
-        cents: 4500,
-        imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows.",
-        featured: false,
-        categories: ["Fused Glass", ["Beachy"]]
-      },
-      {
-        id: 3,
-        name: "Beach Box",
-        quantity: 5,
-        cents: 1100,
-        imgPath: "/beach_box.jpg",
-        description: "This is a beach box.",
-        featured: false,
-        categories: ["Stained Glass", ["Christmas"]]
-      },
-      {
-        id: 4,
-        name: "Wind Chime",
-        quantity: 2,
-        cents: 4500,
-        imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows.",
-        featured: false,
-        categories: ["Fused Glass", ["Kiln-y"]]
-      },
-      {
-        id: 5,
-        name: "Beach Box (New!)",
-        quantity: 5,
-        cents: 1100,
-        imgPath: "/beach_box.jpg",
-        description: "This is a beach box.",
-        featured: true,
-        categories: ["Stained Glass", ["Christmas"]]
-      }
-    ],
-    term: ""
+    searchTerm: "",
+    products: []
   },
   getters: {
-    inventory(state) {
-      const term = state.term.toLowerCase();
+    products(state) {
+      const searchTerm = state.searchTerm.toLowerCase();
 
-      return state.inventory.filter(item => {
-        // TODO: move into class for items
+      return state.products.filter(item => {
         return (
-          item.name.toLowerCase().indexOf(term) != -1 ||
-          item.description.toLowerCase().indexOf(term) != -1
+          item.name.toLowerCase().indexOf(searchTerm) != -1 ||
+          item.description.toLowerCase().indexOf(searchTerm) != -1
         );
       });
     }
   },
   mutations: {
-    filterTerm(state, term) {
-      state.term = term;
+    searchTerm(state, term) {
+      state.searchTerm = term;
+    },
+    setProducts(state, products) {
+      state.products = products;
+    }
+  },
+  actions: {
+    refreshProducts({ commit }) {
+      commit("setProducts", Dichroism.getProducts());
     }
   },
-  actions: {},
   modules: {}
 });
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index b01b78d..1212d2c 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -8,7 +8,7 @@
       <div class="column is-narrow">
         <section class="section">
           <div class="box">
-            <InventoryFilter></InventoryFilter>
+            <ProductFilter></ProductFilter>
           </div>
         </section>
       </div>
@@ -16,10 +16,10 @@
       <div class="column">
         <div class="container">
           <section class="section">
-            <InventorySearch></InventorySearch>
+            <ProductSearch></ProductSearch>
           </section>
           <section class="section">
-            <InventoryList></InventoryList>
+            <ProductList></ProductList>
           </section>
         </div>
       </div>
@@ -28,16 +28,16 @@
 </template>
 
 <script>
-import InventoryList from "@/components/InventoryList.vue";
-import InventoryFilter from "@/components/InventoryFilter.vue";
-import InventorySearch from "@/components/InventorySearch.vue";
+import ProductList from "@/components/ProductList.vue";
+import ProductFilter from "@/components/ProductFilter.vue";
+import ProductSearch from "@/components/ProductSearch.vue";
 
 export default {
   name: "Home",
   components: {
-    InventoryList,
-    InventorySearch,
-    InventoryFilter
+    ProductList,
+    ProductSearch,
+    ProductFilter
   }
 };
 </script>
-- 
cgit v1.2.3