// EDITOR — Wizard step-by-step contribution form
const DRAFT_KEY = "herbier:draft";
const DEFAULT_DRAFT = {
nom: "", latin: "", famille: "", auteur: "", hauteur: "",
contributeur: "",
description: "", habitat: "",
comestible: false, comestibleDetail: "",
medicinal: false, medicinalDetail: "",
bioindic: false, bioindicDetail: "",
histoire: "", symbolique: "", precautions: "", notes: "",
floraison: [],
origine: [], // multi-choix : "Sauvage" et/ou "Cultivée" (dimension pratique,
// distincte du `statut` scientifique Indigène/Naturalisée/etc.)
jardins: [],
photos: {},
voirAussi: [], // tableau d'ids de fiches liées (cross-références "Voir aussi")
voirAussiTitre: "", // sous-titre optionnel de la section Voir aussi (ex. "Pôle calmants & digestifs aromatiques")
};
function ficheToWizard(fiche) {
if (!fiche) return DEFAULT_DRAFT;
return {
...DEFAULT_DRAFT,
nom: fiche.nom || "",
latin: fiche.latin || "",
famille: fiche.famille || "",
auteur: fiche.auteur || "",
hauteur: fiche.hauteur || "",
contributeur: "",
description: fiche.morphologie || "",
habitat: fiche.habitat || "",
histoire: fiche.histoire || "",
symbolique: fiche.symbolique || "",
precautions: fiche.precautions || "",
notes: fiche.notes || "",
floraison: Array.isArray(fiche.floraison) ? fiche.floraison : [],
origine: Array.isArray(fiche.origine) ? fiche.origine : [],
jardins: Array.isArray(fiche.jardins) ? fiche.jardins.map(j => typeof j === "string" ? j : j.nom).filter(Boolean) : [],
photos: fiche.photos && typeof fiche.photos === "object" ? fiche.photos : {},
photoDefault: fiche.photoDefault || null,
voirAussi: Array.isArray(fiche.voirAussi) ? fiche.voirAussi.filter(x => typeof x === "string") : [],
voirAussiTitre: typeof fiche.voirAussiTitre === "string" ? fiche.voirAussiTitre : "",
comestible: !!fiche.comestibilite,
comestibleDetail: (fiche.comestibilite && fiche.comestibilite.detail) || "",
medicinal: !!fiche.medicinal,
medicinalDetail: (fiche.medicinal && fiche.medicinal.detail) || "",
bioindic: !!fiche.bioindication,
bioindicDetail: typeof fiche.bioindication === "string" ? fiche.bioindication : "",
};
}
function Editor({ setRoute, setPlantId, editId }) {
const auth = window.useAuth ? window.useAuth() : { user: null, loading: false };
const [step, setStep] = React.useState(0);
const isMobile = useMobile();
const [data, setData] = React.useState(() => {
if (editId) return DEFAULT_DRAFT;
try {
const raw = localStorage.getItem(DRAFT_KEY);
if (raw) {
const parsed = JSON.parse(raw);
return { ...DEFAULT_DRAFT, ...parsed };
}
} catch {}
return DEFAULT_DRAFT;
});
const [loading, setLoading] = React.useState(!!editId);
const [submitting, setSubmitting] = React.useState(false);
const [submitError, setSubmitError] = React.useState(null);
// Phase 2 : si la soumission part en pending (contributeur), on stocke
// ici les infos pour afficher un écran de confirmation au lieu de
// rediriger vers la fiche (qui n'a pas été modifiée).
const [submittedAs, setSubmittedAs] = React.useState(null);
const [originalFiche, setOriginalFiche] = React.useState(null);
const set = (k, v) => setData(d => ({ ...d, [k]: v }));
React.useEffect(() => {
if (!editId) return;
setLoading(true);
// On charge en parallèle la fiche (texte) ET les photos (base64) — séparées
// côté API pour ne pas alourdir les listes. Sans ce double fetch, les slots
// photos seraient vides à l'ouverture de l'éditeur, et le submit écraserait
// les photos existantes par les seules nouvelles uploadées.
Promise.all([
fetch(`api/get?id=${encodeURIComponent(editId)}`, { cache: "no-store" })
.then(r => r.ok ? r.json() : null),
fetch(`api/photos?id=${encodeURIComponent(editId)}`, { cache: "no-store" })
.then(r => r.ok ? r.json() : {})
.catch(() => ({})),
])
.then(([fiche, photos]) => {
if (fiche && !fiche.error) {
const photoMap = (photos && !photos.error && typeof photos === "object") ? photos : {};
const ficheWithPhotos = { ...fiche, photos: photoMap };
setOriginalFiche(ficheWithPhotos);
setData({ ...ficheToWizard(ficheWithPhotos), id: editId });
}
})
.catch(() => {})
.finally(() => setLoading(false));
}, [editId]);
React.useEffect(() => {
if (editId) return;
const t = setTimeout(() => {
try { localStorage.setItem(DRAFT_KEY, JSON.stringify(data)); } catch {}
}, 400);
return () => clearTimeout(t);
}, [data, editId]);
const submit = async () => {
setSubmitError(null);
setSubmitting(true);
try {
// Les cases ne gèrent que ces trois usages. On reconstruit ceux-ci, mais
// on PRÉSERVE les autres valeurs curatées de la fiche d'origine
// (Mellifère, Aromatique, Tinctoriale, Symbolique, Arbre…) que l'éditeur
// n'expose pas — sinon une simple ré-sauvegarde les effacerait.
const MANAGED_USAGES = ["Comestible", "Médicinal", "Bio-indicatrice"];
const usage = [];
if (data.comestible) usage.push("Comestible");
if (data.medicinal) usage.push("Médicinal");
if (data.bioindic) usage.push("Bio-indicatrice");
const preservedUsages = (Array.isArray(originalFiche?.usage) ? originalFiche.usage : [])
.filter(u => !MANAGED_USAGES.includes(u) && !usage.includes(u));
usage.push(...preservedUsages);
const labels = {
p1: "Planche principale", p2: "Fleur / capitule", p3: "Feuille — détail",
p4: "Tige / port", p5: "Habitat", p6: "Vue complémentaire",
};
const galerie = Object.keys(data.photos || {}).map(slotId =>
({ id: slotId, label: labels[slotId] || "Photographie" })
);
const wizardFields = {
nom: data.nom, latin: data.latin, auteur: data.auteur,
famille: data.famille, hauteur: data.hauteur,
// contributeur volontairement absent : le serveur prend l'identité
// depuis le JWT de l'utilisateur connecté (cf. api/save.js).
morphologie: data.description, habitat: data.habitat,
floraison: data.floraison, origine: data.origine || [],
histoire: data.histoire, symbolique: data.symbolique,
precautions: data.precautions, notes: data.notes, photos: data.photos || {},
usage, galerie,
voirAussi: Array.isArray(data.voirAussi) ? data.voirAussi : [],
voirAussiTitre: (data.voirAussiTitre || "").trim(),
};
if (data.comestible) wizardFields.comestibilite = { niveau: "Comestible", detail: data.comestibleDetail };
if (data.medicinal) {
const composes = (originalFiche && originalFiche.medicinal && originalFiche.medicinal.composes) || [];
wizardFields.medicinal = { niveau: "Médicinale", detail: data.medicinalDetail, composes };
}
if (data.bioindic) wizardFields.bioindication = data.bioindicDetail;
if (data.jardins && data.jardins.length) {
const origByNom = new Map(
(originalFiche && Array.isArray(originalFiche.jardins) ? originalFiche.jardins : [])
.map(j => [j.nom, j])
);
wizardFields.jardins = data.jardins.map(nom => {
const o = origByNom.get(nom);
return o ? { ...o, nom } : { nom, lieu: "", parcelles: 1 };
});
}
const payload = {
...(originalFiche || {}),
...wizardFields,
...(editId ? { id: editId } : {}),
};
const doFetch = window.authedFetch || fetch;
const res = await doFetch("api/save", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
const json = await res.json();
// ── Phase 2 : interpréter la réponse selon le rôle ──
if (res.status === 409) {
// Une autre révision pending existe déjà sur cette fiche
const msg = (json.error || "Une proposition est déjà en cours de modération.") +
(json.pendingAuthor ? `\nProposée par ${json.pendingAuthor}.` : "");
setSubmitError(msg);
setSubmittedAs(null);
return;
}
if (!res.ok || !json.ok) throw new Error(json.error || "Erreur inconnue");
try { localStorage.removeItem(DRAFT_KEY); } catch {}
if (json.status === "pending") {
// Contributeur : proposition envoyée à la modération
setSubmittedAs({ status: "pending", revisionId: json.revisionId, plantId: json.plantId });
// On NE redirige PAS sur la fiche (qui n'a pas été modifiée). On affiche
// un écran de confirmation. L'utilisateur cliquera sur un CTA pour
// aller voir sa proposition dans /moderation ou retourner à l'accueil.
return;
}
// status === "applied" (moderator+) : comportement historique
if (window.__reloadPlants) window.__reloadPlants();
if (setPlantId) setPlantId(json.id);
setRoute("fiche");
} catch (err) {
setSubmitError(err.message || String(err));
} finally {
setSubmitting(false);
}
};
const steps = [
{ id: "ident", label: "Identification", icon: "I" },
{ id: "morpho", label: "Morphologie", icon: "II" },
{ id: "habitat", label: "Habitat", icon: "III" },
{ id: "usages", label: "Usages", icon: "IV" },
{ id: "histoire", label: "Histoire", icon: "V" },
{ id: "photos", label: "Photos", icon: "VI" },
{ id: "review", label: "Relecture", icon: "VII" },
];
const pad = isMobile ? "0 20px" : "0 40px";
// Guard d'authentification : l'éditeur est interdit aux non-connectés.
// (Le serveur refuserait de toute façon, mais affichage utilisateur clair.)
if (!auth.loading && !auth.user) {
return (
Accès restreint
Connectez-vous pour contribuer.
L'édition et la création de fiches sont réservées aux contributeurs invités du recueil. Cliquez sur « Se connecter » en haut de la page pour recevoir un lien de connexion par email.
);
}
// ── Écran de confirmation après soumission en pending ───────────────
// Affiché quand un contributeur vient de soumettre une proposition.
// La fiche live n'a pas été modifiée — pas de redirection automatique
// vers /fiche. L'utilisateur choisit où aller ensuite.
if (submittedAs && submittedAs.status === "pending") {
return (
Proposition envoyée
Merci pour votre contribution.
Votre proposition a été soumise au comité de modération. Elle sera examinée
dans les prochains jours par un modérateur. Vous serez informé du résultat
dans votre page Modération.
En attendant, la fiche publique reste inchangée. Si vous souhaitez retirer
ou modifier votre proposition, c'est encore possible depuis votre page
Modération.
);
}
return (
{/* Bandeau d'information pour les contributeurs (mode pending) */}
{auth.user?.role === "contributor" && (
MODE CONTRIBUTEUR · vos modifications seront soumises au comité de modération avant publication.
{editId
? <>Vos ajouts (texte, photos) viennent compléter la fiche existante. Vous serez crédité·e parmi les contributeurs.
: <>Sept étapes guidées pour ouvrir une fiche au recueil. À chaque étape, votre brouillon est sauvegardé.}
)}
{/* Stepper */}
{isMobile ? (
/* Stepper mobile : barre de progression + étape courante */
{/* Aperçu — masqué sur mobile */}
{!isMobile && (
)}
{/* Navigation — label à gauche en absolu, boutons d'action centrés visuellement */}
{!isMobile && (
Étape {step + 1} sur {steps.length}
)}
{/* Mode édition : bouton "Enregistrer" disponible à toutes les étapes
sauf la dernière (où "Mettre à jour" fait déjà l'enregistrement).
En mode création (pas d'editId), on conserve le parcours guidé
du wizard jusqu'à la Relecture pour éviter les fiches incomplètes. */}
{editId && step < steps.length - 1 && (
)}
{step < steps.length - 1 ? (
) : (
)}
{submitError && (
Échec —
{submitError}
)}
);
}
function PreviewRow({ k, v }) {
return (
{k}{v || "—"}
);
}
function StepShell({ num, title, intro, children }) {
return (
{[
"Jardin Aimé", "Jardin Médicinal", "Syracuse", "Knossos", "Palmyre", "Carré des Aromatiques", "Potager de l'École",
].map(j => {
const active = data.jardins.includes(j);
return (
);
})}
);
}
function StepUsages({ data, set }) {
return (
set("comestible", v)}
detail={data.comestibleDetail} setDetail={(v) => set("comestibleDetail", v)}
placeholder="Jeunes feuilles en salade, fleurs en infusion…"
accent="var(--olive)"
/>
set("medicinal", v)}
detail={data.medicinalDetail} setDetail={(v) => set("medicinalDetail", v)}
placeholder="Hémostatique, cicatrisante, antispasmodique…"
accent="var(--moss-deep)"
/>
set("bioindic", v)}
detail={data.bioindicDetail} setDetail={(v) => set("bioindicDetail", v)}
placeholder="Indique un sol équilibré, calcaire, drainé…"
accent="var(--terra)"
/>
set("precautions", v)}
placeholder="Allergies possibles, contre-indications, toxicité partielle…" />
set("notes", v)}
placeholder="Infos diverses : observations de terrain, anecdotes, sources, remarques de culture…" />
set("voirAussi", v)}
titre={data.voirAussiTitre || ""}
onTitreChange={(v) => set("voirAussiTitre", v)}
currentId={data.id || data.latin || ""}
/>
);
}
function VoirAussiPicker({ value = [], onChange, titre = "", onTitreChange, currentId }) {
const [input, setInput] = React.useState("");
// Liste de toutes les fiches publiées (sauf la fiche en cours d'édition),
// récupérée depuis window.PLANTS (chargée au démarrage par Herbier.html).
const allPlants = React.useMemo(() => {
const list = Array.isArray(window.PLANTS) ? window.PLANTS : [];
// Filtre la fiche courante par id ET par latin (cas où l'id n'est pas
// encore généré côté backend pour une nouvelle fiche).
return list.filter(pp => pp.id !== currentId && pp.latin !== currentId);
}, [currentId]);
const byId = React.useMemo(() => {
const m = new Map();
for (const pp of allPlants) m.set(pp.id, pp);
return m;
}, [allPlants]);
const selectedItems = value.map(id => byId.get(id)).filter(Boolean);
const datalistId = "voir-aussi-options";
const tryAddFromInput = (raw) => {
const v = (raw || "").trim();
if (!v) return false;
// Match exact sur "Nom · Latin" (format de l'option datalist) OU sur le
// nom commun seul OU sur le latin seul — souplesse pour l'utilisateur.
const match = allPlants.find(pp =>
`${pp.nom} · ${pp.latin}` === v ||
pp.nom === v ||
pp.latin === v
);
if (match && !value.includes(match.id)) {
onChange([...value, match.id]);
setInput("");
return true;
}
return false;
};
const handleInput = (e) => {
const v = e.target.value;
setInput(v);
// Tentative auto-add quand l'utilisateur sélectionne dans le datalist
// (déclenche un onChange avec la valeur exacte de l'option).
tryAddFromInput(v);
};
const handleKeyDown = (e) => {
if (e.key === "Enter") {
e.preventDefault();
tryAddFromInput(input);
}
};
const remove = (id) => onChange(value.filter(x => x !== id));
return (
Lie cette fiche à d'autres plantes du recueil (famille thérapeutique,
affinités, alternatives…). Affichage en bas de fiche.