apply prettier to adminappointment
This commit is contained in:
parent
2e9d841709
commit
829baac85e
@ -1,174 +1,192 @@
|
||||
<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>
|
||||
<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,
|
||||
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;
|
||||
}
|
||||
name: "AdminAppointmentsComponent",
|
||||
data() {
|
||||
return {
|
||||
appointmentId: 1,
|
||||
reportContent: "",
|
||||
responseMessage: "",
|
||||
isUpdate: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
incrementId() {
|
||||
this.appointmentId++;
|
||||
watch: {
|
||||
appointmentId(newVal) {
|
||||
if (newVal) {
|
||||
this.isUpdate = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
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.";
|
||||
}
|
||||
};
|
||||
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);
|
||||
}
|
||||
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);
|
||||
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;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Formulaire */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 120px;
|
||||
resize: none;
|
||||
height: 120px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* Message de réponse */
|
||||
p {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: green;
|
||||
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;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
div[style*="display: flex"] button:hover {
|
||||
background-color: #5a6268;
|
||||
background-color: #5a6268;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user