diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.html b/src/app/core/shell/breadcrumb/breadcrumb.component.html
index 7d09da8c1..48bb085db 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.html
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.html
@@ -1,12 +1,14 @@
-
diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.scss b/src/app/core/shell/breadcrumb/breadcrumb.component.scss
index 41060f241..a0ea2b443 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.scss
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.scss
@@ -1,4 +1,48 @@
-li {
- display: inline;
- list-style-type: none;
+.breadcrumb-wrapper {
+ margin: 0 auto;
+ max-width: 74rem;
+ width: 90%;
+
+ .breadcrumb {
+ list-style: none;
+ padding: 0;
+ margin: 1.5rem 0;
+ line-height: 40px;
+
+ .breadcrumb-title {
+ font-size: 1.25rem;
+ font-weight: 400;
+ }
+
+ .separator:before {
+ content: "";
+ border: 1.5px solid #000;
+ margin: 0 0.6rem;
+ font-size: 1.25rem;
+ font-weight: 400;
+ }
+
+ .breadcrumb-label {
+ display: inline;
+ font-size: 1rem;
+
+ .breadcrumb-link {
+ a {
+ text-decoration: none;
+ color: #0275d8;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .breadcrumb-link:after {
+ content: "/";
+ margin: 0 0.4rem;
+ }
+
+ }
+
+ }
+
}
diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.ts b/src/app/core/shell/breadcrumb/breadcrumb.component.ts
index eb1b86d61..3bbfefe52 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.ts
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.ts
@@ -22,40 +22,63 @@ export class BreadcrumbComponent implements OnInit {
generateBreadcrumbs() {
const routeDataBreadcrumb = 'breadcrumb';
const routeParamBreadcrumb = 'routeParamBreadcrumb';
+ const routeResolveBreadcrumb = 'routeResolveBreadcrumb';
+ const routeAddBreadcrumbLink = 'addBreadcrumbLink';
+
const onNavigationEnd = this.router.events.pipe(filter(event => event instanceof NavigationEnd));
onNavigationEnd.subscribe(() => {
this.breadcrumbs = [];
let currentRoute = this.activatedRoute.root;
- let url = '';
+ let currentUrl = '';
while (currentRoute.children.length > 0) {
const childrenRoutes = currentRoute.children;
- let breadcrumbLabel = 'Home';
+ let breadcrumbLabel: any;
+ let url: any;
childrenRoutes.forEach(route => {
currentRoute = route;
+ breadcrumbLabel = false;
+
if (route.outlet !== 'primary') {
return;
}
+
+ const routeURL = route.snapshot.url.map(segment => segment.path).join('/');
+ currentUrl += `/${routeURL}`;
+
+ if (currentUrl === '/') {
+ breadcrumbLabel = 'Home';
+ }
+
const hasData = (route.routeConfig && route.routeConfig.data);
+
if (hasData) {
- if (route.snapshot.data.hasOwnProperty(routeParamBreadcrumb)) {
- breadcrumbLabel = route.snapshot.params[route.snapshot.data[routeParamBreadcrumb]];
+ if (route.snapshot.data.hasOwnProperty(routeResolveBreadcrumb) && route.snapshot.data[routeResolveBreadcrumb]) {
+ breadcrumbLabel = route.snapshot.data;
+ route.snapshot.data[routeResolveBreadcrumb].forEach((property: any) => {
+ breadcrumbLabel = breadcrumbLabel[property];
+ });
+ } else if (route.snapshot.data.hasOwnProperty(routeParamBreadcrumb) && route.snapshot.paramMap.get(route.snapshot.data[routeParamBreadcrumb])) {
+ breadcrumbLabel = route.snapshot.paramMap.get(route.snapshot.data[routeParamBreadcrumb]);
} else if (route.snapshot.data.hasOwnProperty(routeDataBreadcrumb)) {
breadcrumbLabel = route.snapshot.data[routeDataBreadcrumb];
}
- }
- const routeURL = route.snapshot.url.map(segment => segment.path).join('/');
- url += `/${routeURL}`;
+ if (route.snapshot.data.hasOwnProperty(routeAddBreadcrumbLink)) {
+ url = route.snapshot.data[routeAddBreadcrumbLink];
+ } else {
+ url = currentUrl;
+ }
+ }
const breadcrumb: Breadcrumb = {
label: breadcrumbLabel,
url: url
};
- if (breadcrumb.url !== '//home') {
+ if (breadcrumbLabel) {
this.breadcrumbs.push(breadcrumb);
}
});
diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
index 37a39ba9f..55bb7a0b7 100644
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/home/home-routing.module.ts
@@ -18,9 +18,9 @@ const routes: Routes = [
data: { title: extract('Home') }
},
{
- path: 'home/dashboard',
+ path: 'dashboard',
component: DashboardComponent,
- data: { title: extract('Dashboard') }
+ data: { title: extract('Dashboard'), breadcrumb: 'Dashboard' }
}
])
];
diff --git a/src/app/self-service/self-service-routing.module.ts b/src/app/self-service/self-service-routing.module.ts
index 3d0f47c33..497ce049a 100644
--- a/src/app/self-service/self-service-routing.module.ts
+++ b/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 { }
diff --git a/src/app/self-service/self-service.component.html b/src/app/self-service/self-service.component.html
new file mode 100644
index 000000000..0680b43f9
--- /dev/null
+++ b/src/app/self-service/self-service.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/self-service/create-user/create-user.component.scss b/src/app/self-service/self-service.component.scss
similarity index 100%
rename from src/app/self-service/create-user/create-user.component.scss
rename to src/app/self-service/self-service.component.scss
diff --git a/src/app/self-service/user-management/user-management.component.spec.ts b/src/app/self-service/self-service.component.spec.ts
similarity index 52%
rename from src/app/self-service/user-management/user-management.component.spec.ts
rename to src/app/self-service/self-service.component.spec.ts
index 4c1c14bcf..cc7053b71 100644
--- a/src/app/self-service/user-management/user-management.component.spec.ts
+++ b/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;
+describe('SelfServiceComponent', () => {
+ let component: SelfServiceComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ UserManagementComponent ]
+ declarations: [ SelfServiceComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(UserManagementComponent);
+ fixture = TestBed.createComponent(SelfServiceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/self-service/self-service.component.ts b/src/app/self-service/self-service.component.ts
new file mode 100644
index 000000000..6aaef20a4
--- /dev/null
+++ b/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() {
+ }
+
+}
diff --git a/src/app/self-service/self-service.module.ts b/src/app/self-service/self-service.module.ts
index 89b1ae771..d2f53d576 100644
--- a/src/app/self-service/self-service.module.ts
+++ b/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,
diff --git a/src/app/self-service/create-user/create-user.component.html b/src/app/self-service/users/create-user/create-user.component.html
similarity index 100%
rename from src/app/self-service/create-user/create-user.component.html
rename to src/app/self-service/users/create-user/create-user.component.html
diff --git a/src/app/self-service/edit-user/edit-user.component.scss b/src/app/self-service/users/create-user/create-user.component.scss
similarity index 100%
rename from src/app/self-service/edit-user/edit-user.component.scss
rename to src/app/self-service/users/create-user/create-user.component.scss
diff --git a/src/app/self-service/create-user/create-user.component.spec.ts b/src/app/self-service/users/create-user/create-user.component.spec.ts
similarity index 100%
rename from src/app/self-service/create-user/create-user.component.spec.ts
rename to src/app/self-service/users/create-user/create-user.component.spec.ts
diff --git a/src/app/self-service/create-user/create-user.component.ts b/src/app/self-service/users/create-user/create-user.component.ts
similarity index 100%
rename from src/app/self-service/create-user/create-user.component.ts
rename to src/app/self-service/users/create-user/create-user.component.ts
diff --git a/src/app/self-service/edit-user/edit-user.component.html b/src/app/self-service/users/edit-user/edit-user.component.html
similarity index 100%
rename from src/app/self-service/edit-user/edit-user.component.html
rename to src/app/self-service/users/edit-user/edit-user.component.html
diff --git a/src/app/self-service/view-user/view-user.component.scss b/src/app/self-service/users/edit-user/edit-user.component.scss
similarity index 100%
rename from src/app/self-service/view-user/view-user.component.scss
rename to src/app/self-service/users/edit-user/edit-user.component.scss
diff --git a/src/app/self-service/edit-user/edit-user.component.spec.ts b/src/app/self-service/users/edit-user/edit-user.component.spec.ts
similarity index 100%
rename from src/app/self-service/edit-user/edit-user.component.spec.ts
rename to src/app/self-service/users/edit-user/edit-user.component.spec.ts
diff --git a/src/app/self-service/edit-user/edit-user.component.ts b/src/app/self-service/users/edit-user/edit-user.component.ts
similarity index 100%
rename from src/app/self-service/edit-user/edit-user.component.ts
rename to src/app/self-service/users/edit-user/edit-user.component.ts
diff --git a/src/app/self-service/user.service.spec.ts b/src/app/self-service/users/user.service.spec.ts
similarity index 100%
rename from src/app/self-service/user.service.spec.ts
rename to src/app/self-service/users/user.service.spec.ts
diff --git a/src/app/self-service/user.service.ts b/src/app/self-service/users/user.service.ts
similarity index 86%
rename from src/app/self-service/user.service.ts
rename to src/app/self-service/users/user.service.ts
index ac421f2d5..883b06e58 100644
--- a/src/app/self-service/user.service.ts
+++ b/src/app/self-service/users/user.service.ts
@@ -25,4 +25,8 @@ export class UserService {
);
}
+ getUser(): Observable {
+ return this.http.disableApiPrefix().get('http://localhost:4200/assets/mock/user.mock.json');
+ }
+
}
diff --git a/src/app/self-service/user-management/user-management.component.html b/src/app/self-service/users/users.component.html
similarity index 95%
rename from src/app/self-service/user-management/user-management.component.html
rename to src/app/self-service/users/users.component.html
index e40071606..d63601be4 100644
--- a/src/app/self-service/user-management/user-management.component.html
+++ b/src/app/self-service/users/users.component.html
@@ -15,7 +15,7 @@
-
+
diff --git a/src/app/self-service/user-management/user-management.component.scss b/src/app/self-service/users/users.component.scss
similarity index 100%
rename from src/app/self-service/user-management/user-management.component.scss
rename to src/app/self-service/users/users.component.scss
diff --git a/src/app/self-service/users/users.component.spec.ts b/src/app/self-service/users/users.component.spec.ts
new file mode 100644
index 000000000..909b5bafc
--- /dev/null
+++ b/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;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ UsersComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UsersComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/self-service/user-management/user-management.component.ts b/src/app/self-service/users/users.component.ts
similarity index 84%
rename from src/app/self-service/user-management/user-management.component.ts
rename to src/app/self-service/users/users.component.ts
index 6909fa1a2..e349aa8e9 100644
--- a/src/app/self-service/user-management/user-management.component.ts
+++ b/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;
diff --git a/src/app/self-service/view-user/view-user.component.html b/src/app/self-service/users/view-user/view-user.component.html
similarity index 92%
rename from src/app/self-service/view-user/view-user.component.html
rename to src/app/self-service/users/view-user/view-user.component.html
index fea98f1e3..211366ca1 100644
--- a/src/app/self-service/view-user/view-user.component.html
+++ b/src/app/self-service/users/view-user/view-user.component.html
@@ -5,7 +5,7 @@
-
+
diff --git a/src/app/self-service/users/view-user/view-user.component.scss b/src/app/self-service/users/view-user/view-user.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/self-service/view-user/view-user.component.spec.ts b/src/app/self-service/users/view-user/view-user.component.spec.ts
similarity index 100%
rename from src/app/self-service/view-user/view-user.component.spec.ts
rename to src/app/self-service/users/view-user/view-user.component.spec.ts
diff --git a/src/app/self-service/view-user/view-user.component.ts b/src/app/self-service/users/view-user/view-user.component.ts
similarity index 100%
rename from src/app/self-service/view-user/view-user.component.ts
rename to src/app/self-service/users/view-user/view-user.component.ts
diff --git a/src/app/self-service/users/view-user/view-user.resolver.ts b/src/app/self-service/users/view-user/view-user.resolver.ts
new file mode 100644
index 000000000..69d9fa86e
--- /dev/null
+++ b/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