feat(dashboard): add bread crump (#51)

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';

src/app/components/bread-crump/bread-crump.component.html

@@ -0,0 +1,8 @@
+<nz-breadcrumb>
+  <nz-breadcrumb-item>
+    <a routerLink="/">Home</a>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item *ngFor="let breadcrumb of breadcrumbs">
+    <a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
+  </nz-breadcrumb-item>
+</nz-breadcrumb>

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<BreadCrumpComponent>;
+  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();
+  });
+});

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, ' ');
+  }
+}

src/app/components/edit-user-components/edit-user/edit-user.component.html

@@ -1,4 +1,5 @@
 <div class="edit-user-container" >
+    <app-bread-crump></app-bread-crump>
     <ng-container *ngIf="userData">
         <app-edit-profile [userData]="userData"></app-edit-profile>
       </ng-container>

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',
 })

src/app/components/manage-users-components/users-table/users-table.component.html

@@ -1,4 +1,6 @@
+
 <div class="container">
+  <app-bread-crump></app-bread-crump>
   <div class="container__description">
     <h1 class="container__description__title">Manage Users</h1>
     <p class="container__description__text">

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<UsersTableComponent>;
+  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();

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',
 })