Add tab parameter to routerLink in event-notifications.component.html…

… and machine-page.component.html
akozma89 · Jan 3, 2024 · 760f390 · 760f390
1 parent ce12ca3
commit 760f390
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/src/app/components/event-notifications/event-notifications.component.html b/src/app/components/event-notifications/event-notifications.component.html
@@ -3,6 +3,7 @@
         nz-row
         class="notification"
         [routerLink]="['/machines', data.machine_id]"
+        [queryParams]="{ tab: 'events' }"
     >
         <div nz-col nzSpan="6">
             <div nz-row>

diff --git a/src/app/pages/machines/components/machine-page/machine-page.component.html b/src/app/pages/machines/components/machine-page/machine-page.component.html
@@ -11,6 +11,7 @@ <h2>Machine Details</h2>
             <nz-col nzSpan="18"></nz-col>
         </nz-row>
         <ng-template #desrciptionTemplate>
+            <p>ID: {{ machine.id }}</p>
             <nz-tag [nzColor]="getStatusColor(machine.status)">
                 {{ machine.status }}
             </nz-tag>
@@ -22,8 +23,7 @@ <h2>Machine Details</h2>
             ></nz-avatar>
         </ng-template>
     </nz-card>
-
-    <nz-tabset>
+    <nz-tabset [nzSelectedIndex]="currentTabIndex">
         <nz-tab nzTitle="Overall">
             <nz-list [nzBordered]="false">
                 <nz-list-item nzNoFlex>

diff --git a/src/app/pages/machines/components/machine-page/machine-page.component.spec.ts b/src/app/pages/machines/components/machine-page/machine-page.component.spec.ts
@@ -27,6 +27,7 @@ describe('MachinePageComponent', () => {
     let fixture: ComponentFixture<MachinePageComponent>;
     let activatedRouteStub: Partial<ActivatedRoute>;
     let paramMapSpy: jasmine.Spy;
+    let queryParamMapSpy: jasmine.Spy;
     let store: MockStore<any>;
 
     beforeEach(() => {
@@ -37,6 +38,9 @@ describe('MachinePageComponent', () => {
             paramMap: {
                 get: paramMapSpy,
             },
+            queryParamMap: {
+                get: queryParamMapSpy,
+            },
         });
 
         TestBed.configureTestingModule({
@@ -71,6 +75,12 @@ describe('MachinePageComponent', () => {
                 get: () => 1,
             })
         );
+        queryParamMapSpy.and.returnValue(
+            of({
+                get: () => 'overall',
+            })
+        );
+
         // WHEN
         fixture.detectChanges();
 
@@ -89,6 +99,11 @@ describe('MachinePageComponent', () => {
                     get: () => id,
                 })
             );
+            queryParamMapSpy.and.returnValue(
+                of({
+                    get: () => 'events',
+                })
+            );
 
             spyOn(store, 'select').and.returnValue(machine$Mock);
             spyOn<any>(machineSelectors, 'selectMachineById');
@@ -98,6 +113,7 @@ describe('MachinePageComponent', () => {
 
             // THEN
             expect(component.machine$).toEqual(machine$Mock);
+            expect(component.currentTabIndex).toEqual(1);
         });
     });
 

diff --git a/src/app/pages/machines/components/machine-page/machine-page.component.ts b/src/app/pages/machines/components/machine-page/machine-page.component.ts
@@ -2,7 +2,7 @@ import { MachineColorStatusMap } from '@interfaces/machine-events-options';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppStore } from '@interfaces/app-store';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Machine } from '@models/machine';
 import { selectMachineById } from '@stores/machines/machines.selectors';
 import { Observable, Subscription } from 'rxjs';
@@ -16,6 +16,12 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzListModule } from 'ng-zorro-antd/list';
 import { MapComponent } from '@components/map/map.component';
 
+const tabMap: { [key: string]: number } = {
+    overall: 0,
+    events: 1,
+    map: 2,
+};
+
 @Component({
     standalone: true,
     selector: 'app-machine-page',
@@ -31,9 +37,11 @@ import { MapComponent } from '@components/map/map.component';
         NzTagModule,
         NzListModule,
         MapComponent,
+        RouterLink,
     ],
 })
 export class MachinePageComponent implements OnInit, OnDestroy {
+    currentTabIndex: number = 0;
     machine$!: Observable<Machine | undefined>;
 
     private subscriptions = new Subscription();
@@ -44,13 +52,19 @@ export class MachinePageComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit(): void {
+        this.currentTabIndex = 0;
         this.subscriptions.add(
             this.activatedRoute.paramMap.subscribe((params) => {
                 this.machine$ = this.store.select(
                     selectMachineById(params.get('id') || '')
                 );
             })
         );
+        this.subscriptions.add(
+            this.activatedRoute.queryParamMap.subscribe((params) => {
+                this.currentTabIndex = tabMap[params.get('tab') || 'overall'];
+            })
+        );
     }
 
     ngOnDestroy(): void {