Teams: Add Dimension column

Author: vbakke

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

@@ -37,7 +37,7 @@
 
     <!-- Category Column -->
     <ng-container matColumnDef="Category">
-      <th mat-header-cell *matHeaderCellDef class="table-small-width">Category</th>
+      <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>
@@ -48,7 +48,7 @@
 
     <!-- Dimension Column -->
     <ng-container matColumnDef="Dimension">
-      <th mat-header-cell *matHeaderCellDef class="table-small-width">Dimension</th>
+      <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>

src/app/pages/teams/teams.component.css

@@ -90,7 +90,7 @@ h3 {
 }
 
 td.mat-cell {
-    padding: 0 20px;
+    padding: 0 10px;
 }
 
 .progress-col {
@@ -102,4 +102,17 @@ td.mat-cell {
 
 .teams-table {
   box-shadow:  0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.dimension-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dimension-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
 }

src/app/pages/teams/teams.component.html

@@ -28,7 +28,8 @@ <h2>{{ infoTitle }}</h2>
           [suffix]="'activities'"></app-kpi>
         <app-kpi
           [title]="'Last updated:'"
-          [value]="dateFormat(info[infoTitle]?.lastUpdated)"></app-kpi>
+          [value]="dateFormat(info[infoTitle]?.lastUpdated)"
+          [suffix]="info[infoTitle]?.lastUpdated ? '' : 'No activity registered'"></app-kpi>
       </div>
     </div>
 
@@ -50,6 +51,22 @@ <h3>Activities in progress</h3>
         </td>
       </ng-container>
 
+      <ng-container matColumnDef="SubDimension">
+        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-small-width">
+          Dimension
+        </th>
+        <td mat-cell *matCellDef="let element" class="table-small-width">
+          <div class="dimension-cell">
+            <mat-icon
+              class="dimension-icon"
+              *ngIf="dataStore?.meta?.getIcon(element?.activity?.category || '')">
+              {{ dataStore?.meta?.getIcon(element?.activity?.category || '') }}
+            </mat-icon>
+            <span>{{ element?.activity?.dimension }}</span>
+          </div>
+        </td>
+      </ng-container>
+
       <ng-container
         matColumnDef="{{ progressColumn }}"
         *ngFor="let progressColumn of progressColumnNames">

src/app/pages/teams/teams.component.ts

@@ -81,6 +81,9 @@ export class TeamsComponent implements OnInit, AfterViewInit {
         if (property === 'Activity') {
           return item.activity?.name || '';
         }
+        if (property === 'SubDimension') {
+          return item.activity?.dimension || '';
+        }
         // For progress columns, sort by date string or timestamp
         if (this.progressColumnNames.includes(property)) {
           // If your progress is a date string, you may want to convert to Date for proper sorting
@@ -104,7 +107,7 @@ export class TeamsComponent implements OnInit, AfterViewInit {
     let progressStore: ProgressStore | null = this.dataStore?.progressStore;
     this.progressColumnNames = progressStore?.getInProgressTitles() || [];
     this.progressTitleImplemented = progressStore?.getCompletedProgressTitle() || 'Implemented';
-    this.allColumnNames = ['Team', 'Activity', ...this.progressColumnNames];
+    this.updateColumnNames();
   }
 
   displayMessage(dialogInfo: DialogInfo) {
@@ -125,6 +128,12 @@ export class TeamsComponent implements OnInit, AfterViewInit {
       this.info[this.infoTitle] = this.makeTeamSummary(this.infoTitle, this.infoTeams);
     }
     this.dataSource.data = this?.info[this.infoTitle]?.activitiesInProgress || [];
+    this.updateColumnNames();
+  }
+
+  updateColumnNames() {
+    const baseColumns = this.infoTeams.length > 1 ? ['Team'] : [];
+    this.allColumnNames = [...baseColumns, 'SubDimension', 'Activity', ...this.progressColumnNames];
   }
 
   onTeamsChanged(event: TeamsGroupsChangedEvent) {
@@ -143,6 +152,7 @@ export class TeamsComponent implements OnInit, AfterViewInit {
     this.dataSource.data = this?.info[this.infoTitle]?.activitiesInProgress || [];
 
     this.setYamlData(this.dataStore);
+    this.updateColumnNames();
   }
 
   onExportTeamGroups() {