70090: Added trail for processes pages

src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { I18nBreadcrumbsService } from './i18n-breadcrumbs.service';
 import { hasNoValue } from '../../shared/empty.util';
+import { currentPathFromSnapshot } from '../../shared/utils/route.utils';
 
 /**
  * The class that resolves a BreadcrumbConfig object with an i18n key string for a route
@@ -23,7 +24,7 @@ export class I18nBreadcrumbResolver implements Resolve<BreadcrumbConfig<string>>
     if (hasNoValue(key)) {
       throw new Error('You provided an i18nBreadcrumbResolver for url \"' + route.url + '\" but no breadcrumbKey in the route\'s data')
     }
-    const fullPath = route.url.join('');
+    const fullPath = currentPathFromSnapshot(route);
     return { provider: this.breadcrumbService, key: key, url: fullPath };
   }
 }

src/app/process-page/process-breadcrumb.resolver.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { map } from 'rxjs/operators';
+import { Process } from './processes/process.model';
+import { followLink } from '../shared/utils/follow-link-config.model';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
+import { BreadcrumbConfig } from '../breadcrumbs/breadcrumb/breadcrumb-config.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../core/shared/operators';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+
+/**
+ * This class represents a resolver that requests a specific process before the route is activated
+ */
+@Injectable()
+export class ProcessBreadcrumbResolver implements Resolve<BreadcrumbConfig<Process>> {
+  constructor(protected breadcrumbService: ProcessBreadcrumbsService, private processService: ProcessDataService) {
+  }
+
+  /**
+   * Method for resolving a process based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Process>> Emits the found process based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<BreadcrumbConfig<Process>> {
+    const id = route.params.id;
+
+    return this.processService.findById(route.params.id, followLink('script')).pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      map((object: Process) => {
+        const fullPath = state.url;
+        const url = fullPath.substr(0, fullPath.indexOf(id)) + id;
+        return { provider: this.breadcrumbService, key: object, url: url };
+      })
+    );
+  }
+}

src/app/process-page/process-breadcrumbs.service.ts

@@ -0,0 +1,21 @@
+import { Observable, of as observableOf } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { BreadcrumbsService } from '../core/breadcrumbs/breadcrumbs.service';
+import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
+import { Process } from './processes/process.model';
+
+/**
+ * Service to calculate process breadcrumbs for a single part of the route
+ */
+@Injectable()
+export class ProcessBreadcrumbsService implements BreadcrumbsService<Process> {
+
+  /**
+   * Method to calculate the breadcrumbs
+   * @param key The key used to resolve the breadcrumb
+   * @param url The url to use as a link for this breadcrumb
+   */
+  getBreadcrumbs(key: Process, url: string): Observable<Breadcrumb[]> {
+    return observableOf([new Breadcrumb(key.processId + ' - ' + key.scriptName, url)]);
+  }
+}

src/app/process-page/process-page-routing.module.ts

@@ -4,26 +4,41 @@ import { NewProcessComponent } from './new/new-process.component';
 import { ProcessOverviewComponent } from './overview/process-overview.component';
 import { ProcessPageResolver } from './process-page.resolver';
 import { ProcessDetailComponent } from './detail/process-detail.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
+import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
+      {
+        path: '',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        data: { breadcrumbKey: 'process' },
+        canActivate: [AuthenticatedGuard],
+        children: [
           {
             path: '',
             component: ProcessOverviewComponent,
+            data: { title: 'process.overview.title' },
           },
           {
             path: 'new',
             component: NewProcessComponent,
-        data: { title: 'process.new.title' }
+            resolve: { breadcrumb: I18nBreadcrumbResolver },
+            data: { title: 'process.new.title', breadcrumbKey: 'process.new' }
           },
           {
             path: ':id',
             component: ProcessDetailComponent,
             resolve: {
-          process: ProcessPageResolver
+              process: ProcessPageResolver,
+              breadcrumb: ProcessBreadcrumbResolver
             }
           }
+        ]
+      },
+
     ])
   ],
   providers: [

src/app/process-page/process-page.module.ts

@@ -14,6 +14,8 @@ import { DateValueInputComponent } from './new/process-parameters/parameter-valu
 import { ProcessOverviewComponent } from './overview/process-overview.component';
 import { ProcessDetailComponent } from './detail/process-detail.component';
 import { ProcessDetailFieldComponent } from './detail/process-detail-field/process-detail-field.component';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
 
 @NgModule({
   imports: [
@@ -35,6 +37,10 @@ import { ProcessDetailFieldComponent } from './detail/process-detail-field/proce
     ProcessDetailComponent,
     ProcessDetailFieldComponent
   ],
+  providers: [
+    ProcessBreadcrumbResolver,
+    ProcessBreadcrumbsService
+  ],
   entryComponents: []
 })
 

src/app/shared/utils/route.utils.ts

@@ -1,4 +1,6 @@
-import { Router } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router';
+import { hasValue } from '../empty.util';
+import { URLCombiner } from '../../core/url-combiner/url-combiner';
 
 /**
  * Util function to retrieve the current path (without query parameters) the user is on
@@ -8,3 +10,11 @@ export function currentPath(router: Router) {
   const urlTree = router.parseUrl(router.url);
   return '/' + urlTree.root.children.primary.segments.map((it) => it.path).join('/')
 }
+
+export function currentPathFromSnapshot(route: ActivatedRouteSnapshot): string {
+  if (hasValue(route.parent)) {
+    const parentRoute: string = currentPathFromSnapshot(route.parent);
+    return new URLCombiner(parentRoute, route.routeConfig.path).toString();
+  }
+  return route.routeConfig ? route.routeConfig.path : '';
+}