aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2021-07-30 01:51:25 +0200
committerMateja <mail@matejamaric.com>2021-07-30 01:51:25 +0200
commit2376e26dc970e9bd90cd6cedb019860f5a5b1936 (patch)
tree3bd9c8b07b3a220e66c27630f8dba6574d495000
parent6467c01cddf7333ff96de21b9ffe830c0d9bc7e4 (diff)
downloadmevn-ecommerce-2376e26dc970e9bd90cd6cedb019860f5a5b1936.tar.gz
mevn-ecommerce-2376e26dc970e9bd90cd6cedb019860f5a5b1936.zip
Added Orders page for users to see their purchases.
-rw-r--r--client/src/App.vue3
-rw-r--r--client/src/router/index.js9
-rw-r--r--client/src/store/index.js19
-rw-r--r--client/src/views/Orders.vue49
4 files changed, 79 insertions, 1 deletions
diff --git a/client/src/App.vue b/client/src/App.vue
index f61f236..02de5c5 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -27,6 +27,9 @@
</ul>
<ul class="navbar-nav mb-2 mb-lg-0" v-else>
<li class="nav-item">
+ <router-link class="nav-link" active-class="active" to="/orders">Orders</router-link>
+ </li>
+ <li class="nav-item">
<span class="nav-link" @click="logout">Logout</span>
</li>
</ul>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index ee78676..55d8df2 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -4,6 +4,7 @@ import Product from '@/views/Product.vue';
import Checkout from '@/views/Checkout.vue';
import Login from '@/views/Login.vue';
import Register from '@/views/Register.vue';
+import Orders from '@/views/Orders';
import store from '@/store/index';
@@ -38,6 +39,14 @@ const routes = [
meta: {
guest: true
}
+ },
+ {
+ path: '/orders',
+ name: 'Orders',
+ component: Orders,
+ meta: {
+ auth: true
+ }
}
];
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 47f8f47..8d74c5a 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -7,7 +7,8 @@ export default createStore({
currentProduct: {},
cart: [],
token: localStorage.getItem('token') || '',
- isAdmin: localStorage.getItem('isAdmin') === 'true'
+ isAdmin: localStorage.getItem('isAdmin') === 'true',
+ userOrders: []
},
getters: {
getProducts(state) {
@@ -45,6 +46,9 @@ export default createStore({
},
isAdmin(state) {
return state.isAdmin;
+ },
+ getUserOrders(state) {
+ return state.userOrders;
}
},
mutations: {
@@ -90,6 +94,9 @@ export default createStore({
localStorage.removeItem('token');
localStorage.removeItem('isAdmin');
delete axios.defaults.headers.common['Authorization'];
+ },
+ setUserOrders(state, orders) {
+ state.userOrders = orders;
}
},
actions: {
@@ -138,6 +145,16 @@ export default createStore({
})
.catch(error => reject(error));
});
+ },
+ pullUserOrders(context) {
+ return new Promise((resolve, reject) => {
+ axios.get(`${process.env.VUE_APP_ROOT_API}/transactions/personal`)
+ .then(response => {
+ context.commit('setUserOrders', response.data);
+ resolve(response);
+ })
+ .catch(error => reject(error));
+ });
}
},
modules: {
diff --git a/client/src/views/Orders.vue b/client/src/views/Orders.vue
new file mode 100644
index 0000000..9eb121e
--- /dev/null
+++ b/client/src/views/Orders.vue
@@ -0,0 +1,49 @@
+<template>
+ <div class="row mt-5 d-flex justify-content-center">
+ <div class="col-md-6">
+ <div v-if="orders">
+ <div v-for="order in orders" :key="order._id" class="card bg-dark text-white mb-3">
+ <div class="card-header">Order made: {{ getDate(order) }}</div>
+ <div class="card-body">
+ <ul class="list-group">
+ <li v-for="item in order.items" :key="item.productId"
+ class="list-group-item d-flex justify-content-between align-items-start">
+ <div class="me-auto" v-text="item.name"></div>
+ <span class="badge bg-dark rounded-circle" v-text="item.quantity"></span>
+ </li>
+ </ul>
+ </div>
+ <div class="card-footer">
+ Delivering to: {{ getShipping(order) }}
+ </div>
+ </div>
+ </div>
+ <div v-else class="card text-center fw-bold">
+ You currently have no orders.
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Orders',
+ mounted() {
+ this.$store.dispatch('pullUserOrders');
+ },
+ computed: {
+ orders() {
+ return this.$store.getters.getUserOrders;
+ }
+ },
+ methods: {
+ getDate(order) {
+ let dt = new Date(order.updatedAt);
+ return `${dt.getUTCDay()}.${dt.getUTCMonth()}.${dt.getUTCFullYear()}. ${dt.getUTCHours()}:${dt.getUTCMinutes()} UTC`;
+ },
+ getShipping(order) {
+ return Object.values(order.shipping.address).join(", ");
+ }
+ }
+}
+</script>