diff options
| -rw-r--r-- | client/src/App.vue | 3 | ||||
| -rw-r--r-- | client/src/router/index.js | 9 | ||||
| -rw-r--r-- | client/src/store/index.js | 19 | ||||
| -rw-r--r-- | client/src/views/Orders.vue | 49 |
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> |