summaryrefslogtreecommitdiff
path: root/iridescence/src/components/admin
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components/admin')
-rw-r--r--iridescence/src/components/admin/NewProduct.vue20
-rw-r--r--iridescence/src/components/admin/ProductEditCard.vue73
-rw-r--r--iridescence/src/components/admin/ProductEditList.vue4
3 files changed, 30 insertions, 67 deletions
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
index 8c45f0b..511ae9c 100644
--- a/iridescence/src/components/admin/NewProduct.vue
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -17,7 +17,9 @@
<button class="delete" @click="toggleModal"></button>
</header>
<section class="modal-card-body">
- <ProductEditCard v-bind:current-product="product"></ProductEditCard>
+ <ProductEditCard
+ v-bind:current-product="newProduct"
+ ></ProductEditCard>
</section>
<footer class="modal-card-foot"></footer>
</div>
@@ -27,26 +29,18 @@
</template>
<script>
-import ProductEditCard from "./ProductEditCard.vue";
+import Product from "../../models/product";
+import ProductEditCard from "./ProductEditCard";
export default {
- name: "AddNewProduct",
+ name: "NewProduct",
components: {
ProductEditCard
},
data: function() {
return {
modalEnabled: false,
- product: {
- id: 0,
- name: "",
- quantity: 0,
- cents: 0,
- imgPath: "",
- description: "",
- featured: false,
- categories: []
- },
+ newProduct: new Product(),
addAnother: false
};
},
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index 2784fc9..350f8df 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -15,6 +15,14 @@
v-model="newProduct.name"
/>
</div>
+ <div class="field">
+ <input
+ class="input"
+ type="text"
+ placeholder="(product category)"
+ v-model="newProduct.category_path"
+ />
+ </div>
<div class="field has-addons">
<p class="control">
<a class="button is-static">
@@ -74,18 +82,12 @@
</span>
</span>
<span class="file-name">
- {{ newProduct.imgPath }}
+ {{ newProduct.photo_set }}
</span>
</label>
</div>
</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"
@@ -94,13 +96,12 @@
>
</textarea>
</div>
- <progress
- class="progress is-primary"
- v-bind:value="fileProgress"
- max="100"
- v-if="fileProgress < 100"
- >{{ fileProgress }}%</progress
- >
+ <div class="field">
+ <label class="checkbox">
+ <input type="checkbox" v-model="newProduct.featured" />
+ Featured?
+ </label>
+ </div>
</div>
<transition
enter-active-class="animate__animated animate__fadeIn"
@@ -119,63 +120,35 @@
</template>
<script>
+import Product from "../../models/product";
+
const dollarRe = /^\$?(\d+)\.(\d{2})/gm;
export default {
name: "ProductEditCard",
data: function() {
return {
- newProduct: {
- id: this.currentProduct.id,
- name: this.currentProduct.name,
- quantity: this.currentProduct.quantity,
- cents: this.currentProduct.cents,
- imgPath: this.currentProduct.imgPath,
- description: this.currentProduct.description,
- featured: this.currentProduct.featured,
- categories: this.currentProduct.categories.slice(0)
- },
- fileProgress: 100
+ newProduct: new Product(this.currentProduct)
};
},
props: {
currentProduct: {
- type: Object,
+ type: Product,
required: true
}
},
watch: {
currentProduct() {
- this.newProduct.id = this.currentProduct.id;
- this.newProduct.name = this.currentProduct.name;
- this.newProduct.quantity = this.currentProduct.quantity;
- this.newProduct.cents = this.currentProduct.cents;
- this.newProduct.imgPath = this.currentProduct.imgPath;
- this.newProduct.description = this.currentProduct.description;
- this.newProduct.featured = this.currentProduct.featured;
- this.newProduct.categories = this.currentProduct.categories.slice(0);
+ // TODO: necessary?
+ this.newProduct = new Product(this.currentProduct);
}
},
computed: {
isDifferent() {
- // TODO: check categories!
- return (
- this.newProduct.id != this.currentProduct.id ||
- this.newProduct.name != this.currentProduct.name ||
- this.newProduct.quantity != this.currentProduct.quantity ||
- this.newProduct.cents != this.currentProduct.cents ||
- this.newProduct.imgPath != this.currentProduct.imgPath ||
- this.newProduct.description != this.currentProduct.description ||
- this.newProduct.featured != this.currentProduct.featured
- );
+ return this.newProduct.isDifferent(this.currentProduct);
},
isValid() {
- return (
- this.newProductPrice > 0 &&
- this.newProduct.name != "" &&
- this.newProduct.imgPath != "" &&
- this.newProduct.description != ""
- );
+ return this.newProduct.isValid();
},
newProductQuantity: {
get: function() {
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
index ae57406..556f1c3 100644
--- a/iridescence/src/components/admin/ProductEditList.vue
+++ b/iridescence/src/components/admin/ProductEditList.vue
@@ -20,15 +20,11 @@ export default {
components: {
ProductEditCard
},
- data() {
- return {};
- },
computed: {
products() {
return this.$store.getters.products;
}
},
- methods: {},
created() {
this.$store.dispatch("refreshProducts");
}