Ajout des boutons radio riches #168

christophehenry · 2024-08-28T13:16:53Z

🎯 Objectif

Voici ma tentative d'ajouter des boutons radio riches. Je suis un peu sceptique sur cette solution parce qu'elle repose sur une nouvelle forme d'enums, plus complexe et qui repose pas mal sur la métaprogrammation, ce qui peut être difficile à maintenir. Mais pour l'instant, c'est la solution la plus user-friendly que j'ai trouvée. L'idée, c'est de l'utiliser comme ça :

from django import forms
from dsfr.forms import DsfrBaseForm
from dsfr.widgets import RichRadioButtonWidget
from django.utils.safestring import mark_safe


class ComplexChoices(RichRadioButtonChoices):
    ITEM_1 = {
        "value": "Item_1",
        "label": "Item 1",
        "pictogram": "/static/images/item1.png",
        "html_label": mark_safe("<span>Item 1</span>"),
    }
    ITEM_2 = {
        "value": "Item_2",
        "label": "Item 2",
        "pictogram": "/static/images/item2.png",
        "html_label": mark_safe("<span>Item 2</span>"),
    }


class ComplexForm(DsfrBaseForm):
    color_full = forms.ChoiceField(
        label="Choisissez une couleur",
        required=False,
        choices=ComplexChoices.choices,
        widget=RichRadioButtonWidget(rich_choices=ComplexChoices),
    )

christophehenry · 2024-08-28T13:17:57Z

Je veux bien un premier retour histoire d'être sûr que je vais dans la bonne direction.

dsfr/models.py

christophehenry · 2024-09-09T10:32:04Z

dsfr/enums.py

+                if not PY311 and isinstance(value, (list, tuple)):
+                    # Prior to Python 3.11, EnumDict does not interpret auto() when
+                    # wrapped in a tuple so we need to set the value alone a first time
+                    # before wrapping it in a tuple.
+                    if len(value) == 1:
+                        return super().__setitem__(member, value[0])
+                    elif len(value) == 2:
+                        value, label = value
+                    else:
+                        *value, label = value
+
+                    super().__setitem__(member, value)
+                    dict.__setitem__(self, member, (self[member], label))
+                    return


Y'a des petites bizarreries dans le support des Choices dans Django mais, en gros, ça :

class TestEnum(IntEnum): WEEE = auto(), "Weee" OOOH = auto(), "Oooh"

ça crée une exception avant python 3.11… Je sais pas trop pourquoi c'est pas supporté au niveau de django.db.models.enums.ChoicesMeta.

christophehenry · 2024-09-09T10:34:42Z

dsfr/enums.py

+                if PY311:
+                    if "label" in value:
+                        super().__setitem__(
+                            member, (value.pop("value"), value.pop("label"))
+                        )
+                    else:
+                        super().__setitem__(member, value.pop("value"))
+                else:


Pareil que pour #r1750009159. Ça pourra être supprimé quand Django dropera le support de Python 3.11 dans quelques années.

Ash-Crow · 2024-09-17T14:11:18Z

Ça m'a l'air pas mal !

Je note cependant que si on valide le formulaire et qu'il est réaffiché (par exemple, s'il y a des erreurs de validation sur d'autres champs), les valeurs ne sont pas conservées.

Edit: tu vas devoir rebase, j'ai vu au passage et corrigé un bug sur le champ précédent (checkbox multiple…)

christophehenry · 2024-09-18T11:19:00Z

dsfr/widgets.py

