From 32142c759f6397370379a08874b8bbfe70171593 Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Sun, 22 Oct 2023 11:39:25 +0200
Subject: [PATCH] Taskgroup-Navigation (Issue 13)

---
 backend/.idea/workspace.xml                   | 42 +++++++++++++----
 .../api/controller/TaskgroupController.java   |  4 +-
 .../taskgroup/TaskgroupDetailInfo.java        | 45 +++++++++++++++++++
 .../taskgroup/TaskgroupEntityInfo.java        | 16 -------
 .../taskgroup/TaskgroupShortInfo.java         |  7 +++
 .../core/entities/timemanager/Taskgroup.java  | 12 ++++-
 frontend/src/api/.openapi-generator/FILES     |  1 +
 frontend/src/api/api/taskgroup.service.ts     |  9 ++--
 frontend/src/api/model/models.ts              |  1 +
 frontend/src/api/model/taskgroupDetailInfo.ts | 20 +++++++++
 frontend/src/api/model/taskgroupEntityInfo.ts |  1 -
 frontend/src/app/app.module.ts                |  4 +-
 .../navigation-link-list.component.css        | 23 ++++++++++
 .../navigation-link-list.component.html       |  8 ++++
 .../navigation-link-list.component.spec.ts    | 21 +++++++++
 .../navigation-link-list.component.ts         | 40 +++++++++++++++++
 .../taskgroup-dashboard.component.css         | 16 -------
 .../taskgroup-dashboard.component.html        | 11 ++---
 .../taskgroup-dashboard.component.ts          | 22 ++++++++-
 openapi.yaml                                  | 27 ++++++++---
 20 files changed, 265 insertions(+), 65 deletions(-)
 create mode 100644 backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupDetailInfo.java
 create mode 100644 backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupShortInfo.java
 create mode 100644 frontend/src/api/model/taskgroupDetailInfo.ts
 create mode 100644 frontend/src/app/navigation-link-list/navigation-link-list.component.css
 create mode 100644 frontend/src/app/navigation-link-list/navigation-link-list.component.html
 create mode 100644 frontend/src/app/navigation-link-list/navigation-link-list.component.spec.ts
 create mode 100644 frontend/src/app/navigation-link-list/navigation-link-list.component.ts

diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index ef6d92a..b9a3db5 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -4,13 +4,21 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Implementing edit route for tasks">
+    <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Delete and clear Tasks (Frontend)">
+      <change afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupDetailInfo.java" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupShortInfo.java" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/controller/TaskController.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/controller/TaskController.java" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/java/core/api/controller/TaskgroupController.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/controller/TaskgroupController.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Task.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Task.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/repositories/timemanager/TaskRepository.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/repositories/timemanager/TaskRepository.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/services/TaskService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskService.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupEntityInfo.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupEntityInfo.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Taskgroup.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Taskgroup.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/api/.openapi-generator/FILES" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/api/.openapi-generator/FILES" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/api/api/taskgroup.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/api/api/taskgroup.service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/api/model/models.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/api/model/models.ts" 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/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../openapi.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/../openapi.yaml" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -94,7 +102,7 @@
       <workItem from="1696573678147" duration="111000" />
       <workItem from="1697923629354" duration="3164000" />
       <workItem from="1697958018921" duration="91000" />
-      <workItem from="1697958118995" duration="2830000" />
+      <workItem from="1697958118995" duration="5749000" />
     </task>
     <task id="LOCAL-00001" summary="Structure Taskgroups in Hierarchies">
       <option name="closed" value="true" />
@@ -120,7 +128,23 @@
       <option name="project" value="LOCAL" />
       <updated>1697929392755</updated>
     </task>
-    <option name="localTasksCounter" value="4" />
+    <task id="LOCAL-00004" summary="Delete and clear Tasks">
+      <option name="closed" value="true" />
+      <created>1697962016013</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1697962016013</updated>
+    </task>
+    <task id="LOCAL-00005" summary="Delete and clear Tasks (Frontend)">
+      <option name="closed" value="true" />
+      <created>1697962125518</created>
+      <option name="number" value="00005" />
+      <option name="presentableId" value="LOCAL-00005" />
+      <option name="project" value="LOCAL" />
+      <updated>1697962125518</updated>
+    </task>
+    <option name="localTasksCounter" value="6" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -131,7 +155,9 @@
     <MESSAGE value="Update gitignore for idea folder" />
     <MESSAGE value="Datastructure for Tasks" />
     <MESSAGE value="Implementing edit route for tasks" />
