[SYNTHESE][FRONTEND] Evolution / amélioration du routing frontend pour l'information d'une observation

[andriacap]

Version
Version de GN depuis que la modale "Information sur l'observation" existe.

Description de l'état actuel
Le fonctionnement actuel est l'ouverture d'une modale "Information sur l'observation" lorsqu'on clique sur l'icone "i" dans le tableau des observations du module synthese . Le chemin associé reste "https://demo.geonature.fr/geonature/#/synthese" .

Discussion
Dans le cadre d'évolution / amélioration de l'utilisation des informations liées à une observation (notamment dans le cadre du projet initié avec l'ARB IDF) , est ce qu'il serait envisageable d'associer les informations d'une observation à une route définie coté frontend .
Implémentation d'une nouvelle route ici :

GeoNature/frontend/src/app/syntheseModule/synthese.module.ts

Lines 19 to 22 in 3adc7b4

	const routes: Routes = [
	{ path: '', component: SyntheseComponent },
	{ path: 'occurrence/:id_synthese', component: SyntheseComponent, pathMatch: 'full' },
	{ path: 'taxon/:cd_nom', component: TaxonSheetComponent },

Comment reproduire

Images concernant le parcours utilisateurs depuis le module de synthese pour afficher la modale

[camillemonchicourt]

C'est pas ce qu'on a déjà avec les permaliens vers les fiches détail d'une observation ?
Exemple : https://demo.geonature.fr/geonature/#/synthese/occurrence/9934

[andriacap]

Yes effectivement , à l'initialisation du composant Synthese.component.ts il y a une vérification de la route appelée pour savoir s'il y a un id_synthese de renseigner et si c'est le cas alors la modale est ouverte.

Du coup , l'idée est de réfléchir à ajouter des enfants à cette route de type :tab (ou les définir explicitement) pour pouvoir gérer des événements clients qui souhaiteraient atterir directement sur l'onglet souhaité.

Soit ça :

{
    path: 'occurrence/:id_synthese',
    component: SyntheseComponent,
    children: [
      {
        path: 'details',
        component: SyntheseComponent, 
        data: { tabIndex: 0 }
      },
      {
        path: 'metadata',
        component: SyntheseComponent,
        data: { tabIndex: 1 }
      },
      {
        path: 'taxonomie',
        component: SyntheseComponent,
        data: { tabIndex: 2 }
      },
      ......
    ]
  }

Ou alors du type :

 {
    path: 'occurrence/:id_synthese',
    component: SyntheseComponent,
    children: [
      {
        path: ':tab', // Chemin dynamique pour l'onglet
        component: SyntheseComponent,
      }
    ]
  }

et gérer le valeur de :tab directement au sein du composant SyntheseComponent en ajoutant la logique à la méthode openModal

openInfoModal(idSynthese) {
  const modalRef = this._ngModal.open(SyntheseInfoObsComponent, {
    size: 'lg',
    windowClass: 'large-modal',
  });
  modalRef.componentInstance.idSynthese = idSynthese;
  modalRef.componentInstance.header = true;
  modalRef.componentInstance.useFrom = 'synthese';

  // Extraire l'onglet à partir du paramètre de route
  const tab = this.route.snapshot.firstChild?.paramMap.get('tab');

  // On converti le nom de l'onglet en index ou on le passe directement s'il est numérique
  let tabIndex;
  switch (tab) {
    case 'details':
      tabIndex = 0;
      break;
    case 'metadata':
      tabIndex = 1;
      break;
    case 'taxonomie':
      tabIndex = 2;
      break;
    default:
      tabIndex = 0; // Par défaut, ouvrir le premier onglet si le paramètre est invalide
  }
  modalRef.componentInstance.activeTabIndex = tabIndex;
}

[TheoLechemia]

Salut,

ça me va.
Juste voir si ce n'est pas possible d'avoir des label de "tab" plutôt que des index (plus robuste dans le temps et plus parlant au niveau de l'url)

[andriacap]

Salut,

Du coup est ce qu'on s'appuierait sur un truc du genre (source: https://stackoverflow.com/questions/70690991/angular-mat-tabs-set-default-active-tab-based-on-label-get-label-index/76567715#76567715)

goToTabByLabel(label: string) {
  if (this.tabsgroup) {
    const tabs = (this.tabsgroup?._tabs as any)._results,
          match = tabs?.find(x => x.textLabel?.toUpperCase() === label.toUpperCase());

    if (match) {
      this.tabsgroup.selectedIndex = match.position;
    }
  }
}

Et ajouter un attribut à chaque onglet où on précise urlRoute pour associer chaque tab à des champs plus appropriés pour avoir des url associées ? Et comme ça on est pas dépendant de l'ordre des onglets

[TheoLechemia]

Salut,

J’éviterais (quand c'est possible) d'utiliser les propriété privé des objets.
Est-ce qu'avec un petit tableau de nos "tabs" on pourrait pas s'en sortir :

public tabs = ["tab1", "tab2", "tab3"] -> qu'on utilise pour générer le HTML.

et le goToTabByLabel() utilise ce tabs plutot que (this.tabsgroup?._tabs as any)._results

[edelclaux]

Salut,

J’éviterais (quand c'est possible) d'utiliser les propriété privé des objets. Est-ce qu'avec un petit tableau de nos "tabs" on pourrait pas s'en sortir :

public tabs = ["tab1", "tab2", "tab3"] -> qu'on utilise pour générer le HTML.

et le goToTabByLabel() utilise ce tabs plutot que (this.tabsgroup?._tabs as any)._results

La correspondance label <--> index peut-être faite en se basant sur la position dans le tableau. Mais côté html, comment tu fais pour respecter l'ordre du tableau ? Je suis pas convaincu par les différentes solutions que je vois

• l'appel à la rigueur des devs, c'est risqué :D
• un for + switch, c'est pas joli joli.
• un truc avec des ng-container et ng-template, ça me parait délicat. Il y a des liens mat-tab, etc. qui vont en pâtir sûrement.