From 673faa5912be7ed3af564d35316a8c477d5a9dd8 Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Thu, 26 Oct 2023 10:21:29 +0200
Subject: [PATCH 1/5] First Approach to visualize nested taskgroups

---
 frontend/src/app/dashboard/dashboard.component.html | 13 ++++++++++++-
 frontend/src/app/dashboard/dashboard.component.ts   |  5 +++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 3b16ade..05f687c 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -42,7 +42,18 @@
   <div class="taskgroup-overview">
       <mat-action-list>
         <button mat-list-item class="lightBlueBtn">Manage Taskgroups</button>
-        <button mat-list-item class="taskgroup-btn">Algorithmen II</button>
+        <div mat-list-item class="taskgroup-btn">
+          <button mat-list-item (click)="test()">Algorithmen II</button>
+          <div style=" background: aliceblue">
+            <mat-action-list style="margin-left: 20px;" *ngIf="test_Var">
+              <button mat-list-item class="taskgroup-btn">
+                Vorlesungen
+              </button>
+            </mat-action-list>
+          </div>
+
+        </div>
+
         <button mat-list-item class="taskgroup-last-btn">Computer Grafik</button>
       </mat-action-list>
   </div>
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 0a089b9..4cf6195 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -13,6 +13,7 @@ export class DashboardComponent implements OnInit{
   missedSchedules: boolean = true
   schedules: ScheduleInfo[] = []
   workedMinutesToday: number = 0
+  test_Var: boolean = false;
 
   @ViewChild('activeSchedule') activeScheduleComponent: ActiveScheduleComponent | undefined
   constructor(private scheduleService: ScheduleService) {
@@ -42,4 +43,8 @@ export class DashboardComponent implements OnInit{
     this.workedMinutesToday += stopActiveScheduleInfo.workedMinutes;
     this.schedules = this.schedules.filter(schedule => schedule.scheduleID !== stopActiveScheduleInfo.schedule.scheduleID);
   }
+
+  test() {
+    this.test_Var = !this.test_Var;
+  }
 }

From 7ee892884981518aab08d1f4363ca408f4d67055 Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Sat, 28 Oct 2023 08:48:52 +0200
Subject: [PATCH 2/5] Taskgroup Overview with Action-List

---
 backend/.idea/workspace.xml                   |  55 ++++---
 frontend/src/app/app.module.ts                |  76 +++++-----
 .../src/app/dashboard/dashboard.component.css |   7 +
 .../app/dashboard/dashboard.component.html    |  19 +--
 .../src/app/dashboard/dashboard.component.ts  |   5 +-
 .../taskgroup-overview.component.css          | 142 ++++++++++++++++++
 .../taskgroup-overview.component.html         |   7 +
 .../taskgroup-overview.component.spec.ts      |  21 +++
 .../taskgroup-overview.component.ts           |  14 ++
 9 files changed, 265 insertions(+), 81 deletions(-)
 create mode 100644 frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
 create mode 100644 frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
 create mode 100644 frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.spec.ts
 create mode 100644 frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts

diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index 86e32db..07e8d25 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -5,7 +5,10 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Remove update spamming in console">
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/dashboard/dashboard.component.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -41,33 +44,33 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "RequestMappingsPanelOrder0": "0",
-    "RequestMappingsPanelOrder1": "1",
-    "RequestMappingsPanelWidth0": "75",
-    "RequestMappingsPanelWidth1": "75",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "issue-11-angular-update",
-    "last_directory_selection": "D:/Programmierprojekte/TimeManager/backend/src/main/java/core/api/models/timemanager",
-    "last_opened_file_path": "D:/Programmierprojekte/Dicewars/client",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "settings.editor.selected.configurable": "swagger",
-    "ts.external.directory.path": "/snap/intellij-idea-ultimate/459/plugins/javascript-impl/jsLanguageServicesImpl/external",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RequestMappingsPanelOrder0&quot;: &quot;0&quot;,
+    &quot;RequestMappingsPanelOrder1&quot;: &quot;1&quot;,
+    &quot;RequestMappingsPanelWidth0&quot;: &quot;75&quot;,
+    &quot;RequestMappingsPanelWidth1&quot;: &quot;75&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;issue-11-angular-update&quot;,
+    &quot;last_directory_selection&quot;: &quot;D:/Programmierprojekte/TimeManager/backend/src/main/java/core/api/models/timemanager&quot;,
+    &quot;last_opened_file_path&quot;: &quot;D:/Programmierprojekte/Dicewars/client&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;swagger&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/snap/intellij-idea-ultimate/459/plugins/javascript-impl/jsLanguageServicesImpl/external&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   },
-  "keyToStringList": {
-    "DatabaseDriversLRU": [
-      "mariadb"
+  &quot;keyToStringList&quot;: {
+    &quot;DatabaseDriversLRU&quot;: [
+      &quot;mariadb&quot;
     ]
   }
-}]]></component>
+}</component>
   <component name="RunManager">
     <configuration name="DemoApplication" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
       <module name="demo" />