+class RichRadioSelect(_RichChoiceWidget, RadioSelect):
+    """
+    Widget for producing riche radio buttons. This widget works with
+    `dsfr.enums.RichRadioButtonChoices`.


Est-ce que c'est possible de faire un lien vers la documentation de ce composant, ici ?

christophehenry · 2024-09-18T11:19:52Z

dsfr/widgets.py

+    ## `html_label`
+
+    The `html_label` instance member can be used to put HTML code inside `<label>`. It
+    is automatically marked as HTML-safe with [`django.utils.safestring.mark_safe`][1]


Est-ce que la forme

[lien`][1] [1]: https://

fonctionne dans la doc ?

christophehenry · 2024-09-18T11:23:04Z

dsfr/enums.py

+    ...     COLD = {"value": "COLD"}
+    ```
+
+    See [this section on how to provide default values for additionnal attributes](#default-values)


J'essaie de faire une référence vers une autre section de la doc de ce composant. Ça fonctionne ?

christophehenry · 2024-09-18T11:23:37Z

dsfr/enums.py

+    ...   }
+    ```
+
+    See `dsfr.widgets.RichRadioSelect` for more details.


C'est possible de faire un réf à la doc de ce composant ici ?

christophehenry · 2024-09-18T11:31:07Z

Je note cependant que si on valide le formulaire et qu'il est réaffiché (par exemple, s'il y a des erreurs de validation sur d'autres champs), les valeurs ne sont pas conservées.

C'est bon, c'est réglé.

christophehenry · 2024-09-19T09:36:13Z

J'ai traduit la doc en français, plutôt.

christophehenry force-pushed the rich-radio-buttons branch 3 times, most recently from 37e4f3c to f4d87da Compare August 28, 2024 13:19

christophehenry force-pushed the rich-radio-buttons branch from 5296bf6 to 2a87139 Compare September 5, 2024 09:16

christophehenry commented Sep 7, 2024

View reviewed changes

dsfr/models.py Outdated Show resolved Hide resolved

christophehenry force-pushed the rich-radio-buttons branch 2 times, most recently from ed8a084 to 90262f2 Compare September 9, 2024 10:29

christophehenry commented Sep 9, 2024

View reviewed changes

christophehenry force-pushed the rich-radio-buttons branch 2 times, most recently from 312b7e1 to 9c20344 Compare September 9, 2024 12:17

Ash-Crow linked an issue Sep 17, 2024 that may be closed by this pull request

Ajouter les boutons radio riches dans les formulaires #126

Open

christophehenry added 6 commits September 18, 2024 11:52

Implement rich radio buttons DSFR component

6372fce

Improvements in ExtendedChoices enum creation + bootstrap widget

6a563ff

Test ExtendedChoices enum

a7557f7

Finish rich radio button implementation

6587d89

pre-commit

36e925a

Clean old code

7b38759

christophehenry force-pushed the rich-radio-buttons branch from 9c20344 to d449c17 Compare September 18, 2024 11:16

christophehenry commented Sep 18, 2024

View reviewed changes

christophehenry force-pushed the rich-radio-buttons branch from d449c17 to b29bc53 Compare September 19, 2024 09:35

christophehenry mentioned this pull request Sep 19, 2024

Migration Django 5 betagouv/Aidants_Connect#1420

Open

Document rich radio button feature

bb5fcff

christophehenry force-pushed the rich-radio-buttons branch from b29bc53 to bb5fcff Compare September 19, 2024 14:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ajout des boutons radio riches #168

Ajout des boutons radio riches #168

christophehenry commented Aug 28, 2024 •

edited

Loading

christophehenry commented Aug 28, 2024

christophehenry Sep 9, 2024 •

edited

Loading

christophehenry Sep 9, 2024

Ash-Crow commented Sep 17, 2024 •

edited

Loading

christophehenry Sep 18, 2024

christophehenry Sep 18, 2024

christophehenry Sep 18, 2024

christophehenry Sep 18, 2024

christophehenry commented Sep 18, 2024

christophehenry commented Sep 19, 2024

Ajout des boutons radio riches #168

Are you sure you want to change the base?

Ajout des boutons radio riches #168

Conversation

christophehenry commented Aug 28, 2024 • edited Loading

🎯 Objectif

christophehenry commented Aug 28, 2024

christophehenry Sep 9, 2024 • edited Loading

Choose a reason for hiding this comment

christophehenry Sep 9, 2024

Choose a reason for hiding this comment

Ash-Crow commented Sep 17, 2024 • edited Loading

christophehenry Sep 18, 2024

Choose a reason for hiding this comment

christophehenry Sep 18, 2024

Choose a reason for hiding this comment

christophehenry Sep 18, 2024

Choose a reason for hiding this comment

christophehenry Sep 18, 2024

Choose a reason for hiding this comment

christophehenry commented Sep 18, 2024

christophehenry commented Sep 19, 2024

christophehenry commented Aug 28, 2024 •

edited

Loading

christophehenry Sep 9, 2024 •

edited

Loading

Ash-Crow commented Sep 17, 2024 •

edited

Loading