PnX-SI / GeoNature-citizen

Portail web d'inventaire citoyen de la biodiversité à destination du grand public
https://pnx-si.github.io/GeoNature-citizen/
GNU Affero General Public License v3.0
20 stars 29 forks source link

Question sur le schema json : condition entre les champs + gestion des champs de type array #373

Closed mtaqarort closed 10 months ago

mtaqarort commented 10 months ago

Bonjour,

ARB Îdf travaille sur la mise en place des enquêtes via Gn_Citizen. Nous avons examiné les exemples https://hamidihamza.com/ajsf/ pour configurer les formulaires, mais nous rencontrons quelques problèmes.

Pour l'enquête sur l'écrasement des amphibiens sur les routes, nous utilisons ce schéma :

{
  "schema": {
    "type": "object",
    "properties": {
      "troncon": {
        "type": "string",
        "enum": [
          "<100m",
          "101 \u00e0 200m",
          "201 \u00e0 500m",
          "500 \u00e0 1000 m",
          ">1000m",
          "Autre"
        ]
      },
      "troncon_exact": {
        "type": "integer",
        "minimum": 0,
        "options": {
          "hidden": true
        }
      },
      "crapauds_vivants": {
        "type": "string",
        "enum": [
          "0",
          "<5",
          "6 \u00e0 20",
          "21 \u00e0 50",
          "51 \u00e0 100",
          ">100",
          "Nombre exact"
        ]
      },
      "crapauds_vivants_exact": {
        "type": "integer",
        "minimum": 0
      },
      "crapauds_morts": {
        "type": "string",
        "enum": [
          "0",
          "<5",
          "6 \u00e0 20",
          "21 \u00e0 50",
          "51 \u00e0 100",
          ">100",
          "Nombre exact"
        ]
      },
      "crapauds_morts_exact": {
        "type": "integer",
        "minimum": 0
      },
      "tritons_vivants": {
        "type": "string",
        "enum": [
          "0",
          "<5",
          "6 \u00e0 20",
          "21 \u00e0 50",
          "51 \u00e0 100",
          ">100",
          "Nombre exact"
        ]
      },
      "tritons_vivants_exact": {
        "type": "integer",
        "minimum": 0
      },
      "tritons_morts": {
        "type": "string",
        "enum": [
          "0",
          "<5",
          "6 \u00e0 20",
          "21 \u00e0 50",
          "51 \u00e0 100",
          ">100",
          "Nombre exact"
        ]
      },
      "tritons_morts_exact": {
        "type": "integer",
        "minimum": 0
      },
      "Commentaire": {
        "type": "string"
      },
      "esp_detail": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "esp": {
              "type": "string",
              "enum": [
                "Crapaud commun",
                "Grenouille rousse",
                "Grenouille agile",
                "Grenouille verte",
                "Salamandre tachet\u00e9e",
                "Triton palm\u00e9",
                "Triton ponctu\u00e9",
                "Crapaud calamite",
                "Alyte accoucheur",
                "P\u00e9lodyte ponctu\u00e9",
                "Rainette verte",
                "Sonneur \u00e0 ventre jaune",
                "Triton alpestre",
                "Triton cr\u00eat\u00e9",
                "Triton marbr\u00e9"
              ]
            },
            "nbr_vivants": {
              "type": "integer",
              "minimum": 0
            },
            "nbr_morts": {
              "type": "integer",
              "minimum": 0
            }
          }
        }
      }
    }
  },
  "layout": [
    {
      "type": "flex",
      "flex-flow": "row wrap",
      "items": [
        {
          "key": "troncon",
          "title": "Taille du tron\u00e7on routier"
        },
        {
          "key": "troncon_exact",
          "title": "Valeur exact en m"
        }
      ]
    },
    {
      "type": "flex",
      "title": "Grenouilles/Crapauds",
      "flex-flow": "row wrap",
      "items": [
        {
          "key": "crapauds_vivants",
          "title": "Effectifs des vivants"
        },
        {
          "key": "crapauds_vivants_exact",
          "title": "Effectif exact"
        },
        {
          "key": "crapauds_morts",
          "title": "Effectifs des morts"
        },
        {
          "key": "crapauds_morts_exact",
          "title": "Effectif exact"
        }
      ]
    },
    {
      "type": "flex",
      "title": "Salamandres/Tritons",
      "flex-flow": "row wrap",
      "items": [
        {
          "key": "tritons_vivants",
          "title": "Effectifs des vivants"
        },
        {
          "key": "tritons_vivants_exact",
          "title": "Effectif exact"
        },
        {
          "key": "tritons_morts",
          "title": "Effectifs des morts"
        },
        {
          "key": "tritons_morts_exact",
          "title": "Effectif exact"
        }
      ]
    },
    {
      "key": "esp_detail",
      "title": "Ajouter une esp\u00e8ce",
      "notitle": true,
      "type": "array",
      "listItems": 1,
      "items": [
        {
          "type": "div",
          "title": "",
          "displayFlex": true,
          "flex-direction": "row",
          "items": [
            {
              "key": "esp_detail[].esp",
              "flex": "4 4 120px",
              "notitle": true,
              "placeholder": "Esp\u00e8ce"
            },
            {
              "key": "esp_detail[].nbr_vivants",
              "flex": "1 1 100px",
              "notitle": true,
              "placeholder": "Effectif des vivants"
            },
            {
              "key": "esp_detail[].nbr_morts",
              "flex": "1 1 100px",
              "notitle": true,
              "placeholder": "Effectif des morts"
            }
          ]
        }
      ],
      "listAdd": {
        "title": "Ajouter une esp\u00e8ce",
        "htmlClass": "custom-add-button"
      }
    },
    {
      "type": "section",
      "title": "Commentaire",
      "expandable": true,
      "expanded": true,
      "items": [
        {
          "key": "Commentaire",
          "type": "textarea",
          "notitle": true
        }
      ]
    }
  ]
}

