Leopoldadmin/leocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ContactFolderTree nur Ordner-Baum ohne Kontakte, Kontakte in mittlerer Liste

Browse Source
This commit is contained in:
Agent Zero
2026-07-20 07:36:35 +02:00
parent 3129f407f5
commit 35fcd2a9d4
2 changed files with 37 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/__tests__/contacts/ContactsList.test.tsx
-1
View File
@@ -121,7 +121,6 @@ describe('ContactsListPage (Unified)', () => {
const folderTree = getFirstByTestId('contact-folder-tree');
expect(folderTree).toBeInTheDocument();
expect(within(folderTree).getByText('Alle Kontakte')).toBeInTheDocument();
expect(within(folderTree).getByText('Ordner')).toBeInTheDocument();
});
it('renders contact list with contacts', () => {
frontend/src/components/contacts/ContactFolderTree.tsx
+37 -116
View File
@@ -39,7 +39,7 @@ 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',
person: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
folder: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z',
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',
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',
@@ -107,36 +107,6 @@ function ContextMenu({
);
}
// 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({
@@ -149,7 +119,6 @@ function FolderTreeItem({
onDragOver,
onDragLeave,
onDrop,
contacts,
}: {
node: ContactFolderTreeNode;
depth: number;
@@ -160,12 +129,10 @@ function FolderTreeItem({
onDragOver: (e: React.DragEvent, folderId: string) => void;
onDragLeave: (folderId: string) => void;
onDrop: (e: React.DragEvent, folderId: string) => void;
contacts: { id: string; displayname: string; type: string; folder_id?: string | null }[];
}) {
const [expanded, setExpanded] = useState(true);
const folderKey = `folder:${node.id}` as ContactFilter;
const isActive = selectedFilter === folderKey;
const folderContacts = contacts.filter((c) => c.folder_id === node.id);
return (
<div>
@@ -190,7 +157,7 @@ function FolderTreeItem({
}}
>
{chevron(expanded)}
{icon(ICONS.person, 'w-4 h-4 text-secondary-400')}
{icon(ICONS.folder, '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>
@@ -211,19 +178,6 @@ function FolderTreeItem({
</button>
</div>
{expanded && folderContacts.length > 0 && (
<div>
{folderContacts.map((contact) => (
<ContactLeaf
key={contact.id}
contact={contact}
depth={depth + 1}
onSelectFolder={onSelectFolder}
/>
))}
</div>
)}
{expanded && node.children.map((child) => (
<FolderTreeItem
key={child.id}
@@ -236,7 +190,6 @@ function FolderTreeItem({
onDragOver={onDragOver}
onDragLeave={onDragLeave}
onDrop={onDrop}
contacts={contacts}
/>
))}
</div>
@@ -253,7 +206,6 @@ 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);
@@ -267,8 +219,6 @@ 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',
@@ -342,80 +292,51 @@ export function ContactFolderTree({
return (
<nav className="space-y-0.5" aria-label={t('contacts.title')} data-testid="contact-folder-tree">
{/* Alle Kontakte */}
<button
onClick={() => onSelect('all')}
className={itemCls(selectedFilter === 'all')}
aria-current={selectedFilter === 'all' ? 'true' : undefined}
>
{icon(ICONS.all)}
<span>{t('contacts.allContacts')}</span>
</button>
{/* Folder tree */}
<div
onDragOver={handleRootDragOver}
onDrop={handleRootDrop}
onContextMenu={(e) => handleContextMenu(e, 'root', null)}
>
<button
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>
{tree.map((node) => (
<FolderTreeItem
key={node.id}
node={node}
depth={0}
selectedFilter={selectedFilter}
onSelectFolder={handleSelectFolder}
onContextMenu={handleContextMenu}
isDragOver={dragOverFolderId === node.id}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
/>
))}
{rootExpanded && (
<div className="mt-0.5">
{rootContacts.map((contact) => (
<ContactLeaf
key={contact.id}
contact={contact}
depth={0}
onSelectFolder={handleSelectFolder}
/>
))}
{/* Root drop zone */}
<div
onDragOver={handleRootDragOver}
onDrop={handleRootDrop}
className="min-h-[12px] mt-1 rounded-md transition-colors hover:bg-secondary-50"
onContextMenu={(e) => handleContextMenu(e, 'root', null)}
/>
<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}
className="text-secondary-400 hover:text-primary-600 p-0.5"
title="Neuer Ordner"
>
{icon(ICONS.plus, 'w-3.5 h-3.5')}
</button>
</div>
{tree.map((node) => (
<FolderTreeItem
key={node.id}
node={node}
depth={0}
selectedFilter={selectedFilter}
onSelectFolder={handleSelectFolder}
onContextMenu={handleContextMenu}
isDragOver={dragOverFolderId === node.id}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
contacts={contacts}
/>
))}
<div
onDragOver={handleRootDragOver}
onDrop={handleRootDrop}
className="min-h-[12px] mt-1 rounded-md transition-colors hover:bg-secondary-50"
onContextMenu={(e) => handleContextMenu(e, 'root', null)}
/>
{(foldersLoading || loading) && (
<div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
)}
</div>
{(foldersLoading || loading) && (
<div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
)}
</div>
{/* Tags */}
{tags.length > 0 && (
<div className="pt-1">
<button