basic image details, base and fullsize image displays

2 files changed, 83 insertions, 0 deletions

diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index cfea0fd..67fbfbd 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -26,12 +26,27 @@
         </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,
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
new file mode 100644
index 0000000..6725595
--- /dev/null
+++ b/iridescence/src/components/ProductDetail.vue
@@ -0,0 +1,68 @@
+<template>
+  <div id="productDetail">
+    <div class="modal is-active">
+      <div 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" />
+              </a>
+            </figure>
+          </div>
+
+          <div class="card-content">
+            <div class="content">
+              <p class="title">
+                {{ name }}
+              </p>
+              <p class="subtitle">
+                {{ dollars }}
+              </p>
+              <p class="subtitle">{{ stock }}</p>
+            </div>
+
+            <div class="content">
+              {{ description }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-close is-large"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductDetail",
+  props: {
+    id: Number,
+    name: String,
+    quantity: Number,
+    cents: Number,
+    photo_base: String,
+    photo_fullsize: String,
+    description: String
+  },
+  computed: {
+    stock() {
+      if (this.quantity == 0) {
+        return "Made to order";
+      } else {
+        return [this.quantity, "in stock"].join(" ");
+      }
+    },
+    dollars() {
+      return "$ " + (this.cents / 100).toFixed(2);
+    },
+    base() {
+      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_base;
+    },
+    fullsize() {
+      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_fullsize;
+    }
+  }
+};
+</script>