mirror of
https://github.com/donpat1to/Schichtenplaner.git
synced 2025-12-01 15:05:45 +01:00
updated validation handling together with shiftplan
This commit is contained in:
@@ -3,6 +3,8 @@ import { employeeService } from '../../../services/employeeService';
|
||||
import { shiftPlanService } from '../../../services/shiftPlanService';
|
||||
import { Employee, EmployeeAvailability } from '../../../models/Employee';
|
||||
import { ShiftPlan, TimeSlot, Shift } from '../../../models/ShiftPlan';
|
||||
import { useNotification } from '../../../contexts/NotificationContext';
|
||||
import { useBackendValidation } from '../../../hooks/useBackendValidation';
|
||||
|
||||
interface AvailabilityManagerProps {
|
||||
employee: Employee;
|
||||
@@ -36,7 +38,8 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
const [selectedPlan, setSelectedPlan] = useState<ShiftPlan | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const { showNotification } = useNotification();
|
||||
const { executeWithValidation, isSubmitting } = useBackendValidation();
|
||||
|
||||
const daysOfWeek = [
|
||||
{ id: 1, name: 'Montag' },
|
||||
@@ -81,7 +84,11 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
|
||||
} catch (err: any) {
|
||||
console.error('❌ FEHLER BEIM LADEN DER INITIALDATEN:', err);
|
||||
setError('Daten konnten nicht geladen werden: ' + (err.message || 'Unbekannter Fehler'));
|
||||
showNotification({
|
||||
type: 'error',
|
||||
title: 'Fehler beim Laden',
|
||||
message: 'Daten konnten nicht geladen werden: ' + (err.message || 'Unbekannter Fehler')
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
@@ -134,9 +141,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
);
|
||||
if (invalidAvailabilities.length > 0) {
|
||||
console.warn('⚠️ UNGÜLTIGE VERFÜGBARKEITEN (OHNE SHIFT-ID):', invalidAvailabilities.length);
|
||||
invalidAvailabilities.forEach(invalid => {
|
||||
console.warn(' - Ungültiger Eintrag:', invalid);
|
||||
});
|
||||
}
|
||||
|
||||
// Transformiere die Daten
|
||||
@@ -149,20 +153,20 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
|
||||
// Debug: Zeige vorhandene Präferenzen
|
||||
if (planAvailabilities.length > 0) {
|
||||
console.log('🎯 VORHANDENE PRÄFERENZEN:');
|
||||
planAvailabilities.forEach(avail => {
|
||||
const shift = plan.shifts?.find(s => s.id === avail.shiftId);
|
||||
console.log(` - Shift: ${avail.shiftId} (Day: ${shift?.dayOfWeek}), Level: ${avail.preferenceLevel}`);
|
||||
});
|
||||
console.log('🎯 VORHANDENE PRÄFERENZEN:', planAvailabilities.length);
|
||||
}
|
||||
} catch (availError) {
|
||||
console.error('❌ FEHLER BEIM LADEN DER VERFÜGBARKEITEN:', availError);
|
||||
setAvailabilities([]);
|
||||
}
|
||||
} catch (availError) {
|
||||
console.error('❌ FEHLER BEIM LADEN DER VERFÜGBARKEITEN:', availError);
|
||||
setAvailabilities([]);
|
||||
}
|
||||
|
||||
} catch (err: any) {
|
||||
console.error('❌ FEHLER BEIM LADEN DES SCHICHTPLANS:', err);
|
||||
setError('Schichtplan konnte nicht geladen werden: ' + (err.message || 'Unbekannter Fehler'));
|
||||
showNotification({
|
||||
type: 'error',
|
||||
title: 'Fehler beim Laden',
|
||||
message: 'Schichtplan konnte nicht geladen werden: ' + (err.message || 'Unbekannter Fehler')
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -316,26 +320,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
return (a.startTime || '').localeCompare(b.startTime || '');
|
||||
});
|
||||
|
||||
// Validation: Check if shifts are correctly placed
|
||||
const validationErrors: string[] = [];
|
||||
|
||||
// Check for missing time slots
|
||||
const usedTimeSlotIds = new Set(selectedPlan?.shifts?.map(s => s.timeSlotId) || []);
|
||||
const availableTimeSlotIds = new Set(selectedPlan?.timeSlots?.map(ts => ts.id) || []);
|
||||
|
||||
usedTimeSlotIds.forEach(timeSlotId => {
|
||||
if (!availableTimeSlotIds.has(timeSlotId)) {
|
||||
validationErrors.push(`Zeitslot ${timeSlotId} wird verwendet, existiert aber nicht in timeSlots`);
|
||||
}
|
||||
});
|
||||
|
||||
// Check for shifts with invalid day numbers
|
||||
selectedPlan?.shifts?.forEach(shift => {
|
||||
if (shift.dayOfWeek < 1 || shift.dayOfWeek > 7) {
|
||||
validationErrors.push(`Shift ${shift.id} hat ungültigen Wochentag: ${shift.dayOfWeek}`);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
marginBottom: '30px',
|
||||
@@ -355,23 +339,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Validation Warnings */}
|
||||
{validationErrors.length > 0 && (
|
||||
<div style={{
|
||||
backgroundColor: '#fff3cd',
|
||||
border: '1px solid #ffeaa7',
|
||||
padding: '15px',
|
||||
margin: '10px'
|
||||
}}>
|
||||
<h4 style={{ margin: '0 0 10px 0', color: '#856404' }}>⚠️ Validierungswarnungen:</h4>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px', fontSize: '12px' }}>
|
||||
{validationErrors.map((error, index) => (
|
||||
<li key={index}>{error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{
|
||||
width: '100%',
|
||||
@@ -421,9 +388,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
<div style={{ fontSize: '14px', color: '#666' }}>
|
||||
{formatTime(timeSlot.startTime)} - {formatTime(timeSlot.endTime)}
|
||||
</div>
|
||||
<div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
|
||||
ID: {timeSlot.id.substring(0, 8)}...
|
||||
</div>
|
||||
</td>
|
||||
{days.map(weekday => {
|
||||
const shift = timeSlot.shiftsByDay[weekday.id];
|
||||
@@ -443,9 +407,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Validation: Check if shift has correct timeSlotId and dayOfWeek
|
||||
const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
|
||||
|
||||
const currentLevel = getAvailabilityForShift(shift.id);
|
||||
const levelConfig = availabilityLevels.find(l => l.level === currentLevel);
|
||||
|
||||
@@ -454,31 +415,8 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
padding: '12px 16px',
|
||||
border: '1px solid #dee2e6',
|
||||
textAlign: 'center',
|
||||
backgroundColor: !isValidShift ? '#fff3cd' : (levelConfig?.bgColor || 'white'),
|
||||
position: 'relative'
|
||||
backgroundColor: levelConfig?.bgColor || 'white'
|
||||
}}>
|
||||
{/* Validation indicator */}
|
||||
{!isValidShift && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '2px',
|
||||
right: '2px',
|
||||
backgroundColor: '#f39c12',
|
||||
color: 'white',
|
||||
borderRadius: '50%',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
fontSize: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
|
||||
>
|
||||
⚠️
|
||||
</div>
|
||||
)}
|
||||
|
||||
<select
|
||||
value={currentLevel}
|
||||
onChange={(e) => {
|
||||
@@ -487,10 +425,10 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: `2px solid ${!isValidShift ? '#f39c12' : (levelConfig?.color || '#ddd')}`,
|
||||
border: `2px solid ${levelConfig?.color || '#ddd'}`,
|
||||
borderRadius: '6px',
|
||||
backgroundColor: !isValidShift ? '#fff3cd' : (levelConfig?.bgColor || 'white'),
|
||||
color: !isValidShift ? '#856404' : (levelConfig?.color || '#333'),
|
||||
backgroundColor: levelConfig?.bgColor || 'white',
|
||||
color: levelConfig?.color || '#333',
|
||||
fontWeight: 'bold',
|
||||
minWidth: '140px',
|
||||
cursor: 'pointer',
|
||||
@@ -511,23 +449,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Shift debug info */}
|
||||
<div style={{
|
||||
fontSize: '10px',
|
||||
color: '#666',
|
||||
marginTop: '4px',
|
||||
textAlign: 'left',
|
||||
fontFamily: 'monospace'
|
||||
}}>
|
||||
<div>Shift: {shift.id.substring(0, 6)}...</div>
|
||||
<div>Day: {shift.dayOfWeek}</div>
|
||||
{!isValidShift && (
|
||||
<div style={{ color: '#e74c3c', fontWeight: 'bold' }}>
|
||||
VALIDATION ERROR
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
@@ -556,63 +477,35 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
if (!selectedPlanId) {
|
||||
showNotification({
|
||||
type: 'error',
|
||||
title: 'Fehler',
|
||||
message: 'Bitte wählen Sie einen Schichtplan aus'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic frontend validation: Check if we have any availabilities to save
|
||||
const validAvailabilities = availabilities.filter(avail => {
|
||||
return avail.shiftId && selectedPlan?.shifts?.some(shift => shift.id === avail.shiftId);
|
||||
});
|
||||
|
||||
if (validAvailabilities.length === 0) {
|
||||
showNotification({
|
||||
type: 'error',
|
||||
title: 'Fehler',
|
||||
message: 'Keine gültigen Verfügbarkeiten zum Speichern gefunden'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Complex validation (contract type rules) is now handled by backend
|
||||
// We only do basic required field validation in frontend
|
||||
|
||||
await executeWithValidation(async () => {
|
||||
setSaving(true);
|
||||
setError('');
|
||||
|
||||
if (!selectedPlanId) {
|
||||
setError('Bitte wählen Sie einen Schichtplan aus');
|
||||
return;
|
||||
}
|
||||
|
||||
// Filter availabilities to only include those with actual shifts AND valid shiftIds
|
||||
const validAvailabilities = availabilities.filter(avail => {
|
||||
// Check if this shiftId exists and is valid
|
||||
if (!avail.shiftId) {
|
||||
console.warn('⚠️ Überspringe ungültige Verfügbarkeit ohne Shift-ID:', avail);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if this shiftId exists in the current plan
|
||||
return selectedPlan?.shifts?.some(shift => shift.id === avail.shiftId);
|
||||
});
|
||||
|
||||
console.log('💾 SPEICHERE VERFÜGBARKEITEN:', {
|
||||
total: availabilities.length,
|
||||
valid: validAvailabilities.length,
|
||||
invalid: availabilities.length - validAvailabilities.length
|
||||
});
|
||||
|
||||
if (validAvailabilities.length === 0) {
|
||||
setError('Keine gültigen Verfügbarkeiten zum Speichern gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Contract type validation
|
||||
const availableShifts = validAvailabilities.filter(avail =>
|
||||
avail.preferenceLevel === 1 || avail.preferenceLevel === 2
|
||||
).length;
|
||||
|
||||
let contractRequirement = 0;
|
||||
let contractTypeName = '';
|
||||
|
||||
if (employee.contractType === 'small') {
|
||||
contractRequirement = 2;
|
||||
contractTypeName = 'Kleiner Vertrag';
|
||||
} else if (employee.contractType === 'large') {
|
||||
contractRequirement = 3;
|
||||
contractTypeName = 'Großer Vertrag';
|
||||
}
|
||||
|
||||
if (contractRequirement > 0 && availableShifts < contractRequirement) {
|
||||
setError(
|
||||
`${contractTypeName} erfordert mindestens ${contractRequirement} verfügbare Shifts. ` +
|
||||
`Aktuell sind nur ${availableShifts} Shifts mit Verfügbarkeit "Bevorzugt" oder "Möglich" ausgewählt.`
|
||||
);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert to the format expected by the API - using shiftId directly
|
||||
const requestData = {
|
||||
planId: selectedPlanId,
|
||||
@@ -627,15 +520,16 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
await employeeService.updateAvailabilities(employee.id, requestData);
|
||||
console.log('✅ VERFÜGBARKEITEN ERFOLGREICH GESPEICHERT');
|
||||
|
||||
showNotification({
|
||||
type: 'success',
|
||||
title: 'Erfolg',
|
||||
message: 'Verfügbarkeiten wurden erfolgreich gespeichert'
|
||||
});
|
||||
|
||||
window.dispatchEvent(new CustomEvent('availabilitiesChanged'));
|
||||
|
||||
onSave();
|
||||
} catch (err: any) {
|
||||
console.error('❌ FEHLER BEIM SPEICHERN:', err);
|
||||
setError(err.message || 'Fehler beim Speichern der Verfügbarkeiten');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
@@ -658,11 +552,10 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
// Get full name for display
|
||||
const employeeFullName = `${employee.firstname} ${employee.lastname}`;
|
||||
|
||||
// Mininmum amount of shifts per contract type
|
||||
// Available shifts count for display only (not for validation)
|
||||
const availableShiftsCount = availabilities.filter(avail =>
|
||||
avail.preferenceLevel === 1 || avail.preferenceLevel === 2
|
||||
).length;
|
||||
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
@@ -694,26 +587,14 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
{employee.contractType && (
|
||||
<p style={{ margin: '5px 0 0 0', color: employee.contractType === 'small' ? '#f39c12' : '#27ae60' }}>
|
||||
<strong>Vertrag:</strong>
|
||||
{employee.contractType === 'small' ? ' Kleiner Vertrag (min. 2 verfügbare Shifts)' :
|
||||
employee.contractType === 'large' ? ' Großer Vertrag (min. 3 verfügbare Shifts)' :
|
||||
{employee.contractType === 'small' ? ' Kleiner Vertrag' :
|
||||
employee.contractType === 'large' ? ' Großer Vertrag' :
|
||||
' Flexibler Vertrag'}
|
||||
{/* Note: Contract validation is now handled by backend */}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div style={{
|
||||
backgroundColor: '#fee',
|
||||
border: '1px solid #f5c6cb',
|
||||
color: '#721c24',
|
||||
padding: '12px',
|
||||
borderRadius: '6px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<strong>Fehler:</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Availability Legend */}
|
||||
<div style={{
|
||||
marginBottom: '30px',
|
||||
@@ -774,7 +655,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
const newPlanId = e.target.value;
|
||||
console.log('🔄 PLAN WECHSELN ZU:', newPlanId);
|
||||
setSelectedPlanId(newPlanId);
|
||||
// Der useEffect wird automatisch ausgelöst
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
@@ -828,15 +708,15 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
}}>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
disabled={saving}
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
backgroundColor: '#95a5a6',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: saving ? 'not-allowed' : 'pointer',
|
||||
opacity: saving ? 0.6 : 1
|
||||
cursor: isSubmitting ? 'not-allowed' : 'pointer',
|
||||
opacity: isSubmitting ? 0.6 : 1
|
||||
}}
|
||||
>
|
||||
Abbrechen
|
||||
@@ -844,18 +724,18 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || shiftsCount === 0 || !selectedPlanId}
|
||||
disabled={isSubmitting || shiftsCount === 0 || !selectedPlanId}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
backgroundColor: saving ? '#bdc3c7' : (shiftsCount === 0 || !selectedPlanId ? '#95a5a6' : '#3498db'),
|
||||
backgroundColor: isSubmitting ? '#bdc3c7' : (shiftsCount === 0 || !selectedPlanId ? '#95a5a6' : '#3498db'),
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: (saving || shiftsCount === 0 || !selectedPlanId) ? 'not-allowed' : 'pointer',
|
||||
cursor: (isSubmitting || shiftsCount === 0 || !selectedPlanId) ? 'not-allowed' : 'pointer',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
{saving ? '⏳ Wird gespeichert...' : `Verfügbarkeiten speichern (${availableShiftsCount})`}
|
||||
{isSubmitting ? '⏳ Wird gespeichert...' : `Verfügbarkeiten speichern (${availableShiftsCount})`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
|
||||
import { ROLE_CONFIG, EMPLOYEE_TYPE_CONFIG } from '../../../models/defaults/employeeDefaults';
|
||||
import { Employee } from '../../../models/Employee';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { useNotification } from '../../../contexts/NotificationContext';
|
||||
|
||||
interface EmployeeListProps {
|
||||
employees: Employee[];
|
||||
@@ -28,6 +29,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
|
||||
const [sortField, setSortField] = useState<SortField>('name');
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
|
||||
const { user: currentUser, hasRole } = useAuth();
|
||||
const { showNotification, confirmDialog } = useNotification();
|
||||
|
||||
// Filter employees based on active/inactive and search term
|
||||
const filteredEmployees = employees.filter(employee => {
|
||||
@@ -176,6 +178,31 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
|
||||
return 'MITARBEITER';
|
||||
};
|
||||
|
||||
const handleDeleteClick = async (employee: Employee) => {
|
||||
const confirmed = await confirmDialog({
|
||||
title: 'Mitarbeiter löschen',
|
||||
message: `Sind Sie sicher, dass Sie ${employee.firstname} ${employee.lastname} löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.`,
|
||||
confirmText: 'Löschen',
|
||||
cancelText: 'Abbrechen',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
if (confirmed) {
|
||||
try {
|
||||
onDelete(employee);
|
||||
showNotification({
|
||||
type: 'success',
|
||||
title: 'Erfolg',
|
||||
message: `${employee.firstname} ${employee.lastname} wurde erfolgreich gelöscht.`
|
||||
});
|
||||
} catch (error: any) {
|
||||
// Error will be handled by parent component through useBackendValidation
|
||||
// We just need to re-throw it so the parent can catch it
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (employees.length === 0) {
|
||||
return (
|
||||
<div style={{
|
||||
@@ -468,7 +495,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
|
||||
{/* Löschen Button */}
|
||||
{canDelete && (
|
||||
<button
|
||||
onClick={() => onDelete(employee)}
|
||||
onClick={() => handleDeleteClick(employee)}
|
||||
style={{
|
||||
padding: '6px 8px',
|
||||
backgroundColor: '#e74c3c',
|
||||
|
||||
Reference in New Issue
Block a user