From 5cc396f552cad764200ca2edf2c62bf1b97280d5 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Wed, 22 Jan 2025 10:16:08 +0100
Subject: [PATCH] feat(navigation): add navigation bar to employee views

---
 .../mitarbeiterverwaltung-view.component.html |  95 ++++++++--------
 .../mitarbeiterverwaltung-view.component.ts   |   3 +-
 .../navigation-bar.component.html             |   9 +-
 .../navigation-bar.component.ts               |  10 +-
 .../qualifikationsverwaltung.component.html   | 105 +++++++++---------
 .../qualifikationsverwaltung.component.ts     |   3 +-
 6 files changed, 117 insertions(+), 108 deletions(-)

diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
index 7c6a0b5..2e72ac5 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
@@ -1,49 +1,52 @@
-<div class="container">
-  <div class="header">
-    <div class="dropdown position-absolute top-0 end-0 m-3">
-      <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
-        aria-expanded="false">
-        <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
-      </button>
-      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
-        <li><a class="dropdown-item" href="/logout">Log out</a></li>
-      </ul>
-    </div>
-    <h1>Employees</h1>
-  </div>
-
-  <div class="header-actions">
-    <form [formGroup]="searchForm">
-      <div class="search-bar">
-        <input type="text" placeholder="Search employee" formControlName="search">
-        <button (click)="submit()">Search</button>
+<div class="d-flex flex-row">
+  <app-navigation-bar [route]="'employee'" class="row" style="height: 100vh;"></app-navigation-bar>
+  <div class="container">
+    <div class="header">
+      <div class="dropdown position-absolute top-0 end-0 m-3">
+        <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
+          aria-expanded="false">
+          <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
+          <li><a class="dropdown-item" href="/logout">Log out</a></li>
+        </ul>
       </div>
-      <p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
-    </form>
-    <button (click)="createEmployee()" class="add-button">Add employee</button>
-  </div>
+      <h1>Employees</h1>
+    </div>
 
-  <table class="employee-table">
-    <thead>
-      <tr>
-        <th><span class="sortable">First Name</span></th>
-        <th><span class="sortable">Last Name</span></th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      @if (employees) {
-      @for (employee of employees; track employee) {
-      <tr>
-        <td>{{ employee.firstName }}</td>
-        <td>{{ employee.lastName }}</td>
-        <td>
-          <button class="btn btn-primary me-2" (click)="editEmployee(employee.id)">Edit</button>
-          <button class="btn btn-danger" (click)="deleteEmployee(employee.id)">Delete</button>
-        </td>
-      </tr>
-      }
-      }
-    </tbody>
-  </table>
+    <div class="header-actions">
+      <form [formGroup]="searchForm">
+        <div class="search-bar">
+          <input type="text" placeholder="Search employee" formControlName="search">
+          <button (click)="submit()">Search</button>
+        </div>
+        <p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
+      </form>
+      <button (click)="createEmployee()" class="add-button">Add employee</button>
+    </div>
+
+    <table class="employee-table">
+      <thead>
+        <tr>
+          <th><span class="sortable">First Name</span></th>
+          <th><span class="sortable">Last Name</span></th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        @if (employees) {
+        @for (employee of employees; track employee) {
+        <tr>
+          <td>{{ employee.firstName }}</td>
+          <td>{{ employee.lastName }}</td>
+          <td>
+            <button class="btn btn-primary me-2" (click)="editEmployee(employee.id)">Edit</button>
+            <button class="btn btn-danger" (click)="deleteEmployee(employee.id)">Delete</button>
+          </td>
+        </tr>
+        }
+        }
+      </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 8415072..0a222c6 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
@@ -5,13 +5,14 @@ import { EmployeeResponseDTO } from '../../models/mitarbeiter';
 import { EmployeeService } from '../../service/employee.service';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
   templateUrl: './mitarbeiterverwaltung-view.component.html',
   styleUrls: ['./mitarbeiterverwaltung-view.component.css'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule]
