Ajout des nouveaux dossiers et fichiers, nettoyage des fichiers générés ensuite les nouveaux fichiers consiste à avoir la page de connexion et le dashboard
This commit is contained in:
235
client-connexion/src/components/NewLeaveRequestForm.jsx
Normal file
235
client-connexion/src/components/NewLeaveRequestForm.jsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './NewLeaveRequestForm.css';
|
||||
|
||||
export default function NewLeaveRequestForm({ startDate, endDate, onClose, availableLeaveCounters, userId }) {
|
||||
const [leaveType, setLeaveType] = useState('CP');
|
||||
const [formStartDate, setFormStartDate] = useState('');
|
||||
const [formEndDate, setFormEndDate] = useState('');
|
||||
const [comment, setComment] = useState('');
|
||||
const [numDays, setNumDays] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const formatLocalDateToYYYYMMDD = (dateObject) => {
|
||||
if (!dateObject) return '';
|
||||
const year = dateObject.getFullYear();
|
||||
const month = (dateObject.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = dateObject.getDate().toString().padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (startDate) {
|
||||
setFormStartDate(formatLocalDateToYYYYMMDD(startDate));
|
||||
}
|
||||
if (endDate) {
|
||||
setFormEndDate(formatLocalDateToYYYYMMDD(endDate));
|
||||
} else if (startDate) {
|
||||
setFormEndDate(formatLocalDateToYYYYMMDD(startDate));
|
||||
}
|
||||
}, [startDate, endDate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (formStartDate && formEndDate) {
|
||||
const start = new Date(formStartDate);
|
||||
const end = new Date(formEndDate);
|
||||
|
||||
if (end < start) {
|
||||
setError("La date de fin ne peut pas être antérieure à la date de début.");
|
||||
setNumDays('');
|
||||
return;
|
||||
}
|
||||
|
||||
let totalWorkingDays = 0;
|
||||
let currentDate = new Date(start);
|
||||
|
||||
while (currentDate <= end) {
|
||||
const dayOfWeek = currentDate.getDay();
|
||||
if (dayOfWeek !== 0 && dayOfWeek !== 6) {
|
||||
totalWorkingDays++;
|
||||
}
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
setNumDays(totalWorkingDays);
|
||||
setError('');
|
||||
} else {
|
||||
setNumDays('');
|
||||
setError('');
|
||||
}
|
||||
}, [formStartDate, formEndDate]);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
if (!formStartDate || !formEndDate) {
|
||||
setError("Veuillez sélectionner les dates de début et de fin.");
|
||||
return;
|
||||
}
|
||||
|
||||
const start = new Date(formStartDate);
|
||||
const end = new Date(formEndDate);
|
||||
if (end < start) {
|
||||
setError("La date de fin ne peut pas être antérieure à la date de début.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(numDays) || numDays <= 0) {
|
||||
setError("Le nombre de jours demandés doit être un nombre positif.");
|
||||
return;
|
||||
}
|
||||
|
||||
let hasEnoughDays = true;
|
||||
let errorMessage = '';
|
||||
|
||||
switch (leaveType) {
|
||||
case 'CP':
|
||||
if (numDays > availableLeaveCounters.availableCP) {
|
||||
hasEnoughDays = false;
|
||||
errorMessage = `Vous n'avez pas assez de jours de Congé Payé. Il vous reste ${availableLeaveCounters.availableCP} jours.`;
|
||||
}
|
||||
break;
|
||||
case 'RTT':
|
||||
if (numDays > availableLeaveCounters.availableRTT) {
|
||||
hasEnoughDays = false;
|
||||
errorMessage = `Vous n'avez pas assez de jours de RTT. Il vous reste ${availableLeaveCounters.availableRTT} jours.`;
|
||||
}
|
||||
break;
|
||||
case 'ABS':
|
||||
if (numDays > availableLeaveCounters.availableABS) {
|
||||
hasEnoughDays = false;
|
||||
errorMessage = `Vous n'avez pas assez de jours d'Absence (Maladie). Il vous reste ${availableLeaveCounters.availableABS} jours.`;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
errorMessage = "Type de congé inconnu.";
|
||||
hasEnoughDays = false;
|
||||
}
|
||||
|
||||
if (!hasEnoughDays) {
|
||||
setError(errorMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const payload = {
|
||||
EmployeeId: userId,
|
||||
TypeConge: leaveType,
|
||||
DateDebut: formStartDate,
|
||||
DateFin: formEndDate,
|
||||
Commentaire: comment,
|
||||
NumDays: numDays
|
||||
};
|
||||
|
||||
console.log("Payload envoyé au backend :", payload);
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost/GestionDemandeCongeV1/api/submitLeaveRequest.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
const text = await response.text();
|
||||
console.log('Réponse brute du serveur :', text);
|
||||
|
||||
try {
|
||||
const data = JSON.parse(text);
|
||||
|
||||
if (data.success) {
|
||||
alert('Demande de congé soumise avec succès et en attente de validation par le manager !');
|
||||
setLeaveType('CP');
|
||||
setFormStartDate('');
|
||||
setFormEndDate('');
|
||||
setComment('');
|
||||
setNumDays('');
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
} else {
|
||||
setError(data.message || "Erreur lors de la soumission de la demande.");
|
||||
}
|
||||
|
||||
} catch (jsonError) {
|
||||
console.error("Réponse invalide (pas du JSON) :", text);
|
||||
setError("Réponse du serveur invalide. Consulte la console pour plus de détails.");
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur réseau ou du serveur lors de la soumission:', error);
|
||||
setError("Erreur de connexion au serveur. Veuillez vérifier que le serveur est démarré.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="new-leave-request-form">
|
||||
<button className="close-button" onClick={onClose}>×</button>
|
||||
<h2 className="form-title">Nouvelle demande de congé</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="leaveType">Type de congés</label>
|
||||
<select
|
||||
id="leaveType"
|
||||
value={leaveType}
|
||||
onChange={(e) => setLeaveType(e.target.value)}
|
||||
>
|
||||
<option value="CP">CP</option>
|
||||
<option value="RTT">RTT</option>
|
||||
<option value="ABS">ABS</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group date-group">
|
||||
<div>
|
||||
<label htmlFor="formStartDate">Date de début</label>
|
||||
<input
|
||||
type="date"
|
||||
id="formStartDate"
|
||||
value={formStartDate}
|
||||
onChange={(e) => setFormStartDate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="formEndDate">Date de fin</label>
|
||||
<input
|
||||
type="date"
|
||||
id="formEndDate"
|
||||
value={formEndDate}
|
||||
onChange={(e) => setFormEndDate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="comment">Commentaire</label>
|
||||
<textarea
|
||||
id="comment"
|
||||
rows="4"
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group num-days-group">
|
||||
<label htmlFor="numDays">Nombre de jours demandés</label>
|
||||
<input
|
||||
type="number"
|
||||
id="numDays"
|
||||
value={numDays}
|
||||
readOnly
|
||||
disabled={!formStartDate || !formEndDate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="validate-button">Valider</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user