Projet

Général

Profil

Development #45368

[Bloc de champs] De paire avec la possibilité d'ajouter un bloc par l'usager, il faudrait permettre d'en enlever

Ajouté par Mikaël Ates (de retour le 29 avril) il y a presque 4 ans. Mis à jour il y a environ 3 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
22 juillet 2020
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

Description

Un bloc de champs peut contenir des champs obligatoires.

Si l'usager a cliqué par erreur sur "Ajouter" (un nouveau bloc), il se retrouve bloqué par les champs obligatoires qu'il ne voudra pas remplir.

Il semble qu'un bouton "Supprimer" soit nécessaire.


Fichiers

Révisions associées

Révision f59b73c7 (diff)
Ajouté par Frédéric Péters il y a environ 3 ans

blocks: add option to have a remove button (#45368)

Historique

#2

Mis à jour par Frédéric Péters il y a presque 4 ans

Laisser une "ligne" vide retire celle-ci; comme c'est le cas pour les tableaux de longueur libre.

Commencer par documenter ça. (ce ticket, ou un nouveau)

~~

Ensuite, il y a un plan de rendu "tableau" des blocs de champs, qui permettrait (outre ne pas répéter les libellés ou risquer des choses avec des grid) d'inclure un bouton de retrait d'une ligne.

Pour arriver à "Il semble qu'un bouton "Supprimer" soit nécessaire." qui doit être réfléchi, n'est pas aussi simple (ça peut pourrir l'interface d'avoir ces boutons, par exemple sur une répétition de champs fichiers).

#4

Mis à jour par Frédéric Péters il y a plus de 3 ans

Sans doute nécessaire d'inclure ça sous forme d'option (pour l'exemple du cas de répétition de champs fichiers), ensuite, le layout pourrait être :

champ 1 (grid-1-2)     champ 2 (grid-1-2)
[ .................]   [ .................... ]
champ 3 (grid-1-1)                                    ×
[ ........................................... ]

champ 1 (grid-1-2)     champ 2 (grid-1-2)
[ .................]   [ .................... ]
champ 3 (grid-1-1)                                    ×
[ ........................................... ]

<ajouter>

il y aurait à étudier la disposition html suivante :

 <div> display: flex
   <div> flex: 1, max de largeur
     le rendu d'un bloc
   </div>
   <div> flex: 0, et whatever pour que le bouton/icône soit centré verticalement
     l'icône de suppression
   </div>
 </div>

(et en mobile l'icône de suppression aurait la possibilité de se mettre dessous, genre alignée à droite)

champ 1 (grid-1-2)     champ 2 (grid-1-2)
[ .................]   [ .................... ]
champ 3 (grid-1-1)                                    
[ ........................................... ]
                                              ×

champ 1 (grid-1-2)     champ 2 (grid-1-2)
[ .................]   [ .................... ]
champ 3 (grid-1-1)
[ ........................................... ]
                                              ×

<ajouter>
#5

Mis à jour par Frédéric Péters il y a environ 3 ans

#6

Mis à jour par Frédéric Péters il y a environ 3 ans

Ça ne reprend pas le balisage mentionné ci-dessus mais ça passe le rendu vers des gabarits, pour faciliter les évolutions.

J'ai testé plusieurs dispositions, avec le bouton de retrait en haut à gauche et une croix dedans, pour faire genre "fermer", et le bouton en bas à droite avec un moins dedans, et c'est ce que j'ai trouvé le mieux.

(pour le rendu en frontoffice ça demandera aussi du style dans publik-base-theme, à suivre)

#7

Mis à jour par Frédéric Péters il y a environ 3 ans

  • Assigné à mis à Frédéric Péters
#8

Mis à jour par Thomas Noël il y a environ 3 ans

Dans wcs/fields.py sur le form.add :

    form.add(CheckboxWidget, 'remove_button', title=_('Include remove button'))

il manque le value=self.remove_button et, donc qlq lignes plus haut, la déclaration de cet attribut.

#10

Mis à jour par Thomas Noël il y a environ 3 ans

Bogue : quand j'ai ajouté 3 blocs sur un champ qui n'en autorise que 3, le bouton "Ajouter un autre" disparaît. C'est normal. Mais si je supprime un des blocs, ce bouton ne revient pas, alors qu'il devrait.

#11

Mis à jour par Frédéric Péters il y a environ 3 ans

Voilà, quand la limite est atteinte sur un bloc de champs, il y a plutôt un display: none ajouté sur le bouton "add row"; et dans le js simplement quand on supprime une ligne, on fait :

+      $(this).parents('.BlockWidget').find('.list-add button').show();

(pas besoin de faire de décompte ici et comparer avec le nombre d'éléments autorisés, si on est là c'est forcément qu'on passe à n-1 lignes, et donc qu'il est autorisé d'avoir le bouton "add" pour revenir à n lignes).

#12

Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 3 ans

En passant, je me demande si une iĉone 'trash" ne serait pas plus compréhensible.

#13

Mis à jour par Frédéric Péters il y a environ 3 ans

J'écrivais :

J'ai testé plusieurs dispositions, avec le bouton de retrait en haut à gauche et une croix dedans, pour faire genre "fermer", et le bouton en bas à droite avec un moins dedans, et c'est ce que j'ai trouvé le mieux.

Et j'ai tapé un commit supplémentaire pour montrer l'icône poubelle, perso ça me va aussi même si je trouve que la disposition "en haut à droite" s'y prête moins.

#14

Mis à jour par Frédéric Péters il y a environ 3 ans

Plutôt que le display: none manuellement ajouté, j'ai revu le patch pour utiliser l'attribut is_hidden qui existait déjà et faisait tout à fait ça.

Et j'ai intégré dans le patch le changement pour avoir l'icône poubelle, convaincu par redmine qui met une telle icône pour les fichiers attachés.

#15

Mis à jour par Thomas Noël il y a environ 3 ans

  • Statut changé de Solution proposée à Solution validée
#17

Mis à jour par Frédéric Péters il y a environ 3 ans

  • Statut changé de Solution validée à Résolu (à déployer)
commit f59b73c7c64e2361766642d1710a17c4b8db38be
Author: Frédéric Péters <fpeters@entrouvert.com>
Date:   Mon Feb 1 19:37:42 2021 +0100

    blocks: add option to have a remove button (#45368)
#18

Mis à jour par Frédéric Péters il y a environ 3 ans

  • Statut changé de Résolu (à déployer) à Solution déployée

Formats disponibles : Atom PDF