From 7cc00dbc49639a0d04ca1cc433136befa55c9f14 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 18:46:44 +0200
Subject: [PATCH] New edit product page that live edits a ui/product.

---
 frontend/components/editProduct.vue | 122 ++++++++++++++++++++++++++++
 frontend/routes.js                  |  10 +++
 2 files changed, 132 insertions(+)
 create mode 100644 frontend/components/editProduct.vue

diff --git a/frontend/components/editProduct.vue b/frontend/components/editProduct.vue
new file mode 100644
index 0000000..15e7e1b
--- /dev/null
+++ b/frontend/components/editProduct.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <main v-if="!hide">
+      <div class="header">
+      </div>
+      <div class="edit max-width col-wrap">
+        <h2>Edit mode</h2>
+        <div class="edit-product" v-if="product">
+          <h4>Product</h4>
+          <input v-model="product.color" placeholder="color" />
+          <input v-model="product.name" placeholder="name" />
+          <input v-model="product.description" placeholder="description" />
+          <input v-model="product.image" placeholder="image" />
+          <input v-model="product.slug" placeholder="slug (default: empty)" />
+        </div>
+
+        <div v-if="variation">
+          <h4>Variations</h4>
+          <input v-for="key in Object.keys(variation)" v-model="variation[key]" :placeholder="key" />
+        </div>
+
+        <Button :small="true" @click="hide = !hide">Preview</Button>
+        <Button :small="true" color="green">Submit new bag</Button>
+      </div>
+
+      <product :product="product" />
+    </main>
+    <main v-else>
+      <Button @click="hide = !hide" class="pos-abs" :small="true">Close preview</Button>
+      <product :product="product" />
+    </main>
+  </div>
+</template>
+
+<script>
+import Product from '@/components/ui/product';
+import Button from '@/components/ui/Button';
+
+export default {
+  components: { Product, Button },
+  data() {
+    return {
+      hide: false,
+      product: undefined,
+      variation: undefined
+    }
+  },
+  created() {
+    document.querySelector('body').style.backgroundColor = 'white';
+
+    const slug = this.$route.params.slug; 
+    if (slug) {
+      this.getAndSetProductBySlug(this.$route.params.slug);
+    } else {
+      this.getProductSchema()
+      this.getVariationSchema()
+    }
+  },
+  methods: {
+    getProductSchema() {
+      let url = '/api/product/schema';
+      if (window.location.href.includes('localhost'))
+        url = 'http://localhost:30010'.concat(url)
+
+      fetch(url)
+        .then(resp => resp.json())
+        .then(product => this.product = product);
+    },
+    getVariationSchema() {
+      let url = '/api/variation/schema';
+      if (window.location.href.includes('localhost'))
+        url = 'http://localhost:30010'.concat(url)
+
+      fetch(url)
+        .then(resp => resp.json())
+        .then(variation => this.variation = variation);
+    },
+    getAndSetProductBySlug(slug) {
+      let url = `/api/product/${ slug }`;
+      if (window.location.href.includes('localhost'))
+        url = 'http://localhost:30010'.concat(url)
+
+      fetch(url)
+        .then(resp => resp.json())
+        .then(product => this.product = product);
+    }
+  },
+  beforeDestroy() {
+    document.querySelector('body').style.backgroundColor = '#19171A';
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  background-color: var(--color-background);
+  width: 100%;
+  height: 8rem;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+.edit > div:not(:first-of-type) {
+  margin-top: 0.75rem;
+}
+
+input {
+  border-color: black;
+  padding: 0.5rem;
+  font-size: 1rem;
+}
+
+button {
+  margin-top: 0.5rem;
+} 
+
+.edit {
+  color: var(--color-background);
+  margin: 2rem auto;
+}
+</style>
diff --git a/frontend/routes.js b/frontend/routes.js
index fc97ea8..6f94196 100644
--- a/frontend/routes.js
+++ b/frontend/routes.js
@@ -39,6 +39,16 @@ let routes = [
     path: '/admin',
     component: (resolve) => require(['./components/Admin.vue'], resolve)
   },
+  {
+    name: 'Add',
+    path: '/add',
+    component: (resolve) => require(['./components/editProduct.vue'], resolve)
+  },
+  {
+    name: 'Edit',
+    path: '/edit/:slug',
+    component: (resolve) => require(['./components/editProduct.vue'], resolve)
+  }
   // {
   //   name: 'styleguide',
   //   path: '/styleguide',