test

src/app/app.component.html

@@ -1 +1 @@
-<app-mitarbeiterverwaltung-view></app-mitarbeiterverwaltung-view>
+<app-employee-list></app-employee-list>

src/app/app.component.ts

@@ -14,12 +14,13 @@ import {
   QualifikatonBearbeitenViewComponent
 } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
 import {QualifikatonDetailComponent} from "./components/qualifikaton-detail/qualifikaton-detail.component";
+import {EmployeeListComponent} from "./components/employee-list/employee-list.component";
 
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
+  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent, EmployeeListComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.routes.ts

@@ -5,6 +5,7 @@ import { EmployeeDetailComponent } from "./components/employee-detail/employee-d
 import { QualifikatonBearbeitenViewComponent } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
 import { KeycloakAuthGuard } from "keycloak-angular";
 import { AuthGuard } from "/Users/mehdiboudjoudi/WebstormProjects/employeeService/src/app/data_layer/service/auth.service";
+import {EmployeeListComponent} from "./components/employee-list/employee-list.component";
 
 export const routes: Routes = [
   {
@@ -16,6 +17,11 @@ export const routes: Routes = [
     component: MitarbeiterverwaltungViewComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: "mitarbeiterHeidemann",
+    component: EmployeeListComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: "mitarbeiterdetails",
     component: EmployeeDetailComponent,

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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,30 @@
+  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,4 +1,3 @@
-<!-- MitarbeiterverwaltungViewComponent HTML (components/mitarbeiterverwaltung-view.component.html) -->
 <div class="container">
   <div class="header">
     <div class="dropdown position-absolute top-0 end-0 m-3">

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

@@ -1,4 +1,3 @@
-// MitarbeiterverwaltungViewComponent (components/mitarbeiterverwaltung-view.component.ts)
 import { Component, OnInit } from '@angular/core';
 import { EmployeeService } from '../../data_layer/service/mitarbeiter_data_service';
 import { Employee } from '../../data_layer/model/employee';