refactor: restructure employee-related components and services

src/app/app.routes.ts

@@ -3,8 +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 { AuthGuard } from "./data_layer/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/employee-list/employee-list.component.html

@@ -1,9 +0,0 @@
-<h1>LF10-Starter</h1>
-Wenn Sie in der EmployeeListComponent.ts ein gültiges Bearer-Token eintragen, sollten hier die Namen der in der Datenbank gespeicherten Mitarbeiter angezeigt werden!
-<ul>
-  @for(e of employees$ | async; track e.id) {
-    <li>
-      {{e.lastName }}, {{e.firstName}}
-    </li>
-  }
-</ul>

src/app/components/employee-list/employee-list.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EmployeeListComponent } from './employee-list.component';
-
-describe('EmployeeListComponent', () => {
-  let component: EmployeeListComponent;
-  let fixture: ComponentFixture<EmployeeListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [EmployeeListComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(EmployeeListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/components/employee-list/employee-list.component.ts

@@ -1,30 +0,0 @@
-  import { Component } from '@angular/core';
-  import { CommonModule } from '@angular/common';
-  import {Observable, of} from "rxjs";
-  import {HttpClient, HttpHeaders} from "@angular/common/http";
-  import {Employee} from "../../data_layer/model/employee";
-
-  @Component({
-    selector: 'app-employee-list',
-    standalone: true,
-    imports: [CommonModule],
-    templateUrl: './employee-list.component.html',
-    styleUrl: './employee-list.component.css'
-  })
-  export class EmployeeListComponent {
-    bearer = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0';
-    employees$: Observable<Employee[]>;
-
-    constructor(private http: HttpClient) {
-      this.employees$ = of([]);
-      this.fetchData();
-    }
-
-    fetchData() {
-      this.employees$ = this.http.get<Employee[]>('http://localhost:8089/employees', {
-        headers: new HttpHeaders()
-          .set('Content-Type', 'application/json')
-          .set('Authorization', `Bearer ${this.bearer}`)
-      });
-    }
-  }

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

@@ -1,7 +1,8 @@
 <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">
+      <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">
@@ -12,7 +13,7 @@
   </div>
 
   <div class="header-actions">
-    <div class="search-bar">a
+    <div class="search-bar">
       <input type="text" placeholder="Search employee">
       <button>Search</button>
     </div>
@@ -21,29 +22,31 @@
 
   <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>
-    <tr *ngFor="let employee of employees">
-      <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>Edit</button>
-        <button>Delete</button>
-      </td>
-    </tr>
+      @for (employee of employees | async; 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>Edit</button>
+          <button>Delete</button>
+        </td>
+      </tr>
+      }
     </tbody>
   </table>
 </div>

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

@@ -1,33 +1,22 @@
 import { Component, OnInit } from '@angular/core';
-import { EmployeeService } from '../../data_layer/service/mitarbeiter_data_service';
-import { Employee } from '../../data_layer/model/employee';
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { EmployeeResponseDTO } from '../../models/mitarbeiter';
+import { EmployeeService } from '../../service/employee.service';
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
   templateUrl: './mitarbeiterverwaltung-view.component.html',
   styleUrls: ['./mitarbeiterverwaltung-view.component.css'],
   standalone: true,
-  imports: [CommonModule, HttpClientModule]
+  imports: [CommonModule]
 })
 export class MitarbeiterverwaltungViewComponent implements OnInit {
-  employees: Employee[] = [];
+  employees: Observable<Array<EmployeeResponseDTO>> = of([]);
 
   constructor(private employeeService: EmployeeService) {}
 
   ngOnInit(): void {
-    this.fetchEmployees();
-  }
-
-  fetchEmployees(): void {
-    this.employeeService.getAllEmployees().subscribe(
-      (data: Employee[]) => {
-        this.employees = data;
-      },
-      (error: any) => {
-        console.error('Error fetching employees', error);
-      }
-    );
+    this.employees = this.employeeService.getAllEmployees();
   }
 }

src/app/data_layer/model/employee.ts

@@ -1,13 +0,0 @@
-export class Employee {
-    constructor(
-        public id?: number,
-        public lastName?: string,
-        public firstName?: string,
-        public street?: string,
-        public postcode?: string,
-        public city?: string,
-        public phone?: string,
-        public skills?: []
-    ) {
-    }
-}

src/app/data_layer/service/mitarbeiter_data_service.ts

@@ -1,24 +0,0 @@
-// EmployeeService (data_layer/service/mitarbeiter_data_service.ts)
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { Employee } from '../model/employee';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class EmployeeService {
-  private baseUrl = 'https://employee.szut.dev/api';
-  private bearerToken = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0';
-
-  constructor(private http: HttpClient) {}
-
-  getAllEmployees(): Observable<Employee[]> {
-    const endpoint = `${this.baseUrl}/employees`;
-    const headers = new HttpHeaders({
-      'Authorization': `Bearer ${this.bearerToken}`,
-      'Content-Type': 'application/json'
-    });
-    return this.http.get<Employee[]>(endpoint, { headers });
-  }
-}