Bugfix/preserve view

core/examples/luigi-sample-angular/src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { RestrictedComponent } from './restricted/restricted.component';
 
 const routes: Routes = [
   { path: 'overview', component: OverviewComponent },
+  { path: 'settings', component: SettingsComponent },
   { path: 'restricted', component: RestrictedComponent },
   { path: 'projects/:projectId', component: ProjectComponent },
   { path: 'projects/:projectId/users', component: UsersComponent },

core/examples/luigi-sample-angular/src/app/project/project.component.html

@@ -50,8 +50,8 @@ <h1 class="fd-section__title">Project {{ projectId }}</h1>
         <app-code-snippet data="luigiClient.linkManager().fromContext('FOOMARK').navigate('/settings')"></app-code-snippet>
       </li>
       <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().fromContext('project').navigate('/settings', null, true)">with preserved view: project to settings and back</a>
-        <app-code-snippet data="luigiClient.linkManager().fromContext('project').navigate('/settings', null, true)"></app-code-snippet>
+        <a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/settings', null, true)">with preserved view: project to settings and back</a>
+        <app-code-snippet data="luigiClient.linkManager().navigate('/settings', null, true)"></app-code-snippet>
       </li>
     </ul>
   </div>

core/examples/luigi-sample-angular/src/app/project/settings/settings.component.html

@@ -9,7 +9,8 @@
 
 <section class="fd-section">
   <div class="fd-section__header">
-    <h1 class="fd-section__title">Settings of {{ projectId }}</h1>
+    <h1 *ngIf="projectId" class="fd-section__title">Settings of {{ projectId }}</h1>
+    <h1 *ngIf="!projectId" class="fd-section__title">Global Settings</h1>
   </div>
 
   <div class="fd-panel">

core/examples/luigi-sample-angular/src/app/project/settings/settings.component.ts

@@ -17,19 +17,18 @@ export class SettingsComponent implements OnInit {
   constructor(
     private activatedRoute: ActivatedRoute,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.activatedRoute.params.subscribe((params: Params) => {
       this.projectId = params['projectId'];
     });
     this.luigiClient = LuigiClient;
-    LuigiClient.addInitListener(() => {
+    LuigiClient.addInitListener((init) => {
       this.hasBack = LuigiClient.linkManager().hasBack();
-      this.nodeParams =
-        Object.keys(LuigiClient.getNodeParams()).length > 0
-          ? LuigiClient.getNodeParams()
-          : null;
+      this.nodeParams = Object.keys(LuigiClient.getNodeParams()).length > 0
+        ? LuigiClient.getNodeParams()
+        : null;
       this.cdr.detectChanges();
     });
   }

core/examples/luigi-sample-angular/src/assets/sampleconfig.js

@@ -322,6 +322,11 @@ Luigi.setConfig({
           viewUrl: '/sampleapp.html#/restricted',
           constraints: ['unicorns']
         },
+        {
+          pathSegment: 'settings',
+          label: 'Settings',
+          viewUrl: '/sampleapp.html#/settings'
+        },
         {
           pathSegment: 'ext',
           label: 'External Page',

core/src/App.html

@@ -47,23 +47,7 @@
         Routing.handleRouteChange(trimLeadingSlash(window.location.pathname), component, node, config);
     };
 
-    const addPreserveView = (component, data, config, node) => {
-        if (data.params.preserveView) {
-            const pv = component.get().preservedViews;
-            pv.push({
-                path: Routing.getNodePath(component.get().currentNode),
-                nextPath: Routing.getNodePath(component.get().currentNode) + data.params.link,
-                context: component.get().context
-            });
-            component.set({preservedViews: pv});
-
-            // Resetting iframe config to null, since Routing.navigateTo will then create a new iframe
-            // instead of using the existing instance for route.
-            config.iframe = null;
-        }
-    };
-
-    const handleNavigation = async (component, data, config, node) => {
+    const buildPath = (component, data) => {
         let path = data.params.link;
         if (data.params.fromClosestContext) { // from the closest navigation context
             const node = [...component.get().navigationPath].reverse().find((n) => n.navigationContext && n.navigationContext.length > 0);
@@ -76,13 +60,36 @@
             path = Routing.concatenatePath(Routing.getNodePath(component.get().currentNode), data.params.link);
         }
 
-        if (data.params.nodeParams) {
+        if (data.params.nodeParams && Object.keys(data.params.nodeParams).length) {
             path += '?';
             Object.entries(data.params.nodeParams).forEach(entry => {
                 path += (encodeURIComponent(Routing.getContentViewParamPrefix() + entry[0]) + '=' + encodeURIComponent(entry[1]) + '&');
             });
         }
+        return path;
+    };
 
+    const addPreserveView = (component, data, config, node) => {
+        if (data.params.preserveView) {
+            console.log('TCL: addPreserveView -> data', data, node);
+            const pv = component.get().preservedViews;
+            const nextPath = buildPath(component, data);
+            pv.push({
+                path: Routing.getNodePath(component.get().currentNode),
+                nextPath: nextPath.startsWith('/') ? nextPath : '/' + nextPath,
+                context: component.get().context
+            });
+            console.log('pv', pv);
+            component.set({preservedViews: pv});
+
+            // Resetting iframe config to null, since Routing.navigateTo will then create a new iframe
+            // instead of using the existing instance for route.
+            config.iframe = null;
+        }
+    };
+
+    const handleNavigation = async (component, data, config, node) => {
+        const path = buildPath(component, data);
         const matchedPath = await Routing.matchPath(path);
         if (matchedPath !== null) {
             addPreserveView(component, data, config, node);