apply prettier to appointement
All checks were successful
Format / formatting (push) Successful in 5s
Build / build (push) Successful in 42s
CI / build (push) Successful in 13s
Format / formatting (pull_request) Successful in 6s

This commit is contained in:
root 2025-04-27 21:58:32 +02:00
parent 3de1ec71ff
commit 549028b1d0

View File

@ -1,170 +1,178 @@
<template> <template>
<div> <div>
<h2>Ajouter / Modifier un Rapport pour un Rendez-vous</h2> <h2>Ajouter / Modifier un Rapport pour un Rendez-vous</h2>
<form @submit.prevent="submitReport"> <form @submit.prevent="submitReport">
<div> <div>
<label for="appointmentId">ID du rendez-vous :</label> <label for="appointmentId">ID du rendez-vous :</label>
<div style="display: flex; align-items: center; gap: 0.5rem;"> <div style="display: flex; align-items: center; gap: 0.5rem">
<button type="button" @click="decrementId">-</button> <button type="button" @click="decrementId">-</button>
<input <input
id="appointmentId" id="appointmentId"
v-model.number="appointmentId" v-model.number="appointmentId"
type="number" type="number"
min="1" min="1"
style="width: 60px; text-align: center;" style="width: 60px; text-align: center"
/> />
<button type="button" @click="incrementId">+</button> <button type="button" @click="incrementId">+</button>
</div> </div>
</div> </div>
<div> <div>
<label for="reportContent">Contenu du rapport :</label> <label for="reportContent">Contenu du rapport :</label>
<textarea <textarea
id="reportContent" id="reportContent"
v-model="reportContent" v-model="reportContent"
required required
></textarea> ></textarea>
</div> </div>
<button type="submit">{{ isUpdate ? "Mettre à jour" : "Créer" }} le rapport</button> <button type="submit">
</form> {{ isUpdate ? "Mettre à jour" : "Créer" }} le rapport
</button>
<p v-if="responseMessage">{{ responseMessage }}</p> </form>
<p v-if="responseMessage">{{ responseMessage }}</p>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "AdminAppointmentsComponent", name: "AdminAppointmentsComponent",
data() { data() {
return { return {
appointmentId: 1, appointmentId: 1,
reportContent: "", reportContent: "",
responseMessage: "", responseMessage: "",
isUpdate: false, isUpdate: false,
}; };
},
watch: {
appointmentId(newVal) {
if (newVal) {
this.isUpdate = true;
}
}, },
}, watch: {
methods: { appointmentId(newVal) {
incrementId() { if (newVal) {
this.appointmentId++; this.isUpdate = true;
}
},
}, },
decrementId() { methods: {
if (this.appointmentId > 1) { incrementId() {
this.appointmentId--; this.appointmentId++;
} },
}, decrementId() {
async submitReport() { if (this.appointmentId > 1) {
const reportData = { this.appointmentId--;
reportContent: this.reportContent, }
}; },
async submitReport() {
const reportData = {
reportContent: this.reportContent,
};
const url = `/admin/appointments/report/${this.appointmentId}`; const url = `/admin/appointments/report/${this.appointmentId}`;
const method = this.isUpdate ? "PUT" : "POST"; const method = this.isUpdate ? "PUT" : "POST";
try { try {
const response = await this.$axios({ const response = await this.$axios({
method, method,
url, url,
data: reportData, data: reportData,
}); });
if (response.status === 201 || response.status === 200) { if (response.status === 201 || response.status === 200) {
this.responseMessage = "Rapport " + (this.isUpdate ? "mis à jour" : "créé") + " avec succès."; this.responseMessage =
} "Rapport " +
} catch (error) { (this.isUpdate ? "mis à jour" : "créé") +
if (error.response && error.response.status === 400) { " avec succès.";
this.responseMessage = "Requête invalide. Vérifiez les informations."; }
} else if (error.response && error.response.status === 401) { } catch (error) {
this.responseMessage = "Vous n'êtes pas autorisé à effectuer cette action."; if (error.response && error.response.status === 400) {
} else { this.responseMessage =
this.responseMessage = "Une erreur est survenue. Veuillez réessayer."; "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.";
}
}
},
}, },
},
}; };
</script> </script>
<style scoped> <style scoped>
/* Centrer le formulaire */ /* Centrer le formulaire */
div { div {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 1rem;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
/* Titre */ /* Titre */
h2 { h2 {
text-align: center; text-align: center;
color: #333; color: #333;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
/* Formulaire */ /* Formulaire */
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
/* Boutons */ /* Boutons */
button { button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #007bff; background-color: #007bff;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover { button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
/* Input et Textarea */ /* Input et Textarea */
input[type="number"], input[type="number"],
textarea { textarea {
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
} }
textarea { textarea {
height: 120px; height: 120px;
resize: none; resize: none;
} }
/* Message de réponse */ /* Message de réponse */
p { p {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: green; color: green;
} }
/* Boutons d'incrémentation/décrémentation */ /* Boutons d'incrémentation/décrémentation */
div[style*="display: flex"] button { div[style*="display: flex"] button {
background-color: #6c757d; background-color: #6c757d;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 0.5rem; padding: 0.5rem;
} }
div[style*="display: flex"] button:hover { div[style*="display: flex"] button:hover {
background-color: #5a6268; background-color: #5a6268;
} }
</style> </style>