frontend/src/app/tasks/task-dashboard/task-dashboard.component.css

@@ -0,0 +1,27 @@
+
+
+mat-form-field {
+  width: 70%;
+}
+
+table {
+  width: 100%;
+}
+
+
+td, th {
+  width: 25%;
+}
+
+.status-indicator {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.mat-column-status, .mat-column-finished {
+  width: 32px;
+  text-align: center;
+}
+

frontend/src/app/tasks/task-dashboard/task-dashboard.component.html

@@ -0,0 +1,47 @@
+<mat-form-field appearance="fill">
+  <mat-label>Search</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Search for Taskname" #input>
+</mat-form-field>
+
+<mat-slide-toggle style="margin-left: 20px">Show finished tasks</mat-slide-toggle>
+
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="datasource" matSort>
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let task"> {{task.taskName}} </td>
+    </ng-container>
+    <ng-container matColumnDef="eta">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> ETA </th>
+      <td mat-cell *matCellDef="let task"> {{task.eta}} </td>
+    </ng-container>
+    <ng-container matColumnDef="start">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Start </th>
+      <td mat-cell *matCellDef="let task"> {{task.startDate}} </td>
+    </ng-container>
+    <ng-container matColumnDef="deadline">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Deadline </th>
+      <td mat-cell *matCellDef="let task"> {{task.deadline}} </td>
+    </ng-container>
+    <ng-container matColumnDef="finished">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Finished </th>
+      <td mat-cell *matCellDef="let task">
+        <mat-checkbox [value]="task.finished" [contentEditable]="false" disableRipple="true" (click)="$event.preventDefault()"></mat-checkbox>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+      <td mat-cell *matCellDef="let task">
+        <div class="status-indicator" [style.background-color]="getStatusOfTask(task)"></div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <!-- Row shown when there is no matching data. -->
+    <tr class="mat-row" *matNoDataRow>
+      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+    </tr>
+  </table>
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+</div>

frontend/src/app/tasks/task-dashboard/task-dashboard.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskDashboardComponent } from './task-dashboard.component';
+
+describe('TaskDashboardComponent', () => {
+  let component: TaskDashboardComponent;
+  let fixture: ComponentFixture<TaskDashboardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskDashboardComponent]
+    });
+    fixture = TestBed.createComponent(TaskDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/tasks/task-dashboard/task-dashboard.component.ts

@@ -0,0 +1,49 @@
+import {AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
+import {TaskEntityInfo, TaskService} from "../../../api";
+import {MatPaginator} from "@angular/material/paginator";
+import {MatSort} from "@angular/material/sort";
+import {MatTableDataSource} from "@angular/material/table";
+import {TaskEditorComponent} from "../task-editor/task-editor.component";
+
+@Component({
+  selector: 'app-task-dashboard',
+  templateUrl: './task-dashboard.component.html',
+  styleUrls: ['./task-dashboard.component.css']
+})
+export class TaskDashboardComponent implements OnChanges{
+  ngOnChanges(): void {
+    if(this.taskgroupID != undefined) {
+      this.taskService.tasksTaskgroupIDStatusGet(this.taskgroupID!, "all").subscribe({
+        next: resp => {
+          this.datasource = new MatTableDataSource<TaskEntityInfo>(resp);
+          this.datasource.paginator = this.paginator!;
+          this.datasource.sort = this.sort!;
+        }
+      })
+    }
+  }
+
+  @Input("taskgroupID") taskgroupID: number | undefined
+  @ViewChild(MatPaginator) paginator: MatPaginator | undefined
+  @ViewChild(MatSort) sort: MatSort | undefined
+
+  displayedColumns: string[] = ['status', 'name', 'eta', 'start', 'deadline', 'finished'];
+  datasource: MatTableDataSource<TaskEntityInfo> = new MatTableDataSource<TaskEntityInfo>();
+
+  constructor(private taskService: TaskService) {
+  }
+
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.datasource.filter = filterValue.trim().toLowerCase();
+
+    if (this.datasource.paginator) {
+      this.datasource.paginator.firstPage();
+    }
+  }
+
+  getStatusOfTask(task: TaskEntityInfo) {
+    return "green";
+  }
+}