91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<template>
|
|
<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>
|
|
|
|
<p v-else>Aucun rendez-vous trouvé.</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
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: AppointmentResponse) => new Appointment(item)
|
|
);
|
|
},
|
|
(error) => {
|
|
console.error(
|
|
"Erreur lors de la récupération des rendez-vous :",
|
|
error
|
|
);
|
|
}
|
|
);
|
|
}
|
|
|
|
onMounted(() => {
|
|
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);
|
|
}
|
|
|
|
h2 {
|
|
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;
|
|
}
|
|
</style>
|