-    <option name="LAST_COMMIT_MESSAGE" value="Implementing edit route for tasks" />
+    <MESSAGE value="Delete and clear Tasks" />
+    <MESSAGE value="Delete and clear Tasks (Frontend)" />
+    <option name="LAST_COMMIT_MESSAGE" value="Delete and clear Tasks (Frontend)" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
diff --git a/backend/src/main/java/core/api/controller/TaskgroupController.java b/backend/src/main/java/core/api/controller/TaskgroupController.java
index 2735d48..3aac83d 100644
--- a/backend/src/main/java/core/api/controller/TaskgroupController.java
+++ b/backend/src/main/java/core/api/controller/TaskgroupController.java
@@ -1,6 +1,7 @@
 package core.api.controller;
 
 import core.api.models.auth.SimpleStatusResponse;
+import core.api.models.timemanager.taskgroup.TaskgroupDetailInfo;
 import core.api.models.timemanager.taskgroup.TaskgroupEntityInfo;
 import core.api.models.timemanager.taskgroup.TaskgroupFieldInfo;
 import core.entities.timemanager.Taskgroup;
@@ -90,8 +91,7 @@ public class TaskgroupController {
             return ResponseEntity.status(404).body(new SimpleStatusResponse("failed"));
         }
 
-        Set<Taskgroup> children = taskgroupPermissionResult.getResult().getChildren();
-        return ResponseEntity.ok(children.stream().map(TaskgroupEntityInfo::new));
+        return ResponseEntity.ok(new TaskgroupDetailInfo(taskgroupPermissionResult.getResult()));
     }
 
     @DeleteMapping("/taskgroups/{taskgroupID}/clear")
