feat: Activity links

I found it quite a bit distracting that I could not open activity detail
in a new window - especially as filters on the matrix page do not
persist on navigation.

This changes the detail navigation from an onclick to a regular ol' HTML
link, allowing "open in new window" etc.

Author: amacleay-cohere

package-lock.json

@@ -65,6 +65,7 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "prettier": "^2.7.1",
     "prettier-eslint": "^15.0.1",
+    "qs": "^6.11.0",
     "typescript": "^4.6.4"
   },
   "browser": {

package.json

@@ -34,13 +34,6 @@
   max-width: 9%;
 }
 
-button {
-  background-color: white;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-}
-
 .tags-activity {
   font-weight: 800;
   font-style: italic;

src/app/component/matrix/matrix.component.css

@@ -63,21 +63,23 @@
         <td mat-cell *matCellDef="let element">
           <ul>
             <li *ngFor="let activity of element[lvl]; index as j">
-              <button
-                style="margin-bottom: 1em"
-                (click)="
-                  navigate(
-                    YamlObject[element.Dimension][element.SubDimension][activity].uuid,
-                    element.Dimension,
-                    element.SubDimension,
-                    i + 1,
-                    activity
-                  )
-                ">
+              <div>
                 <div>
                   <p style="margin: 0">{{ activity }}</p>
                 </div>
-                <span class="tags-activity">
+                <a
+                  href=" {{
+                    navigate(
+                      YamlObject[element.Dimension][element.SubDimension][
+                        activity
+                      ].uuid,
+                      element.Dimension,
+                      element.SubDimension,
+                      i + 1,
+                      activity
+                    )
+                  }}"
+                  class="tags-activity">
                   [
                   <span
                     *ngFor="
@@ -98,8 +100,8 @@
                     </span>
                   </span>
                   ]
-                </span>
-              </button>
+                </a>
+              </div>
             </li>
           </ul>
         </td>

src/app/component/matrix/matrix.component.html

@@ -6,6 +6,7 @@ import { map, startWith } from 'rxjs/operators';
 import { MatTableDataSource } from '@angular/material/table';
 import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import { Router, NavigationExtras } from '@angular/router';
+import { stringify } from "qs";
 
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 
@@ -325,6 +326,6 @@ export class MatrixComponent implements OnInit {
         activityName: activityName,
       },
     };
-    this.router.navigate([this.Routing], navigationExtras);
+    return `${this.Routing}?${stringify(navigationExtras.queryParams)}`;
   }
 }