Project

General

Profile

Développement #104406

Nouvelle cellule "Événements" - Affichage en vue hebdomadaire en front-office des événements réservables

Added by Lauréline Guérin (absente) 7 months ago. Updated about 1 month ago.

Status:
Solution déployée
Priority:
Normal
Assignee:
Target version:
-
Start date:
07 April 2025
Due date:
% Done:

0%

Estimated time:
Patch proposed:
No
Planning:
No

Description

Ce développement permettra d'afficher sur le portail usager une semaine d'événements (à partir d'un ou plusieurs agendas de type "Événements") sous forme calendaire, avec la possibilité de passer d'une semaine à l'autre. Le paramétrage permettra d'indiquer la démarche associée à la réservation, et un clic sur l'événement permettra d'arriver directement sur cette démarche (avec l'événement choisi pré-sélectionné si cela a été implémenté dans le formulaire).

La cellule affichera pour chaque événement au minimum son intitulé, son heure de début et son heure de fin. D'autres informations pourront être affichées via un gabarit (par exemple, un tarif, une description, mais pas de HTML ni d'image).


Files

une-ou-deux-lignes.png (11.2 KB) une-ou-deux-lignes.png Frédéric Péters, 09 July 2025 10:35 AM
Capture d’écran du 2025-09-04 15-54-02.png (62.9 KB) Capture d’écran du 2025-09-04 15-54-02.png Thomas Jund, 04 September 2025 04:59 PM

Related issues

Related to Intégrations graphiques Publik - Développement #109712: ajouter css buttons-groupSolution déployée03 September 2025

Actions
Related to Chrono - Développement #109908: Ajouter un champ couleur dans les types d'évènementsSolution déployée09 September 2025

Actions
Related to Intégrations graphiques Publik - Développement #110428: Revoir les styles de JqueryUI DialogSolution déployée25 September 2025

Actions
Related to Combo - Développement #111062: cellule évènements, inclure les fichiers css dans le manifestSolution déployée14 October 2025

Actions
Related to Combo - Développement #111067: Nouvelle cellule "Événements" : deux événements concurrents se chevauchent de manière illisibleNouveau

Actions
Related to Combo - Développement #111069: Nouvelle cellule "Événements" : si la hauteur de l'heure est trop petite, l'intitulé est tronqué et le lien "Réserver" est inaccessibleNouveau14 October 2025

Actions
Related to Combo - Développement #111070: Nouvelle cellule "Événements" : ça manque un peu de help textSolution déployée

Actions
Related to Combo - Développement #111071: Nouvelle cellule "Événements" : ça manque un peu de place sur les champs de paramétrageSolution déployée

Actions

Associated revisions

Revision eb4f3a29 (diff)
Added by Thomas Jund about 1 month ago

chrono: add new events calendar cell (#104406)

History

#1

Updated by Lauréline Guérin (absente) 7 months ago

  • Assignee set to Thomas Jund
#3

Updated by Lauréline Guérin (absente) 7 months ago

  • Description updated (diff)
#4

Updated by Stéphanie Bouvier 7 months ago

  • Assignee changed from Thomas Jund to Lauréline Guérin (absente)
#6

Updated by Lauréline Guérin (absente) 7 months ago

  • Assignee changed from Lauréline Guérin (absente) to Stéphanie Bouvier
#8

Updated by Stéphanie Bouvier 7 months ago

  • Assignee changed from Stéphanie Bouvier to Lauréline Guérin (absente)
#14

Updated by Lauréline Guérin (absente) 7 months ago

  • Assignee changed from Lauréline Guérin (absente) to Thomas Jund
#15

Updated by Thomas Jund 4 months ago

Valentin va prendre le relais de Laureline sur ce dev

#16

Updated by Thomas Jund 4 months ago

un premier proto est disponible pour en discuter
https://codepen.io/Sacripant/pen/qEdaEQv

#17

Updated by Thomas Jund 4 months ago

  • Status changed from Nouveau to Information nécessaire
  • Assignee changed from Thomas Jund to Valentin Deniaud
#18

Updated by Frédéric Péters 4 months ago

De la description : "avec la possibilité de passer d'une semaine à l'autre" ça me semble manquer.

~~

"réserver + d'infos" parfois sur une ligne parfois sur deux, s'agit-il de faire un choix ?

#19

Updated by Frédéric Péters 4 months ago

Aussi, quel rendu pour plusieurs évènements à la même heure ou qui se chevauchent ?

Dans le codepen lundi il y a Pilate 10h - 11h puis Pilate 10h30 - 12h30, avec ce dernier qui apparait uniquement sur la zone "11h - 12h30", mais je ne sais pas si c'est volontaire (puisque l'après-midi, et les autres jours, les éléments disent "10h-11h" et ne sont pas du tout calés sur ces heures).

Aussi (bis), quel rendu avec des libellés d'évènements qui seraient "un peu long" ?

#20

Updated by Valentin Deniaud 4 months ago

  • Status changed from Information nécessaire to En cours

🤖 Une pull request concernant ce ticket a été ouverte :

#21

Updated by Valentin Deniaud 4 months ago

  • Assignee changed from Valentin Deniaud to Thomas Jund

C'est intégré en mode très wip.

Pour le moment le paramétrage prend juste des slugs d'agenda séparés par des virgules, plus tard je verrais pour remplacer ça par une liste dynamique sourcée depuis chrono.

Points d'attention :
  • Les évènements peuvent ne pas avoir de durée et donc pas d'heure de fin, j'ai pour le moment ignoré, certainement que mon code crashe dans ce cas. À discuter de comment les gérer (on peut simplement ne pas les afficher).
  • Il faut corriger le JS pour que les checks eslint passent, actuellement le commit ne passe pas la CI. (on peut lancer un pre-commit run --all-files pour les voir, même si la sortie affiche des erreurs sur d'autres choses sans lien pour moi)
  • Pour le moment les évènements affichés sont bornés sur les délais de réservation : ça veut dire que si on regarde le calendrier le vendredi, alors on est assuré d'avoir les quatre premiers jours de la semaine vide car non réservables. Je ne trouve pas ça très joli mais si il faut faire autrement ça ajoutera pas mal de complexité.

Frédéric Péters a écrit :

De la description : "avec la possibilité de passer d'une semaine à l'autre" ça me semble manquer.

Vu avec Fred via jabber, j'ai fait ça en ajax, qui est simplement de redemander le rendu de la cellule sur une autre semaine. Il faut améliorer ça : d'abord réussir à attacher à nouveau le EventListener aux boutons après refresh (actuellement les boutons ne marchent que la première fois) (il y a certainement un truc à creuser autour de l'event JS combo:load-cell), ensuite les intégrer de manière propre au calendrier.

#22

Updated by Valentin Deniaud 4 months ago

Valentin Deniaud a écrit :

Points d'attention :

Aussi, le bouton « + d'infos » ne fonctionne pas

#23

Updated by Marie Kuntz 3 months ago

Les évènements peuvent ne pas avoir de durée et donc pas d'heure de fin, j'ai pour le moment ignoré, certainement que mon code crashe dans ce cas. À discuter de comment les gérer (on peut simplement ne pas les afficher).

Je ne sais pas quel cas d'usage justifie le fait de ne pas avoir de durée, mais en attendant d'avoir résolu ce mystère, je dirais bien que l'événement prend fin à 23h59 du jour de début. Alternativement, on peut décider de ne pas afficher, cela forcera à mettre une durée, mais le support des "je ne comprends pas pourquoi mon événement n'apparait pas" va être un peu pénible dans les premiers temps.

Pour le moment les évènements affichés sont bornés sur les délais de réservation : ça veut dire que si on regarde le calendrier le vendredi, alors on est assuré d'avoir les quatre premiers jours de la semaine vide car non réservables. Je ne trouve pas ça très joli mais si il faut faire autrement ça ajoutera pas mal de complexité.

Pourrait-on voir les événements sans les liens pour réserver/plus d'infos ?

#24

Updated by Thomas Jund 2 months ago

#25

Updated by Thomas Jund 2 months ago

Mise à jour du dépot niveau template, CSS et JS :

  • mise à jour du template avec ajout titre de la cellule et des class cell--title, cell--body
  • déplacement des boutons dans le header du calendrier
  • scssify des styles
  • Ajustements typo
  • Amélioration vue mobile en masquant les jours vides et les heures du calendrier
  • JS suppression des erreurs eslint
  • JS réécriture pour fonctionnement auprès refresh ajax
  • Ajout d'un support pour passer un paramètre couleur pour les events

Des ajouts necessaires :

  • Pouvoir donner une valeur à la hauteur d'une heure du calendrier, permettant de gérer manuellement la heuteur du calendrier et donc des événements (voir var --hour-height dans events-calendar.html)
  • Pouvoir passer une option couleur (via un input type color) dans les options de l'événement (voir capture jointe pour exemple de rendu

Il manque

L'affichage du popup quand on clic sur "+ de détails". Pour le moment le code JS gère cela via jQueryUI. Mais JqeuryUI n'est plus chargé côté portail usager. Alors :

  • C'est possible de l'ajouter et ça ira vite pour finaliser la cellule
  • C'est pas possible et je dois écrire le code d'une modale specifique
  • Voir écrire un truc en vue de remplacer jQueryUI dialog et donc un dev encore plus propre avec tests
#26

Updated by Valentin Deniaud 2 months ago

#27

Updated by Frédéric Péters 2 months ago

J'avais ces questions dans un commentaire plus haut :

Aussi, quel rendu pour plusieurs évènements à la même heure ou qui se chevauchent ?
(...)
Aussi (bis), quel rendu avec des libellés d'évènements qui seraient "un peu long" ?

#28

Updated by Valentin Deniaud 2 months ago

Frédéric Péters a écrit :

Aussi, quel rendu pour plusieurs évènements à la même heure ou qui se chevauchent ?

Les évènements vont se superposer, la transparence fera que ça sera un peu lisible mais pas beau en cas de chevauchement, pas du tout lisible en cas de superposition.

Aussi (bis), quel rendu avec des libellés d'évènements qui seraient "un peu long" ?

Vu qu'on gère le passage des semaines côté serveur, le JS n'est pas au courant de la taille que peuvent faire les libellés d'une semaine à l'autre. Donc si la taille s'adaptait automatiquement, ça ferait des variations bizarres d'une semaine à l'autre. Le plus simple c'est donc d'avoir la hauteur des heures configurable dans les paramètres de la cellule, charge à chacun de choisir quelque chose d'adapté

#30

Updated by Valentin Deniaud about 2 months ago

  • Assignee changed from Valentin Deniaud to Thomas Jund
#31

Updated by Thomas Jund about 2 months ago

#32

Updated by Valentin Deniaud about 2 months ago

  • Status changed from En cours to Solution proposée
#33

Updated by Gael Pasgrimaud about 1 month ago

  • Status changed from Solution proposée to En cours

🤖 Modifications demandées sur la pull request :

#34

Updated by Valentin Deniaud about 1 month ago

  • Status changed from En cours to Solution proposée
#35

Updated by Valentin Deniaud about 1 month ago

🤖 Relecture de Gael Pasgrimaud (gpasgrimaud) demandée sur la pull request :

#36

Updated by Gael Pasgrimaud about 1 month ago

  • Status changed from Solution proposée to Solution validée

🤖 Pull request approuvée :

#37

Updated by Thomas Jund about 1 month ago

  • Status changed from Solution validée to Résolu (à déployer)

🤖 Pull request fusionnée :

#38

Updated by Valentin Deniaud about 1 month ago

#39

Updated by Transition automatique about 1 month ago

  • Status changed from Résolu (à déployer) to Solution déployée
#40

Updated by Marie Kuntz about 1 month ago

  • Related to Développement #111067: Nouvelle cellule "Événements" : deux événements concurrents se chevauchent de manière illisible added
#41

Updated by Marie Kuntz about 1 month ago

  • Related to Développement #111069: Nouvelle cellule "Événements" : si la hauteur de l'heure est trop petite, l'intitulé est tronqué et le lien "Réserver" est inaccessible added
#42

Updated by Marie Kuntz about 1 month ago

#43

Updated by Marie Kuntz about 1 month ago

  • Related to Développement #111071: Nouvelle cellule "Événements" : ça manque un peu de place sur les champs de paramétrage added

Also available in: Atom PDF