From bcc5d4fcba20f868c5047578bf0543676a209713 Mon Sep 17 00:00:00 2001 From: Armin Date: Sat, 24 Aug 2024 10:56:33 +0330 Subject: [PATCH] feat(dashboard): add bread crump (#51) --- src/app/app.routes.ts | 1 - .../bread-crump/bread-crump.component.html | 8 ++++ .../bread-crump/bread-crump.component.scss | 0 .../bread-crump/bread-crump.component.spec.ts | 30 +++++++++++++ .../bread-crump/bread-crump.component.ts | 42 +++++++++++++++++++ .../edit-user/edit-user.component.html | 1 + .../edit-user/edit-user.component.ts | 3 +- .../users-table/users-table.component.html | 2 + .../users-table/users-table.component.spec.ts | 9 +++- .../users-table/users-table.component.ts | 4 +- 10 files changed, 96 insertions(+), 4 deletions(-) create mode 100644 src/app/components/bread-crump/bread-crump.component.html create mode 100644 src/app/components/bread-crump/bread-crump.component.scss create mode 100644 src/app/components/bread-crump/bread-crump.component.spec.ts create mode 100644 src/app/components/bread-crump/bread-crump.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 83b8047..eca3f9f 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,5 +1,4 @@ import { Routes } from '@angular/router'; -// import { AuthComponent } from './page/auth/auth.component'; import { DashboardComponent } from './page/dashboard/dashboard.component'; import { GraphComponent } from './page/graph/graph/graph.component'; import { ProfileComponent } from './components/profile/profile.component'; diff --git a/src/app/components/bread-crump/bread-crump.component.html b/src/app/components/bread-crump/bread-crump.component.html new file mode 100644 index 0000000..fbf732d --- /dev/null +++ b/src/app/components/bread-crump/bread-crump.component.html @@ -0,0 +1,8 @@ + + + Home + + + {{ breadcrumb.label }} + + diff --git a/src/app/components/bread-crump/bread-crump.component.scss b/src/app/components/bread-crump/bread-crump.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/bread-crump/bread-crump.component.spec.ts b/src/app/components/bread-crump/bread-crump.component.spec.ts new file mode 100644 index 0000000..210b16b --- /dev/null +++ b/src/app/components/bread-crump/bread-crump.component.spec.ts @@ -0,0 +1,30 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BreadCrumpComponent } from './bread-crump.component'; +import { ActivatedRoute } from '@angular/router'; +import { of } from 'rxjs'; + +describe('BreadCrumpComponent', () => { + let component: BreadCrumpComponent; + let fixture: ComponentFixture; + const mockActivatedRoute = { + params: of({ id: 1 }), + snapshot: { params: { id: 1 } }, + }; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BreadCrumpComponent], + providers: [ { provide: ActivatedRoute, useValue: mockActivatedRoute },] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BreadCrumpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/bread-crump/bread-crump.component.ts b/src/app/components/bread-crump/bread-crump.component.ts new file mode 100644 index 0000000..6e79c18 --- /dev/null +++ b/src/app/components/bread-crump/bread-crump.component.ts @@ -0,0 +1,42 @@ +import { NgFor, NgIf } from '@angular/common'; +import { Component, OnInit } from '@angular/core'; +import {NavigationEnd, Router, RouterLink } from '@angular/router'; +import { NzBreadCrumbComponent, NzBreadCrumbItemComponent } from 'ng-zorro-antd/breadcrumb'; +import { filter } from 'rxjs'; + +@Component({ + selector: 'app-bread-crump', + standalone: true, + imports: [NzBreadCrumbComponent, NzBreadCrumbItemComponent, NgIf, NgFor, RouterLink], + templateUrl: './bread-crump.component.html', + styleUrl: './bread-crump.component.scss', +}) +export class BreadCrumpComponent implements OnInit { + breadcrumbs: {label: string, url: string}[] = []; + + constructor(private router: Router) {} + + ngOnInit() { + this.router.events.pipe( + filter(event => event instanceof NavigationEnd) + ).subscribe(() => { + this.generateBreadcrumbs(); + }); + + this.generateBreadcrumbs(); + } + + private generateBreadcrumbs() { + const urlParts = this.router.url.split('/').filter(part => part); + this.breadcrumbs = urlParts.map((part, index) => { + const url = '/' + urlParts.slice(0, index + 1).join('/'); + const label = this.formatLabel(part); + return { label, url }; + }); + } + + private formatLabel(part: string): string { + part = part.split('?')[0]; + return part.charAt(0).toUpperCase() + part.slice(1).replace(/-/g, ' '); + } +} diff --git a/src/app/components/edit-user-components/edit-user/edit-user.component.html b/src/app/components/edit-user-components/edit-user/edit-user.component.html index a55f3ff..45741c2 100644 --- a/src/app/components/edit-user-components/edit-user/edit-user.component.html +++ b/src/app/components/edit-user-components/edit-user/edit-user.component.html @@ -1,4 +1,5 @@
+ diff --git a/src/app/components/edit-user-components/edit-user/edit-user.component.ts b/src/app/components/edit-user-components/edit-user/edit-user.component.ts index 5e61576..4c91164 100644 --- a/src/app/components/edit-user-components/edit-user/edit-user.component.ts +++ b/src/app/components/edit-user-components/edit-user/edit-user.component.ts @@ -7,11 +7,12 @@ import { PermisionsService } from '../../../services/permisisons/permisions.serv import { EditRoleComponent } from '../edit-role/edit-role.component'; import { ActivatedRoute } from '@angular/router'; import { NgIf } from '@angular/common'; +import { BreadCrumpComponent } from "../../bread-crump/bread-crump.component"; @Component({ selector: 'app-edit-user', standalone: true, - imports: [EditProfileComponent, EditPasswordComponent, EditRoleComponent, NgIf], + imports: [EditProfileComponent, EditPasswordComponent, EditRoleComponent, NgIf, BreadCrumpComponent], templateUrl: './edit-user.component.html', styleUrl: './edit-user.component.scss', }) diff --git a/src/app/components/manage-users-components/users-table/users-table.component.html b/src/app/components/manage-users-components/users-table/users-table.component.html index e6d9e74..2b5801b 100644 --- a/src/app/components/manage-users-components/users-table/users-table.component.html +++ b/src/app/components/manage-users-components/users-table/users-table.component.html @@ -1,4 +1,6 @@ +
+

Manage Users

diff --git a/src/app/components/manage-users-components/users-table/users-table.component.spec.ts b/src/app/components/manage-users-components/users-table/users-table.component.spec.ts index 38e0e95..69e7ca0 100644 --- a/src/app/components/manage-users-components/users-table/users-table.component.spec.ts +++ b/src/app/components/manage-users-components/users-table/users-table.component.spec.ts @@ -4,10 +4,16 @@ import { UsersTableComponent } from './users-table.component'; import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon'; import { TeamOutline, UserAddOutline } from '@ant-design/icons-angular/icons'; import { provideHttpClient } from '@angular/common/http'; +import { of } from 'rxjs'; +import { ActivatedRoute } from '@angular/router'; describe('UsersTableComponent', () => { let component: UsersTableComponent; let fixture: ComponentFixture; + const mockActivatedRoute = { + params: of({ id: 1 }), + snapshot: { params: { id: 1 } }, + }; beforeEach(async () => { await TestBed.configureTestingModule({ @@ -18,7 +24,8 @@ describe('UsersTableComponent', () => { { provide: NZ_ICONS, useValue: [UserAddOutline, TeamOutline] - } + }, + { provide: ActivatedRoute, useValue: mockActivatedRoute } ] }) .compileComponents(); diff --git a/src/app/components/manage-users-components/users-table/users-table.component.ts b/src/app/components/manage-users-components/users-table/users-table.component.ts index 25f6b16..be60228 100644 --- a/src/app/components/manage-users-components/users-table/users-table.component.ts +++ b/src/app/components/manage-users-components/users-table/users-table.component.ts @@ -11,6 +11,7 @@ import { UserService } from '../../../services/user/user.service'; import { NotificationService } from '../../../services/notification/notification.service'; import { Router } from '@angular/router'; import { NzTagComponent } from 'ng-zorro-antd/tag'; +import { BreadCrumpComponent } from "../../bread-crump/bread-crump.component"; @Component({ selector: 'app-users-table', @@ -24,7 +25,8 @@ import { NzTagComponent } from 'ng-zorro-antd/tag'; AddUserComponent, NzPaginationComponent, NzTagComponent, - ], + BreadCrumpComponent +], templateUrl: './users-table.component.html', styleUrl: './users-table.component.scss', })