[Simplification des plages d'ouvertures] Amélioration du formulaire #4328

ousmanedev · 2024-06-04T13:46:52Z

Simplification des plages d'ouverture

Amélioration du formulaire

Cette PR propose une première itération du projet des plages d'ouverture.
Les changements ici, se focalisent uniquement sur quelques améliorations sur le formulaire de création des plages d'ouverture, notamment:

Remplacer "Description" par "Nom de la plage d'ouverture", avec un nouveau placeholder et suppression du hint
Afficher le champ Lieu, uniquement quand un motif sur place, est sélectionné
Séparer en 2 cards, les sections haute (informations de base) et basse du formulaire (informations de récurrence)
Changer le nom du bouton de soumission du formulaire, de "Enregistrer" à "Créer la plage d'ouverture

Screenshots

Description

Avant	Après

Lieu

Désormais, le champ de sélection du Lieu ne s'affiche que quand on coche un motif sur place

Avant	Après

Sections du formulaire

Le formulaire est séparé en 2 sections (ou cards)

Avant	Après

Bouton de soumission

"Enregistrer" devient "Créer la plage d'ouverture

Avant	Après

Pour plus d'informations :

Figma
Notion

adipasquale

ça marche nickel 👍 et ce sont de très bonnes améliorations d’UX

J’ai mis quelques commentaires non-bloquants mais si tu as le courage de corriger celui du formulaire qui se déplie au chargement de la page ça serait une nette amélioration !

adipasquale · 2024-06-05T08:42:25Z

app/javascript/components/plage_ouverture.js

+  constructor() {
+    this.toggleLieuSelectionField();
+
+    let that = this;


ce n’est pas nécessaire il me semble, la fat arrow () => { préserve déjà le this

Merci. Corrigé dans 68d0349

adipasquale · 2024-06-05T08:52:33Z

app/javascript/components/plage_ouverture.js

@@ -0,0 +1,21 @@
+class PlageOuverture {
+  constructor() {
+    this.toggleLieuSelectionField();


un petit bémol à cette manière de faire pour l’état initial c’est que si un motif est déjà coché lors du chargement du dom ça va faire un "layout shift" avec le uncollapse en différé

deux manière de reproduire ça c’est de :

sur le formulaire new faire volontairement une erreur de validation, par ex mettre une heure de fin antérieure à l’heure de début

aller sur le formulaire edit d’ue PO avec un lieu sur place

pour réparer ça il faudrait supprimer cette ligne et faire en sorte que le DOM soit chargé correctement avec les bons attributs de collapse et de show dès le render server
ça demande un peu plus de taf et un peu de duplication de la logique côté serveur et client mais ça vaut le coût à mon avis !

Screen.Recording.2024-06-05.at.10.49.20.mov

Good catch. J'ai trouvé une manière de corriger ça côté client, en supprimant la transition sur le collapse, lors du premier render. Voir 4ccddd2

bien vu c’est une bonne manière d’améliorer à bas-coût ! Il reste un petit délai entre le chargement du DOM et l’exécution du JS, invisible sur un réseau rapide et un PC performant, mais c’est probablement négligeable 👍

adipasquale · 2024-06-05T08:53:13Z

app/javascript/components/plage_ouverture.js

+  }
+
+  toggleLieuSelectionField() {
+    let selectedMotifsPublicOffice = $(".plage-ouverture-form .form-check-input.public_office[name='plage_ouverture[motif_ids][]']:checked");


tu peux utiliser un const ici

Merci. Fait ici 68d0349

adipasquale · 2024-06-05T08:54:49Z

app/views/admin/plage_ouvertures/_form.html.slim

+                    .pl-3
+                      = f.check_box :motif_ids, { multiple: true, class: "form-check-input #{motif.location_type}" }, motif.id, false
+                      = f.label "motif_ids_#{motif.id}", motif_name_with_location_type_and_badges(motif), class: "form-check-label"
+              .collapse.lieu-field


je ne pense pas qu’il y ait de doctrine claire chez RDV mais perso j’aime bien préfixer les classes utilisées uniquement pour le js : js-lieu-field

je suis de la même école, et sinon une alternative que je trouve pas mal c'est d'utiliser des data attributes pour clarifier que c'est destiné à du js plutôt que du css

Fait ici 68d0349

adipasquale · 2024-06-05T08:56:07Z

app/views/admin/plage_ouvertures/new.html.slim

@@ -7,19 +7,4 @@
  - else
    | Nouvelle plage d'ouverture pour #{@plage_ouverture.agent.full_name}

- content_for :breadcrumb do


pourquoi avoir supprimé les breadcrumbs ici ?

Il m'a semblé dans un premier temps que le nouveau design le supprimait, mais je me suis trompé.

Restauré ici : ece0fff

adipasquale · 2024-06-05T08:58:37Z

config/locales/models/plage_ouverture.fr.yml

@@ -4,7 +4,7 @@ fr:
      plage_ouverture: Plage d'ouverture
    attributes:
      plage_ouverture:
-        title: Description
+        title: Nom de la plage d'ouverture


❤️ tellement mieux

ousmanedev · 2024-06-05T11:03:17Z

Merci pour la review @adipasquale & @victormours

J'ai répondu à l'ensemble des commentaires et appliqué les correctifs.

… first display

Change Description to Nom de la plage d'ouverture

6cda525

ousmanedev changed the title ~~[Plage d'ouvertures] Ameliorations du formulaire~~ [Simplification des plages d'ouvertures] Ameliorations du formulaire Jun 4, 2024

ousmanedev marked this pull request as draft June 4, 2024 13:55

ousmanedev mentioned this pull request Jun 4, 2024

[DRAFT] Upgrade des plages d'ouverture: V0 #4297

Closed

ousmanedev changed the title ~~[Simplification des plages d'ouvertures] Ameliorations du formulaire~~ [Simplification des plages d'ouvertures] Amélioration du formulaire Jun 4, 2024

ousmanedev force-pushed the po-v0-0 branch from 2d08bf9 to 80e2ecf Compare June 4, 2024 16:05

ousmanedev marked this pull request as ready for review June 4, 2024 16:07

ousmanedev force-pushed the po-v0-0 branch 2 times, most recently from 0e155d6 to 77874bf Compare June 4, 2024 17:54

ousmanedev added 2 commits June 4, 2024 21:16

Do not show lieu selection field if no public office motif is selected

314674b

Separate form sections in 2 cards

62bb27b

ousmanedev force-pushed the po-v0-0 branch from 77874bf to 62bb27b Compare June 4, 2024 19:16

Update specs

b4ae4c7

ousmanedev force-pushed the po-v0-0 branch from 6e3e7b1 to b4ae4c7 Compare June 4, 2024 20:43

Remove blank line

7640673

adipasquale approved these changes Jun 5, 2024

View reviewed changes

ousmanedev added 2 commits June 5, 2024 11:13

Improve coding style

68d0349

Restore the breadcrum in plage_ouvertures/new

ece0fff

Fix lag in display of Lieu selection field, by removing transition on…

abb00c4

… first display

ousmanedev force-pushed the po-v0-0 branch from 4ccddd2 to abb00c4 Compare June 5, 2024 11:55

ousmanedev enabled auto-merge (rebase) June 5, 2024 11:58

ousmanedev merged commit ed93e0e into production Jun 5, 2024
11 of 12 checks passed

ousmanedev deleted the po-v0-0 branch June 5, 2024 11:58

ousmanedev mentioned this pull request Jun 20, 2024

[Correctif] Reparer souci de marge sur le formulaire des plages d'ouverture #4356

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Simplification des plages d'ouvertures] Amélioration du formulaire #4328

[Simplification des plages d'ouvertures] Amélioration du formulaire #4328

ousmanedev commented Jun 4, 2024 •

edited

Loading

adipasquale left a comment

adipasquale Jun 5, 2024

ousmanedev Jun 5, 2024

adipasquale Jun 5, 2024 •

edited

Loading

ousmanedev Jun 5, 2024

adipasquale Jun 5, 2024

adipasquale Jun 5, 2024

ousmanedev Jun 5, 2024

adipasquale Jun 5, 2024

victormours Jun 5, 2024

ousmanedev Jun 5, 2024

adipasquale Jun 5, 2024

ousmanedev Jun 5, 2024

adipasquale Jun 5, 2024

ousmanedev commented Jun 5, 2024

[Simplification des plages d'ouvertures] Amélioration du formulaire #4328

[Simplification des plages d'ouvertures] Amélioration du formulaire #4328

Conversation

ousmanedev commented Jun 4, 2024 • edited Loading

Simplification des plages d'ouverture

Amélioration du formulaire

Screenshots

Description

Lieu

Sections du formulaire

Bouton de soumission

Pour plus d'informations :

adipasquale left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adipasquale Jun 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ousmanedev commented Jun 5, 2024

ousmanedev commented Jun 4, 2024 •

edited

Loading

adipasquale Jun 5, 2024 •

edited

Loading