T08c: Frontend Mail UI + Global Search UI — 44 tests, tsc clean, vite build pass
- Mail page: 3-pane layout (folder tree + mail list + reading pane) - Compose modal: rich text editor (bold/italic/link), template picker, reply/forward pre-fill - Mail settings: accounts, signatures, rules, labels, vacation, PGP (6 tabs) - Shared mailbox selector: switch between personal + shared accounts - Mail search bar + attachment download + create-event-from-mail - Global search: tabs for companies/contacts/mails/files/events - Search autocomplete in TopBar (existing SearchDropdown) - API client: mail.ts (all endpoints) - Routes: /mail, /mail/settings - i18n: de.json + en.json mail + search translations - 44 new tests (4 test files), full regression 318/318 pass - tsc --noEmit: 0 errors, vite build: 267 modules
This commit is contained in:
leocrm-bot
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* Signature manager — CRUD for mail signatures.
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
|
||||
import {
|
||||
fetchSignatures,
|
||||
createSignature,
|
||||
updateSignature,
|
||||
deleteSignature,
|
||||
type MailSignature,
|
||||
} from '@/api/mail';
|
||||
|
||||
export function SignatureManager() {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const [signatures, setSignatures] = useState<MailSignature[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [editing, setEditing] = useState<MailSignature | null>(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [name, setName] = useState('');
|
||||
const [bodyHtml, setBodyHtml] = useState('');
|
||||
const [isDefault, setIsDefault] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState<MailSignature | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
fetchSignatures()
|
||||
.then((data) => {
|
||||
setSignatures(data);
|
||||
setError(null);
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleNew = () => {
|
||||
setEditing(null);
|
||||
setName('');
|
||||
setBodyHtml('');
|
||||
setIsDefault(false);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleEdit = (sig: MailSignature) => {
|
||||
setEditing(sig);
|
||||
setName(sig.name);
|
||||
setBodyHtml(sig.body_html);
|
||||
setIsDefault(sig.is_default);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
if (!name.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
if (editing) {
|
||||
const updated = await updateSignature(editing.id, { name, body_html: bodyHtml, is_default: isDefault });
|
||||
setSignatures((prev) => prev.map((s) => (s.id === editing.id ? updated : s)));
|
||||
toast.success(t('mail.signatureUpdated'));
|
||||
} else {
|
||||
const created = await createSignature({ name, body_html: bodyHtml, is_default: isDefault });
|
||||
setSignatures((prev) => [...prev, created]);
|
||||
toast.success(t('mail.signatureCreated'));
|
||||
}
|
||||
setShowForm(false);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [editing, name, bodyHtml, isDefault, toast, t]);
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
if (!deleteTarget) return;
|
||||
try {
|
||||
await deleteSignature(deleteTarget.id);
|
||||
setSignatures((prev) => prev.filter((s) => s.id !== deleteTarget.id));
|
||||
toast.success(t('mail.signatureDeleted'));
|
||||
setDeleteTarget(null);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
}, [deleteTarget, toast, t]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8" data-testid="signature-manager-loading">
|
||||
<svg className="animate-spin h-5 w-5 text-secondary-400" fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-4 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="signature-manager-error">
|
||||
<p className="text-sm text-danger-700">{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-testid="signature-manager">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-secondary-900">{t('mail.signatures')}</h3>
|
||||
<Button size="sm" onClick={handleNew} data-testid="new-signature-btn">{t('mail.newSignature')}</Button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<Card className="mb-4" data-testid="signature-form">
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
label={t('mail.signatureName')}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={t('mail.signatureName')}
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.signatureBody')}</label>
|
||||
<textarea
|
||||
value={bodyHtml}
|
||||
onChange={(e) => setBodyHtml(e.target.value)}
|
||||
className="w-full min-h-24 border border-secondary-300 rounded-md p-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
placeholder="<p>Regards, John</p>"
|
||||
data-testid="signature-body"
|
||||
/>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm text-secondary-700">
|
||||
<input type="checkbox" checked={isDefault} onChange={(e) => setIsDefault(e.target.checked)} className="rounded" />
|
||||
{t('mail.defaultSignature')}
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleSave} isLoading={saving} size="sm">{t('common.save')}</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{signatures.length === 0 && !showForm ? (
|
||||
<EmptyState title={t('mail.noSignatures')} description={t('mail.noSignaturesDesc')} />
|
||||
) : (
|
||||
<div className="space-y-2" data-testid="signature-list">
|
||||
{signatures.map((sig) => (
|
||||
<Card key={sig.id}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-secondary-900">{sig.name}</p>
|
||||
{sig.is_default && <span className="text-xs text-primary-600">{t('mail.defaultSignature')}</span>}
|
||||
<p className="text-sm text-secondary-500 mt-1 truncate" dangerouslySetInnerHTML={{ __html: sig.body_html }} />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={() => handleEdit(sig)} data-testid={`edit-signature-${sig.id}`}>{t('common.edit')}</Button>
|
||||
<Button variant="danger" size="sm" onClick={() => setDeleteTarget(sig)} data-testid={`delete-signature-${sig.id}`}>{t('common.delete')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!deleteTarget}
|
||||
title={t('mail.deleteSignature')}
|
||||
message={t('mail.confirmDeleteSignature')}
|
||||
confirmLabel={t('common.delete')}
|
||||
variant="danger"
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user