From 8f5dc52dc56cf37669e560bbde67dea102030c13 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 18:44:16 +0200
Subject: [PATCH] Product now fetches and passes to ui/product.

---
 frontend/components/Product.vue    | 117 +------------------
 frontend/components/ui/product.vue | 177 +++++++++++++++++++++++++++++
 2 files changed, 181 insertions(+), 113 deletions(-)
 create mode 100644 frontend/components/ui/product.vue

diff --git a/frontend/components/Product.vue b/frontend/components/Product.vue
index e2c3a25..82d75ba 100644
--- a/frontend/components/Product.vue
+++ b/frontend/components/Product.vue
@@ -1,64 +1,15 @@
 <template>
-  <main role="main" v-if="product">
-    <div class="banner padding-bottom--lg" :class="'bg-' + color">
-      <div class="banner-content top-show-sm col-wrap max-width">
-        <h1>{{ product.name }}</h1>
-      </div>
-    </div>
-
-    <section class="product padding-top--lg">
-      <div class="max-width col-wrap">
-        <div class="col-6 image-preview">
-          <img :src="product.image" />
-        </div>
-        <div class="col-6 details">
-          <div class="pricing">
-            <span class="amount">24.99</span>
-            <span class="currency">kr</span>
-          </div>
-
-          <p v-if="product.description">{{ product.description }}</p>
-          <p v-else class="description">Notatbøkene fra All Pine Press er trykket i Oslo og papir fra Hellefoss Paper AS i Hokksund. (Notatbøkene er uten linjer)</p>
-
-          <div class="stock" v-if="inStock">
-            <i class="icon icon--checkmark-circle"></i>
-            På lager
-          </div>
-          <div class="stock soldOut" v-else>
-            <i class="icon icon--close-circle"></i>
-            Utsolgt
-          </div>
-
-          <div class="actions">
-          <!-- Variation picker -->
-
-          <!-- Amount picker -->
-          <!-- Buy button -->
-            <Button color="black" :small="true" @click="addToCart" :scaleRotate="true">Add to cart</Button>
-          </div>
-
-          <div class="meta">
-            <span class="categories">
-              Kategorier:
-            </span>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
+  <product :product="product" />
 </template>
 
 <script>
