basic product editing view with renaming

2 files changed, 100 insertions, 0 deletions

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>