Basic product detail without duplicating modals for each card.

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);
     }
   }
 };