summaryrefslogtreecommitdiff
path: root/iridescence/src/components/ProductDetail.vue
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-11-17 08:30:38 -0500
committerAdam T. Carpenter <atc@53hor.net>2020-11-17 08:30:38 -0500
commit58c7f82c2cbf2f2ff3f5c2dd559e570924a41a4a (patch)
treee9891159578923b0cb825ab78ca3afbaea38e4ee /iridescence/src/components/ProductDetail.vue
parent1ec0fd99cdf48fa3db61c7580d4e80a2c5216ed8 (diff)
downloadtheglassyladies-58c7f82c2cbf2f2ff3f5c2dd559e570924a41a4a.tar.xz
theglassyladies-58c7f82c2cbf2f2ff3f5c2dd559e570924a41a4a.zip
Basic product detail without duplicating modals for each card.
Diffstat (limited to 'iridescence/src/components/ProductDetail.vue')
-rw-r--r--iridescence/src/components/ProductDetail.vue49
1 files changed, 29 insertions, 20 deletions
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
index 6725595..9802d84 100644
--- a/iridescence/src/components/ProductDetail.vue
+++ b/iridescence/src/components/ProductDetail.vue
@@ -1,13 +1,17 @@
<template>
<div id="productDetail">
- <div class="modal is-active">
- <div class="modal-background"></div>
+ <div v-if="product" class="modal is-active">
+ <div @click="clearDetailId" class="modal-background"></div>
<div class="modal-content">
<div class="card">
<div class="card-image">
<figure class="image ">
<a target="_blank" :href="fullsize">
- <img :src="base" :alt="name" title="Click for fullsize" />
+ <img
+ :src="base"
+ :alt="product.name"
+ title="Click for fullsize"
+ />
</a>
</figure>
</div>
@@ -15,7 +19,7 @@
<div class="card-content">
<div class="content">
<p class="title">
- {{ name }}
+ {{ product.name }}
</p>
<p class="subtitle">
{{ dollars }}
@@ -24,12 +28,12 @@
</div>
<div class="content">
- {{ description }}
+ {{ product.description }}
</div>
</div>
</div>
</div>
- <div class="modal-close is-large"></div>
+ <div @click="clearDetailId" class="modal-close is-large"></div>
</div>
</div>
</template>
@@ -37,31 +41,36 @@
<script>
export default {
name: "ProductDetail",
- props: {
- id: Number,
- name: String,
- quantity: Number,
- cents: Number,
- photo_base: String,
- photo_fullsize: String,
- description: String
- },
computed: {
+ product() {
+ return this.$store.getters.products.find(
+ p => p.id == this.$store.getters.productDetailId
+ );
+ },
stock() {
- if (this.quantity == 0) {
+ if (this.product.quantity == 0) {
return "Made to order";
} else {
- return [this.quantity, "in stock"].join(" ");
+ return [this.product.quantity, "in stock"].join(" ");
}
},
dollars() {
- return "$ " + (this.cents / 100).toFixed(2);
+ return "$ " + (this.product.cents / 100).toFixed(2);
},
base() {
- return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_base;
+ return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_base].join(
+ "/"
+ );
},
fullsize() {
- return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_fullsize;
+ return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_fullsize].join(
+ "/"
+ );
+ }
+ },
+ methods: {
+ clearDetailId() {
+ this.$store.commit("productDetailId", 0);
}
}
};