donpat1to/Schichtenplaner
1
0
Fork 0
mirror of https://github.com/donpat1to/Schichtenplaner.git synced 2025-12-01 06:55:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

updated validation handling together with shiftplan

Browse Source
This commit is contained in:
Patrick Mahnke-Hartmann
2025-10-31 00:27:50 +01:00
parent 0b35bb6dc6
commit 6cc8c91317
5 changed files with 410 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
frontend/src/pages/Employees/components/AvailabilityManager.tsx
View File

@@ -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>

29
frontend/src/pages/Employees/components/EmployeeList.tsx
View File

@@ -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',

116
frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx
View File

@@ -2,6 +2,8 @@
import React, { useState, useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { shiftPlanService } from '../../services/shiftPlanService';
import { useNotification } from '../../contexts/NotificationContext';
import { useBackendValidation } from '../../hooks/useBackendValidation';
import styles from './ShiftPlanCreate.module.css';
// Interface für Template Presets
@@ -14,6 +16,8 @@ interface TemplatePreset {
const ShiftPlanCreate: React.FC = () => {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { showNotification } = useNotification();
const { executeWithValidation, isSubmitting } = useBackendValidation();
const [planName, setPlanName] = useState('');
const [startDate, setStartDate] = useState('');
@@ -21,8 +25,6 @@ const ShiftPlanCreate: React.FC = () => {
const [selectedPreset, setSelectedPreset] = useState('');
const [presets, setPresets] = useState<TemplatePreset[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
useEffect(() => {
loadTemplatePresets();
@@ -42,36 +44,60 @@ const ShiftPlanCreate: React.FC = () => {
}
} catch (error) {
console.error('❌ Fehler beim Laden der Vorlagen-Presets:', error);
setError('Vorlagen-Presets konnten nicht geladen werden');
showNotification({
type: 'error',
title: 'Fehler beim Laden',
message: 'Vorlagen-Presets konnten nicht geladen werden'
});
} finally {
setLoading(false);
}
};
const handleCreate = async () => {
try {
// Validierung
if (!planName.trim()) {
setError('Bitte geben Sie einen Namen für den Schichtplan ein');
return;
}
if (!startDate) {
setError('Bitte wählen Sie ein Startdatum');
return;
}
if (!endDate) {
setError('Bitte wählen Sie ein Enddatum');
return;
}
if (new Date(endDate) < new Date(startDate)) {
setError('Das Enddatum muss nach dem Startdatum liegen');
return;
}
if (!selectedPreset) {
setError('Bitte wählen Sie eine Vorlage aus');
return;
}
// Basic frontend validation only
if (!planName.trim()) {
showNotification({
type: 'error',
title: 'Fehlende Angaben',
message: 'Bitte geben Sie einen Namen für den Schichtplan ein'
});
return;
}
if (!startDate) {
showNotification({
type: 'error',
title: 'Fehlende Angaben',
message: 'Bitte wählen Sie ein Startdatum'
});
return;
}
if (!endDate) {
showNotification({
type: 'error',
title: 'Fehlende Angaben',
message: 'Bitte wählen Sie ein Enddatum'
});
return;
}
if (new Date(endDate) < new Date(startDate)) {
showNotification({
type: 'error',
title: 'Ungültige Daten',
message: 'Das Enddatum muss nach dem Startdatum liegen'
});
return;
}
if (!selectedPreset) {
showNotification({
type: 'error',
title: 'Fehlende Angaben',
message: 'Bitte wählen Sie eine Vorlage aus'
});
return;
}
await executeWithValidation(async () => {
console.log('🔄 Erstelle Schichtplan aus Preset...', {
presetName: selectedPreset,
name: planName,
@@ -91,16 +117,16 @@ const ShiftPlanCreate: React.FC = () => {
console.log('✅ Plan erstellt:', createdPlan);
// Erfolgsmeldung und Weiterleitung
setSuccess('Schichtplan erfolgreich erstellt!');
showNotification({
type: 'success',
title: 'Erfolg',
message: 'Schichtplan erfolgreich erstellt!'
});
setTimeout(() => {
navigate(`/shift-plans/${createdPlan.id}`);
}, 1500);
} catch (error) {
const err = error as Error;
console.error('❌ Fehler beim Erstellen des Plans:', err);
setError(`Plan konnte nicht erstellt werden: ${err.message}`);
}
});
};
const getSelectedPresetDescription = () => {
@@ -120,22 +146,14 @@ const ShiftPlanCreate: React.FC = () => {
<div className={styles.container}>
<div className={styles.header}>
<h1>Neuen Schichtplan erstellen</h1>
<button onClick={() => navigate(-1)} className={styles.backButton}>
<button
onClick={() => navigate(-1)}
className={styles.backButton}
disabled={isSubmitting}
>
Zurück
</button>
</div>
{error && (
<div className={styles.error}>
{error}
</div>
)}
{success && (
<div className={styles.success}>
{success}
</div>
)}
<div className={styles.form}>
<div className={styles.formGroup}>
@@ -146,6 +164,7 @@ const ShiftPlanCreate: React.FC = () => {
onChange={(e) => setPlanName(e.target.value)}
placeholder="z.B. KW 42 2025"
className={styles.input}
disabled={isSubmitting}
/>
</div>
@@ -157,6 +176,7 @@ const ShiftPlanCreate: React.FC = () => {
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className={styles.input}
disabled={isSubmitting}
/>
</div>
@@ -167,6 +187,7 @@ const ShiftPlanCreate: React.FC = () => {
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className={styles.input}
disabled={isSubmitting}
/>
</div>
</div>
@@ -177,6 +198,7 @@ const ShiftPlanCreate: React.FC = () => {
value={selectedPreset}
onChange={(e) => setSelectedPreset(e.target.value)}
className={`${styles.select} ${presets.length === 0 ? styles.empty : ''}`}
disabled={isSubmitting}
>
<option value="">Bitte wählen...</option>
{presets.map(preset => (
@@ -203,9 +225,9 @@ const ShiftPlanCreate: React.FC = () => {
<button
onClick={handleCreate}
className={styles.createButton}
disabled={!selectedPreset || !planName.trim() || !startDate || !endDate}
disabled={isSubmitting || !selectedPreset || !planName.trim() || !startDate || !endDate}
>
Schichtplan erstellen
{isSubmitting ? 'Wird erstellt...' : 'Schichtplan erstellen'}
</button>
</div>
</div>

202
frontend/src/pages/ShiftPlans/ShiftPlanEdit.tsx
View File

@@ -4,11 +4,14 @@ import { useParams, useNavigate } from 'react-router-dom';
import { shiftPlanService } from '../../services/shiftPlanService';
import { ShiftPlan, Shift, ScheduledShift } from '../../models/ShiftPlan';
import { useNotification } from '../../contexts/NotificationContext';
import { useBackendValidation } from '../../hooks/useBackendValidation';
const ShiftPlanEdit: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { showNotification } = useNotification();
const { showNotification, confirmDialog } = useNotification();
const { executeWithValidation, isSubmitting } = useBackendValidation();
const [shiftPlan, setShiftPlan] = useState<ShiftPlan | null>(null);
const [loading, setLoading] = useState(true);
const [editingShift, setEditingShift] = useState<Shift | null>(null);
@@ -24,122 +27,150 @@ const ShiftPlanEdit: React.FC = () => {
const loadShiftPlan = async () => {
if (!id) return;
try {
const plan = await shiftPlanService.getShiftPlan(id);
setShiftPlan(plan);
} catch (error) {
console.error('Error loading shift plan:', error);
showNotification({
type: 'error',
title: 'Fehler',
message: 'Der Schichtplan konnte nicht geladen werden.'
});
navigate('/shift-plans');
} finally {
setLoading(false);
}
await executeWithValidation(async () => {
try {
const plan = await shiftPlanService.getShiftPlan(id);
setShiftPlan(plan);
} catch (error) {
console.error('Error loading shift plan:', error);
navigate('/shift-plans');
} finally {
setLoading(false);
}
});
};
const handleUpdateShift = async (shift: Shift) => {
if (!shiftPlan || !id) return;
try {
// Update logic here
await executeWithValidation(async () => {
// Update logic here - will be implemented when backend API is available
// For now, just simulate success
console.log('Updating shift:', shift);
loadShiftPlan();
setEditingShift(null);
} catch (error) {
console.error('Error updating shift:', error);
showNotification({
type: 'error',
title: 'Fehler',
message: 'Die Schicht konnte nicht aktualisiert werden.'
type: 'success',
title: 'Erfolg',
message: 'Schicht wurde erfolgreich aktualisiert.'
});
}
});
};
const handleAddShift = async () => {
if (!shiftPlan || !id) return;
if (!newShift.timeSlotId || !newShift.requiredEmployees) {
// Basic frontend validation only
if (!newShift.timeSlotId) {
showNotification({
type: 'error',
title: 'Fehler',
message: 'Bitte füllen Sie alle Pflichtfelder aus.'
title: 'Fehlende Angaben',
message: 'Bitte wählen Sie einen Zeit-Slot aus.'
});
return;
}
try {
// Add shift logic here
if (!newShift.requiredEmployees || newShift.requiredEmployees < 1) {
showNotification({
type: 'error',
title: 'Fehlende Angaben',
message: 'Bitte geben Sie die Anzahl der benötigten Mitarbeiter an.'
});
return;
}
await executeWithValidation(async () => {
// Add shift logic here - will be implemented when backend API is available
// For now, just simulate success
console.log('Adding shift:', newShift);
showNotification({
type: 'success',
title: 'Erfolg',
message: 'Neue Schicht wurde hinzugefügt.'
});
setNewShift({
timeSlotId: '',
dayOfWeek: 1,
requiredEmployees: 1
});
loadShiftPlan();
} catch (error) {
console.error('Error adding shift:', error);
showNotification({
type: 'error',
title: 'Fehler',
message: 'Die Schicht konnte nicht hinzugefügt werden.'
});
}
});
};
const handleDeleteShift = async (shiftId: string) => {
if (!window.confirm('Möchten Sie diese Schicht wirklich löschen?')) {
return;
}
const confirmed = await confirmDialog({
title: 'Schicht löschen',
message: 'Möchten Sie diese Schicht wirklich löschen?',
confirmText: 'Löschen',
cancelText: 'Abbrechen',
type: 'warning'
});
try {
// Delete logic here
if (!confirmed) return;
await executeWithValidation(async () => {
// Delete logic here - will be implemented when backend API is available
// For now, just simulate success
console.log('Deleting shift:', shiftId);
loadShiftPlan();
} catch (error) {
console.error('Error deleting shift:', error);
showNotification({
type: 'error',
title: 'Fehler',
message: 'Die Schicht konnte nicht gelöscht werden.'
type: 'success',
title: 'Erfolg',
message: 'Schicht wurde erfolgreich gelöscht.'
});
}
});
};
const handlePublish = async () => {
if (!shiftPlan || !id) return;
try {
await executeWithValidation(async () => {
await shiftPlanService.updateShiftPlan(id, {
...shiftPlan,
status: 'published'
});
showNotification({
type: 'success',
title: 'Erfolg',
message: 'Schichtplan wurde veröffentlicht.'
});
loadShiftPlan();
} catch (error) {
console.error('Error publishing shift plan:', error);
showNotification({
type: 'error',
title: 'Fehler',
message: 'Der Schichtplan konnte nicht veröffentlicht werden.'
});
}
});
};
if (loading) {
return <div>Lade Schichtplan...</div>;
return (
<div style={{
textAlign: 'center',
padding: '40px',
fontSize: '18px',
color: '#666'
}}>
Lade Schichtplan...
</div>
);
}
if (!shiftPlan) {
return <div>Schichtplan nicht gefunden</div>;
return (
<div style={{
textAlign: 'center',
padding: '40px',
fontSize: '18px',
color: '#e74c3c'
}}>
Schichtplan nicht gefunden
</div>
);
}
// Group shifts by dayOfWeek
@@ -174,28 +205,32 @@ const ShiftPlanEdit: React.FC = () => {
{shiftPlan.status === 'draft' && (
<button
onClick={handlePublish}
disabled={isSubmitting}
style={{
padding: '8px 16px',
backgroundColor: '#2ecc71',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
marginRight: '10px'
cursor: isSubmitting ? 'not-allowed' : 'pointer',
marginRight: '10px',
opacity: isSubmitting ? 0.6 : 1
}}
>
Veröffentlichen
{isSubmitting ? 'Wird veröffentlicht...' : 'Veröffentlichen'}
</button>
)}
<button
onClick={() => navigate('/shift-plans')}
disabled={isSubmitting}
style={{
padding: '8px 16px',
backgroundColor: '#95a5a6',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: isSubmitting ? 'not-allowed' : 'pointer',
opacity: isSubmitting ? 0.6 : 1
}}
>
Zurück
@@ -219,6 +254,7 @@ const ShiftPlanEdit: React.FC = () => {
value={newShift.dayOfWeek}
onChange={(e) => setNewShift({ ...newShift, dayOfWeek: parseInt(e.target.value) })}
style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
disabled={isSubmitting}
>
{daysOfWeek.map(day => (
<option key={day.id} value={day.id}>{day.name}</option>
@@ -231,6 +267,7 @@ const ShiftPlanEdit: React.FC = () => {
value={newShift.timeSlotId}
onChange={(e) => setNewShift({ ...newShift, timeSlotId: e.target.value })}
style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
disabled={isSubmitting}
>
<option value="">Bitte auswählen...</option>
{shiftPlan.timeSlots.map(slot => (
@@ -246,25 +283,27 @@ const ShiftPlanEdit: React.FC = () => {
type="number"
min="1"
value={newShift.requiredEmployees}
onChange={(e) => setNewShift({ ...newShift, requiredEmployees: parseInt(e.target.value) })}
onChange={(e) => setNewShift({ ...newShift, requiredEmployees: parseInt(e.target.value) || 1 })}
style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
disabled={isSubmitting}
/>
</div>
</div>
<button
onClick={handleAddShift}
disabled={!newShift.timeSlotId || !newShift.requiredEmployees}
disabled={isSubmitting || !newShift.timeSlotId || !newShift.requiredEmployees}
style={{
marginTop: '15px',
padding: '8px 16px',
backgroundColor: '#3498db',
backgroundColor: isSubmitting ? '#bdc3c7' : '#3498db',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: isSubmitting ? 'not-allowed' : 'pointer',
opacity: (!newShift.timeSlotId || !newShift.requiredEmployees) ? 0.6 : 1
}}
>
Schicht hinzufügen
{isSubmitting ? 'Wird hinzugefügt...' : 'Schicht hinzufügen'}
</button>
</div>
@@ -300,6 +339,7 @@ const ShiftPlanEdit: React.FC = () => {
value={editingShift.timeSlotId}
onChange={(e) => setEditingShift({ ...editingShift, timeSlotId: e.target.value })}
style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
disabled={isSubmitting}
>
{shiftPlan.timeSlots.map(slot => (
<option key={slot.id} value={slot.id}>
@@ -314,33 +354,37 @@ const ShiftPlanEdit: React.FC = () => {
type="number"
min="1"
value={editingShift.requiredEmployees}
onChange={(e) => setEditingShift({ ...editingShift, requiredEmployees: parseInt(e.target.value) })}
onChange={(e) => setEditingShift({ ...editingShift, requiredEmployees: parseInt(e.target.value) || 1 })}
style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
disabled={isSubmitting}
/>
</div>
<div style={{ display: 'flex', gap: '10px', alignItems: 'flex-end' }}>
<button
onClick={() => handleUpdateShift(editingShift)}
disabled={isSubmitting}
style={{
padding: '8px 16px',
backgroundColor: '#2ecc71',
backgroundColor: isSubmitting ? '#bdc3c7' : '#2ecc71',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: isSubmitting ? 'not-allowed' : 'pointer'
}}
>
Speichern
{isSubmitting ? 'Speichern...' : 'Speichern'}
</button>
<button
onClick={() => setEditingShift(null)}
disabled={isSubmitting}
style={{
padding: '8px 16px',
backgroundColor: '#95a5a6',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: isSubmitting ? 'not-allowed' : 'pointer',
opacity: isSubmitting ? 0.6 : 1
}}
>
Abbrechen
@@ -359,27 +403,31 @@ const ShiftPlanEdit: React.FC = () => {
<div>
<button
onClick={() => setEditingShift(shift)}
disabled={isSubmitting}
style={{
padding: '6px 12px',
backgroundColor: '#f1c40f',
backgroundColor: isSubmitting ? '#bdc3c7' : '#f1c40f',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
marginRight: '8px'
cursor: isSubmitting ? 'not-allowed' : 'pointer',
marginRight: '8px',
opacity: isSubmitting ? 0.6 : 1
}}
>
Bearbeiten
</button>
<button
onClick={() => handleDeleteShift(shift.id)}
disabled={isSubmitting}
style={{
padding: '6px 12px',
backgroundColor: '#e74c3c',
backgroundColor: isSubmitting ? '#bdc3c7' : '#e74c3c',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: isSubmitting ? 'not-allowed' : 'pointer',
opacity: isSubmitting ? 0.6 : 1
}}
>
Löschen

168
frontend/src/pages/ShiftPlans/ShiftPlanList.tsx
View File

@@ -5,12 +5,15 @@ import { useAuth } from '../../contexts/AuthContext';
import { shiftPlanService } from '../../services/shiftPlanService';
import { ShiftPlan } from '../../models/ShiftPlan';
import { useNotification } from '../../contexts/NotificationContext';
import { useBackendValidation } from '../../hooks/useBackendValidation';
import { formatDate } from '../../utils/foramatters';
const ShiftPlanList: React.FC = () => {
const { hasRole } = useAuth();
const navigate = useNavigate();
const { showNotification } = useNotification();
const { showNotification, confirmDialog } = useNotification();
const { executeWithValidation, isSubmitting } = useBackendValidation();
const [shiftPlans, setShiftPlans] = useState<ShiftPlan[]>([]);
const [loading, setLoading] = useState(true);
@@ -19,46 +22,80 @@ const ShiftPlanList: React.FC = () => {
}, []);
const loadShiftPlans = async () => {
try {
const plans = await shiftPlanService.getShiftPlans();
setShiftPlans(plans);
} catch (error) {
console.error('Error loading shift plans:', error);
showNotification({
type: 'error',
title: 'Fehler',
message: 'Die Schichtpläne konnten nicht geladen werden.'
});
} finally {
setLoading(false);
}
await executeWithValidation(async () => {
try {
const plans = await shiftPlanService.getShiftPlans();
setShiftPlans(plans);
} catch (error) {
console.error('Error loading shift plans:', error);
// Error is automatically handled by executeWithValidation
} finally {
setLoading(false);
}
});
};
const handleDelete = async (id: string) => {
if (!window.confirm('Möchten Sie diesen Schichtplan wirklich löschen?')) {
return;
}
const handleDelete = async (id: string, planName: string) => {
const confirmed = await confirmDialog({
title: 'Schichtplan löschen',
message: `Möchten Sie den Schichtplan "${planName}" wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.`,
confirmText: 'Löschen',
cancelText: 'Abbrechen',
type: 'warning'
});
try {
if (!confirmed) return;
await executeWithValidation(async () => {
await shiftPlanService.deleteShiftPlan(id);
showNotification({
type: 'success',
title: 'Erfolg',
message: 'Der Schichtplan wurde erfolgreich gelöscht.'
});
loadShiftPlans();
} catch (error) {
console.error('Error deleting shift plan:', error);
showNotification({
type: 'error',
title: 'Fehler',
message: 'Der Schichtplan konnte nicht gelöscht werden.'
});
}
});
};
const getStatusBadge = (status: string) => {
const config = {
draft: { text: 'Entwurf', color: '#f39c12', bgColor: '#fef5e7' },
published: { text: 'Veröffentlicht', color: '#27ae60', bgColor: '#d5f4e6' },
archived: { text: 'Archiviert', color: '#95a5a6', bgColor: '#f8f9fa' }
};
const statusConfig = config[status as keyof typeof config] || config.draft;
return (
<span
style={{
backgroundColor: statusConfig.bgColor,
color: statusConfig.color,
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
fontWeight: 'bold',
display: 'inline-block'
}}
>
{statusConfig.text}
</span>
);
};
if (loading) {
return <div>Lade Schichtpläne...</div>;
return (
<div style={{
textAlign: 'center',
padding: '40px',
fontSize: '18px',
color: '#666'
}}>
Lade Schichtpläne...
</div>
);
}
return (
@@ -97,6 +134,21 @@ const ShiftPlanList: React.FC = () => {
<div style={{ fontSize: '48px', marginBottom: '20px' }}>📋</div>
<h3>Keine Schichtpläne vorhanden</h3>
<p>Erstellen Sie Ihren ersten Schichtplan!</p>
{hasRole(['admin', 'maintenance']) && (
<Link to="/shift-plans/new">
<button style={{
marginTop: '15px',
padding: '10px 20px',
backgroundColor: '#51258f',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}}>
Ersten Plan erstellen
</button>
</Link>
)}
</div>
) : (
<div style={{ display: 'grid', gap: '20px' }}>
@@ -110,35 +162,35 @@ const ShiftPlanList: React.FC = () => {
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
alignItems: 'center',
border: plan.status === 'published' ? '2px solid #d5f4e6' : '1px solid #e0e0e0'
}}
>
<div>
<h3 style={{ margin: '0 0 10px 0' }}>{plan.name}</h3>
<div style={{ color: '#666', fontSize: '14px' }}>
<div style={{ flex: 1 }}>
<h3 style={{ margin: '0 0 10px 0', color: '#2c3e50' }}>{plan.name}</h3>
<div style={{ color: '#666', fontSize: '14px', marginBottom: '10px' }}>
<p style={{ margin: '0' }}>
Zeitraum: {formatDate(plan.startDate)} - {formatDate(plan.endDate)}
<strong>Zeitraum:</strong> {formatDate(plan.startDate)} - {formatDate(plan.endDate)}
</p>
<p style={{ margin: '5px 0 0 0' }}>
Status: <span style={{
color: plan.status === 'published' ? '#2ecc71' : '#f1c40f',
fontWeight: 'bold'
}}>
{plan.status === 'published' ? 'Veröffentlicht' : 'Entwurf'}
</span>
<strong>Status:</strong> {getStatusBadge(plan.status)}
</p>
</div>
<div style={{ fontSize: '12px', color: '#95a5a6' }}>
Erstellt am: {formatDate(plan.createdAt || '')}
</div>
</div>
<div style={{ display: 'flex', gap: '10px' }}>
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
<button
onClick={() => navigate(`/shift-plans/${plan.id}`)}
style={{
padding: '8px 16px',
backgroundColor: '#2ecc71',
backgroundColor: '#3498db',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: 'pointer',
minWidth: '80px'
}}
>
Anzeigen
@@ -149,27 +201,31 @@ const ShiftPlanList: React.FC = () => {
onClick={() => navigate(`/shift-plans/${plan.id}/edit`)}
style={{
padding: '8px 16px',
backgroundColor: '#f1c40f',
backgroundColor: '#f39c12',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: 'pointer',
minWidth: '80px'
}}
>
Bearbeiten
</button>
<button
onClick={() => handleDelete(plan.id)}
onClick={() => handleDelete(plan.id, plan.name)}
disabled={isSubmitting}
style={{
padding: '8px 16px',
backgroundColor: '#e74c3c',
backgroundColor: isSubmitting ? '#bdc3c7' : '#e74c3c',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
cursor: isSubmitting ? 'not-allowed' : 'pointer',
minWidth: '80px',
opacity: isSubmitting ? 0.6 : 1
}}
>
Löschen
{isSubmitting ? 'Löscht...' : 'Löschen'}
</button>
</>
)}
@@ -178,6 +234,22 @@ const ShiftPlanList: React.FC = () => {
))}
</div>
)}
{/* Info for users without edit permissions */}
{!hasRole(['admin', 'maintenance']) && shiftPlans.length > 0 && (
<div style={{
marginTop: '20px',
padding: '15px',
backgroundColor: '#e8f4fd',
border: '1px solid #b6d7e8',
borderRadius: '6px',
fontSize: '14px',
color: '#2c3e50'
}}>
<strong>ℹ️ Informationen:</strong> Sie können Schichtpläne nur anzeigen.
Bearbeitungsrechte benötigen Admin- oder Instandhalter-Berechtigungen.
</div>
)}
</div>
);
};