Untitled

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRouteSnapshot, Router, RoutesRecognized } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { MenuItem } from 'primeng/api';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { ExperimentResponse } from 'src/app/api/models';
import { ExperimentReportService } from '../../experiments/experiment-report/services';
@UntilDestroy()
@Component({
  selector: 'app-breadcrumbs',
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BreadcrumbsComponent implements OnInit {
  breadcrumbs$ = new BehaviorSubject<MenuItem[]>([]);
  isLoaded$ = new BehaviorSubject<boolean>(false);

  constructor(
    private router: Router,
    private experimentReportService: ExperimentReportService,
  ) {
  }

  ngOnInit(): void {
    this.router.events.pipe(
      filter((events: any) => events instanceof RoutesRecognized && events.state.root instanceof ActivatedRouteSnapshot)
    ).subscribe((event) => {
      this.createBreadcrumbs(event.state.root);
    });
  }

  createBreadcrumbs(activatedRouteSnapshot: ActivatedRouteSnapshot): void {
    const breadcrumbs: MenuItem[] = [];

    let path = '';

    while (true) {
      if (
        activatedRouteSnapshot instanceof ActivatedRouteSnapshot &&
        typeof activatedRouteSnapshot.data?.breadcrumb === 'string'
      ) {
        activatedRouteSnapshot.url.forEach((url) => {
          path += `${url.path}/`;
        });

        breadcrumbs.push({
          url: `${path}`,
          label: activatedRouteSnapshot.data?.breadcrumb,
          // isHref: activatedRouteSnapshot.data?.breadcrumb === 'Report',
        });

        if (activatedRouteSnapshot.data?.breadcrumb === ('Report' || 'Scenario')) {
          this.addExperimentName(breadcrumbs);
        }
      }

      if (activatedRouteSnapshot.firstChild instanceof ActivatedRouteSnapshot) {
        activatedRouteSnapshot = activatedRouteSnapshot.firstChild;
      } else {
        break;
      }
    }

    this.breadcrumbs$.next(breadcrumbs);
  }

  trackByFn(index: number): number {
    return index;
  }

  private addExperimentName(breadcrumbs: MenuItem[]): void {
    this.experimentReportService.experiment$
      .pipe(
        untilDestroyed(this)
      )
      .subscribe(
        (experiment: ExperimentResponse) => {
          if (!experiment.name) {
            return;
          }

          const breadcrumbAlreadyExists = breadcrumbs.findIndex(b => b.label === experiment.name) !== -1;
          breadcrumbs.splice(1, breadcrumbAlreadyExists ? 1 : 0, {
            label: experiment.name,
          });

          this.breadcrumbs$.next(breadcrumbs);
          this.isLoaded$.next(true);
        }
      );
  }
}