diff --git a/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupDetailInfo.java b/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupDetailInfo.java
new file mode 100644
index 0000000..f7acdd3
--- /dev/null
+++ b/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupDetailInfo.java
@@ -0,0 +1,45 @@
+package core.api.models.timemanager.taskgroup;
+
+import core.entities.timemanager.Taskgroup;
+import org.springframework.scheduling.config.Task;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class TaskgroupDetailInfo {
+
+    private List<TaskgroupEntityInfo> children;
+    private List<TaskgroupEntityInfo> ancestors;
+    private TaskgroupEntityInfo taskgroupInfo;
+
+    public TaskgroupDetailInfo(Taskgroup taskgroup) {
+        this.children = taskgroup.getChildren().stream().map(TaskgroupEntityInfo::new).toList();
+        List<Taskgroup> ancestorList = Taskgroup.getAncestorList(taskgroup);
+        this.ancestors = ancestorList.stream().map(TaskgroupEntityInfo::new).toList();
+        this.taskgroupInfo = new TaskgroupEntityInfo(taskgroup);
+    }
+
+    public List<TaskgroupEntityInfo> getChildren() {
+        return children;
+    }
+
+    public void setChildren(List<TaskgroupEntityInfo> children) {
+        this.children = children;
+    }
+
+    public List<TaskgroupEntityInfo> getAncestors() {
+        return ancestors;
+    }
+
+    public void setAncestors(List<TaskgroupEntityInfo> ancestors) {
+        this.ancestors = ancestors;
+    }
+
+    public TaskgroupEntityInfo getTaskgroupInfo() {
+        return taskgroupInfo;
+    }
+
+    public void setTaskgroupInfo(TaskgroupEntityInfo taskgroupInfo) {
+        this.taskgroupInfo = taskgroupInfo;
+    }
+}
diff --git a/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupEntityInfo.java b/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupEntityInfo.java
index f8027ef..99fd360 100644
--- a/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupEntityInfo.java
+++ b/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupEntityInfo.java
@@ -7,17 +7,9 @@ public class TaskgroupEntityInfo {
     private long taskgroupID;
     private String taskgroupName;
 
-    private TaskgroupEntityInfo parentTaskgroup;
-
     public TaskgroupEntityInfo(Taskgroup taskgroup) {
         this.taskgroupID = taskgroup.getTaskgroupID();
         this.taskgroupName = taskgroup.getTaskgroupName();
-
-        if(taskgroup.getParent() == null) {
-            this.parentTaskgroup = null;
-        } else {
-            this.parentTaskgroup = new TaskgroupEntityInfo(taskgroup.getParent());
-        }
     }
 
     public long getTaskgroupID() {
@@ -35,12 +27,4 @@ public class TaskgroupEntityInfo {
     public void setTaskgroupName(String taskgroupName) {
         this.taskgroupName = taskgroupName;
     }
-
-    public TaskgroupEntityInfo getParentTaskgroup() {
-        return parentTaskgroup;
-    }
-
-    public void setParentTaskgroup(TaskgroupEntityInfo parentTaskgroup) {
-        this.parentTaskgroup = parentTaskgroup;
-    }
 }
diff --git a/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupShortInfo.java b/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupShortInfo.java
new file mode 100644
index 0000000..7e2d6b7
--- /dev/null
+++ b/backend/src/main/java/core/api/models/timemanager/taskgroup/TaskgroupShortInfo.java
@@ -0,0 +1,7 @@
+package core.api.models.timemanager.taskgroup;
+
+public class TaskgroupShortInfo {
+
+    private long taskgroupID;
+    private String taskgroupName;
+}
diff --git a/backend/src/main/java/core/entities/timemanager/Taskgroup.java b/backend/src/main/java/core/entities/timemanager/Taskgroup.java
index 6e18d60..cda02db 100644
--- a/backend/src/main/java/core/entities/timemanager/Taskgroup.java
+++ b/backend/src/main/java/core/entities/timemanager/Taskgroup.java
@@ -4,7 +4,7 @@ import core.entities.User;
 
 import javax.persistence.*;
 import javax.validation.constraints.NotBlank;
-import java.util.Set;
+import java.util.*;
 
 @Entity
 @Table(name= "taskgroups")
@@ -87,4 +87,14 @@ public class Taskgroup {
     public void setTasks(Set<Task> tasks) {
         this.tasks = tasks;
     }
+
+    public static List<Taskgroup> getAncestorList(Taskgroup taskgroup) {
+        List<Taskgroup> ancestors = new ArrayList<>();
+        Taskgroup currentTaskgroup = taskgroup;
+        while(currentTaskgroup.parent != null) {
+            ancestors.add(currentTaskgroup.parent);
+            currentTaskgroup = currentTaskgroup.parent;
+        }
+        return ancestors;
+    }
 }
diff --git a/frontend/src/api/.openapi-generator/FILES b/frontend/src/api/.openapi-generator/FILES
index 52fe019..193e82b 100644
--- a/frontend/src/api/.openapi-generator/FILES
+++ b/frontend/src/api/.openapi-generator/FILES
@@ -29,6 +29,7 @@ model/signUpRequest.ts
 model/simpleStatusResponse.ts
 model/taskEntityInfo.ts
 model/taskFieldInfo.ts
+model/taskgroupDetailInfo.ts
 model/taskgroupEntityInfo.ts
 model/taskgroupFieldInfo.ts
 model/userAddInfo.ts
diff --git a/frontend/src/api/api/taskgroup.service.ts b/frontend/src/api/api/taskgroup.service.ts
index 851fd07..986a270 100644
--- a/frontend/src/api/api/taskgroup.service.ts
+++ b/frontend/src/api/api/taskgroup.service.ts
@@ -21,6 +21,7 @@ import { Observable }                                        from 'rxjs';
 import { InlineResponse200 } from '../model/models';
 import { InlineResponse403 } from '../model/models';
 import { SimpleStatusResponse } from '../model/models';
+import { TaskgroupDetailInfo } from '../model/models';
 import { TaskgroupEntityInfo } from '../model/models';
 import { TaskgroupFieldInfo } from '../model/models';
 
@@ -390,9 +391,9 @@ export class TaskgroupService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public taskgroupsTaskgroupIDGet(taskgroupID: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<Array<TaskgroupEntityInfo>>;
-    public taskgroupsTaskgroupIDGet(taskgroupID: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<Array<TaskgroupEntityInfo>>>;
-    public taskgroupsTaskgroupIDGet(taskgroupID: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<Array<TaskgroupEntityInfo>>>;
+    public taskgroupsTaskgroupIDGet(taskgroupID: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<TaskgroupDetailInfo>;
+    public taskgroupsTaskgroupIDGet(taskgroupID: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<TaskgroupDetailInfo>>;
+    public taskgroupsTaskgroupIDGet(taskgroupID: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<TaskgroupDetailInfo>>;
     public taskgroupsTaskgroupIDGet(taskgroupID: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
         if (taskgroupID === null || taskgroupID === undefined) {
             throw new Error('Required parameter taskgroupID was null or undefined when calling taskgroupsTaskgroupIDGet.');
@@ -430,7 +431,7 @@ export class TaskgroupService {
             responseType_ = 'text';
         }
 
-        return this.httpClient.get<Array<TaskgroupEntityInfo>>(`${this.configuration.basePath}/taskgroups/${encodeURIComponent(String(taskgroupID))}`,
+        return this.httpClient.get<TaskgroupDetailInfo>(`${this.configuration.basePath}/taskgroups/${encodeURIComponent(String(taskgroupID))}`,
             {
                 context: localVarHttpContext,
                 responseType: <any>responseType_,
diff --git a/frontend/src/api/model/models.ts b/frontend/src/api/model/models.ts
index 2647fda..6df1b66 100644
--- a/frontend/src/api/model/models.ts
+++ b/frontend/src/api/model/models.ts
@@ -14,6 +14,7 @@ export * from './signUpRequest';
 export * from './simpleStatusResponse';
 export * from './taskEntityInfo';
 export * from './taskFieldInfo';
+export * from './taskgroupDetailInfo';
 export * from './taskgroupEntityInfo';
 export * from './taskgroupFieldInfo';
 export * from './userAddInfo';
diff --git a/frontend/src/api/model/taskgroupDetailInfo.ts b/frontend/src/api/model/taskgroupDetailInfo.ts
new file mode 100644
index 0000000..c0dee6d
--- /dev/null
+++ b/frontend/src/api/model/taskgroupDetailInfo.ts
@@ -0,0 +1,20 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import { TaskgroupEntityInfo } from './taskgroupEntityInfo';
+
+
+export interface TaskgroupDetailInfo { 
+    children: Array<TaskgroupEntityInfo>;
+    ancestors: Array<TaskgroupEntityInfo>;
+    taskgroupInfo: TaskgroupEntityInfo;
+}
+
diff --git a/frontend/src/api/model/taskgroupEntityInfo.ts b/frontend/src/api/model/taskgroupEntityInfo.ts
index 56c6186..bbec6ed 100644
--- a/frontend/src/api/model/taskgroupEntityInfo.ts
+++ b/frontend/src/api/model/taskgroupEntityInfo.ts
@@ -20,6 +20,5 @@ export interface TaskgroupEntityInfo {
      * name of taskgroup
      */
     taskgroupName: string;
-    parentTaskgroup: TaskgroupEntityInfo;
 }
 
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index a9fc4e0..a133b26 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -52,6 +52,7 @@ import {MatSlideToggleModule} from "@angular/material/slide-toggle";
 import {MatSortModule} from "@angular/material/sort";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import { ClearTaskDialogComponent } from './tasks/clear-task-dialog/clear-task-dialog.component';
+import { NavigationLinkListComponent } from './navigation-link-list/navigation-link-list.component';
 
 @NgModule({
   declarations: [
@@ -74,7 +75,8 @@ import { ClearTaskDialogComponent } from './tasks/clear-task-dialog/clear-task-d
     TaskgroupDeletionComponent,
     TaskEditorComponent,
     TaskDashboardComponent,
-    ClearTaskDialogComponent
+    ClearTaskDialogComponent,
+    NavigationLinkListComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/navigation-link-list/navigation-link-list.component.css b/frontend/src/app/navigation-link-list/navigation-link-list.component.css
new file mode 100644
index 0000000..f6a42f8
--- /dev/null
+++ b/frontend/src/app/navigation-link-list/navigation-link-list.component.css
@@ -0,0 +1,23 @@
+
+.navLink {
+  text-decoration: underline;
+  color: black;
+  margin-right: 5px;
+  margin-left: 3px;
+}
+
+.navLink-disabled {
+  text-decoration: none;
+  color: grey;
+
+}
+
+.navLink-bar {
+  margin-bottom: 20px;
+}
+
+.link-separation {
+  text-decoration: none;
+  padding-right: 5px;
+}
+
diff --git a/frontend/src/app/navigation-link-list/navigation-link-list.component.html b/frontend/src/app/navigation-link-list/navigation-link-list.component.html
new file mode 100644
index 0000000..661f932
--- /dev/null
+++ b/frontend/src/app/navigation-link-list/navigation-link-list.component.html
@@ -0,0 +1,8 @@
+<mat-card class="navLink-bar">
+  <mat-card-content>
+    <span  *ngFor="let navigationLink of navigationLinks; index as i">
+      <span class="link-seperation" *ngIf="i !== 0">/</span>
+      <a class="navLink" [routerLink]="navigationLink.routerLink" [class.navLink-disabled]="i == navigationLinks.length-1">{{navigationLink.linkText}}</a>
+    </span>
+  </mat-card-content>
+</mat-card>
diff --git a/frontend/src/app/navigation-link-list/navigation-link-list.component.spec.ts b/frontend/src/app/navigation-link-list/navigation-link-list.component.spec.ts
new file mode 100644
index 0000000..f8f2860
--- /dev/null
+++ b/frontend/src/app/navigation-link-list/navigation-link-list.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationLinkListComponent } from './navigation-link-list.component';
+
+describe('NavigationLinkListComponent', () => {
+  let component: NavigationLinkListComponent;
+  let fixture: ComponentFixture<NavigationLinkListComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavigationLinkListComponent]
+    });
+    fixture = TestBed.createComponent(NavigationLinkListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/navigation-link-list/navigation-link-list.component.ts b/frontend/src/app/navigation-link-list/navigation-link-list.component.ts
new file mode 100644
index 0000000..8387aee
--- /dev/null
+++ b/frontend/src/app/navigation-link-list/navigation-link-list.component.ts
@@ -0,0 +1,40 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+export interface NavigationLink {
+  routerLink: string[],
+  linkText: string
+}
+
+@Component({
+  selector: 'app-navigation-link-list',
+  templateUrl: './navigation-link-list.component.html',
+  styleUrls: ['./navigation-link-list.component.css']
+})
+export class NavigationLinkListComponent implements OnInit{
+
+
+
+  @Input() navigationLinks: NavigationLink[] = []
+
+  ngOnInit(): void {
+
+  }
+
+  addNavigationLink(linkText: string, link: string[]) {
+    const navigationLink: NavigationLink = {
+      linkText: linkText,
+      routerLink: link
+    }
+
+    if(this.navigationLinks.find(searchedLink => searchedLink.linkText === linkText) === undefined) {
+      this.navigationLinks.push(navigationLink);
+    }
+  }
+
+  removeLink(linkText: string) {
+    this.navigationLinks = this.navigationLinks.filter(link => link.linkText === linkText);
+  }
+
+
+
+}
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
index 34bbabd..1f4cd84 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
@@ -15,22 +15,6 @@
   }
 }
 
-.navLink {
-  text-decoration: underline;
-  color: black;
-  margin-right: 5px;
-}
-
-.navLink-disabled {
-  text-decoration: none;
-  color: grey;
-
-}
-
-.navLink-bar {
-  margin-bottom: 20px;
-}
-
 #addTaskgroupBtn {
   margin-top: 20px;
   float: right;
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
index 52d88a9..51fceb5 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
@@ -1,10 +1,5 @@
 <div class="container">
-  <mat-card class="navLink-bar">
-    <mat-card-content>
-      <a class="navLink" routerLink="/">Dashboard</a>
-      <a class="navLink-disabled">/ Taskgroups</a>
-    </mat-card-content>
-  </mat-card>
+  <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
 
   <mat-card *ngFor="let taskgroup of taskgroups">
     <mat-card-content>
@@ -16,13 +11,13 @@
 
   </mat-card>
 
-  <mat-card style="width: 100%">
+  <mat-card style="width: 100%" *ngIf="taskgroupID >= 0">
     <mat-card-content>
       <app-task-dashboard #taskDashboard [taskgroupID]="taskgroupID"></app-task-dashboard>
     </mat-card-content>
   </mat-card>
   <div style="width: 100%">
-    <button id="addTaskBtn" mat-raised-button color="primary" (click)="openTaskCreation()">Create New Task</button>
+    <button id="addTaskBtn" *ngIf="taskgroupID >= 0" mat-raised-button color="primary" (click)="openTaskCreation()">Create New Task</button>
     <button id="addTaskgroupBtn" mat-raised-button color="primary" (click)="openTaskgroupCreation()">Create new Taskgroup</button>
   </div>
 
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
index 9f30de6..5dafbf6 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
@@ -7,6 +7,7 @@ import {ActivatedRoute} from "@angular/router";
 import {TaskEditorComponent} from "../../tasks/task-editor/task-editor.component";
 import {TaskEditorData} from "../../tasks/task-editor/TaskEditorData";
 import {TaskDashboardComponent} from "../../tasks/task-dashboard/task-dashboard.component";
+import {NavigationLink, NavigationLinkListComponent} from "../../navigation-link-list/navigation-link-list.component";
 
 @Component({
   selector: 'app-taskgroup-dashboard',
@@ -20,8 +21,21 @@ export class TaskgroupDashboardComponent implements OnInit {
               private activatedRoute: ActivatedRoute) { }
 
   taskgroups: TaskgroupEntityInfo[] = []
+  taskgroup: TaskgroupEntityInfo | undefined
+  taskgroupPath: TaskgroupEntityInfo[] = []
   taskgroupID: number = -1;
   @ViewChild("taskDashboard") taskDashboard: TaskDashboardComponent | undefined
+  @ViewChild('navLinkList') navLinkListComponent: NavigationLinkListComponent | undefined
+  defaultNavigationLinkPath: NavigationLink[] = [
+    {
+      linkText: "Dashboard",
+      routerLink: ['/']
+    },
+    {
+      linkText: "Taskgroups",
+      routerLink: ["/taskgroups"]
+    }
+  ]
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
@@ -29,7 +43,13 @@ export class TaskgroupDashboardComponent implements OnInit {
         this.taskgroupID = Number(params.get('taskgroupID'));
         this.taskgroupService.taskgroupsTaskgroupIDGet(this.taskgroupID).subscribe({
           next: resp => {
-            this.taskgroups = resp
+            this.taskgroups = resp.children
+            this.taskgroupPath = resp.ancestors
+            this.taskgroup = resp.taskgroupInfo;
+            this.navLinkListComponent!.addNavigationLink(this.taskgroup.taskgroupName, ['/taskgroups', this.taskgroup.taskgroupID.toString()])
+            this.taskgroupPath.forEach(taskgroupEntity => {
+              this.navLinkListComponent!.addNavigationLink(taskgroupEntity.taskgroupName, ['/taskgroups', taskgroupEntity.taskgroupID.toString()]);
+            })
           }
         })
       } else {
diff --git a/openapi.yaml b/openapi.yaml
index a4b4cf8..fe57c4d 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -654,9 +654,8 @@ paths:
           content:
             'application/json':
               schema:
-                type: array
-                items:
-                  $ref: '#/components/schemas/TaskgroupEntityInfo'
+                type: object
+                $ref: '#/components/schemas/TaskgroupDetailInfo'
         403:
           description: No permission
           content:
@@ -1328,7 +1327,6 @@ components:
       required:
         - taskgroupID
         - taskgroupName
-        - parentTaskgroup
       additionalProperties: false
       properties:
         taskgroupID:
@@ -1341,9 +1339,6 @@ components:
           example: Taskgroup 1
           maxLength: 255
           minLength: 1
-        parentTaskgroup:
-          type: object
-          $ref: '#/components/schemas/TaskgroupEntityInfo'
     TaskgroupFieldInfo:
       required:
         - name
@@ -1360,6 +1355,24 @@ components:
           type: number
           description: internal id of parent Taskgroup
           example: 1
+    TaskgroupDetailInfo:
+      required:
+        - children
+        - ancestors
+        - taskgroupInfo
+      additionalProperties: false
+      properties:
+        children:
+          type: array
+          items:
+            $ref: '#/components/schemas/TaskgroupEntityInfo'
+        ancestors:
+          type: array
+          items:
+            $ref: '#/components/schemas/TaskgroupEntityInfo'
+        taskgroupInfo:
+          type: object
+          $ref: '#/components/schemas/TaskgroupEntityInfo'
     TaskEntityInfo:
       required:
         - taskID