switch tabs without navigation

Sage-Bionetworks · Nov 3, 2023 · 608c7ca · 608c7ca
1 parent 5a74e88
commit 608c7ca
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/libs/openchallenges/challenge/src/lib/challenge.component.html b/libs/openchallenges/challenge/src/lib/challenge.component.html
@@ -28,24 +28,21 @@ <h2>
         <div class="profile-nav-group">
           <a
             class="profile-nav-item"
-            routerLink="."
-            [queryParams]="{ tab: 'overview' }"
+            (click)="updateTab(tabs['overview'])"
             [ngClass]="{ 'active-tab': activeTab === tabs['overview'] }"
           >
             Overview
           </a>
           <a
             class="profile-nav-item"
-            routerLink="."
-            [queryParams]="{ tab: 'contributors' }"
+            (click)="updateTab(tabs['contributors'])"
             [ngClass]="{ 'active-tab': activeTab === tabs['contributors'] }"
           >
             Contributors
           </a>
           <a
             class="profile-nav-item"
-            routerLink="."
-            [queryParams]="{ tab: 'organizers' }"
+            (click)="updateTab(tabs['organizers'])"
             [ngClass]="{ 'active-tab': activeTab === tabs['organizers'] }"
           >
             Organizers

diff --git a/libs/openchallenges/challenge/src/lib/challenge.component.ts b/libs/openchallenges/challenge/src/lib/challenge.component.ts
@@ -37,9 +37,10 @@ import { ChallengeOrganizersComponent } from './challenge-organizers/challenge-o
 import { ChallengeOverviewComponent } from './challenge-overview/challenge-overview.component';
 import { ChallengeStargazersComponent } from './challenge-stargazers/challenge-stargazers.component';
 import { ChallengeStatsComponent } from './challenge-stats/challenge-stats.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import { SeoService } from '@sagebionetworks/shared/util';
 import { getSeoData } from './challenge-seo-data';
+import { HttpParams } from '@angular/common/http';
 
 @Component({
   selector: 'openchallenges-challenge',
@@ -83,7 +84,8 @@ export class ChallengeComponent implements OnInit {
     private challengeService: ChallengeService,
     private readonly configService: ConfigService,
     private seoService: SeoService,
-    private renderer2: Renderer2
+    private renderer2: Renderer2,
+    private _location: Location
   ) {
     this.appVersion = this.configService.config.appVersion;
     this.dataUpdatedOn = this.configService.config.dataUpdatedOn;
@@ -143,6 +145,16 @@ export class ChallengeComponent implements OnInit {
     this.subscriptions.push(activeTabSub);
   }
 
+  updateTab(activeTab: Tab) {
+    this.activeTab = activeTab;
+    const queryParams = { tab: activeTab.name };
+    const newParam = new HttpParams({
+      fromObject: queryParams,
+    });
+    console.log(location.pathname);
+    this._location.replaceState(location.pathname, newParam.toString());
+  }
+
   // calcDays(startDate: string, endDate: string): number {
   //   const timeDiff = +new Date(endDate) - +new Date(startDate);
   //   return Math.round(timeDiff / (1000 * 60 * 60 * 24));