mapping.component.html

<div class="content">
  <app-top-header section="Mappings"></app-top-header>
  <div class="filterandsort">
    <mat-form-field class="filterSection" appearance="fill">
      <mat-label>Filter</mat-label>
      <mat-chip-list #chipList aria-label="Filter" color="primary">
        <mat-chip *ngFor="let chip of currentChip" (removed)="removeChip(chip)">
          {{ chip }}
          <button matChipRemove>
            <mat-icon>cancel</mat-icon>
          </button>
        </mat-chip>
        <input
          #chipInput
          [formControl]="FilterCtrl"
          [matAutocomplete]="auto"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes" />
      </mat-chip-list>
      <mat-autocomplete
        #auto="matAutocomplete"
        (optionSelected)="addChip($event)">
        <mat-option
          *ngFor="let filter of filteredChips | async"
          [value]="filter">
          {{ filter }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

    <div class="right-section">
      <section class="export-button">
        <button mat-raised-button color="primary" (click)="exportToExcel()">
          <mat-icon>file_download</mat-icon>
        </button>
      </section>
      <section class="sort-section">
        <mat-button-toggle-group [formControl]="SortCtrl" aria-label="Sort By">
          <mat-button-toggle
            value="sortByActivity"
            (click)="changeTableBasedOnCurrentSort()"
            >Activity</mat-button-toggle
          >
          <mat-button-toggle
            value="sortBySAMM"
            (click)="changeTableBasedOnCurrentSort()"
            >SAMM</mat-button-toggle
          >
          <mat-button-toggle
            value="sortByISO"
            (click)="changeTableBasedOnCurrentSort()"
            >ISO 27001:2017</mat-button-toggle
          >
          <mat-button-toggle
            value="sortByISO22"
            (click)="changeTableBasedOnCurrentSort()"
            >ISO 27001:2022</mat-button-toggle
          >
        </mat-button-toggle-group>
      </section>
    </div>
  </div>

  <table
    mat-table
    [dataSource]="dataSource"
    class="mat-elevation-z8 matrix-table">
    <ng-container matColumnDef="dimension">
      <th mat-header-cell *matHeaderCellDef>Dimension</th>
      <td mat-cell *matCellDef="let element">{{ element.dimension }}</td>
    </ng-container>

    <ng-container matColumnDef="subDimension">
      <th mat-header-cell *matHeaderCellDef>Sub-Dimension</th>
      <td mat-cell *matCellDef="let element">{{ element.subDimension }}</td>
    </ng-container>

    <ng-container matColumnDef="activityName">
      <th mat-header-cell *matHeaderCellDef>Activity</th>
      <td mat-cell *matCellDef="let element">{{ element.activityName }}</td>
    </ng-container>

    <ng-container matColumnDef="samm2">
      <ng-container *ngIf="currentlySortingBySAMM">
        <th mat-header-cell *matHeaderCellDef>SAMM</th>
        <td mat-cell *matCellDef="let element">{{ element.samm2 }}</td>
      </ng-container>
      <ng-container
        *ngIf="
          currentlySortingByActivity ||
          currentlySortingByISO17 ||
          currentlySortingByISO22
        ">
        <th mat-header-cell *matHeaderCellDef>SAMM</th>
        <td mat-cell *matCellDef="let element">
          <ul>
            <li *ngFor="let sammElement of element.samm2">
              {{ sammElement }}
            </li>
          </ul>
        </td>
      </ng-container>
    </ng-container>

    <ng-container matColumnDef="ISO17">
      <ng-container *ngIf="currentlySortingByISO17">
        <th mat-header-cell *matHeaderCellDef>ISO 27001:2017</th>
        <td mat-cell *matCellDef="let element">{{ element.ISO17 }}</td>
      </ng-container>
      <ng-container
        *ngIf="
          currentlySortingByActivity ||
          currentlySortingBySAMM ||
          currentlySortingByISO22
        ">
        <th mat-header-cell *matHeaderCellDef>ISO 27001:2017</th>
        <td mat-cell *matCellDef="let element">
          <ul>
            <li *ngFor="let ISOElement of element.ISO17">
              {{ ISOElement }}
            </li>
          </ul>
        </td>
      </ng-container>
    </ng-container>

    <ng-container matColumnDef="ISO22">
      <ng-container *ngIf="currentlySortingByISO22">
        <th mat-header-cell *matHeaderCellDef>ISO 27001:2022</th>
        <td mat-cell *matCellDef="let element">{{ element.ISO22 }}</td>
      </ng-container>
      <ng-container
        *ngIf="
          currentlySortingByActivity ||
          currentlySortingBySAMM ||
          currentlySortingByISO17
        ">
        <th mat-header-cell *matHeaderCellDef>ISO 27001:2022</th>
        <td mat-cell *matCellDef="let element">
          <ul>
            <li *ngFor="let ISO22Element of element.ISO22">
              {{ ISO22Element }}
            </li>
          </ul>
        </td>
      </ng-container>
    </ng-container>

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

  <table id="excel-table" class="hide">
    <tr>
      <th>Dimension</th>
      <th>Sub Dimension</th>
      <th>Activity</th>
      <th>Description</th>
      <th>Risk</th>
      <th>Measure</th>
      <th>Knowledge</th>
      <th>Resources</th>
      <th>Time</th>
      <th>Usefulness</th>
      <th>Implementation</th>
      <th>Assessment</th>
      <th>Evidence</th>
      <th>Comments</th>
      <th>Depends On</th>
      <th>SAMM</th>
      <th>ISO 27001:2017</th>
      <th>ISO 27001:2022</th>
      <th *ngFor="let team of allTeams">
        {{ team }}
      </th>
    </tr>
    <tr *ngFor="let item of allMappingDataSortedByISO17">
      <!-- checking if item is defined and set & truncating at 32767 characters per cell to fit to excel limitations-->
      <td>
        <ng-container *ngIf="item.dimension && item.dimension.length > 0">
          {{ item.dimension | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.subDimension && item.subDimension.length > 0">
          {{ item.subDimension | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.activityName && item.activityName.length > 0">
          {{ item.activityName | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.description && item.description.length > 0">
          {{ item.description | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.risk && item.risk.length > 0">
          {{ item.risk | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.measure && item.measure.length > 0">
          {{ item.measure | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.knowledge && item.knowledge.length > 0">
          {{ item.knowledge | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.resources && item.resources.length > 0">
          {{ item.resources | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.time && item.time.length > 0">
          {{ item.time | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.usefulness && item.usefulness.length > 0">
          {{ item.usefulness | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container
          *ngIf="item.implementation && item.implementation.length > 0">
          {{ item.implementation | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.assessment && item.assessment.length > 0">
          {{ item.assessment | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.evidence && item.evidence.length > 0">
          {{ item.evidence | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.comments && item.comments.length > 0">
          {{ item.comments | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.dependsOn && item.dependsOn.length > 0">
          {{ item.dependsOn | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.samm2 && item.samm2.length > 0">
          {{ item.samm2 | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.ISO17 && item.ISO17.length > 0">
          {{ item.ISO17 | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td>
        <ng-container *ngIf="item.ISO22 && item.ISO22.length > 0">
          {{ item.ISO22 | slice : 0 : 32767 }}</ng-container
        >
      </td>
      <td *ngFor="let key of allTeams">
        <ng-container>
          {{ item.teamImplementation[key] }}
        </ng-container>
      </td>
    </tr>
  </table>
</div>