Basic product detail without duplicating modals for each card.

4 files changed, 47 insertions, 38 deletions

diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index 67fbfbd..f796f92 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -3,7 +3,7 @@
     <div class="card">
       <div class="card-image">
         <figure class="image is-square">
-          <a href="#">
+          <a @click="setDetailId">
             <img :src="thumbnail" :alt="name" title="Click to expand." />
           </a>
         </figure>
@@ -11,7 +11,7 @@
       <div class="card-content">
         <div class="content">
           <p class="title is-4">
-            <a href="#">
+            <a @click="setDetailId">
               {{ name }}
             </a>
           </p>
@@ -26,27 +26,12 @@
         </div>
       </div>
     </div>
-    <ProductDetail
-      v-if="id == 6"
-      v-bind="{
-        id: id,
-        name: name,
-        quantity: quantity,
-        cents: cents,
-        photo_base: photo_base,
-        photo_fullsize: photo_fullsize,
-        description: description
-      }"
-    ></ProductDetail>
   </div>
 </template>
 
 <script>
-import ProductDetail from "@/components/ProductDetail.vue";
-
 export default {
   name: "ProductCard",
-  components: { ProductDetail },
   props: {
     id: Number,
     name: String,
@@ -79,6 +64,11 @@ export default {
         return description.splice(0, 10).join(" ") + "…";
       }
     }
+  },
+  methods: {
+    setDetailId() {
+      this.$store.commit("productDetailId", this.id);
+    }
   }
 };
 </script>
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);
     }
   }
 };
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index 30f6cbf..dabcf31 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -11,12 +11,16 @@ export default new Vuex.Store({
     searchTerm: "",
     products: [],
     busy: false,
-    compare: a => (a.featured ? -1 : 1)
+    compare: a => (a.featured ? -1 : 1),
+    productDetailId: 0
   },
   getters: {
     busy(state) {
       return state.busy;
     },
+    productDetailId(state) {
+      return state.productDetailId;
+    },
     products(state) {
       return state.products
         .filter(item => {
@@ -31,6 +35,9 @@ export default new Vuex.Store({
     toggleBusy(state) {
       state.busy = !state.busy;
     },
+    productDetailId(state, id) {
+      state.productDetailId = id;
+    },
     compare(state, compare) {
       state.compare = compare;
     },
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index b636175..b512328 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -4,6 +4,7 @@
 	  cart. -->
 
   <div id="home">
+    <ProductDetail></ProductDetail>
     <div class="columns">
       <div class="column">
         <div class="container">
@@ -22,11 +23,13 @@
 <script>
 import ProductList from "@/components/ProductList.vue";
 import ProductSearch from "@/components/ProductSearch.vue";
+import ProductDetail from "@/components/ProductDetail.vue";
 
 export default {
   name: "Home",
   components: {
     ProductList,
+    ProductDetail,
     ProductSearch
   }
 };