Création d'un MapStore

vbombaerts commented 2 years ago

L'idée est de présenter le catalogue des applications sous forme de "MapStore".

Les applications sont présentées sous forme de cartes avec :

Titre - resourceTitleObject
Visuel - overview
Accroche - resourceHookAbstractObject
Propriétaire (ou gestionnaire ?) - ownerOrgForResource
Icône qui indique si l'application est sécurisée ou d'accès libre cl_accessConstraints.key = restricted
2 boutons :
- "Plus d'infos" : pour le moment, descriptif complet en fenêtre modale. A terme, éventuellement un lien vers la fiche géoportail "complète"
- Consulter : lien vers l'application - mw-gp-thematicMap.url

Derrière le visuel, on a aussi le lien vers l'application.

Fonctionnalités :

Filtre thématique
Filtre full text

Dans un deuxième temps, on intègre les avis et évaluations (notation sur la carte et avis dans fiche complète)

Démonstrateur

https://geoportail.test.wallonie.be/home/produire-et-publier/mw---test-agf-web-component/test-webcomponents-vincent-Mapstore.html

Code

<p>&nbsp;</p>
<link rel="stylesheet" href="https://metawal4.test.wallonie.be/geonetwork/catalog/lib/icho/styles.css"> 
<link rel="stylesheet" href="https://metawal4.test.wallonie.be/geonetwork/catalog/lib/icho/main.css"> 
<div style="margin: 2.5em">
<catalogue-results-card 
catalogueurl="https://metawal4.test.wallonie.be/geonetwork/srv" 
fields='{
"imageIndex": "overview", "imageJsonPath":"$[0].url", 
"titleIndex": "resourceTitleObject", "titleJsonPath":"$.default", "titleSize":"h4", 
"subTitleIndex": "ownerOrgForResource", "subTitleJsonPath":"", 
"textIndex": "resourceHookAbstractObject", "textJsonPath":"$.default",
"linkIndex": "mw-gp-thematicMap", "linkJsonPath":"$[0].url", "linkIcon":"map", "linkButtonColor":"#0676C5", "linkHook":"Découvrir",
"additionalInfoIndex":"cl_accessConstraints", "additionalInfoJsonPath":"$[0].key"
}' 
filter="+(resourceType:application) -(th_infraSIG.default:Reporting_INSPIRE) -(cl_status.key:obsolete)" 
fulltextfilter="resourceTitleObject.default,` resourceHookAbstractObject.default"
search_placeholder="Recherche libre"
filterfield_2="th_Themes_geoportail_wallon_hierarchy.default"
filterfield_2_placeholder="Thème"
filterfield="ownerOrgForResource"
filterfield_placeholder="Propriétaire" 
linkmdt="false"
imageheight="220" 
itemsperrow="4" size="12" marginx="2" margintoolsbottom="1" marginbottom="2" 
sorttype="asc" sortby="resourceTitleObject.default.keyword"
sortbylist='{"sortIndexRef":"resourceTitleObject.default.keyword", "sortName":"Titre"} | {"sortIndexRef":"popularity", "sortName":"Popularité"}'
> </catalogue-results-card></div>
<script src="https://metawal4.test.wallonie.be/geonetwork/catalog/lib/icho/runtime.esm.js"  type="module"></script><script src="https://metawal4.test.wallonie.be/geonetwork/catalog/lib/icho/polyfills.esm.js" type="module"></script><script src="https://metawal4.test.wallonie.be/geonetwork/catalog/lib/icho/main.esm.js" type="module"></script>

fxprunayre commented 2 years ago

Exemple avec un GN standard https://www.aquacoope.org/cat_eecca/

vbombaerts commented 2 years ago

Oups, détail important : en intégration sur une page du géoportail.

davinciagf commented 2 years ago

Voici un example de web component déjà existant; (base similaire au tableau) à adapter suite aux requirements et au look & feel a adopter:

 <catalogue-results-card
      filter=""
      size="5"
      fields='resourceTitleObject,overview,custodianOrgForResource, resourceHookAbstractObject, revisionDateForResource, link'
      catalogueurl="https://metawal4.test.wallonie.be/geonetwork/srv">
