mirror of
https://github.com/R0m1k3/PleinR.git
synced 2026-10-11 17:27:54 +02:00
Rencontres passées : une fenêtre, plusieurs photos, compression automatique
Le backoffice n'avait qu'une carte étroite par archive : un récit détaillé se tapait dans trois lignes, les photos ne pouvaient être ajoutées qu'après publication, une par une, et un fichier de plus de 900 Ko était simplement refusé — « compressez-la d'abord ». - **Fenêtre d'édition** : titre, date, lieu, rencontre liée, récit (champ de 260 px, redimensionnable), participants et photos au même endroit, création comprise. Glisser-déposer multiple, réordonnancement, légendes, suppression. - **Compression dans le navigateur** : `src/lib/image-compress.ts` (pur, testé) porte seuils et paliers, `image-compress-dom.ts` le décodage (orientation EXIF comprise) et l'encodage. On ne descend en qualité que le nécessaire, une image déjà dans le budget n'est pas réencodée et la transparence n'est jamais aplatie sur du noir. `ImageField` et le dépôt de promotion en profitent aussi : plus aucun envoi refusé pour son poids. - **Actions** : `savePastMeeting` (création + mise à jour, refus renvoyés au lieu d'être levés, rencontre liée vérifiée), `addPastMeetingPhotos` (envois groupés sous la limite des server actions) et `savePastMeetingPhotos` (ordre, légendes, suppressions, protégée par un drapeau `syncPhotos`). - **La fenêtre attend le rafraîchissement avant de se refermer** : sans cela, rouvrir la fiche affichait l'état d'avant, la rencontre liée revenant à « Aucune » alors qu'elle avait bien été enregistrée. - **Site public** : cartes de hauteur fixe quel que soit le texte ou le nombre de photos, et fenêtre de lecture avec le récit complet (sauts de ligne conservés) et la galerie entière — flèches, vignettes, clavier. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013GHFd8bXepDKhQ7kf3WvrL
This commit is contained in:
17 files changed
+1940
-291
No files matched your search
@@ -139,12 +139,14 @@ même raison.
|
||||
- Les images de promo sont stockées en data-URI : l'upload se fait donc en
|
||||
binaire (multipart pour Facebook, Images API en 3 étapes pour LinkedIn), pas
|
||||
par URL.
|
||||
- L'image part **telle quelle** : aucun recadrage ni redimensionnement côté
|
||||
application. Un visuel non carré est donc recadré — ou entouré de bandes de
|
||||
couleur — par la plateforme. `src/lib/image-info.ts` (pur, verrouillé par
|
||||
`tests/image-info.test.ts`) décrit le fichier déposé (dimensions, format,
|
||||
poids) et `MemberSpaceForm` l'affiche sous l'aperçu : on informe, on ne
|
||||
bloque pas.
|
||||
- **Aucun recadrage** : le rapport largeur/hauteur n'est jamais touché, un
|
||||
visuel non carré est donc recadré — ou entouré de bandes de couleur — par la
|
||||
plateforme. `src/lib/image-info.ts` (pur, verrouillé par
|
||||
`tests/image-info.test.ts`) décrit l'image **telle qu'elle sera publiée** et
|
||||
`MemberSpaceForm` l'affiche sous l'aperçu : on informe, on ne bloque pas.
|
||||
- Le poids, lui, est ramené dans les clous **par le navigateur** (cf. Images)
|
||||
avant l'envoi : une photo de téléphone dépassait la limite de 3 Mo du serveur
|
||||
et la publication échouait sans recours depuis l'écran de l'adhérent.
|
||||
- La diffusion est déclenchée **par la validation** (ou par l'échéance d'une
|
||||
publication programmée), pas par un bouton :
|
||||
`promotions.share_facebook` / `share_linkedin` sont choisis par l'adhérent,
|
||||
@@ -168,6 +170,64 @@ même raison.
|
||||
- Les URLs publiques des pages FB/LinkedIn sont des `site_settings`
|
||||
(`association_facebook`, `association_linkedin`), éditables dans Paramètres.
|
||||
|
||||
## Images
|
||||
|
||||
Toute image déposée est **compressée dans le navigateur** avant de partir :
|
||||
elle voyage en data-URI à travers une server action plafonnée à 4 Mo et finit
|
||||
stockée en base, alors qu'une photo de téléphone pèse 4 à 12 Mo. L'ancien
|
||||
réflexe — « Image trop lourde (max ~900 Ko), compressez-la d'abord » — revenait
|
||||
à demander à l'utilisateur ce que le navigateur sait faire seul.
|
||||
|
||||
- `src/lib/image-compress.ts` est **pur** (`tests/image-compress.test.ts`) :
|
||||
seuils, `scaleToFit()` (jamais d'agrandissement), `compressionSteps()` (on
|
||||
épuise la qualité à définition pleine **avant** de réduire la définition),
|
||||
`base64Bytes()`, `compressionSummary()` et `chunkByBytes()` pour découper un
|
||||
envoi groupé sous la limite d'une requête.
|
||||
- `src/lib/image-compress-dom.ts` porte `prepareImageFile()` : décodage
|
||||
(orientation EXIF appliquée via `createImageBitmap`, sans quoi une photo de
|
||||
téléphone repartirait couchée), canvas, encodage. Une image **déjà dans le
|
||||
budget n'est pas réencodée** — un réencodage JPEG dégrade toujours un peu —
|
||||
et une image **avec transparence** ne devient jamais un JPEG (WebP, sinon
|
||||
PNG) : un logo se retrouverait sur fond noir.
|
||||
- Budgets : `FIELD_MAX_BYTES` (1,2 Mo) pour une image de formulaire,
|
||||
`PHOTO_MAX_BYTES` (800 Ko) pour une photo de galerie, `MAX_SIDE` 2048 px.
|
||||
- `ImageField` et `MemberSpaceForm` passent par là et affichent ce qui a été
|
||||
fait (« 4,2 Mo → 620 Ko »). Un format que le navigateur ne sait pas décoder
|
||||
(HEIC d'iPhone sur un poste Windows) est le seul refus, et il est expliqué.
|
||||
|
||||
## Rencontres passées
|
||||
|
||||
Le backoffice (`/backend/rencontres-passees`) est une grille de cartes ; tout
|
||||
le reste se passe dans une **fenêtre** (`PastMeetingDialog`) : titre, date,
|
||||
lieu, rencontre liée, récit, participants **et photos**, y compris à la
|
||||
création. Les photos ne dépendent plus d'une archive déjà publiée.
|
||||
|
||||
- `savePastMeeting()` crée ou met à jour, `addPastMeetingPhotos()` attache un
|
||||
lot (plusieurs appels : `chunkByBytes` découpe sous la limite des server
|
||||
actions et rend les identifiants insérés), `savePastMeetingPhotos()` aligne
|
||||
ordre, légendes et suppressions. Cette dernière exige `syncPhotos=1` : sans
|
||||
ce drapeau, un appel amputé de sa liste viderait la galerie en silence.
|
||||
- Les refus attendus sont **renvoyés** (`ActionError`), jamais levés ; la
|
||||
rencontre liée est vérifiée avant l'écriture, une rencontre supprimée
|
||||
entre-temps donnant sinon une violation de clé étrangère sans explication.
|
||||
- **La fenêtre ne se referme qu'une fois la page rafraîchie**
|
||||
(`closing && !refreshing`). Sans cette attente, rouvrir la fiche montre
|
||||
l'état d'avant l'enregistrement — la rencontre liée revenue à « Aucune » —
|
||||
et on croit que rien n'a été retenu.
|
||||
- `ModalShell` (partagé avec le site public) rend la fenêtre dans un
|
||||
**portail** vers `<body>` : une carte survolée porte un `transform`, qui
|
||||
redéfinit le bloc conteneur d'un `position: fixed`, et la fenêtre s'ouvrirait
|
||||
*dans* la carte. Le portail la sort aussi du bouton qui l'ouvre.
|
||||
- Côté public, `PastMeetingCard` rend une carte de **hauteur fixe** (424 px,
|
||||
couverture + titre sur 2 lignes + 3 lignes de texte écrêtées par
|
||||
`line-clamp`, d'où des classes dans `globals.css` plutôt que des styles en
|
||||
ligne) : le récit complet et toutes les photos vivent dans la fenêtre, avec
|
||||
galerie, flèches, vignettes et navigation au clavier. Les sauts de ligne du
|
||||
récit sont conservés (`white-space: pre-line`).
|
||||
- Le nombre de participants affiché vient des inscriptions **si** une rencontre
|
||||
du calendrier est liée, sinon des lignes saisies à la main ; la fenêtre le
|
||||
dit sous le champ pour éviter la surprise.
|
||||
|
||||
## Sécurité
|
||||
|
||||
- **Erreurs des server actions** : un `throw` dans une action est masqué par
|
||||
|
||||
@@ -6,7 +6,7 @@ import { db } from "@/db";
|
||||
import { meetingRegistrations, meetings, pastMeetingPhotos, pastMeetings } from "@/db/schema";
|
||||
import { JsonLd } from "@/components/JsonLd";
|
||||
import { MeetingCard } from "@/components/MeetingCard";
|
||||
import { PastMeetingGallery } from "@/components/PastMeetingGallery";
|
||||
import { PastMeetingCard } from "@/components/PastMeetingCard";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
import { SiteHeader } from "@/components/SiteHeader";
|
||||
import {
|
||||
@@ -45,6 +45,11 @@ function formatDate(date: Date) {
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
/** Sans le jour de la semaine : la carte d'archive est déjà dense. */
|
||||
function formatPastDate(date: Date) {
|
||||
return new Intl.DateTimeFormat("fr-FR", { day: "numeric", month: "long", year: "numeric" }).format(date);
|
||||
}
|
||||
|
||||
function formatTime(date: Date) {
|
||||
return new Intl.DateTimeFormat("fr-FR", { hour: "2-digit", minute: "2-digit" }).format(date);
|
||||
}
|
||||
@@ -290,16 +295,18 @@ export default async function AssociationPage() {
|
||||
? registrationCounts.get(meeting.meetingId) ?? 0
|
||||
: splitLines(meeting.participants ?? "").length;
|
||||
return (
|
||||
<article key={meeting.id} style={{ background: "#fff", border: "1px solid #e6dcc6", borderRadius: 8, padding: 18 }}>
|
||||
<div style={{ color: "#9a6638", fontSize: 12.5, fontWeight: 800 }}>{formatDate(meeting.eventDate)}</div>
|
||||
<h3 className="font-display" style={{ color: "#26201a", fontSize: 22, margin: "7px 0" }}>{meeting.title}</h3>
|
||||
{meeting.location && <div style={{ color: "#6c6150", fontSize: 13, fontWeight: 700 }}>{meeting.location}</div>}
|
||||
{meeting.description && <p style={{ color: "#8c8068", fontSize: 13.5, lineHeight: 1.65 }}>{meeting.description}</p>}
|
||||
<div style={{ color: "#6c6150", fontSize: 12.5, fontWeight: 800, marginBottom: 12 }}>
|
||||
{participantCount} participant{participantCount > 1 ? "s" : ""} · {photos.length} photo{photos.length > 1 ? "s" : ""}
|
||||
</div>
|
||||
<PastMeetingGallery title={meeting.title} photos={photos} />
|
||||
</article>
|
||||
<PastMeetingCard
|
||||
key={meeting.id}
|
||||
meeting={{
|
||||
id: meeting.id,
|
||||
title: meeting.title,
|
||||
dateLabel: formatPastDate(meeting.eventDate),
|
||||
location: meeting.location,
|
||||
description: meeting.description,
|
||||
participantCount,
|
||||
photos: photos.map((photo) => ({ id: photo.id, imageUrl: photo.imageUrl, caption: photo.caption })),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
+149
-57
@@ -982,46 +982,76 @@ export async function deleteMeetingRegistration(formData: FormData) {
|
||||
revalidateMeetingPaths(registration?.meetingId);
|
||||
}
|
||||
|
||||
export async function createPastMeeting(formData: FormData) {
|
||||
const { role } = await requireRole();
|
||||
if (!can(role, "manageMeetings")) throw new Error("Accès refusé");
|
||||
const title = asString(formData, "title");
|
||||
if (!title) return;
|
||||
await db.insert(pastMeetings).values({
|
||||
title,
|
||||
eventDate: asDate(formData, "eventDate"),
|
||||
location: asNullableString(formData, "location"),
|
||||
description: asNullableString(formData, "description"),
|
||||
participants: asNullableString(formData, "participants"),
|
||||
meetingId: formData.get("meetingId") ? Number(formData.get("meetingId")) : null,
|
||||
});
|
||||
/** Chemins où une rencontre passée est affichée, publics comme backoffice. */
|
||||
function revalidatePastMeetingPaths() {
|
||||
revalidatePath("/backend/rencontres");
|
||||
revalidatePath("/association");
|
||||
revalidatePath("/backend/rencontres-passees");
|
||||
revalidatePath("/association");
|
||||
revalidatePath("/rencontres-passees");
|
||||
}
|
||||
|
||||
export async function updatePastMeeting(formData: FormData) {
|
||||
export type SavedPastMeeting = { id: number };
|
||||
|
||||
/**
|
||||
* Crée ou met à jour une rencontre passée. Une seule action pour les deux cas :
|
||||
* la fenêtre du backoffice ne fait pas la différence, elle enregistre une fiche
|
||||
* puis lui attache ses photos.
|
||||
*
|
||||
* Les refus attendus — titre vide, date illisible, rencontre liée disparue —
|
||||
* sont **renvoyés** et affichés par la fenêtre, qui garde la saisie. Un `throw`
|
||||
* deviendrait un digest illisible en production, et la fiche en cours de
|
||||
* rédaction serait perdue.
|
||||
*/
|
||||
export async function savePastMeeting(formData: FormData): Promise<SavedPastMeeting | ActionError> {
|
||||
const { role } = await requireRole();
|
||||
if (!can(role, "manageMeetings")) throw new Error("Accès refusé");
|
||||
const id = Number(formData.get("id"));
|
||||
|
||||
const id = Number(formData.get("id") ?? 0) || null;
|
||||
const title = asString(formData, "title");
|
||||
if (!id || !title) return;
|
||||
await db
|
||||
.update(pastMeetings)
|
||||
.set({
|
||||
title,
|
||||
eventDate: asDate(formData, "eventDate"),
|
||||
location: asNullableString(formData, "location"),
|
||||
description: asNullableString(formData, "description"),
|
||||
participants: asNullableString(formData, "participants"),
|
||||
meetingId: formData.get("meetingId") ? Number(formData.get("meetingId")) : null,
|
||||
})
|
||||
.where(eq(pastMeetings.id, id));
|
||||
revalidatePath("/backend/rencontres");
|
||||
revalidatePath("/association");
|
||||
revalidatePath("/backend/rencontres-passees");
|
||||
revalidatePath("/rencontres-passees");
|
||||
if (!title) return { error: "Donnez un titre à cette rencontre." };
|
||||
|
||||
const rawDate = asString(formData, "eventDate");
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(rawDate)) return { error: "Renseignez la date de la rencontre." };
|
||||
const eventDate = new Date(`${rawDate}T12:00:00`);
|
||||
if (Number.isNaN(eventDate.getTime())) return { error: "Date invalide." };
|
||||
|
||||
// Le lien vers une rencontre du calendrier est vérifié : une rencontre
|
||||
// supprimée entre l'ouverture de la fenêtre et l'enregistrement ferait sinon
|
||||
// échouer l'écriture sur une violation de clé étrangère, donc sans explication.
|
||||
const rawMeetingId = asString(formData, "meetingId");
|
||||
let meetingId: number | null = null;
|
||||
if (rawMeetingId) {
|
||||
meetingId = Number(rawMeetingId);
|
||||
if (!Number.isInteger(meetingId) || meetingId <= 0) return { error: "Rencontre liée invalide." };
|
||||
const [linked] = await db.select({ id: meetings.id }).from(meetings).where(eq(meetings.id, meetingId));
|
||||
if (!linked) return { error: "Cette rencontre du calendrier n'existe plus." };
|
||||
}
|
||||
|
||||
const values = {
|
||||
title,
|
||||
eventDate,
|
||||
location: asNullableString(formData, "location"),
|
||||
// Les formulaires HTML encodent les sauts de ligne en CRLF : on normalise
|
||||
// pour que le texte relu soit celui qui a été écrit.
|
||||
description: asString(formData, "description").replace(/\r\n?/g, "\n") || null,
|
||||
participants: asString(formData, "participants").replace(/\r\n?/g, "\n") || null,
|
||||
meetingId,
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const [updated] = await db
|
||||
.update(pastMeetings)
|
||||
.set(values)
|
||||
.where(eq(pastMeetings.id, id))
|
||||
.returning({ id: pastMeetings.id });
|
||||
if (!updated) return { error: "Cette rencontre passée n'existe plus." };
|
||||
revalidatePastMeetingPaths();
|
||||
return { id: updated.id };
|
||||
}
|
||||
|
||||
const [created] = await db.insert(pastMeetings).values(values).returning({ id: pastMeetings.id });
|
||||
revalidatePastMeetingPaths();
|
||||
return { id: created.id };
|
||||
}
|
||||
|
||||
export async function deletePastMeeting(formData: FormData) {
|
||||
@@ -1030,44 +1060,106 @@ export async function deletePastMeeting(formData: FormData) {
|
||||
const id = Number(formData.get("id"));
|
||||
if (!id) return;
|
||||
await db.delete(pastMeetings).where(eq(pastMeetings.id, id));
|
||||
revalidatePath("/backend/rencontres");
|
||||
revalidatePath("/association");
|
||||
revalidatePath("/backend/rencontres-passees");
|
||||
revalidatePath("/rencontres-passees");
|
||||
revalidatePastMeetingPaths();
|
||||
}
|
||||
|
||||
export async function addPastMeetingPhoto(formData: FormData) {
|
||||
/** Les identifiants reviennent dans l'ordre d'insertion : la fenêtre s'en sert
|
||||
* pour réordonner l'ensemble une fois toutes les photos envoyées. */
|
||||
export type AddedPhotos = { added: number; ids: number[] };
|
||||
|
||||
/**
|
||||
* Attache un lot de photos à une rencontre passée.
|
||||
*
|
||||
* Le navigateur compresse puis découpe l'envoi en paquets tenant sous la limite
|
||||
* des server actions (`chunkByBytes`) : plusieurs appels, donc, et chacun doit
|
||||
* pouvoir échouer seul. Les photos déjà enregistrées le restent.
|
||||
*/
|
||||
export async function addPastMeetingPhotos(formData: FormData): Promise<AddedPhotos | ActionError> {
|
||||
const { role } = await requireRole();
|
||||
if (!can(role, "manageMeetings")) throw new Error("Accès refusé");
|
||||
|
||||
const pastMeetingId = Number(formData.get("pastMeetingId"));
|
||||
const imageUrl = asString(formData, "imageUrl");
|
||||
if (!pastMeetingId || !imageUrl) return;
|
||||
if (!pastMeetingId) return { error: "Rencontre introuvable." };
|
||||
const [archive] = await db.select({ id: pastMeetings.id }).from(pastMeetings).where(eq(pastMeetings.id, pastMeetingId));
|
||||
if (!archive) return { error: "Cette rencontre passée n'existe plus." };
|
||||
|
||||
const images = formData.getAll("imageUrl").map((value) => String(value));
|
||||
const captions = formData.getAll("caption").map((value) => String(value).trim().slice(0, 200));
|
||||
if (images.length === 0) return { added: 0, ids: [] };
|
||||
|
||||
const rows: { pastMeetingId: number; imageUrl: string; caption: string | null; position: number }[] = [];
|
||||
const [{ max } = { max: 0 }] = await db
|
||||
.select({ max: sql<number>`coalesce(max(${pastMeetingPhotos.position}), 0)` })
|
||||
.from(pastMeetingPhotos)
|
||||
.where(eq(pastMeetingPhotos.pastMeetingId, pastMeetingId));
|
||||
await db.insert(pastMeetingPhotos).values({
|
||||
pastMeetingId,
|
||||
imageUrl,
|
||||
caption: asNullableString(formData, "caption"),
|
||||
position: Number(max) + 1,
|
||||
});
|
||||
revalidatePath("/backend/rencontres");
|
||||
revalidatePath("/association");
|
||||
revalidatePath("/backend/rencontres-passees");
|
||||
revalidatePath("/rencontres-passees");
|
||||
|
||||
for (const [index, image] of images.entries()) {
|
||||
const value = image.trim();
|
||||
if (!value) continue;
|
||||
// Une image n'est acceptée qu'en data-URI : une URL ferait charger par le
|
||||
// serveur une adresse choisie par l'utilisateur (SSRF).
|
||||
if (value.length > MAX_IMAGE_DATA_URI) return { error: "Une photo est trop lourde même après compression." };
|
||||
if (!IMAGE_DATA_URI.test(value)) return { error: "Format de photo non accepté." };
|
||||
rows.push({
|
||||
pastMeetingId,
|
||||
imageUrl: value,
|
||||
caption: captions[index] || null,
|
||||
position: Number(max) + index + 1,
|
||||
});
|
||||
}
|
||||
|
||||
if (rows.length === 0) return { added: 0, ids: [] };
|
||||
const inserted = await db.insert(pastMeetingPhotos).values(rows).returning({ id: pastMeetingPhotos.id });
|
||||
revalidatePastMeetingPaths();
|
||||
return { added: inserted.length, ids: inserted.map((photo) => photo.id) };
|
||||
}
|
||||
|
||||
export async function deletePastMeetingPhoto(formData: FormData) {
|
||||
export type SyncedPhotos = { removed: number };
|
||||
|
||||
/**
|
||||
* Aligne les photos existantes sur ce que montre la fenêtre : ordre, légendes,
|
||||
* et suppression de celles qui en ont été retirées.
|
||||
*
|
||||
* `syncPhotos` est obligatoire : sans ce drapeau, un appel amputé de sa liste
|
||||
* (requête tronquée, formulaire partiel) effacerait toute la galerie en silence.
|
||||
*/
|
||||
export async function savePastMeetingPhotos(formData: FormData): Promise<SyncedPhotos | ActionError> {
|
||||
const { role } = await requireRole();
|
||||
if (!can(role, "manageMeetings")) throw new Error("Accès refusé");
|
||||
const id = Number(formData.get("id"));
|
||||
if (!id) return;
|
||||
await db.delete(pastMeetingPhotos).where(eq(pastMeetingPhotos.id, id));
|
||||
revalidatePath("/backend/rencontres");
|
||||
revalidatePath("/association");
|
||||
revalidatePath("/backend/rencontres-passees");
|
||||
revalidatePath("/rencontres-passees");
|
||||
if (formData.get("syncPhotos") !== "1") return { error: "Demande incomplète." };
|
||||
|
||||
const pastMeetingId = Number(formData.get("pastMeetingId"));
|
||||
if (!pastMeetingId) return { error: "Rencontre introuvable." };
|
||||
|
||||
const kept = formData
|
||||
.getAll("photoId")
|
||||
.map((value) => Number(value))
|
||||
.filter((value) => Number.isInteger(value) && value > 0);
|
||||
const captions = formData.getAll("photoCaption").map((value) => String(value).trim().slice(0, 200));
|
||||
|
||||
const existing = await db
|
||||
.select({ id: pastMeetingPhotos.id })
|
||||
.from(pastMeetingPhotos)
|
||||
.where(eq(pastMeetingPhotos.pastMeetingId, pastMeetingId));
|
||||
const owned = new Set(existing.map((photo) => photo.id));
|
||||
|
||||
let removed = 0;
|
||||
for (const photo of existing) {
|
||||
if (kept.includes(photo.id)) continue;
|
||||
await db.delete(pastMeetingPhotos).where(eq(pastMeetingPhotos.id, photo.id));
|
||||
removed += 1;
|
||||
}
|
||||
|
||||
for (const [index, photoId] of kept.entries()) {
|
||||
if (!owned.has(photoId)) continue;
|
||||
await db
|
||||
.update(pastMeetingPhotos)
|
||||
.set({ caption: captions[index] || null, position: index + 1 })
|
||||
.where(eq(pastMeetingPhotos.id, photoId));
|
||||
}
|
||||
|
||||
revalidatePastMeetingPaths();
|
||||
return { removed };
|
||||
}
|
||||
|
||||
// ---- Paramètres du site ----
|
||||
|
||||
@@ -11,6 +11,8 @@ import type { PromoCategoryGroup } from "@/lib/promo-categories";
|
||||
import { formatValidity, isRangeInvalid } from "@/lib/promo-validity";
|
||||
import { formatSchedule, parseScheduleInput } from "@/lib/promo-schedule";
|
||||
import { imageNotes, imageSummary, type ImageInfo } from "@/lib/image-info";
|
||||
import { FIELD_MAX_BYTES, compressionSummary } from "@/lib/image-compress";
|
||||
import { prepareImageFile } from "@/lib/image-compress-dom";
|
||||
|
||||
const STRIPE_WARM =
|
||||
"repeating-linear-gradient(45deg,#efe9da,#efe9da 12px,#e6ddc9 12px,#e6ddc9 24px)";
|
||||
@@ -118,6 +120,7 @@ export function MemberSpaceForm({
|
||||
// c'est ici — dernier moment où l'adhérent peut changer de visuel — qu'on lui
|
||||
// dit ce que les réseaux feront d'un format inattendu.
|
||||
const [imgInfo, setImgInfo] = useState<ImageInfo | null>(null);
|
||||
const [imgNote, setImgNote] = useState<string | null>(null);
|
||||
const [shares, setShares] = useState<SocialNetwork[]>([]);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [pending, setPending] = useState(false);
|
||||
@@ -128,25 +131,30 @@ export function MemberSpaceForm({
|
||||
setSubmitted(false);
|
||||
}
|
||||
|
||||
function onFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
/**
|
||||
* Le navigateur compresse avant l'envoi. Une photo de téléphone dépasse la
|
||||
* limite de 3 Mo du serveur : elle était refusée en pleine publication, sans
|
||||
* que l'adhérent puisse rien y faire depuis son écran. Le cadrage, lui, n'est
|
||||
* pas touché — le rapport largeur/hauteur est conservé, donc les remarques de
|
||||
* `ImageReport` sur ce que feront les réseaux restent vraies.
|
||||
*/
|
||||
async function onFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const f = e.target.files?.[0];
|
||||
if (!f) return;
|
||||
const bytes = f.size;
|
||||
setImgInfo(null);
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const dataUrl = String(reader.result);
|
||||
setImgData(dataUrl);
|
||||
setImgNote("Compression en cours…");
|
||||
try {
|
||||
const prepared = await prepareImageFile(f, { maxBytes: FIELD_MAX_BYTES });
|
||||
setImgData(prepared.dataUri);
|
||||
setSubmitted(false);
|
||||
// Les dimensions ne sont lisibles qu'une fois l'image décodée par le
|
||||
// navigateur. Un échec de décodage laisse simplement le résumé vide :
|
||||
// l'information est un confort, elle ne conditionne pas le dépôt.
|
||||
const probe = new Image();
|
||||
probe.onload = () => setImgInfo({ width: probe.naturalWidth, height: probe.naturalHeight, bytes });
|
||||
probe.onerror = () => setImgInfo(null);
|
||||
probe.src = dataUrl;
|
||||
};
|
||||
reader.readAsDataURL(f);
|
||||
// Le résumé décrit l'image telle qu'elle sera publiée, pas le fichier
|
||||
// d'origine : c'est celle-là que verront le site et les réseaux.
|
||||
setImgInfo({ width: prepared.width, height: prepared.height, bytes: prepared.bytes });
|
||||
setImgNote(prepared.recompressed ? compressionSummary(prepared) : null);
|
||||
} catch (cause) {
|
||||
setImgNote(cause instanceof Error ? cause.message : "Image refusée.");
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
@@ -158,6 +166,7 @@ export function MemberSpaceForm({
|
||||
setPublishAt("");
|
||||
setImgData("");
|
||||
setImgInfo(null);
|
||||
setImgNote(null);
|
||||
setShares([]);
|
||||
setSubmitted(false);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
@@ -245,6 +254,9 @@ export function MemberSpaceForm({
|
||||
<input ref={fileRef} type="file" accept="image/*" onChange={onFile} style={{ display: "none" }} />
|
||||
</label>
|
||||
|
||||
{imgNote && (
|
||||
<div style={{ marginTop: -8, marginBottom: 10, fontSize: 12.5, color: "#6c6150" }}>{imgNote}</div>
|
||||
)}
|
||||
{imgInfo && <ImageReport info={imgInfo} />}
|
||||
|
||||
<label className="field-label">Titre de la promotion</label>
|
||||
|
||||
@@ -0,0 +1,395 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ModalShell } from "@/components/ModalShell";
|
||||
import { PHOTO_MAX_BYTES, base64Bytes, chunkByBytes, compressionSummary } from "@/lib/image-compress";
|
||||
import { prepareImageFile } from "@/lib/image-compress-dom";
|
||||
import type { ArchiveDraft, DialogPhoto, MeetingOption } from "./draft";
|
||||
import {
|
||||
addPastMeetingPhotos,
|
||||
deletePastMeeting,
|
||||
savePastMeeting,
|
||||
savePastMeetingPhotos,
|
||||
} from "../actions";
|
||||
|
||||
/**
|
||||
* Bouton d'ouverture de la fenêtre d'édition. La fenêtre n'est montée qu'à
|
||||
* l'ouverture : chaque ouverture repart donc de la fiche telle qu'elle est en
|
||||
* base, sans état résiduel de la précédente.
|
||||
*/
|
||||
export function PastMeetingDialogButton({
|
||||
draft,
|
||||
meetings,
|
||||
children,
|
||||
style,
|
||||
}: {
|
||||
draft: ArchiveDraft;
|
||||
meetings: MeetingOption[];
|
||||
children: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setOpen(true)} style={style}>
|
||||
{children}
|
||||
</button>
|
||||
{open && <PastMeetingDialog draft={draft} meetings={meetings} onClose={() => setOpen(false)} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function PastMeetingDialog({
|
||||
draft,
|
||||
meetings,
|
||||
onClose,
|
||||
}: {
|
||||
draft: ArchiveDraft;
|
||||
meetings: MeetingOption[];
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const photosRef = useRef<HTMLDivElement>(null);
|
||||
const [fields, setFields] = useState(draft);
|
||||
const [photos, setPhotos] = useState<DialogPhoto[]>(draft.photos);
|
||||
const [over, setOver] = useState(false);
|
||||
const [working, setWorking] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [notes, setNotes] = useState<string[]>([]);
|
||||
const [closing, setClosing] = useState(false);
|
||||
const [refreshing, startRefresh] = useTransition();
|
||||
|
||||
/**
|
||||
* On ne referme qu'une fois la page rafraîchie. Sans cette attente, rouvrir la
|
||||
* fiche dans la foulée montrerait encore l'état d'avant l'enregistrement — la
|
||||
* rencontre liée revenant à « Aucune », par exemple — et on croirait que rien
|
||||
* n'a été retenu.
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (closing && !refreshing) onClose();
|
||||
}, [closing, refreshing, onClose]);
|
||||
|
||||
const linked = meetings.find((meeting) => String(meeting.id) === fields.meetingId);
|
||||
const busy = working !== null || closing;
|
||||
|
||||
function set<K extends keyof ArchiveDraft>(key: K, value: ArchiveDraft[K]) {
|
||||
setFields((current) => ({ ...current, [key]: value }));
|
||||
}
|
||||
|
||||
/**
|
||||
* Compression **avant** l'envoi : une photo de téléphone pèse 4 à 12 Mo, la
|
||||
* limite d'une server action est à 4 Mo. Le navigateur redimensionne et
|
||||
* réencode, en ne descendant en qualité que le strict nécessaire.
|
||||
*/
|
||||
async function addFiles(list: FileList | null) {
|
||||
if (!list || list.length === 0) return;
|
||||
const files = Array.from(list);
|
||||
setError(null);
|
||||
const added: DialogPhoto[] = [];
|
||||
const messages: string[] = [];
|
||||
for (const [index, file] of files.entries()) {
|
||||
setWorking(`Compression de la photo ${index + 1} sur ${files.length}…`);
|
||||
try {
|
||||
const prepared = await prepareImageFile(file, { maxBytes: PHOTO_MAX_BYTES });
|
||||
added.push({
|
||||
key: `${Date.now()}-${index}-${file.name}`,
|
||||
id: null,
|
||||
imageUrl: prepared.dataUri,
|
||||
caption: "",
|
||||
bytes: prepared.bytes,
|
||||
});
|
||||
messages.push(`${file.name} — ${compressionSummary(prepared)}`);
|
||||
} catch (cause) {
|
||||
messages.push(`${file.name} — ${cause instanceof Error ? cause.message : "photo refusée"}`);
|
||||
}
|
||||
}
|
||||
setWorking(null);
|
||||
setPhotos((current) => [...current, ...added]);
|
||||
setNotes(messages);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
// La galerie est en bas de la fenêtre : sans cela, on dépose des photos
|
||||
// sans jamais voir apparaître ce qu'on vient d'ajouter.
|
||||
photosRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
}
|
||||
|
||||
function movePhoto(index: number, step: number) {
|
||||
setPhotos((current) => {
|
||||
const target = index + step;
|
||||
if (target < 0 || target >= current.length) return current;
|
||||
const next = [...current];
|
||||
[next[index], next[target]] = [next[target], next[index]];
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
async function save() {
|
||||
setError(null);
|
||||
setWorking("Enregistrement…");
|
||||
try {
|
||||
const form = new FormData();
|
||||
if (fields.id) form.set("id", String(fields.id));
|
||||
form.set("title", fields.title);
|
||||
form.set("eventDate", fields.eventDate);
|
||||
form.set("location", fields.location);
|
||||
form.set("description", fields.description);
|
||||
form.set("participants", fields.participants);
|
||||
form.set("meetingId", fields.meetingId);
|
||||
const saved = await savePastMeeting(form);
|
||||
if ("error" in saved) {
|
||||
setError(saved.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// Les nouvelles photos partent en paquets : plusieurs data-URI dans une
|
||||
// seule requête dépasseraient la limite de corps des server actions.
|
||||
const fresh = photos.filter((photo) => photo.id === null);
|
||||
const groups = chunkByBytes(fresh.map((photo) => photo.bytes || base64Bytes(photo.imageUrl)));
|
||||
const freshIds: number[] = [];
|
||||
let sent = 0;
|
||||
for (const group of groups) {
|
||||
setWorking(`Envoi des photos ${sent + 1} à ${sent + group.length} sur ${fresh.length}…`);
|
||||
const batch = new FormData();
|
||||
batch.set("pastMeetingId", String(saved.id));
|
||||
for (const index of group) {
|
||||
batch.append("imageUrl", fresh[index].imageUrl);
|
||||
batch.append("caption", fresh[index].caption);
|
||||
}
|
||||
const result = await addPastMeetingPhotos(batch);
|
||||
if ("error" in result) {
|
||||
setError(`${result.error} Les photos déjà envoyées sont conservées.`);
|
||||
router.refresh();
|
||||
return;
|
||||
}
|
||||
freshIds.push(...result.ids);
|
||||
sent += group.length;
|
||||
}
|
||||
|
||||
// Passage final : ordre affiché, légendes, et suppression de ce qui a été
|
||||
// retiré de la fenêtre.
|
||||
setWorking("Mise en ordre de la galerie…");
|
||||
const sync = new FormData();
|
||||
sync.set("syncPhotos", "1");
|
||||
sync.set("pastMeetingId", String(saved.id));
|
||||
let cursor = 0;
|
||||
for (const photo of photos) {
|
||||
const photoId = photo.id ?? freshIds[cursor++];
|
||||
if (!photoId) continue;
|
||||
sync.append("photoId", String(photoId));
|
||||
sync.append("photoCaption", photo.caption);
|
||||
}
|
||||
const synced = await savePastMeetingPhotos(sync);
|
||||
if ("error" in synced) {
|
||||
setError(synced.error);
|
||||
router.refresh();
|
||||
return;
|
||||
}
|
||||
|
||||
setClosing(true);
|
||||
startRefresh(() => router.refresh());
|
||||
} catch (cause) {
|
||||
setError(cause instanceof Error ? cause.message : "Enregistrement impossible.");
|
||||
} finally {
|
||||
setWorking(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
if (!fields.id) return;
|
||||
if (!window.confirm("Supprimer définitivement cette rencontre passée et ses photos ?")) return;
|
||||
setWorking("Suppression…");
|
||||
const form = new FormData();
|
||||
form.set("id", String(fields.id));
|
||||
await deletePastMeeting(form);
|
||||
setWorking(null);
|
||||
setClosing(true);
|
||||
startRefresh(() => router.refresh());
|
||||
}
|
||||
|
||||
return (
|
||||
<ModalShell
|
||||
label={fields.id ? `Modifier ${fields.title}` : "Nouvelle rencontre passée"}
|
||||
onClose={() => {
|
||||
if (busy) return;
|
||||
onClose();
|
||||
}}
|
||||
panelClassName="pm-panel pm-panel--form"
|
||||
>
|
||||
<div className="pm-form">
|
||||
<div className="pm-form__scroll">
|
||||
<h2 className="font-display" style={{ margin: "0 0 4px", fontSize: 22, color: "#26201a", paddingRight: 44 }}>
|
||||
{fields.id ? "Modifier la rencontre passée" : "Nouvelle rencontre passée"}
|
||||
</h2>
|
||||
<p style={{ color: "#8c8068", fontSize: 13, margin: "0 0 18px" }}>
|
||||
Tout se remplit ici : le récit, les participants et les photos — y compris pour une rencontre qui n'est pas
|
||||
encore publiée.
|
||||
</p>
|
||||
|
||||
{fields.refused.length > 0 && (
|
||||
<div style={{ background: "#fbe9e6", border: "1px solid #f0c4bb", color: "#b53a25", borderRadius: 8, padding: "11px 13px", fontSize: 12.5, lineHeight: 1.5, marginBottom: 14 }}>
|
||||
<strong>Droit à l'image refusé :</strong> {fields.refused.join(", ")}. Vérifiez que ces personnes ne
|
||||
figurent pas sur les photos publiées.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-2" style={{ gap: 14 }}>
|
||||
<div>
|
||||
<label className="field-label">Titre</label>
|
||||
<input className="field" value={fields.title} onChange={(event) => set("title", event.target.value)} maxLength={200} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Date</label>
|
||||
<input type="date" className="field" value={fields.eventDate} onChange={(event) => set("eventDate", event.target.value)} />
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label className="field-label">Lieu</label>
|
||||
<input className="field" value={fields.location} onChange={(event) => set("location", event.target.value)} maxLength={240} />
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label className="field-label">Rencontre liée (facultatif)</label>
|
||||
<select className="field" value={fields.meetingId} onChange={(event) => set("meetingId", event.target.value)}>
|
||||
<option value="">Aucune — participants saisis à la main</option>
|
||||
{meetings.map((meeting) => (
|
||||
<option key={meeting.id} value={String(meeting.id)}>
|
||||
{meeting.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div style={{ fontSize: 12.5, color: "#8c8068", marginTop: 6, lineHeight: 1.5 }}>
|
||||
{linked
|
||||
? `Le site affichera ${linked.registered} participant${linked.registered > 1 ? "s" : ""} d'après les inscriptions ; la liste saisie à la main est alors ignorée.`
|
||||
: "Sans rencontre liée, le nombre affiché est celui des lignes saisies ci-dessous (une personne par ligne)."}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label className="field-label">Récit de la rencontre</label>
|
||||
<textarea
|
||||
className="field"
|
||||
rows={12}
|
||||
value={fields.description}
|
||||
onChange={(event) => set("description", event.target.value)}
|
||||
placeholder="Déroulé de la matinée, intervenants, décisions prises, prochaines étapes…"
|
||||
style={{ minHeight: 260, resize: "vertical", lineHeight: 1.7 }}
|
||||
/>
|
||||
<div style={{ fontSize: 12.5, color: "#8c8068", marginTop: 6 }}>
|
||||
Les paragraphes sont conservés tels quels sur le site. {fields.description.length} caractères.
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label className="field-label">Participants (une personne par ligne)</label>
|
||||
<textarea
|
||||
className="field"
|
||||
rows={4}
|
||||
value={fields.participants}
|
||||
onChange={(event) => set("participants", event.target.value)}
|
||||
style={{ resize: "vertical" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={photosRef} style={{ marginTop: 22, borderTop: "1px solid #efe7d6", paddingTop: 18 }}>
|
||||
<label className="field-label">Photos ({photos.length})</label>
|
||||
<div
|
||||
className={over ? "pm-dropzone pm-dropzone--over" : "pm-dropzone"}
|
||||
onDragOver={(event) => {
|
||||
event.preventDefault();
|
||||
setOver(true);
|
||||
}}
|
||||
onDragLeave={() => setOver(false)}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault();
|
||||
setOver(false);
|
||||
void addFiles(event.dataTransfer.files);
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: 10 }}>
|
||||
Glissez plusieurs photos ici, ou choisissez-les sur votre appareil. Elles sont redimensionnées et
|
||||
compressées automatiquement : aucune n'est trop lourde.
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={busy}
|
||||
style={{ border: "1px solid #d6c9ad", background: "#fff", color: "#6f6450", fontWeight: 700, fontSize: 13, padding: "9px 16px", borderRadius: 9, cursor: busy ? "progress" : "pointer" }}
|
||||
>
|
||||
Choisir des photos
|
||||
</button>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
onChange={(event) => void addFiles(event.target.files)}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{notes.length > 0 && (
|
||||
<ul style={{ margin: "10px 0 0", paddingLeft: 18, color: "#8c8068", fontSize: 12.5, lineHeight: 1.6 }}>
|
||||
{notes.map((note) => (
|
||||
<li key={note}>{note}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{photos.length > 0 && (
|
||||
<div className="pm-photo-grid">
|
||||
{photos.map((photo, index) => (
|
||||
<div key={photo.key} className="pm-photo">
|
||||
<div className="pm-photo__image" style={{ backgroundImage: `url(${photo.imageUrl})` }} />
|
||||
<div className="pm-photo__tools">
|
||||
<button type="button" className="pm-photo__tool" onClick={() => movePhoto(index, -1)} disabled={index === 0} aria-label="Déplacer avant">←</button>
|
||||
<button type="button" className="pm-photo__tool" onClick={() => movePhoto(index, 1)} disabled={index === photos.length - 1} aria-label="Déplacer après">→</button>
|
||||
<button
|
||||
type="button"
|
||||
className="pm-photo__tool pm-photo__tool--danger"
|
||||
onClick={() => setPhotos((current) => current.filter((item) => item.key !== photo.key))}
|
||||
>
|
||||
Retirer
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
className="field"
|
||||
style={{ border: "none", borderTop: "1px solid #efe7d6", borderRadius: 0, fontSize: 12.5 }}
|
||||
placeholder="Légende (facultative)"
|
||||
maxLength={200}
|
||||
value={photo.caption}
|
||||
onChange={(event) =>
|
||||
setPhotos((current) =>
|
||||
current.map((item) => (item.key === photo.key ? { ...item, caption: event.target.value } : item)),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ fontSize: 12.5, color: "#8c8068", marginTop: 10 }}>
|
||||
La première photo sert de couverture à la carte ; les flèches changent l'ordre de la galerie.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pm-form__foot">
|
||||
<div style={{ fontSize: 13, color: error ? "#a3372e" : "#6c6150", fontWeight: error ? 700 : 600, flex: "1 1 240px" }}>
|
||||
{error ?? working ?? (closing ? "Mise à jour de la page…" : fields.id ? "" : "La rencontre sera visible sur le site dès l'enregistrement.")}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 10, alignItems: "center" }}>
|
||||
{fields.id && (
|
||||
<button type="button" onClick={remove} disabled={busy} style={{ border: "1px solid #e0c3bb", background: "#fff", color: "#d8472b", fontWeight: 800, fontSize: 13, padding: "10px 14px", borderRadius: 8, cursor: "pointer" }}>
|
||||
Supprimer
|
||||
</button>
|
||||
)}
|
||||
<button type="button" onClick={onClose} disabled={busy} style={{ border: "1px solid #d6c9ad", background: "#fff", color: "#6f6450", fontWeight: 700, fontSize: 13, padding: "10px 14px", borderRadius: 8, cursor: "pointer" }}>
|
||||
Annuler
|
||||
</button>
|
||||
<button type="button" onClick={save} disabled={busy} style={{ border: "none", background: "#13324F", color: "#fff", fontWeight: 800, fontSize: 13.5, padding: "11px 18px", borderRadius: 8, cursor: busy ? "progress" : "pointer", opacity: busy ? 0.7 : 1 }}>
|
||||
{busy ? "Patientez…" : "Enregistrer"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Forme d'une rencontre passée telle que la manipule la fenêtre d'édition.
|
||||
*
|
||||
* Ce module n'est **pas** marqué `"use client"` à dessein : la page (composant
|
||||
* serveur) appelle `emptyDraft()` pour préparer une fiche vierge. Exporté
|
||||
* depuis un module client, cet appel deviendrait une référence client, que le
|
||||
* serveur ne peut pas exécuter.
|
||||
*/
|
||||
|
||||
export type MeetingOption = { id: number; label: string; registered: number };
|
||||
|
||||
export type DialogPhoto = {
|
||||
/** Clé stable côté navigateur : une photo pas encore enregistrée n'a pas d'id. */
|
||||
key: string;
|
||||
id: number | null;
|
||||
imageUrl: string;
|
||||
caption: string;
|
||||
/** Poids de la data-URI, utilisé pour découper les envois en paquets. */
|
||||
bytes: number;
|
||||
};
|
||||
|
||||
export type ArchiveDraft = {
|
||||
id: number | null;
|
||||
title: string;
|
||||
eventDate: string;
|
||||
location: string;
|
||||
description: string;
|
||||
participants: string;
|
||||
meetingId: string;
|
||||
photos: DialogPhoto[];
|
||||
/** Personnes ayant refusé le droit à l'image sur la rencontre liée. */
|
||||
refused: string[];
|
||||
};
|
||||
|
||||
/** Fiche vierge, datée d'aujourd'hui dans le fuseau du navigateur du serveur. */
|
||||
export function emptyDraft(): ArchiveDraft {
|
||||
const today = new Date();
|
||||
today.setMinutes(today.getMinutes() - today.getTimezoneOffset());
|
||||
return {
|
||||
id: null,
|
||||
title: "",
|
||||
eventDate: today.toISOString().slice(0, 10),
|
||||
location: "",
|
||||
description: "",
|
||||
participants: "",
|
||||
meetingId: "",
|
||||
photos: [],
|
||||
refused: [],
|
||||
};
|
||||
}
|
||||
@@ -4,15 +4,10 @@ import { asc, desc, eq, sql } from "drizzle-orm";
|
||||
import { getSession } from "@/lib/session";
|
||||
import { db } from "@/db";
|
||||
import { meetingRegistrations, meetings, pastMeetingPhotos, pastMeetings } from "@/db/schema";
|
||||
import { ImageField } from "@/components/ImageField";
|
||||
import { can } from "@/lib/rbac";
|
||||
import {
|
||||
addPastMeetingPhoto,
|
||||
createPastMeeting,
|
||||
deletePastMeeting,
|
||||
deletePastMeetingPhoto,
|
||||
updatePastMeeting,
|
||||
} from "../actions";
|
||||
import { splitLines } from "@/lib/site-settings";
|
||||
import { PastMeetingDialogButton } from "./PastMeetingDialog";
|
||||
import { emptyDraft, type ArchiveDraft, type MeetingOption } from "./draft";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -22,6 +17,10 @@ function dateValue(date: Date) {
|
||||
return local.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function formatDate(date: Date) {
|
||||
return new Intl.DateTimeFormat("fr-FR", { day: "numeric", month: "long", year: "numeric" }).format(date);
|
||||
}
|
||||
|
||||
export default async function PastMeetingsAdminPage() {
|
||||
const session = await getSession();
|
||||
if (!can(session?.user.role, "manageMeetings")) redirect("/backend");
|
||||
@@ -52,121 +51,110 @@ export default async function PastMeetingsAdminPage() {
|
||||
const refusalsByMeeting = new Map<number, string[]>();
|
||||
for (const refusal of refusals) refusalsByMeeting.set(refusal.meetingId, [...(refusalsByMeeting.get(refusal.meetingId) ?? []), refusal.attendeeName]);
|
||||
|
||||
const meetingOptions: MeetingOption[] = meetingRows.map((meeting) => ({
|
||||
id: meeting.id,
|
||||
registered: Number(meeting.registered),
|
||||
label: `${meeting.title} — ${formatDate(meeting.startsAt)} (${Number(meeting.registered)} inscrit${Number(meeting.registered) > 1 ? "s" : ""})`,
|
||||
}));
|
||||
|
||||
const drafts: ArchiveDraft[] = archives.map((archive) => ({
|
||||
id: archive.id,
|
||||
title: archive.title,
|
||||
eventDate: dateValue(archive.eventDate),
|
||||
location: archive.location ?? "",
|
||||
description: archive.description ?? "",
|
||||
participants: archive.participants ?? "",
|
||||
meetingId: archive.meetingId ? String(archive.meetingId) : "",
|
||||
// `bytes` ne sert qu'aux photos à envoyer : celles déjà en base ne repartent pas.
|
||||
photos: (photosByPast.get(archive.id) ?? []).map((photo) => ({
|
||||
key: `photo-${photo.id}`,
|
||||
id: photo.id,
|
||||
imageUrl: photo.imageUrl,
|
||||
caption: photo.caption ?? "",
|
||||
bytes: 0,
|
||||
})),
|
||||
refused: archive.meetingId ? refusalsByMeeting.get(archive.meetingId) ?? [] : [],
|
||||
}));
|
||||
|
||||
return (
|
||||
<div style={{ display: "grid", gap: 28 }}>
|
||||
<div style={{ display: "grid", gap: 24 }}>
|
||||
<section style={panelStyle}>
|
||||
<h2 className="font-display" style={{ margin: "0 0 6px", fontSize: 20, color: "#26201a" }}>Nouvelle rencontre passée</h2>
|
||||
<p style={{ color: "#8c8068", fontSize: 13, margin: "0 0 18px" }}>Les trois archives les plus récentes apparaissent sur « L'association » et la page complète rassemble toutes les rencontres passées.</p>
|
||||
<form action={createPastMeeting} className="grid grid-2" style={{ gap: 16 }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
|
||||
<div>
|
||||
<label className="field-label">Titre</label>
|
||||
<input name="title" className="field" required />
|
||||
<h2 className="font-display" style={{ margin: "0 0 6px", fontSize: 20, color: "#26201a" }}>Rencontres passées</h2>
|
||||
<p style={{ color: "#8c8068", fontSize: 13, margin: 0, maxWidth: 620, lineHeight: 1.6 }}>
|
||||
Une fenêtre par rencontre : récit, participants et photos au même endroit. Les trois plus récentes
|
||||
apparaissent sur « L'association », toutes sur la page des rencontres passées.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Date</label>
|
||||
<input name="eventDate" type="date" className="field" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Lieu</label>
|
||||
<input name="location" className="field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Rencontre liée</label>
|
||||
<select name="meetingId" className="field" defaultValue="">
|
||||
<option value="">Aucune</option>
|
||||
{meetingRows.map((meeting) => <option key={meeting.id} value={meeting.id}>{meeting.title} ({Number(meeting.registered)} participants)</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label className="field-label">Description</label>
|
||||
<textarea name="description" rows={3} className="field" />
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label className="field-label">Participants manuels (un par ligne, uniquement sans rencontre liée)</label>
|
||||
<textarea name="participants" rows={3} className="field" />
|
||||
</div>
|
||||
<button type="submit" style={primaryButton}>Publier l'archive</button>
|
||||
</form>
|
||||
<PastMeetingDialogButton draft={emptyDraft()} meetings={meetingOptions} style={primaryButton}>
|
||||
Nouvelle rencontre passée
|
||||
</PastMeetingDialogButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style={sectionTitle}>Archives publiées</div>
|
||||
<div className="grid grid-3" style={{ gap: 18 }}>
|
||||
{archives.map((archive) => {
|
||||
const refused = archive.meetingId ? refusalsByMeeting.get(archive.meetingId) ?? [] : [];
|
||||
return (
|
||||
<article key={archive.id} style={cardStyle}>
|
||||
{refused.length > 0 && (
|
||||
<div style={{ background: "#fbe9e6", border: "1px solid #f0c4bb", color: "#b53a25", borderRadius: 8, padding: "11px 13px", fontSize: 12.5, lineHeight: 1.5, marginBottom: 13 }}>
|
||||
<strong>Droit à l'image refusé :</strong> {refused.join(", ")}. Vérifiez que ces personnes ne figurent pas sur les photos publiées.
|
||||
</div>
|
||||
)}
|
||||
<form action={updatePastMeeting} style={{ display: "grid", gap: 12 }}>
|
||||
<input type="hidden" name="id" value={archive.id} />
|
||||
<div>
|
||||
<label className="field-label">Titre</label>
|
||||
<input name="title" defaultValue={archive.title} className="field" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Date</label>
|
||||
<input name="eventDate" type="date" defaultValue={dateValue(archive.eventDate)} className="field" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Lieu</label>
|
||||
<input name="location" defaultValue={archive.location ?? ""} className="field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Rencontre liée</label>
|
||||
<select name="meetingId" className="field" defaultValue={archive.meetingId ?? ""}>
|
||||
<option value="">Aucune</option>
|
||||
{meetingRows.map((meeting) => <option key={meeting.id} value={meeting.id}>{meeting.title} ({Number(meeting.registered)})</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Description</label>
|
||||
<textarea name="description" rows={3} defaultValue={archive.description ?? ""} className="field" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">Participants manuels</label>
|
||||
<textarea name="participants" rows={3} defaultValue={archive.participants ?? ""} className="field" />
|
||||
</div>
|
||||
<button type="submit" style={primaryButton}>Enregistrer</button>
|
||||
</form>
|
||||
|
||||
<div style={{ marginTop: 14, borderTop: "1px solid #f0e8d6", paddingTop: 14 }}>
|
||||
<form action={addPastMeetingPhoto} style={{ display: "grid", gap: 10 }}>
|
||||
<input type="hidden" name="pastMeetingId" value={archive.id} />
|
||||
<ImageField name="imageUrl" label="Ajouter une photo" height={100} />
|
||||
<input name="caption" className="field" placeholder="Légende" />
|
||||
<button type="submit" style={primaryButton}>Ajouter la photo</button>
|
||||
</form>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 12 }}>
|
||||
{(photosByPast.get(archive.id) ?? []).map((photo) => (
|
||||
<form key={photo.id} action={deletePastMeetingPhoto}>
|
||||
<input type="hidden" name="id" value={photo.id} />
|
||||
<button type="submit" title="Supprimer" aria-label={`Supprimer la photo ${photo.caption ?? ""}`} style={{ width: "100%", aspectRatio: "1 / 1", border: "1px solid #e6dcc6", borderRadius: 8, cursor: "pointer", background: `center/cover no-repeat url(${photo.imageUrl})` }} />
|
||||
</form>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action={deletePastMeeting} style={{ marginTop: 12 }}>
|
||||
<input type="hidden" name="id" value={archive.id} />
|
||||
<button type="submit" style={dangerButton}>Supprimer l'archive</button>
|
||||
</form>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{archives.length === 0 && <div style={emptyStyle}>Aucune rencontre passée publiée.</div>}
|
||||
{archives.length === 0 ? (
|
||||
<div style={emptyStyle}>Aucune rencontre passée publiée.</div>
|
||||
) : (
|
||||
<div className="grid grid-3" style={{ gap: 18 }}>
|
||||
{archives.map((archive, index) => {
|
||||
const draft = drafts[index];
|
||||
const archivePhotos = photosByPast.get(archive.id) ?? [];
|
||||
const participantCount = archive.meetingId
|
||||
? meetingOptions.find((option) => option.id === archive.meetingId)?.registered ?? 0
|
||||
: splitLines(archive.participants ?? "").length;
|
||||
const cover = archivePhotos[0]?.imageUrl;
|
||||
return (
|
||||
<PastMeetingDialogButton key={archive.id} draft={draft} meetings={meetingOptions} style={cardButton}>
|
||||
<span
|
||||
className={cover ? "pm-card__cover" : "pm-card__cover pm-card__cover--empty"}
|
||||
style={{ display: "block", borderRadius: "10px 10px 0 0", ...(cover ? { backgroundImage: `url(${cover})` } : {}) }}
|
||||
>
|
||||
{archivePhotos.length > 0 && (
|
||||
<span className="pm-card__count">{archivePhotos.length} photo{archivePhotos.length > 1 ? "s" : ""}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="pm-card__body" style={{ display: "flex" }}>
|
||||
<span style={{ color: "#9a6638", fontSize: 12.5, fontWeight: 800 }}>{formatDate(archive.eventDate)}</span>
|
||||
<span className="font-display pm-card__title" style={{ display: "-webkit-box" }}>{archive.title}</span>
|
||||
{archive.location && <span className="pm-line" style={{ color: "#6c6150", fontSize: 13, fontWeight: 700 }}>{archive.location}</span>}
|
||||
{archive.description && <span className="pm-card__text" style={{ display: "-webkit-box" }}>{archive.description}</span>}
|
||||
<span className="pm-card__meta">
|
||||
<span>{participantCount} participant{participantCount > 1 ? "s" : ""}</span>
|
||||
<span className="pm-card__more">Modifier →</span>
|
||||
</span>
|
||||
</span>
|
||||
{draft.refused.length > 0 && (
|
||||
<span style={{ display: "block", background: "#fbe9e6", color: "#b53a25", fontSize: 12, fontWeight: 700, padding: "8px 14px" }}>
|
||||
Droit à l'image refusé par {draft.refused.length} participant{draft.refused.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</PastMeetingDialogButton>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const panelStyle: CSSProperties = { background: "#fff", border: "1px solid #e6dcc6", borderRadius: 8, padding: 22 };
|
||||
const cardStyle: CSSProperties = { background: "#fff", border: "1px solid #e6dcc6", borderRadius: 8, padding: 16 };
|
||||
const sectionTitle: CSSProperties = { fontSize: 12.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "#9a8d72", fontWeight: 800, marginBottom: 12 };
|
||||
const primaryButton: CSSProperties = { border: "none", background: "#13324F", color: "#fff", fontWeight: 800, fontSize: 13.5, padding: "11px 16px", borderRadius: 8, cursor: "pointer" };
|
||||
const dangerButton: CSSProperties = { width: "100%", border: "1px solid #e0c3bb", background: "#fff", color: "#d8472b", fontWeight: 800, fontSize: 13, padding: "10px 14px", borderRadius: 8, cursor: "pointer" };
|
||||
const cardButton: CSSProperties = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: 424,
|
||||
textAlign: "left",
|
||||
background: "#fff",
|
||||
border: "1px solid #e6dcc6",
|
||||
borderRadius: 10,
|
||||
overflow: "hidden",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
font: "inherit",
|
||||
};
|
||||
const emptyStyle: CSSProperties = { background: "#fff", border: "1px solid #e6dcc6", borderRadius: 8, padding: 24, color: "#8c8068" };
|
||||
@@ -1805,3 +1805,306 @@ img {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---- Rencontres passées : cartes égales et fenêtre de lecture ----
|
||||
Les cartes ont une hauteur fixe quels que soient la longueur du texte et le
|
||||
nombre de photos : c'est la grille qui doit rester lisible, le détail vit
|
||||
dans la fenêtre. D'où les `line-clamp` — un CSS que des styles en ligne ne
|
||||
peuvent pas porter, comme les points de rupture ci-dessous. */
|
||||
.pm-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 424px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
border: 1px solid #e6dcc6;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
.pm-card:hover,
|
||||
.pm-card:focus-visible {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 14px 30px rgba(38, 32, 26, 0.13);
|
||||
}
|
||||
.pm-card__cover {
|
||||
position: relative;
|
||||
height: 178px;
|
||||
flex: none;
|
||||
background: #ece4d3 center/cover no-repeat;
|
||||
}
|
||||
.pm-card__cover--empty {
|
||||
background: repeating-linear-gradient(135deg, #efe7d6, #efe7d6 12px, #e7ddc8 12px, #e7ddc8 24px);
|
||||
}
|
||||
.pm-card__count {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
background: rgba(19, 50, 79, 0.82);
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 5px 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.pm-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 15px 17px 16px;
|
||||
}
|
||||
.pm-card__title {
|
||||
margin: 6px 0 4px;
|
||||
font-size: 21px;
|
||||
line-height: 1.2;
|
||||
color: #26201a;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pm-card__text {
|
||||
margin: 6px 0 0;
|
||||
color: #8c8068;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pm-card__meta {
|
||||
margin-top: auto;
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
color: #6c6150;
|
||||
font-size: 12.5px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.pm-card__more {
|
||||
color: #13324f;
|
||||
}
|
||||
.pm-line {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---- Fenêtre (site public et backoffice) ---- */
|
||||
.pm-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
background: rgba(19, 50, 79, 0.74);
|
||||
backdrop-filter: blur(3px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
.pm-panel {
|
||||
width: min(1080px, 100%);
|
||||
max-height: min(92vh, 940px);
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
|
||||
box-shadow: 0 30px 70px rgba(15, 25, 40, 0.38);
|
||||
}
|
||||
.pm-panel--form {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
width: min(920px, 100%);
|
||||
}
|
||||
.pm-panel__media {
|
||||
background: #101f2e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.pm-panel__stage {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px;
|
||||
}
|
||||
.pm-panel__stage img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.pm-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #13324f;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pm-arrow:hover {
|
||||
background: #fff;
|
||||
}
|
||||
.pm-arrow--prev {
|
||||
left: 12px;
|
||||
}
|
||||
.pm-arrow--next {
|
||||
right: 12px;
|
||||
}
|
||||
.pm-thumbs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 12px 14px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.pm-thumb {
|
||||
flex: none;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background: #24384a center/cover no-repeat;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
opacity: 0.62;
|
||||
}
|
||||
.pm-thumb--active {
|
||||
border-color: #e0a63c;
|
||||
opacity: 1;
|
||||
}
|
||||
.pm-panel__info {
|
||||
padding: 26px 26px 28px;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
.pm-panel__close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 18px;
|
||||
z-index: 2;
|
||||
border: none;
|
||||
background: #fff;
|
||||
color: #13324f;
|
||||
border-radius: 999px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 6px 16px rgba(15, 25, 40, 0.24);
|
||||
}
|
||||
.pm-body-text {
|
||||
color: #5f5646;
|
||||
font-size: 14.5px;
|
||||
line-height: 1.75;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* ---- Fenêtre d'édition du backoffice ---- */
|
||||
.pm-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(92vh, 940px);
|
||||
}
|
||||
.pm-form__scroll {
|
||||
overflow: auto;
|
||||
padding: 22px 24px 8px;
|
||||
}
|
||||
.pm-form__foot {
|
||||
border-top: 1px solid #efe7d6;
|
||||
padding: 14px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
background: #fdfbf6;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pm-dropzone {
|
||||
border: 1px dashed #d6c9ad;
|
||||
border-radius: 12px;
|
||||
background: #fdfbf6;
|
||||
padding: 18px;
|
||||
text-align: center;
|
||||
color: #8c8068;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.pm-dropzone--over {
|
||||
border-color: #13324f;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.pm-photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.pm-photo {
|
||||
border: 1px solid #e6dcc6;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.pm-photo__image {
|
||||
position: relative;
|
||||
aspect-ratio: 4 / 3;
|
||||
background: #f1ebdd center/cover no-repeat;
|
||||
}
|
||||
.pm-photo__tools {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
.pm-photo__tool {
|
||||
border: 1px solid #e6dcc6;
|
||||
background: #fff;
|
||||
color: #6f6450;
|
||||
border-radius: 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pm-photo__tool--danger {
|
||||
color: #d8472b;
|
||||
border-color: #e9cfc7;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.pm-panel {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-height: 94vh;
|
||||
}
|
||||
.pm-panel__stage {
|
||||
min-height: 220px;
|
||||
}
|
||||
.pm-backdrop {
|
||||
padding: 12px;
|
||||
}
|
||||
.pm-panel__info {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { asc, desc, inArray } from "drizzle-orm";
|
||||
import { JsonLd } from "@/components/JsonLd";
|
||||
import { PastMeetingGallery } from "@/components/PastMeetingGallery";
|
||||
import { PastMeetingCard } from "@/components/PastMeetingCard";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
import { SiteHeader } from "@/components/SiteHeader";
|
||||
import { db } from "@/db";
|
||||
@@ -79,16 +79,18 @@ export default async function PastMeetingsPage() {
|
||||
? registrationCounts.get(archive.meetingId) ?? 0
|
||||
: splitLines(archive.participants ?? "").length;
|
||||
return (
|
||||
<article key={archive.id} style={{ background: "#fff", border: "1px solid #e6dcc6", borderRadius: 8, padding: 18 }}>
|
||||
<div style={{ color: "#9a6638", fontSize: 12.5, fontWeight: 800 }}>{formatDate(archive.eventDate)}</div>
|
||||
<h2 className="font-display" style={{ color: "#26201a", fontSize: 23, margin: "7px 0" }}>{archive.title}</h2>
|
||||
{archive.location && <div style={{ color: "#6c6150", fontSize: 13, fontWeight: 700 }}>{archive.location}</div>}
|
||||
{archive.description && <p style={{ color: "#8c8068", fontSize: 13.5, lineHeight: 1.65 }}>{archive.description}</p>}
|
||||
<div style={{ color: "#6c6150", fontSize: 12.5, fontWeight: 800, marginBottom: 12 }}>
|
||||
{participantCount} participant{participantCount > 1 ? "s" : ""} · {archivePhotos.length} photo{archivePhotos.length > 1 ? "s" : ""}
|
||||
</div>
|
||||
<PastMeetingGallery title={archive.title} photos={archivePhotos} />
|
||||
</article>
|
||||
<PastMeetingCard
|
||||
key={archive.id}
|
||||
meeting={{
|
||||
id: archive.id,
|
||||
title: archive.title,
|
||||
dateLabel: formatDate(archive.eventDate),
|
||||
location: archive.location,
|
||||
description: archive.description,
|
||||
participantCount,
|
||||
photos: archivePhotos.map((photo) => ({ id: photo.id, imageUrl: photo.imageUrl, caption: photo.caption })),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { useRef, useState, useTransition } from "react";
|
||||
import { FIELD_MAX_BYTES, compressionSummary } from "@/lib/image-compress";
|
||||
import { prepareImageFile } from "@/lib/image-compress-dom";
|
||||
|
||||
export function ImageField({
|
||||
name,
|
||||
@@ -8,35 +10,48 @@ export function ImageField({
|
||||
defaultValue = "",
|
||||
height = 130,
|
||||
fit = "cover",
|
||||
maxBytes = FIELD_MAX_BYTES,
|
||||
}: {
|
||||
name: string;
|
||||
label: string;
|
||||
defaultValue?: string;
|
||||
height?: number;
|
||||
fit?: "cover" | "contain";
|
||||
maxBytes?: number;
|
||||
}) {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const [note, setNote] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [, startTransition] = useTransition();
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
function onFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const f = e.target.files?.[0];
|
||||
if (!f) return;
|
||||
async function onFile(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
setError(null);
|
||||
// Limite raisonnable : les data-URL transitent par une server action (~1 Mo max).
|
||||
if (f.size > 900_000) {
|
||||
setError("Image trop lourde (max ~900 Ko). Compressez-la d'abord.");
|
||||
setNote(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
// Plus de refus « image trop lourde » : le navigateur redimensionne et
|
||||
// compresse lui-même, en ne descendant que le nécessaire.
|
||||
const prepared = await prepareImageFile(file, { maxBytes });
|
||||
startTransition(() => {
|
||||
setValue(prepared.dataUri);
|
||||
setNote(compressionSummary(prepared));
|
||||
});
|
||||
} catch (cause) {
|
||||
setError(cause instanceof Error ? cause.message : "Image refusée.");
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
return;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => setValue(String(reader.result));
|
||||
reader.readAsDataURL(f);
|
||||
}
|
||||
|
||||
function clear() {
|
||||
setValue("");
|
||||
setError(null);
|
||||
setNote(null);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
|
||||
@@ -62,18 +77,19 @@ export function ImageField({
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={value} alt="" style={{ maxWidth: "86%", maxHeight: "86%", objectFit: "contain", display: "block" }} />
|
||||
)}
|
||||
{!value && <span style={{ fontSize: 13, color: "#a99c82" }}>Aucune image</span>}
|
||||
{!value && <span style={{ fontSize: 13, color: "#a99c82" }}>{busy ? "Compression en cours…" : "Aucune image"}</span>}
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
style={{ border: "1px solid #d6c9ad", background: "#fff", color: "#6f6450", fontWeight: 600, fontSize: 13, padding: "8px 14px", borderRadius: 9, cursor: "pointer" }}
|
||||
disabled={busy}
|
||||
style={{ border: "1px solid #d6c9ad", background: "#fff", color: "#6f6450", fontWeight: 600, fontSize: 13, padding: "8px 14px", borderRadius: 9, cursor: busy ? "progress" : "pointer" }}
|
||||
>
|
||||
{value ? "Changer l'image" : "Choisir une image"}
|
||||
{busy ? "Compression…" : value ? "Changer l'image" : "Choisir une image"}
|
||||
</button>
|
||||
{value && (
|
||||
{value && !busy && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clear}
|
||||
@@ -85,6 +101,7 @@ export function ImageField({
|
||||
<input ref={fileRef} type="file" accept="image/*" onChange={onFile} style={{ display: "none" }} />
|
||||
</div>
|
||||
|
||||
{note && !error && <div style={{ fontSize: 12.5, color: "#8c8068", marginTop: 6 }}>{note}</div>}
|
||||
{error && <div style={{ fontSize: 12.5, color: "#a3372e", marginTop: 6 }}>{error}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
/**
|
||||
* Enveloppe commune aux fenêtres du site et du backoffice : fond assombri,
|
||||
* fermeture au clic extérieur, à la touche Échap et par le bouton de fermeture,
|
||||
* page figée derrière.
|
||||
*
|
||||
* Le blocage du défilement de l'arrière-plan compte plus qu'il n'en a l'air :
|
||||
* sans lui, la molette dans une galerie plein écran fait défiler la page
|
||||
* *derrière* la fenêtre, et on la retrouve ailleurs en refermant.
|
||||
*
|
||||
* Le rendu passe par un **portail** vers `<body>`, et ce n'est pas un détail :
|
||||
* une carte survolée porte un `transform`, qui redéfinit le bloc conteneur des
|
||||
* éléments `position: fixed` qu'elle contient. Rendue sur place, la fenêtre
|
||||
* s'ouvrirait donc *dans* la carte. Le portail la sort aussi du bouton qui
|
||||
* l'ouvre, où des champs de saisie n'auraient rien à faire.
|
||||
*/
|
||||
export function ModalShell({
|
||||
label,
|
||||
onClose,
|
||||
panelClassName = "pm-panel",
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
onClose: () => void;
|
||||
panelClassName?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
useEffect(() => {
|
||||
const previous = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
panelRef.current?.focus();
|
||||
return () => {
|
||||
document.body.style.overflow = previous;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") onClose();
|
||||
}
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [onClose]);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="pm-backdrop" role="presentation" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}>
|
||||
<div
|
||||
ref={panelRef}
|
||||
className={panelClassName}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={label}
|
||||
tabIndex={-1}
|
||||
style={{ position: "relative", outline: "none" }}
|
||||
>
|
||||
<button type="button" className="pm-panel__close" onClick={onClose} aria-label="Fermer">
|
||||
×
|
||||
</button>
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { ModalShell } from "./ModalShell";
|
||||
|
||||
export type PastMeetingPhotoView = { id: number; imageUrl: string; caption: string | null };
|
||||
|
||||
export type PastMeetingView = {
|
||||
id: number;
|
||||
title: string;
|
||||
/** Date déjà mise en forme côté serveur : le composant ne refait pas de locale. */
|
||||
dateLabel: string;
|
||||
location: string | null;
|
||||
description: string | null;
|
||||
participantCount: number;
|
||||
photos: PastMeetingPhotoView[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Carte d'une rencontre passée, de hauteur fixe, et sa fenêtre de lecture.
|
||||
*
|
||||
* La carte ne montre qu'un aperçu — couverture, titre sur deux lignes, trois
|
||||
* lignes de texte, compteurs : une rencontre richement racontée et une autre en
|
||||
* deux phrases occupent ainsi la même place dans la grille. Le récit complet et
|
||||
* la totalité des photos sont dans la fenêtre, où la place ne manque plus.
|
||||
*/
|
||||
export function PastMeetingCard({ meeting }: { meeting: PastMeetingView }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const cover = meeting.photos[0]?.imageUrl;
|
||||
|
||||
return (
|
||||
<article className="pm-card" style={{ position: "relative" }}>
|
||||
<div
|
||||
className={cover ? "pm-card__cover" : "pm-card__cover pm-card__cover--empty"}
|
||||
style={cover ? { backgroundImage: `url(${cover})` } : undefined}
|
||||
>
|
||||
{meeting.photos.length > 0 && (
|
||||
<span className="pm-card__count">
|
||||
{meeting.photos.length} photo{meeting.photos.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="pm-card__body">
|
||||
<div style={{ color: "#9a6638", fontSize: 12.5, fontWeight: 800 }}>{meeting.dateLabel}</div>
|
||||
<h3 className="font-display pm-card__title">{meeting.title}</h3>
|
||||
{meeting.location && (
|
||||
<div className="pm-line" style={{ color: "#6c6150", fontSize: 13, fontWeight: 700 }}>{meeting.location}</div>
|
||||
)}
|
||||
{meeting.description && <p className="pm-card__text">{meeting.description}</p>}
|
||||
<div className="pm-card__meta">
|
||||
<span>
|
||||
{meeting.participantCount} participant{meeting.participantCount > 1 ? "s" : ""}
|
||||
</span>
|
||||
<span className="pm-card__more">Voir la rencontre →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toute la carte est cliquable, mais un seul élément interactif : le
|
||||
titre reste un vrai titre, et la tabulation ne traverse pas la carte. */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label={`Ouvrir la rencontre : ${meeting.title}`}
|
||||
style={{ position: "absolute", inset: 0, border: "none", background: "none", cursor: "pointer", borderRadius: 12 }}
|
||||
/>
|
||||
|
||||
{open && <PastMeetingModal meeting={meeting} onClose={() => setOpen(false)} />}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function PastMeetingModal({ meeting, onClose }: { meeting: PastMeetingView; onClose: () => void }) {
|
||||
const photos = meeting.photos;
|
||||
const [index, setIndex] = useState(0);
|
||||
const current = photos[index];
|
||||
|
||||
const move = useCallback(
|
||||
(step: number) => {
|
||||
if (photos.length === 0) return;
|
||||
setIndex((value) => (value + step + photos.length) % photos.length);
|
||||
},
|
||||
[photos.length],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(event: KeyboardEvent) {
|
||||
if (event.key === "ArrowRight") move(1);
|
||||
if (event.key === "ArrowLeft") move(-1);
|
||||
}
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [move]);
|
||||
|
||||
return (
|
||||
<ModalShell
|
||||
label={`Rencontre : ${meeting.title}`}
|
||||
onClose={onClose}
|
||||
panelClassName={photos.length > 0 ? "pm-panel" : "pm-panel pm-panel--form"}
|
||||
>
|
||||
{photos.length > 0 && (
|
||||
<div className="pm-panel__media">
|
||||
<div className="pm-panel__stage">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={current.imageUrl} alt={current.caption ?? `${meeting.title} — photo ${index + 1}`} />
|
||||
{photos.length > 1 && (
|
||||
<>
|
||||
<button type="button" className="pm-arrow pm-arrow--prev" onClick={() => move(-1)} aria-label="Photo précédente">‹</button>
|
||||
<button type="button" className="pm-arrow pm-arrow--next" onClick={() => move(1)} aria-label="Photo suivante">›</button>
|
||||
</>
|
||||
)}
|
||||
<span style={{ position: "absolute", left: 16, bottom: 16, background: "rgba(16,31,46,0.78)", color: "#fff", borderRadius: 999, padding: "4px 11px", fontSize: 12, fontWeight: 800 }}>
|
||||
{index + 1} / {photos.length}
|
||||
</span>
|
||||
</div>
|
||||
{current.caption && (
|
||||
<div style={{ color: "#cfe0ee", fontSize: 13, padding: "0 16px", lineHeight: 1.5 }}>{current.caption}</div>
|
||||
)}
|
||||
{photos.length > 1 && (
|
||||
<div className="pm-thumbs">
|
||||
{photos.map((photo, position) => (
|
||||
<button
|
||||
key={photo.id}
|
||||
type="button"
|
||||
className={position === index ? "pm-thumb pm-thumb--active" : "pm-thumb"}
|
||||
style={{ backgroundImage: `url(${photo.imageUrl})` }}
|
||||
onClick={() => setIndex(position)}
|
||||
aria-label={`Photo ${position + 1}`}
|
||||
aria-current={position === index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pm-panel__info">
|
||||
<div style={{ color: "#9a6638", fontSize: 12.5, fontWeight: 800, letterSpacing: "0.04em", textTransform: "uppercase" }}>{meeting.dateLabel}</div>
|
||||
<h2 className="font-display" style={{ margin: "8px 0 10px", color: "#26201a", fontSize: 30, lineHeight: 1.15, paddingRight: 34 }}>{meeting.title}</h2>
|
||||
{meeting.location && <div style={{ color: "#6c6150", fontSize: 14, fontWeight: 700, marginBottom: 6 }}>{meeting.location}</div>}
|
||||
<div style={{ color: "#6c6150", fontSize: 12.5, fontWeight: 800, marginBottom: 16 }}>
|
||||
{meeting.participantCount} participant{meeting.participantCount > 1 ? "s" : ""}
|
||||
{photos.length > 0 && ` · ${photos.length} photo${photos.length > 1 ? "s" : ""}`}
|
||||
</div>
|
||||
{meeting.description && <p className="pm-body-text">{meeting.description}</p>}
|
||||
</div>
|
||||
</ModalShell>
|
||||
);
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export function PastMeetingGallery({
|
||||
title,
|
||||
photos,
|
||||
}: {
|
||||
title: string;
|
||||
photos: { id: number; imageUrl: string; caption: string | null }[];
|
||||
}) {
|
||||
const [open, setOpen] = useState<number | null>(null);
|
||||
if (photos.length === 0) return null;
|
||||
const current = open == null ? null : photos.find((photo) => photo.id === open);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 14 }}>
|
||||
{photos.slice(0, 4).map((photo, index) => (
|
||||
<button
|
||||
key={photo.id}
|
||||
type="button"
|
||||
onClick={() => setOpen(photo.id)}
|
||||
aria-label={`Ouvrir photo ${index + 1}`}
|
||||
style={{
|
||||
position: "relative",
|
||||
border: "none",
|
||||
padding: 0,
|
||||
aspectRatio: "1 / 1",
|
||||
borderRadius: 8,
|
||||
overflow: "hidden",
|
||||
cursor: "pointer",
|
||||
background: `center/cover no-repeat url(${photo.imageUrl})`,
|
||||
}}
|
||||
>
|
||||
{index === 3 && photos.length > 4 && (
|
||||
<span style={{ position: "absolute", inset: 0, background: "rgba(19,50,79,0.62)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800 }}>
|
||||
+{photos.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{current && (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={`Galerie ${title}`}
|
||||
onClick={() => setOpen(null)}
|
||||
style={{ position: "fixed", inset: 0, background: "rgba(19,50,79,0.72)", zIndex: 80, padding: 24, display: "flex", alignItems: "center", justifyContent: "center" }}
|
||||
>
|
||||
<div onClick={(event) => event.stopPropagation()} style={{ maxWidth: 980, width: "100%" }}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={current.imageUrl} alt={current.caption ?? title} style={{ width: "100%", maxHeight: "78vh", objectFit: "contain", background: "#fff", borderRadius: 12 }} />
|
||||
<div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
|
||||
<div style={{ color: "#fff", fontWeight: 700 }}>{current.caption ?? title}</div>
|
||||
<button type="button" onClick={() => setOpen(null)} style={{ border: "none", background: "#fff", color: "#13324F", borderRadius: 999, padding: "9px 16px", fontWeight: 800, cursor: "pointer" }}>
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
/**
|
||||
* Compression d'une image **dans le navigateur**, avant qu'elle ne parte vers
|
||||
* une server action. Pendant du module pur `image-compress.ts`, qui porte les
|
||||
* seuils et les paliers ; ici vivent le décodage, le canvas et l'encodage,
|
||||
* c'est-à-dire tout ce qui a besoin d'un DOM.
|
||||
*
|
||||
* Trois choix méritent d'être expliqués :
|
||||
*
|
||||
* - **L'orientation EXIF est appliquée au décodage** (`createImageBitmap` avec
|
||||
* `imageOrientation: "from-image"`). Une photo prise à l'horizontale porte
|
||||
* souvent sa rotation dans ses métadonnées ; dessinée telle quelle sur un
|
||||
* canvas, elle repartirait couchée, l'information perdue.
|
||||
* - **Une image avec transparence ne devient jamais un JPEG** : le logo d'un
|
||||
* adhérent se retrouverait sur fond noir. On passe alors par WebP, et par
|
||||
* PNG si le navigateur ne sait pas encoder le WebP.
|
||||
* - **Une image déjà dans le budget n'est pas touchée** : un réencodage JPEG
|
||||
* dégrade toujours un peu, même à qualité élevée.
|
||||
*/
|
||||
|
||||
import {
|
||||
FIELD_MAX_BYTES,
|
||||
MAX_SIDE,
|
||||
base64Bytes,
|
||||
compressionSteps,
|
||||
needsCompression,
|
||||
scaleToFit,
|
||||
} from "./image-compress";
|
||||
|
||||
export type PreparedImage = {
|
||||
/** Image prête à partir, toujours en data-URI (jamais une URL : cf. SSRF). */
|
||||
dataUri: string;
|
||||
width: number;
|
||||
height: number;
|
||||
bytes: number;
|
||||
originalBytes: number;
|
||||
recompressed: boolean;
|
||||
/** Nom du fichier d'origine, repris comme légende par défaut. */
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type PrepareOptions = {
|
||||
maxBytes?: number;
|
||||
maxSide?: number;
|
||||
};
|
||||
|
||||
/** Formats que le serveur accepte tels quels (`asImageDataUri`). */
|
||||
const PASSTHROUGH = /^image\/(png|jpeg|jpg|webp|gif)$/i;
|
||||
|
||||
function readDataUri(file: Blob): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(String(reader.result));
|
||||
reader.onerror = () => reject(new Error("Fichier illisible."));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
type Decoded = { source: CanvasImageSource; width: number; height: number; release: () => void };
|
||||
|
||||
async function decode(file: File): Promise<Decoded> {
|
||||
if (typeof createImageBitmap === "function") {
|
||||
try {
|
||||
const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
|
||||
return { source: bitmap, width: bitmap.width, height: bitmap.height, release: () => bitmap.close() };
|
||||
} catch {
|
||||
// Navigateur sans `imageOrientation` (ou format non décodable) : on tente
|
||||
// la voie classique avant d'abandonner.
|
||||
}
|
||||
}
|
||||
const url = URL.createObjectURL(file);
|
||||
try {
|
||||
const image = await new Promise<HTMLImageElement>((resolve, reject) => {
|
||||
const element = new Image();
|
||||
element.onload = () => resolve(element);
|
||||
element.onerror = () => reject(new Error("decode"));
|
||||
element.src = url;
|
||||
});
|
||||
return {
|
||||
source: image,
|
||||
width: image.naturalWidth,
|
||||
height: image.naturalHeight,
|
||||
release: () => URL.revokeObjectURL(url),
|
||||
};
|
||||
} catch {
|
||||
URL.revokeObjectURL(url);
|
||||
throw new Error(
|
||||
"Ce format d'image n'est pas lisible par le navigateur (HEIC d'iPhone, par exemple). " +
|
||||
"Exportez la photo en JPEG avant de la déposer.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/** Une image sans transparence peut partir en JPEG, la plus économe des trois. */
|
||||
function hasAlpha(context: CanvasRenderingContext2D, width: number, height: number): boolean {
|
||||
try {
|
||||
const { data } = context.getImageData(0, 0, width, height);
|
||||
// Un pixel sur quatre suffit à repérer une transparence : un fond
|
||||
// transparent n'est jamais un pixel isolé.
|
||||
for (let index = 3; index < data.length; index += 16) {
|
||||
if (data[index] < 255) return true;
|
||||
}
|
||||
return false;
|
||||
} catch {
|
||||
// Canvas « sali » (impossible ici : tout vient d'un fichier local) : dans le
|
||||
// doute on garde la transparence.
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function draw(decoded: Decoded, size: { width: number; height: number }): HTMLCanvasElement {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = size.width;
|
||||
canvas.height = size.height;
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) throw new Error("Le navigateur n'a pas pu préparer l'image.");
|
||||
context.drawImage(decoded.source, 0, 0, size.width, size.height);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function encode(canvas: HTMLCanvasElement, type: string, quality: number): string | null {
|
||||
const dataUri = canvas.toDataURL(type, quality);
|
||||
// Un type non géré fait retomber `toDataURL` sur le PNG sans prévenir.
|
||||
return dataUri.startsWith(`data:${type}`) ? dataUri : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prépare un fichier déposé : orientation redressée, définition ramenée à
|
||||
* `maxSide`, poids ramené sous `maxBytes` en descendant les paliers de qualité
|
||||
* seulement autant qu'il le faut.
|
||||
*
|
||||
* Lève une erreur porteuse d'un message affichable (fichier non image, format
|
||||
* non décodable). Ne lève jamais pour cause de poids : c'est précisément ce que
|
||||
* la fonction est là pour régler.
|
||||
*/
|
||||
export async function prepareImageFile(file: File, options: PrepareOptions = {}): Promise<PreparedImage> {
|
||||
const maxBytes = options.maxBytes ?? FIELD_MAX_BYTES;
|
||||
const maxSide = options.maxSide ?? MAX_SIDE;
|
||||
if (file.type && !file.type.startsWith("image/")) throw new Error("Ce fichier n'est pas une image.");
|
||||
|
||||
const decoded = await decode(file);
|
||||
try {
|
||||
const original = { bytes: file.size, width: decoded.width, height: decoded.height };
|
||||
|
||||
if (PASSTHROUGH.test(file.type) && !needsCompression(original, { maxBytes, maxSide })) {
|
||||
const dataUri = await readDataUri(file);
|
||||
return { ...original, dataUri, originalBytes: file.size, recompressed: false, name: file.name };
|
||||
}
|
||||
|
||||
// Premier tirage à définition pleine : il sert aussi à repérer une
|
||||
// transparence, donc à choisir le format de sortie.
|
||||
const full = scaleToFit(decoded.width, decoded.height, maxSide);
|
||||
const probe = draw(decoded, full);
|
||||
const context = probe.getContext("2d");
|
||||
const transparent = context ? hasAlpha(context, probe.width, probe.height) : false;
|
||||
const types = transparent ? ["image/webp", "image/png"] : ["image/jpeg"];
|
||||
|
||||
let best: { dataUri: string; bytes: number; size: { width: number; height: number } } | null = null;
|
||||
for (const step of compressionSteps(maxSide)) {
|
||||
const size = scaleToFit(decoded.width, decoded.height, step.maxSide);
|
||||
const canvas = size.width === probe.width && size.height === probe.height ? probe : draw(decoded, size);
|
||||
for (const type of types) {
|
||||
const dataUri = encode(canvas, type, step.quality);
|
||||
if (!dataUri) continue;
|
||||
const bytes = base64Bytes(dataUri);
|
||||
if (!best || bytes < best.bytes) best = { dataUri, bytes, size };
|
||||
if (bytes <= maxBytes) {
|
||||
return {
|
||||
dataUri,
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
bytes,
|
||||
originalBytes: file.size,
|
||||
recompressed: true,
|
||||
name: file.name,
|
||||
};
|
||||
}
|
||||
// Le PNG ignore la qualité : inutile de redescendre l'échelle sur lui,
|
||||
// seule une définition plus petite le fera maigrir.
|
||||
if (type === "image/png") break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!best) throw new Error("Le navigateur n'a pas pu compresser cette image.");
|
||||
return {
|
||||
dataUri: best.dataUri,
|
||||
width: best.size.width,
|
||||
height: best.size.height,
|
||||
bytes: best.bytes,
|
||||
originalBytes: file.size,
|
||||
recompressed: true,
|
||||
name: file.name,
|
||||
};
|
||||
} finally {
|
||||
decoded.release();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* Plan de compression des images déposées dans le backoffice.
|
||||
*
|
||||
* Module **pur** (aucun accès DOM, base ou réseau), verrouillé par
|
||||
* `tests/image-compress.test.ts`. Le travail sur le canvas — donc le seul code
|
||||
* qui a besoin d'un navigateur — vit dans `image-compress-dom.ts`.
|
||||
*
|
||||
* Pourquoi compresser côté navigateur : une image voyage jusqu'au serveur en
|
||||
* data-URI, à travers une server action plafonnée à 4 Mo, et finit stockée en
|
||||
* base. Une photo de téléphone (4 à 12 Mo) ne passe pas. Le réflexe précédent
|
||||
* était de la refuser — « Image trop lourde, compressez-la d'abord » — ce qui
|
||||
* revenait à demander à l'utilisateur de faire à la main ce que le navigateur
|
||||
* sait faire tout seul.
|
||||
*
|
||||
* La règle : on ne descend en qualité que le strict nécessaire. Une image déjà
|
||||
* dans le budget n'est **pas** réencodée (un réencodage JPEG n'est jamais
|
||||
* neutre), et le premier essai garde la pleine résolution à qualité quasi
|
||||
* maximale. Ce n'est qu'en cas d'échec qu'on baisse, d'abord la qualité, puis
|
||||
* la définition.
|
||||
*/
|
||||
|
||||
export type Size = { width: number; height: number };
|
||||
|
||||
/**
|
||||
* Côté le plus long conservé. 2048 px couvre le plein écran d'un portable
|
||||
* récent (et le grand format des réseaux) ; au-delà, l'œil ne voit rien de
|
||||
* plus, seul le poids grimpe.
|
||||
*/
|
||||
export const MAX_SIDE = 2048;
|
||||
|
||||
/** Budget d'une image de formulaire : couverture, logo, visuel de promotion. */
|
||||
export const FIELD_MAX_BYTES = 1_200_000;
|
||||
|
||||
/**
|
||||
* Budget d'une photo de galerie. Plus serré : plusieurs photos partent dans la
|
||||
* même requête, et une rencontre en compte facilement vingt.
|
||||
*/
|
||||
export const PHOTO_MAX_BYTES = 800_000;
|
||||
|
||||
/**
|
||||
* Taille d'un envoi groupé de photos. La limite des server actions est à 4 Mo
|
||||
* de corps de requête, et le base64 gonfle les octets d'un tiers : 2 Mo de
|
||||
* photos font ~2,7 Mo sur le fil, marge comprise.
|
||||
*/
|
||||
export const BATCH_MAX_BYTES = 2_000_000;
|
||||
|
||||
/** Plancher de qualité : en dessous, le grain se voit sur une photo de groupe. */
|
||||
export const MIN_QUALITY = 0.6;
|
||||
|
||||
const QUALITY_LADDER = [0.92, 0.84, 0.76, 0.68, MIN_QUALITY];
|
||||
|
||||
/** Définitions successives, en fraction du côté maximal demandé. */
|
||||
const SIDE_LADDER = [1, 0.78, 0.6, 0.45];
|
||||
|
||||
function positive(value: number): boolean {
|
||||
return Number.isFinite(value) && value > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dimensions ramenées dans un carré de `maxSide`, rapport conservé. Une image
|
||||
* plus petite est renvoyée telle quelle : on ne l'agrandit jamais, cela
|
||||
* n'ajouterait que du flou et du poids.
|
||||
*/
|
||||
export function scaleToFit(width: number, height: number, maxSide: number = MAX_SIDE): Size {
|
||||
if (!positive(width) || !positive(height) || !positive(maxSide)) return { width: 0, height: 0 };
|
||||
const longest = Math.max(width, height);
|
||||
if (longest <= maxSide) return { width: Math.round(width), height: Math.round(height) };
|
||||
const ratio = maxSide / longest;
|
||||
return {
|
||||
width: Math.max(1, Math.round(width * ratio)),
|
||||
height: Math.max(1, Math.round(height * ratio)),
|
||||
};
|
||||
}
|
||||
|
||||
export type CompressionStep = { maxSide: number; quality: number };
|
||||
|
||||
/**
|
||||
* Essais successifs, du meilleur au plus économe. On épuise la qualité à
|
||||
* définition pleine avant de réduire la définition : une photo de groupe reste
|
||||
* lisible bien plus longtemps en baissant la qualité qu'en perdant des pixels.
|
||||
*/
|
||||
export function compressionSteps(maxSide: number = MAX_SIDE): CompressionStep[] {
|
||||
if (!positive(maxSide)) return [];
|
||||
const steps: CompressionStep[] = [];
|
||||
SIDE_LADDER.forEach((fraction, index) => {
|
||||
const side = Math.max(320, Math.round(maxSide * fraction));
|
||||
// Le premier palier essaie toute l'échelle de qualité ; les suivants
|
||||
// repartent plus bas, la définition ayant déjà fait une partie du travail.
|
||||
for (const quality of QUALITY_LADDER.slice(index)) steps.push({ maxSide: side, quality });
|
||||
});
|
||||
return steps;
|
||||
}
|
||||
|
||||
/** Poids réel d'une data-URI base64, sans la décoder. */
|
||||
export function base64Bytes(dataUri: string): number {
|
||||
const marker = dataUri.indexOf("base64,");
|
||||
if (marker < 0) return 0;
|
||||
const payload = dataUri.slice(marker + 7).replace(/\s+/g, "");
|
||||
if (payload.length === 0) return 0;
|
||||
const padding = payload.endsWith("==") ? 2 : payload.endsWith("=") ? 1 : 0;
|
||||
return Math.max(0, Math.floor((payload.length * 3) / 4) - padding);
|
||||
}
|
||||
|
||||
/** `true` pour une data-URI d'image, la seule forme acceptée par le serveur. */
|
||||
export function isImageDataUri(value: string): boolean {
|
||||
return /^data:image\/[a-z+.-]+;base64,/i.test(value.trim());
|
||||
}
|
||||
|
||||
/**
|
||||
* Faut-il réencoder ? Non si l'image tient déjà dans le budget **et** dans la
|
||||
* définition : le fichier d'origine est alors la meilleure version possible.
|
||||
*/
|
||||
export function needsCompression(
|
||||
info: { bytes: number; width: number; height: number },
|
||||
options: { maxBytes: number; maxSide?: number } = { maxBytes: FIELD_MAX_BYTES },
|
||||
): boolean {
|
||||
const maxSide = options.maxSide ?? MAX_SIDE;
|
||||
if (!positive(info.width) || !positive(info.height)) return false;
|
||||
if (Math.max(info.width, info.height) > maxSide) return true;
|
||||
return info.bytes > options.maxBytes;
|
||||
}
|
||||
|
||||
function bytesLabel(bytes: number): string {
|
||||
if (!Number.isFinite(bytes) || bytes < 0) return "";
|
||||
if (bytes < 1000) return `${Math.round(bytes)} o`;
|
||||
if (bytes < 1_000_000) return `${Math.round(bytes / 1000)} Ko`;
|
||||
const mo = bytes / 1_000_000;
|
||||
return `${(mo < 10 ? mo.toFixed(1) : String(Math.round(mo))).replace(".", ",")} Mo`;
|
||||
}
|
||||
|
||||
export type CompressionResult = {
|
||||
width: number;
|
||||
height: number;
|
||||
bytes: number;
|
||||
originalBytes: number;
|
||||
/** `false` quand le fichier d'origine a été gardé tel quel. */
|
||||
recompressed: boolean;
|
||||
};
|
||||
|
||||
/** Phrase affichée sous l'aperçu : ce que le navigateur a fait, en clair. */
|
||||
export function compressionSummary(result: CompressionResult): string {
|
||||
const size = `${Math.round(result.width)} × ${Math.round(result.height)} px`;
|
||||
if (!result.recompressed) return `${size} · ${bytesLabel(result.bytes)} · qualité d'origine conservée`;
|
||||
return `${size} · ${bytesLabel(result.originalBytes)} → ${bytesLabel(result.bytes)} · compressée automatiquement`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Groupe des envois consécutifs pour tenir sous la limite d'une requête. Un
|
||||
* élément plus gros que le budget part seul plutôt que d'être écarté : c'est au
|
||||
* serveur de le refuser, pas à la file de l'oublier en silence.
|
||||
*/
|
||||
export function chunkByBytes(sizes: number[], maxBytes: number = BATCH_MAX_BYTES): number[][] {
|
||||
const groups: number[][] = [];
|
||||
let current: number[] = [];
|
||||
let total = 0;
|
||||
sizes.forEach((size, index) => {
|
||||
const weight = Math.max(0, size);
|
||||
if (current.length > 0 && total + weight > maxBytes) {
|
||||
groups.push(current);
|
||||
current = [];
|
||||
total = 0;
|
||||
}
|
||||
current.push(index);
|
||||
total += weight;
|
||||
});
|
||||
if (current.length > 0) groups.push(current);
|
||||
return groups;
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { strict as assert } from "node:assert";
|
||||
import { describe, it } from "node:test";
|
||||
|
||||
import {
|
||||
BATCH_MAX_BYTES,
|
||||
MAX_SIDE,
|
||||
MIN_QUALITY,
|
||||
base64Bytes,
|
||||
chunkByBytes,
|
||||
compressionSteps,
|
||||
compressionSummary,
|
||||
isImageDataUri,
|
||||
needsCompression,
|
||||
scaleToFit,
|
||||
} from "../src/lib/image-compress";
|
||||
|
||||
describe("Mise à l'échelle", () => {
|
||||
it("ramène le côté le plus long sous la limite en gardant le rapport", () => {
|
||||
assert.deepEqual(scaleToFit(4032, 3024, 2048), { width: 2048, height: 1536 });
|
||||
assert.deepEqual(scaleToFit(3024, 4032, 2048), { width: 1536, height: 2048 });
|
||||
});
|
||||
|
||||
it("n'agrandit jamais une image plus petite que la limite", () => {
|
||||
assert.deepEqual(scaleToFit(800, 600, 2048), { width: 800, height: 600 });
|
||||
});
|
||||
|
||||
it("ne rend rien pour des dimensions absurdes", () => {
|
||||
assert.deepEqual(scaleToFit(0, 600, 2048), { width: 0, height: 0 });
|
||||
assert.deepEqual(scaleToFit(Number.NaN, 600, 2048), { width: 0, height: 0 });
|
||||
});
|
||||
});
|
||||
|
||||
describe("Paliers de compression", () => {
|
||||
const steps = compressionSteps(MAX_SIDE);
|
||||
|
||||
it("commence à la définition pleine et à la meilleure qualité", () => {
|
||||
assert.equal(steps[0].maxSide, MAX_SIDE);
|
||||
assert.ok(steps[0].quality >= 0.9);
|
||||
});
|
||||
|
||||
it("épuise la qualité avant de réduire la définition", () => {
|
||||
const firstDrop = steps.findIndex((step) => step.maxSide < MAX_SIDE);
|
||||
assert.ok(firstDrop > 1, "la définition ne doit pas tomber au deuxième essai");
|
||||
for (let index = 1; index < firstDrop; index += 1) {
|
||||
assert.ok(steps[index].quality < steps[index - 1].quality);
|
||||
}
|
||||
});
|
||||
|
||||
it("ne remonte jamais en définition et reste au-dessus du plancher de qualité", () => {
|
||||
for (let index = 1; index < steps.length; index += 1) {
|
||||
assert.ok(steps[index].maxSide <= steps[index - 1].maxSide);
|
||||
}
|
||||
for (const step of steps) {
|
||||
assert.ok(step.quality >= MIN_QUALITY && step.quality <= 1);
|
||||
assert.ok(step.maxSide >= 320);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("Poids d'une data-URI", () => {
|
||||
it("retrouve le poids décodé sans décoder", () => {
|
||||
const bytes = Buffer.from("x".repeat(1000));
|
||||
const dataUri = `data:image/jpeg;base64,${bytes.toString("base64")}`;
|
||||
assert.equal(base64Bytes(dataUri), 1000);
|
||||
});
|
||||
|
||||
it("tient compte du remplissage", () => {
|
||||
for (const length of [1, 2, 3, 4, 5]) {
|
||||
const raw = Buffer.alloc(length, 7);
|
||||
assert.equal(base64Bytes(`data:image/png;base64,${raw.toString("base64")}`), length);
|
||||
}
|
||||
});
|
||||
|
||||
it("rend zéro hors data-URI", () => {
|
||||
assert.equal(base64Bytes("https://exemple.fr/photo.jpg"), 0);
|
||||
assert.equal(base64Bytes(""), 0);
|
||||
});
|
||||
|
||||
it("ne reconnaît qu'une image en data-URI", () => {
|
||||
assert.ok(isImageDataUri("data:image/jpeg;base64,AAAA"));
|
||||
assert.ok(!isImageDataUri("https://exemple.fr/photo.jpg"));
|
||||
assert.ok(!isImageDataUri("data:text/html;base64,AAAA"));
|
||||
});
|
||||
});
|
||||
|
||||
describe("Décision de recompression", () => {
|
||||
it("garde le fichier d'origine quand il tient dans le budget et la définition", () => {
|
||||
assert.ok(!needsCompression({ bytes: 400_000, width: 1600, height: 1200 }, { maxBytes: 800_000 }));
|
||||
});
|
||||
|
||||
it("recompresse une image trop lourde", () => {
|
||||
assert.ok(needsCompression({ bytes: 4_000_000, width: 1600, height: 1200 }, { maxBytes: 800_000 }));
|
||||
});
|
||||
|
||||
it("recompresse une image légère mais démesurée", () => {
|
||||
assert.ok(needsCompression({ bytes: 200_000, width: 6000, height: 4000 }, { maxBytes: 800_000 }));
|
||||
});
|
||||
});
|
||||
|
||||
describe("Résumé montré à l'utilisateur", () => {
|
||||
it("dit ce qui a été gagné", () => {
|
||||
assert.equal(
|
||||
compressionSummary({ width: 2048, height: 1536, bytes: 620_000, originalBytes: 4_200_000, recompressed: true }),
|
||||
"2048 × 1536 px · 4,2 Mo → 620 Ko · compressée automatiquement",
|
||||
);
|
||||
});
|
||||
|
||||
it("dit quand rien n'a été touché", () => {
|
||||
assert.equal(
|
||||
compressionSummary({ width: 1200, height: 900, bytes: 340_000, originalBytes: 340_000, recompressed: false }),
|
||||
"1200 × 900 px · 340 Ko · qualité d'origine conservée",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Envoi groupé", () => {
|
||||
it("regroupe les photos sous la limite d'une requête", () => {
|
||||
assert.deepEqual(chunkByBytes([700_000, 700_000, 700_000, 700_000], 2_000_000), [[0, 1], [2, 3]]);
|
||||
});
|
||||
|
||||
it("laisse partir seule une photo plus lourde que le budget", () => {
|
||||
assert.deepEqual(chunkByBytes([100_000, 3_000_000, 100_000], 2_000_000), [[0], [1], [2]]);
|
||||
});
|
||||
|
||||
it("rend un groupe vide pour une liste vide et couvre chaque index une fois", () => {
|
||||
assert.deepEqual(chunkByBytes([], BATCH_MAX_BYTES), []);
|
||||
const sizes = [500_000, 900_000, 200_000, 1_900_000, 50_000];
|
||||
const flat = chunkByBytes(sizes).flat();
|
||||
assert.deepEqual(flat, [0, 1, 2, 3, 4]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
import { test } from "node:test";
|
||||
import assert from "node:assert/strict";
|
||||
import { readFileSync } from "node:fs";
|
||||
|
||||
/**
|
||||
* Invariants de l'écran « Rencontres passées ». Ils portent sur du code que les
|
||||
* tests unitaires ne peuvent pas exécuter (composants client, actions serveur),
|
||||
* d'où la lecture des sources — même approche que `tests/security.test.ts`.
|
||||
*/
|
||||
|
||||
const read = (path: string) => readFileSync(new URL(path, import.meta.url), "utf8");
|
||||
|
||||
const actions = read("../src/app/backend/actions.ts");
|
||||
const dialog = read("../src/app/backend/rencontres-passees/PastMeetingDialog.tsx");
|
||||
const page = read("../src/app/backend/rencontres-passees/page.tsx");
|
||||
const imageField = read("../src/components/ImageField.tsx");
|
||||
const modal = read("../src/components/ModalShell.tsx");
|
||||
|
||||
test("aucune image n'est refusée pour son poids : elle est compressée", () => {
|
||||
const code = imageField.replace(/\/\/[^\n]*/g, "");
|
||||
assert.ok(!/\.size\s*>/.test(code), "ImageField refuse encore un fichier sur son poids");
|
||||
assert.ok(!/trop lourde/i.test(code), "ImageField renvoie encore « image trop lourde »");
|
||||
assert.ok(imageField.includes("prepareImageFile"), "ImageField ne compresse pas");
|
||||
assert.ok(dialog.includes("prepareImageFile"), "la fenêtre des rencontres ne compresse pas");
|
||||
});
|
||||
|
||||
test("les photos n'entrent en base qu'en data-URI", () => {
|
||||
const body = actions.slice(actions.indexOf("export async function addPastMeetingPhotos"));
|
||||
const scope = body.slice(0, body.indexOf("export async function savePastMeetingPhotos"));
|
||||
assert.ok(scope.includes("IMAGE_DATA_URI.test"), "une photo pourrait entrer sous forme d'URL (SSRF)");
|
||||
assert.ok(scope.includes("MAX_IMAGE_DATA_URI"), "aucune limite de taille côté serveur");
|
||||
});
|
||||
|
||||
test("la synchronisation des photos ne peut pas vider une galerie par accident", () => {
|
||||
const body = actions.slice(actions.indexOf("export async function savePastMeetingPhotos"));
|
||||
assert.ok(body.includes('formData.get("syncPhotos") !== "1"'), "le drapeau de garde a disparu");
|
||||
});
|
||||
|
||||
test("les refus d'enregistrement sont renvoyés, jamais levés", () => {
|
||||
const body = actions.slice(
|
||||
actions.indexOf("export async function savePastMeeting("),
|
||||
actions.indexOf("export async function deletePastMeeting("),
|
||||
);
|
||||
assert.ok(body.includes('return { error: "Donnez un titre'), "un titre vide ne rend plus d'erreur affichable");
|
||||
// Le seul `throw` admis est la violation d'accès, qui n'a pas à s'expliquer.
|
||||
const throws = [...body.matchAll(/throw new Error\("([^"]+)"\)/g)].map((match) => match[1]);
|
||||
assert.deepEqual(throws, ["Accès refusé"], `throw inattendu : ${throws.join(", ")}`);
|
||||
});
|
||||
|
||||
test("la rencontre liée est vérifiée avant l'écriture", () => {
|
||||
const body = actions.slice(actions.indexOf("export async function savePastMeeting("));
|
||||
assert.ok(body.includes("n'existe plus"), "une rencontre supprimée casserait l'enregistrement sans explication");
|
||||
});
|
||||
|
||||
test("la fenêtre ne se referme qu'une fois la page rafraîchie", () => {
|
||||
// Sans cette attente, rouvrir la fiche montrerait l'état d'avant
|
||||
// l'enregistrement : c'est ce qui fait croire qu'une rencontre liée « ne
|
||||
// veut pas » être retenue.
|
||||
assert.ok(dialog.includes("closing && !refreshing"), "la fermeture ne suit plus le rafraîchissement");
|
||||
});
|
||||
|
||||
test("la fenêtre est rendue dans un portail", () => {
|
||||
// Une carte survolée porte un `transform` : un `position: fixed` rendu à
|
||||
// l'intérieur s'ouvrirait dans la carte, pas sur la page.
|
||||
assert.ok(modal.includes("createPortal"), "la fenêtre n'est plus portée vers <body>");
|
||||
});
|
||||
|
||||
test("le récit s'écrit dans un grand champ, et la page ne le ré-affiche pas en entier", () => {
|
||||
assert.ok(/rows=\{1[0-9]\}/.test(dialog), "le champ de récit est redevenu minuscule");
|
||||
assert.ok(dialog.includes("minHeight: 260"), "la hauteur minimale du récit a disparu");
|
||||
assert.ok(page.includes("pm-card__text"), "la carte n'écrête plus le texte");
|
||||
});
|
||||
Reference in new issue
Block a user