c87670e90f
Some checks failed
E2E / Playwright e2e (push) Has been cancelled
Move mail, compose, contacts, and accounts off mocks onto REST + WS. Add client, auth store, IDB-backed query cache, offline queue, and sync bar; hybrid Zustand for UI-only state. Settings still local until backend has preferences API.
413 lines
14 KiB
TypeScript
413 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useState, type CSSProperties } from "react"
|
|
import { Printer, Download, MoreVertical, Trash2 } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { useContactsList } from "@/lib/contacts/use-contacts-list"
|
|
import { useDeleteContact } from "@/lib/api/hooks/use-contact-mutations"
|
|
import { useNavStore } from "@/lib/stores/nav-store"
|
|
import { searchContacts } from "@/lib/contacts/fuzzy-search"
|
|
import { printContacts } from "@/lib/contacts/print-contacts"
|
|
import { downloadContactsCsv, downloadContactsVCard } from "@/lib/contacts/export-contacts"
|
|
import { fullContactDisplayName } from "@/lib/contacts/types"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
import type { FullContact } from "@/lib/contacts/types"
|
|
import {
|
|
contactsTableGridStyle,
|
|
isContactsColumnVisible,
|
|
useContactsTableColumns,
|
|
type ContactsTableColumn,
|
|
} from "@/hooks/use-contacts-table-columns"
|
|
import type { ContactsPageView } from "./contacts-app-shell"
|
|
import {
|
|
CONTACTS_HEADING_TEXT,
|
|
CONTACTS_ICON_BTN_CLASS,
|
|
CONTACTS_MUTED_TEXT,
|
|
CONTACTS_TABLE_HEADER_CLASS,
|
|
CONTACTS_TABLE_ROW_CLASS,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
import { MAIL_SIDEBAR_MENU_SURFACE_CLASS } from "@/lib/mail-chrome-classes"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const DATA_COLUMNS: Exclude<ContactsTableColumn, "checkbox">[] = [
|
|
"name",
|
|
"email",
|
|
"phone",
|
|
"job",
|
|
"labels",
|
|
]
|
|
|
|
interface ContactsTableProps {
|
|
view: ContactsPageView
|
|
searchQuery: string
|
|
activeLabelId?: string | null
|
|
onOpenContact: (id: string) => void
|
|
}
|
|
|
|
export function ContactsTable({ view, searchQuery, activeLabelId, onOpenContact }: ContactsTableProps) {
|
|
const { visibleColumns, columnLabels } = useContactsTableColumns()
|
|
const gridStyle = contactsTableGridStyle(visibleColumns)
|
|
const { contacts } = useContactsList()
|
|
const softDeleteContact = useContactsStore((s) => s.softDeleteContact)
|
|
const deleteContactMutation = useDeleteContact()
|
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set())
|
|
|
|
const filteredContacts = useMemo(() => {
|
|
let list = contacts
|
|
|
|
if (view === "frequent") {
|
|
list = [...contacts]
|
|
.filter((c) => (c.interactionCount ?? 0) > 0)
|
|
.sort((a, b) => (b.interactionCount ?? 0) - (a.interactionCount ?? 0))
|
|
} else if (view === "other") {
|
|
list = contacts.filter((c) => c.isOtherContact === true)
|
|
} else if (view === "label" && activeLabelId) {
|
|
list = contacts.filter((c) => c.labels?.includes(activeLabelId))
|
|
}
|
|
|
|
if (searchQuery.trim()) {
|
|
list = searchContacts(list, searchQuery)
|
|
} else if (view !== "frequent") {
|
|
list = [...list].sort((a, b) => {
|
|
const nameA = fullContactDisplayName(a) || a.emails[0]?.value || ""
|
|
const nameB = fullContactDisplayName(b) || b.emails[0]?.value || ""
|
|
return nameA.localeCompare(nameB, "fr")
|
|
})
|
|
}
|
|
|
|
return list
|
|
}, [contacts, view, searchQuery, activeLabelId])
|
|
|
|
const filteredIds = useMemo(
|
|
() => new Set(filteredContacts.map((c) => c.id)),
|
|
[filteredContacts]
|
|
)
|
|
|
|
const selectedContacts = useMemo(
|
|
() => filteredContacts.filter((c) => selectedIds.has(c.id)),
|
|
[filteredContacts, selectedIds]
|
|
)
|
|
|
|
const selectionCount = selectedContacts.length
|
|
const allFilteredSelected =
|
|
filteredContacts.length > 0 &&
|
|
filteredContacts.every((c) => selectedIds.has(c.id))
|
|
const someFilteredSelected =
|
|
filteredContacts.some((c) => selectedIds.has(c.id)) && !allFilteredSelected
|
|
|
|
useEffect(() => {
|
|
setSelectedIds(new Set())
|
|
}, [view, activeLabelId])
|
|
|
|
useEffect(() => {
|
|
setSelectedIds((prev) => {
|
|
const next = new Set([...prev].filter((id) => filteredIds.has(id)))
|
|
return next.size === prev.size ? prev : next
|
|
})
|
|
}, [filteredIds])
|
|
|
|
const labelRows = useNavStore((s) => s.labelRows)
|
|
const activeLabelName = activeLabelId
|
|
? labelRows.find((l) => l.id === activeLabelId)?.label
|
|
: null
|
|
|
|
const viewTitle = view === "frequent"
|
|
? "Contacts fréquents"
|
|
: view === "other"
|
|
? "Autres contacts"
|
|
: view === "label" && activeLabelName
|
|
? activeLabelName
|
|
: `Contacts (${contacts.length})`
|
|
|
|
function toggleContact(id: string, checked: boolean) {
|
|
setSelectedIds((prev) => {
|
|
const next = new Set(prev)
|
|
if (checked) next.add(id)
|
|
else next.delete(id)
|
|
return next
|
|
})
|
|
}
|
|
|
|
function toggleSelectAll(checked: boolean) {
|
|
if (checked) {
|
|
setSelectedIds(new Set(filteredContacts.map((c) => c.id)))
|
|
} else {
|
|
setSelectedIds(new Set())
|
|
}
|
|
}
|
|
|
|
function handleDeleteSelected() {
|
|
if (selectionCount === 0) return
|
|
for (const contact of selectedContacts) {
|
|
softDeleteContact(contact, "Supprimé manuellement")
|
|
deleteContactMutation.mutate({ path: contact.id })
|
|
}
|
|
setSelectedIds(new Set())
|
|
}
|
|
|
|
function handleExportVcf() {
|
|
if (selectionCount === 0) return
|
|
const filename =
|
|
selectionCount === 1
|
|
? `${sanitizeExportName(selectedContacts[0])}.vcf`
|
|
: "contacts.vcf"
|
|
downloadContactsVCard(selectedContacts, filename)
|
|
}
|
|
|
|
function handleExportCsv() {
|
|
if (selectionCount === 0) return
|
|
const filename =
|
|
selectionCount === 1
|
|
? `${sanitizeExportName(selectedContacts[0])}.csv`
|
|
: "contacts.csv"
|
|
downloadContactsCsv(selectedContacts, filename)
|
|
}
|
|
|
|
return (
|
|
<div className="px-3 py-4 sm:px-6">
|
|
<div className="mb-2 flex items-center justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<h1 className={cn("truncate text-xl font-normal sm:text-2xl", CONTACTS_HEADING_TEXT)}>{viewTitle}</h1>
|
|
{selectionCount > 0 && (
|
|
<p className={cn("mt-0.5 text-sm", CONTACTS_MUTED_TEXT)}>
|
|
{selectionCount} sélectionné{selectionCount > 1 ? "s" : ""}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-9 w-9 rounded-full", CONTACTS_ICON_BTN_CLASS)}
|
|
onClick={() => printContacts(filteredContacts, viewTitle)}
|
|
aria-label="Imprimer"
|
|
>
|
|
<Printer className="h-5 w-5" />
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-9 w-9 rounded-full disabled:opacity-40", CONTACTS_ICON_BTN_CLASS)}
|
|
disabled={selectionCount === 0}
|
|
aria-label="Exporter la sélection"
|
|
>
|
|
<Download className="h-5 w-5" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className={cn("w-52", MAIL_SIDEBAR_MENU_SURFACE_CLASS)}>
|
|
<DropdownMenuItem onClick={handleExportVcf}>
|
|
Exporter au format vCard (.vcf)
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={handleExportCsv}>
|
|
Exporter au format CSV (.csv)
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-9 w-9 rounded-full disabled:opacity-40", CONTACTS_ICON_BTN_CLASS)}
|
|
disabled={selectionCount === 0}
|
|
onClick={handleDeleteSelected}
|
|
aria-label="Supprimer la sélection"
|
|
>
|
|
<Trash2 className="h-5 w-5" />
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-9 w-9 rounded-full", CONTACTS_ICON_BTN_CLASS)}
|
|
aria-label="Plus d'actions"
|
|
>
|
|
<MoreVertical className="h-5 w-5" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className={cn("w-48", MAIL_SIDEBAR_MENU_SURFACE_CLASS)}>
|
|
<DropdownMenuItem
|
|
onClick={() => toggleSelectAll(true)}
|
|
disabled={filteredContacts.length === 0}
|
|
>
|
|
Tout sélectionner
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => setSelectedIds(new Set())}
|
|
disabled={selectionCount === 0}
|
|
>
|
|
Désélectionner tout
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={CONTACTS_TABLE_HEADER_CLASS}
|
|
style={gridStyle}
|
|
>
|
|
{isContactsColumnVisible(visibleColumns, "checkbox") && (
|
|
<span className="flex items-center justify-center">
|
|
<Checkbox
|
|
checked={allFilteredSelected ? true : someFilteredSelected ? "indeterminate" : false}
|
|
onCheckedChange={(checked) => toggleSelectAll(checked === true)}
|
|
aria-label="Tout sélectionner"
|
|
/>
|
|
</span>
|
|
)}
|
|
{DATA_COLUMNS.map((column) =>
|
|
isContactsColumnVisible(visibleColumns, column) ? (
|
|
<span key={column}>{columnLabels[column]}</span>
|
|
) : null
|
|
)}
|
|
</div>
|
|
|
|
{filteredContacts.map((contact) => (
|
|
<ContactTableRow
|
|
key={contact.id}
|
|
contact={contact}
|
|
visibleColumns={visibleColumns}
|
|
gridStyle={gridStyle}
|
|
selected={selectedIds.has(contact.id)}
|
|
onToggleSelect={(checked) => toggleContact(contact.id, checked)}
|
|
onOpen={() => onOpenContact(contact.id)}
|
|
/>
|
|
))}
|
|
|
|
{filteredContacts.length === 0 && (
|
|
<div className="py-12 text-center text-sm text-muted-foreground">
|
|
Aucun contact trouvé
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function sanitizeExportName(contact: FullContact): string {
|
|
const name = fullContactDisplayName(contact) || contact.emails[0]?.value || "contact"
|
|
return name.replace(/[/\\?%*:|"<>]/g, "-").trim() || "contact"
|
|
}
|
|
|
|
function ContactTableRow({
|
|
contact,
|
|
visibleColumns,
|
|
gridStyle,
|
|
selected,
|
|
onToggleSelect,
|
|
onOpen,
|
|
}: {
|
|
contact: FullContact
|
|
visibleColumns: ContactsTableColumn[]
|
|
gridStyle: CSSProperties
|
|
selected: boolean
|
|
onToggleSelect: (checked: boolean) => void
|
|
onOpen: () => void
|
|
}) {
|
|
const displayName = fullContactDisplayName(contact)
|
|
const name = displayName || contact.emails[0]?.value || contact.phones[0]?.value || "?"
|
|
const color = avatarColor(name)
|
|
const initial = senderInitial(name)
|
|
const labelRows = useNavStore((s) => s.labelRows)
|
|
|
|
return (
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={onOpen}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault()
|
|
onOpen()
|
|
}
|
|
}}
|
|
className={cn(
|
|
CONTACTS_TABLE_ROW_CLASS,
|
|
selected && "bg-mail-nav-selected"
|
|
)}
|
|
style={gridStyle}
|
|
>
|
|
{isContactsColumnVisible(visibleColumns, "checkbox") && (
|
|
<span
|
|
className="flex items-center justify-center"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
>
|
|
<Checkbox
|
|
checked={selected}
|
|
onCheckedChange={(checked) => onToggleSelect(checked === true)}
|
|
aria-label={`Sélectionner ${name}`}
|
|
/>
|
|
</span>
|
|
)}
|
|
|
|
{isContactsColumnVisible(visibleColumns, "name") && (
|
|
<span className="flex min-w-0 items-center gap-2 sm:gap-3">
|
|
{contact.avatarUrl ? (
|
|
<img src={contact.avatarUrl} alt={name} className="h-8 w-8 shrink-0 rounded-full object-cover" />
|
|
) : (
|
|
<span
|
|
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-medium text-white"
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
{initial}
|
|
</span>
|
|
)}
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate text-foreground">{name}</span>
|
|
{!isContactsColumnVisible(visibleColumns, "email") && contact.emails[0]?.value && (
|
|
<span className="block truncate text-xs text-muted-foreground">{contact.emails[0].value}</span>
|
|
)}
|
|
</span>
|
|
</span>
|
|
)}
|
|
|
|
{isContactsColumnVisible(visibleColumns, "email") && (
|
|
<span className="truncate text-foreground">{contact.emails[0]?.value || ""}</span>
|
|
)}
|
|
|
|
{isContactsColumnVisible(visibleColumns, "phone") && (
|
|
<span className="truncate text-foreground">{contact.phones[0]?.value || ""}</span>
|
|
)}
|
|
|
|
{isContactsColumnVisible(visibleColumns, "job") && (
|
|
<span className="truncate text-foreground">
|
|
{[contact.jobTitle, contact.company].filter(Boolean).join(", ")}
|
|
</span>
|
|
)}
|
|
|
|
{isContactsColumnVisible(visibleColumns, "labels") && (
|
|
<span className="flex flex-wrap gap-1">
|
|
{contact.labels?.map((labelId) => {
|
|
const row = labelRows.find((l) => l.id === labelId)
|
|
return row ? (
|
|
<span
|
|
key={labelId}
|
|
className="inline-flex rounded border border-border px-1.5 py-0.5 text-[11px] text-foreground"
|
|
>
|
|
{row.label}
|
|
</span>
|
|
) : null
|
|
})}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|