UI: ContactFolderTree als echter Baum - keine Trennung Firmen/Privat, ein Baum mit allen Kontakten, Personen-Symbol statt Ordner-Symbol
This commit is contained in:
Agent Zero
@@ -121,8 +121,7 @@ describe('ContactsListPage (Unified)', () => {
|
||||
const folderTree = getFirstByTestId('contact-folder-tree');
|
||||
expect(folderTree).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('Alle Kontakte')).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('Firmen')).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('Privatpersonen')).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('Ordner')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders contact list with contacts', () => {
|
||||
|
||||
@@ -20,7 +20,7 @@ export interface ContactFolderTreeProps {
|
||||
contacts?: { id: string; displayname: string; type: string; folder_id?: string | null }[];
|
||||
}
|
||||
|
||||
// ── Icons ──
|
||||
// Icons
|
||||
|
||||
const icon = (path: string, cls = 'w-4 h-4') => (
|
||||
<svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
@@ -39,18 +39,14 @@ const chevron = (open: boolean) => (
|
||||
|
||||
const ICONS = {
|
||||
all: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6-3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
|
||||
company: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
|
||||
person: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
|
||||
tag: 'M7 7h.01M7 3h5a1.99 1.99 0 01.832.184l4 2A2 2 0 0118 7v10a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2z',
|
||||
// Contact person icon (used instead of folder icon)
|
||||
folder: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6-3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
|
||||
contactPerson: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
|
||||
edit: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
|
||||
trash: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
|
||||
plus: 'M12 4v16m8-8H4',
|
||||
};
|
||||
|
||||
// ── Context Menu ──
|
||||
// Context Menu
|
||||
|
||||
interface ContextMenuState {
|
||||
x: number;
|
||||
@@ -84,7 +80,7 @@ function ContextMenu({
|
||||
if (state.type === 'folder') {
|
||||
items.push({ label: 'Umbenennen', action: () => { onRename(state.id!); onClose(); } });
|
||||
items.push({ label: 'Neuer Unterordner', action: () => { onNewSubfolder(state.id!); onClose(); } });
|
||||
items.push({ label: 'Löschen', action: () => { onDelete(state.id!); onClose(); }, danger: true });
|
||||
items.push({ label: 'L\u00f6schen', action: () => { onDelete(state.id!); onClose(); }, danger: true });
|
||||
} else {
|
||||
items.push({ label: 'Neuer Ordner', action: () => { onNewFolder(); onClose(); } });
|
||||
}
|
||||
@@ -111,7 +107,37 @@ function ContextMenu({
|
||||
);
|
||||
}
|
||||
|
||||
// ── Folder Tree Item ──
|
||||
// Contact Leaf Node
|
||||
|
||||
function ContactLeaf({
|
||||
contact,
|
||||
depth,
|
||||
onSelectFolder,
|
||||
}: {
|
||||
contact: { id: string; displayname: string; type: string; folder_id?: string | null };
|
||||
depth: number;
|
||||
onSelectFolder: (folderId: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.setData('text/plain', contact.id);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}}
|
||||
onClick={() => contact.folder_id && onSelectFolder(contact.folder_id)}
|
||||
className={clsx(
|
||||
'group flex items-center gap-2 px-3 py-1 text-sm cursor-grab rounded-md hover:bg-secondary-100 min-h-touch',
|
||||
)}
|
||||
style={{ paddingLeft: depth * 12 + 32 }}
|
||||
>
|
||||
{icon(ICONS.person, 'w-3.5 h-3.5 text-secondary-400 flex-shrink-0')}
|
||||
<span className="flex-1 truncate text-secondary-600">{contact.displayname}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Folder Tree Item
|
||||
|
||||
function FolderTreeItem({
|
||||
node,
|
||||
@@ -143,7 +169,6 @@ function FolderTreeItem({
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Folder header — drop target */}
|
||||
<div
|
||||
onDragOver={(e) => onDragOver(e, node.id)}
|
||||
onDragLeave={() => onDragLeave(node.id)}
|
||||
@@ -165,8 +190,7 @@ function FolderTreeItem({
|
||||
}}
|
||||
>
|
||||
{chevron(expanded)}
|
||||
{/* Contact person icon instead of folder icon */}
|
||||
{icon(ICONS.contactPerson, 'w-4 h-4 text-secondary-400')}
|
||||
{icon(ICONS.person, 'w-4 h-4 text-secondary-400')}
|
||||
<span className="flex-1 truncate">{node.name}</span>
|
||||
{node.contact_count > 0 && (
|
||||
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
|
||||
@@ -181,40 +205,25 @@ function FolderTreeItem({
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onContextMenu(e, 'folder', node.id); }}
|
||||
className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600 p-0.5"
|
||||
title="Löschen"
|
||||
title="L\u00f6schen"
|
||||
>
|
||||
{icon(ICONS.trash, 'w-3.5 h-3.5')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Contacts inside folder (leaf nodes) */}
|
||||
{expanded && folderContacts.length > 0 && (
|
||||
<div>
|
||||
{folderContacts.map((contact) => (
|
||||
<div
|
||||
<ContactLeaf
|
||||
key={contact.id}
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.setData('text/plain', contact.id);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}}
|
||||
onClick={() => onSelectFolder(node.id)}
|
||||
className={clsx(
|
||||
'group flex items-center gap-2 px-3 py-1 text-sm cursor-grab rounded-md hover:bg-secondary-100 min-h-touch',
|
||||
)}
|
||||
style={{ paddingLeft: depth * 12 + 32 }}
|
||||
>
|
||||
{icon(
|
||||
contact.type === 'company' ? ICONS.company : ICONS.person,
|
||||
'w-3.5 h-3.5 text-secondary-400 flex-shrink-0',
|
||||
)}
|
||||
<span className="flex-1 truncate text-secondary-600">{contact.displayname}</span>
|
||||
</div>
|
||||
contact={contact}
|
||||
depth={depth + 1}
|
||||
onSelectFolder={onSelectFolder}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Child folders */}
|
||||
{expanded && node.children.map((child) => (
|
||||
<FolderTreeItem
|
||||
key={child.id}
|
||||
@@ -234,7 +243,7 @@ function FolderTreeItem({
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main Component ──
|
||||
// Main Component
|
||||
|
||||
export function ContactFolderTree({
|
||||
selectedFilter,
|
||||
@@ -244,10 +253,10 @@ export function ContactFolderTree({
|
||||
contacts = [],
|
||||
}: ContactFolderTreeProps) {
|
||||
const { t } = useTranslation();
|
||||
const [rootExpanded, setRootExpanded] = useState(true);
|
||||
const [tagsOpen, setTagsOpen] = useState(true);
|
||||
const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
|
||||
const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
|
||||
const [dragContactId, setDragContactId] = useState<string | null>(null);
|
||||
|
||||
const { data: folders, isLoading: foldersLoading } = useContactFolders();
|
||||
const createFolderMut = useCreateContactFolder();
|
||||
@@ -258,6 +267,8 @@ export function ContactFolderTree({
|
||||
const folderList = folders ?? [];
|
||||
const tree = buildFolderTree(folderList);
|
||||
|
||||
const rootContacts = contacts.filter((c) => !c.folder_id);
|
||||
|
||||
const itemCls = (active: boolean) =>
|
||||
clsx(
|
||||
'flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-sm font-medium min-h-touch text-left',
|
||||
@@ -291,7 +302,7 @@ export function ContactFolderTree({
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
if (!confirm('Ordner löschen? Kontakte bleiben erhalten, werden aber keinem Ordner mehr zugeordnet.')) return;
|
||||
if (!confirm('Ordner l\u00f6schen? Kontakte bleiben erhalten, werden aber keinem Ordner mehr zugeordnet.')) return;
|
||||
deleteFolderMut.mutate(id);
|
||||
};
|
||||
|
||||
@@ -314,7 +325,6 @@ export function ContactFolderTree({
|
||||
moveContactMut.mutate({ contactId, folderId });
|
||||
};
|
||||
|
||||
// Root drop zone (unassign from folder)
|
||||
const handleRootDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
const contactId = e.dataTransfer.getData('text/plain');
|
||||
@@ -326,41 +336,46 @@ export function ContactFolderTree({
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleSelectFolder = useCallback((folderId: string) => {
|
||||
onSelect(`folder:${folderId}` as ContactFilter);
|
||||
}, [onSelect]);
|
||||
|
||||
return (
|
||||
<nav className="space-y-0.5" aria-label={t('contacts.title')} data-testid="contact-folder-tree">
|
||||
{/* Alle Kontakte */}
|
||||
<div
|
||||
onDragOver={handleRootDragOver}
|
||||
onDrop={handleRootDrop}
|
||||
onContextMenu={(e) => handleContextMenu(e, 'root', null)}
|
||||
>
|
||||
<button
|
||||
onClick={() => onSelect('all')}
|
||||
onClick={() => {
|
||||
setRootExpanded(!rootExpanded);
|
||||
onSelect('all');
|
||||
}}
|
||||
className={itemCls(selectedFilter === 'all')}
|
||||
aria-current={selectedFilter === 'all' ? 'true' : undefined}
|
||||
aria-expanded={rootExpanded}
|
||||
>
|
||||
{chevron(rootExpanded)}
|
||||
{icon(ICONS.all)}
|
||||
<span>{t('contacts.allContacts')}</span>
|
||||
{contacts.length > 0 && (
|
||||
<span className="text-xs text-secondary-400 tabular-nums ml-auto">{contacts.length}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Firmen */}
|
||||
<button
|
||||
onClick={() => onSelect('company')}
|
||||
className={itemCls(selectedFilter === 'company')}
|
||||
aria-current={selectedFilter === 'company' ? 'true' : undefined}
|
||||
>
|
||||
{icon(ICONS.company)}
|
||||
<span>{t('contacts.companies')}</span>
|
||||
</button>
|
||||
{rootExpanded && (
|
||||
<div className="mt-0.5">
|
||||
{rootContacts.map((contact) => (
|
||||
<ContactLeaf
|
||||
key={contact.id}
|
||||
contact={contact}
|
||||
depth={0}
|
||||
onSelectFolder={handleSelectFolder}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Privatpersonen */}
|
||||
<button
|
||||
onClick={() => onSelect('person')}
|
||||
className={itemCls(selectedFilter === 'person')}
|
||||
aria-current={selectedFilter === 'person' ? 'true' : undefined}
|
||||
>
|
||||
{icon(ICONS.person)}
|
||||
<span>{t('contacts.persons')}</span>
|
||||
</button>
|
||||
|
||||
{/* Folders section */}
|
||||
<div className="pt-1">
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
<div className="flex items-center justify-between px-2 py-1 mt-1">
|
||||
<span className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">Ordner</span>
|
||||
<button
|
||||
onClick={handleNewFolder}
|
||||
@@ -377,7 +392,7 @@ export function ContactFolderTree({
|
||||
node={node}
|
||||
depth={0}
|
||||
selectedFilter={selectedFilter}
|
||||
onSelectFolder={(folderId) => onSelect(`folder:${folderId}` as ContactFilter)}
|
||||
onSelectFolder={handleSelectFolder}
|
||||
onContextMenu={handleContextMenu}
|
||||
isDragOver={dragOverFolderId === node.id}
|
||||
onDragOver={handleDragOver}
|
||||
@@ -387,7 +402,6 @@ export function ContactFolderTree({
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Root drop zone — unassign contact */}
|
||||
<div
|
||||
onDragOver={handleRootDragOver}
|
||||
onDrop={handleRootDrop}
|
||||
@@ -399,8 +413,9 @@ export function ContactFolderTree({
|
||||
<div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tags — collapsible */}
|
||||
{tags.length > 0 && (
|
||||
<div className="pt-1">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user