New edit product page that live edits a ui/product.

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>

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',