From 833d8a6f349b3932b06b2b7197e69ac85c6a27d4 Mon Sep 17 00:00:00 2001
From: Armin <arminmow@gmail.com>
Date: Sat, 24 Aug 2024 10:45:59 +0330
Subject: [PATCH] add bread crump

---
 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 | 23 ++++++++++
 .../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.ts      |  4 +-
 9 files changed, 81 insertions(+), 3 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 @@
+<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>
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..1e2a2ef
--- /dev/null
+++ b/src/app/components/bread-crump/bread-crump.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BreadCrumpComponent } from './bread-crump.component';
+
+describe('BreadCrumpComponent', () => {
+  let component: BreadCrumpComponent;
+  let fixture: ComponentFixture<BreadCrumpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BreadCrumpComponent]
+    })
+    .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..e91f9ca
--- /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 { ActivatedRoute, 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: Array<{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 @@
 <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>
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 @@
+
 <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">
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',
 })