@@ -100,6 +103,8 @@
       <workItem from="1698164397550" duration="2329000" />
       <workItem from="1698246651541" duration="5106000" />
       <workItem from="1698298897364" duration="4242000" />
+      <workItem from="1698426430946" duration="665000" />
+      <workItem from="1698474363766" duration="612000" />
     </task>
     <task id="LOCAL-00001" summary="Structure Taskgroups in Hierarchies">
       <option name="closed" value="true" />
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c107997..8043478 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -64,6 +64,8 @@ import { BasicSchedulerComponent } from './schedules/basic-scheduler/basic-sched
 import { ScheduleDashboardComponent } from './schedules/schedule-dashboard/schedule-dashboard.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ActiveScheduleComponent } from './dashboard/active-schedule/active-schedule.component';
+import {MatTreeModule} from "@angular/material/tree";
+import { TaskgroupOverviewComponent } from './dashboard/taskgroup-overview/taskgroup-overview.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -92,43 +94,45 @@ import { ActiveScheduleComponent } from './dashboard/active-schedule/active-sche
     BasicSchedulerComponent,
     ScheduleDashboardComponent,
     DashboardComponent,
-    ActiveScheduleComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    ApiModule,
-    HttpClientModule,
-    BrowserAnimationsModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatIconModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    MatMenuModule,
-    MatTabsModule,
-    MatTableModule,
-    MatCheckboxModule,
-    MatCardModule,
-    ReactiveFormsModule,
-    MatListModule,
-    MatDatepickerModule,
-    MatInputModule,
-    MatDatepickerModule,
-    MatMomentDateModule,
-    FormsModule,
-    MatSlideToggleModule,
-    MatSortModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatExpansionModule,
-    CalendarModule.forRoot({provide: DateAdapter, useFactory: adapterFactory}),
-    MatSelectModule
+    ActiveScheduleComponent,
+    TaskgroupOverviewComponent
   ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        ApiModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        MatToolbarModule,
