feat(frontend): Architecture multi-modes pour les widgets de formulaires #78

New Issue

jmartin · 2026-02-03T14:43:13Z

jmartin commented

2026-02-03 14:43:13 +00:00

?? Objectif

Refactoriser les widgets de formulaires pour supporter 4 modes d'affichage diff�rents au lieu d'avoir des widgets s�par�s pour l'�dition et la lecture seule.

?? Contexte actuel

Actuellement, nous avons :

Des widgets de formulaire �ditables (inscription)
Du code dupliqu� dans les r�capitulatifs pour afficher les m�mes donn�es en lecture seule

Cette duplication pose des probl�mes de :

Maintenance (modifications en double)
Coh�rence visuelle
Taille du code

?? Architecture propos�e

Les 4 modes

Mode	Layout	�ditable	Usage
Desktop Edit	Horizontal (2 colonnes)	? Oui	Formulaire d'inscription desktop
Mobile Edit	Vertical (1 colonne)	? Oui	Formulaire d'inscription mobile
Desktop Readonly	Horizontal (2 colonnes)	? Non	R�capitulatif desktop
Mobile Readonly	Vertical (1 colonne)	? Non	R�capitulatif mobile

Impl�mentation technique

Ajout d'une configuration de mode dans chaque widget :

enum DisplayMode {
  editDesktop,      // �dition horizontal (d�faut actuel)
  editMobile,       // �dition vertical
  readonlyDesktop,  // Lecture horizontal (r�cap)
  readonlyMobile,   // Lecture vertical (r�cap mobile)
}

// Ou configuration granulaire :
class DisplayConfig {
  final bool isReadonly;
  final bool isVertical;
  
  DisplayConfig({
    this.isReadonly = false,
    this.isVertical = false,
  });
}

? Avantages

DRY - Un seul widget = une seule source de v�rit�
Coh�rence - M�me structure entre formulaire et r�cap
Maintenance - Modification en un seul endroit
Responsive - Desktop/mobile automatique
R�utilisabilit� - Inscription, r�cap, profil, �dition, etc.
Testabilit� - Tests une seule fois pour tous les modes

?? Widgets concern�s

Priorit� 1 (utilis�s dans r�caps)

PersonalInfoFormScreen - Infos personnelles (nom, adresse, contact)
ProfessionalInfoFormScreen - Infos professionnelles AM
PresentationFormScreen - Motivation/pr�sentation

Priorit� 2 (optionnels)

ChildCardWidget - Carte enfant (d�j� extrait)

?? �tapes de mise en �uvre

Phase 1 : PersonalInfoFormScreen

Ajouter enum DisplayMode ou classe DisplayConfig
Adapter le layout selon le mode (horizontal/vertical)
G�rer l'�tat �ditable/readonly des champs
Tester les 4 modes

Phase 2 : ProfessionalInfoFormScreen

Appliquer la m�me logique que Phase 1
G�rer la photo en mode readonly

Phase 3 : PresentationFormScreen

Appliquer la m�me logique
G�rer le texte multiligne en readonly

Phase 4 : Refactorisation des r�caps

Remplacer les cartes de r�cap AM Step 4 par les widgets en mode readonly
Remplacer les cartes de r�cap Parent Step 5 par les widgets en mode readonly
Supprimer le code dupliqu�

Phase 5 : Responsive mobile (optionnel)

D�tecter la taille d'�cran
Basculer automatiquement entre modes desktop/mobile

?? Impact estim�

R�duction de code : ~300-500 lignes (suppression duplication r�caps)
Fichiers modifi�s : 6 widgets + 2 �crans de r�cap
Risque : Faible (ajout de fonctionnalit�s, pas de suppression)
Tests requis : Formulaires d'inscription + r�capitulatifs

?? Ressources

Widgets actuels : frontend/lib/widgets/
�crans r�cap : am_register_step4_screen.dart, parent_register_step5_screen.dart

