cedricAbonnel/folio
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

UX : formulaire de création/édition d'article en étapes (wizard) #58

New Issue
Closed
opened 2026-05-14 15:41:45 +00:00 by cedricAbonnel · 1 comment
cedricAbonnel commented 2026-05-14 15:41:45 +00:00
Owner
Copy Link
Copy Source

Contexte

Remplacer le formulaire unique de création/édition par un wizard multi-étapes,
avec auto-sauvegarde en brouillon et validation explicite en dernière étape.

Nouvel article — 5 écrans

Écran 1 — Contenu

  • Champ titre (obligatoire)
  • Éditeur Markdown du contenu
  • Gestion des pièces jointes : upload de fichiers, ajout/suppression de liens externes
  • Les modifications sont auto-sauvegardées en brouillon (résistance aux coupures)
  • Bouton Suivant →

Écran 2 — Publication

  • Bascule public / privé (brouillon)
  • Champ date + heure de publication
  • Bouton Suivant →

Écran 3 — Catégorie

  • Suggestions de catégories existantes (avec swatches couleur)
  • Champ libre pour créer une nouvelle catégorie
  • Bouton Suivant →

Écran 4 — Tags

  • Champs par type (noms propres, abréviations, etc.)
  • Indicateur fréquence d'usage (les plus / moins utilisés en suggestion)
  • Bouton Suivant →

Écran 5 — SEO & Validation

  • Aperçu rendu moteur de recherche (title, description, URL)
  • Édition du titre SEO, de la meta-description, de l'image og:image
  • Bouton Valider → le brouillon devient l'article publié, les fichiers et références sont définitivement attachés

Article existant — 6 écrans

