aboutsummaryrefslogtreecommitdiff
path: root/client/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/views')
-rw-r--r--client/src/views/Orders.vue49
1 files changed, 49 insertions, 0 deletions
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>