222 lines
10 KiB
TypeScript
222 lines
10 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { Modal } from '@/components/ui/Modal';
|
||
|
|
import { Input } from '@/components/ui/Input';
|
||
|
|
import { Select } from '@/components/ui/Select';
|
||
|
|
import { Button } from '@/components/ui/Button';
|
||
|
|
import { useToast } from '@/components/ui/Toast';
|
||
|
|
import {
|
||
|
|
type UnifiedContact,
|
||
|
|
useCreateUnifiedContact,
|
||
|
|
useUpdateUnifiedContact,
|
||
|
|
} from '@/api/hooks';
|
||
|
|
|
||
|
|
export interface ContactEditModalProps {
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
contact?: UnifiedContact | null;
|
||
|
|
onSaved?: (id: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ContactEditModal({ open, onClose, contact, onSaved }: ContactEditModalProps) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const toast = useToast();
|
||
|
|
const createMutation = useCreateUnifiedContact();
|
||
|
|
const updateMutation = useUpdateUnifiedContact();
|
||
|
|
const isEdit = !!contact;
|
||
|
|
|
||
|
|
const [type, setType] = useState<'company' | 'person'>('company');
|
||
|
|
const [name, setName] = useState('');
|
||
|
|
const [firstname, setFirstname] = useState('');
|
||
|
|
const [surname, setSurname] = useState('');
|
||
|
|
const [code, setCode] = useState('');
|
||
|
|
const [email1, setEmail1] = useState('');
|
||
|
|
const [email2, setEmail2] = useState('');
|
||
|
|
const [phone1, setPhone1] = useState('');
|
||
|
|
const [phone2, setPhone2] = useState('');
|
||
|
|
const [website, setWebsite] = useState('');
|
||
|
|
const [mailingStreet, setMailingStreet] = useState('');
|
||
|
|
const [mailingNumber, setMailingNumber] = useState('');
|
||
|
|
const [mailingPostalcode, setMailingPostalcode] = useState('');
|
||
|
|
const [mailingCity, setMailingCity] = useState('');
|
||
|
|
const [mailingCountry, setMailingCountry] = useState('');
|
||
|
|
const [vatCode, setVatCode] = useState('');
|
||
|
|
const [fiscalCode, setFiscalCode] = useState('');
|
||
|
|
const [commerceCode, setCommerceCode] = useState('');
|
||
|
|
const [bic, setBic] = useState('');
|
||
|
|
const [bankAccount, setBankAccount] = useState('');
|
||
|
|
const [tags, setTags] = useState('');
|
||
|
|
const [projectnote, setProjectnote] = useState('');
|
||
|
|
const [contactWarning, setContactWarning] = useState('');
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (open) {
|
||
|
|
setType((contact?.type as 'company' | 'person') || 'company');
|
||
|
|
setName(contact?.name || '');
|
||
|
|
setFirstname(contact?.firstname || '');
|
||
|
|
setSurname(contact?.surname || '');
|
||
|
|
setCode(contact?.code || '');
|
||
|
|
setEmail1(contact?.email_1 || '');
|
||
|
|
setEmail2(contact?.email_2 || '');
|
||
|
|
setPhone1(contact?.phone_1 || '');
|
||
|
|
setPhone2(contact?.phone_2 || '');
|
||
|
|
setWebsite(contact?.website || '');
|
||
|
|
setMailingStreet(contact?.mailing_street || '');
|
||
|
|
setMailingNumber(contact?.mailing_number || '');
|
||
|
|
setMailingPostalcode(contact?.mailing_postalcode || '');
|
||
|
|
setMailingCity(contact?.mailing_city || '');
|
||
|
|
setMailingCountry(contact?.mailing_country || '');
|
||
|
|
setVatCode(contact?.vat_code || '');
|
||
|
|
setFiscalCode(contact?.fiscal_code || '');
|
||
|
|
setCommerceCode(contact?.commerce_code || '');
|
||
|
|
setBic(contact?.bic || '');
|
||
|
|
setBankAccount(contact?.bank_account || '');
|
||
|
|
setTags(contact?.tags || '');
|
||
|
|
setProjectnote(contact?.projectnote || '');
|
||
|
|
setContactWarning(contact?.contact_warning || '');
|
||
|
|
}
|
||
|
|
}, [open, contact]);
|
||
|
|
|
||
|
|
const handleSave = async () => {
|
||
|
|
const data: Partial<UnifiedContact> = {
|
||
|
|
type,
|
||
|
|
name: type === 'company' ? name : null,
|
||
|
|
firstname: type === 'person' ? firstname : null,
|
||
|
|
surname: type === 'person' ? surname : null,
|
||
|
|
code: code || null,
|
||
|
|
email_1: email1 || null,
|
||
|
|
email_2: email2 || null,
|
||
|
|
phone_1: phone1 || null,
|
||
|
|
phone_2: phone2 || null,
|
||
|
|
website: website || null,
|
||
|
|
mailing_street: mailingStreet || null,
|
||
|
|
mailing_number: mailingNumber || null,
|
||
|
|
mailing_postalcode: mailingPostalcode || null,
|
||
|
|
mailing_city: mailingCity || null,
|
||
|
|
mailing_country: mailingCountry || null,
|
||
|
|
vat_code: vatCode || null,
|
||
|
|
fiscal_code: fiscalCode || null,
|
||
|
|
commerce_code: commerceCode || null,
|
||
|
|
bic: bic || null,
|
||
|
|
bank_account: bankAccount || null,
|
||
|
|
tags: tags || null,
|
||
|
|
projectnote: projectnote || null,
|
||
|
|
contact_warning: contactWarning || null,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
if (isEdit && contact) {
|
||
|
|
await updateMutation.mutateAsync({ id: contact.id, data });
|
||
|
|
toast.success(t('contacts.updated'));
|
||
|
|
onSaved?.(contact.id);
|
||
|
|
} else {
|
||
|
|
const result = await createMutation.mutateAsync(data) as { id: string };
|
||
|
|
toast.success(t('contacts.created'));
|
||
|
|
onSaved?.(result.id);
|
||
|
|
}
|
||
|
|
onClose();
|
||
|
|
} catch (err: any) {
|
||
|
|
toast.error(err.message || (isEdit ? t('contacts.updateFailed') : t('contacts.createFailed')));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal open={open} onClose={onClose} title={isEdit ? t('contacts.edit') : t('contacts.create')} size="xl" fullScreenMobile>
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* Type */}
|
||
|
|
<Select
|
||
|
|
label={t('contacts.type')}
|
||
|
|
value={type}
|
||
|
|
onChange={(e) => setType(e.target.value as 'company' | 'person')}
|
||
|
|
options={[
|
||
|
|
{ value: 'company', label: t('contacts.companies') },
|
||
|
|
{ value: 'person', label: t('contacts.persons') },
|
||
|
|
]}
|
||
|
|
data-testid="contact-type-select"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Name fields */}
|
||
|
|
{type === 'company' ? (
|
||
|
|
<Input label={t('contacts.name')} value={name} onChange={(e) => setName(e.target.value)} required data-testid="contact-name-input" placeholder="TechCorp GmbH" />
|
||
|
|
) : (
|
||
|
|
<div className="grid grid-cols-2 gap-3">
|
||
|
|
<Input label={t('contacts.firstName')} value={firstname} onChange={(e) => setFirstname(e.target.value)} data-testid="contact-first-name-input" />
|
||
|
|
<Input label={t('contacts.lastName')} value={surname} onChange={(e) => setSurname(e.target.value)} data-testid="contact-last-name-input" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Code */}
|
||
|
|
<Input label={t('contacts.code')} value={code} onChange={(e) => setCode(e.target.value)} placeholder="K-00123" />
|
||
|
|
|
||
|
|
{/* Communication */}
|
||
|
|
<div className="border border-secondary-200 rounded-lg p-3">
|
||
|
|
<h3 className="text-sm font-semibold text-secondary-700 mb-2">{t('contacts.communication')}</h3>
|
||
|
|
<div className="grid grid-cols-2 gap-3">
|
||
|
|
<Input label={t('contacts.email') + ' 1'} type="email" value={email1} onChange={(e) => setEmail1(e.target.value)} />
|
||
|
|
<Input label={t('contacts.email') + ' 2'} type="email" value={email2} onChange={(e) => setEmail2(e.target.value)} />
|
||
|
|
<Input label={t('contacts.phone') + ' 1'} value={phone1} onChange={(e) => setPhone1(e.target.value)} />
|
||
|
|
<Input label={t('contacts.phone') + ' 2'} value={phone2} onChange={(e) => setPhone2(e.target.value)} />
|
||
|
|
<Input label={t('contacts.website')} value={website} onChange={(e) => setWebsite(e.target.value)} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mailing Address */}
|
||
|
|
<div className="border border-secondary-200 rounded-lg p-3">
|
||
|
|
<h3 className="text-sm font-semibold text-secondary-700 mb-2">{t('contacts.mailingAddress')}</h3>
|
||
|
|
<div className="grid grid-cols-2 gap-3">
|
||
|
|
<Input label={t('address.street')} value={mailingStreet} onChange={(e) => setMailingStreet(e.target.value)} />
|
||
|
|
<Input label={t('address.streetNumber')} value={mailingNumber} onChange={(e) => setMailingNumber(e.target.value)} />
|
||
|
|
<Input label={t('address.zip')} value={mailingPostalcode} onChange={(e) => setMailingPostalcode(e.target.value)} />
|
||
|
|
<Input label={t('address.city')} value={mailingCity} onChange={(e) => setMailingCity(e.target.value)} />
|
||
|
|
<Input label={t('address.country')} value={mailingCountry} onChange={(e) => setMailingCountry(e.target.value)} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Financial */}
|
||
|
|
<div className="border border-secondary-200 rounded-lg p-3">
|
||
|
|
<h3 className="text-sm font-semibold text-secondary-700 mb-2">{t('contacts.financial')}</h3>
|
||
|
|
<div className="grid grid-cols-2 gap-3">
|
||
|
|
<Input label={t('contacts.vatCode')} value={vatCode} onChange={(e) => setVatCode(e.target.value)} />
|
||
|
|
<Input label={t('contacts.fiscalCode')} value={fiscalCode} onChange={(e) => setFiscalCode(e.target.value)} />
|
||
|
|
<Input label={t('contacts.commerceCode')} value={commerceCode} onChange={(e) => setCommerceCode(e.target.value)} />
|
||
|
|
<Input label={t('contacts.bic')} value={bic} onChange={(e) => setBic(e.target.value)} />
|
||
|
|
<Input label={t('contacts.bankAccount')} value={bankAccount} onChange={(e) => setBankAccount(e.target.value)} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Notes */}
|
||
|
|
<div className="border border-secondary-200 rounded-lg p-3">
|
||
|
|
<h3 className="text-sm font-semibold text-secondary-700 mb-2">{t('contacts.notes')}</h3>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<Input label={t('contacts.tags')} value={tags} onChange={(e) => setTags(e.target.value)} placeholder="tag1, tag2" />
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">{t('contacts.projectnote')}</label>
|
||
|
|
<textarea
|
||
|
|
value={projectnote}
|
||
|
|
onChange={(e) => setProjectnote(e.target.value)}
|
||
|
|
className="w-full px-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-20"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">{t('contacts.contactWarning')}</label>
|
||
|
|
<textarea
|
||
|
|
value={contactWarning}
|
||
|
|
onChange={(e) => setContactWarning(e.target.value)}
|
||
|
|
className="w-full px-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-20"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="flex justify-end gap-2 pt-2">
|
||
|
|
<Button variant="secondary" onClick={onClose}>{t('common.cancel')}</Button>
|
||
|
|
<Button onClick={handleSave} isLoading={createMutation.isPending || updateMutation.isPending} data-testid="contact-submit-btn">
|
||
|
|
{isEdit ? t('common.save') : t('common.create')}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|