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