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.
77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useLayoutEffect, useState, type CSSProperties } from "react"
|
|
|
|
export type ContactsTableColumn =
|
|
| "checkbox"
|
|
| "name"
|
|
| "email"
|
|
| "phone"
|
|
| "job"
|
|
| "labels"
|
|
|
|
const COLUMN_WIDTHS: Record<ContactsTableColumn, string> = {
|
|
checkbox: "40px",
|
|
name: "minmax(0px, 2fr)",
|
|
email: "minmax(0px, 2fr)",
|
|
phone: "minmax(0px, 1.5fr)",
|
|
job: "minmax(0px, 1.5fr)",
|
|
labels: "minmax(0px, 1fr)",
|
|
}
|
|
|
|
const SSR_COLUMNS: ContactsTableColumn[] = ["checkbox", "name"]
|
|
|
|
const COLUMN_LABELS: Record<Exclude<ContactsTableColumn, "checkbox">, string> = {
|
|
name: "Nom",
|
|
email: "E-mail",
|
|
phone: "Numéro de téléphone",
|
|
job: "Fonction et entreprise",
|
|
labels: "Libellés",
|
|
}
|
|
|
|
function columnsForWidth(width: number): ContactsTableColumn[] {
|
|
const cols: ContactsTableColumn[] = ["checkbox", "name"]
|
|
if (width >= 640) cols.push("email")
|
|
if (width >= 768) cols.push("phone")
|
|
if (width >= 1024) cols.push("job", "labels")
|
|
return cols
|
|
}
|
|
|
|
export function useContactsTableColumns() {
|
|
const [visibleColumns, setVisibleColumns] =
|
|
useState<ContactsTableColumn[]>(SSR_COLUMNS)
|
|
|
|
useLayoutEffect(() => {
|
|
const update = () => setVisibleColumns(columnsForWidth(window.innerWidth))
|
|
update()
|
|
|
|
const mqlSm = window.matchMedia("(min-width: 640px)")
|
|
const mqlMd = window.matchMedia("(min-width: 768px)")
|
|
const mqlLg = window.matchMedia("(min-width: 1024px)")
|
|
|
|
mqlSm.addEventListener("change", update)
|
|
mqlMd.addEventListener("change", update)
|
|
mqlLg.addEventListener("change", update)
|
|
return () => {
|
|
mqlSm.removeEventListener("change", update)
|
|
mqlMd.removeEventListener("change", update)
|
|
mqlLg.removeEventListener("change", update)
|
|
}
|
|
}, [])
|
|
|
|
return { visibleColumns, columnLabels: COLUMN_LABELS }
|
|
}
|
|
|
|
export function contactsTableGridStyle(columns: ContactsTableColumn[]): CSSProperties {
|
|
return {
|
|
gridTemplateColumns: columns.map((c) => COLUMN_WIDTHS[c]).join(" "),
|
|
}
|
|
}
|
|
|
|
export function isContactsColumnVisible(
|
|
columns: ContactsTableColumn[],
|
|
column: ContactsTableColumn
|
|
): boolean {
|
|
return columns.includes(column)
|
|
}
|