Agent Zero
1312 lines
48 KiB
TypeScript
1312 lines
48 KiB
TypeScript
import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
|
|
// TODO: P2-F18 — Replace hardcoded ALL_COLUMNS with backend/manifest config
|
|
import clsx from 'clsx';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Pagination } from '@/components/ui/Pagination';
|
|
import { EmptyState } from '@/components/ui/EmptyState';
|
|
import type { UnifiedContact } from '@/api/hooks';
|
|
import { useContactFolders } from '@/api/contacts';
|
|
import type { ContactFolder } from '@/api/contactFolders';
|
|
import type { SortState, SortCondition } from '@/components/contacts/SortPanel';
|
|
import type { GroupState, GroupedContacts } from '@/components/contacts/GroupPanel';
|
|
import { Loader2, ChevronRight, ChevronDown, Settings, GripVertical, Info } from 'lucide-react';
|
|
|
|
export type ContactViewMode = 'list' | 'table' | 'cards';
|
|
|
|
// ─── Column Definitions ──────────────────────────────────────────────────────
|
|
|
|
interface ColumnDef {
|
|
key: string;
|
|
label: string;
|
|
width: number;
|
|
sortable: boolean;
|
|
reorderable: boolean;
|
|
render: (contact: UnifiedContact) => React.ReactNode;
|
|
}
|
|
|
|
const ALL_COLUMNS: ColumnDef[] = [
|
|
{
|
|
key: 'checkbox',
|
|
label: '',
|
|
width: 40,
|
|
sortable: false,
|
|
reorderable: false,
|
|
render: (c) => (
|
|
<input type="checkbox" className="rounded border-secondary-300" aria-label={getDisplayName(c)} />
|
|
),
|
|
},
|
|
{
|
|
key: 'type',
|
|
label: 'Typ',
|
|
width: 80,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <TypeBadge type={c.type} />,
|
|
},
|
|
{
|
|
key: 'displayname',
|
|
label: 'Anzeigename',
|
|
width: 200,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="font-medium text-secondary-900">{getDisplayName(c)}</span>,
|
|
},
|
|
{
|
|
key: 'email_1',
|
|
label: 'E-Mail',
|
|
width: 200,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{getEmail(c)}</span>,
|
|
},
|
|
{
|
|
key: 'phone_1',
|
|
label: 'Telefon',
|
|
width: 150,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{getPhone(c)}</span>,
|
|
},
|
|
{
|
|
key: 'mailing_city',
|
|
label: 'Stadt',
|
|
width: 120,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{getCity(c)}</span>,
|
|
},
|
|
{
|
|
key: 'tags',
|
|
label: 'Tags',
|
|
width: 150,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => (
|
|
<div className="flex flex-wrap gap-1">
|
|
{getTags(c).slice(0, 3).map((tag) => (
|
|
<Badge key={tag} variant="secondary">{tag}</Badge>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'code',
|
|
label: 'Kunden-Nr.',
|
|
width: 120,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{c.code || '—'}</span>,
|
|
},
|
|
{
|
|
key: 'vat_code',
|
|
label: 'USt-IdNr.',
|
|
width: 120,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{c.vat_code || '—'}</span>,
|
|
},
|
|
{
|
|
key: 'firstname',
|
|
label: 'Vorname',
|
|
width: 120,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{c.firstname || '—'}</span>,
|
|
},
|
|
{
|
|
key: 'surname',
|
|
label: 'Nachname',
|
|
width: 120,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{c.surname || '—'}</span>,
|
|
},
|
|
{
|
|
key: 'mailing_postalcode',
|
|
label: 'PLZ',
|
|
width: 80,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{c.mailing_postalcode || '—'}</span>,
|
|
},
|
|
{
|
|
key: 'mailing_country',
|
|
label: 'Land',
|
|
width: 100,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{c.mailing_country || '—'}</span>,
|
|
},
|
|
{
|
|
key: 'website',
|
|
label: 'Website',
|
|
width: 150,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{c.website || '—'}</span>,
|
|
},
|
|
{
|
|
key: 'created_at',
|
|
label: 'Erstellt am',
|
|
width: 120,
|
|
sortable: true,
|
|
reorderable: true,
|
|
render: (c) => <span className="text-secondary-600">{formatDate(c.created_at)}</span>,
|
|
},
|
|
];
|
|
|
|
// Default visible column keys (in order)
|
|
const DEFAULT_VISIBLE_KEYS = ['checkbox', 'type', 'displayname', 'email_1', 'phone_1', 'mailing_city', 'tags'];
|
|
|
|
// ─── localStorage helpers ────────────────────────────────────────────────────
|
|
|
|
const LS_WIDTHS_KEY = 'contact-table-column-widths';
|
|
const LS_ORDER_KEY = 'contact-table-column-order';
|
|
const LS_VISIBLE_KEY = 'contact-table-visible-columns';
|
|
|
|
function loadColumnWidths(): Record<string, number> {
|
|
try {
|
|
const saved = localStorage.getItem(LS_WIDTHS_KEY);
|
|
if (saved) return JSON.parse(saved);
|
|
} catch { /* ignore */ }
|
|
return {};
|
|
}
|
|
|
|
function loadColumnOrder(): string[] {
|
|
try {
|
|
const saved = localStorage.getItem(LS_ORDER_KEY);
|
|
if (saved) {
|
|
const order: string[] = JSON.parse(saved);
|
|
const allKeys = ALL_COLUMNS.map((c) => c.key);
|
|
const valid = order.filter((k) => allKeys.includes(k));
|
|
const missing = allKeys.filter((k) => !valid.includes(k));
|
|
return [...valid, ...missing];
|
|
}
|
|
} catch { /* ignore */ }
|
|
return ALL_COLUMNS.map((c) => c.key);
|
|
}
|
|
|
|
function loadVisibleColumns(): string[] {
|
|
try {
|
|
const saved = localStorage.getItem(LS_VISIBLE_KEY);
|
|
if (saved) {
|
|
const visible: string[] = JSON.parse(saved);
|
|
const allKeys = ALL_COLUMNS.map((c) => c.key);
|
|
const valid = visible.filter((k) => allKeys.includes(k));
|
|
// Always include checkbox
|
|
if (!valid.includes('checkbox')) valid.unshift('checkbox');
|
|
return valid;
|
|
}
|
|
} catch { /* ignore */ }
|
|
return DEFAULT_VISIBLE_KEYS;
|
|
}
|
|
|
|
// ─── Helper functions ────────────────────────────────────────────────────────
|
|
|
|
function TypeBadge({ type }: { type: string }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Badge variant={type === 'company' ? 'primary' : 'info'}>
|
|
{type === 'company' ? t('contacts.companies') : t('contacts.persons')}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
function getDisplayName(c: UnifiedContact): string {
|
|
return c.displayname || c.name || [c.firstname, c.surname].filter(Boolean).join(' ') || c.email_1 || c.id;
|
|
}
|
|
|
|
function getInitials(c: UnifiedContact): string {
|
|
const name = getDisplayName(c);
|
|
return name.charAt(0).toUpperCase();
|
|
}
|
|
|
|
function getCity(c: UnifiedContact): string {
|
|
return c.mailing_city || c.visit_city || c.invoice_city || '—';
|
|
}
|
|
|
|
function getEmail(c: UnifiedContact): string {
|
|
return c.email_1 || c.email_2 || '—';
|
|
}
|
|
|
|
function getPhone(c: UnifiedContact): string {
|
|
return c.phone_1 || c.phone_2 || '—';
|
|
}
|
|
|
|
function getTags(c: UnifiedContact): string[] {
|
|
if (!c.tags) return [];
|
|
return c.tags.split(',').map((t) => t.trim()).filter(Boolean);
|
|
}
|
|
|
|
function formatDate(dateStr: string | undefined | null): string {
|
|
if (!dateStr) return '—';
|
|
const date = new Date(dateStr);
|
|
if (isNaN(date.getTime())) return '—';
|
|
return date.toLocaleDateString('de-DE');
|
|
}
|
|
|
|
// ─── Group tree ──────────────────────────────────────────────────────────────
|
|
|
|
interface GroupTreeNode {
|
|
key: string;
|
|
label: string;
|
|
contacts: UnifiedContact[];
|
|
children: GroupTreeNode[];
|
|
depth: number;
|
|
}
|
|
|
|
function buildGroupTree(groupedContacts: GroupedContacts[]): GroupTreeNode[] {
|
|
const root: GroupTreeNode = { key: 'root', label: '', contacts: [], children: [], depth: -1 };
|
|
|
|
for (const group of groupedContacts) {
|
|
const labelParts = group.label.split(' > ');
|
|
const keyParts = group.key.split('::').slice(1); // Remove 'all'
|
|
|
|
let current = root;
|
|
for (let i = 0; i < labelParts.length; i++) {
|
|
const label = labelParts[i];
|
|
const keyPart = keyParts[i] || label;
|
|
const fullKey = current.key === 'root' ? keyPart : `${current.key}::${keyPart}`;
|
|
|
|
let child = current.children.find((c) => c.key === fullKey);
|
|
if (!child) {
|
|
child = {
|
|
key: fullKey,
|
|
label,
|
|
contacts: [],
|
|
children: [],
|
|
depth: i,
|
|
};
|
|
current.children.push(child);
|
|
}
|
|
|
|
if (i === labelParts.length - 1) {
|
|
child.contacts = group.contacts;
|
|
}
|
|
|
|
current = child;
|
|
}
|
|
}
|
|
|
|
return root.children;
|
|
}
|
|
|
|
function countContactsInNode(node: GroupTreeNode): number {
|
|
if (node.contacts.length > 0) return node.contacts.length;
|
|
return node.children.reduce((sum, child) => sum + countContactsInNode(child), 0);
|
|
}
|
|
|
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
|
|
export interface ContactListProps {
|
|
contacts: UnifiedContact[];
|
|
selectedContactId: string | null;
|
|
onSelectContact: (contact: UnifiedContact) => void;
|
|
loading?: boolean;
|
|
currentPage: number;
|
|
total: number;
|
|
pageSize: number;
|
|
onPageChange: (page: number) => void;
|
|
viewMode: ContactViewMode;
|
|
sortBy: string;
|
|
sortOrder: 'asc' | 'desc';
|
|
onSortChange: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
|
|
// New props for multi-sort and grouping
|
|
sortState?: SortState;
|
|
onSortStateChange?: (s: SortState) => void;
|
|
groupState?: GroupState;
|
|
groupedContacts?: GroupedContacts[];
|
|
// Bulk selection props
|
|
selectedContactIds?: Set<string>;
|
|
onSelectionChange?: (ids: Set<string>) => void;
|
|
// Bulk action callbacks
|
|
onBulkDelete?: (ids: string[]) => void;
|
|
onBulkAssignFolder?: (ids: string[], folderId: string) => void;
|
|
onBulkAddTags?: (ids: string[], tags: string[]) => void;
|
|
}
|
|
|
|
export function ContactList({
|
|
contacts,
|
|
selectedContactId,
|
|
onSelectContact,
|
|
loading,
|
|
currentPage,
|
|
total,
|
|
pageSize,
|
|
onPageChange,
|
|
viewMode,
|
|
sortBy,
|
|
sortOrder,
|
|
onSortChange,
|
|
sortState,
|
|
onSortStateChange,
|
|
groupState,
|
|
groupedContacts,
|
|
selectedContactIds,
|
|
onSelectionChange,
|
|
onBulkDelete,
|
|
onBulkAssignFolder,
|
|
onBulkAddTags,
|
|
}: ContactListProps) {
|
|
const { t } = useTranslation();
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
// ── Table view state (hooks must be before early returns) ──
|
|
const [columnOrder, setColumnOrder] = useState<string[]>(loadColumnOrder);
|
|
const [columnWidths, setColumnWidths] = useState<Record<string, number>>(loadColumnWidths);
|
|
const [visibleColumns, setVisibleColumns] = useState<string[]>(loadVisibleColumns);
|
|
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
|
|
const resizeRef = useRef<{ key: string; startX: number; startWidth: number } | null>(null);
|
|
const dragColRef = useRef<string | null>(null);
|
|
|
|
// ── Contact folders for bulk assign (Feature 2) ──
|
|
const { data: folderData } = useContactFolders();
|
|
const folderList: ContactFolder[] = folderData ?? [];
|
|
|
|
// ── Column visibility dropdown state (Feature 1) ──
|
|
const [colMenuOpen, setColMenuOpen] = useState(false);
|
|
const colMenuRef = useRef<HTMLDivElement>(null);
|
|
|
|
// ── Custom sort drag-and-drop state (Feature 3) ──
|
|
const LS_CUSTOM_ORDER_KEY = 'contact-custom-order';
|
|
const [customOrder, setCustomOrder] = useState<string[]>(() => {
|
|
try {
|
|
const saved = localStorage.getItem(LS_CUSTOM_ORDER_KEY);
|
|
if (saved) return JSON.parse(saved);
|
|
} catch { /* ignore */ }
|
|
return [];
|
|
});
|
|
const dragRowRef = useRef<string | null>(null);
|
|
const isCustomSortActive = !sortState || sortState.conditions.length === 0;
|
|
|
|
// ── Bulk action bar state (Feature 2) ──
|
|
const [bulkDeleteConfirm, setBulkDeleteConfirm] = useState(false);
|
|
const [bulkFolderOpen, setBulkFolderOpen] = useState(false);
|
|
const [bulkTagsInput, setBulkTagsInput] = useState('');
|
|
const [bulkTagsOpen, setBulkTagsOpen] = useState(false);
|
|
const bulkFolderRef = useRef<HTMLDivElement>(null);
|
|
const bulkTagsRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Close column menu on outside click
|
|
useEffect(() => {
|
|
if (!colMenuOpen) return;
|
|
const handler = (e: MouseEvent) => {
|
|
if (colMenuRef.current && !colMenuRef.current.contains(e.target as Node)) {
|
|
setColMenuOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, [colMenuOpen]);
|
|
|
|
// Close bulk folder dropdown on outside click
|
|
useEffect(() => {
|
|
if (!bulkFolderOpen) return;
|
|
const handler = (e: MouseEvent) => {
|
|
if (bulkFolderRef.current && !bulkFolderRef.current.contains(e.target as Node)) {
|
|
setBulkFolderOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, [bulkFolderOpen]);
|
|
|
|
// Close bulk tags dropdown on outside click
|
|
useEffect(() => {
|
|
if (!bulkTagsOpen) return;
|
|
const handler = (e: MouseEvent) => {
|
|
if (bulkTagsRef.current && !bulkTagsRef.current.contains(e.target as Node)) {
|
|
setBulkTagsOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, [bulkTagsOpen]);
|
|
|
|
// ── Column visibility toggle (Feature 1) ──
|
|
const toggleColumnVisibility = useCallback((key: string) => {
|
|
if (key === 'checkbox') return; // checkbox always visible
|
|
setVisibleColumns((prev) => {
|
|
if (prev.includes(key)) {
|
|
const next = prev.filter((k) => k !== key);
|
|
localStorage.setItem(LS_VISIBLE_KEY, JSON.stringify(next));
|
|
return next;
|
|
} else {
|
|
const next = [...prev, key];
|
|
localStorage.setItem(LS_VISIBLE_KEY, JSON.stringify(next));
|
|
return next;
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
// ── Bulk selection handlers (Feature 2) ──
|
|
const toggleContactSelection = useCallback((contactId: string) => {
|
|
if (!onSelectionChange) return;
|
|
const next = new Set(selectedContactIds || new Set<string>());
|
|
if (next.has(contactId)) {
|
|
next.delete(contactId);
|
|
} else {
|
|
next.add(contactId);
|
|
}
|
|
onSelectionChange(next);
|
|
}, [onSelectionChange, selectedContactIds]);
|
|
|
|
const toggleSelectAll = useCallback(() => {
|
|
if (!onSelectionChange) return;
|
|
const current = selectedContactIds || new Set<string>();
|
|
const allSelected = contacts.every((c) => current.has(c.id));
|
|
if (allSelected) {
|
|
const next = new Set(current);
|
|
contacts.forEach((c) => next.delete(c.id));
|
|
onSelectionChange(next);
|
|
} else {
|
|
const next = new Set(current);
|
|
contacts.forEach((c) => next.add(c.id));
|
|
onSelectionChange(next);
|
|
}
|
|
}, [onSelectionChange, selectedContactIds, contacts]);
|
|
|
|
const clearSelection = useCallback(() => {
|
|
if (onSelectionChange) onSelectionChange(new Set<string>());
|
|
}, [onSelectionChange]);
|
|
|
|
// ── Custom sort drag-and-drop handlers (Feature 3) ──
|
|
const applyCustomOrder = useCallback((list: UnifiedContact[]): UnifiedContact[] => {
|
|
if (!isCustomSortActive || customOrder.length === 0) return list;
|
|
const orderMap = new Map<string, number>();
|
|
customOrder.forEach((id, idx) => orderMap.set(id, idx));
|
|
const ordered = [...list];
|
|
ordered.sort((a, b) => {
|
|
const ai = orderMap.has(a.id) ? orderMap.get(a.id)! : Infinity;
|
|
const bi = orderMap.has(b.id) ? orderMap.get(b.id)! : Infinity;
|
|
return ai - bi;
|
|
});
|
|
return ordered;
|
|
}, [isCustomSortActive, customOrder]);
|
|
|
|
const handleRowDragStart = useCallback((e: React.DragEvent, contactId: string) => {
|
|
if (!isCustomSortActive) return;
|
|
dragRowRef.current = contactId;
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setData('text/plain', contactId);
|
|
}, [isCustomSortActive]);
|
|
|
|
const handleRowDragOver = useCallback((e: React.DragEvent) => {
|
|
if (!isCustomSortActive) return;
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
}, [isCustomSortActive]);
|
|
|
|
const handleRowDrop = useCallback((e: React.DragEvent, targetId: string) => {
|
|
if (!isCustomSortActive) return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const sourceId = dragRowRef.current;
|
|
if (!sourceId || sourceId === targetId) return;
|
|
|
|
const currentContacts = applyCustomOrder(contacts);
|
|
const sourceIdx = currentContacts.findIndex((c) => c.id === sourceId);
|
|
const targetIdx = currentContacts.findIndex((c) => c.id === targetId);
|
|
if (sourceIdx === -1 || targetIdx === -1) return;
|
|
|
|
const reordered = [...currentContacts];
|
|
const [moved] = reordered.splice(sourceIdx, 1);
|
|
reordered.splice(targetIdx, 0, moved);
|
|
|
|
const newOrder = reordered.map((c) => c.id);
|
|
setCustomOrder(newOrder);
|
|
localStorage.setItem(LS_CUSTOM_ORDER_KEY, JSON.stringify(newOrder));
|
|
dragRowRef.current = null;
|
|
}, [isCustomSortActive, contacts, applyCustomOrder]);
|
|
|
|
// Auto-skip virtualization for small datasets
|
|
const shouldVirtualize = contacts.length >= 50;
|
|
|
|
const rowVirtualizer = useVirtualizer({
|
|
count: shouldVirtualize ? contacts.length : 0,
|
|
getScrollElement: () => scrollRef.current,
|
|
estimateSize: () => (viewMode === 'cards' ? 120 : 56),
|
|
overscan: 8,
|
|
enabled: shouldVirtualize,
|
|
});
|
|
|
|
// ── Table view derived data ──
|
|
const orderedVisibleColumns = useMemo(() => {
|
|
return columnOrder
|
|
.filter((key) => visibleColumns.includes(key))
|
|
.map((key) => ALL_COLUMNS.find((c) => c.key === key))
|
|
.filter((c): c is ColumnDef => c !== undefined);
|
|
}, [columnOrder, visibleColumns]);
|
|
|
|
const isGrouped = !!(groupState && groupState.conditions.length > 0 && groupedContacts);
|
|
|
|
const groupTree = useMemo(() => {
|
|
if (!isGrouped || !groupedContacts) return [];
|
|
return buildGroupTree(groupedContacts);
|
|
}, [isGrouped, groupedContacts]);
|
|
|
|
// Auto-expand new groups, preserve existing expansion state
|
|
useEffect(() => {
|
|
if (isGrouped && groupTree.length > 0) {
|
|
const allKeys = new Set<string>();
|
|
const collectKeys = (nodes: GroupTreeNode[]) => {
|
|
for (const node of nodes) {
|
|
allKeys.add(node.key);
|
|
if (node.children.length > 0) collectKeys(node.children);
|
|
}
|
|
};
|
|
collectKeys(groupTree);
|
|
setExpandedGroups((prev) => {
|
|
const next = new Set(prev);
|
|
for (const key of allKeys) {
|
|
if (!prev.has(key)) next.add(key);
|
|
}
|
|
for (const key of prev) {
|
|
if (!allKeys.has(key)) next.delete(key);
|
|
}
|
|
return next;
|
|
});
|
|
} else if (!isGrouped) {
|
|
setExpandedGroups(new Set());
|
|
}
|
|
}, [groupTree, isGrouped]);
|
|
|
|
// ── Table view helpers ──
|
|
const getColWidth = (key: string): number => {
|
|
return columnWidths[key] ?? ALL_COLUMNS.find((c) => c.key === key)?.width ?? 120;
|
|
};
|
|
|
|
const toggleGroup = useCallback((key: string) => {
|
|
setExpandedGroups((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(key)) next.delete(key);
|
|
else next.add(key);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
// ── Early returns ──
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12" data-testid="contact-list-loading">
|
|
<Loader2 className="animate-spin h-5 w-5 text-secondary-400" aria-hidden="true" />
|
|
<span className="ml-2 text-sm text-secondary-500">{t('common.loading')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (contacts.length === 0) {
|
|
return (
|
|
<div data-testid="contact-list-empty">
|
|
<EmptyState title={t('contacts.emptyTitle')} description={t('contacts.emptyDescription')} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const totalPages = Math.ceil(total / pageSize);
|
|
|
|
const handleSort = (field: string) => {
|
|
if (sortBy === field) {
|
|
onSortChange(field, sortOrder === 'asc' ? 'desc' : 'asc');
|
|
} else {
|
|
onSortChange(field, 'asc');
|
|
}
|
|
};
|
|
|
|
// ── List View ──
|
|
if (viewMode === 'list') {
|
|
const renderContactItem = (contact: UnifiedContact) => (
|
|
<li key={contact.id}>
|
|
<button
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.dataTransfer.setData('text/plain', contact.id);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
}}
|
|
onClick={() => onSelectContact(contact)}
|
|
className={clsx(
|
|
'flex items-center gap-3 w-full px-3 py-2.5 text-left min-h-touch transition-colors',
|
|
selectedContactId === contact.id
|
|
? 'bg-primary-50'
|
|
: 'hover:bg-secondary-50',
|
|
)}
|
|
aria-current={selectedContactId === contact.id ? 'true' : undefined}
|
|
>
|
|
<div className="w-9 h-9 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 font-semibold text-sm flex-shrink-0">
|
|
{getInitials(contact)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium text-sm text-secondary-900 truncate">{getDisplayName(contact)}</span>
|
|
<TypeBadge type={contact.type} />
|
|
</div>
|
|
<div className="text-xs text-secondary-500 truncate">
|
|
{getEmail(contact)} · {getCity(contact)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</li>
|
|
);
|
|
|
|
// Group header renderer for list view
|
|
const renderListGroupHeader = (group: GroupedContacts) => {
|
|
const isExpanded = expandedGroups.has(group.key);
|
|
return (
|
|
<div
|
|
key={`group-header-${group.key}`}
|
|
className="flex items-center gap-2 px-3 py-2 bg-secondary-50 border-b border-secondary-200"
|
|
>
|
|
<button
|
|
onClick={() => toggleGroup(group.key)}
|
|
className="flex items-center justify-center w-5 h-5 hover:bg-secondary-200 rounded transition-colors flex-shrink-0"
|
|
aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-3.5 h-3.5" />
|
|
) : (
|
|
<ChevronRight className="w-3.5 h-3.5" />
|
|
)}
|
|
</button>
|
|
<span className="font-medium text-sm text-secondary-700 truncate">{group.label}</span>
|
|
<span className="text-secondary-400 text-xs flex-shrink-0">({group.contacts.length})</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full" data-testid="contact-list-view">
|
|
<div ref={scrollRef} className="flex-1 overflow-y-auto">
|
|
{isGrouped && groupedContacts ? (
|
|
<div>
|
|
{groupedContacts.map((group) => (
|
|
<div key={group.key}>
|
|
{renderListGroupHeader(group)}
|
|
{expandedGroups.has(group.key) && (
|
|
<ul className="divide-y divide-secondary-100" role="list">
|
|
{group.contacts.map((contact) => renderContactItem(contact))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : shouldVirtualize ? (
|
|
<ul className="divide-y divide-secondary-100" role="list" style={{ height: rowVirtualizer.getTotalSize(), position: 'relative' }}>
|
|
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
|
const contact = contacts[virtualRow.index];
|
|
return (
|
|
<div
|
|
key={contact.id}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
transform: `translateY(${virtualRow.start}px)`,
|
|
}}
|
|
>
|
|
{renderContactItem(contact)}
|
|
</div>
|
|
);
|
|
})}
|
|
</ul>
|
|
) : (
|
|
<ul className="divide-y divide-secondary-100" role="list">
|
|
{contacts.map((contact) => renderContactItem(contact))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
total={total}
|
|
pageSize={pageSize}
|
|
onPageChange={onPageChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Table View ──
|
|
if (viewMode === 'table') {
|
|
// Multi-sort header click handler
|
|
const handleHeaderSort = (field: string) => {
|
|
if (!onSortStateChange || !sortState) {
|
|
handleSort(field);
|
|
return;
|
|
}
|
|
|
|
const existing = sortState.conditions.find((c) => c.field === field);
|
|
let newConditions: SortCondition[];
|
|
|
|
if (!existing) {
|
|
// Add new sort condition (ascending)
|
|
newConditions = [
|
|
...sortState.conditions,
|
|
{ id: `sort-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, field, order: 'asc' as const },
|
|
];
|
|
} else if (existing.order === 'asc') {
|
|
// Toggle to descending
|
|
newConditions = sortState.conditions.map((c) =>
|
|
c.field === field ? { ...c, order: 'desc' as const } : c,
|
|
);
|
|
} else {
|
|
// Remove sort condition
|
|
newConditions = sortState.conditions.filter((c) => c.field !== field);
|
|
}
|
|
|
|
onSortStateChange({ conditions: newConditions });
|
|
};
|
|
|
|
// Sort indicator with priority number
|
|
const getSortIndicator = (field: string): React.ReactNode => {
|
|
if (!sortState || sortState.conditions.length === 0) {
|
|
// Fallback to old single-sort behavior
|
|
if (sortBy !== field) return null;
|
|
return (
|
|
<span className="text-primary-600 ml-1 text-xs">
|
|
{sortOrder === 'asc' ? '▲' : '▼'}
|
|
</span>
|
|
);
|
|
}
|
|
const idx = sortState.conditions.findIndex((c) => c.field === field);
|
|
if (idx === -1) return null;
|
|
const cond = sortState.conditions[idx];
|
|
return (
|
|
<span className="text-primary-600 ml-1 text-xs whitespace-nowrap">
|
|
{cond.order === 'asc' ? '▲' : '▼'}
|
|
{sortState.conditions.length > 1 ? idx + 1 : ''}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
// Column resize via mouse drag on header right edge
|
|
const handleResizeStart = (e: React.MouseEvent, colKey: string) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const currentWidth = getColWidth(colKey);
|
|
resizeRef.current = { key: colKey, startX: e.clientX, startWidth: currentWidth };
|
|
|
|
const handleMouseMove = (ev: MouseEvent) => {
|
|
if (!resizeRef.current) return;
|
|
const delta = ev.clientX - resizeRef.current.startX;
|
|
const newWidth = Math.max(40, resizeRef.current.startWidth + delta);
|
|
setColumnWidths((prev) => ({ ...prev, [resizeRef.current!.key]: newWidth }));
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
if (resizeRef.current) {
|
|
setColumnWidths((prev) => {
|
|
localStorage.setItem(LS_WIDTHS_KEY, JSON.stringify(prev));
|
|
return prev;
|
|
});
|
|
}
|
|
resizeRef.current = null;
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
// Column reorder via HTML5 drag-and-drop
|
|
const handleColDragStart = (e: React.DragEvent, colKey: string) => {
|
|
dragColRef.current = colKey;
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setData('text/plain', colKey);
|
|
};
|
|
|
|
const handleColDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
};
|
|
|
|
const handleColDrop = (e: React.DragEvent, targetKey: string) => {
|
|
e.preventDefault();
|
|
const sourceKey = dragColRef.current;
|
|
if (!sourceKey || sourceKey === targetKey) return;
|
|
|
|
setColumnOrder((prev) => {
|
|
const newOrder = [...prev];
|
|
const sourceIdx = newOrder.indexOf(sourceKey);
|
|
const targetIdx = newOrder.indexOf(targetKey);
|
|
newOrder.splice(sourceIdx, 1);
|
|
newOrder.splice(targetIdx, 0, sourceKey);
|
|
localStorage.setItem(LS_ORDER_KEY, JSON.stringify(newOrder));
|
|
return newOrder;
|
|
});
|
|
|
|
dragColRef.current = null;
|
|
};
|
|
|
|
// Render a single contact row using column definitions
|
|
const renderContactRow = (contact: UnifiedContact) => (
|
|
<tr
|
|
key={contact.id}
|
|
draggable={isCustomSortActive}
|
|
onDragStart={(e) => {
|
|
if (isCustomSortActive) {
|
|
handleRowDragStart(e, contact.id);
|
|
} else {
|
|
e.dataTransfer.setData('text/plain', contact.id);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
}
|
|
}}
|
|
onDragOver={isCustomSortActive ? handleRowDragOver : undefined}
|
|
onDrop={isCustomSortActive ? (e) => handleRowDrop(e, contact.id) : undefined}
|
|
onClick={() => onSelectContact(contact)}
|
|
className={clsx(
|
|
'cursor-pointer transition-colors',
|
|
selectedContactId === contact.id ? 'bg-primary-50' : 'hover:bg-secondary-50',
|
|
isCustomSortActive && 'cursor-grab active:cursor-grabbing',
|
|
)}
|
|
aria-current={selectedContactId === contact.id ? 'true' : undefined}
|
|
>
|
|
{orderedVisibleColumns.map((col) => (
|
|
<td
|
|
key={col.key}
|
|
className={clsx('px-3 py-2 overflow-hidden text-ellipsis whitespace-nowrap', isCustomSortActive && col.key !== 'checkbox' && 'flex items-center')}
|
|
style={{ width: getColWidth(col.key), maxWidth: getColWidth(col.key) }}
|
|
onClick={col.key === 'checkbox' ? (e) => { e.stopPropagation(); toggleContactSelection(contact.id); } : undefined}
|
|
>
|
|
{col.key === 'checkbox' ? (
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedContactIds?.has(contact.id) || false}
|
|
onChange={() => {}}
|
|
className="rounded border-secondary-300"
|
|
aria-label={getDisplayName(contact)}
|
|
/>
|
|
) : isCustomSortActive && col.key === orderedVisibleColumns.find((c) => c.key !== 'checkbox')?.key ? (
|
|
<div className="flex items-center gap-1">
|
|
<GripVertical className="w-3 h-3 text-secondary-300 flex-shrink-0" />
|
|
{col.render(contact)}
|
|
</div>
|
|
) : (
|
|
col.render(contact)
|
|
)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
);
|
|
|
|
// Render grouped tree rows recursively
|
|
const renderGroupRows = (nodes: GroupTreeNode[]): React.ReactNode[] => {
|
|
const rows: React.ReactNode[] = [];
|
|
|
|
for (const node of nodes) {
|
|
const isExpanded = expandedGroups.has(node.key);
|
|
const count = countContactsInNode(node);
|
|
const hasChildren = node.children.length > 0;
|
|
|
|
rows.push(
|
|
<tr
|
|
key={`group-${node.key}`}
|
|
className="bg-secondary-50 border-b border-secondary-200"
|
|
>
|
|
<td
|
|
colSpan={orderedVisibleColumns.length}
|
|
className="px-3 py-2"
|
|
>
|
|
<div
|
|
className="flex items-center gap-2 font-medium text-secondary-700"
|
|
style={{ paddingLeft: `${node.depth * 20}px` }}
|
|
>
|
|
<button
|
|
onClick={() => toggleGroup(node.key)}
|
|
className="flex items-center justify-center w-5 h-5 hover:bg-secondary-200 rounded transition-colors flex-shrink-0"
|
|
aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-3.5 h-3.5" />
|
|
) : (
|
|
<ChevronRight className="w-3.5 h-3.5" />
|
|
)}
|
|
</button>
|
|
<span className="truncate">{node.label}</span>
|
|
<span className="text-secondary-400 text-xs flex-shrink-0">({count})</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
|
|
if (isExpanded) {
|
|
if (hasChildren) {
|
|
rows.push(...renderGroupRows(node.children));
|
|
}
|
|
for (const contact of node.contacts) {
|
|
rows.push(renderContactRow(contact));
|
|
}
|
|
}
|
|
}
|
|
|
|
return rows;
|
|
};
|
|
|
|
// Compute total table width for horizontal scroll
|
|
const tableMinWidth = orderedVisibleColumns.reduce((sum, col) => sum + getColWidth(col.key), 0);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full" data-testid="contact-table-view">
|
|
{/* Bulk action bar (Feature 2) */}
|
|
{selectedContactIds && selectedContactIds.size > 0 && (
|
|
<div className="sticky top-0 z-20 flex items-center gap-2 px-3 py-2 bg-primary-600 text-white shadow-md">
|
|
<span className="text-sm font-medium">{selectedContactIds.size} ausgewählt</span>
|
|
<div className="flex-1" />
|
|
{onBulkDelete && (
|
|
<button
|
|
onClick={() => setBulkDeleteConfirm(true)}
|
|
className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-red-500 hover:bg-red-600 rounded transition-colors"
|
|
>
|
|
Löschen
|
|
</button>
|
|
)}
|
|
{onBulkAssignFolder && (
|
|
<div ref={bulkFolderRef} className="relative">
|
|
<button
|
|
onClick={() => setBulkFolderOpen(!bulkFolderOpen)}
|
|
className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-white/20 hover:bg-white/30 rounded transition-colors"
|
|
>
|
|
Ordner zuweisen ▾
|
|
</button>
|
|
{bulkFolderOpen && (
|
|
<div className="absolute right-0 top-full mt-1 bg-white text-secondary-800 rounded-lg shadow-lg border border-secondary-200 max-h-60 overflow-y-auto min-w-[200px] z-30">
|
|
{folderList.map((folder) => (
|
|
<button
|
|
key={folder.id}
|
|
onClick={() => {
|
|
onBulkAssignFolder(Array.from(selectedContactIds), folder.id);
|
|
setBulkFolderOpen(false);
|
|
clearSelection();
|
|
}}
|
|
className="w-full text-left px-3 py-1.5 text-xs hover:bg-secondary-100 transition-colors"
|
|
>
|
|
{folder.name}
|
|
</button>
|
|
))}
|
|
{folderList.length === 0 && (
|
|
<div className="px-3 py-2 text-xs text-secondary-400">Keine Ordner</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{onBulkAddTags && (
|
|
<div ref={bulkTagsRef} className="relative">
|
|
<button
|
|
onClick={() => setBulkTagsOpen(!bulkTagsOpen)}
|
|
className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-white/20 hover:bg-white/30 rounded transition-colors"
|
|
>
|
|
Tags hinzufügen ▾
|
|
</button>
|
|
{bulkTagsOpen && (
|
|
<div className="absolute right-0 top-full mt-1 bg-white text-secondary-800 rounded-lg shadow-lg border border-secondary-200 p-2 z-30">
|
|
<input
|
|
type="text"
|
|
value={bulkTagsInput}
|
|
onChange={(e) => setBulkTagsInput(e.target.value)}
|
|
placeholder="tag1, tag2, ..."
|
|
className="w-48 px-2 py-1 text-xs border border-secondary-200 rounded focus:outline-none focus:border-primary-400"
|
|
/>
|
|
<button
|
|
onClick={() => {
|
|
const tags = bulkTagsInput.split(',').map((t) => t.trim()).filter(Boolean);
|
|
if (tags.length > 0) {
|
|
onBulkAddTags(Array.from(selectedContactIds), tags);
|
|
setBulkTagsInput('');
|
|
setBulkTagsOpen(false);
|
|
clearSelection();
|
|
}
|
|
}}
|
|
className="w-full mt-1 px-2 py-1 text-xs font-medium text-white bg-primary-600 hover:bg-primary-700 rounded transition-colors"
|
|
>
|
|
Hinzufügen
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<button
|
|
onClick={clearSelection}
|
|
className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-white/20 hover:bg-white/30 rounded transition-colors"
|
|
>
|
|
Auswahl aufheben
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Bulk delete confirmation dialog (Feature 2) */}
|
|
{bulkDeleteConfirm && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
|
<div className="bg-white rounded-lg shadow-xl p-6 max-w-sm">
|
|
<h3 className="text-lg font-semibold text-secondary-900 mb-2">Löschen bestätigen</h3>
|
|
<p className="text-sm text-secondary-600 mb-4">
|
|
{selectedContactIds?.size || 0} Kontakt(e) wirklich löschen?
|
|
</p>
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
onClick={() => setBulkDeleteConfirm(false)}
|
|
className="px-3 py-1.5 text-sm font-medium text-secondary-600 hover:bg-secondary-100 rounded transition-colors"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
if (onBulkDelete && selectedContactIds) {
|
|
onBulkDelete(Array.from(selectedContactIds));
|
|
setBulkDeleteConfirm(false);
|
|
clearSelection();
|
|
}
|
|
}}
|
|
className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded transition-colors"
|
|
>
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Custom sort info indicator (Feature 3) */}
|
|
{isCustomSortActive && customOrder.length > 0 && (
|
|
<div className="flex items-center gap-1.5 px-3 py-1 bg-amber-50 border-b border-amber-200 text-xs text-amber-700">
|
|
<Info className="w-3 h-3" />
|
|
<span>Custom Sortierung aktiv — Drag-and-Drop zum Umsortieren</span>
|
|
</div>
|
|
)}
|
|
|
|
<div ref={scrollRef} className="flex-1 overflow-x-auto overflow-y-auto">
|
|
<table
|
|
className="text-sm"
|
|
style={{
|
|
tableLayout: 'fixed',
|
|
width: 'max-content',
|
|
minWidth: '100%',
|
|
}}
|
|
>
|
|
<thead className="sticky top-0 bg-white border-b border-secondary-200 z-10">
|
|
<tr>
|
|
{orderedVisibleColumns.map((col) => {
|
|
const sortCond = sortState?.conditions.find((c) => c.field === col.key);
|
|
const ariaSort = sortCond
|
|
? (sortCond.order === 'asc' ? 'ascending' : 'descending')
|
|
: (sortBy === col.key ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none');
|
|
|
|
return (
|
|
<th
|
|
key={col.key}
|
|
className="relative px-3 py-2 text-left font-medium text-secondary-600 select-none"
|
|
style={{ width: getColWidth(col.key), minWidth: getColWidth(col.key) }}
|
|
draggable={col.reorderable}
|
|
onDragStart={col.reorderable ? (e) => handleColDragStart(e, col.key) : undefined}
|
|
onDragOver={col.reorderable ? handleColDragOver : undefined}
|
|
onDrop={col.reorderable ? (e) => handleColDrop(e, col.key) : undefined}
|
|
onClick={col.sortable ? () => handleHeaderSort(col.key) : undefined}
|
|
aria-sort={ariaSort as 'ascending' | 'descending' | 'none'}
|
|
>
|
|
<div className="flex items-center">
|
|
{col.key === 'checkbox' ? (
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedContactIds ? contacts.length > 0 && contacts.every((c) => selectedContactIds.has(c.id)) : false}
|
|
onChange={toggleSelectAll}
|
|
className="rounded border-secondary-300"
|
|
aria-label={t('common.all')}
|
|
/>
|
|
) : (
|
|
<>
|
|
<span className={clsx(col.sortable && 'cursor-pointer')}>
|
|
{col.label}
|
|
</span>
|
|
{col.sortable && getSortIndicator(col.key)}
|
|
</>
|
|
)}
|
|
</div>
|
|
{col.reorderable && (
|
|
<div
|
|
className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary-300 transition-colors"
|
|
onMouseDown={(e) => handleResizeStart(e, col.key)}
|
|
/>
|
|
)}
|
|
</th>
|
|
);
|
|
})}
|
|
{/* Column visibility settings button (Feature 1) */}
|
|
<th className="relative px-2 py-2 w-10" style={{ width: 40 }}>
|
|
<div ref={colMenuRef} className="relative">
|
|
<button
|
|
onClick={() => setColMenuOpen(!colMenuOpen)}
|
|
title="Spalten verwalten"
|
|
aria-label="Spalten verwalten"
|
|
className="p-1 rounded hover:bg-secondary-100 text-secondary-500 hover:text-secondary-700 transition-colors"
|
|
>
|
|
<Settings className="w-3.5 h-3.5" />
|
|
</button>
|
|
{colMenuOpen && (
|
|
<div className="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-secondary-200 max-h-80 overflow-y-auto min-w-[200px] z-30">
|
|
<div className="px-3 py-2 text-xs font-semibold text-secondary-700 border-b border-secondary-100">Spalten verwalten</div>
|
|
{ALL_COLUMNS.map((col) => (
|
|
<label
|
|
key={col.key}
|
|
className={clsx(
|
|
'flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-secondary-50 cursor-pointer',
|
|
col.key === 'checkbox' && 'opacity-50 cursor-not-allowed',
|
|
)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={visibleColumns.includes(col.key)}
|
|
onChange={() => toggleColumnVisibility(col.key)}
|
|
disabled={col.key === 'checkbox'}
|
|
className="rounded border-secondary-300"
|
|
/>
|
|
<span>{col.label || 'Checkbox'}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-secondary-100">
|
|
{isGrouped ? (
|
|
renderGroupRows(groupTree)
|
|
) : (
|
|
applyCustomOrder(contacts).map((contact) => renderContactRow(contact))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
total={total}
|
|
pageSize={pageSize}
|
|
onPageChange={onPageChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Cards View ──
|
|
const renderContactCard = (contact: UnifiedContact) => (
|
|
<div
|
|
key={contact.id}
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.dataTransfer.setData('text/plain', contact.id);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
}}
|
|
onClick={() => onSelectContact(contact)}
|
|
className={clsx(
|
|
'p-3 rounded-lg border cursor-pointer transition-colors min-h-touch',
|
|
selectedContactId === contact.id
|
|
? 'border-primary-300 bg-primary-50'
|
|
: 'border-secondary-200 bg-white hover:bg-secondary-50',
|
|
)}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-current={selectedContactId === contact.id ? 'true' : undefined}
|
|
>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 font-semibold flex-shrink-0">
|
|
{getInitials(contact)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium text-sm text-secondary-900 truncate">{getDisplayName(contact)}</span>
|
|
</div>
|
|
<TypeBadge type={contact.type} />
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-secondary-500 space-y-0.5">
|
|
<div className="truncate">{getEmail(contact)}</div>
|
|
<div className="truncate">{getPhone(contact)}</div>
|
|
<div className="truncate">{getCity(contact)}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Group header renderer for cards view
|
|
const renderCardsGroupHeader = (group: GroupedContacts) => {
|
|
const isExpanded = expandedGroups.has(group.key);
|
|
return (
|
|
<div
|
|
key={`group-header-${group.key}`}
|
|
className="flex items-center gap-2 px-3 py-2 bg-secondary-50 border-b border-secondary-200 mb-3 sticky top-0 z-10"
|
|
>
|
|
<button
|
|
onClick={() => toggleGroup(group.key)}
|
|
className="flex items-center justify-center w-5 h-5 hover:bg-secondary-200 rounded transition-colors flex-shrink-0"
|
|
aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-3.5 h-3.5" />
|
|
) : (
|
|
<ChevronRight className="w-3.5 h-3.5" />
|
|
)}
|
|
</button>
|
|
<span className="font-medium text-sm text-secondary-700 truncate">{group.label}</span>
|
|
<span className="text-secondary-400 text-xs flex-shrink-0">({group.contacts.length})</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div data-testid="contact-cards-view" className="flex flex-col h-full">
|
|
<div ref={scrollRef} className="flex-1 overflow-y-auto p-3">
|
|
{isGrouped && groupedContacts ? (
|
|
<div className="space-y-4">
|
|
{groupedContacts.map((group) => (
|
|
<div key={group.key}>
|
|
{renderCardsGroupHeader(group)}
|
|
{expandedGroups.has(group.key) && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{group.contacts.map((contact) => renderContactCard(contact))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : shouldVirtualize ? (
|
|
<div style={{ height: rowVirtualizer.getTotalSize(), position: 'relative' }}>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3" style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
|
|
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
|
const contact = contacts[virtualRow.index];
|
|
return (
|
|
<div
|
|
key={contact.id}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
transform: `translateY(${virtualRow.start}px)`,
|
|
}}
|
|
>
|
|
{renderContactCard(contact)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{contacts.map((contact) => renderContactCard(contact))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
total={total}
|
|
pageSize={pageSize}
|
|
onPageChange={onPageChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|