07d57f13a8
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced new ContactAvatar and ContactAvatarPicker components for enhanced avatar management in contact views. - Updated ContactDetailView and ContactFormView to utilize the new avatar components, improving user experience when adding or editing contacts. - Enhanced ContactHoverCard and ContactRow components to display avatars, providing a more visually appealing interface. - Added loading and error states in ContactsListView for better user feedback during data fetching. - Implemented a new ContactsLoadState component to handle loading and error scenarios in the contacts list. - Updated package.json to include @formkit/auto-animate for improved UI animations.
122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
"use client"
|
|
|
|
import { MoreVertical, RotateCcw, Trash2 } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { useDeleteContact } from "@/lib/api/hooks/use-contact-mutations"
|
|
import { fullContactDisplayName } from "@/lib/contacts/types"
|
|
import { ContactAvatar } from "@/components/gmail/contacts/contact-avatar"
|
|
import {
|
|
CONTACTS_HEADING_TEXT,
|
|
CONTACTS_MUTED_TEXT,
|
|
CONTACTS_PAGE_BANNER_CLASS,
|
|
CONTACTS_PAGE_LINK_BTN_CLASS,
|
|
CONTACTS_PAGE_TITLE_CLASS,
|
|
CONTACTS_TABLE_HEADER_CLASS,
|
|
CONTACTS_TABLE_ROW_CLASS,
|
|
CONTACTS_ICON_BTN_CLASS,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function TrashView() {
|
|
const { deletedContacts, restoreContact, emptyTrash } = useContactsStore()
|
|
const deleteContactMutation = useDeleteContact()
|
|
|
|
function formatDate(ts: number): string {
|
|
return new Date(ts).toLocaleDateString("fr-FR", {
|
|
day: "numeric",
|
|
month: "short",
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="px-6 py-4 text-foreground">
|
|
{deletedContacts.length > 0 && (
|
|
<div className={CONTACTS_PAGE_BANNER_CLASS}>
|
|
<p className="text-sm text-foreground">
|
|
Les contacts qui sont dans la corbeille depuis plus de 30 jours seront supprimés définitivement
|
|
</p>
|
|
<button type="button" onClick={emptyTrash} className={cn("shrink-0", CONTACTS_PAGE_LINK_BTN_CLASS)}>
|
|
Vider la corbeille
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<h1 className={cn("mb-4", CONTACTS_PAGE_TITLE_CLASS)}>
|
|
Corbeille ({deletedContacts.length})
|
|
</h1>
|
|
|
|
{deletedContacts.length === 0 && (
|
|
<p className={cn("py-12 text-center text-sm", CONTACTS_MUTED_TEXT)}>
|
|
La corbeille est vide
|
|
</p>
|
|
)}
|
|
|
|
{deletedContacts.length > 0 && (
|
|
<>
|
|
<div
|
|
className={cn(
|
|
"grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] gap-2",
|
|
CONTACTS_TABLE_HEADER_CLASS,
|
|
)}
|
|
>
|
|
<span>Nom</span>
|
|
<span>Raison du placement dans la corbeille</span>
|
|
<span>Date de suppression</span>
|
|
<span />
|
|
</div>
|
|
|
|
{deletedContacts.map((entry) => {
|
|
const { contact, deletedAt, reason } = entry
|
|
const displayName = fullContactDisplayName(contact)
|
|
const name = displayName || contact.emails[0]?.value || "?"
|
|
|
|
return (
|
|
<div
|
|
key={contact.id}
|
|
className={cn(
|
|
"grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] items-center gap-2 py-3 text-sm",
|
|
CONTACTS_TABLE_ROW_CLASS,
|
|
)}
|
|
>
|
|
<span className="flex items-center gap-3">
|
|
<ContactAvatar contact={contact} name={name} size="xs" />
|
|
<span className={cn("truncate", CONTACTS_HEADING_TEXT)}>{name}</span>
|
|
</span>
|
|
<span className={cn("truncate", CONTACTS_MUTED_TEXT)}>{reason}</span>
|
|
<span className={CONTACTS_MUTED_TEXT}>{formatDate(deletedAt)}</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className={cn("h-8 w-8 rounded-full", CONTACTS_ICON_BTN_CLASS)}>
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => restoreContact(contact.id)}>
|
|
<RotateCcw className="mr-2 h-4 w-4" />
|
|
Restaurer
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => deleteContactMutation.mutate({ path: contact.id })}
|
|
className="text-red-600 focus:text-red-600"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Supprimer définitivement
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|