From 92b5b5cc69fdd3dfe67ea07a0fcf26bdd3c930f8 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Sat, 12 Sep 2020 08:35:13 -0400
Subject: Moved testing products into api/dichroism; renamed inventory to
 products.

---
 iridescence/src/components/ProductCard.vue | 55 ++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 iridescence/src/components/ProductCard.vue

(limited to 'iridescence/src/components/ProductCard.vue')

diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
new file mode 100644
index 0000000..269e416
--- /dev/null
+++ b/iridescence/src/components/ProductCard.vue
@@ -0,0 +1,55 @@
+<template>
+  <div id="productCard">
+    <div class="card">
+      <div class="card-image">
+        <figure class="image is-4by3">
+          <img
+            src="https://bulma.io/images/placeholders/1280x960.png"
+            :alt="name"
+          />
+        </figure>
+      </div>
+      <div class="card-content">
+        <div class="content">
+          <p class="title is-4">{{ name }}</p>
+          <p class="subtitle is-4">
+            {{ dollars(cents) }}
+          </p>
+          <p class="subtitle is-6">{{ stock }}</p>
+        </div>
+
+        <div class="content">
+          {{ description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductCard",
+  props: {
+    id: Number,
+    name: String,
+    quantity: Number,
+    cents: Number,
+    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)
+  }
+};
+</script>
-- 
cgit v1.2.3