From 4dffff999d4025ddb593f5f44bf4ecccf577a0e5 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Sat, 12 Sep 2020 14:10:57 -0400
Subject: basic product editing view with renaming

---
 iridescence/src/api/dichroism.js                   | 122 ++++++++++++---------
 .../src/components/admin/ProductEditCard.vue       |  64 +++++++++++
 .../src/components/admin/ProductEditList.vue       |  36 ++++++
 iridescence/src/store/index.js                     |  11 +-
 iridescence/src/views/Admin.vue                    |  14 ++-
 5 files changed, 189 insertions(+), 58 deletions(-)
 create mode 100644 iridescence/src/components/admin/ProductEditCard.vue
 create mode 100644 iridescence/src/components/admin/ProductEditList.vue

(limited to 'iridescence')

diff --git a/iridescence/src/api/dichroism.js b/iridescence/src/api/dichroism.js
index 2bbad2b..ff64ced 100644
--- a/iridescence/src/api/dichroism.js
+++ b/iridescence/src/api/dichroism.js
@@ -1,58 +1,72 @@
-const _products = [
-  {
-    id: 1,
-    name: "Beach Box",
-    quantity: 0,
-    cents: 1100,
-    imgPath: "/beach_box.jpg",
-    description: "This is a beach box.",
-    featured: false,
-    categories: ["Fused Glass", ["Beachy"]]
-  },
-  {
-    id: 2,
-    name: "Wind Chime",
-    quantity: 0,
-    cents: 4500,
-    imgPath: "/wind-chime.jpg",
-    description: "Makes noise when the wind blows.",
-    featured: false,
-    categories: ["Fused Glass", ["Beachy"]]
-  },
-  {
-    id: 3,
-    name: "Beach Box",
-    quantity: 5,
-    cents: 1100,
-    imgPath: "/beach_box.jpg",
-    description: "This is a beach box.",
-    featured: false,
-    categories: ["Stained Glass", ["Christmas"]]
-  },
-  {
-    id: 4,
-    name: "Wind Chime",
-    quantity: 2,
-    cents: 4500,
-    imgPath: "/wind-chime.jpg",
-    description: "Makes noise when the wind blows.",
-    featured: false,
-    categories: ["Fused Glass", ["Kiln-y"]]
-  },
-  {
-    id: 5,
-    name: "Beach Box (New!)",
-    quantity: 5,
-    cents: 1100,
-    imgPath: "/beach_box.jpg",
-    description: "This is a beach box.",
-    featured: true,
-    categories: ["Stained Glass", ["Christmas"]]
+export default class Dichroism {
+  constructor() {
+    this.products = [
+      {
+        id: 1,
+        name: "Beach Box",
+        quantity: 0,
+        cents: 1100,
+        imgPath: "/beach_box.jpg",
+        description: "This is a beach box.",
+        featured: false,
+        categories: ["Fused Glass", ["Beachy"]]
+      },
+      {
+        id: 2,
+        name: "Wind Chime",
+        quantity: 0,
+        cents: 4500,
+        imgPath: "/wind-chime.jpg",
+        description: "Makes noise when the wind blows.",
+        featured: false,
+        categories: ["Fused Glass", ["Beachy"]]
+      },
+      {
+        id: 3,
+        name: "Beach Box",
+        quantity: 5,
+        cents: 1100,
+        imgPath: "/beach_box.jpg",
+        description: "This is a beach box.",
+        featured: false,
+        categories: ["Stained Glass", ["Christmas"]]
+      },
+      {
+        id: 4,
+        name: "Wind Chime",
+        quantity: 2,
+        cents: 4500,
+        imgPath: "/wind-chime.jpg",
+        description: "Makes noise when the wind blows.",
+        featured: false,
+        categories: ["Fused Glass", ["Kiln-y"]]
+      },
+      {
+        id: 5,
+        name: "Beach Box (New!)",
+        quantity: 5,
+        cents: 1100,
+        imgPath: "/beach_box.jpg",
+        description: "This is a beach box.",
+        featured: true,
+        categories: ["Stained Glass", ["Christmas"]]
+      }
+    ];
   }
-];
 
-export default {
   getProducts() {
-    return _products;
+    return this.products;
   }
-};
+
+  updateProduct(product) {
+    if (!product) {
+      return;
+    }
+    for (let i = 0; i < this.products.length; i++) {
+      if (product.id == this.products[i].id) {
+        this.products[i] = product;
+        return;
+      }
+    }
+  }
+}
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
new file mode 100644
index 0000000..db4ab77
--- /dev/null
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -0,0 +1,64 @@
+<template>
+  <div id="productEditCard">
+    <nav class="panel">
+      <p class="panel-heading">{{ oldProduct.id }}: {{ oldProduct.name }}</p>
+      <div class="panel-block">
+        <input class="input" type="text" v-model="newProduct.name" />
+      </div>
+      <a class="panel-block">
+        mojs
+      </a>
+      <div class="panel-block" v-if="productChanged">
+        <button
+          class="button is-link is-outlined is-fullwidth"
+          @click="saveProduct"
+        >
+          Save
+        </button>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductEditCard",
+  data: function() {
+    return {
+      newProduct: {
+        id: this.oldProduct.id,
+        name: this.oldProduct.name,
+        quantity: this.oldProduct.quantity,
+        cents: this.oldProduct.cents,
+        imgPath: this.oldProduct.imgPath,
+        description: this.oldProduct.description,
+        categories: this.oldProduct.categories
+      }
+    };
+  },
+  props: {
+    oldProduct: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    productChanged() {
+      return (
+        this.newProduct.id != this.oldProduct.id ||
+        this.newProduct.name != this.oldProduct.name ||
+        this.newProduct.quantity != this.oldProduct.quantity ||
+        this.newProduct.cents != this.oldProduct.cents ||
+        this.newProduct.imgPath != this.oldProduct.imgPath ||
+        this.newProduct.description != this.oldProduct.description ||
+        this.newProduct.categories != this.oldProduct.categories
+      );
+    }
+  },
+  methods: {
+    saveProduct() {
+      this.$store.dispatch("updateProduct", this.newProduct);
+    }
+  }
+};
+</script>
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
new file mode 100644
index 0000000..46016c2
--- /dev/null
+++ b/iridescence/src/components/admin/ProductEditList.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="productEditList">
+    <div class="columns is-multiline is-variable is-7-desktop">
+      <div
+        class="column is-one-quarter"
+        v-for="product in products"
+        :key="product.id"
+      >
+        <ProductEditCard v-bind:old-product="product"></ProductEditCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductEditCard from "@/components/admin/ProductEditCard.vue";
+
+export default {
+  name: "ProductsList",
+  components: {
+    ProductEditCard
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    products() {
+      return this.$store.getters.products;
+    }
+  },
+  methods: {},
+  created() {
+    this.$store.dispatch("refreshProducts");
+  }
+};
+</script>
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index e2b40b4..5a5b5f7 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -4,6 +4,8 @@ import Dichroism from "@/api/dichroism.js";
 
 Vue.use(Vuex);
 
