Bug/EUI 3041 tab name (#640)

* retain the tab name instead of index value

* package.json and release notes 2.67.2-tab-name

Co-authored-by: Uday Denduluri <[email protected]>

Author: udaydenduluri33

RELEASE-NOTES.md

@@ -1,5 +1,8 @@
 ## RELEASE NOTES
 
+### Version 2.67.2-tab-name
+**EUI-3041** Use Tab name instead of Index
+
 ### Version 2.67.1-focus-order
 **EUI-2020** Accessibility amends for tabs and page load
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "2.67.1-focus-order",
+  "version": "2.67.2-tab-name",
   "engines": {
     "yarn": "^1.12.3",
     "npm": "^5.6.0"

src/shared/components/case-viewer/case-viewer.component.ts

@@ -31,6 +31,7 @@ export class CaseViewerComponent implements OnInit, OnDestroy, AfterViewInit {
   public static readonly ORIGIN_QUERY_PARAM = 'origin';
   static readonly TRIGGER_TEXT_START = 'Go';
   static readonly TRIGGER_TEXT_CONTINUE = 'Ignore Warning and Go';
+  static readonly space = '%20';
 
   @Input()
   hasPrint = true;
@@ -53,7 +54,7 @@ export class CaseViewerComponent implements OnInit, OnDestroy, AfterViewInit {
   dialogConfig: MatDialogConfig;
 
   callbackErrorsSubject: Subject<any> = new Subject();
-  @ViewChild('tabGroup') public tabGroup: any;
+  @ViewChild('tabGroup') public tabGroup: MatTabGroup;
 
   constructor(
     private ngZone: NgZone,
@@ -206,9 +207,11 @@ export class CaseViewerComponent implements OnInit, OnDestroy, AfterViewInit {
 
   public ngAfterViewInit() {
     const url = this.location.path(true);
-    const hashValue = url.substring(url.indexOf('#') + 1);
-    if(hashValue && !isNaN(Number(hashValue))) {
-      this.tabGroup.selectedIndex = Number(hashValue);
+    let hashValue = url.substring(url.indexOf('#') + 1);
+    hashValue = hashValue.replace(CaseViewerComponent.space, ' ');
+    const matTab = this.tabGroup._tabs.find((x) => x.textLabel === hashValue);
+    if(matTab && matTab.position) {
+      this.tabGroup.selectedIndex = matTab.position;
     }
   }
 
@@ -248,7 +251,7 @@ export class CaseViewerComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
-    window.location.hash = tabChangeEvent.index.toString();
+    window.location.hash = tabChangeEvent.tab.textLabel;
   }
 
 }