MyINPulse/front/MyINPulse-front/src/components/AdminAppointments.vue

<template>
    <div>
        <h2>Ajouter / Modifier un Rapport pour un Rendez-vous</h2>

        <form @submit.prevent="submitReport">
            <div>
                <label for="appointmentId">ID du rendez-vous :</label>
                <div style="display: flex; align-items: center; gap: 0.5rem">
                    <button type="button" @click="decrementId">-</button>
                    <input
                        id="appointmentId"
                        v-model.number="appointmentId"
                        type="number"
                        min="1"
                        style="width: 60px; text-align: center"
                    />
                    <button type="button" @click="incrementId">+</button>
                </div>
            </div>

            <div>
                <label for="reportContent">Contenu du rapport :</label>
                <textarea
                    id="reportContent"
                    v-model="reportContent"
                    required
                ></textarea>
            </div>

            <button type="submit">
                {{ isUpdate ? "Mettre à jour" : "Créer" }} le rapport
            </button>
        </form>

        <p v-if="responseMessage">{{ responseMessage }}</p>
    </div>
</template>

<script>
import {
    createAppointmentReport,
    updateAppointmentReport,
} from "@/services/Apis/Admin";

export default {
    name: "AdminAppointmentsComponent",
    data() {
        return {
            appointmentId: 1,
            reportContent: "",
            responseMessage: "",
            isUpdate: false,
        };
    },
    watch: {
        appointmentId(newVal) {
            if (newVal) {
                this.isUpdate = true;
            }
        },
    },
    methods: {
        incrementId() {
            this.appointmentId++;
        },
        decrementId() {
            if (this.appointmentId > 1) {
                this.appointmentId--;
            }
        },
        submitReport() {
            const reportData = { content: this.reportContent };
            const onSuccess = (response) => {
                if (response.status === 201 || response.status === 200) {
                    this.responseMessage =
                        "Rapport " +
                        (this.isUpdate ? "mis à jour" : "créé") +
                        " avec succès.";
                }
            };
            const onError = (error) => {
                console.error(
                    "Erreur lors de l'envoi du rapport :",
                    error.response || error.message
                );
                if (error.response && error.response.status === 400) {
                    this.responseMessage =
                        "Requête invalide. Vérifiez les informations.";
                } else if (error.response && error.response.status === 401) {
                    this.responseMessage =
                        "Vous n'êtes pas autorisé à effectuer cette action.";
                } else {
                    this.responseMessage =
                        "Une erreur est survenue. Veuillez réessayer.";
                }
            };

            if (this.isUpdate) {
                updateAppointmentReport(
                    this.appointmentId,
                    reportData,
                    onSuccess,
                    onError
                );
            } else {
                createAppointmentReport(
                    this.appointmentId,
                    reportData,
                    onSuccess,
                    onError
                );
            }
        },
    },
};
</script>

<style scoped>
/* Centrer le formulaire */
div {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Titre */
h2 {
    text-align: center;
    color: #333;
    margin-bottom: 1rem;
}

/* Formulaire */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Boutons */
button {
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Input et Textarea */
input[type="number"],
textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

textarea {
    height: 120px;
    resize: none;
}

/* Message de réponse */
p {
    text-align: center;
    font-weight: bold;
    color: green;
}

/* Boutons d'incrémentation/décrémentation */
div[style*="display: flex"] button {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
}

div[style*="display: flex"] button:hover {
    background-color: #5a6268;
}
</style>