Merge pull request #306 from amacleay-cohere/feat-nav-link-matrix

feat: Activity links
devsecopsmaturitymodel · Aug 1, 2024 · 5a12872 · 5a12872
2 parents 087c21e + 49b20d9
commit 5a12872
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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": {

diff --git a/src/app/component/matrix/matrix.component.css b/src/app/component/matrix/matrix.component.css
@@ -29,18 +29,35 @@
   font-weight: bold;
 }
 
+.mat-cell ul.activity-list {
+  list-style-type: disclosure-closed;
+}
+
+.mat-cell-activity {
+  margin-bottom: 1em;
+  position: relative;
+}
+.mat-cell-activity a.activity-title {
+  text-decoration: unset;
+  margin: 0;
+}
+.mat-cell-activity a::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.mat-cell-activity a.activity-title:link {
+  color: inherit;
+}
+
 .table-small-width {
   width: 5%;
   max-width: 9%;
 }
 
-button {
-  background-color: white;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-}
-
 .tags-activity {
   font-weight: 800;
   font-style: italic;

diff --git a/src/app/component/matrix/matrix.component.html b/src/app/component/matrix/matrix.component.html
@@ -61,21 +61,25 @@
       <ng-container matColumnDef="{{ lvl }}">
         <th mat-header-cell *matHeaderCellDef>{{ levels[i] }}</th>
         <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
-                  )
-                ">
+          <ul class="activity-list">
+            <li class="mat-cell-activity" *ngFor="let activity of element[lvl]; index as j">
+              <div>
                 <div>
-                  <p style="margin: 0">{{ activity }}</p>
+                  <a
+                    class="activity-title"
+                    href=" {{
+                      navigate(
+                        YamlObject[element.Dimension][element.SubDimension][
+                          activity
+                        ].uuid,
+                        element.Dimension,
+                        element.SubDimension,
+                        i + 1,
+                        activity
+                      )
+                    }}"
+                    >{{ activity }}</a
+                  >
                 </div>
                 <span class="tags-activity">
                   [
@@ -99,7 +103,7 @@
                   </span>
                   ]
                 </span>
-              </button>
+              </div>
             </li>
           </ul>
         </td>

diff --git a/src/app/component/matrix/matrix.component.ts b/src/app/component/matrix/matrix.component.ts
@@ -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)}`;
   }
 }