From 942a9140f06554548225c60d59fdb5709b7987b8 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 12:59:46 +0200
Subject: [PATCH] New product page with defined route and link from
 productCard.

---
 frontend/components/Product.vue        | 140 +++++++++++++++++++++++++
 frontend/components/ui/ProductCard.vue |   8 +-
 frontend/routes.js                     |   5 +
 3 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/Product.vue

diff --git a/frontend/components/Product.vue b/frontend/components/Product.vue
new file mode 100644
index 0000000..02c3193
--- /dev/null
+++ b/frontend/components/Product.vue
@@ -0,0 +1,140 @@
+<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>
+</template>
+
+<script>
+import Button from '@/components/ui/Button';
+import store from '@/store'
+
+export default {
+  components: { Button },
+  data() {
+    return {
+      color: Math.random() > 0.5 ? 'yellow' : 'blue',
+      inStock: Math.random() > 0.5,
+      product: null
+    }
+  },
+  created() {
+    document.querySelector('body').style.backgroundColor = 'white';
+
+    const productSlug = this.$route.params.slug
+
+    fetch(`http://localhost:30010/api/product/${ productSlug }`)
+      .then(resp => resp.json())
+      .then(product => this.product = product);
+  },
+  methods: {
+    addToCart() {
+      store.dispatch('cartModule/addItemToCart', { ...this.product });
+    }
+  },
+  beforeDestroy() {
+    document.querySelector('body').style.backgroundColor = '#19171A';
+  }
+}
+</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/ProductCard.vue b/frontend/components/ui/ProductCard.vue
index 7f2566e..cb062a0 100644
--- a/frontend/components/ui/ProductCard.vue
+++ b/frontend/components/ui/ProductCard.vue
@@ -22,6 +22,7 @@
 
           <div class="content-bottom-actions">
             <Button :small="true" :color="color" @click="addItemToCart">Add to cart</Button>
+            <Button :small="true" color="yellow" @click="viewProduct">View<i class="icon icon--arrow-forward"></i></Button>
           </div>
         </div>
       </div>
@@ -61,13 +62,16 @@ export default {
   methods: {
     addItemToCart() {
       store.dispatch('cartModule/addItemToCart', { ...this.product });
+    },
+    viewProduct() {
+      this.$router.push('/shop/' + this.product.urlSlug)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables';
+@import '/frontend/styles/variables';
 
 .product-card {
   position: relative;
@@ -117,6 +121,8 @@ export default {
 
     &-actions {
       border-top: 1px solid rgba(0,0,0,0.1);
+      display: flex;
+      justify-content: space-between;
     }
   }
 }
diff --git a/frontend/routes.js b/frontend/routes.js
index f9eeb1c..7fbcb75 100644
--- a/frontend/routes.js
+++ b/frontend/routes.js
@@ -19,6 +19,11 @@ let routes = [
     path: '/about',
     component: (resolve) => require(['./components/About.vue'], resolve)
   },
+  {
+    name: 'Shop product view',
+    path: '/shop/:slug',
+    component: (resolve) => require(['./components/Product.vue'], resolve)
+  },
   {
     name: 'Shop',
     path: '/shop',