Added Orders page for users to see their purchases.

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>