Mise en place des favoris

[lowzonenose]

Les favoris

ℹ️ Pour la recette des favoris, il faut ajouter un env local !

Ex. fichier .env.stage.local

VITE_GPF_CONF_TECH_URL="https://data.geopf.fr/annexes/cartes.gouv.fr-config/public/layers.json"
VITE_GPF_CONF_EDITO_URL="https://data.geopf.fr/annexes/cartes.gouv.fr-config/public/edito.json"
VITE_GPF_BASE_URL_EXTERNAL="http://localhost:9092" # cartes.gouv.fr installé via docker

# Systeme de mocks
VITE_HTTP_MOCK_REQUEST=1
VITE_HTTP_MOCK_REQUEST_SCENARIO="success_data" # success_nodata|success_data|error

# URL de l'API Entrepot (possible de la proxifier via cartes.gouv.fr)
VITE_API_URL="https://data.geopf.fr/api"

IAM_DISABLE=0 # désactive l’authentification donc l'interface des favoris !
IAM_URL="https://sso.geopf.fr"
IAM_REALM="geoplateforme"
IAM_CLIENT_ID="cartes-gouv-fr-carto"
IAM_CLIENT_SECRET="GLGe8lcjSj7OytvAeHXABrZRFjbu31ny"
# Mode auth local ou remote (distant)
#   la redirection est vide en mode auth local,
#   sinon en mode auth distant, on doit renseigner l'URL
#   par ex. https://cartes.gouv.fr/login/entree-carto
IAM_AUTH_MODE="local" # local|remote
IAM_REDIRECT_REMOTE="http://localhost:9092/login/entree-carto"
IAM_CLIENT_ID_REMOTE=
IAM_CLIENT_SECRET_REMOTE=

BASE_URL="/cartes.gouv.fr-entree-carto"

• Exécution

$ npm run dev -- --mode stage

• En mode mock
  Il existe plusieurs scénarios : success_nodata | success_data| error

VITE_HTTP_MOCK_REQUEST=1
VITE_HTTP_MOCK_REQUEST_SCENARIO="success_data"

⚠️ A chaque changement de scénario, il faut se reconnecter à son espace personnel !

mode non connecté

• fait
  

redirection vers la page de connexion

mode connecté

• fait
  

l'entrée du menu 'Mes enregistrements' est activée

no data

• fait
  

l'entrée du menu 'Mes enregistrements' est activée, mais pas de données à afficher

menu des favoris

• fait
  

Liste des labels de l'API Entrepôt

• cartes.gouv.fr
• internal ou external
• geojson, gpx, kml, mapbox, wms, wmts, ...
• drawing pour les croquis,
• compute pour les anciens geojson external

menu et lecture des documents

• API Entrepôt de documents :
  • lister les documents
  • télécharger les fichiers
• Lister des documents : vide !
• Lister des documents par rubrique :
  • cartes
  • données (import, croquis, compute et service)
• Cliquer sur un document : ajout sur la carte
  • croquis
  • import vecteur
  • compute
  • service
  • carte
    • BUG ordre des couches sur la lecture du permalien !
• Ajouter les boutons
  • Enregistrer une carte
  • Ajouter un fichier
• Recherche de documents
• ⚠️ RECETTE !

enregistrement et modifications des documents

workflow pour un croquis (creation)

1. (ext) action click bouton sauvegarde sur de l'outil de dessin
2. (ext) dispatch (emit) un event : ex. drawing:saved avec le layer en param
3. (vue) abonnement sur l'event de la classe Drawing : onSaveDrawing()
4. (vue) liste des actions du gestionnaire d'evénement :

• test si authentifié !
• Export : appel d'un getFeatures sur le layer au format KML
• API Entrepôt : POST /documents pour enregistrer l'export sur l'espace personnel
  • Enregistrement auto dans le localStorage de la réponse (service.documents.drawing)
• API Entrepot : rendre public le document
  • Enregistrement auto dans le localStorage de la réponse (service.documents.drawing)
• Layer : modification de l'ID du layer : ex gpResultID = bookmark:kml:UUID
• Permalink : mise à jour du permalien
• Notification : sauvegarde d'un croquis
• dispatch (emit) un event : ex. service:documents:saved avec UUID en param

5. (vue) abonnement sur l'event de la classe Bookmark : onAddDrawing()
6. (vue) action du gestionnaire d'event :

• mise à jour de la liste des drawing dans le menu des favoris
• notification d'ajout d'une entrée dans le menu

workflow pour un import (creation) (uniquement les vecteurs)

