Taskgroup Overview with Action-List

frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css

@@ -140,3 +140,7 @@
   border-top-width: 1px;
   border-bottom-width: 1px;
 }
+
+.node-name {
+  font-style: normal;
+}

frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html

@@ -1,7 +1,21 @@
-<mat-action-list>
+<mat-action-list style="padding: 0">
   <button mat-list-item class="lightBlueBtn">Manage Taskgroups</button>
-  <button mat-list-item (click)="test()" class="taskgroup-btn">Algorithmen II</button>
-  <button mat-list-item *ngIf="test_Var" class="taskgroup-btn"><span style="margin-left: 10px">Vorlesungen</span></button>
-  <button mat-list-item *ngIf="test_Var" class="taskgroup-btn"><span style="margin-left: 10px">Übungen</span></button>
-  <button mat-list-item class="taskgroup-last-btn" *ngIf="!test_Var">Computer Grafik</button>
 </mat-action-list>
+<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
+  <!-- This is the tree node template for leaf nodes -->
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="taskgroup-btn">
+    <!-- use a disabled button to provide padding for tree leaf -->
+    <button mat-icon-button disabled></button>
+    <button mat-button>{{node.name}}</button>
+  </mat-tree-node>
+  <!-- This is the tree node template for expandable nodes -->
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="taskgroup-btn">
+    <button mat-icon-button matTreeNodeToggle
+            [attr.aria-label]="'Toggle ' + node.name">
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
+    </button>
+    <button mat-button>{{node.name}}</button>
+  </mat-tree-node>
+</mat-tree>

frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts

@@ -1,5 +1,55 @@
 import { Component } from '@angular/core';
+import {MatIconModule} from "@angular/material/icon";
+import {MatButtonModule} from "@angular/material/button";
+import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule} from "@angular/material/tree";
+import {FlatTreeControl} from "@angular/cdk/tree";
 
+
+interface TreeNode {
+  name: string
+  children?: TreeNode[]
+}
+
+const TREE_DATA: TreeNode[] = [
+  {
+    name: "KIT",
+    children: [
+      {
+        name: "WS23",
+        children: [
+          {
+            name: "Computergrafik",
+            children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
+          },
+          {
+            name: "Softwaretechnik II",
+            children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
+          },
+          {
+            name: "Algorithmen II",
+            children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
+          }
+        ]
+      },
+      {
+        name: "SS24",
+        children: [
+          {
+            name: "Interaktive Computergrafik",
+            children: [{name: "Vorlesungen"}, {name: "Globalübungen"}]
+          }
+        ]
+      }
+    ]
+  }
+]
+
+/** Flat node with expandable and level information */
+interface ExampleFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+}
 @Component({
   selector: 'app-taskgroup-overview',
   templateUrl: './taskgroup-overview.component.html',
@@ -7,8 +57,31 @@ import { Component } from '@angular/core';
 })
 export class TaskgroupOverviewComponent {
 
-  test_Var: boolean = false;
+  private _transformer = (node: TreeNode, level: number) => {
-  test() {
+    return {
-    this.test_Var = !this.test_Var;
+      expandable: !!node.children && node.children.length > 0,
+      name: node.name,
+      level: level,
+    };
+  };
+
+  treeControl = new FlatTreeControl<ExampleFlatNode>(
+    node => node.level,
+    node => node.expandable,
+  );
+
+  treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    node => node.level,
+    node => node.expandable,
+    node => node.children,
+  );
+
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  constructor() {
+    this.dataSource.data = TREE_DATA;
   }
+
+  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 }