Added users name to trainer order view

client/src/components/TrainerOrderPopup.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="popup" @click="$emit('closePopup')">
         <div class="Order" @click.stop v-show="!showNewTimes">
-            <div class="trainer">
-                {{ order.trainer.first_name }} {{ order.trainer.last_name }}
-            </div>
             <div class="center">
-                {{ order.trainer.center_name }}
+                {{ order.center_name }}
+            </div>
+            <div class="user">
+                {{ order.user.firstname }} {{ order.user.lastname }}
             </div>
             <div class="date">
                 {{ formatDate(order.startDate) }}
@@ -38,7 +38,7 @@ import dayjs from 'dayjs';
 import LocalizedFormat from "dayjs/plugin/localizedFormat"
 import utc from "dayjs/plugin/utc"
 import { } from "dayjs/locale/da";
-import type { Order } from '@/interfaces/order';
+import type { TrainerOrder as Order } from '@/interfaces/order';
 
 dayjs.extend(LocalizedFormat);
 dayjs.extend(utc);
@@ -137,11 +137,11 @@ export default {
     position: relative;
 }
 
-.trainer {
+.center {
     font-size: 1.8em;
 }
 
-.center {
+.user {
     opacity: 0.8;
     font-size: 1.25em;
 }

client/src/interfaces/order.ts

@@ -8,4 +8,23 @@ export interface Order {
     status: string
     price: number
     trainer: Trainer
+}
+
+export interface OrderUser {
+    firstname: string
+    lastname: string
+}
+
+export type OrderObjectStatus = "Successful" | "Processing" | "CancelledByTrainer" | "CancelledByUser";
+
+export interface TrainerOrder {
+    id: number
+    user: OrderUser
+    startDate: string
+    endDate: string
+    status: OrderObjectStatus
+    price: number
+    created_at: Date
+    center_id: number
+    center_name: string
 }

client/src/views/trainer/TrainerOrdersView.vue

@@ -5,6 +5,9 @@
             <div class="time">
                 {{ formatDate(order.startDate) }} {{ formatTime(order.startDate) }} - {{ formatTime(order.endDate) }}
             </div>
+            <div class="user">
+                {{ order.user.firstname }} {{ order.user.lastname }}
+            </div>
             <div class="status">
                 {{ formatStatus(order.status) }}
             </div>
@@ -16,7 +19,7 @@
 
 <script lang="ts">
 import TrainerOrderPopup from '@/components/TrainerOrderPopup.vue'
-import type { Order } from '@/interfaces/order';
+import type { TrainerOrder as Order } from '@/interfaces/order';
 import dayjs from 'dayjs';
 import LocalizedFormat from "dayjs/plugin/localizedFormat"
 import utc from "dayjs/plugin/utc"
@@ -118,16 +121,10 @@ export default {
     border: 1px solid black;
 }
 
-.trainer {
-    font-size: 1.8em;
-}
-
-.center {
+.user {
     opacity: 0.8;
-    font-size: 1.25em;
 }
 
-
 .order.cancelled .status {
     color: lightcoral;
 }

server/src/routes/trainer/order.ts

@@ -17,6 +17,23 @@ interface CancelOrderLookup {
     start_time: Date
 }
 
+interface OrderUser {
+    firstname: string
+    lastname: string
+}
+
+interface TrainerOrderObject {
+    id: number
+    user: OrderUser
+    startDate: string
+    endDate: string
+    status: OrderObjectStatus
+    price: number
+    created_at: Date
+    center_id: number
+    center_name: string
+}
+
 router.get("/trainer/order", TrainerAuth, async (req: AuthedRequest, res: Response) => {
     try {
         const databaseResult = await client.query(`
@@ -28,19 +45,18 @@ router.get("/trainer/order", TrainerAuth, async (req: AuthedRequest, res: Respon
                 payment_intents.status as payment_intent_status,
                 start_time,
                 end_time,
+                trainers.center_id,
+                centers.name as center_name,
                 json_build_object(
-                    'id',trainers.id,
-                    'first_name',users.first_name,
-                    'last_name',users.last_name,
-                    'center_id',trainers.center_id,
-                    'center_name',centers.name
-                ) as trainer
+                    'firstname',users.first_name,
+                    'lastname',users.last_name
+                ) as user
             FROM orders
             LEFT JOIN reserved_timeslots ON reserved_timeslots.id = orders.timeslot_id
             LEFT JOIN payment_intents ON payment_intents.id = orders.payment_intent
             LEFT JOIN trainers ON trainers.id = reserved_timeslots.trainer_id
             LEFT JOIN centers on trainers.center_id = centers.id
-            LEFT JOIN users on users.id = trainers.user_id
+            LEFT JOIN users on users.id = orders.user_id
             WHERE
                 trainers.user_id = $1
                 AND (
@@ -54,7 +70,7 @@ router.get("/trainer/order", TrainerAuth, async (req: AuthedRequest, res: Respon
             req.user?.userId
         ]);
 
-        const orders: OrderObject[] = databaseResult.rows.map((order): OrderObject => {
+        const orders: TrainerOrderObject[] = databaseResult.rows.map((order): TrainerOrderObject => {
             const paymentStatus = order.payment_intent_status === "Successful" ? "Successful" : "Processing"
 
             let status: OrderObjectStatus = paymentStatus;
@@ -65,7 +81,9 @@ router.get("/trainer/order", TrainerAuth, async (req: AuthedRequest, res: Respon
 
             return {
                 id: order.id,
-                trainer: order.trainer,
+                user: order.user,
+                center_id: order.center_id,
+                center_name: order.center_name,
                 startDate: dayjs(order.start_time).format('YYYY-MM-DDTHH:mm:ss[Z]'),
                 endDate: dayjs(order.end_time).format('YYYY-MM-DDTHH:mm:ss[Z]'),
                 status: status,