summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-09-24 20:18:09 -0400
committerAdam T. Carpenter <atc@53hor.net>2020-09-24 20:18:09 -0400
commit74c5bb3fa6fd725685ad549c972ec0dee58f1b6b (patch)
treea12b1c33764a44da836ddd7ba81b469882e0c629 /iridescence/src/components
parentec16cc36d593b6b026689004479a6712b63f85ed (diff)
downloadtheglassyladies-74c5bb3fa6fd725685ad549c972ec0dee58f1b6b.tar.xz
theglassyladies-74c5bb3fa6fd725685ad549c972ec0dee58f1b6b.zip
fixed resizing issues with edit boxes; switched from panels to cards
Diffstat (limited to 'iridescence/src/components')
-rw-r--r--iridescence/src/components/admin/NewProductModal.vue33
-rw-r--r--iridescence/src/components/admin/ProductEditCard.vue119
-rw-r--r--iridescence/src/components/admin/ProductEditList.vue4
3 files changed, 98 insertions, 58 deletions
diff --git a/iridescence/src/components/admin/NewProductModal.vue b/iridescence/src/components/admin/NewProductModal.vue
index 228ee4c..8df0faa 100644
--- a/iridescence/src/components/admin/NewProductModal.vue
+++ b/iridescence/src/components/admin/NewProductModal.vue
@@ -1,24 +1,45 @@
<template>
- <div class="modal is-active" id="newProductModal">
+ <div class="modal " id="newProductModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
- <p class="modal-card-title">Modal title</p>
+ <p class="modal-card-title"></p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
- <!-- Content ... -->
+ <ProductEditCard v-bind:current-product="product"></ProductEditCard>
</section>
<footer class="modal-card-foot">
- <button class="button is-success">Save changes</button>
- <button class="button">Cancel</button>
+ <label class="checkbox">
+ <input type="checkbox" v-model="addAnother" />
+ Add Another?
+ </label>
</footer>
</div>
</div>
</template>
<script>
+import ProductEditCard from "@/components/admin/ProductEditCard.vue";
export default {
- name: "NewProductModal"
+ name: "NewProductModal",
+ components: {
+ ProductEditCard
+ },
+ data: function() {
+ return {
+ product: {
+ id: 0,
+ name: "",
+ quantity: 0,
+ cents: 0,
+ imgPath: "",
+ description: "",
+ featured: false,
+ categories: []
+ },
+ addAnother: false
+ };
+ }
};
</script>
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index 9fdf0c6..8ea23b1 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -1,32 +1,37 @@
<template>
<div id="productEditCard">
- <nav class="panel">
- <p class="panel-heading">
- {{ currentProduct.id }}: {{ currentProduct.name }}
- </p>
- <div class="panel-block">
- <input
- class="input"
- type="text"
- placeholder="product name"
- v-model="newProduct.name"
- />
+ <div class="card">
+ <div class="card-header">
+ <p class="card-header-title" v-if="currentProduct.id > 0">
+ {{ currentProduct.id }}: {{ currentProduct.name }}
+ </p>
+ <p class="card-header-title" v-else>
+ Add New Product
+ </p>
</div>
- <div class="panel-block">
+ <div class="card-content">
+ <div class="field">
+ <input
+ class="input"
+ type="text"
+ placeholder="product name"
+ v-model="newProduct.name"
+ />
+ </div>
<div class="field has-addons">
<p class="control">
<a class="button is-static">
#
</a>
</p>
- <div class="control">
+ <p class="control is-expanded">
<input
class="input"
type="text"
placeholder="inventory (quantity)"
v-model="newProductQuantity"
/>
- </div>
+ </p>
<div class="control">
<a class="button is-info" @click="incrementQuantity(-1)">
@@ -38,15 +43,13 @@
</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">
+ <p class="control is-expanded">
<input
class="input"
type="text"
@@ -55,39 +58,41 @@
/>
</p>
</div>
+ <div class="field">
+ <input
+ class="input"
+ type="text"
+ placeholder="image"
+ v-model="newProduct.imgPath"
+ />
+ </div>
+ <div class="field">
+ <label class="checkbox">
+ <input type="checkbox" v-model="newProduct.featured" />
+ Featured?
+ </label>
+ </div>
+ <div class="field">
+ <textarea
+ class="textarea"
+ type="text"
+ placeholder="description"
+ v-model="newProduct.description"
+ >
+ </textarea>
+ </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"
- @click="saveProduct"
- >
- Save
- </button>
+ <div class="card-footer" v-if="isDifferent && isValid">
+ <div class="card-footer-item">
+ <button
+ class="button is-link is-outlined is-fullwidth"
+ @click="saveProduct"
+ >
+ Save
+ </button>
+ </div>
</div>
- </nav>
+ </div>
</div>
</template>
@@ -129,7 +134,7 @@ export default {
}
},
computed: {
- newProductChanged() {
+ isDifferent() {
// TODO: check categories!
return (
this.newProduct.id != this.currentProduct.id ||
@@ -141,6 +146,14 @@ export default {
this.newProduct.featured != this.currentProduct.featured
);
},
+ isValid() {
+ return (
+ this.newProductPrice > 0 &&
+ this.newProduct.name != "" &&
+ this.newProduct.imgPath != "" &&
+ this.newProduct.description != ""
+ );
+ },
newProductQuantity: {
get: function() {
return this.newProduct.quantity;
@@ -165,7 +178,13 @@ export default {
},
methods: {
saveProduct() {
- this.$store.dispatch("updateProduct", this.newProduct);
+ if (this.newProduct.id == 0) {
+ // new product
+ this.$store.dispatch("createProduct", this.newProduct);
+ } else {
+ // update existing
+ this.$store.dispatch("updateProduct", this.newProduct);
+ }
},
incrementQuantity(amount) {
if (this.newProduct.quantity + amount >= 0) {
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
index 128e7bb..ae57406 100644
--- a/iridescence/src/components/admin/ProductEditList.vue
+++ b/iridescence/src/components/admin/ProductEditList.vue
@@ -1,8 +1,8 @@
<template>
<div id="productEditList">
- <div class="columns is-multiline is-variable is-7-desktop">
+ <div class="columns is-multiline is-variable is-desktop">
<div
- class="column is-one-quarter"
+ class="column is-one-third-desktop"
v-for="product in products"
:key="product.id"
>