DSOMM/src/app/component/matrix/matrix.component.html at aea9aa09eaf6a68486ab73e802f837b27420fecb · aguero-tech/DSOMM · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<div class="content">
  <app-top-header section="Matrix"></app-top-header>
  <mat-form-field class="activity-chip-list">
    <mat-label>SubDimension Filter</mat-label>
    <mat-chip-list #chipList selectable multiple>
      <mat-chip
        #c="matChip"
        *ngFor="let subDimension of listSubDimension"
        (click)="toggleSubDimensionSelection(subDimension)"
        [value]="subDimension"
        [selected]="currentSubDimensions.includes(subDimension)">
        {{ subDimension }}
      </mat-chip>
    </mat-chip-list>
  </mat-form-field>

  <button
    class="clear-subdimension-button"
    (click)="resetSubDimensionFilters()">
    Clear SubDimension Filters
  </button>

  <button
    class="select-all-subdimension-button"
    (click)="selectAllSubDimensionFilters()">
    Select All SubDimension Filters
  </button>

  <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 listTags"
        (click)="toggleTagSelection(c)"
        [value]="tag"
        selected>
        {{ tag }}
      </mat-chip>
    </mat-chip-list>
  </mat-form-field>

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

  <table
    mat-table
    [dataSource]="dataSource"
    class="mat-elevation-z8 matrix-table">
    <!-- Dimension Column -->
    <ng-container matColumnDef="Dimension">
      <th mat-header-cell *matHeaderCellDef class="table-small-width">
        Dimension
      </th>
      <td mat-cell *matCellDef="let element" class="table-small-width">
        <img
          src="assets/images/{{ element.Dimension }}.png"
          height="40px"
          alt="" />
        {{ element.Dimension }}
      </td>
    </ng-container>

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

    <div *ngFor="let lvl of lvlColumn; index as i">
      <ng-container matColumnDef="{{ lvl }}">
        <th mat-header-cell *matHeaderCellDef>{{ levels[i] }}</th>
        <td mat-cell *matCellDef="let element">
          <ul class="activity-list">
            <li
              class="mat-cell-activity"
              *ngFor="let activity of element[lvl]; index as j">
              <div>
                <div>
                  <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">
                  [
                  <span
                    *ngFor="
                      let tag of YamlObject[element.Dimension][
                        element.SubDimension
                      ][activity].tags;
                      let i = index
                    ">
                    {{ tag }}
                    <span
                      *ngIf="
                        i + 1 <
                        YamlObject[element.Dimension][element.SubDimension][
                          activity
                        ].tags.length
                      ">
                      ,
                    </span>
                  </span>
                  ]
                </span>
              </div>
            </li>
          </ul>
        </td>
      </ng-container>
    </div>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>