+        MatButtonModule,
+        MatIconModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSnackBarModule,
+        MatMenuModule,
+        MatTabsModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatCardModule,
+        ReactiveFormsModule,
+        MatListModule,
+        MatDatepickerModule,
+        MatInputModule,
+        MatDatepickerModule,
+        MatMomentDateModule,
+        FormsModule,
+        MatSlideToggleModule,
+        MatSortModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatExpansionModule,
+        CalendarModule.forRoot({provide: DateAdapter, useFactory: adapterFactory}),
+        MatSelectModule,
+        MatTreeModule
+    ],
   providers: [
     HttpClientModule,
     /*
diff --git a/frontend/src/app/dashboard/dashboard.component.css b/frontend/src/app/dashboard/dashboard.component.css
index b6f411a..d6a2964 100644
--- a/frontend/src/app/dashboard/dashboard.component.css
+++ b/frontend/src/app/dashboard/dashboard.component.css
@@ -133,3 +133,10 @@
 .right-actions {
   float: right;
 }
+
+.taskgroup-first-child {
+  background-color: #f3f3f3;
+  border: 0 solid #000000;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 05f687c..a516d20 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -39,23 +39,10 @@
 
   </div>
   <span class="spacer"></span>
+
   <div class="taskgroup-overview">
-      <mat-action-list>
-        <button mat-list-item class="lightBlueBtn">Manage Taskgroups</button>
-        <div mat-list-item class="taskgroup-btn">
-          <button mat-list-item (click)="test()">Algorithmen II</button>
-          <div style=" background: aliceblue">
-            <mat-action-list style="margin-left: 20px;" *ngIf="test_Var">
-              <button mat-list-item class="taskgroup-btn">
-                Vorlesungen
-              </button>
-            </mat-action-list>
-          </div>
-
-        </div>
-
-        <button mat-list-item class="taskgroup-last-btn">Computer Grafik</button>
-      </mat-action-list>
+      <app-taskgroup-overview></app-taskgroup-overview>
   </div>
 
+
 </div>
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 4cf6195..ccc66d2 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -13,7 +13,6 @@ export class DashboardComponent implements OnInit{
   missedSchedules: boolean = true
   schedules: ScheduleInfo[] = []
   workedMinutesToday: number = 0
-  test_Var: boolean = false;
 
   @ViewChild('activeSchedule') activeScheduleComponent: ActiveScheduleComponent | undefined
   constructor(private scheduleService: ScheduleService) {
@@ -44,7 +43,5 @@ export class DashboardComponent implements OnInit{
     this.schedules = this.schedules.filter(schedule => schedule.scheduleID !== stopActiveScheduleInfo.schedule.scheduleID);
   }
 
-  test() {
-    this.test_Var = !this.test_Var;
-  }
+
 }
diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
new file mode 100644
index 0000000..d6a2964
--- /dev/null
+++ b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
@@ -0,0 +1,142 @@
+.container {
+  margin: 20px auto;
+  width: 70%;
+  display: flex;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
+
+.today-worked-info {
+  margin-left: 20px;
+  background-color: #e1e1e1;
+  padding-right: 5px;
+  padding-left: 5px;
+  border-radius: 5px;
+}
+
+.red-card {
+  background-color: #e54c3c;
+  color: white;
+}
+
+.green-card {
+  background-color: #00bc8c;
+  color: white;
+}
+
+.main-container {
+  width: 45%;
+  margin-right: 20px;
+}
+
+.btn-link {
+  text-decoration: underline;
+  color: white;
+  margin-left: 20px;
+}
+
+.dashboard-heading {
+  margin-top: 20px;
+  font-size: 2.5em;
+}
+
+.today-worked-info {
+  font-size: .8em;
+}
+
+
+.lightBlueBtn {
+  background-color: #3498db;
+  color: white;
+}
+
+.grayBtn {
+  background-color: #444444;
+  color: white;
+  border-radius: 0;
+}
+
+::ng-deep .mat-mdc-list-base {
+  --mdc-list-list-item-label-text-color: white
+}
+
+::ng-deep .mat-mdc-list-base .taskgroup-btn, ::ng-deep .mat-mdc-list-base .taskgroup-last-btn  {
+  --mdc-list-list-item-label-text-color: black
+}
+
+.taskgroup-overview {
+  width: 25%;
+  float: right;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.taskgroup-btn {
+  background-color: #f3f3f3;
+  border: 0 solid #000000;
+  border-bottom-width: 1px;
+}
+
+.taskgroup-last-btn {
+  background-color: #f3f3f3;
+}
+
+.link-no-deco {
+  text-decoration: none;
+  color: black;
+}
+
+.link-no-deco:hover{
+  text-decoration: underline;
+}
+
+.gray-text {
+  color: #6e6e6e;
+}
+
+.yellowBtn {
+  background-color: #f39c12;
+  color: white;
+  border-radius: 0;
+}
+
+.primaryBtn {
+  border-radius: 0;
+}
+
+
+::ng-deep .mat-mdc-card-header-text {
+  display: block;
+  width: 100%;
+}
+
+.schedule-del-btn {
+  margin-top: 10px;
+}
+
+.left-actions {
+  float: left;
+}
+
+.right-actions {
+  float: right;
+}
+
+.taskgroup-first-child {
+  background-color: #f3f3f3;
+  border: 0 solid #000000;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
new file mode 100644
index 0000000..77e3667
--- /dev/null
+++ b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
@@ -0,0 +1,7 @@
+<mat-action-list>
+  <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>
diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.spec.ts b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.spec.ts
new file mode 100644
index 0000000..064cc0d
--- /dev/null
+++ b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskgroupOverviewComponent } from './taskgroup-overview.component';
+
+describe('TaskgroupOverviewComponent', () => {
+  let component: TaskgroupOverviewComponent;
+  let fixture: ComponentFixture<TaskgroupOverviewComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskgroupOverviewComponent]
+    });
+    fixture = TestBed.createComponent(TaskgroupOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts
new file mode 100644
index 0000000..bfba540
--- /dev/null
+++ b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-taskgroup-overview',
+  templateUrl: './taskgroup-overview.component.html',
+  styleUrls: ['./taskgroup-overview.component.css']
+})
+export class TaskgroupOverviewComponent {
+
+  test_Var: boolean = false;
+  test() {
+    this.test_Var = !this.test_Var;
+  }
+}

From eb197aca52841c5457c8a4106232d1acc65b10a9 Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Sat, 28 Oct 2023 09:09:00 +0200
Subject: [PATCH 3/5] Taskgroup Overview with Action-List

---
 .../taskgroup-overview.component.css          |  4 +
 .../taskgroup-overview.component.html         | 24 ++++--
 .../taskgroup-overview.component.ts           | 79 ++++++++++++++++++-
 3 files changed, 99 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
index d6a2964..2b7e42c 100644
--- a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
+++ b/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;
+}
diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
index 77e3667..e576d32 100644
--- a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
+++ b/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>
diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts
index bfba540..acf9627 100644
--- a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts
+++ b/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;
-  test() {
-    this.test_Var = !this.test_Var;
+  private _transformer = (node: TreeNode, level: number) => {
+    return {
+      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;
 }

From b57ee244c0098ab63dc6f03d69cb7a4d00b9c534 Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Sat, 28 Oct 2023 09:46:32 +0200
Subject: [PATCH 4/5] Adjust Padding and Font-Weight

---
 .../taskgroup-overview.component.css                   |  1 +
 .../taskgroup-overview.component.html                  | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
index 2b7e42c..2d2f9c7 100644
--- a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
+++ b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
@@ -143,4 +143,5 @@
 
 .node-name {
   font-style: normal;
+  font-weight: normal;
 }
diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
index e576d32..c0b2d37 100644
--- a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
+++ b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
@@ -3,19 +3,19 @@
 </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">
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="taskgroup-btn" matTreeNodePaddingIndent="10">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
-    <button mat-button>{{node.name}}</button>
+    <button mat-button class="node-name">{{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">
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="taskgroup-btn" matTreeNodePaddingIndent="10">
     <button mat-icon-button matTreeNodeToggle
-            [attr.aria-label]="'Toggle ' + node.name">
+            [attr.aria-label]="'Toggle ' + node.name" style="padding-left: 10px">
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
-    <button mat-button>{{node.name}}</button>
+    <button mat-button class="node-name">{{node.name}}</button>
   </mat-tree-node>
 </mat-tree>

From 7d123f87ae782dad83954a8300b547e240412a6a Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Sat, 28 Oct 2023 09:50:12 +0200
Subject: [PATCH 5/5] Change text-align of taskgroup btns

---
 .../taskgroup-overview/taskgroup-overview.component.css          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
index 2d2f9c7..ff6ca31 100644
--- a/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
+++ b/frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
@@ -144,4 +144,5 @@
 .node-name {
   font-style: normal;
   font-weight: normal;
+  text-align: left;
 }