first commit
This commit is contained in:
Stefan Hacker
@@ -0,0 +1,245 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { customerApi } from '../../services/api';
|
||||
import Card from '../../components/ui/Card';
|
||||
import Button from '../../components/ui/Button';
|
||||
import Input from '../../components/ui/Input';
|
||||
import Select from '../../components/ui/Select';
|
||||
import type { Customer } from '../../types';
|
||||
|
||||
type CustomerFormData = Omit<Customer, 'id' | 'customerNumber' | 'createdAt' | 'updatedAt' | 'addresses' | 'bankCards' | 'identityDocuments' | 'meters' | 'contracts'>;
|
||||
|
||||
export default function CustomerForm() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const isEdit = !!id;
|
||||
|
||||
const { register, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm<CustomerFormData>();
|
||||
const customerType = watch('type');
|
||||
|
||||
const { data: customer } = useQuery({
|
||||
queryKey: ['customer', id],
|
||||
queryFn: () => customerApi.getById(parseInt(id!)),
|
||||
enabled: isEdit,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (customer?.data) {
|
||||
const data = { ...customer.data };
|
||||
// Convert date strings to YYYY-MM-DD format for date inputs
|
||||
if (data.birthDate) {
|
||||
data.birthDate = data.birthDate.split('T')[0] as any;
|
||||
}
|
||||
if (data.foundingDate) {
|
||||
data.foundingDate = data.foundingDate.split('T')[0] as any;
|
||||
}
|
||||
reset(data);
|
||||
}
|
||||
}, [customer, reset]);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: customerApi.create,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['customers'] });
|
||||
navigate('/customers');
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: Partial<Customer>) => customerApi.update(parseInt(id!), data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['customers'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['customer', id] });
|
||||
navigate(`/customers/${id}`);
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: CustomerFormData) => {
|
||||
// Only include the fields that can be updated - exclude relations and read-only fields
|
||||
const submitData: any = {
|
||||
type: data.type,
|
||||
salutation: data.salutation || undefined,
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
companyName: data.companyName || undefined,
|
||||
email: data.email || undefined,
|
||||
phone: data.phone || undefined,
|
||||
mobile: data.mobile || undefined,
|
||||
taxNumber: data.taxNumber || undefined,
|
||||
commercialRegisterNumber: data.commercialRegisterNumber || undefined,
|
||||
notes: data.notes || undefined,
|
||||
birthPlace: data.birthPlace || undefined,
|
||||
};
|
||||
|
||||
// Handle birthDate - convert non-empty string to ISO string, or null to clear
|
||||
if (data.birthDate && typeof data.birthDate === 'string' && data.birthDate.trim() !== '') {
|
||||
submitData.birthDate = new Date(data.birthDate).toISOString();
|
||||
} else {
|
||||
submitData.birthDate = null;
|
||||
}
|
||||
|
||||
// Handle foundingDate for business customers - or null to clear
|
||||
if (data.foundingDate && typeof data.foundingDate === 'string' && data.foundingDate.trim() !== '') {
|
||||
submitData.foundingDate = new Date(data.foundingDate).toISOString();
|
||||
} else {
|
||||
submitData.foundingDate = null;
|
||||
}
|
||||
|
||||
if (isEdit) {
|
||||
updateMutation.mutate(submitData);
|
||||
} else {
|
||||
createMutation.mutate(submitData);
|
||||
}
|
||||
};
|
||||
|
||||
const isLoading = createMutation.isPending || updateMutation.isPending;
|
||||
const error = createMutation.error || updateMutation.error;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">
|
||||
{isEdit ? 'Kunde bearbeiten' : 'Neuer Kunde'}
|
||||
</h1>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
|
||||
{error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Card className="mb-6" title="Stammdaten">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Select
|
||||
label="Kundentyp"
|
||||
{...register('type')}
|
||||
options={[
|
||||
{ value: 'PRIVATE', label: 'Privatkunde' },
|
||||
{ value: 'BUSINESS', label: 'Geschäftskunde' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Anrede"
|
||||
{...register('salutation')}
|
||||
options={[
|
||||
{ value: 'Herr', label: 'Herr' },
|
||||
{ value: 'Frau', label: 'Frau' },
|
||||
{ value: 'Divers', label: 'Divers' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Vorname"
|
||||
{...register('firstName', { required: 'Vorname erforderlich' })}
|
||||
error={errors.firstName?.message}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Nachname"
|
||||
{...register('lastName', { required: 'Nachname erforderlich' })}
|
||||
error={errors.lastName?.message}
|
||||
/>
|
||||
|
||||
{customerType === 'BUSINESS' && (
|
||||
<>
|
||||
<Input
|
||||
label="Firmenname"
|
||||
{...register('companyName')}
|
||||
className="md:col-span-2"
|
||||
/>
|
||||
<Input
|
||||
label="Gründungsdatum"
|
||||
type="date"
|
||||
{...register('foundingDate')}
|
||||
value={watch('foundingDate') || ''}
|
||||
onClear={() => setValue('foundingDate', '' as any)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{customerType !== 'BUSINESS' && (
|
||||
<>
|
||||
<Input
|
||||
label="Geburtsdatum"
|
||||
type="date"
|
||||
{...register('birthDate')}
|
||||
value={watch('birthDate') || ''}
|
||||
onClear={() => setValue('birthDate', '' as any)}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Geburtsort"
|
||||
{...register('birthPlace')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="mb-6" title="Kontaktdaten">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="E-Mail"
|
||||
type="email"
|
||||
{...register('email')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Telefon"
|
||||
{...register('phone')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Mobil"
|
||||
{...register('mobile')}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{customerType === 'BUSINESS' && (
|
||||
<Card className="mb-6" title="Geschäftsdaten">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Steuernummer"
|
||||
{...register('taxNumber')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Handelsregisternummer"
|
||||
{...register('commercialRegisterNumber')}
|
||||
placeholder="z.B. HRB 12345"
|
||||
/>
|
||||
</div>
|
||||
{isEdit && (
|
||||
<p className="mt-4 text-sm text-gray-500">
|
||||
Dokumente (Gewerbeanmeldung, Handelsregisterauszug) können nach dem Speichern in der Kundendetailansicht hochgeladen werden.
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="mb-6" title="Notizen">
|
||||
<textarea
|
||||
{...register('notes')}
|
||||
rows={4}
|
||||
className="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Interne Notizen..."
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button type="button" variant="secondary" onClick={() => navigate(-1)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Speichern...' : 'Speichern'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user