fix: dashboard navigation was messy in front-office, when using templates

Author: AntoineRelief

apps/front-office/src/app/application/application.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { subject } from '@casl/ability';
 import { TranslateService } from '@ngx-translate/core';
 import {
@@ -12,7 +12,7 @@ import {
   AppAbility,
 } from '@oort-front/safe';
 import get from 'lodash/get';
-import { takeUntil } from 'rxjs/operators';
+import { filter, takeUntil } from 'rxjs/operators';
 
 /**
  * Front-office Application component.
@@ -67,6 +67,14 @@ export class ApplicationComponent
   ) {
     super();
     this.largeDevice = window.innerWidth > 1024;
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => {
+        console.log('end');
+      });
   }
 
   /**

apps/front-office/src/app/application/pages/dashboard/dashboard.component.ts

@@ -10,7 +10,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { Dialog } from '@angular/cdk/dialog';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import {
   GetDashboardByIdQueryResponse,
   GET_DASHBOARD_BY_ID,
@@ -24,7 +24,7 @@ import {
   ButtonActionT,
 } from '@oort-front/safe';
 import { TranslateService } from '@ngx-translate/core';
-import { map, takeUntil } from 'rxjs/operators';
+import { filter, map, startWith, takeUntil } from 'rxjs/operators';
 import { Observable, firstValueFrom } from 'rxjs';
 import { SnackbarService } from '@oort-front/ui';
 
@@ -104,49 +104,60 @@ export class DashboardComponent
    * Subscribes to the route to load the dashboard accordingly.
    */
   ngOnInit(): void {
-    this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
-      this.route.queryParams
-        .pipe(takeUntil(this.destroy$))
-        .subscribe((queryParams) => {
-          if (queryParams.id) {
+    /** Listen to router events navigation end, to get last version of params & queryParams. */
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        startWith(this.router), // initialize
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => {
+        // Reset scroll when changing page
+        const pageContainer = document.getElementById('appPageContainer');
+        if (pageContainer) pageContainer.scrollTop = 0;
+        /** Extract main dashboard id */
+        const id = this.route.snapshot.paramMap.get('id');
+        /** Extract query id to load template */
+        const queryId = this.route.snapshot.queryParamMap.get('id');
+        if (id) {
+          if (queryId) {
+            // Try to load template
             this.showName = true;
-          } else {
-            this.showName = false;
-          }
-        });
-      // Reset scroll when changing page
-      const pageContainer = document.getElementById('appPageContainer');
-      if (pageContainer) pageContainer.scrollTop = 0;
-      this.route.queryParams
-        .pipe(takeUntil(this.destroy$))
-        .subscribe((queryParams) => {
-          const viewId = queryParams.id;
-          if (viewId) {
-            this.initDashboardWithId(params.id).then(() => {
-              // Find the id of the contextual dashboard and load it
-              const dashboardsWithContext =
-                this.dashboard?.page?.contentWithContext;
+            this.initDashboardWithId(id).then(() => {
+              const templates = this.dashboard?.page?.contentWithContext;
               const type = this.contextType;
-              // find the contextual dashboard id in the list of dashboards from the parent dashboard
-              // it's the one where the element or record id matches the one in the query params
-              const dashboardWithContext = dashboardsWithContext?.find((d) => {
+              // Find template from parent's templates, based on query params id
+              const template = templates?.find((d) => {
+                // If templates use reference data
                 if (type === 'element')
-                  return 'element' in d && d.element === viewId;
+                  return (
+                    'element' in d && d.element.toString().trim() === queryId
+                  );
+                // If templates use resource
                 else if (type === 'record')
-                  return 'record' in d && d.record === viewId;
+                  return (
+                    'record' in d && d.record.toString().trim() === queryId
+                  );
                 return false;
               });
-              if (dashboardWithContext) {
-                this.initDashboardWithId(dashboardWithContext.content);
+              if (template) {
+                // Load template, it will erase current dashboard
+                this.initDashboardWithId(template.content).then(
+                  () => (this.loading = false)
+                );
               } else {
+                // Will use current template
+                this.loading = false;
                 return;
               }
             });
           } else {
-            this.initDashboardWithId(params.id);
+            // Don't use template, and directly load the dashboard from router's params
+            this.showName = false;
+            this.initDashboardWithId(id).then(() => (this.loading = false));
           }
-        });
-    });
+        }
+      });
   }
 
   /**
@@ -203,15 +214,14 @@ export class DashboardComponent
         },
       })
     )
-      .then(({ data, loading }) => {
+      .then(({ data }) => {
         if (data.dashboard) {
           this.dashboard = data.dashboard;
           this.dashboardService.openDashboard(this.dashboard);
           this.widgets = data.dashboard.structure
             ? data.dashboard.structure
             : [];
           this.buttonActions = this.dashboard.buttons || [];
-          this.loading = loading;
           this.showFilter = this.dashboard.showFilter;
         } else {
           this.snackBar.openSnackBar(