apply prettier to appointement
This commit is contained in:
parent
3de1ec71ff
commit
549028b1d0
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user