feat: breadcrumbs

interfaces/IBF-dashboard/src/app/auth/auth.guard.ts

@@ -25,12 +25,11 @@ export class AuthGuard implements CanActivate {
     | UrlTree {
     const url: string = state.url;
 
-    return this.checkLogin(url, next);
+    return this.checkLogin(url);
   }
 
-  checkLogin(url: string, route: ActivatedRouteSnapshot): boolean {
+  checkLogin(url: string): boolean {
     if (this.authService.isLoggedIn()) {
-      console.log('route: ', route);
       return true;
     }
 

interfaces/IBF-dashboard/src/app/components/about-btn/about-btn.component.ts

@@ -5,7 +5,11 @@ import {
   AnalyticsPage,
 } from 'src/app/analytics/analytics.enum';
 import { AnalyticsService } from 'src/app/analytics/analytics.service';
-import { Country, DisasterType } from 'src/app/models/country.model';
+import {
+  Country,
+  CountryDisasterSettings,
+  DisasterType,
+} from 'src/app/models/country.model';
 import { CountryService } from 'src/app/services/country.service';
 import { EventService } from 'src/app/services/event.service';
 import { DisasterTypeService } from '../../services/disaster-type.service';
@@ -23,6 +27,7 @@ export class AboutBtnComponent implements OnDestroy {
   private countrySubscription: Subscription;
   private disasterType: DisasterType;
   private disasterTypeSubscription: Subscription;
+  private countryDisasterSettings: CountryDisasterSettings;
 
   constructor(
     private countryService: CountryService,
@@ -50,6 +55,10 @@ export class AboutBtnComponent implements OnDestroy {
 
   private onDisasterTypeChange = (disasterType: DisasterType) => {
     this.disasterType = disasterType;
+    this.countryDisasterSettings = this.disasterTypeService.getCountryDisasterTypeSettings(
+      this.country,
+      this.disasterType,
+    );
   };
 
   public btnAction() {
@@ -60,11 +69,7 @@ export class AboutBtnComponent implements OnDestroy {
     });
 
     if (this.country && this.disasterType) {
-      window.open(
-        this.country.countryDisasterSettings.find(
-          (s) => s.disasterType === this.disasterType.disasterType,
-        ).eapLink,
-      );
+      window.open(this.countryDisasterSettings?.eapLink);
     }
   }
 }

interfaces/IBF-dashboard/src/app/components/admin-level/admin-level.component.html

@@ -1,54 +1,118 @@
-<div class="ion-padding-top ibf-admin-level-buttons">
-  <ion-button
-    *ngIf="getAdminLevelLabel(adminLevel.adminLevel1)"
-    size="small"
-    class="ibf-admin-level-button"
-    fill="solid"
-    [color]="
-      isAdminLevelActive(adminLevel.adminLevel1) ? 'ibf-primary' : 'ibf-white'
-    "
-    [disabled]="isAdminLevelDisabled(adminLevel.adminLevel1)"
-    (click)="clickAdminLevelButton(adminLevel.adminLevel1)"
-  >
-    {{ getAdminLevelLabel(adminLevel.adminLevel1) }}
-  </ion-button>
-  <ion-button
-    *ngIf="getAdminLevelLabel(adminLevel.adminLevel2)"
-    size="small"
-    class="ibf-admin-level-button"
-    fill="solid"
-    [color]="
-      isAdminLevelActive(adminLevel.adminLevel2) ? 'ibf-primary' : 'ibf-white'
-    "
-    [disabled]="isAdminLevelDisabled(adminLevel.adminLevel2)"
-    (click)="clickAdminLevelButton(adminLevel.adminLevel2)"
-  >
-    {{ getAdminLevelLabel(adminLevel.adminLevel2) }}
-  </ion-button>
-  <ion-button
-    *ngIf="getAdminLevelLabel(adminLevel.adminLevel3)"
-    size="small"
-    class="ibf-admin-level-button"
-    fill="solid"
-    [color]="
-      isAdminLevelActive(adminLevel.adminLevel3) ? 'ibf-primary' : 'ibf-white'
-    "
-    [disabled]="isAdminLevelDisabled(adminLevel.adminLevel3)"
-    (click)="clickAdminLevelButton(adminLevel.adminLevel3)"
-  >
-    {{ getAdminLevelLabel(adminLevel.adminLevel3) }}
-  </ion-button>
-  <ion-button
-    *ngIf="getAdminLevelLabel(adminLevel.adminLevel4)"
-    size="small"
-    class="ibf-admin-level-button"
-    fill="solid"
-    [color]="
-      isAdminLevelActive(adminLevel.adminLevel4) ? 'ibf-primary' : 'ibf-white'
-    "
-    [disabled]="isAdminLevelDisabled(adminLevel.adminLevel4)"
-    (click)="clickAdminLevelButton(adminLevel.adminLevel4)"
-  >
-    {{ getAdminLevelLabel(adminLevel.adminLevel4) }}
-  </ion-button>
-</div>
+<ng-container
+  *ngIf="useBreadcrumbs(disasterType); then breadcrumbs; else tabs"
+></ng-container>
+<ng-template #breadcrumbs>
+  <div class="ion-margin-start breadcrumbs-container">
+    <ion-button
+      *ngIf="showBreadcrumb(mapViewEnum.national)"
+      class="breadcrumb"
+      [ngClass]="
+        currentMapView === mapViewEnum.national
+          ? 'breadcrumb-alone'
+          : 'breadcrumb-start'
+      "
+      [class.selected]="currentMapView === mapViewEnum.national"
+      (click)="
+        clickBreadcrumbButton(
+          mapViewEnum.national,
+          currentMapView === mapViewEnum.national
+        )
+      "
+    >
+      {{ 'breadcrumbs.national-view' | translate }}
+    </ion-button>
+    <ion-button
+      *ngIf="showBreadcrumb(mapViewEnum.event)"
+      class="breadcrumb"
+      [ngClass]="
+        currentMapView === mapViewEnum.event
+          ? 'breadcrumb-end'
+          : 'breadcrumb-middle'
+      "
+      [class.selected]="currentMapView === mapViewEnum.event"
+      (click)="
+        clickBreadcrumbButton(
+          mapViewEnum.event,
+          currentMapView === mapViewEnum.event
+        )
+      "
+    >
+      {{ eventState?.event?.eventName }}
+    </ion-button>
+    <ion-button
+      *ngIf="showBreadcrumb(mapViewEnum.adminArea)"
+      class="breadcrumb"
+      [ngClass]="
+        currentMapView === mapViewEnum.adminArea
+          ? 'breadcrumb-end'
+          : 'breadcrumb-middle'
+      "
+      [class.selected]="currentMapView === mapViewEnum.adminArea"
+      (click)="
+        clickBreadcrumbButton(
+          mapViewEnum.adminArea,
+          currentMapView === mapViewEnum.adminArea
+        )
+      "
+      [innerHtml]="
+        currentMapView === mapViewEnum.adminArea
+          ? placeCode?.placeCodeName
+          : currentMapView === mapViewEnum.adminArea2
+          ? placeCode?.placeCodeParent?.placeCodeName
+          : placeCode?.placeCodeParent?.placeCodeParent?.placeCodeName
+      "
+    >
+    </ion-button>
+    <ion-button
+      *ngIf="showBreadcrumb(mapViewEnum.adminArea2)"
+      class="breadcrumb"
+      [ngClass]="
+        currentMapView === mapViewEnum.adminArea2
+          ? 'breadcrumb-end'
+          : 'breadcrumb-middle'
+      "
+      [class.selected]="currentMapView === mapViewEnum.adminArea2"
+      (click)="
+        clickBreadcrumbButton(
+          mapViewEnum.adminArea2,
+          currentMapView === mapViewEnum.adminArea2
+        )
+      "
+      [innerHtml]="
+        currentMapView === mapViewEnum.adminArea2
+          ? placeCode?.placeCodeName
+          : placeCode?.placeCodeParent?.placeCodeName
+      "
+    >
+    </ion-button>
+    <ion-button
+      *ngIf="showBreadcrumb(mapViewEnum.adminArea3)"
+      class="breadcrumb breadcrumb-end"
+      [class.selected]="currentMapView === mapViewEnum.adminArea3"
+      (click)="
+        clickBreadcrumbButton(
+          mapViewEnum.adminArea3,
+          currentMapView === mapViewEnum.adminArea3
+        )
+      "
+    >
+      {{ placeCode?.placeCodeName }}
+    </ion-button>
+  </div>
+</ng-template>
+<ng-template #tabs>
+  <div class="ion-margin-start breadcrumbs-container">
+    <ion-button
+      *ngFor="let button of adminLevelButtons | async"
+      size="small"
+      fill="solid"
+      class="breadcrumb"
+      [ngClass]="button.buttonTypeClass"
+      [class.selected]="isAdminLevelActive(button.adminLevel, button.disabled)"
+      [disabled]="button.disabled"
+      (click)="clickAdminLevelButton(button.adminLevel)"
+    >
+      {{ button.label }}
+    </ion-button>
+  </div>
+</ng-template>

interfaces/IBF-dashboard/src/app/components/admin-level/admin-level.component.scss

@@ -1,17 +1,41 @@
-.ibf-admin-level-buttons {
-  margin-left: 5px;
-  .ibf-admin-level-button {
-    margin-left: 0px;
-    margin-right: 0px;
-    text-transform: uppercase;
-    height: 16px;
-    font-size: 7px;
-    font-weight: 700;
+.breadcrumbs-container {
+  margin-top: 20px;
+}
+
+.breadcrumb {
+  height: var(--breadcrumb-height);
+  font-size: 12px;
+
+  margin: 0;
+  --box-shadow: none;
+
+  --background: var(--ion-color-ibf-white);
+  --border-color: var(--ion-color-ibf-no-alert-primary);
+  --border-width: 2px;
+  --border-style: solid;
+  --color: var(--ion-color-ibf-no-alert-primary);
+
+  &.selected {
+    --background: var(--ion-color-ibf-no-alert-primary);
+
+    --color: var(--ion-color-ibf-white);
   }
 }
 
-ion-button {
-  border: 1px solid var(--ion-color-ibf-primary);
+.breadcrumb-start {
+  --border-width: 2px 0px 2px 2px;
+  --border-radius: var(--breadcrumb-radius) 0 0 var(--breadcrumb-radius);
+}
+
+.breadcrumb-middle {
   --border-radius: 0;
-  --box-shadow: none;
+  --border-width: 2px 0px 2px 2px;
+}
+
+.breadcrumb-end {
+  --border-radius: 0 var(--breadcrumb-radius) var(--breadcrumb-radius) 0;
+}
+
+.breadcrumb-alone {
+  --border-radius: var(--breadcrumb-radius);
 }