Project

General

Profile

Development #52073

composition graphique grille fiche

Added by Frédéric Péters 3 months ago. Updated 1 day ago.

Status:
Solution proposée
Priority:
Normal
Assignee:
Target version:
-
Start date:
16 Mar 2021
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

Description

(pour l'objectif général #50694, mais la maquette là peut être ignorée dans ses détails)

Mon idée pour ce ticket est de se concentrer sur la partie composition de la grille, en détachant ça des considérations détaillées de patch combo (i.e. l'intégration technique viendra derrière).

Ce que j'imagine c'est qu'on ait comme info le schéma des données, i.e. une liste de champs, ex:

{"fields": [{"id": "name", "label": "Nom", "type": "string"}, ...]}

et qu'on veut permettre en retour la production d'un json de description d'une composition en grille de champs tirés de la liste ci-dessus (pas nécessairement tous).

Je pense qu'au plus simple cette description devra suivre la piste CSS choisie, par exemple pour le choix CSS grid ça pourrait être :

{"cells": [{"field": "name", "column-start": 1, "column-end": 2, "row-start": 1, "row-end": 2}, ...]}

alors que si on choisissait CSS flex ça pourrait être :

{"rows": [{"field": "name", "grow": "2"}, ...], [...

et via notre système actuel à base de floats,

{"cells": [{"field": "name", "newline": true, "width": "1-2"}, ...]}

Files


Related issues

Related to Intégrations graphiques Publik - Development #52336: nouveau system de grille en flexboxSolution proposée24 Mar 2021

Actions
Related to Combo - Development #52498: cellule contenu d'une fiche, inclure dans l'HTML de l'édition des paramètres le schéma des donnéesSolution déployée30 Mar 2021

Actions
Related to Combo - Bug #53778: manager JS: scope global pour compute_max_heightSolution déployée05 May 2021

Actions
Related to Combo - Development #53780: manager JS: ajout des events cell:open & cell:closeSolution déployée05 May 2021

Actions
Related to Combo - Development #54259: cellule fiche: ajouter checkbox "personnaliser" et input (hidden]Solution proposée25 May 2021

Actions
Related to Intégrations graphiques Publik - Bug #54911: suppresion balise sur selecteur .labelRésolu (à déployer)16 Jun 2021

Actions

History

#1

Updated by Thomas Jund 3 months ago

En réfléchissant sur la conception de notre éditeur wysiwi(g/m) maison, je me demande dans quel cas ce ne serait pas judicieux de l'utiliser aussi pour cette cellule :
que notre éditeur propose un module grille, un peu comme ce qui se fait pour les tableaux en wysiwyg, et ensuite de pouvoir placer dans les grilles le contenu que l'on souhaite, pourquoi pas sous forme de variables django {{ name.label }} comme ça se fait déjà ailleurs sur la plateforme.
Il faudrait pouvoir lister quelque part dans la cellule les données disponibles.

Niveau grille, je serais pour en proposer une nouvelle en flexbox (parce que compatible IE11 côté Front) et pas d'interaction avec l'existant en Float.
CSS grid est pas mal, mais je pense trop peu compatible avec notre scope de browser supportés coté front.

#2

Updated by Pierre Cros 3 months ago

Vue en réunion du lundi, on peut partir sur le mockup de Fred https://dev.entrouvert.org/attachments/51547 (qui peut être ignoré dans ses détails écrivait Fred) pour arriver à un truc simple.

On pourra envisager un truc plus complexe (éventuellement à base d'éditeur wysiwig) plus tard.

#3

Updated by Thomas Jund 3 months ago

Je complète.
La proposition de faire 1 champ = une cellule de grille me semblait trop contraignant et peut-être pas adapté aux cas d'usages les plus fréquents, surtout avec les problématiques de responsive.
Pour Pierre, le problème peut être levé en travaillant les contenus complexes, les textes complémentaires ou les agrégations de champs à travers la création de nouveaux champs, comme des champs commentaires, au sein du modèle de fiche.
Donc Banco.
(Perso, je ne trouve pas terrible d'utiliser/complexifier le modèle de fiche pour de l'éditorial).

#4

Updated by Thomas Jund 3 months ago

#5

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

Pour Pierre, le problème peut être levé en travaillant les contenus complexes, les textes complémentaires ou les agrégations de champs à travers la création de nouveaux champs, comme des champs commentaires, au sein du modèle de fiche.

Je ne pense pas, mon évolution prévue, c'était, dans le schéma, là où j'écrivais :

{"rows": [{"field": "name", "grow": "2"}, ...], [...

La possibilité d'avoir autre chose que "field": "name", genre,

{"rows": [{"title": "Bonjour", "grow": "2"}, ...], [...

Éléments pas liés aux données, totalement indépendants, gérés dans Combo.

#6

Updated by Thomas Jund 2 months ago

  • Status changed from Nouveau to En cours
#8

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

  • Related to Development #52498: cellule contenu d'une fiche, inclure dans l'HTML de l'édition des paramètres le schéma des données added
#9

Updated by Thomas Jund about 2 months ago

Travail en cours et premières réflexions :

Lien entre select "Modèle de Fiche" et "grille de personnalisation"

Une personnalisation est lié à un modèle de fiche. La cellule possède un select qui permet de sélectionner/modifier le modèle de fiche. Si changement du modèle de fiche alors qu'une personnalisation existe. Il n'y a plus de correspondance.
  • Lorsque l'utilisateur active l'option de personnalisation, faut-il verrouiller le modèle de fiche sélectionné ?
  • Lorsque l'utilisateur change de modèle de fiche, faut-il effacer toute personnalisation existante ?

Modification du modèle et personnalisation existante

Autre point de friction.
Je créé un Json de personnalisation à partir du schema provenant du modèle.

schéma du modèle :

{
  "name": "Lieu",
  "fields": [
    {
      "type": "string",
      "label": "Nom du lieu",
      "prefill": {
        "type": "none",
        "locked": false
      },
      "varname": "nom",
      "required": true,
      "anonymise": true
    },
    {

dans le schema ,Les fields non pas d'id non modifiable généré à la création du champ.

L'usager sélectionne le champ "Nom du lieu" pour le placer dans sa grille, il ajoute un objet au Json décrivant les cellules de la grille de personnalisation

{
  "class":"fx-grid--auto",
  "cells_order":[0,2,1],
  "cells":[
    {
      "label":"Nom du lieu",
      "class":"",
      "diplay":["key","value"],
      "id":0},…

Que se passe-t-il si un admin fonctionnel modifie le champ "Nom du Lieu" ? Il faudrait pouvoir répercuter ces modifs dans l'objet de la cellule. Mais je ne vois pas comment faire en l'état.

#10

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

Lorsque l'utilisateur active l'option de personnalisation, faut-il verrouiller le modèle de fiche sélectionné ?

Je dirais que oui. (mais ça me va d'ignorer ça pour le moment; en fait j'imagine qu'on pourrait avoir une popup lors de l'ajout d'une cellule de type fiche, dans la popup choisir le modèle, et que ça reste ensuite figé).

dans le schema ,Les fields non pas d'id non modifiable généré à la création du champ.

ok ça manque il faut ajouter ça il n'y a rien d'autre sur quoi tu pourrais te baser.

#11

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

dans le schema ,Les fields non pas d'id non modifiable généré à la création du champ.

ok ça manque il faut ajouter ça il n'y a rien d'autre sur quoi tu pourrais te baser.

En fait à rédiger un ticket en ce sens je me mets à hésiter, l'identifiant qui compte c'est vraiment celui qui est manuellement défini, c'est lui qu'on retrouvera dans l'API retournant les données.

Donc ça me semble normal d'en faire la référence, et si il est modifié en cours de route, c'est la même punition ici qu'ailleurs : la personne qui fait la modification doit s'assurer partout que ça continue à être ok (comme aujourd'hui il faut par exemple vérifier les conditions qui l'utiliseraient).

#12

Updated by Thomas Jund about 2 months ago

l'identifiant qui compte c'est vraiment celui qui est manuellement défini,

Ok donc seuls les champs avec un identifiant "varname" seront disponibles.
La relation se fait via cet identifiant. Si il change, ça casse (à voir si ensuite on met en place une vérif et une alerte).

#13

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

Ok donc seuls les champs avec un identifiant "varname" seront disponibles.

Oui les données des autres ne sont de toute façon pas reprises dans l'API retournant les données d'une fiche.

#14

Updated by Thomas Jund about 1 month ago

Première version alpha ?

Besoin de testeurs de l'IU pour des premiers retours

Pour tester :

  • combo: `git checkout wip/52073-card-cell`
  • publik-base-theme: `git checkout wip/52336-flex-grid`

Quelques remarques

  • J'ai bien galéré avec la function existante compute_max_height() qui gère le calcul de la taille des cell ouvertes; Pour le moment je l'ai déplacée pour la rendre globale et pouvoir l'utiliser dans mon script
  • J'ai également ajouté les events `cell:open` et `cell:close`

Ces 2 remarques seront des tickets séparés

  • J'ai encore des ajustements CSS à faire (pas de panique).
  • Pas mal de rangement dans mes methodes.
  • J'utilise jQueryUI modal et sortable.
  • Le code est dans combo.manager.js, mais je pense qu'il serait préférable de l'isoler.
  • Pour visualiser l'objet créé, à chaque changement, le json s'affiche dans la console du navigateur.

Il y aurait plein de trucs à dire, à vos questions…

#15

Updated by Thomas Jund about 1 month ago

branch rebase et patch

#16

Updated by Thomas Jund about 1 month ago

  • Related to Bug #53778: manager JS: scope global pour compute_max_height added
#17

Updated by Thomas Jund about 1 month ago

  • Related to Development #53780: manager JS: ajout des events cell:open & cell:close added
#18

Updated by Frédéric Péters about 1 month ago

J'imagine #52336 nécessaire (grid/flexbox) mais le ticket est rangé dans "Publik", me semble pour publik-base-theme, mais ici je suis dans la composition graphique dans le backoffice et donc ça devrait aussi être gadjo, tu pourrais produire des patchs/branches ? (dans "pour tester" tu écris publik-base-theme: `git checkout wip/52073-card-cell` mais cette branche n'existe pas là).

Une fois tapé n'importe comment dans mon gadjo local, ça me semble fonctionner mais il manque peut-être encore des styles ici (en pièce jointe ce que ça me donne); je pense particulièrement à la position des icônes de modification/suppression et au bouton "ajouter" qui se met dans la grille et change de taille selon l'ajout de champs.

Sur le fonctionnment, j'ai bien lu que c'était encore marqué TODO mais l'idée du "Personnaliser l'affichage", c'est de plier/déplier la section d'édition ?

Sur les tests, comme il n'y a pas d'enregistrement, on est d'accord qu'on ne peut rien voir en front ?

#19

Updated by Thomas Jund about 1 month ago

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

J'imagine #52336 nécessaire (grid/flexbox) … tu pourrais produire des patchs/branches ? (dans "pour tester" tu écris publik-base-theme: `git checkout wip/52073-card-cell` mais cette branche n'existe pas là).

Oui ce patch/branch est lié et necessaire. La branch existe (mauvais copier-coller) c'est wip/52336-flex-grid (je met à jour le message précedent)

mais le ticket est rangé dans "Publik", me semble pour publik-base-theme, mais ici je suis dans la composition graphique dans le backoffice et donc ça devrait aussi être gadjo.

Comme ça concerne à la fois publik-base-theme et gadjo, je l'ai posé dans "Publik". Mais je peux le déplacer si ça te semble illogique

en pièce jointe ce que ça me donne;

Ça correspond à l'état actuel

je pense particulièrement à la position des icônes de modification/suppression

tu les verrais plutôt sur la gauche ?

et au bouton "ajouter" qui se met dans la grille et change de taille selon l'ajout de champs.

il prend la place de la cellule à ajouter. Dans ta capture le bouton prend toute la largeur parce qu'une nouvelle cellule en "auto" prendra cette taille.

Sur le fonctionnment, j'ai bien lu que c'était encore marqué TODO mais l'idée du "Personnaliser l'affichage", c'est de plier/déplier la section d'édition ?

Oui, mais pas que, je pensais aussi lancer le JS en fonction de l'état de ce bouton.
Je ne sais pas si ce checkbox doit être dans la définition du formulaire en python ou ajouter dans le template html. Mais je te laisserais modifier.

Sur les tests, comme il n'y a pas d'enregistrement, on est d'accord qu'on ne peut rien voir en front ?

Exact

J'aimerais bien aussi ton retour/avis sur

  • Les options de mise en forme des champs de la fiche. Pour le moment j'a mis "label + Valeur" et "Valeur uniquement". Sur ton mockup tu proposais "Titre" aussi : ton idée était de pouvroi afficher la valeur sous forme de titre ?
  • La structure du JSON de la personnalisation.
  • Le fait que si une personnalisation existe, la cellule retourne le JSON de personnalisation et JS construit l'UI.
  • Le fait d'avoir posé les templates nécessaires à l'UI de customisation dans le fichier html au sein de balises <script type="text/template" />
#20

Updated by Frédéric Péters about 1 month ago

Comme ça concerne à la fois publik-base-theme et gadjo, je l'ai posé dans "Publik". Mais je peux le déplacer si ça te semble illogique

Oui plutôt avoir des tickets dans les projets techniques réels, perso je ne regarde jamais s'il y a des patchs en attente dans le projet Publik.

Je ne sais pas si ce checkbox doit être dans la définition du formulaire en python ou ajouter dans le template html. Mais je te laisserais modifier.

Je dirais que ça doit être dans la définition du formulaire, pour permettre de désactiver/réactiver, sans perdre.

je pense particulièrement à la position des icônes de modification/suppression

tu les verrais plutôt sur la gauche ?

Peut-être un bouton explicitement sous forme de bouton avec du texte genre "paramétrage" pour le bouton "modifier" actuel et le bouton de suppression aligné sur la droite (voire en haut à droite même si je crains la confusion avec une "fermeture" qui ne serait pas destructive.

il prend la place de la cellule à ajouter. Dans ta capture le bouton prend toute la largeur parce qu'une nouvelle cellule en "auto" prendra cette taille.

Ok ça m'a semblé bizarre; je pense que j'aurais été plus à l'aise avec un bouton toujours placé pareil dessous.

La structure du JSON de la personnalisation.

Elle part un peu bizarre quand on supprime des éléments :

{"grid_class": "fx-grid--auto",
 "grid_layout_label": "auto",
 "cells_order": [3, 4, 5],
 "cells": [
   null,
   null,
   null,
  {"varname":"nom","cell_size":"","display":["key","value"],"cell_size_label":"auto","id":3},
  {"varname":"nom","cell_size":"","display":["key","value"],"cell_size_label":"auto","id":4},
  {"varname":"nom","cell_size":"","display":["key","value"],"cell_size_label":"auto","id":5},
  null,
  null
 ]
}

je pense que ce qui est supprimé doit être supprimé (plutôt qu'avoir null), et je serais plutôt pour avoir la liste maintenue dans l'ordre attendu plutôt qu'une deuxième liste (cells_order) pour en donner l'ordre.

Le fait que si une personnalisation existe, la cellule retourne le JSON de personnalisation et JS construit l'UI.

#21

Updated by Frédéric Péters about 1 month ago

(validé trop vite je continue)

Le fait que si une personnalisation existe, la cellule retourne le JSON de personnalisation et JS construit l'UI.

Je ne comprends pas la question.

Les options de mise en forme des champs de la fiche. Pour le moment j'a mis "label + Valeur" et "Valeur uniquement". Sur ton mockup tu proposais "Titre" aussi : ton idée était de pouvroi afficher la valeur sous forme de titre ?

Oui, par exemple pour une fiche parking on aurait "nom du parking sous forme de titre" puis "adresse (valeur)" puis "nombre de places (libellé et valeur)"

Le fait d'avoir posé les templates nécessaires à l'UI de customisation dans le fichier html au sein de balises <script type="text/template" />

Je me suis dit que c'était pratique pour y intégrer les traductions.

#22

Updated by Thomas Jund about 1 month ago

Modifications :

Peut-être un bouton explicitement sous forme de bouton avec du texte genre "paramétrage" pour le bouton "modifier" actuel et le bouton de suppression aligné sur la droite (voire en haut à droite même si je crains la confusion avec une "fermeture" qui ne serait pas destructive.

Utilisation des labels "Modifier" et "supprimer", "supprimer" ferré à gauche.

Ok ça m'a semblé bizarre; je pense que j'aurais été plus à l'aise avec un bouton toujours placé pareil dessous.

Done

je pense que ce qui est supprimé doit être supprimé (plutôt qu'avoir null), et je serais plutôt pour avoir la liste maintenue dans l'ordre attendu plutôt qu'une deuxième liste (cells_order) pour en donner l'ordre.

Done

Oui, par exemple pour une fiche parking on aurait "nom du parking sous forme de titre"

Ok, j'ai ajouté l'entrée "titre". Il faut peut-être revoir les labels d'affichage.

====

Le fait que si une personnalisation existe, la cellule retourne le JSON de personnalisation et JS construit l'UI.

Je ne comprends pas la question.

Voir dans card_infos-cell-forms.html le commentaire {# Si une personnalisation existe déjà, simplement retourner le Json dans la cellule #}

#23

Updated by Frédéric Péters about 1 month ago

Le fait que si une personnalisation existe, la cellule retourne le JSON de personnalisation et JS construit l'UI.

Je ne comprends pas la question.

Voir dans card_infos-cell-forms.html le commentaire {# Si une personnalisation existe déjà, simplement retourner le Json dans la cellule #}

J'ai encore du mal, je tente : la question serait « une fois que les données seront enregistrées, elles seront présentes dans une variable qui pourra être mise dans le gabarit, histoire de ne pas repartir de zéro à chaque fois ? » ce qui n'aurait pas de sens, finalement non vraiment je ne ne vois pas quelle est la question.

#24

Updated by Thomas Jund 30 days ago

Question envoie des données au serveur.

Est-ce qu'on ajoute un textarea hidden au formulaire pour y stocker le dictionnaire de personnalisation ? Cela permetterait de conserver le fonctionnement du bouton enregistrer.
Ou on envoie les datas au serveur par ajax ?

#25

Updated by Frédéric Péters 30 days ago

Est-ce qu'on ajoute un textarea hidden

Ce qui va se passer c'est qu'il y aura un champ en plus dans le modèle de données et dans le rendu du formulaire ça fera selon toute vraisemblance un <input type=hidden, et donc oui toute la mécanique d'enregistrement etc. actuelle est conservée.

#26

Updated by Thomas Jund 24 days ago

  • Related to Development #54259: cellule fiche: ajouter checkbox "personnaliser" et input (hidden] added
#27

Updated by Thomas Jund 15 days ago

  • Status changed from Solution proposée to En cours

J'ai pluggé le JS sur le nouveau formulaire. Branch à jour.

Pour tester :

combo: `git checkout wip/52073-card-cell`
gadjo: `git checkout wip/54488-flexbox-grid`

Il me reste 2 petits soucis à régler :
https://dev.entrouvert.org/issues/54259#note-4
https://dev.entrouvert.org/issues/54259#note-5

#28

Updated by Thomas Jund 15 days ago

  • Related to deleted (Development #54259: cellule fiche: ajouter checkbox "personnaliser" et input (hidden])
#29

Updated by Thomas Jund 15 days ago

  • Blocked by Development #54259: cellule fiche: ajouter checkbox "personnaliser" et input (hidden] added
#31

Updated by Thomas Jund 14 days ago

Patch dispo pour relecture

#32

Updated by Thomas Jund 14 days ago

  • Blocked by deleted (Development #54259: cellule fiche: ajouter checkbox "personnaliser" et input (hidden])
#33

Updated by Thomas Jund 14 days ago

  • Related to Development #54259: cellule fiche: ajouter checkbox "personnaliser" et input (hidden] added
#34

Updated by Frédéric Péters 3 days ago

+{# Grille de personalisation #}
...
+    <a role="button" class="wcs-cards-cell--grid-layout-btn">
+      Modifier

Il faudrait écrire en anglais et utiliser la mécanique de traduction; il faut ajouter en haut de fichier (après l'extends) {% load i18n %} puis pour le texte qui doit apparaitre traduit passer par le tag trans, ex:

{% trans "Edit" %}

Il y a une infra également pour avoir des traductions côté js mais c'est aussi tout à fait possible de poser simplement les chaines attendues depuis le gabarit, puis les exploiter dans le .js, par ex:

dans l'html,
<script>
window.combo_i18n = Object();  //
window.combo_i18n.cancel = "{% trans 'Cancel' %}";
</script>

dans le js,
+      buttons: [
+        {
+          text: window.combo_i18n.cancel,
#35

Updated by Thomas Jund 2 days ago

Il faudrait écrire en anglais et utiliser la mécanique de traduction

OK, je vais essayer


Voici le patch qui met permet d'afficher le résultat coté Front. Avis bienvenue car je trouve qu'il y a beaucoup d'imbrications et de redondance

Notemment la redondance de

                  {% if field.type == "date" %}
                    {{ value|date }}
                  {% elif field.type == "bool" and value is not None %}
                    {{ value|yesno }}
                  {% else %}
                    {{ value|default:"" }}
                  {% endif %}

Laureline me conseille de faire un include.  Ça te parait bien Fred ?

Je vais rebaser tout ça (suite à une modif de Laureline côté form) et pousser

#36

Updated by Thomas Jund 1 day ago

  • Related to Bug #54911: suppresion balise sur selecteur .label added

Also available in: Atom PDF