+  imports: [CommonModule, ReactiveFormsModule, NavigationBarComponent]
 })
 export class MitarbeiterverwaltungViewComponent implements OnInit {
   employees: Array<EmployeeResponseDTO> = [];
diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html
index c1e0cbe..9deb1e8 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 href="#" class="nav-link text-black">
+        <a [routerLink]="['/mitarbeiter']" (click)="employees()" [class.active]="route == 'employee'" class="nav-link text-black" aria-current="page">
           Mitarbeiterverwaltung
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-black">
+        <a [routerLink]="['/qualifikationsverwaltung']" [class.active]="route == 'skill'" 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..dc2e8a1 100644
--- a/src/app/components/navigation-bar/navigation-bar.component.ts
+++ b/src/app/components/navigation-bar/navigation-bar.component.ts
@@ -1,12 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-navigation-bar',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './navigation-bar.component.html',
   styleUrl: './navigation-bar.component.css'
 })
 export class NavigationBarComponent {
+  constructor(private router: Router) { }
+  @Input() route: string = "";
 
+  employees() {
+    this.router.navigate(['mitarbeiter']);
+  }
 }
diff --git a/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html b/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html
index 99228fa..7371f6f 100644
--- a/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html
+++ b/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html
@@ -1,57 +1,60 @@
-<div class="container">
-  <div class="header">
-    <div class="dropdown position-absolute top-0 end-0 m-3">
-      <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
-        aria-expanded="false">
-        <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
-      </button>
-      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
-        <li><a class="dropdown-item" href="/logout">Log out</a></li>
-      </ul>
-    </div>
-    <h1>Qualifications</h1>
-  </div>
-
-  <div class="d-flex flex-column">
-    <div class="row header-actions">
-      <form [formGroup]="searchForm">
-        <div class="search-bar">
-          <input type="text" placeholder="Search employee" formControlName="search">
-          <button (click)="submit()">Search</button>
-        </div>
-        <p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. Name</p>
-      </form>
-      <div class="d-flex">
-        <button (click)="createSkill()" class="add-button me-auto">Add qualification</button>
+<div class="d-flex flex-row">
+  <app-navigation-bar [route]="'skill'" class="row" style="height: 100vh;"></app-navigation-bar>
+  <div class="container">
+    <div class="header">
+      <div class="dropdown position-absolute top-0 end-0 m-3">
+        <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
+          aria-expanded="false">
+          <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
+          <li><a class="dropdown-item" href="/logout">Log out</a></li>
+        </ul>
       </div>
+      <h1>Qualifications</h1>
     </div>
 
-    @if (errorDeletingSkill) {
-    <div class="row">
-      <p class="alert alert-danger">This Qualification can not be deleted because it still has employees.</p>
+    <div class="d-flex flex-column">
+      <div class="row header-actions">
+        <form [formGroup]="searchForm">
+          <div class="search-bar">
+            <input type="text" placeholder="Search employee" formControlName="search">
+            <button (click)="submit()">Search</button>
+          </div>
+          <p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. Name</p>
+        </form>
+        <div class="d-flex">
+          <button (click)="createSkill()" class="add-button me-auto">Add qualification</button>
+        </div>
+      </div>
+
+      @if (errorDeletingSkill) {
+      <div class="row">
+        <p class="alert alert-danger">This Qualification can not be deleted because it still has employees.</p>
+      </div>
+      }
     </div>
-    }
+
+    <table class="employee-table">
+      <thead>
+        <tr>
+          <th><span class="sortable">Name</span></th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        @if (skills) {
+        @for (skill of skills; track skill) {
+        <tr>
+          <td>{{ skill.skill }}</td>
+          <td>
+            <button class="btn btn-primary me-2" (click)="editSkill(skill.id)">Edit</button>
+            <button class="btn btn-danger" (click)="deleteSkill(skill.id)">Delete</button>
+          </td>
+        </tr>
+        }
+        }
+      </tbody>
+    </table>
   </div>
-
-  <table class="employee-table">
-    <thead>
-      <tr>
-        <th><span class="sortable">Name</span></th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      @if (skills) {
-      @for (skill of skills; track skill) {
-      <tr>
-        <td>{{ skill.skill }}</td>
-        <td>
-          <button class="btn btn-primary me-2" (click)="editSkill(skill.id)">Edit</button>
-          <button class="btn btn-danger" (click)="deleteSkill(skill.id)">Delete</button>
-        </td>
-      </tr>
-      }
-      }
-    </tbody>
-  </table>
 </div>
diff --git a/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.ts b/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.ts
index be47225..d386ea3 100644
--- a/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.ts
+++ b/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.ts
@@ -3,11 +3,12 @@ import { QualificationGetDTO } from '../../models/skill';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { SkillService } from '../../service/skill.service';
 import { Router } from '@angular/router';
+import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
 
 @Component({
   selector: 'app-qualifikationsverwaltung',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, NavigationBarComponent],
   templateUrl: './qualifikationsverwaltung.component.html',
   styleUrl: './qualifikationsverwaltung.component.css'
 })