mirror of
https://github.com/donpat1to/Schichtenplaner.git
synced 2025-11-30 22:45:46 +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,62 +477,34 @@ 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 = {
|
||||
@@ -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,12 +552,11 @@ 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={{
|
||||
maxWidth: '1900px',
|
||||
@@ -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',
|
||||
|
||||
@@ -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,23 +146,15 @@ 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}>
|
||||
<label>Plan Name:</label>
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
try {
|
||||
// Delete logic here
|
||||
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
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user