Écran 1 — Contenu

  • Idem création : titre, contenu, fichiers, liens externes
  • Les modifications sont auto-sauvegardées en brouillon (l'article publié reste intact)
  • Bouton Suivant →

Écran 2 — Publication

  • Idem création
  • Bouton Suivant →

Écran 3 — Catégorie

  • Idem création
  • Bouton Suivant →

Écran 4 — Tags

  • Idem création
  • Bouton Suivant →

Écran 5 — SEO

  • Idem création
  • Bouton Suivant →

Écran 6 — Validation & Diff

  • Présentation des différences : texte (diff ligne à ligne), fichiers ajoutés/supprimés, métadonnées modifiées
  • Champ commentaire de révision (optionnel)
  • Bouton Valider → les modifications sont persistées, révision enregistrée

Comportement du brouillon

  • Un brouillon est créé/mis à jour à chaque navigation entre étapes et à chaque modification (debounce)
  • Pour un nouvel article : le brouillon est un article published=false temporaire ; la validation le rend définitif
  • Pour une modification : le brouillon stocke les changements en attente sans toucher à l'article publié
  • Un brouillon non validé est récupérable à la prochaine ouverture du formulaire

Critères d'acceptation

  • Navigation entre étapes sans perte de données
  • Auto-sauvegarde visible (indicateur d'état)
  • Reprise du brouillon après rechargement ou coupure
  • Pour un nouvel article : validation atomique (fichiers + contenu + metadata)
  • Pour une modification : écran de diff avant validation
  • Accès réservé aux utilisateurs authentifiés avec la capacité edit_articles
## Contexte Remplacer le formulaire unique de création/édition par un wizard multi-étapes, avec auto-sauvegarde en brouillon et validation explicite en dernière étape. --- ## Nouvel article — 5 écrans ### Écran 1 — Contenu - Champ titre (obligatoire) - Éditeur Markdown du contenu - Gestion des pièces jointes : upload de fichiers, ajout/suppression de liens externes - Les modifications sont **auto-sauvegardées en brouillon** (résistance aux coupures) - Bouton **Suivant →** ### Écran 2 — Publication - Bascule public / privé (brouillon) - Champ date + heure de publication - Bouton **Suivant →** ### Écran 3 — Catégorie - Suggestions de catégories existantes (avec swatches couleur) - Champ libre pour créer une nouvelle catégorie - Bouton **Suivant →** ### Écran 4 — Tags - Champs par type (noms propres, abréviations, etc.) - Indicateur fréquence d'usage (les plus / moins utilisés en suggestion) - Bouton **Suivant →** ### Écran 5 — SEO & Validation - Aperçu rendu moteur de recherche (title, description, URL) - Édition du titre SEO, de la meta-description, de l'image og:image - Bouton **Valider** → le brouillon devient l'article publié, les fichiers et références sont définitivement attachés --- ## Article existant — 6 écrans ### Écran 1 — Contenu - Idem création : titre, contenu, fichiers, liens externes - Les modifications sont **auto-sauvegardées en brouillon** (l'article publié reste intact) - Bouton **Suivant →** ### Écran 2 — Publication - Idem création - Bouton **Suivant →** ### Écran 3 — Catégorie - Idem création - Bouton **Suivant →** ### Écran 4 — Tags - Idem création - Bouton **Suivant →** ### Écran 5 — SEO - Idem création - Bouton **Suivant →** ### Écran 6 — Validation & Diff - Présentation des différences : texte (diff ligne à ligne), fichiers ajoutés/supprimés, métadonnées modifiées - Champ commentaire de révision (optionnel) - Bouton **Valider** → les modifications sont persistées, révision enregistrée --- ## Comportement du brouillon - Un brouillon est créé/mis à jour à chaque navigation entre étapes et à chaque modification (debounce) - Pour un **nouvel article** : le brouillon est un article `published=false` temporaire ; la validation le rend définitif - Pour une **modification** : le brouillon stocke les changements en attente sans toucher à l'article publié - Un brouillon non validé est récupérable à la prochaine ouverture du formulaire ## Critères d'acceptation - [ ] Navigation entre étapes sans perte de données - [ ] Auto-sauvegarde visible (indicateur d'état) - [ ] Reprise du brouillon après rechargement ou coupure - [ ] Pour un nouvel article : validation atomique (fichiers + contenu + metadata) - [ ] Pour une modification : écran de diff avant validation - [ ] Accès réservé aux utilisateurs authentifiés avec la capacité `edit_articles`
cedricAbonnel commented 2026-05-14 19:49:11 +00:00
Author
Owner
Copy Link
Copy Source

Implémentation terminée

Le wizard est implémenté et déployé sur varlog.a5l.fr. PR : #59

Ce qui a été réalisé

Création (5 étapes) — /new → /new/{uuid}/1..5

  • Étape 1 : titre + contenu Markdown, auto-sauvegarde (debounce 3 s), plan TOC dynamique colonne droite, gestion fichiers/images/liens externes
  • Étape 2 : visibilité (public/brouillon) + date de publication
  • Étape 3 : catégorie avec swatch couleur + suggestions existantes
  • Étape 4 : tags plats (sans catégorie) — valeurs existantes + détection automatique depuis le texte (ABR, CamelCase, noms propres)
  • Étape 5 : aperçu SEO live + titre/description/og:image → publication

Édition (6 étapes) — /edit/{uuid}/1..6

  • Étapes 1–5 : identiques création, modifications stockées en draft_overlay
  • Étape 6 : diff ligne à ligne + commentaire de révision → commit

Infrastructure

  • ArticleManager : +6 méthodes (saveDraftOverlay, getDraftOverlay, hasDraftOverlay, discardDraftOverlay, commitDraftOverlay, updatePartialMeta)
  • .htaccess : routes wizard
  • wizard.js : autosave, TOC, pills tags, scroll curseur dans textarea

Critères d'acceptation

  • Navigation entre étapes sans perte de données
  • Auto-sauvegarde visible (indicateur d'état dans l'en-tête)
  • Reprise du brouillon après rechargement ou coupure
  • Pour un nouvel article : validation atomique (fichiers + contenu + metadata)
  • Pour une modification : écran de diff avant validation
  • Accès réservé aux utilisateurs authentifiés avec la capacité edit_articles
## Implémentation terminée Le wizard est implémenté et déployé sur varlog.a5l.fr. PR : #59 ### Ce qui a été réalisé **Création (5 étapes)** — `/new` → `/new/{uuid}/1..5` - Étape 1 : titre + contenu Markdown, auto-sauvegarde (debounce 3 s), plan TOC dynamique colonne droite, gestion fichiers/images/liens externes - Étape 2 : visibilité (public/brouillon) + date de publication - Étape 3 : catégorie avec swatch couleur + suggestions existantes - Étape 4 : tags plats (sans catégorie) — valeurs existantes + détection automatique depuis le texte (ABR, CamelCase, noms propres) - Étape 5 : aperçu SEO live + titre/description/og:image → publication **Édition (6 étapes)** — `/edit/{uuid}/1..6` - Étapes 1–5 : identiques création, modifications stockées en `draft_overlay` - Étape 6 : diff ligne à ligne + commentaire de révision → commit **Infrastructure** - `ArticleManager` : +6 méthodes (`saveDraftOverlay`, `getDraftOverlay`, `hasDraftOverlay`, `discardDraftOverlay`, `commitDraftOverlay`, `updatePartialMeta`) - `.htaccess` : routes wizard - `wizard.js` : autosave, TOC, pills tags, scroll curseur dans textarea ### Critères d'acceptation - [x] Navigation entre étapes sans perte de données - [x] Auto-sauvegarde visible (indicateur d'état dans l'en-tête) - [x] Reprise du brouillon après rechargement ou coupure - [x] Pour un nouvel article : validation atomique (fichiers + contenu + metadata) - [x] Pour une modification : écran de diff avant validation - [x] Accès réservé aux utilisateurs authentifiés avec la capacité `edit_articles`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
cedricAbonnel (Cédric Abonnel)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cedricAbonnel/folio#58
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?