Améliorer la saisie erreurs et recommandations

[AdrienMuzyczka]

Maquettes : https://www.figma.com/design/lbnXmYmTsTgkWvgzdR6W1c/Ara_V0.10_B%C3%AAta?node-id=5742-332214&t=7EdOQKdWSOMdcLF2-1

ℹ️ Informations générales

• L'éditeur enrichi est ajouté dans les "critères" et "annoter l'audit" et repris dans le rapport en mode "read only"
• Pour "annoter l'audit" garder le composant d'ajout de fichier

🎯 MVP

Mise en forme du texte

• [x] WYSIWYG
• [x] Permettre les mises en formes du texte suivant :
  • [x] Bold
  • [x] Italic
  • [x] Barré
  • [x] Liste à puce
  • [x] Liste numérotée
  • [x] Titres (3 niveaux)
  • [x] Citation de texte
  • [x] Citation de code
  • [x] Bloc de code
  • [x] Lien
  • [x] Citation de texte
• [x] Ajouter une barre d'action pour la mise en forme du texte
  • [x] Pour les boutons de titres, utiliser des boutons avec un rendu et une sémantique adaptée pour avoir une hiérarchie des titres cohérente dans le rapport et l'audit
  • [x] 3 états pour un bouton : “défaut” / “hover” (identique pour un hover sur l’état “défaut” et “cliqué”) / “cliqué”
  • [x] Lorsque l’usager sélectionne une saisie mise en forme, les boutons correspondant à la mise en forme passent en état “cliqué”

Ajout d'image

• [x] Image dans la zone de saisie
• [x] Drag and drop d'image
  • [x] D'une image en local (ex : enregistrée sur le bureau ou preview type mac). Image uploadé sur notre serveur.
  • [x] D'une data image (ex : URL décrivant l'image). Image uploadé sur notre serveur.
  • ⚠ toujours uploader les images sur notre serveur pour garder une trace du site audité. Éviter les liens rompus.
• [x] Coller d'image
  • [x] D'une image en local (ex : enregistrée sur le bureau)
  • [x] D'une data image (ex : URL décrivant l'image)
• [x] Ajouter une alternative aux ajouts d'image par drag and drop et copier-coller : bouton "insérer une image" dans la barre d'action
• [ ] compresser automatiquement les images uploadées

Raccourcis clavier

• [x] Prise en compte des raccourcis
• [x] Vérifier que les raccourcis clavier sont "habituels"

Redimensionnement du champ

• [x] Redimensionner automatiquement le champ de saisi en hauteur pour qu’il s’adapte à la longueur du contenu saisi

Message d'erreur (local et serveur)

• [x] Afficher un message personnalisé pour chaque type d'erreurs en utilisant la modale native du navigateur
  • [ ] erreur poids
  • [ ] erreur format fichier
  • [ ] erreur format fichier + poids
  • [ ] erreur time out
  • Reprendre les formats et poids des critères et annotation d'audit

Migration

• [ ] Pour les audits "terminés" et "en cours", déplacer les images des critères dans le champ de saisie. Positionner ces images en bas du champ
• [ ] Réaliser une série de tests sur les audits "terminés" pour s'assurer qu'il n'y aura aucune perte de données

Upload serveur

• [x] Upload au moment de l'import d'image dans l'éditeur
• [ ] Delete server au moment de la suppression de l'image dans l'éditeur

Autre

• [ ] Mettre le label de l'éditeur (accordéon) "Erreur et recommandation" au pluriel

UI

• [ ] Personnaliser l'éditeur pour coller aux champs/zones de texte du DSFR
• [ ] Laisser en blanc le fond de l'éditeur dans le rapport
• [ ] Mode sombre, vérifier que les couleurs sont OK

Maquettes : https://www.figma.com/design/lbnXmYmTsTgkWvgzdR6W1c/Ara_V0.10_B%C3%AAta?node-id=5742-332214&t=7EdOQKdWSOMdcLF2-1

[AdrienMuzyczka]

Constat

Pouvoir coller une image durant un audit ferait gagner du temps à l’auditeur en évitant de devoir enregistrer l’image avant de l’importer.

En plus du drag and drop que nous avons déjà identifié, ajouter la possibilité d’insérer une image par “coller” simplifierait le travail de l’auditeur, notamment lorsqu'il utilise des outils tiers pour des captures d’écran.

Recommandation

Réfléchir à la manière de permettre le coller d’images

[AdrienMuzyczka]

Idée pour la migration :

1. Prévenir l'usager d'une coupure du service pendant une courte période
2. Migrer
3. Tester le prod
4. Rouvrir le service