## ?? Objectif Refactoriser les widgets de formulaires pour supporter 4 modes d'affichage diff�rents au lieu d'avoir des widgets s�par�s pour l'�dition et la lecture seule. ## ?? Contexte actuel Actuellement, nous avons : - Des widgets de formulaire �ditables (inscription) - Du code dupliqu� dans les r�capitulatifs pour afficher les m�mes donn�es en lecture seule Cette duplication pose des probl�mes de : - Maintenance (modifications en double) - Coh�rence visuelle - Taille du code ## ?? Architecture propos�e ### Les 4 modes | Mode | Layout | �ditable | Usage | |------|--------|----------|-------| | **Desktop Edit** | Horizontal (2 colonnes) | ? Oui | Formulaire d'inscription desktop | | **Mobile Edit** | Vertical (1 colonne) | ? Oui | Formulaire d'inscription mobile | | **Desktop Readonly** | Horizontal (2 colonnes) | ? Non | R�capitulatif desktop | | **Mobile Readonly** | Vertical (1 colonne) | ? Non | R�capitulatif mobile | ### Impl�mentation technique Ajout d'une configuration de mode dans chaque widget : ```dart enum DisplayMode { editDesktop, // �dition horizontal (d�faut actuel) editMobile, // �dition vertical readonlyDesktop, // Lecture horizontal (r�cap) readonlyMobile, // Lecture vertical (r�cap mobile) } // Ou configuration granulaire : class DisplayConfig { final bool isReadonly; final bool isVertical; DisplayConfig({ this.isReadonly = false, this.isVertical = false, }); } ``` ## ? Avantages 1. **DRY** - Un seul widget = une seule source de v�rit� 2. **Coh�rence** - M�me structure entre formulaire et r�cap 3. **Maintenance** - Modification en un seul endroit 4. **Responsive** - Desktop/mobile automatique 5. **R�utilisabilit�** - Inscription, r�cap, profil, �dition, etc. 6. **Testabilit�** - Tests une seule fois pour tous les modes ## ?? Widgets concern�s ### Priorit� 1 (utilis�s dans r�caps) - [ ] PersonalInfoFormScreen - Infos personnelles (nom, adresse, contact) - [ ] ProfessionalInfoFormScreen - Infos professionnelles AM - [ ] PresentationFormScreen - Motivation/pr�sentation ### Priorit� 2 (optionnels) - [ ] ChildCardWidget - Carte enfant (d�j� extrait) ## ?? �tapes de mise en �uvre ### Phase 1 : PersonalInfoFormScreen 1. Ajouter enum DisplayMode ou classe DisplayConfig 2. Adapter le layout selon le mode (horizontal/vertical) 3. G�rer l'�tat �ditable/readonly des champs 4. Tester les 4 modes ### Phase 2 : ProfessionalInfoFormScreen 1. Appliquer la m�me logique que Phase 1 2. G�rer la photo en mode readonly ### Phase 3 : PresentationFormScreen 1. Appliquer la m�me logique 2. G�rer le texte multiligne en readonly ### Phase 4 : Refactorisation des r�caps 1. Remplacer les cartes de r�cap AM Step 4 par les widgets en mode readonly 2. Remplacer les cartes de r�cap Parent Step 5 par les widgets en mode readonly 3. Supprimer le code dupliqu� ### Phase 5 : Responsive mobile (optionnel) 1. D�tecter la taille d'�cran 2. Basculer automatiquement entre modes desktop/mobile ## ?? Impact estim� - **R�duction de code** : ~300-500 lignes (suppression duplication r�caps) - **Fichiers modifi�s** : 6 widgets + 2 �crans de r�cap - **Risque** : Faible (ajout de fonctionnalit�s, pas de suppression) - **Tests requis** : Formulaires d'inscription + r�capitulatifs ## ?? Ressources - Widgets actuels : frontend/lib/widgets/ - �crans r�cap : am_register_step4_screen.dart, parent_register_step5_screen.dart

jmartin referenced this issue

2026-02-04 09:30:26 +00:00

[Frontend] Adapter �cran Login pour mobile #82

jmartin commented

2026-02-07 13:48:53 +00:00

Refonte des formulaires multi-modes termin�e. Les widgets supportent maintenant les modes Desktop/Mobile et �dition/Lecture seule de mani�re adaptative. Documentation mise � jour.

jmartin closed this issue

2026-02-07 13:48:58 +00:00

jmartin referenced this issue from a commit

2026-02-07 13:51:19 +00:00

feat(#78): Créer infrastructure générique pour formulaires multi-modes

jmartin referenced this issue from a commit

2026-02-07 13:51:19 +00:00

feat(#78): Migrer PersonalInfoFormScreen vers infrastructure multi-modes

jmartin referenced this issue from a commit

2026-02-07 13:51:19 +00:00

feat(#78): Finaliser layout mobile responsive de PersonalInfoFormScreen

jmartin referenced this issue from a commit