1. (ext) action ajout de l'import sur la carte
2. (ext) dispatch (emit) un event : ex. import:added avec le layer en param
3. (vue) abonnement sur l'event de la classe LayerImport : onSaveImport()
4. (vue) liste des actions du gestionnaire d'evénement :

• (...)

5. (vue) abonnement sur l'event de la classe Bookmark : onAddImport()
6. (vue) action du gestionnaire d'event :
   • mise à jour de la liste des import dans le menu des favoris
   • notification d'ajout d'une entrée dans le menu

Extensions :

• sur l'outil de dessin (extension)
  • Ajouter le bouton et menu de sauvegarde
  • Émettre un evenement de demande de sauvegarde
• sur l'outil d'import (extension)
  • Émettre un evenement d'ajout de l'import sur la carte
• Mise en conformité du bouton Export (extension)
• ℹ️ attente de maquette du menu

Site Web :

• API Entrepôt

  • de création d'un document
  • de suppression
  • de modification
  • de partage public

• Menu des Actions sur les documents :

  • Exporter
  • Renommer
  • Supprimer
    

• Boutons

  • Ajouter un fichier (= ouvre l'outil d'import)
  • Enregistrer une carte
    • récupérer le permalien (mapSore)
    • conversion vers un Short UUID (mapSore)
    • les fonctions du mapSore
    • enregistrer le permalien

• Ajouter Bouton Enregistrer ou Sauvegarder

  • l'outil de dessin : avec menu !
  • le calcul isochrone
  • le profil alti
  • le calcul itinéraire

• Ajouter Bouton Exporter avec menu

  • l'outil de dessin
  • le calcul isochrone
  • le profil alti
  • le calcul itinéraire

• Implémentation de l'enregistrement automatique des données issues de l'outil d'import

• Implémentation de l'enregistrement manuel des croquis

• ⚠️ RECETTE !

notifications

Mise en place d'un plugin de notification

• Gestionnaire de message / notification sur l'auth et sur les favoris
• Uniformiser les messages dans le code
• Écarter les exceptions car elles ne sont pas destinées aux utilisateurs !
• ⚠️ RECETTE !

import t from '@/features/translation';
import { push } from 'notivue'

push.error({
    title: t.auth.title,
    message: t.auth.failed(e.message)
  });

ℹ️ possibilité de personnaliser la popup (cf. https://docs.notivue.smastrom.io/headless/usage.html#_1-create-the-notification)

bus d'evenements

• fait

définir un bus d’événement car le mécanisme de Vue3 est trop pourri...

// Utilisation d'un inject/provide
var bus = inject('emitter');
bus.addEventListener("event", (e) => {...})
bus.dispatchEvent("event", {})

ou

// Utilisation via un composable
import { createBusEvent } from 'vue-bus-event-plugin';
const bus = createBusEvent();
bus.addEventListener("event", (e) => {...})
bus.dispatchEvent("event", {})

Les évenement étant globaux, on centralise la création des noms des evenements dans un fichier :
(cad, on ne peut pas les creer à la volée dans le code, il faut au préalable, l'enregistrer dans un fichier)
cf. @/features/events.js

{
  eventsName: [
    "test:clicked",
    "service:documents:loaded",
    "service:user:loaded",
    "catalog:open:clicked",
    "layerimport:open:clicked"
  ]
}

partage des données

Mécanisme de partage de document
Le format du permalien se simplifie !

• Utiliser le Short UUID pour le partage
• API Entrepôt
  • partage public
• Cliquer sur un document de type carte :
  • ajout sur la carte des données catalogues
  • ajout sur la carte des données utilisateurs (croquis et imports enregistrés)

authentification dite "distante"

À définir...

proxification des appels au sso et à l'API Entrepôt via cartes.gouv.fr

• mise en place au niveau de l'entrée carto

# Connexion à l'API Entrepot
VITE_API_URL="https://cartes.gouv.fr/proxy/api"

et

# Authentification sso
IAM_AUTH_MODE="remote"
IAM_REDIRECT_REMOTE="http://cartes.gouv.fr/cartes/login/entree-carto"
IAM_CLIENT_ID_REMOTE=xxxxxxxxxxxxx
IAM_CLIENT_SECRET_REMOTE=xxxxxxxxxxxxxxxxxx

• implémentation au niveau de cartes.gouv.fr

[elias75015]

Mettre la deuxième partie de cette PR dans une nouvelle PR.

Ne pas activer la connexion en prod.

[IGNFhc]

ça fonctionne aussi de mon côté la première partie