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/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 ++++++++++++++++++++++++
 9 files changed, 197 insertions(+), 197 deletions(-)
 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

(limited to 'iridescence/src/components')

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