From 98a54f0fdeb246477ca5cffeee850b77a00fc221 Mon Sep 17 00:00:00 2001
From: Dorian Nemec <dorian.nemec@octagen.de>
Date: Wed, 8 Jan 2025 12:29:05 +0100
Subject: [PATCH 1/2] Website Navigation Routing

---
 src/app/app-routing.module.ts                         | 11 +++++++++++
 src/app/app.component.html                            |  2 +-
 src/app/app.component.ts                              | 11 ++++++-----
 .../navigation-bar/navigation-bar.component.html      |  6 +++---
 .../navigation-bar/navigation-bar.component.ts        |  5 ++++-
 5 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 src/app/app-routing.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 0000000..d0b5577
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {routes} from "./app.routes";
+
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0680b43..2f42d3e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<router-outlet></router-outlet>
+<app-employee-detail></app-employee-detail>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 18c70af..57a792e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,25 +1,26 @@
-import {Component} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
+import { Component } from '@angular/core';
+import {RouterModule, RouterOutlet} from '@angular/router';
 import {LoginViewComponent} from "./components/login-view/login-view.component";
 import {
   MitarbeiterverwaltungViewComponent
 } from "./components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component";
 
-import {NavigationBarComponent} from './components/navigation-bar/navigation-bar.component';
-import {EmployeeDetailComponent} from './components/employee-detail/employee-detail.component';
+import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component';
+import { EmployeeDetailComponent } from './components/employee-detail/employee-detail.component';
 import {
   MitarbeiterBearbeitenViewComponent
 } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
 import {
   QualifikatonBearbeitenViewComponent
 } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
+import {AppRoutingModule} from "./app-routing.module";
 import {QualifikatonDetailComponent} from "./components/qualifikaton-detail/qualifikaton-detail.component";
 
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
+  imports: [AppRoutingModule, RouterModule, RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html
index c1e0cbe..2b92e16 100644
--- a/src/app/components/navigation-bar/navigation-bar.component.html
+++ b/src/app/components/navigation-bar/navigation-bar.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-light border-end border-primary" style="width: 300px; height: 100%;">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
+    <a routerLink="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
       <img src="logo.svg" class="bi pe-none me-2" width="40" height="32"/>
       <span class="fs-4">Hi-Tec GmbH</span>
     </a>
@@ -11,12 +11,12 @@
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-black">
+        <a routerLink="/mitarbeiter" class="nav-link text-black">
           Mitarbeiterverwaltung
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-black">
+        <a routerLink="/qualifikationbearbeiten" class="nav-link text-black">
           Qualifikationsverwaltung
         </a>
       </li>
diff --git a/src/app/components/navigation-bar/navigation-bar.component.ts b/src/app/components/navigation-bar/navigation-bar.component.ts
index ed53374..33acde3 100644
--- a/src/app/components/navigation-bar/navigation-bar.component.ts
+++ b/src/app/components/navigation-bar/navigation-bar.component.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import {RouterLink} from "@angular/router";
 
 @Component({
   selector: 'app-navigation-bar',
   standalone: true,
-  imports: [],
+  imports: [
+    RouterLink
+  ],
   templateUrl: './navigation-bar.component.html',
   styleUrl: './navigation-bar.component.css'
 })
-- 
2.45.3


From 5c2e885e7d5d1b2d3acf7646f395fef222e53ec1 Mon Sep 17 00:00:00 2001
From: Dorian Nemec <dorian.nemec@octagen.de>
Date: Wed, 15 Jan 2025 08:48:41 +0100
Subject: [PATCH 2/2] Website Navigation Routing

---
 src/app/app-routing.module.ts                 |  2 +-
 src/app/app.component.html                    |  2 +-
 .../mitarbeiterverwaltung-view.component.html |  3 +
 .../mitarbeiterverwaltung-view.component.ts   |  5 +-
 .../navigation-bar.component.html             |  9 +--
 .../navigation-bar.component.ts               |  5 +-
 ...ualifikaton-bearbeiten-view.component.html | 66 ++++++++++---------
 .../qualifikaton-bearbeiten-view.component.ts |  5 +-
 8 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d0b5577..4a5516c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,7 +5,7 @@ import {routes} from "./app.routes";
 
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2f42d3e..0680b43 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<app-employee-detail></app-employee-detail>
+<router-outlet></router-outlet>
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
index baea199..cd4c686 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
@@ -1,3 +1,5 @@
+<div class="d-flex flex-col" style="height: 100%;">
+<app-navigation-bar></app-navigation-bar>
 <div class="container">
   <div class="header">
     <div class="dropdown position-absolute top-0 end-0 m-3">
@@ -47,3 +49,4 @@
     </tbody>
   </table>
 </div>
+</div>
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
index 3a8f197..6eee547 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import {NavigationBarComponent} from "../navigation-bar/navigation-bar.component";
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
   standalone: true,
-  imports: [],
+  imports: [
+    NavigationBarComponent
+  ],
   templateUrl: './mitarbeiterverwaltung-view.component.html',
   styleUrl: './mitarbeiterverwaltung-view.component.css'
 })
diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html
index 2b92e16..afdab53 100644
--- a/src/app/components/navigation-bar/navigation-bar.component.html
+++ b/src/app/components/navigation-bar/navigation-bar.component.html
@@ -5,18 +5,13 @@
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="#" class="nav-link active text-black" aria-current="page">
-          Dashboard
-        </a>
-      </li>
       <li>
-        <a routerLink="/mitarbeiter" class="nav-link text-black">
+        <a routerLink="/mitarbeiter"  routerLinkActive="active"  class="nav-link text-black">
           Mitarbeiterverwaltung
         </a>
       </li>
       <li>
-        <a routerLink="/qualifikationbearbeiten" class="nav-link text-black">
+        <a routerLink="/qualifikationbearbeiten"  routerLinkActive="active"  class="nav-link text-black">
           Qualifikationsverwaltung
         </a>
       </li>
diff --git a/src/app/components/navigation-bar/navigation-bar.component.ts b/src/app/components/navigation-bar/navigation-bar.component.ts
index 33acde3..e73e757 100644
--- a/src/app/components/navigation-bar/navigation-bar.component.ts
+++ b/src/app/components/navigation-bar/navigation-bar.component.ts
@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
-import {RouterLink} from "@angular/router";
+import {RouterLink, RouterLinkActive} from "@angular/router";
 
 @Component({
   selector: 'app-navigation-bar',
   standalone: true,
   imports: [
-    RouterLink
+    RouterLink,
+    RouterLinkActive
   ],
   templateUrl: './navigation-bar.component.html',
   styleUrl: './navigation-bar.component.css'
diff --git a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html
index 2370e98..8d05116 100644
--- a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html
+++ b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html
@@ -1,36 +1,38 @@
-<div class="container">
-  <button class="back-button">Back</button>
+<div class="d-flex flex-col" style="height: 100%;">
+  <app-navigation-bar></app-navigation-bar>
+  <div class="container">
+    <button class="back-button">Back</button>
 
-  <div class="form-group">
-    <label for="name">Name</label>
-    <input type="text" id="name" value="(Hier kommt name der gewählten qualification hin)">
-  </div>
-
-  <div class="employee-container">
-    <h2>Employees possessing the qualification</h2>
-
-    <ul class="employee-list">
-      <li>
-        <button class="delete-skill-button">
-          <img src="Delete-button.svg" alt="Delete">
-        </button>
-        <span class="employee-name">Max Mustermann</span>
-      </li>
-      <li>
-        <button class="delete-skill-button">
-          <img src="Delete-button.svg" alt="Delete">
-        </button>
-        <span class="employee-name">Mehdi Boudjoudi</span>
-      </li>
-    </ul>
-
-    <div class="add-employee-section">
-      <label for="employeeSearch">Search for employee</label>
-      <input type="text" id="employeeSearch" placeholder="Last name of employee">
-      <button class="add-employee-button">Add employee</button>
+    <div class="form-group">
+      <label for="name">Name</label>
+      <input type="text" id="name" value="(Hier kommt name der gewählten qualification hin)">
     </div>
+
+    <div class="employee-container">
+      <h2>Employees possessing the qualification</h2>
+
+      <ul class="employee-list">
+        <li>
+          <button class="delete-skill-button">
+            <img src="Delete-button.svg" alt="Delete">
+          </button>
+          <span class="employee-name">Max Mustermann</span>
+        </li>
+        <li>
+          <button class="delete-skill-button">
+            <img src="Delete-button.svg" alt="Delete">
+          </button>
+          <span class="employee-name">Mehdi Boudjoudi</span>
+        </li>
+      </ul>
+
+      <div class="add-employee-section">
+        <label for="employeeSearch">Search for employee</label>
+        <input type="text" id="employeeSearch" placeholder="Last name of employee">
+        <button class="add-employee-button">Add employee</button>
+      </div>
+    </div>
+
+    <button class="save-button">Save</button>
   </div>
-
-  <button class="save-button">Save</button>
 </div>
-
diff --git a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts
index ed93e94..5451788 100644
--- a/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts
+++ b/src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import {NavigationBarComponent} from "../navigation-bar/navigation-bar.component";
 
 @Component({
   selector: 'app-qualifikaton-bearbeiten-view',
   standalone: true,
-  imports: [],
+  imports: [
+    NavigationBarComponent
+  ],
   templateUrl: './qualifikaton-bearbeiten-view.component.html',
   styleUrl: './qualifikaton-bearbeiten-view.component.css'
 })
-- 
2.45.3