From 8ac8ad09c71b10597a354eabf81cbafa14f00940 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Mon, 29 Jun 2020 16:52:17 -0400
Subject: playing with filtering by category

---
 iridescence/src/App.vue                        |  1 +
 iridescence/src/components/InventorySearch.vue | 11 ++---
 iridescence/src/components/Navbar.vue          | 30 +++++++++++++-
 iridescence/src/models/category.js             | 13 ++++++
 iridescence/src/store/index.js                 | 56 ++++++++------------------
 5 files changed, 66 insertions(+), 45 deletions(-)
 create mode 100644 iridescence/src/models/category.js

(limited to 'iridescence/src')

diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 34aa1d9..4094265 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -21,4 +21,5 @@ export default {
 
 <style lang="scss">
 @import "../node_modules/bulma/bulma.sass";
+@import url("https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap");
 </style>
diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/InventorySearch.vue
index e9da6f6..6145246 100644
--- a/iridescence/src/components/InventorySearch.vue
+++ b/iridescence/src/components/InventorySearch.vue
@@ -14,11 +14,12 @@
       <div class="control">
         <div class="select is-primary is-medium">
           <select>
-            <option>(Sort by...)</option>
-            <option>Age (Oldest to Newest)</option>
-            <option>Name</option>
-            <option>Price (Low to High)</option>
-            <option>Price (High to Low)</option>
+            <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>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index b83834a..8c2f0a6 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="navbar">
-    <nav class="navbar is-primary">
+    <nav class="navbar is-fixed-top is-transparent">
       <div class="navbar-brand">
         <div class="navbar-item">
           <img src="@/assets/logo.png" />
@@ -26,6 +26,24 @@
           </router-link>
         </div>
         <div class="navbar-end">
+          <div
+            class="navbar-item has-dropdown is-active"
+            v-for="category in categories.keys()"
+            :key="category"
+          >
+            <div class="navbar-link">
+              {{ category }}
+            </div>
+
+            <div
+              class="navbar-dropdown"
+              v-for="subcategory in categories.get(category)"
+              :key="subcategory"
+            >
+              {{ subcategory }}
+            </div>
+          </div>
+
           <div class="navbar-item">
             <div class="buttons">
               <button class="button">
@@ -43,6 +61,8 @@
 </template>
 
 <script>
+import Category from "~models/category.js";
+
 export default {
   name: "Navbar",
   data() {
@@ -57,6 +77,14 @@ export default {
       } else {
         return "navbar-menu";
       }
+    },
+    categories() {
+      const inventory = this.$store.getters.inventory;
+      console.log(inventory);
+      console.log(inventory.map(item => item.categories));
+
+      //console.log(cats);
+      return [];
     }
   },
   methods: {
diff --git a/iridescence/src/models/category.js b/iridescence/src/models/category.js
new file mode 100644
index 0000000..689c98f
--- /dev/null
+++ b/iridescence/src/models/category.js
@@ -0,0 +1,13 @@
+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 2d88e02..b5b0445 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -9,10 +9,12 @@ export default new Vuex.Store({
       {
         id: 1,
         name: "Beach Box",
-        quantity: -1, // quantity of -1 could mean made on demand
+        quantity: 0,
         cents: 1100,
         imgPath: "/beach_box.jpg",
-        description: "This is a beach box."
+        description: "This is a beach box.",
+        featured: false,
+        category: { name: "Stained Glass", subcategory: { name: "Gardeny" } }
       },
       {
         id: 2,
@@ -20,7 +22,9 @@ export default new Vuex.Store({
         quantity: 0,
         cents: 4500,
         imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows."
+        description: "Makes noise when the wind blows.",
+        featured: false,
+        categories: ["Fused Glass", ["Beachy"]]
       },
       {
         id: 3,
@@ -28,7 +32,9 @@ export default new Vuex.Store({
         quantity: 5,
         cents: 1100,
         imgPath: "/beach_box.jpg",
-        description: "This is a beach box."
+        description: "This is a beach box.",
+        featured: false,
+        categories: ["Stained Glass", ["Christmas"]]
       },
       {
         id: 4,
@@ -36,47 +42,19 @@ export default new Vuex.Store({
         quantity: 2,
         cents: 4500,
         imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows."
+        description: "Makes noise when the wind blows.",
+        featured: false,
+        categories: ["Fused Glass", ["Kiln-y"]]
       },
       {
         id: 5,
-        name: "Beach Box",
-        quantity: 5,
-        cents: 1100,
-        imgPath: "/beach_box.jpg",
-        description: "This is a beach box."
-      },
-      {
-        id: 6,
-        name: "Wind Chime",
-        quantity: 2,
-        cents: 4500,
-        imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows."
-      },
-      {
-        id: 7,
-        name: "Beach Box",
+        name: "Beach Box (New!)",
         quantity: 5,
         cents: 1100,
         imgPath: "/beach_box.jpg",
-        description: "This is a beach box."
-      },
-      {
-        id: 8,
-        name: "Wind Chime",
-        quantity: 2,
-        cents: 4500,
-        imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows."
-      },
-      {
-        id: 9,
-        name: "Wind Chime",
-        quantity: 2,
-        cents: 4500,
-        imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows."
+        description: "This is a beach box.",
+        featured: true,
+        categories: ["Stained Glass", ["Christmas"]]
       }
     ],
     term: ""
-- 
cgit v1.2.3