+let dichroismApi = new Dichroism();
+
 export default new Vuex.Store({
   state: {
     searchTerm: "",
@@ -30,8 +32,13 @@ export default new Vuex.Store({
     }
   },
   actions: {
-    refreshProducts({ commit }) {
-      commit("setProducts", Dichroism.getProducts());
+    refreshProducts(context) {
+      context.commit("setProducts", []);
+      context.commit("setProducts", dichroismApi.getProducts());
+    },
+    updateProduct(context, product) {
+      dichroismApi.updateProduct(product);
+      context.dispatch("refreshProducts");
     }
   },
   modules: {}
diff --git a/iridescence/src/views/Admin.vue b/iridescence/src/views/Admin.vue
index 53c5417..85d6a14 100644
--- a/iridescence/src/views/Admin.vue
+++ b/iridescence/src/views/Admin.vue
@@ -1,10 +1,20 @@
 <template>
-  <h1>this is an admin page</h1>
+  <div id="admin">
+    <div class="container">
+      <section class="section">
+        <ProductEditList></ProductEditList>
+      </section>
+    </div>
+  </div>
 </template>
 
 <script>
+import ProductEditList from "@/components/admin/ProductEditList.vue";
+
 export default {
   name: "Admin",
-  components: {}
+  components: {
+    ProductEditList
+  }
 };
 </script>
-- 
cgit v1.2.3