-import Button from '@/components/ui/Button';
-import store from '@/store'
+import Product from '@/components/ui/product';
 
 export default {
-  components: { Button },
+  components: { Product },
   data() {
     return {
-      color: Math.random() > 0.5 ? 'yellow' : 'blue',
-      inStock: Math.random() > 0.5,
-      product: null
+      product: null,
     }
   },
   created() {
@@ -74,11 +25,6 @@ export default {
       .then(resp => resp.json())
       .then(product => this.product = product);
   },
-  methods: {
-    addToCart() {
-      store.dispatch('cartModule/addItemToCart', { ...this.product });
-    }
-  },
   beforeDestroy() {
     document.querySelector('body').style.backgroundColor = '#19171A';
   }
@@ -86,59 +32,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '/frontend//styles/spacing';
-@import '/frontend//styles/variables';
-
-main {
-  color: var(--color-background);
-}
-
-section.product {
-  overflow: auto;
-
-  @include mobile {
-    .col-6 {
-      width: 100%;
-    }
-  }
-}
-
-h1 {
-  text-align: center;
-}
-
-.image-preview img {
-  border-radius: 6px;
-  width: 100%;
-}
-
-.details {
-  margin-top: 1rem;
-  font-size: 1.3rem;
-
-  > div, > p {
-    margin-bottom: 2.25rem;
-  }
-
-  .stock {
-    padding: 1rem;
-    border: 4px solid var(--color-green);
-    width: max-content;
-
-    .icon {
-      position: relative;
-      top: 2px;
-      left: -4px;
-    }
-
-    &.soldOut {
-      border-color: var(--color-pink);
-    }
-  }
-
-  .pricing {
-    font-size: 2rem;
-  }
-}
-
 </style>
diff --git a/frontend/components/ui/product.vue b/frontend/components/ui/product.vue
new file mode 100644
index 0000000..ca339bf
--- /dev/null
+++ b/frontend/components/ui/product.vue
@@ -0,0 +1,177 @@
+<template>
+  <main role="main" v-if="product">
+    <div class="banner padding-bottom--lg" :class="'bg-' + color">
+      <div class="banner-content top-show-sm col-wrap max-width">
+        <h1>{{ product.name }}</h1>
+      </div>
+    </div>
+
+    <section class="product padding-top--lg">
+      <div class="max-width col-wrap">
+        <div class="col-6 image-preview">
+          <img v-if="product.image" :src="product.image" />
+          <div v-else role="image" aria-label="no image" class="image-placeholder" ref="placeholder">
+            <h3>(no image)</h3>
+          </div>
+        </div>
+        <div class="col-6 details">
+          <div class="pricing">
+            <span :class="{ sale: selectedVariation.discount }">24.99 kr</span>
+            <span v-if="selectedVariation.discount">19.99 kr</span>
+          </div>
+
+          <p v-if="product.description">{{ product.description }}</p>
+          <p v-else class="description">Notatbøkene fra All Pine Press er trykket i Oslo og papir fra Hellefoss Paper AS i Hokksund. (Notatbøkene er uten linjer)</p>
+
+          <div class="stock" v-if="inStock">
+            <i class="icon icon--checkmark-circle"></i>
+            På lager
+          </div>
+          <div class="stock soldOut" v-else>
+            <i class="icon icon--close-circle"></i>
+            Utsolgt
+          </div>
+
+          <div class="actions">
+          <!-- Variation picker -->
+
+          <!-- Amount picker -->
+          <!-- Buy button -->
+            <Button color="black" :small="true" @click="addToCart" :scaleRotate="true">Add to cart</Button>
+          </div>
+
+          <div class="meta">
+            <span class="categories">
+              Kategorier:
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import Button from '@/components/ui/Button';
+import store from '@/store'
+
+export default {
+  components: { Button },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      placeholderWidth: '0px',
+      color: Math.random() > 0.5 ? 'yellow' : 'blue',
+      inStock: Math.random() > 0.5,
+      selectedVariation: { discount: Math.random() > 0.5 ? true : false }
+    }
+  },
+  mounted() {
+    setTimeout(this.squareImagePlaceholder, 10);
+  },
+  // TODO remove
+  watch: {
+    product: {
+      deep: true,
+      handler(newVal) {
+        if (this.product.color)
+          this.color = this.product.color;
+        if (newVal.image == '')
+          setTimeout(this.squareImagePlaceholder, 10); 
+      }
+    }
+  },
+  methods: {
+    addToCart() {
+      store.dispatch('cartModule/addItemToCart', { ...this.product });
+    },
+    squareImagePlaceholder() {
+      const { placeholder } = this.$refs;
+      if (placeholder)
+        placeholder.style.height = placeholder.clientWidth + 'px';
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '/frontend//styles/spacing';
+@import '/frontend//styles/variables';
+
+main {
+  color: var(--color-background);
+}
+
+section.product {
+  overflow: auto;
+
+  @include mobile {
+    .col-6 {
+      width: 100%;
+    }
+  }
+}
+
+h1 {
+  text-align: center;
+}
+
+.image-preview img {
+  border-radius: 6px;
+  width: 100%;
+}
+.image-preview .image-placeholder {
+  width: 100%;
+  border: 2px solid var(--color-background);
+  border-radius: 6px;
+
+  display: flex;
+  align-items: center;
+
+  h3 {
+    font-style: italic;
+    text-align: center;
+    width: 100%;
+  }
+}
+
+.details {
+  margin-top: 1rem;
+  font-size: 1.3rem;
+
+  > div, > p {
+    margin-bottom: 2.25rem;
+  }
+
+  .stock {
+    padding: 1rem;
+    border: 4px solid var(--color-green);
+    width: max-content;
+
+    .icon {
+      position: relative;
+      top: 2px;
+      left: -4px;
+    }
+
+    &.soldOut {
+      border-color: var(--color-pink);
+    }
+  }
+
+  .pricing {
+    font-size: 2rem;
+
+    & .sale {
+      text-decoration: line-through;
+      color: gray;
+    }
+  }
+}
+
+</style>