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

fixed handleSubmit missing input

Browse Source
This commit is contained in:
Patrick Mahnke-Hartmann
2025-10-31 12:51:22 +01:00
parent 3ad497dd76
commit a69e934075
1 changed files with 144 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
frontend/src/pages/Employees/components/EmployeeForm.tsx
View File

@@ -23,12 +23,12 @@ interface EmployeeFormData {
lastname: string; lastname: string;
email: string; email: string;
password: string; password: string;
// Step 2: Mitarbeiterkategorie // Step 2: Mitarbeiterkategorie
employeeType: EmployeeType; employeeType: EmployeeType;
contractType: ContractType | undefined; contractType: ContractType | undefined;
isTrainee: boolean; isTrainee: boolean;
// Step 3: Berechtigungen & Status // Step 3: Berechtigungen & Status
roles: string[]; roles: string[];
canWorkAlone: boolean; canWorkAlone: boolean;
@@ -64,12 +64,12 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
canWorkAlone: false, canWorkAlone: false,
isActive: true isActive: true
}); });
const [passwordForm, setPasswordForm] = useState<PasswordFormData>({ const [passwordForm, setPasswordForm] = useState<PasswordFormData>({
newPassword: '', newPassword: '',
confirmPassword: '' confirmPassword: ''
}); });
const [showPasswordSection, setShowPasswordSection] = useState(false); const [showPasswordSection, setShowPasswordSection] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
@@ -116,7 +116,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, ''); const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, ''); const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
return `${cleanFirstname}.${cleanLastname}@sp.de`; return `${cleanFirstname}.${cleanLastname}@sp.de`;
}; };
@@ -177,7 +177,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
const goToNextStep = (): void => { const goToNextStep = (): void => {
setError(''); setError('');
clearErrors(); // Clear previous validation errors clearErrors(); // Clear previous validation errors
if (!validateCurrentStep(currentStep)) { if (!validateCurrentStep(currentStep)) {
return; return;
} }
@@ -198,7 +198,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
const handleStepChange = (stepIndex: number): void => { const handleStepChange = (stepIndex: number): void => {
setError(''); setError('');
clearErrors(); // Clear validation errors when changing steps clearErrors(); // Clear validation errors when changing steps
// Nur erlauben, zu bereits validierten Schritten zu springen // Nur erlauben, zu bereits validierten Schritten zu springen
if (stepIndex <= currentStep + 1) { if (stepIndex <= currentStep + 1) {
// Vor dem Wechsel validieren // Vor dem Wechsel validieren
@@ -212,7 +212,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
// ===== FORM HANDLER ===== // ===== FORM HANDLER =====
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value, type } = e.target; const { name, value, type } = e.target;
setFormData(prev => ({ setFormData(prev => ({
...prev, ...prev,
[name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value
@@ -264,9 +264,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
} }
// Determine if can work alone based on employee type // Determine if can work alone based on employee type
const canWorkAlone = employeeType === 'manager' || const canWorkAlone = employeeType === 'manager' ||
(employeeType === 'personell' && !formData.isTrainee); (employeeType === 'personell' && !formData.isTrainee);
// Reset isTrainee if not personell // Reset isTrainee if not personell
const isTrainee = employeeType === 'personell' ? formData.isTrainee : false; const isTrainee = employeeType === 'personell' ? formData.isTrainee : false;
@@ -311,9 +311,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
canWorkAlone: formData.canWorkAlone, canWorkAlone: formData.canWorkAlone,
isTrainee: formData.isTrainee isTrainee: formData.isTrainee
}; };
// Use executeWithValidation ONLY for the API call // Use executeWithValidation ONLY for the API call
await executeWithValidation(() => await executeWithValidation(() =>
employeeService.createEmployee(createData) employeeService.createEmployee(createData)
); );
} else if (employee) { } else if (employee) {
@@ -327,9 +327,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
isActive: formData.isActive, isActive: formData.isActive,
isTrainee: formData.isTrainee isTrainee: formData.isTrainee
}; };
// Use executeWithValidation for the update call // Use executeWithValidation for the update call
await executeWithValidation(() => await executeWithValidation(() =>
employeeService.updateEmployee(employee.id, updateData) employeeService.updateEmployee(employee.id, updateData)
); );
@@ -343,12 +343,13 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
await executeWithValidation(() => await executeWithValidation(() =>
employeeService.changePassword(employee.id, { employeeService.changePassword(employee.id, {
currentPassword: '', currentPassword: '',
newPassword: passwordForm.newPassword newPassword: passwordForm.newPassword,
confirmPassword: passwordForm.confirmPassword
}) })
); );
} }
} }
return Promise.resolve(); return Promise.resolve();
} catch (err: any) { } catch (err: any) {
// Only set error if it's not a validation error (validation errors are handled by the hook) // Only set error if it's not a validation error (validation errors are handled by the hook)
@@ -364,9 +365,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
const isStepCompleted = (stepIndex: number): boolean => { const isStepCompleted = (stepIndex: number): boolean => {
switch (stepIndex) { switch (stepIndex) {
case 0: case 0:
return !!formData.firstname.trim() && return !!formData.firstname.trim() &&
!!formData.lastname.trim(); !!formData.lastname.trim();
// REMOVE: (mode === 'edit' || formData.password.length >= 6) // REMOVE: (mode === 'edit' || formData.password.length >= 6)
case 1: case 1:
return !!formData.employeeType; return !!formData.employeeType;
case 2: case 2:
@@ -391,7 +392,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
validationErrors, validationErrors,
getFieldError, getFieldError,
hasErrors, hasErrors,
// Actions // Actions
goToNextStep, goToNextStep,
goToPrevStep, goToPrevStep,
@@ -405,7 +406,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
handleSubmit, handleSubmit,
setShowPasswordSection, setShowPasswordSection,
clearErrors, clearErrors,
// Helpers // Helpers
isStepCompleted isStepCompleted
}; };
@@ -430,8 +431,8 @@ interface StepContentProps {
hasErrors: (fieldName?: string) => boolean; hasErrors: (fieldName?: string) => boolean;
} }
const Step1Content: React.FC<StepContentProps> = ({ const Step1Content: React.FC<StepContentProps> = ({
formData, formData,
onInputChange, onInputChange,
emailPreview, emailPreview,
mode mode
@@ -439,9 +440,9 @@ const Step1Content: React.FC<StepContentProps> = ({
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}> <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
<div> <div>
<label style={{ <label style={{
display: 'block', display: 'block',
marginBottom: '0.5rem', marginBottom: '0.5rem',
fontWeight: '600', fontWeight: '600',
color: '#495057' color: '#495057'
}}> }}>
@@ -465,9 +466,9 @@ const Step1Content: React.FC<StepContentProps> = ({
</div> </div>
<div> <div>
<label style={{ <label style={{
display: 'block', display: 'block',
marginBottom: '0.5rem', marginBottom: '0.5rem',
fontWeight: '600', fontWeight: '600',
color: '#495057' color: '#495057'
}}> }}>
@@ -493,17 +494,17 @@ const Step1Content: React.FC<StepContentProps> = ({
{/* Email Preview */} {/* Email Preview */}
<div> <div>
<label style={{ <label style={{
display: 'block', display: 'block',
marginBottom: '0.5rem', marginBottom: '0.5rem',
fontWeight: '600', fontWeight: '600',
color: '#495057' color: '#495057'
}}> }}>
E-Mail Adresse (automatisch generiert) E-Mail Adresse (automatisch generiert)
</label> </label>
<div style={{ <div style={{
padding: '0.75rem', padding: '0.75rem',
backgroundColor: '#e9ecef', backgroundColor: '#e9ecef',
border: '1px solid #ced4da', border: '1px solid #ced4da',
borderRadius: '6px', borderRadius: '6px',
color: '#495057', color: '#495057',
@@ -512,8 +513,8 @@ const Step1Content: React.FC<StepContentProps> = ({
}}> }}>
{emailPreview || 'max.mustermann@sp.de'} {emailPreview || 'max.mustermann@sp.de'}
</div> </div>
<div style={{ <div style={{
fontSize: '0.875rem', fontSize: '0.875rem',
color: '#6c757d', color: '#6c757d',
marginTop: '0.25rem' marginTop: '0.25rem'
}}> }}>
@@ -523,9 +524,9 @@ const Step1Content: React.FC<StepContentProps> = ({
{mode === 'create' && ( {mode === 'create' && (
<div> <div>
<label style={{ <label style={{
display: 'block', display: 'block',
marginBottom: '0.5rem', marginBottom: '0.5rem',
fontWeight: '600', fontWeight: '600',
color: '#495057' color: '#495057'
}}> }}>
@@ -546,8 +547,8 @@ const Step1Content: React.FC<StepContentProps> = ({
}} }}
placeholder="Passwort eingeben" placeholder="Passwort eingeben"
/> />
<div style={{ <div style={{
fontSize: '0.875rem', fontSize: '0.875rem',
color: '#6c757d', color: '#6c757d',
marginTop: '0.25rem' marginTop: '0.25rem'
}}> }}>
@@ -558,7 +559,7 @@ const Step1Content: React.FC<StepContentProps> = ({
</div> </div>
); );
const Step2Content: React.FC<StepContentProps> = ({ const Step2Content: React.FC<StepContentProps> = ({
formData, formData,
onEmployeeTypeChange, onEmployeeTypeChange,
onTraineeChange, onTraineeChange,
@@ -581,11 +582,11 @@ const Step2Content: React.FC<StepContentProps> = ({
{/* Mitarbeiter Kategorie */} {/* Mitarbeiter Kategorie */}
<div> <div>
<h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>👥 Mitarbeiter Kategorie</h3> <h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>👥 Mitarbeiter Kategorie</h3>
{employeeTypeError && ( {employeeTypeError && (
<div style={{ <div style={{
color: '#dc3545', color: '#dc3545',
fontSize: '0.875rem', fontSize: '0.875rem',
marginBottom: '1rem', marginBottom: '1rem',
padding: '0.5rem', padding: '0.5rem',
backgroundColor: '#f8d7da', backgroundColor: '#f8d7da',
@@ -595,10 +596,10 @@ const Step2Content: React.FC<StepContentProps> = ({
{employeeTypeError} {employeeTypeError}
</div> </div>
)} )}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{Object.values(EMPLOYEE_TYPE_CONFIG).map(type => ( {Object.values(EMPLOYEE_TYPE_CONFIG).map(type => (
<div <div
key={type.value} key={type.value}
style={{ style={{
display: 'flex', display: 'flex',
@@ -626,16 +627,16 @@ const Step2Content: React.FC<StepContentProps> = ({
}} }}
/> />
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div style={{ <div style={{
fontWeight: 'bold', fontWeight: 'bold',
color: '#2c3e50', color: '#2c3e50',
marginBottom: '4px', marginBottom: '4px',
fontSize: '16px' fontSize: '16px'
}}> }}>
{type.label} {type.label}
</div> </div>
<div style={{ <div style={{
fontSize: '14px', fontSize: '14px',
color: '#7f8c8d', color: '#7f8c8d',
lineHeight: '1.4' lineHeight: '1.4'
}}> }}>
@@ -658,10 +659,10 @@ const Step2Content: React.FC<StepContentProps> = ({
{/* Trainee checkbox for personell type */} {/* Trainee checkbox for personell type */}
{formData.employeeType === 'personell' && ( {formData.employeeType === 'personell' && (
<div style={{ <div style={{
marginTop: '1rem', marginTop: '1rem',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '10px', gap: '10px',
padding: '1rem', padding: '1rem',
border: '1px solid #e0e0e0', border: '1px solid #e0e0e0',
@@ -692,11 +693,11 @@ const Step2Content: React.FC<StepContentProps> = ({
{hasRole(['admin']) && showContractType && ( {hasRole(['admin']) && showContractType && (
<div> <div>
<h3 style={{ margin: '0 0 1rem 0', color: '#0c5460' }}>📝 Vertragstyp</h3> <h3 style={{ margin: '0 0 1rem 0', color: '#0c5460' }}>📝 Vertragstyp</h3>
{contractTypeError && ( {contractTypeError && (
<div style={{ <div style={{
color: '#dc3545', color: '#dc3545',
fontSize: '0.875rem', fontSize: '0.875rem',
marginBottom: '1rem', marginBottom: '1rem',
padding: '0.5rem', padding: '0.5rem',
backgroundColor: '#f8d7da', backgroundColor: '#f8d7da',
@@ -706,16 +707,16 @@ const Step2Content: React.FC<StepContentProps> = ({
{contractTypeError} {contractTypeError}
</div> </div>
)} )}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{contractTypeOptions.map(contract => { {contractTypeOptions.map(contract => {
const isFlexibleDisabled = contract.value === 'flexible' && formData.employeeType === 'personell'; const isFlexibleDisabled = contract.value === 'flexible' && formData.employeeType === 'personell';
const isSmallLargeDisabled = (contract.value === 'small' || contract.value === 'large') && const isSmallLargeDisabled = (contract.value === 'small' || contract.value === 'large') &&
(formData.employeeType === 'manager' || formData.employeeType === 'apprentice'); (formData.employeeType === 'manager' || formData.employeeType === 'apprentice');
const isDisabled = isFlexibleDisabled || isSmallLargeDisabled; const isDisabled = isFlexibleDisabled || isSmallLargeDisabled;
return ( return (
<div <div
key={contract.value} key={contract.value}
style={{ style={{
display: 'flex', display: 'flex',
@@ -745,8 +746,8 @@ const Step2Content: React.FC<StepContentProps> = ({
}} }}
/> />
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div style={{ <div style={{
fontWeight: 'bold', fontWeight: 'bold',
color: '#2c3e50', color: '#2c3e50',
marginBottom: '4px', marginBottom: '4px',
fontSize: '16px' fontSize: '16px'
@@ -773,8 +774,8 @@ const Step2Content: React.FC<StepContentProps> = ({
</span> </span>
)} )}
</div> </div>
<div style={{ <div style={{
fontSize: '14px', fontSize: '14px',
color: '#7f8c8d', color: '#7f8c8d',
lineHeight: '1.4' lineHeight: '1.4'
}}> }}>
@@ -801,7 +802,7 @@ const Step2Content: React.FC<StepContentProps> = ({
); );
}; };
const Step3Content: React.FC<StepContentProps> = ({ const Step3Content: React.FC<StepContentProps> = ({
formData, formData,
onInputChange, onInputChange,
onRoleChange, onRoleChange,
@@ -816,11 +817,11 @@ const Step3Content: React.FC<StepContentProps> = ({
{/* Eigenständigkeit */} {/* Eigenständigkeit */}
<div> <div>
<h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>🎯 Eigenständigkeit</h3> <h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>🎯 Eigenständigkeit</h3>
{canWorkAloneError && ( {canWorkAloneError && (
<div style={{ <div style={{
color: '#dc3545', color: '#dc3545',
fontSize: '0.875rem', fontSize: '0.875rem',
marginBottom: '1rem', marginBottom: '1rem',
padding: '0.5rem', padding: '0.5rem',
backgroundColor: '#f8d7da', backgroundColor: '#f8d7da',
@@ -830,10 +831,10 @@ const Step3Content: React.FC<StepContentProps> = ({
{canWorkAloneError} {canWorkAloneError}
</div> </div>
)} )}
<div style={{ <div style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '15px', gap: '15px',
padding: '1rem', padding: '1rem',
border: '1px solid #e0e0e0', border: '1px solid #e0e0e0',
@@ -847,16 +848,16 @@ const Step3Content: React.FC<StepContentProps> = ({
checked={formData.canWorkAlone} checked={formData.canWorkAlone}
onChange={onInputChange} onChange={onInputChange}
disabled={formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)} disabled={formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)}
style={{ style={{
width: '20px', width: '20px',
height: '20px', height: '20px',
opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1 opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1
}} }}
/> />
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<label htmlFor="canWorkAlone" style={{ <label htmlFor="canWorkAlone" style={{
fontWeight: 'bold', fontWeight: 'bold',
color: '#2c3e50', color: '#2c3e50',
display: 'block', display: 'block',
opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1 opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1
}}> }}>
@@ -864,11 +865,11 @@ const Step3Content: React.FC<StepContentProps> = ({
{(formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) && ' (Automatisch festgelegt)'} {(formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) && ' (Automatisch festgelegt)'}
</label> </label>
<div style={{ fontSize: '14px', color: '#7f8c8d' }}> <div style={{ fontSize: '14px', color: '#7f8c8d' }}>
{formData.employeeType === 'manager' {formData.employeeType === 'manager'
? 'Chefs sind automatisch als eigenständig markiert.' ? 'Chefs sind automatisch als eigenständig markiert.'
: formData.employeeType === 'personell' && formData.isTrainee : formData.employeeType === 'personell' && formData.isTrainee
? 'Auszubildende können nicht als eigenständig markiert werden.' ? 'Auszubildende können nicht als eigenständig markiert werden.'
: 'Dieser Mitarbeiter kann komplexe Aufgaben eigenständig lösen und benötigt keine ständige Betreuung.' : 'Dieser Mitarbeiter kann komplexe Aufgaben eigenständig lösen und benötigt keine ständige Betreuung.'
} }
</div> </div>
</div> </div>
@@ -890,11 +891,11 @@ const Step3Content: React.FC<StepContentProps> = ({
{hasRole(['admin']) && ( {hasRole(['admin']) && (
<div> <div>
<h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>⚙️ Systemrollen</h3> <h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>⚙️ Systemrollen</h3>
{rolesError && ( {rolesError && (
<div style={{ <div style={{
color: '#dc3545', color: '#dc3545',
fontSize: '0.875rem', fontSize: '0.875rem',
marginBottom: '1rem', marginBottom: '1rem',
padding: '0.5rem', padding: '0.5rem',
backgroundColor: '#f8d7da', backgroundColor: '#f8d7da',
@@ -904,10 +905,10 @@ const Step3Content: React.FC<StepContentProps> = ({
{rolesError} {rolesError}
</div> </div>
)} )}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{ROLE_CONFIG.map(role => ( {ROLE_CONFIG.map(role => (
<div <div
key={role.value} key={role.value}
style={{ style={{
display: 'flex', display: 'flex',
@@ -951,7 +952,7 @@ const Step3Content: React.FC<StepContentProps> = ({
); );
}; };
const Step4Content: React.FC<StepContentProps> = ({ const Step4Content: React.FC<StepContentProps> = ({
formData, formData,
passwordForm, passwordForm,
onInputChange, onInputChange,
@@ -970,7 +971,7 @@ const Step4Content: React.FC<StepContentProps> = ({
{/* Passwort ändern */} {/* Passwort ändern */}
<div> <div>
<h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>🔒 Passwort zurücksetzen</h3> <h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>🔒 Passwort zurücksetzen</h3>
{!showPasswordSection ? ( {!showPasswordSection ? (
<button <button
type="button" type="button"
@@ -1009,10 +1010,10 @@ const Step4Content: React.FC<StepContentProps> = ({
placeholder="Mindestens 6 Zeichen" placeholder="Mindestens 6 Zeichen"
/> />
{newPasswordError && ( {newPasswordError && (
<div style={{ <div style={{
color: '#dc3545', color: '#dc3545',
fontSize: '0.875rem', fontSize: '0.875rem',
marginTop: '0.25rem' marginTop: '0.25rem'
}}> }}>
{newPasswordError} {newPasswordError}
</div> </div>
@@ -1039,10 +1040,10 @@ const Step4Content: React.FC<StepContentProps> = ({
placeholder="Passwort wiederholen" placeholder="Passwort wiederholen"
/> />
{confirmPasswordError && ( {confirmPasswordError && (
<div style={{ <div style={{
color: '#dc3545', color: '#dc3545',
fontSize: '0.875rem', fontSize: '0.875rem',
marginTop: '0.25rem' marginTop: '0.25rem'
}}> }}>
{confirmPasswordError} {confirmPasswordError}
</div> </div>
@@ -1074,9 +1075,9 @@ const Step4Content: React.FC<StepContentProps> = ({
{/* Aktiv Status */} {/* Aktiv Status */}
{mode === 'edit' && ( {mode === 'edit' && (
<div style={{ <div style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '10px', gap: '10px',
padding: '1rem', padding: '1rem',
border: `1px solid ${isActiveError ? '#dc3545' : '#e0e0e0'}`, border: `1px solid ${isActiveError ? '#dc3545' : '#e0e0e0'}`,
@@ -1099,10 +1100,10 @@ const Step4Content: React.FC<StepContentProps> = ({
Inaktive Mitarbeiter können sich nicht anmelden und werden nicht für Schichten eingeplant. Inaktive Mitarbeiter können sich nicht anmelden und werden nicht für Schichten eingeplant.
</div> </div>
{isActiveError && ( {isActiveError && (
<div style={{ <div style={{
color: '#dc3545', color: '#dc3545',
fontSize: '0.875rem', fontSize: '0.875rem',
marginTop: '0.25rem' marginTop: '0.25rem'
}}> }}>
{isActiveError} {isActiveError}
</div> </div>
@@ -1151,9 +1152,9 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
// Inline Step Indicator Komponente (wie in Setup.tsx) // Inline Step Indicator Komponente (wie in Setup.tsx)
const StepIndicator: React.FC = () => ( const StepIndicator: React.FC = () => (
<div style={{ <div style={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginBottom: '2.5rem', marginBottom: '2.5rem',
position: 'relative', position: 'relative',
@@ -1169,18 +1170,18 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
backgroundColor: '#e9ecef', backgroundColor: '#e9ecef',
zIndex: 1 zIndex: 1
}} /> }} />
{steps.map((step, index) => { {steps.map((step, index) => {
const isCompleted = index < currentStep; const isCompleted = index < currentStep;
const isCurrent = index === currentStep; const isCurrent = index === currentStep;
const isClickable = index <= currentStep + 1; const isClickable = index <= currentStep + 1;
return ( return (
<div <div
key={step.id} key={step.id}
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
zIndex: 2, zIndex: 2,
position: 'relative', position: 'relative',
@@ -1210,18 +1211,18 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
> >
{index + 1} {index + 1}
</button> </button>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<div style={{ <div style={{
fontSize: '14px', fontSize: '14px',
fontWeight: isCurrent ? '600' : '400', fontWeight: isCurrent ? '600' : '400',
color: isCurrent ? '#51258f' : '#6c757d' color: isCurrent ? '#51258f' : '#6c757d'
}}> }}>
{step.title} {step.title}
</div> </div>
{step.subtitle && ( {step.subtitle && (
<div style={{ <div style={{
fontSize: '12px', fontSize: '12px',
color: '#6c757d', color: '#6c757d',
marginTop: '2px' marginTop: '2px'
}}> }}>
@@ -1275,8 +1276,8 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
showNotification({ // Changed from addNotification to showNotification showNotification({ // Changed from addNotification to showNotification
type: 'success', type: 'success',
title: 'Erfolg', title: 'Erfolg',
message: mode === 'create' message: mode === 'create'
? 'Mitarbeiter wurde erfolgreich erstellt' ? 'Mitarbeiter wurde erfolgreich erstellt'
: 'Mitarbeiter wurde erfolgreich aktualisiert' : 'Mitarbeiter wurde erfolgreich aktualisiert'
}); });
onSuccess(); onSuccess();
@@ -1287,11 +1288,11 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
const getNextButtonText = (): string => { const getNextButtonText = (): string => {
if (loading) return '⏳ Wird gespeichert...'; if (loading) return '⏳ Wird gespeichert...';
if (currentStep === steps.length - 1) { if (currentStep === steps.length - 1) {
return mode === 'create' ? 'Mitarbeiter erstellen' : 'Änderungen speichern'; return mode === 'create' ? 'Mitarbeiter erstellen' : 'Änderungen speichern';
} }
return 'Weiter →'; return 'Weiter →';
}; };
@@ -1307,8 +1308,8 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
border: '1px solid #e0e0e0', border: '1px solid #e0e0e0',
boxShadow: '0 4px 6px rgba(0,0,0,0.1)' boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
}}> }}>
<h2 style={{ <h2 style={{
margin: '0 0 1.5rem 0', margin: '0 0 1.5rem 0',
color: '#2c3e50', color: '#2c3e50',
borderBottom: '2px solid #f0f0f0', borderBottom: '2px solid #f0f0f0',
paddingBottom: '1rem', paddingBottom: '1rem',
@@ -1322,16 +1323,16 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
{/* Aktueller Schritt Titel und Beschreibung */} {/* Aktueller Schritt Titel und Beschreibung */}
<div style={{ textAlign: 'center', marginBottom: '1.5rem' }}> <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
<h3 style={{ <h3 style={{
fontSize: '1.25rem', fontSize: '1.25rem',
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: '0.5rem', marginBottom: '0.5rem',
color: '#2c3e50' color: '#2c3e50'
}}> }}>
{steps[currentStep].title} {steps[currentStep].title}
</h3> </h3>
{steps[currentStep].subtitle && ( {steps[currentStep].subtitle && (
<p style={{ <p style={{
color: '#6c757d', color: '#6c757d',
fontSize: '1rem' fontSize: '1rem'
}}> }}>
@@ -1346,9 +1347,9 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
</div> </div>
{/* Navigations-Buttons */} {/* Navigations-Buttons */}
<div style={{ <div style={{
marginTop: '2rem', marginTop: '2rem',
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center' alignItems: 'center'
}}> }}>
@@ -1368,7 +1369,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
> >
{currentStep === 0 ? 'Abbrechen' : '← Zurück'} {currentStep === 0 ? 'Abbrechen' : '← Zurück'}
</button> </button>
<button <button
onClick={isLastStep ? handleFinalSubmit : goToNextStep} onClick={isLastStep ? handleFinalSubmit : goToNextStep}
disabled={loading} disabled={loading}
@@ -1390,16 +1391,16 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
{/* Zusätzliche Informationen */} {/* Zusätzliche Informationen */}
{isLastStep && !loading && ( {isLastStep && !loading && (
<div style={{ <div style={{
marginTop: '1.5rem', marginTop: '1.5rem',
textAlign: 'center', textAlign: 'center',
color: '#6c757d', color: '#6c757d',
fontSize: '0.9rem', fontSize: '0.9rem',
padding: '1rem', padding: '1rem',
backgroundColor: '#f8f9fa', backgroundColor: '#f8f9fa',
borderRadius: '6px' borderRadius: '6px'
}}> }}>
{mode === 'create' {mode === 'create'
? 'Überprüfen Sie alle Daten, bevor Sie den Mitarbeiter erstellen' ? 'Überprüfen Sie alle Daten, bevor Sie den Mitarbeiter erstellen'
: 'Überprüfen Sie alle Änderungen, bevor Sie sie speichern' : 'Überprüfen Sie alle Änderungen, bevor Sie sie speichern'
} }