you can now see cart items on cart page

1 files changed, 48 insertions, 28 deletions

diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
index 8c2de16..c39ab13 100644
--- a/iridescence/src/components/cart/CartItem.vue
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -1,39 +1,59 @@
 <template>
-  <section class="section" id="cartItem">
-    <div class="media">
-      <figure class="media-left image is-square">
-        <img :src="thumbnail" :title="name" />
-      </figure>
-      <div class="media-content">
-        <div class="field">
-          <p class="control">
-            <textarea
-              class="textarea"
-              placeholder="Add a comment..."
-            ></textarea>
-          </p>
-        </div>
-        <nav class="level">
-          <div class="level-left">
-            <div class="level-item">
-              <a class="button is-info">Submit</a>
+  <article class="media" id="cartItem">
+    <figure class="media-left">
+      <p class="image is-64x64">
+        <img :src="thumbnail" :title="product.name" />
+      </p>
+    </figure>
+    <div class="media-content">
+      <nav class="level">
+        <div class="level-left">
+          <div class="level-item">
+            <div class="content">
+              <strong>
+                <p>
+                  {{ product.name }}
+                </p>
+              </strong>
             </div>
           </div>
-          <div class="level-right">
-            <div class="level-item">
-              <label class="checkbox">
-                <input type="checkbox" /> Press enter to submit
-              </label>
-            </div>
+          <div class="level-item">
+            <button class="button is-static">
+              {{ inCart }}
+            </button>
           </div>
-        </nav>
-      </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            <button class="button is-outlined is-danger">
+              Remove
+            </button>
+          </div>
+        </div>
+      </nav>
     </div>
-  </section>
+  </article>
 </template>
 
 <script>
 export default {
-  name: "CartItem"
+  name: "CartItem",
+  props: {
+    id: Number,
+    inCart: Number
+  },
+  computed: {
+    product() {
+      return this.$store.state.products.find(p => p.id == this.id);
+    },
+    dollars() {
+      return "$ " + ((this.product.cents * this.inCart) / 100).toFixed(2);
+    },
+    thumbnail() {
+      return (
+        process.env.VUE_APP_IMAGE_ROOT + "/" + this.product.photo_thumbnail
+      );
+    }
+  }
 };
 </script>