From 253dceb5591c5a39122f1439a721ce5b0b3fc97c Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Tue, 15 Sep 2020 17:24:00 -0400
Subject: added new product button, added search bar to admin view
---
iridescence/src/components/admin/NewProduct.vue | 17 ++++
.../src/components/admin/ProductEditCard.vue | 98 +++++++++++++++++++++-
2 files changed, 112 insertions(+), 3 deletions(-)
create mode 100644 iridescence/src/components/admin/NewProduct.vue
(limited to 'iridescence/src/components/admin')
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
new file mode 100644
index 0000000..b8d8dd2
--- /dev/null
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -0,0 +1,17 @@
+<template>
+ <div id="addNewProduct">
+ <button class="button is-primary">
+ + Add New
+ </button>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "AddNewProduct",
+ props: {},
+ watch: {},
+ computed: {},
+ methods: {}
+};
+</script>
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index e7fef5e..9fdf0c6 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -12,9 +12,73 @@
v-model="newProduct.name"
/>
</div>
- <a class="panel-block">
- mojs
- </a>
+ <div class="panel-block">
+ <div class="field has-addons">
+ <p class="control">
+ <a class="button is-static">
+ #
+ </a>
+ </p>
+ <div class="control">
+ <input
+ class="input"
+ type="text"
+ placeholder="inventory (quantity)"
+ v-model="newProductQuantity"
+ />
+ </div>
+ <div class="control">
+ <a class="button is-info" @click="incrementQuantity(-1)">
+ ▼
+ </a>
+ </div>
+ <div class="control">
+ <a class="button is-info" @click="incrementQuantity(1)">
+ ▲
+ </a>
+ </div>
+ </div>
+ </div>
+ <div class="panel-block">
+ <div class="field has-addons">
+ <p class="control">
+ <a class="button is-static">
+ $
+ </a>
+ </p>
+ <p class="control">
+ <input
+ class="input"
+ type="text"
+ placeholder="price"
+ v-model="newProductPrice"
+ />
+ </p>
+ </div>
+ </div>
+ <div class="panel-block">
+ <input
+ class="input"
+ type="text"
+ placeholder="image"
+ v-model="newProduct.imgPath"
+ />
+ </div>
+ <div class="panel-block">
+ <label class="checkbox">
+ <input type="checkbox" v-model="newProduct.featured" />
+ Featured?
+ </label>
+ </div>
+ <div class="panel-block">
+ <textarea
+ class="textarea"
+ type="text"
+ placeholder="description"
+ v-model="newProduct.description"
+ >
+ </textarea>
+ </div>
<div class="panel-block" v-if="newProductChanged">
<button
class="button is-link is-outlined is-fullwidth"
@@ -28,6 +92,8 @@
</template>
<script>
+const dollarRe = /^\$?(\d+)\.(\d{2})/gm;
+
export default {
name: "ProductEditCard",
data: function() {
@@ -74,11 +140,37 @@ export default {
this.newProduct.description != this.currentProduct.description ||
this.newProduct.featured != this.currentProduct.featured
);
+ },
+ newProductQuantity: {
+ get: function() {
+ return this.newProduct.quantity;
+ },
+ set: function(val) {
+ if (!isNaN(val)) {
+ this.newProduct.quantity = 1 * val;
+ }
+ }
+ },
+ newProductPrice: {
+ get: function() {
+ return (this.newProduct.cents / 100).toFixed(2);
+ },
+ set: function(val) {
+ let groups = dollarRe.exec(val);
+ if (groups && groups[1] && groups[2]) {
+ this.newProduct.cents = 100 * groups[1] + 1 * groups[2];
+ }
+ }
}
},
methods: {
saveProduct() {
this.$store.dispatch("updateProduct", this.newProduct);
+ },
+ incrementQuantity(amount) {
+ if (this.newProduct.quantity + amount >= 0) {
+ this.newProduct.quantity += amount;
+ }
}
}
};
--
cgit v1.2.3