summaryrefslogtreecommitdiff
path: root/iridescence
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence')
-rw-r--r--iridescence/src/api/dichroism.js58
-rw-r--r--iridescence/src/components/InventoryList.vue33
-rw-r--r--iridescence/src/components/Navbar.vue7
-rw-r--r--iridescence/src/components/ProductCard.vue (renamed from iridescence/src/components/InventoryCard.vue)4
-rw-r--r--iridescence/src/components/ProductFilter.vue (renamed from iridescence/src/components/InventoryFilter.vue)4
-rw-r--r--iridescence/src/components/ProductList.vue36
-rw-r--r--iridescence/src/components/ProductSearch.vue (renamed from iridescence/src/components/InventorySearch.vue)8
-rw-r--r--iridescence/src/models/category.js14
-rw-r--r--iridescence/src/store/index.js80
-rw-r--r--iridescence/src/views/Home.vue18
10 files changed, 131 insertions, 131 deletions
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/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/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/InventoryCard.vue b/iridescence/src/components/ProductCard.vue
index 6bcc548..269e416 100644
--- a/iridescence/src/components/InventoryCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -1,5 +1,5 @@
<template>
- <div id="inventoryCard">
+ <div id="productCard">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
@@ -28,7 +28,7 @@
<script>
export default {
- name: "InventoryCard",
+ name: "ProductCard",
props: {
id: Number,
name: String,
diff --git a/iridescence/src/components/InventoryFilter.vue b/iridescence/src/components/ProductFilter.vue
index 349b0f5..6fdd461 100644
--- a/iridescence/src/components/InventoryFilter.vue
+++ b/iridescence/src/components/ProductFilter.vue
@@ -1,5 +1,5 @@
<template>
- <div id="inventoryFilter">
+ <div id="productFilter">
<aside class="menu">
<p class="menu-label">
Availability
@@ -47,6 +47,6 @@
<script>
export default {
- name: "InventoryFilter"
+ 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/InventorySearch.vue b/iridescence/src/components/ProductSearch.vue
index 6145246..d452e83 100644
--- a/iridescence/src/components/InventorySearch.vue
+++ b/iridescence/src/components/ProductSearch.vue
@@ -1,5 +1,5 @@
<template>
- <div id="inventorySearch">
+ <div id="productSearch">
<div class="field is-grouped is-grouped-multiline">
<div class="control is-expanded">
<input
@@ -32,7 +32,7 @@
<script>
export default {
- name: "InventorySearch",
+ name: "ProductSearch",
data() {
return {
term: ""
@@ -40,12 +40,12 @@ export default {
},
computed: {
noResults() {
- return !this.$store.getters.inventory.length;
+ return !this.$store.getters.products.length;
}
},
methods: {
updateSearch() {
- this.$store.commit("filterTerm", this.term);
+ this.$store.commit("searchTerm", this.term);
}
}
};
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>