feat(arc): implement breadcrumb feature

GH-126

Author: Vaibhav Bhalla

package-lock.json

@@ -1,8 +1,10 @@
-export const USERS = [
+import {TitleDetails, UserDetails} from './user-title.interface';
+
+export const USERS: UserDetails[] = [
   {id: '123', name: 'John Doe', email: 'john.doe123@example.com'},
   {id: '124', name: 'Jane Smith', email: 'jane.smith124@example.com'},
 ];
-export const TITLES = [
+export const TITLES: TitleDetails[] = [
   {id: '1', title: 'Contract.pdf'},
   {id: '2', title: 'Appointment.pdf'},
 ];

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/mock-data.constants.ts

@@ -1,9 +1,9 @@
-export interface User {
+export interface UserDetails {
   id: string;
   name: string;
   email: string;
 }
-export interface Title {
+export interface TitleDetails {
   id: string;
   title: string;
 }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title.interface.ts

@@ -1,13 +1,13 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {Title} from '../user-title.interface';
+import {TitleDetails} from '../user-title.interface';
 
 @Component({
   selector: 'lib-user-title',
   templateUrl: './user-title.component.html',
 })
 export class UserTitleComponent {
-  title: Title;
+  title: TitleDetails;
   constructor(private readonly route: ActivatedRoute) {
     this.title = this.route.snapshot.data['document'];
   }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.component.ts

@@ -2,14 +2,15 @@ import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot} from '@angular/router';
 import {Observable} from 'rxjs';
 import {TitleService} from './user-title.service';
-import {Title} from '../user-title.interface';
+import {TitleDetails} from '../user-title.interface';
 
 @Injectable()
 export class TitleResolver {
   constructor(private readonly titleService: TitleService) {}
 
-  resolve(route: ActivatedRouteSnapshot): Observable<Title> {
+  resolve(route: ActivatedRouteSnapshot): Observable<TitleDetails> {
     const id = route.paramMap.get('id');
+    console.log(this.titleService.getTitleById(id));
     return this.titleService.getTitleById(id);
   }
 }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

@@ -1,12 +1,13 @@
 import {Injectable} from '@angular/core';
 import {Observable, of} from 'rxjs';
 import {TITLES} from '../mock-data.constants';
+import {TitleDetails} from '../user-title.interface';
 
 @Injectable()
 export class TitleService {
   private readonly titles = TITLES;
 
-  getTitleById(id: string): Observable<any> {
+  getTitleById(id: string): Observable<TitleDetails> {
     const title = this.titles.find(u => u.id === id);
     return of(title);
   }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service.ts

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {Component} from '@angular/core';
 import {ActivatedRoute, RouterModule} from '@angular/router';
-import {User} from '../user-title.interface';
+import {UserDetails} from '../user-title.interface';
 import {UserResolver} from './user.resolver';
 
 @Component({
@@ -11,7 +11,7 @@ import {UserResolver} from './user.resolver';
   imports: [CommonModule, RouterModule],
 })
 export class UserComponent {
-  user: User;
+  user: UserDetails;
 
   constructor(private readonly route: ActivatedRoute) {
     this.user = this.route.snapshot.data['user'];

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.component.ts

@@ -2,13 +2,13 @@ import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot} from '@angular/router';
 import {Observable} from 'rxjs';
 import {UserService} from './user.service';
-import {User} from '../user-title.interface';
+import {UserDetails} from '../user-title.interface';
 
 @Injectable()
 export class UserResolver {
   constructor(private readonly userService: UserService) {}
 
-  resolve(route: ActivatedRouteSnapshot): Observable<User> {
+  resolve(route: ActivatedRouteSnapshot): Observable<UserDetails> {
     const id = route.paramMap.get('id');
     return this.userService.getUserById(id);
   }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.resolver.ts

@@ -1,12 +1,13 @@
 import {Injectable} from '@angular/core';
 import {Observable, of} from 'rxjs';
 import {USERS} from '../mock-data.constants';
+import {UserDetails} from '../user-title.interface';
 
 @Injectable()
 export class UserService {
   private readonly users = USERS;
 
-  getUserById(id: string): Observable<any> {
+  getUserById(id: string): Observable<UserDetails> {
     const user = this.users.find(u => u.id === id);
     return of(user);
   }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.service.ts

@@ -2,7 +2,7 @@ import {Component, Input, isDevMode, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Breadcrumb} from './breadcrumb.interface';
 import {BreadcrumbService} from './breadcrumb.service';
-import {Observable} from 'rxjs';
+import {Observable, Subject, takeUntil} from 'rxjs';
 import {RouterModule} from '@angular/router';
 
 @Component({
@@ -22,14 +22,19 @@ export class BreadcrumbComponent implements OnInit {
   @Input() itemClass = 'breadcrumb-item';
 
   expanded = false;
+  private destroy$ = new Subject<void>();
   constructor(private readonly breadcrumbService: BreadcrumbService) {}
   ngOnInit(): void {
-    this.breadcrumbs$.subscribe(breadcrumbs => {
+    this.breadcrumbs$.pipe(takeUntil(this.destroy$)).subscribe(breadcrumbs => {
       if (isDevMode()) {
         console.log('Breadcrumbs:', breadcrumbs);
       }
     });
   }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
   toggleExpand() {
     this.expanded = true;
   }

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -53,16 +53,25 @@ export class BreadcrumbService {
   private _resolveLabel(route: ActivatedRouteSnapshot, path: string): string {
     const breadcrumbData = route.routeConfig.data?.['breadcrumb'];
 
-    if (typeof breadcrumbData === 'function') {
-      return breadcrumbData(route.data, route.paramMap, route);
-    }
-    if (typeof breadcrumbData === 'string') {
-      return breadcrumbData;
-    }
-    if (route.routeConfig.path?.startsWith(':')) {
-      const paramName = route.routeConfig.path.slice(1);
-      return route.params[paramName] ?? paramName;
+    const conditions: [boolean, () => string][] = [
+      [
+        typeof breadcrumbData === 'function',
+        () => breadcrumbData(route.data, route.paramMap, route),
+      ],
+      [typeof breadcrumbData === 'string', () => breadcrumbData],
+      [
+        route.routeConfig.path?.startsWith(':'),
+        () => {
+          const paramName = route.routeConfig.path.slice(1);
+          return route.params[paramName] ?? paramName;
+        },
+      ],
+    ];
+
+    for (const [condition, action] of conditions) {
+      if (condition) return action();
     }
+
     return this._toTitleCase(path);
   }
 

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

@@ -1,10 +1,14 @@
 import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import {ParamMap, RouterModule, Routes} from '@angular/router';
 import {MainComponent} from './main.component';
 import {UserComponent} from '@project-lib/components/breadcrumb/breadcrumb-demo/user/user.component';
 import {UserResolver} from '@project-lib/components/breadcrumb/breadcrumb-demo/user/user.resolver';
 import {UserTitleComponent} from '@project-lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.component';
 import {TitleResolver} from '@project-lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver';
+import {
+  TitleDetails,
+  UserDetails,
+} from '@project-lib/components/breadcrumb/breadcrumb-demo/user-title.interface';
 
 const routes: Routes = [
   {
@@ -40,7 +44,7 @@ const routes: Routes = [
         component: UserComponent,
         resolve: {user: UserResolver},
         data: {
-          breadcrumb: (data: any, params: any) =>
+          breadcrumb: (data: {user?: UserDetails}, params: ParamMap) =>
             data.user?.name ?? `User #${params.get('id')}`,
         },
         children: [
@@ -49,7 +53,7 @@ const routes: Routes = [
             component: UserTitleComponent,
             resolve: {document: TitleResolver},
             data: {
-              breadcrumb: (data: any, params: any) =>
+              breadcrumb: (data: {document?: TitleDetails}, params: ParamMap) =>
                 data.document?.title ?? `Document #${params.get('id')}`,
             },
           },

projects/arc/src/app/main/main-routing.module.ts

@@ -1,15 +1,21 @@
-import { Location } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { NbToastrService } from '@nebular/theme';
-import { AnyObject } from '@project-lib/core/api';
-import { environment } from 'projects/saas-ui/src/environment';
-import { Lead } from '../../../shared/models';
-import { BillingPlanService } from '../../../shared/services/billing-plan-service';
-import { OnBoardingService } from '../../../shared/services/on-boarding-service';
-
-declare let Stripe: any;
+import {Location} from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {ActivatedRoute, Router} from '@angular/router';
+import {NbToastrService} from '@nebular/theme';
+import {AnyObject} from '@project-lib/core/api';
+import {environment} from 'projects/saas-ui/src/environment';
+import {Lead} from '../../../shared/models';
+import {BillingPlanService} from '../../../shared/services/billing-plan-service';
+import {OnBoardingService} from '../../../shared/services/on-boarding-service';
+import {Stripe} from '@stripe/stripe-js';
+declare let Stripe: (key: string) => Stripe;
 
 @Component({
   selector: 'app-add-tenant',
@@ -36,11 +42,18 @@ export class AddTenantComponent implements OnInit, AfterViewInit {
     private billingPlanService: BillingPlanService,
   ) {
     this.addTenantForm = this.fb.group({
-      key: ['', [Validators.required, Validators.maxLength(10), Validators.pattern('^[a-zA-Z][a-zA-Z0-9]*$')]],
+      key: [
+        '',
+        [
+          Validators.required,
+          Validators.maxLength(10),
+          Validators.pattern('^[a-zA-Z][a-zA-Z0-9]*$'),
+        ],
+      ],
       domains: [''],
-      planId: [null, Validators.required],  // Mark planId as required
-      paymentMethod: ['payment_source'],     // Specify Stripe as payment method
-      paymentToken: ['', Validators.required] // New FormControl for Stripe token
+      planId: [null, Validators.required], // Mark planId as required
+      paymentMethod: ['payment_source'], // Specify Stripe as payment method
+      paymentToken: ['', Validators.required], // New FormControl for Stripe token
     });
   }
 
@@ -67,14 +80,14 @@ export class AddTenantComponent implements OnInit, AfterViewInit {
           fontSmoothing: 'antialiased',
           fontSize: '16px',
           '::placeholder': {
-            color: '#aab7c4'
-          }
+            color: '#aab7c4',
+          },
         },
         invalid: {
           color: '#fa755a',
-          iconColor: '#fa755a'
-        }
-      }
+          iconColor: '#fa755a',
+        },
+      },
     });
 
     this.cardElement.mount(this.cardNumberElement.nativeElement);
@@ -83,7 +96,7 @@ export class AddTenantComponent implements OnInit, AfterViewInit {
     this.cardElement.on('change', (event: any) => {
       if (event.error) {
         this.toastrService.danger(event.error.message, 'Error');
-        this.addTenantForm.get('paymentToken')?.setValue('');  // Clear paymentToken on error
+        this.addTenantForm.get('paymentToken')?.setValue(''); // Clear paymentToken on error
       } else if (event.complete) {
         this.generateStripeToken();
       }
@@ -92,7 +105,7 @@ export class AddTenantComponent implements OnInit, AfterViewInit {
 
   // Generate token and set it to the form when payment details are complete
   async generateStripeToken() {
-    const { token, error } = await this.stripe.createToken(this.cardElement);
+    const {token, error} = await this.stripe.createToken(this.cardElement);
     if (error) {
       this.toastrService.danger(error.message, 'Error');
     } else {
@@ -115,7 +128,7 @@ export class AddTenantComponent implements OnInit, AfterViewInit {
 
       this.onboardingService.addTenant(domainData, this.leadId).subscribe(
         () => this.router.navigate(['/tenant/registration/complete']),
-        error => this.toastrService.danger('Registration failed', 'Error')
+        error => this.toastrService.danger('Registration failed', 'Error'),
       );
     }
   }
@@ -128,13 +141,15 @@ export class AddTenantComponent implements OnInit, AfterViewInit {
       },
       error => {
         this.toastrService.danger('Failed to fetch lead data', 'Error');
-      }
+      },
     );
   }
 
   updateDomainFromEmail() {
     if (this.leadData && this.leadData.email) {
-      const emailDomain = this.leadData.email?.substring(this.leadData.email.lastIndexOf('@') + 1);
+      const emailDomain = this.leadData.email?.substring(
+        this.leadData.email.lastIndexOf('@') + 1,
+      );
       if (emailDomain) {
         this.addTenantForm.get('domains').setValue(emailDomain);
       }