summaryrefslogtreecommitdiff
path: root/iridescence/src
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src')
-rw-r--r--iridescence/src/components/CartCheckout.vue15
-rw-r--r--iridescence/src/components/Navbar.vue27
-rw-r--r--iridescence/src/components/ProductCard.vue4
-rw-r--r--iridescence/src/components/admin/NewProduct.vue17
-rw-r--r--iridescence/src/components/admin/ProductEditCard.vue98
-rw-r--r--iridescence/src/views/Admin.vue5
6 files changed, 150 insertions, 16 deletions
diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
new file mode 100644
index 0000000..ec72acf
--- /dev/null
+++ b/iridescence/src/components/CartCheckout.vue
@@ -0,0 +1,15 @@
+<template>
+ <div class="buttons">
+ <button class="button">
+ Cart (5)
+ </button>
+ <button class="button is-info">
+ Checkout
+ </button>
+ </div>
+</template>
+<script>
+export default {
+ name: "CartCheckout"
+};
+</script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 551ce5a..16415bb 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -25,7 +25,13 @@
About
</router-link>
</div>
- <div class="navbar-end">
+
+ <div class="navbar-end" v-if="routeName == 'Administration'">
+ <div class="navbar-item">
+ <NewProduct></NewProduct>
+ </div>
+ </div>
+ <div class="navbar-end" v-else>
<div
class="navbar-item has-dropdown is-active"
v-for="category in categories.keys()"
@@ -45,14 +51,7 @@
</div>
<div class="navbar-item">
- <div class="buttons">
- <button class="button">
- Cart (5)
- </button>
- <button class="button is-info">
- Checkout
- </button>
- </div>
+ <CartCheckout></CartCheckout>
</div>
</div>
</div>
@@ -61,8 +60,15 @@
</template>
<script>
+import CartCheckout from "@/components/CartCheckout.vue";
+import NewProduct from "@/components/admin/NewProduct.vue";
+
export default {
name: "Navbar",
+ components: {
+ CartCheckout,
+ NewProduct
+ },
data() {
return {
isMenuActive: false
@@ -80,6 +86,9 @@ export default {
const products = this.$store.getters.products;
console.log(products.map(item => item.categories));
return [];
+ },
+ routeName() {
+ return this.$route.name;
}
},
methods: {
diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index 269e416..36c7be5 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -39,10 +39,8 @@ export default {
},
computed: {
stock() {
- if (this.quantity < 0) {
+ if (this.quantity == 0) {
return "Made to order";
- } else if (this.quantity == 0) {
- return "Out of stock";
} else {
return [this.quantity, "in stock"].join(" ");
}
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;
+ }
}
}
};
diff --git a/iridescence/src/views/Admin.vue b/iridescence/src/views/Admin.vue
index 85d6a14..ec02e07 100644
--- a/iridescence/src/views/Admin.vue
+++ b/iridescence/src/views/Admin.vue
@@ -2,6 +2,7 @@
<div id="admin">
<div class="container">
<section class="section">
+ <ProductSearch></ProductSearch>
<ProductEditList></ProductEditList>
</section>
</div>
@@ -9,12 +10,14 @@
</template>
<script>
+import ProductSearch from "@/components/ProductSearch.vue";
import ProductEditList from "@/components/admin/ProductEditList.vue";
export default {
name: "Admin",
components: {
- ProductEditList
+ ProductEditList,
+ ProductSearch
}
};
</script>