Merge pull request #354 from ioet/279-mark-selected-menu-option

feat: #279 Highlighting selected menu option

Author: enriquezrene

src/app/modules/shared/components/sidebar/models/item-sidebar.model.ts

@@ -2,4 +2,5 @@ export interface ItemSidebar {
   route: string;
   icon: string;
   text: string;
+  active: boolean;
 }

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -10,9 +10,10 @@
         [routerLink]="item.route"
         routerLinkActive=""
         class="item-hover item"
+        [ngClass]="{active: item.active}"
       >
-        <i class="{{ item.icon }}"></i> {{ item.text }}</a
-      >
+        <i class="{{ item.icon }}"></i> {{ item.text }}
+      </a>
     </div>
   </div>
   <!-- /#sidebar-wrapper -->

src/app/modules/shared/components/sidebar/sidebar.component.scss

@@ -28,11 +28,16 @@
     overflow-y: auto;
   }
 
-  .background-item-sidebar-active,
 
   .item-hover:hover {
     color: #16BAC5;
   }
+
+  .active {
+    color: #16BAC5;
+    font-weight: bold;
+    text-decoration: underline;
+  }
 }
 
 .container {

src/app/modules/shared/components/sidebar/sidebar.component.spec.ts

@@ -1,12 +1,20 @@
-import { AzureAdB2CService } from 'src/app/modules/login/services/azure.ad.b2c.service';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {AzureAdB2CService} from 'src/app/modules/login/services/azure.ad.b2c.service';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { SidebarComponent } from './sidebar.component';
+import {SidebarComponent} from './sidebar.component';
+import {RouterTestingModule} from '@angular/router/testing';
+import {Router, Routes} from '@angular/router';
+import {TimeClockComponent} from '../../../time-clock/pages/time-clock.component';
+import {provideMockStore} from '@ngrx/store/testing';
 
 describe('SidebarComponent', () => {
   let component: SidebarComponent;
   let fixture: ComponentFixture<SidebarComponent>;
   let azureAdB2CServiceStubInjected;
+  let router;
+  const routes: Routes = [
+    {path: 'time-clock', component: TimeClockComponent}
+  ];
 
   const azureAdB2CServiceStub = {
     isLogin() {
@@ -19,12 +27,15 @@ describe('SidebarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ],
+      declarations: [SidebarComponent],
       providers: [
-        { providers: AzureAdB2CService, useValue: azureAdB2CServiceStub},
-      ]
+        {providers: AzureAdB2CService, useValue: azureAdB2CServiceStub},
+        provideMockStore({initialState: {}})
+      ],
+      imports: [RouterTestingModule.withRoutes(routes)]
     })
-    .compileComponents();
+      .compileComponents();
+    router = TestBed.inject(Router);
   }));
 
   beforeEach(() => {
@@ -42,7 +53,7 @@ describe('SidebarComponent', () => {
   it('admin users have five menu items', () => {
     spyOn(azureAdB2CServiceStubInjected, 'isAdmin').and.returnValue(true);
 
-    component.getItemsSidebar();
+    component.getSidebarItems();
     const menuItems = component.itemsSidebar;
 
     expect(menuItems.length).toBe(5);
@@ -51,10 +62,21 @@ describe('SidebarComponent', () => {
   it('non admin users have two menu items', () => {
     spyOn(azureAdB2CServiceStubInjected, 'isAdmin').and.returnValue(false);
 
-    component.getItemsSidebar();
+    component.getSidebarItems();
     const menuItems = component.itemsSidebar;
 
     expect(menuItems.length).toBe(2);
   });
 
+  it('when item is selected is should be set as active and the others as inactive', () => {
+    const route = 'time-clock';
+    router.navigate([route]);
+
+    component.itemsSidebar.filter(item => item.route === `/${route}`).map(item => {
+      expect(item.active).toBeTrue();
+    });
+    component.itemsSidebar.filter(item => item.route !== `/${route}`).map(item => {
+      expect(item.active).toBeFalse();
+    });
+  });
 });

src/app/modules/shared/components/sidebar/sidebar.component.ts

@@ -1,34 +1,52 @@
-import { AzureAdB2CService } from 'src/app/modules/login/services/azure.ad.b2c.service';
-import { Component, OnInit } from '@angular/core';
-import { ItemSidebar } from './models/item-sidebar.model';
+import {AzureAdB2CService} from 'src/app/modules/login/services/azure.ad.b2c.service';
+import {Component, OnInit} from '@angular/core';
+import {ItemSidebar} from './models/item-sidebar.model';
+import {NavigationStart, Router} from '@angular/router';
+import {Observable} from 'rxjs';
+import {filter} from 'rxjs/operators';
+
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss'],
 })
 export class SidebarComponent implements OnInit {
   itemsSidebar: ItemSidebar[] = [];
+  navStart;
 
-  constructor(private azureAdB2CService: AzureAdB2CService) {}
+  constructor(private azureAdB2CService: AzureAdB2CService, private router: Router) {
+    this.navStart = this.router.events.pipe(
+      filter(evt => evt instanceof NavigationStart)
+    ) as Observable<NavigationStart>;
+  }
 
   ngOnInit(): void {
-    this.getItemsSidebar();
+    this.getSidebarItems();
+    this.highlightMenuOption(this.router.routerState.snapshot.url);
+    this.navStart.subscribe(evt => {
+      this.highlightMenuOption(evt.url);
+    });
   }
 
-  getItemsSidebar() {
+  getSidebarItems() {
     if (this.azureAdB2CService.isAdmin()) {
       this.itemsSidebar = [
-        { route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock' },
-        { route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries' },
-        { route: '/reports', icon: 'fas fa-chart-pie', text: 'Reports' },
-        { route: '/activities-management', icon: 'fas fa-file-alt', text: 'Activities' },
-        { route: '/customers-management', icon: 'fas fa-user', text: 'Customers' },
+        {route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock', active: false},
+        {route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries', active: false},
+        {route: '/reports', icon: 'fas fa-chart-pie', text: 'Reports', active: false},
+        {route: '/activities-management', icon: 'fas fa-file-alt', text: 'Activities', active: false},
+        {route: '/customers-management', icon: 'fas fa-user', text: 'Customers', active: false},
       ];
     } else {
       this.itemsSidebar = [
-        { route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock' },
-        { route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries' },
+        {route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock', active: false},
+        {route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries', active: false},
       ];
     }
   }
+
+  highlightMenuOption(route) {
+    this.itemsSidebar.map(item => item.active = false);
+    this.itemsSidebar.filter(item => item.route === route).map(item => item.active = true);
+  }
 }