srumboard_frontend/src/app/components/tabels/task/task-table.component.html

<div class="container-fluid">
  <div class="content">
    <h3>
      <a
        *ngIf="filterUserstoryId"
        [routerLink]="['/userstories', { id: filterUserstoryId }]"
      >
        Userstory #{{ filterUserstoryId }}
        &gt;
      </a>
      Tasks
    </h3>
    <div *ngIf="filterUserstoryId">
      <a [routerLink]="'/tasks'">Alle Tasks anzeigen</a>
    </div>

    <button class="btn btn-secondary" (click)="openTaskForm()">
      Neuer Task
    </button>

    <table class="table">
      <thead>
        <tr>
          <th (click)="sortById()" class="sortable">
            <span>ID</span>
            <span>
              <span *ngIf="sortBy != 'id'"
                ><i class="fa fa-sort fa-lg"></i
              ></span>
              <span *ngIf="sortDescending && sortBy === 'id'"
                ><i class="fa fa-sort-up fa-lg"></i
              ></span>
              <span *ngIf="sortDescending === false && sortBy === 'id'"
                ><i class="fa fa-sort-down fa-lg"></i
              ></span>
            </span>
          </th>
          <th (click)="sortByTitle()" class="sortable">
            <span>Titel</span>
            <span>
              <span *ngIf="sortBy != 'title'"
                ><i class="fa fa-sort fa-lg"></i
              ></span>
              <span *ngIf="sortDescending && sortBy === 'title'"
                ><i class="fa fa-sort-up fa-lg"></i
              ></span>
              <span *ngIf="sortDescending === false && sortBy === 'title'"
                ><i class="fa fa-sort-down fa-lg"></i
              ></span>
            </span>
          </th>
          <th (click)="sortByTasks()" class="sortable">
            <span>Userstory</span>
            <span>
              <span *ngIf="sortBy != 'userstory'"
                ><i class="fa fa-sort fa-lg"></i
              ></span>
              <span *ngIf="sortDescending && sortBy === 'userstory'"
                ><i class="fa fa-sort-up fa-lg"></i
              ></span>
              <span *ngIf="sortDescending === false && sortBy === 'userstory'"
                ><i class="fa fa-sort-down fa-lg"></i
              ></span>
            </span>
          </th>
          <th (click)="sortByStatus()" class="sortable">
            <span>Status</span>
            <span>
              <span *ngIf="sortBy != 'statusId'"
                ><i class="fa fa-sort fa-lg"></i
              ></span>
              <span *ngIf="sortDescending && sortBy === 'statusId'"
                ><i class="fa fa-sort-up fa-lg"></i
              ></span>
              <span *ngIf="sortDescending === false && sortBy === 'statusId'"
                ><i class="fa fa-sort-down fa-lg"></i
              ></span>
            </span>
          </th>
          <th class="sortable">
            <div class="d-inline-block">
              <span (click)="sortByPrio()">Priorität: </span>
              <div ngbDropdown class="d-inline-block">
                <span id="dropdownBasic1" ngbDropdownToggle>{{
                  filterPriority || "All"
                }}</span>
                <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                  <option ngbDropdownItem (click)="filterPriority = null"
                    >All</option
                  >
                  <option
                    ngbDropdownItem
                    *ngFor="let p of getAllPriorities()"
                    (click)="filterPriority = p"
                    >{{ p }}</option
                  >
                </div>
              </div>
              <span (click)="sortByPrio()">
                <span *ngIf="sortBy != 'priority'"
                  ><i class="fa fa-sort fa-lg"></i
                ></span>
                <span *ngIf="sortDescending && sortBy === 'priority'"
                  ><i class="fa fa-sort-up fa-lg"></i
                ></span>
                <span *ngIf="sortDescending === false && sortBy === 'priority'"
                  ><i class="fa fa-sort-down fa-lg"></i
                ></span>
              </span>
            </div>
          </th>
          <th (click)="sortByAssigned()" class="sortable">
            <span>Assigned To</span>
            <span>
              <span *ngIf="sortBy != 'assignedtoid'"
                ><i class="fa fa-sort fa-lg"></i
              ></span>
              <span *ngIf="sortDescending && sortBy === 'assignedtoid'"
                ><i class="fa fa-sort-up fa-lg"></i
              ></span>
              <span
                *ngIf="sortDescending === false && sortBy === 'assignedtoid'"
                ><i class="fa fa-sort-down fa-lg"></i
              ></span>
            </span>
          </th>
          <th (click)="sortByCategory()" class="sortable">
            <span>Category</span>
            <span>
              <span *ngIf="sortBy != 'categoryId'"
                ><i class="fa fa-sort fa-lg"></i
              ></span>
              <span *ngIf="sortDescending && sortBy === 'categoryId'"
                ><i class="fa fa-sort-up fa-lg"></i
              ></span>
              <span *ngIf="sortDescending === false && sortBy === 'categoryId'"
                ><i class="fa fa-sort-down fa-lg"></i
              ></span>
            </span>
          </th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <tr
          *ngFor="let task of filteredItems"
          [class.table-info]="task.id === highlightId"
        >
          <td>{{ task.id }}</td>
          <td>{{ task.title }}</td>
          <td>
            <a [routerLink]="['/userstories', { id: task.userstoryId }]">
              US #{{ task.userstoryId }}
            </a>
          </td>
          <td>
            <a [routerLink]="['/status', { id: task.statusId }]">
              {{ getStatusTitleById(task.statusId) }}
            </a>
          </td>
          <td>{{ task.priority }}</td>
          <td>
            <a [routerLink]="['/users', { id: task.assignedtoId }]">
              {{ getUserNameById(task.assignedtoId) }}
            </a>
          </td>
          <td>
            <a [routerLink]="['/categories', { id: task.categoryId }]">
              {{ getCategoryTitleById(task.categoryId) }}
            </a>
          </td>
          <td>
            <button
              type="button"
              rel="tooltip"
              (click)="openTaskForm(task)"
              class="btn btn-success btn-sm btn-icon"
            >
              <i class="fa fa-pencil-alt"></i>
            </button>
            <button
              type="button"
              rel="tooltip"
              (click)="deleteTask(task)"
              class="btn btn-danger btn-sm btn-icon"
            >
              <i class="fa fa-trash"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>