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 { }

src/app/self-service/self-service.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/self-service/self-service.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { UserManagementComponent } from './user-management.component';
+import { SelfServiceComponent } from './self-service.component';
 
-describe('UserManagementComponent', () => {
-  let component: UserManagementComponent;
-  let fixture: ComponentFixture<UserManagementComponent>;
+describe('SelfServiceComponent', () => {
+  let component: SelfServiceComponent;
+  let fixture: ComponentFixture<SelfServiceComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ UserManagementComponent ]
+      declarations: [ SelfServiceComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(UserManagementComponent);
+    fixture = TestBed.createComponent(SelfServiceComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/self-service/self-service.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-self-service',
+  templateUrl: './self-service.component.html',
+  styleUrls: ['./self-service.component.scss']
+})
+export class SelfServiceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -4,12 +4,13 @@ import { FormsModule } from '@angular/forms';
 
 import { CoreModule } from '../core/core.module';
 import { SelfServiceRoutingModule } from './self-service-routing.module';
-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 { 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 { SharedModule } from '../shared/shared.module';
+import { SelfServiceComponent } from './self-service.component';
+import { UsersComponent } from './users/users.component';
 
 @NgModule({
   imports: [
@@ -20,7 +21,8 @@ import { SharedModule } from '../shared/shared.module';
     SelfServiceRoutingModule
   ],
   declarations: [
-    UserManagementComponent,
+    SelfServiceComponent,
+    UsersComponent,
     CreateUserComponent,
     ViewUserComponent,
     EditUserComponent,

src/app/self-service/users/user.service.ts

@@ -25,4 +25,8 @@ export class UserService {
       );
   }
 
+  getUser(): Observable<any> {
+    return this.http.disableApiPrefix().get('http://localhost:4200/assets/mock/user.mock.json');
+  }
+
 }

src/app/self-service/users/users.component.html

@@ -15,7 +15,7 @@
             <!-- <mat-card-actions> -->
                 <!-- <button mat-raised-button color="primary"><mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Activate</button> -->
                 <!-- <button mat-raised-button color="primary"><mat-icon>lock</mat-icon>&nbsp;&nbsp;Deactivate</button> -->
-                <button mat-raised-button color="primary" routerLink="/self-service/users/create"><mat-icon>add</mat-icon>&nbsp;&nbsp;Create User</button>
+                <button mat-raised-button color="primary" [routerLink]="['/self-service/users/create']"><mat-icon>add</mat-icon>&nbsp;&nbsp;Create User</button>
             <!-- </mat-card-actions> -->
           <!-- </mat-grid-tile> -->
 

src/app/self-service/users/users.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/self-service/users/users.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
-import { UserService } from '../user.service';
+import { UserService } from './user.service';
 
 export interface User {
   name: string;
@@ -13,11 +13,11 @@ export interface User {
 }
 
 @Component({
-  selector: 'mifosx-user-management',
-  templateUrl: './user-management.component.html',
-  styleUrls: ['./user-management.component.scss']
+  selector: 'mifosx-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss']
 })
-export class UserManagementComponent implements OnInit {
+export class UsersComponent implements OnInit {
 
   displayedColumns: string[] = ['select', 'name', 'id', 'email', 'status', 'officeName', 'staff'];
   dataSource: any;

src/app/self-service/users/view-user/view-user.component.html

@@ -5,7 +5,7 @@
   </mat-card-header>
 
   <mat-card-actions align="right">
-    <button mat-raised-button color="primary" routerLink="/self-service/users/edit"><mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit</button>
+    <button mat-raised-button color="primary" [routerLink]="['/self-service/users/view/123456/edit']"><mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit</button>
     <button mat-raised-button color="primary" (click)="openDialog()"><mat-icon>settings</mat-icon>&nbsp;&nbsp;Change Password</button>
     <button mat-raised-button color="primary"><mat-icon>lock</mat-icon>&nbsp;&nbsp;Deactivate</button>
   </mat-card-actions>

src/app/self-service/users/view-user/view-user.resolver.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+import { Observable, of } from 'rxjs';
+import { UserService } from '../user.service';
+
+@Injectable()
+export class ViewUserResolver implements Resolve<Object> {
+
+  constructor(private userService: UserService) {}
+
+  resolve(): Observable<any> {
+    return this.userService.getUser();
+  }
+
+}