</catalogue-results-card>

A discuter...

vbombaerts commented 2 years ago

Pour le moment ne fonctionne pas

davinciagf commented 2 years ago

Ne build n'était pas passé : https://apps.titellus.net/hub/webcomponents/

davinciagf commented 2 years ago

@vbombaerts , attention ne pas oublier de référencer le portal dans le champs catalogueurl (@davinciagf à compléter dans la doc) - il est sans doute nécessaire de mettre à jour les différentes config des tests pour ce paramètre

vbombaerts commented 2 years ago

J'ai indiqué le portal mais ça ne change rien.

davinciagf commented 2 years ago

Vide la cache

    <catalogue-results-card 
    catalogueurl="https://metawal4.test.wallonie.be/geonetwork/srv"
    fields="resourceTitleObject,overview,resourceHookAbstractObject,link" 
    filter="+(resourceType:application) -(th_infraSIG.default:Reporting_INSPIRE) -(cl_status.key:obsolete) +(custodianOrgForResource:*SPW*)" 
    size="5"> </catalogue-results-card></div>

vbombaerts commented 2 years ago

Retours des collègues suite à la première version :

[x] Aérer les cartes (plus d'espace entre les cartes, moins de cartes par ligne)

Possibilité de définir le nombre de cartes par ligne via le paramètre itemsperrow

 itemsperrow="3"

[x] Ne pas indiquer la date de mise à jour

Ne pas compléter les paramètres liés à la zone info (infoIndex et infoJsonPath)

[x] Accéder à l'application en cliquant sur le visuel ou via un Call to action mieux identifié

Possibilité de configurer le bouton vers le lien souhaité (dépendance vis-à-vis de linkInddex) :

couleur via le paramètre linkButtonColor
text via le paramètre linkHook
icon via le paramètre linkIcon

fields='{"imageIndex": "overview", "imageJsonPath":"$[0].url", "titleIndex": "resourceTitleObject", "titleJsonPath":"$.default", "titleSize":"h4", "subTitleIndex": "custodianOrgForResource", "subTitleJsonPath":"", "textIndex": "resourceHookAbstractObject", "textJsonPath":"$.default","linkIndex": "mw-gp-thematicMap", "linkJsonPath":"$[0].url", "linkIcon":"map", "linkButtonColor":"green", "linkHook":"Découvrir", "infoIndex": "revisionDateForResource","infoJsonPath":"$[0]"}'

Le set de couleurs est actuellement limité à

[x] Résoudre le provlème des fichiers icones.

Besoin de modifier le nom des fichiers styles pour éviter l'id du build. Pour l'instant, il faut utiliser les références suivantes:

<link rel="stylesheet" href="https://apps.titellus.net/hub/webcomponents/styles.ef53c8a098d2c6ec.css"> 
<link rel="stylesheet" href="https://apps.titellus.net/hub/webcomponents/main.5210541a9d9540bc.css">

[x] Lien "Plus d'info" vers une fiche géoportail avec des captures d'écran, explications détaillées, infos techniques, évaluation

[x] Ajouter la possibilité de choisir la méthode de tri des résultats (alphabétique, popularité, à terme évaluation)

Via les paramètres suivants:

      sorttype="asc"
      sortby="custodianOrgForResource"

[x] Ajouter "Focus on" avec Thèmes du GP

Via le paramètre suivant:

      filterfield="th_Themes_geoportail_wallon_hierarchy.default"

[x] Ajouter le nom du propriétaire

Via le paramètre suivant:

      fields='{"image": "overview", "imageJsonPath":"$[0].url", "title": "resourceTitleObject", "titleJsonPath":"$.default", "subTitle": "custodianOrgForResource", "subTitleJsonPath":"", "text": "resourceHookAbstractObject", "textJsonPath":"$.default","link": "mw-gp-thematicMap", "linkJsonPath":"$[0].url","info": "revisionDateForResource","infoJsonPath":"$[0]"}'

Selon la zone du template : example via subTitle

[x] Diminuer la taille du nom du titre

Possibilité de configurer la taille du titre via le paramètre titleSize (h1, h2,h3,h4)

vbombaerts commented 2 years ago

Ca commence a être très sympa ! 👍

Quelques remarques :

[x] Aérer les cartes (plus d'espace entre les cartes, moins de cartes par ligne)

Possibilité de définir le nombre de cartes par ligne via le paramètre itemsperrow
 itemsperrow="3"

Du coup les cartes sont plus grandes, mais pas nécessairement plus aérées...

Ajouter la possibilité de choisir la méthode de tri des résultats (alphabétique, popularité, à terme évaluation) Via les paramètres suivants:
 sorttype="asc"
 sortby="custodianOrgForResource"

L'idée est d'avoir une dropdown pour pouvoir choisir la méthode de tri parmi (nom de l'application, gestionnaire de l'application, popularité, évaluation)

vbombaerts commented 2 years ago

Autres demandes :

tu penses qu'on pourrait avoir 2 filter fields ? (thèmes GP + owner)
Est-il possible d'ajouter une zone de recherche libre ?

vbombaerts commented 2 years ago

Si on veut monter en prod dans l'état actuel, j'imagine que les bibliothèques css et js doivent être placées qqpart dans Metawal plutôt que sur apps.titellus.net C'est faisable ?

davinciagf commented 2 years ago

TODO:

[ ] Migration des fichiers vers MW
[x] ajout d'une zone de recherche

Ajout du paramètre (besoin de type text, pas keyword) :

fulltextfilter="resourceTitleObject.default,` resourceHookAbstractObject.default"

[x] test pour un double filtre

Ajout du paramètre :

filterfield_2="custodianOrgForResource"

[x] ajout d'un dropdow pour classification

Ajout du paramètre :

sortbylist='{"sortIndexRef":"resourceTitleObject.default.keyword", "sortName":"Titre"} | {"sortIndexRef":"popularity", "sortName":"Popularité"} | {"sortIndexRef":"resourceHookAbstractObject.default.keyword", "sortName":"Résumé"}'

[x] Pour l'aération (en x)

Ajout du paramètre (en 'em' :

marginx="8"

vbombaerts commented 2 years ago

@davinciagf si en plus tu pouvais me trouver le paramètre pour espacer les filtres de la liste de résultats ce serait le top du top ;-)

davinciagf commented 2 years ago

@vbombaerts Ajout du paramètre (en 'em') :

margintoolsbottom="2"

vbombaerts commented 2 years ago

Demandes supplémentaires en vue de l'intégration dans le GP. Elles portent essentiellement sur l'harmonisation des aspects visuels. (avec d'abord un grand enthousiasme par rapport au travail déjà réalisé)

[x] Est-il possible de fixer la hauteur de la ligne de titre dans la carte. Même si on va travailler par ailleurs sur l'harmonisation des visuels, le but est d'éviter l'effet "escalier" si les imagettes n'ont pas la même taille.

Possibilité de paramétrer la taille des images (px) via le paramètre imageheight

imageheight="280"

[x] Modification de la couleur des boutons - code #0676C5 (pour le moment j'ai mis blue, qui s'en approche le plus) - code exact à fournir par l'équipe géoportail

Utilisation des codes couleurs hex, ne plus utiliser le listing de couleurs précédemment référencé

fields='{"imageIndex": "overview", "imageJsonPath":"$[0].url", "titleIndex": "resourceTitleObject", "titleJsonPath":"$.default", "titleSize":"h4", "subTitleIndex": "custodianOrgForResource", "subTitleJsonPath":"", "textIndex": "resourceHookAbstractObject", "textJsonPath":"$.default","linkIndex": "mw-gp-thematicMap", "linkJsonPath":"$[0].url", "linkIcon":"map", "linkButtonColor":"#335500", "linkHook":"Découvrir", "infoIndex":"revisionDateForResource", "infoJsonPath":"$[0]", "additionalInfoIndex":"cl_accessConstraints", "additionalInfoJsonPath":"$[0].key"}'

[x] Ouvrir les liens dans des nouveaux onglets, pas dans le même (pour le bouton "Découvrir")
[x] Marge entre les cartes et la pagination

Paramétrable via le paramètre marginbottom

marginbottom="1"

[x] Ne pas afficher "29 results found in 5 ms"
[x] Coquille au chargement des résultats : Loadding, un d en trop.
[x] Suite à une discussion sur l'utilité ou non d'exposer la fiche : retirer le lien "plus d'info"

Paramétrable via le paramètre linkmdt

linkmdt="false"

[x] Ajout d'un visuel (petit cadenas) pour différencier les applications sécurisées (à accès restreint) - basé sur la valeur d'index cl_accessConstraints.key = restricted - voir en haut à droite de la fiche https://geoportail.wallonie.be/catalogue/e6df1e1d-e3a4-4cff-b8b7-ebc0838ee234.html

Inclure les paramètres additionalInfoIndex et additionalInfoJsonPath (@vbombaerts à discuter, autres éléments de config? comme pour le linkIcon)

fields='{"imageIndex": "overview", "imageJsonPath":"$[0].url", "titleIndex": "resourceTitleObject", "titleJsonPath":"$.default", "titleSize":"h4", "subTitleIndex": "custodianOrgForResource", "subTitleJsonPath":"", "textIndex": "resourceHookAbstractObject", "textJsonPath":"$.default","linkIndex": "mw-gp-thematicMap", "linkJsonPath":"$[0].url", "linkIcon":"map", "linkButtonColor":"#335500", "linkHook":"Découvrir", "infoIndex":"revisionDateForResource", "infoJsonPath":"$[0]", "additionalInfoIndex":"cl_accessConstraints", "additionalInfoJsonPath":"$[0].key"}'

[x] Zone filtres - les deux boites aux extrémités sont trop proches des bords du navigateur. Parfois il n'est pas possible d'accéder à celle de droite
[x] Zones filtres - remplacer "Focus on" par "Thème" et "Propriétaire" / Remplacer "Search..." par "Recherche libre"

Paramétrable via le paramètres linkmdt

search_placeholder="Recherche libre"
filterfield_placeholder="Thème"
filterfield_2_placeholder="Propriétaire"

[x] Zones filtres - Supprimer les séparateurs | entre les boîtes

davinciagf commented 2 years ago

Harmonisation des filtre par rapport au card

vbombaerts commented 2 years ago

Harmonisation des filtre par rapport au card

Ne fonctionne pas chez moi, même après vidage du cache

vbombaerts commented 2 years ago

Ne fonctionne pas chez moi, même après vidage du cache

Toujours pas aligné

vbombaerts commented 2 years ago

Derrière le visuel, on a aussi le lien vers l'application.

Je ressors cette demande du ticket initial. Est-ce possible d'avoir le lien vers l'appli aussi derrière l'illustration ? eg qd l'utilisateur clique sur l'illustration un nouvel onglet ouvre l'appli.

davinciagf commented 2 years ago

Fonctionnalité ajouter si le pramètre linkIndex est défini et est disponible pour la mtd. Intégration au niveau de l'env de test (redéploiement en cours).

vbombaerts commented 2 years ago

Et pour l'alignement des filtres, il y a qqch de spécial à faire ?

davinciagf commented 2 years ago

Il y un couac qq part dans l'intégration avec jahia car je ne reproduis pas sur une page html classique. J'ai réalisé une modif mais je dois redéployer pour tester dans jahia.

davinciagf commented 2 years ago

Cela semble ok pour l'aligenement :

vbombaerts commented 2 years ago

Pour l'alignement tenir compte des marges entre les cartes. Certaines combinaisons permettent l'alignement, d'autres pas.

vbombaerts commented 2 years ago

Réouverture pour 2 demandes supplémentaires suite à implémentation réelle dans le géoportail :

[ ] La pagination s'affiche actuellement en anglais (Prev / Next), est-il possible de l'avoir en français ?
[ ] Peut-on ajuster la marge entre les lignes de cartes ?

davinciagf commented 2 years ago

Proposition pour la pagination :

vbombaerts commented 2 years ago

Garder le même qu'actuellement juste en traduisant ce n'est pas possible ?

vbombaerts commented 2 years ago

Suite dans #743

SPW-DIG / metawal-core-geonetwork

Création d'un MapStore #715

Démonstrateur

Code