DevSecOps-MaturityModel/src/app/pages/matrix/matrix.component.html at 2d6501c71589270234c9314105ba7863d04e6de0 · devsecopsmaturitymodel/DevSecOps-MaturityModel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="content">
  <app-top-header section="Matrix"></app-top-header>
  <mat-form-field class="activity-chip-list">
    <mat-label>Dimension Filter</mat-label>
    <mat-chip-list #chipList selectable multiple>
      <mat-chip
        #c="matChip"
        *ngFor="let dim of filtersDim | keyvalue"
        (click)="toggleDimensionFilters(c)"
        [value]="dim.key"
        [selected]="dim.value">
        {{ dim.key }}
      </mat-chip>
    </mat-chip-list>
  </mat-form-field>
  <mat-form-field class="activity-chip-list">
    <mat-label>Activity Tag Filter</mat-label>
    <mat-chip-list selectable multiple>
      <mat-chip
        #c="matChip"
        *ngFor="let tag of filtersTag | keyvalue"
        (click)="toggleTagFilters(c)"
        [value]="tag.key"
        [selected]="tag.value">
        {{ tag.key }}
      </mat-chip>
    </mat-chip-list>
  </mat-form-field>

  <button class="reset-button" (click)="reset()">RESET</button>

  <!-- eslint-disable -->
  <div class="mat-table-container">
    <table
      mat-table
      [dataSource]="dataSource"
      class="mat-elevation-z8 matrix-table">

      <!-- Category Column -->
      <ng-container matColumnDef="Category">
        <th mat-header-cell *matHeaderCellDef class="table-small-width">Dimension</th>
        <td mat-cell *matCellDef="let element" class="table-small-width">
          <div class="dim-icon">
            <mat-icon mat-list-icon color="primary">{{dataStore?.meta?.getIcon(element.Category)}}</mat-icon>
            {{ element.Category }}
          </div>
        </td>
      </ng-container>

      <!-- Dimension Column -->
      <ng-container matColumnDef="Dimension">
        <th mat-header-cell *matHeaderCellDef class="table-small-width">Sub-dimension</th>
        <td mat-cell *matCellDef="let element" class="table-small-width">
          {{ element.Dimension }}
        </td>
      </ng-container>

      <div *ngFor="let level of levels | keyvalue">
        <ng-container matColumnDef="{{ level.key }}">
          <th mat-header-cell *matHeaderCellDef>{{ level.value }}</th>
          <td mat-cell *matCellDef="let element">
            <ul class="activity-list">
              <li class="mat-cell-activity" *ngFor="let activity of element[level.key]">
                <div>
                  <div>
                    <a
                    class="activity-title"
                    (click)="navigate(activity.uuid)"
                    >{{ activity.name }}</a
                    >
                  </div>
                  <span *ngIf="activity.tags" class="tags-activity">
                    <span *ngFor="let tag of activity.tags; let i = index">
                      <span *ngIf="i > 0">, </span>[{{ tag }}]</span
                    >
                  </span>
                </div>
              </li>
            </ul>
          </td>
        </ng-container>
      </div>
      <!-- eslint-enable -->

      <!-- No data message -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" [attr.colspan]="columnNames.length">
          No activities match the selected filters
        </td>
      </tr>

      <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
      <tr mat-row *matRowDef="let row; columns: columnNames"></tr>
      <tr mat-footer-row></tr>
    </table>
  </div>
</div>