summaryrefslogtreecommitdiff
path: root/iridescence/src
diff options
context:
space:
mode:
authorAdam Carpenter <atc@53hor.net>2020-04-30 21:31:30 -0400
committerAdam Carpenter <atc@53hor.net>2020-04-30 21:31:30 -0400
commitc499946400c775f311d52236d9d1fef3f19a68ff (patch)
treeccff75f9679f3c23e4e9c7c3c04855e6be846adf /iridescence/src
parent9119c86ff94fd29086dfd342a616993f20fc5c75 (diff)
downloadtheglassyladies-c499946400c775f311d52236d9d1fef3f19a68ff.tar.xz
theglassyladies-c499946400c775f311d52236d9d1fef3f19a68ff.zip
moved search into InventorySearch and started work on filters; updated quantity display
Diffstat (limited to 'iridescence/src')
-rw-r--r--iridescence/src/components/InventoryCard.vue13
-rw-r--r--iridescence/src/components/InventoryFilter.vue39
-rw-r--r--iridescence/src/components/InventoryList.vue20
-rw-r--r--iridescence/src/components/InventorySearch.vue36
-rw-r--r--iridescence/src/store/index.js4
-rw-r--r--iridescence/src/views/Home.vue24
6 files changed, 87 insertions, 49 deletions
diff --git a/iridescence/src/components/InventoryCard.vue b/iridescence/src/components/InventoryCard.vue
index 75e683a..6bcc548 100644
--- a/iridescence/src/components/InventoryCard.vue
+++ b/iridescence/src/components/InventoryCard.vue
@@ -15,7 +15,7 @@
<p class="subtitle is-4">
{{ dollars(cents) }}
</p>
- <p class="subtitle is-6">{{ quantity }} in stock.</p>
+ <p class="subtitle is-6">{{ stock }}</p>
</div>
<div class="content">
@@ -37,6 +37,17 @@ export default {
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)
}
diff --git a/iridescence/src/components/InventoryFilter.vue b/iridescence/src/components/InventoryFilter.vue
index 365c1e8..58547eb 100644
--- a/iridescence/src/components/InventoryFilter.vue
+++ b/iridescence/src/components/InventoryFilter.vue
@@ -1,40 +1,17 @@
<template>
<div id="inventoryFilter">
- <section class="section">
- <div class="container">
- <input
- class="input is-primary is-medium"
- type="text"
- placeholder="Find something in particular..."
- v-model.trim="term"
- @input="updateFilter"
- autofocus
- />
- </div>
- <content class="has-text-centered" v-if="noResults">
- <p>We couldn't find anything like that...</p>
- </content>
- </section>
+ <h1 class="subtitle">
+ Filter Products
+ </h1>
+ <label class="checkbox">
+ <input type="checkbox" />
+ Remember me
+ </label>
</div>
</template>
<script>
export default {
- name: "InventoryFilter",
- data() {
- return {
- term: ""
- };
- },
- computed: {
- noResults() {
- return !this.$store.getters.inventory.length;
- }
- },
- methods: {
- updateFilter() {
- this.$store.commit("filterTerm", this.term);
- }
- }
+ name: "InventoryFilter"
};
</script>
diff --git a/iridescence/src/components/InventoryList.vue b/iridescence/src/components/InventoryList.vue
index dbda9a4..a4962cd 100644
--- a/iridescence/src/components/InventoryList.vue
+++ b/iridescence/src/components/InventoryList.vue
@@ -1,18 +1,14 @@
<template>
<div id="inventoryList">
- <section class="section">
- <div class="container">
- <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 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>
- </section>
+ </div>
</div>
</template>
diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/InventorySearch.vue
new file mode 100644
index 0000000..fbcaabb
--- /dev/null
+++ b/iridescence/src/components/InventorySearch.vue
@@ -0,0 +1,36 @@
+<template>
+ <div id="inventorySearch">
+ <input
+ class="input is-primary is-medium"
+ type="text"
+ placeholder="Find something in particular..."
+ v-model.trim="term"
+ @input="updateSearch"
+ autofocus
+ />
+ <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/store/index.js b/iridescence/src/store/index.js
index eaf9a9f..2d88e02 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -9,7 +9,7 @@ export default new Vuex.Store({
{
id: 1,
name: "Beach Box",
- quantity: 5,
+ quantity: -1, // quantity of -1 could mean made on demand
cents: 1100,
imgPath: "/beach_box.jpg",
description: "This is a beach box."
@@ -17,7 +17,7 @@ export default new Vuex.Store({
{
id: 2,
name: "Wind Chime",
- quantity: 2,
+ quantity: 0,
cents: 4500,
imgPath: "/wind-chime.jpg",
description: "Makes noise when the wind blows."
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index c4a2184..9272d90 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -3,20 +3,38 @@
allow users to sort, filter, and search for items and add them to their
cart. -->
- <div id="home">
- <InventoryFilter></InventoryFilter>
- <InventoryList></InventoryList>
+ <div id="home" class="container">
+ <div class="columns">
+ <div class="column is-narrow">
+ <section class="section">
+ <div class="box">
+ <InventoryFilter></InventoryFilter>
+ </div>
+ </section>
+ </div>
+
+ <div class="column">
+ <section class="section">
+ <InventorySearch></InventorySearch>
+ </section>
+ <section class="section">
+ <InventoryList></InventoryList>
+ </section>
+ </div>
+ </div>
</div>
</template>
<script>
import InventoryList from "@/components/InventoryList.vue";
import InventoryFilter from "@/components/InventoryFilter.vue";
+import InventorySearch from "@/components/InventorySearch.vue";
export default {
name: "Home",
components: {
InventoryList,
+ InventorySearch,
InventoryFilter
}
};