From 35f314498f6ab4414879de230730f13d875a0e22 Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-QNVUG8K.>
Date: Thu, 1 May 2025 16:05:46 +0200
Subject: [PATCH] list des upcoming appointments prettier

---
 .../src/components/GetAppointments.vue        | 105 ++++++++++--------
 1 file changed, 60 insertions(+), 45 deletions(-)

diff --git a/front/MyINPulse-front/src/components/GetAppointments.vue b/front/MyINPulse-front/src/components/GetAppointments.vue
index 7d73432..bc84e0d 100644
--- a/front/MyINPulse-front/src/components/GetAppointments.vue
+++ b/front/MyINPulse-front/src/components/GetAppointments.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="appointment-list">
-    <h2>Liste des rendez-vous</h2>
+    <div class="appointment-list">
+        <h2>Liste des rendez-vous</h2>
+        <h3>de {{ store.user.username }}</h3>
+        <ul v-if="appointments.length">
+            <li v-for="appt in appointments" :key="appt.idAppointment">
+                <strong>Sujet :</strong> {{ appt.appointmentSubject }}<br />
+                <strong>Date :</strong> {{ appt.appointmentDate }}<br />
+                <strong>Heure :</strong> {{ appt.appointmentTime }}<br />
+                <strong>Durée :</strong> {{ appt.appointmentDuration }}<br />
+                <strong>Lieu :</strong> {{ appt.appointmentPlace }}
+                <hr />
+            </li>
+        </ul>
 
-    <ul v-if="appointments.length">
-      <li v-for="appt in appointments" :key="appt.idAppointment">
-        <strong>Sujet :</strong> {{ appt.appointmentSubject }}<br />
-        <strong>Date :</strong> {{ appt.appointmentDate }}<br />
-        <strong>Heure :</strong> {{ appt.appointmentTime }}<br />
-        <strong>Durée :</strong> {{ appt.appointmentDuration }}<br />
-        <strong>Lieu :</strong> {{ appt.appointmentPlace }}
-        <hr />
-      </li>
-    </ul>
-
-    <p v-else>Aucun rendez-vous trouvé.</p>
-  </div>
+        <p v-else>Aucun rendez-vous trouvé.</p>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -23,53 +23,68 @@ import { callApi } from "@/services/api";
 import Appointment from "@/ApiClasses/Appointment";
 import { store } from "@/main.ts";
 
+// Define the interface for the API response
+interface AppointmentResponse {
+    idAppointment: number;
+    appointmentSubject: string;
+    appointmentDate: string;
+    appointmentTime: string;
+    appointmentDuration: string;
+    appointmentPlace: string;
+}
+
 const appointments = ref<Appointment[]>([]);
 
 function loadAppointments() {
-  if (!store.user) {
-    console.error("L'utilisateur n'est pas connecté ou les données utilisateur ne sont pas disponibles.");
-    return;
-  }
-  console.log("username :", store.user.username);
-  console.log("token  :", store.user.token);
-  callApi(
-    "/admin/appointments/upcoming",
-    (response) => {
-      appointments.value = response.data.map(
-        (item: any) => new Appointment(item)
-      );
-    },
-    (error) => {
-      console.error("Erreur lors de la récupération des rendez-vous :", error);
+    if (!store.user) {
+        console.error(
+            "L'utilisateur n'est pas connecté ou les données utilisateur ne sont pas disponibles."
+        );
+        return;
     }
-  );
+    //console.log("username :", store.user.username);
+    //console.log("token  :", store.user.token);
+    callApi(
+        "/admin/appointments/upcoming",
+        (response) => {
+            appointments.value = response.data.map(
+                (item: AppointmentResponse) => new Appointment(item)
+            );
+        },
+        (error) => {
+            console.error(
+                "Erreur lors de la récupération des rendez-vous :",
+                error
+            );
+        }
+    );
 }
 
 onMounted(() => {
-  loadAppointments();
+    loadAppointments();
 });
 </script>
 
 <style scoped>
 .appointment-list {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  background: #fdfdfd;
-  border-radius: 10px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #fdfdfd;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }
 
 h2 {
-  font-size: 1.8rem;
-  margin-bottom: 20px;
-  color: #333;
-  border-bottom: 2px solid #ddd;
-  padding-bottom: 10px;
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    color: #333;
+    border-bottom: 2px solid #ddd;
+    padding-bottom: 10px;
 }
 
 li {
-  margin-bottom: 15px;
-  line-height: 1.6;
+    margin-bottom: 15px;
+    line-height: 1.6;
 }
 </style>