src/app/shared/layout/statement-table/components/statement-table.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<table [dataSource]="appEntries" [trackBy]="trackBy" cdk-table
       class="openk-table statement-table openk-table---without-last-border">

  <caption hidden>{{ "shared.statementTable.caption" | translate}}</caption>

  <tr *cdkHeaderRowDef="appColumns; sticky: true" cdk-header-row>
  </tr>

  <tr *cdkRowDef="let myRowData; columns: appColumns" cdk-row
      class="statement-table--row">
  </tr>


  <ng-container cdkColumnDef="select">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--select"
        scope="col">
    </th>
    <td *cdkCellDef="let statement"
        cdk-cell
        class="statement-table--select">
      <div class="statement-table--select--container">
        <input #inputElement
               (keydown.enter)="inputElement.click()"
               (ngModelChange)="$event ? select(statement.id) : deselect(statement.id)"
               [class.cursor-pointer]="!appDisabled"
               [disabled]="appDisabled"
               [ngModel]="statement?.isSelected"
               class="statement-table--select--input"
               type="checkbox">
      </div>
    </td>
  </ng-container>

  <ng-container cdkColumnDef="id">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--id"
        scope="col">
      {{"shared.statementTable.id" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="openk-no-whitespace-wrap statement-table--id">
      <div class="openk-no-whitespace-wrap openk-right statement-table--id--container">
        <mat-icon *ngIf="appShowAlert && (statement | statementTableAlert)"
                  class="statement-table--icon statement-table--id--icon openk-warning">
          priority_high
        </mat-icon>
        {{statement?.id}}
      </div>
    </td>
  </ng-container>

  <ng-container cdkColumnDef="title">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--title"
        scope="col">
      {{"shared.statementTable.title" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="statement-table--title">
      {{statement?.title}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="city">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--city"
        scope="col">
      {{"shared.statementTable.city" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="statement-table--city">
      {{statement?.city}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="district">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--district"
        scope="col">
      {{"shared.statementTable.district" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="statement-table--district">
      {{statement?.district}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="type">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--type"
        scope="col">
      {{"shared.statementTable.statementType" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="openk-no-whitespace-wrap statement-table--type">
      {{ (appStatementTypeOptions | selected : statement?.typeId)?.label }}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="creationDate">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--date"
        scope="col">
      {{"shared.statementTable.creationDate" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="openk-no-whitespace-wrap statement-table--date">
      {{statement?.creationDate ? (statement.creationDate | appMomentPipe).format(appTimeDisplayFormat) : ""}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="receiptDate">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--date"
        scope="col">
      {{"shared.statementTable.receiptDate" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="openk-no-whitespace-wrap statement-table--date">
      {{statement?.receiptDate ? (statement.receiptDate | appMomentPipe).format(appTimeDisplayFormat) : ""}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="dueDate">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--date"
        scope="col">
      {{"shared.statementTable.dueDate" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="openk-no-whitespace-wrap statement-table--date">
      {{statement?.dueDate ? (statement.dueDate | appMomentPipe).format(appTimeDisplayFormat) : ""}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="currentTaskName">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--tasks"
        scope="col">
      {{"shared.statementTable.currentTaskName" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="statement-table--tasks">
      {{statement?.currentTaskName}}
    </td>
  </ng-container>

  <ng-container cdkColumnDef="contributions">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--contributions"
        scope="col">
      {{"shared.statementTable.contributions" | translate}}
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="statement-table--contributions">
      <span class="openk-no-whitespace-wrap">
        {{statement?.contributionStatus}}
        <mat-icon *ngIf="appShowContributionStatusForMyDepartment"
                  [class.openk-success]="statement?.contributionStatusForMyDepartment"
                  [class.statement-table--contributions--icon---hidden]="statement?.contributionStatusForMyDepartment === false"
                  class="statement-table--icon statement-table--contributions--icon">
            check
        </mat-icon>
      </span>
    </td>
  </ng-container>

  <ng-container cdkColumnDef="anchor">
    <th *cdkHeaderCellDef="let statementHeader"
        cdk-header-cell
        class="statement-table--anchor"
        scope="col">
    </th>
    <td *cdkCellDef="let statement" cdk-cell
        class="statement-table--anchor">
      <mat-icon *ngIf="statement?.id === 111">warning</mat-icon>
      <a [queryParams]="{id: statement.id}"
         [routerLink]="'/details'"
         [target]="appOpenStatementInNewTab ? '_blank' : undefined"
         class="openk-button openk-button-rounded openk-info statement-table--button">
        <mat-icon>call_made</mat-icon>
      </a>
    </td>
  </ng-container>

</table>