teams.component.html

<app-top-header
  [section]="
    settings.getTeamLabelPlural() + ' & ' + settings.getGroupLabelPlural()
  "></app-top-header>
<div class="team-section">
  <app-teams-groups-editor
    [teams]="teams"
    [teamGroups]="teamGroups"
    [canEdit]="canEdit"
    (selectionChanged)="onSelectionChanged($event)"
    (namesChanged)="onTeamsChanged($event)"
    (click)="$event.stopPropagation()"></app-teams-groups-editor>
  <div class="button-container" *ngIf="dataStore?.meta?.hasLocalStorage">
    <button mat-raised-button (click)="onExportTeamGroups()">
      Download {{ settings.getTeamLabel() | lowercase }} setup
    </button>
    <button mat-raised-button (click)="onResetTeamGroups()">
      Reset {{ settings.getTeamLabel() | lowercase }} setup
    </button>
  </div>

  <div class="team-info">
    <h2>{{ infoTitle }}</h2>
    <div class="subheader" *ngIf="infoTeams.length > 1">
      {{ info[infoTitle]?.teams?.join(', ') }}
    </div>
    <div class="info-content">
      <div class="info-kpis">
        <app-kpi
          [title]="progressTitleImplemented"
          [value]="info[infoTitle]?.uniqueActivitiesCompletedCount"
          [suffix]="'activities'"></app-kpi>
        <app-kpi
          [title]="'In progress'"
          [value]="info[infoTitle]?.uniqueActivitiesInProgressCount"
          [suffix]="'activities'"></app-kpi>
        <app-kpi
          [title]="'Last updated:'"
          [value]="dateFormat(info[infoTitle]?.lastUpdated)"
          [suffix]="info[infoTitle]?.lastUpdated ? '' : 'No activity registered'"></app-kpi>
      </div>
    </div>

    <h3>Activities in progress</h3>
    <table mat-table matSort [dataSource]="dataSource || []" class="mat-elevation-z8 teams-table">
      <ng-container matColumnDef="Team">
        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-small-width">
          {{ settings.getTeamLabel() }}
        </th>
        <td mat-cell *matCellDef="let element" class="table-small-width">
          {{ element?.team }}
        </td>
      </ng-container>

      <ng-container matColumnDef="Activity">
        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-small-width">
          Activity
        </th>
        <td mat-cell *matCellDef="let element" class="table-small-width">
          {{ element?.activity?.name }}
        </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">
        <th mat-header-cell mat-sort-header *matHeaderCellDef class="progress-col">
          {{ progressColumn }}
        </th>
        <td mat-cell *matCellDef="let element" class="progress-col">
          <span *ngIf="element?.progress?.[progressColumn]">
            {{ dateFormat(element?.progress?.[progressColumn]) }}
          </span>
        </td>
      </ng-container>

      <!-- No data message -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" [attr.colspan]="allColumnNames.length">
          <em>Currently no activities in progress for {{ info[infoTitle]?.teams?.join(', ') }}</em>
        </td>
      </tr>

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