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
(limited to 'iridescence/src')
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