refractor(breadcrumb): enhance breadcrumb (#129)

Enhance breadcrumb design and generation

Fixes #106

src/app/self-service/self-service-routing.module.ts

@@ -2,38 +2,60 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { Route, extract } from '../core';
-import { UserManagementComponent } from './user-management/user-management.component';
-import { CreateUserComponent } from './create-user/create-user.component';
-import { ViewUserComponent } from './view-user/view-user.component';
-import { EditUserComponent } from './edit-user/edit-user.component';
+import { UsersComponent } from './users/users.component';
+import { CreateUserComponent } from './users/create-user/create-user.component';
+import { ViewUserComponent } from './users/view-user/view-user.component';
+import { EditUserComponent } from './users/edit-user/edit-user.component';
 import { AppConfigurationComponent } from './app-configuration/app-configuration.component';
+import { SelfServiceComponent } from './self-service.component';
+import { ViewUserResolver } from './users/view-user/view-user.resolver';
 
 const routes: Routes = [
   Route.withShell([
     {
-      path: 'self-service/users',
-      component: UserManagementComponent,
-      data: { title: extract('Self Service Users'), breadcrumb: 'Self Service Users' }
-    },
-    {
-      path: 'self-service/users/create',
-      component: CreateUserComponent,
-      data: { title: extract('Create Self Service User'), breadcrumb: 'Self Service Users  >  Create' }
-    },
-    {
-      path: 'self-service/users/view',
-      component: ViewUserComponent,
-      data: { title: extract('View Self Service User'), breadcrumb: 'Self Service Users  >  View' },
-    },
-    {
-      path: 'self-service/users/edit',
-      component: EditUserComponent,
-      data: { title: extract('Edit Self Service User'), breadcrumb: 'Self Service Users  >  Edit' },
-    },
-    {
-      path: 'self-service/app-configuration',
-      component: AppConfigurationComponent,
-      data: { title: extract('App Configuration'), breadcrumb: 'App Configuration' },
+      path: 'self-service',
+      component: SelfServiceComponent,
+      data: { title: extract('Self Service'), breadcrumb: 'Self Service', addBreadcrumbLink: false },
+      children: [
+        {
+          path: 'users',
+          data: { title: extract('Self Service Users'), breadcrumb: 'Users' },
+          children: [
+            {
+              path: '',
+              component: UsersComponent
+            },
+            {
+              path: 'create',
+              component: CreateUserComponent,
+              data: { title: extract('Create Self Service User'), breadcrumb: 'Create' }
+            },
+            {
+              path: 'view/:id',
+              data: { title: extract('View Self Service User'), routeResolveBreadcrumb: ['user', 'username'] },
+              resolve: {
+                user: ViewUserResolver
+              },
+              children: [
+                {
+                  path: '',
+                  component: ViewUserComponent
+                },
+                {
+                  path: 'edit',
+                  component: EditUserComponent,
+                  data: { title: extract('Edit Self Service User'), breadcrumb: 'Edit', routeResolveBreadcrumb: false }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          path: 'app-configuration',
+          component: AppConfigurationComponent,
+          data: { title: extract('App Configuration'), breadcrumb: 'App Configuration' },
+        }
+      ]
     }
   ])
 ];
@@ -41,6 +63,6 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
-  providers: []
+  providers: [ViewUserResolver]
 })
 export class SelfServiceRoutingModule { }