1- Comment masquer un champ et l'afficher en fonction de la valeur sélectionnée dans une liste déroulante ? Par exemple, afficher le champ "troncon_exact" si la valeur du champ "troncon" ='Autre'.

"layout": [
    { 
{
    "key": "troncon_exact",
    "type": "integer",
    "condition": "model.troncon === 'Autre'",
    "hidden": true
}
...

ou

"if": {
    "properties": { "troncon": { "const": "Autre" } }
},
"then": {
    "properties": { "troncon_exact": { "options": { "hidden": false } } }
}

2- Pour le champ "esp_detail" de type Array avec 3 champs : "esp" (liste), "nbr_vivants" (integer), "nbr_morts" (integer), les valeurs ne sont pas bien affichées dans le détail de la visite. Il est affiché : [object Object]. Les valeurs sont correctement enregistrées dans la base de données.

Merci

lpofredc commented 10 months ago

Bonjour @mtaqarort,

Concernant l'affichage des champs, en effet, cela semble bien fonctionner avec les booléens mais moins avec les chaîne de caractère, la version du module contient pourtant un fix (https://github.com/hamzahamidi/ajsf/pull/100) pour ce pb (. Un contournement possible et l'écriture de la condition comme suit:

...,
{"layout": 
[
  { 
    "type": "flex",
    "flex-flow": "row wrap",
    "items": [
        { 
            "key": "troncon",
            "title":"Taille du tronçon routier" 
        },
        { 
            "key": "troncon_exact",
            "title":"Valeur exact en m" , 
            "condition": { "functionBody": "return model.troncon == 'Autre'" }
        }
    ]
}
...
]
}

Concernant l'affichage détaillé, il reste en effet des développements à prévoir pour une meilleure gestion des données imbriquées. cf. https://github.com/PnX-SI/GeoNature-citizen/issues/254

mtaqarort commented 10 months ago

Merci @lpofredc pour ton retour rapide, effectivement la fonction "functionBody": a réglé le problème

c'est bien noté pour les champs imbriqués, on regarde de notre coté,

enncore merci