fixed tap switch rendering full page

Author: Lauest-Iterator

src/app/applications/applications-list/applications-list.component.html

@@ -25,10 +25,11 @@ <h2>{{ "WELCOME-DIALOG.NO-ACCESS" | translate }}</h2>
       <app-application-filter />
       <app-applications-list-dashboard />
       <div class="switch-content-container">
-        <app-basic-tap-switch [tabs]="tabs"> </app-basic-tap-switch>
-        @if(router.url === mapRoute){
+        <app-basic-tap-switch [tabs]="tabs" [currentUrl]="currentPath" (tabClicked)="onTapClicked($event)">
+        </app-basic-tap-switch>
+        @if(currentPath === mapRoute){
         <app-application-map></app-application-map>
-        } @if(router.url === listRoute){
+        } @if(currentPath === listRoute){
         <app-applications-table [organizationId]="organizationId" *ngIf="organizationId"></app-applications-table>
         }
       </div>

src/app/applications/applications-list/applications-list.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { MatIconRegistry } from "@angular/material/icon";
 import { DomSanitizer, Title } from "@angular/platform-browser";
-import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { UserMinimalService } from "@app/admin/users/user-minimal.service";
 import { NavbarComponent } from "@app/navbar/navbar.component";
 import { ApplicationService } from "@applications/application.service";
@@ -115,11 +115,7 @@ export class ApplicationsListComponent implements OnInit {
     // Authenticate user
     this.verifyUserAndInit();
 
-    this.router.events.subscribe(event => {
-      if (event instanceof NavigationEnd) {
-        this.currentPath = event.url;
-      }
-    });
+    this.currentPath = this.router.url;
   }
 
   verifyUserAndInit() {
@@ -215,4 +211,8 @@ export class ApplicationsListComponent implements OnInit {
       this.isLoadingResults = false;
     });
   }
+
+  onTapClicked(url: string) {
+    this.currentPath = url;
+  }
 }

src/app/shared/components/basic-tap-switch/basic-tap-switch.component.html

@@ -1,14 +1,17 @@
 <div class="main-container">
-  @for (tab of tabs; track tab.title; let idx = $index) {
-  <div [ngClass]="index === idx ? 'active-tap' : 'inactive-tap'" class="tap-base" (click)="onClick(tab.uri)">
+  @for (tab of tabs; track tab.title;) {
+  <div [ngClass]="currentUrl === tab.uri ? 'active-tap' : 'inactive-tap'" class="tap-base" (click)="onClick(tab.uri)">
     @if(tab.icon){
-    <mat-icon [ngClass]="index === idx ? 'active-tap-icon' : 'inactive-tap-icon'" svgIcon="{{ tab.icon.matSVGSrc }}" />
+    <mat-icon
+      [ngClass]="currentUrl === tab.uri ? 'active-tap-icon' : 'inactive-tap-icon'"
+      svgIcon="{{ tab.icon.matSVGSrc }}"
+    />
     }
     {{ tab.title }}
-    @for (counter of tab.counters; track counter; let idx = $index) {
+    @for (counter of tab.counters; track counter;) {
     <div
       class="counter-base {{
-        'counter-' + (counter.color === 'default' && index !== idx ? 'default-inactive' : counter.color)
+        'counter-' + (counter.color === 'default' && currentUrl === tab.uri ? 'default-inactive' : counter.color)
       }}"
     >
       {{ counter.value }}

src/app/shared/components/basic-tap-switch/basic-tap-switch.component.ts

@@ -1,5 +1,5 @@
 import { Location, NgClass } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIcon } from "@angular/material/icon";
 import { Router } from "@angular/router";
@@ -30,14 +30,15 @@ export interface Tab {
   styleUrl: "./basic-tap-switch.component.scss",
 })
 export class BasicTapSwitchComponent {
-  index: number = 0;
-  @Input() tabs!: Tab[];
+  @Input() currentUrl: string;
+  @Input() tabs: Tab[];
+
+  @Output() tabClicked = new EventEmitter<string>();
 
   constructor(private router: Router, private _location: Location) {}
 
   onClick(uri: string) {
-    this.router.navigateByUrl(uri, {
-      replaceUrl: true,
-    });
+    this._location.go(uri);
+    this.tabClicked.emit(uri);
   }
 }