Merge pull request 'Logik/Backend-für-Mitarbeiter-Seite-&-Qualifikationsseite-59' (#65) from Logik/Backend-für-Mitarbeiter-Seite-&-Qualifikationsseite-59 into main

Reviewed-on: #65

src/app/app.component.ts

@@ -1,25 +1,10 @@
-import {Component} from '@angular/core';
-import {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 {
-  MitarbeiterBearbeitenViewComponent
-} from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
-import {
-  QualifikatonBearbeitenViewComponent
-} from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
-import {QualifikatonDetailComponent} from "./components/qualifikaton-detail/qualifikaton-detail.component";
-
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.routes.ts

@@ -3,9 +3,8 @@ import { LoginViewComponent } from "./components/login-view/login-view.component
 import { MitarbeiterverwaltungViewComponent } from "./components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component";
 import { EmployeeDetailComponent } from "./components/employee-detail/employee-detail.component";
 import { QualifikatonBearbeitenViewComponent } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
-import { KeycloakAuthGuard } from "keycloak-angular";
-import { AuthGuard } from "./service/auth.service";
 import { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
+import { AuthGuard } from "./service/auth.service";
 
 export const routes: Routes = [
   {

src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component';
 import { EmployeeResponseDTO } from '../../models/mitarbeiter';
-import { EmployeeService } from '../../service/employee.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { EmployeeService } from '../../service/employee.service';
 
 @Component({
   selector: 'app-mitarbeiter-bearbeiten-view',

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css

@@ -19,7 +19,7 @@ h1 {
 
 .search-bar {
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   align-items: center;
 }
 

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html

@@ -1,49 +1,57 @@
 <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 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>
+        <li><a class="dropdown-item" href="/logout">Log out</a></li>
       </ul>
     </div>
     <h1>Employees</h1>
   </div>
+
   <div class="header-actions">
-    <div class="search-bar">
-      <input type="text" placeholder="Search employee">
-      <button>Search</button>
-    </div>
+    <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 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>Street</th>
-      <th>Postcode</th>
-      <th>City</th>
-      <th>Phone</th>
-      <th>Actions</th>
-    </tr>
+      <tr>
+        <th><span class="sortable">First Name</span></th>
+        <th><span class="sortable">Last Name</span></th>
+        <th>Street</th>
+        <th>Postcode</th>
+        <th>City</th>
+        <th>Phone</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>{{ employee.street }}</td>
+        <td>{{ employee.postcode }}</td>
+        <td>{{ employee.city }}</td>
+        <td>{{ employee.phone }}</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>

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts

@@ -1,12 +1,60 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Observable, of } from 'rxjs';
+import { EmployeeResponseDTO } from '../../models/mitarbeiter';
+import { EmployeeService } from '../../service/employee.service';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
-  standalone: true,
-  imports: [],
   templateUrl: './mitarbeiterverwaltung-view.component.html',
-  styleUrl: './mitarbeiterverwaltung-view.component.css'
+  styleUrls: ['./mitarbeiterverwaltung-view.component.css'],
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule]
 })
-export class MitarbeiterverwaltungViewComponent {
+export class MitarbeiterverwaltungViewComponent implements OnInit {
+  employees: Array<EmployeeResponseDTO> = [];
+  searchForm!: FormGroup;
 
+  constructor(private employeeService: EmployeeService, private router: Router) {}
+
+  submit() {
+    const searchTerm = this.searchForm.get("search")?.value || '';
+
+    this.employeeService.getAllEmployees().subscribe(employees => {
+      let foundEmployees: Array<EmployeeResponseDTO> = [];
+      for (const employee of employees) {
+        if (
+          employee.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.street.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.postcode.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.city.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          employee.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          searchTerm == ''
+        ) {
+          foundEmployees.push(employee);
+        }
+      }
+
+      this.employees = foundEmployees;
+    });
+  }
+
+  editEmployee(id: number) {
+    this.router.navigate([`/mitarbeiterbearbeiten/${id}`]);
+  }
+
+  deleteEmployee(id: number) {
+    this.employeeService.deleteEmployee(id);
+    this.employees = this.employees.filter(employee => employee.id != id);
+  }
+
+  ngOnInit(): void {
+    this.searchForm = new FormGroup({
+      search: new FormControl(''),
+    });
+    this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees);
+  }
 }

src/app/service/employee.service.ts

@@ -31,6 +31,9 @@ export class EmployeeService {
     return this.http.get<Array<EmployeeResponseDTO>>(`${SkillService.BASE_URL}/employees`);
   }
 
+  deleteEmployee(id: number) {
+    this.http.delete(`${SkillService.BASE_URL}/employees/${id}`).subscribe();
+  }
 
   getEmployeeById(id: number): Observable<EmployeeResponseDTO> {
     return this.http.get<EmployeeResponseDTO>(`${SkillService.BASE_URL}/employees/${id}`);

src/main.ts

@@ -1,6 +1,7 @@
+import { HttpClientModule } from '@angular/common/http';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig)
+bootstrapApplication(AppComponent , appConfig,)
   .catch((err) => console.error(err));