test

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<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

@@ -4,7 +4,8 @@ import { MitarbeiterverwaltungViewComponent } from "./components/mitarbeiterverw
 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 { 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,30 +1,18 @@
 <div class="container">
   <div class="header">
     <div class="dropdown position-absolute top-0 end-0 m-3">
-      <button
+      <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-        class="btn align-items-center d-flex"
+        <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
-        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>
+        <li><a class="dropdown-item" href="/logout">Log out</a></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">
+    <div class="search-bar">a
       <input type="text" placeholder="Search employee">
       <button>Search</button>
     </div>
@@ -44,6 +32,18 @@
     </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>
     </tbody>
   </table>
 </div>

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

@@ -1,12 +1,33 @@
-import { Component } from '@angular/core';
+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';
 
 @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, HttpClientModule]
 })
-export class MitarbeiterverwaltungViewComponent {
+export class MitarbeiterverwaltungViewComponent implements OnInit {
+  employees: Employee[] = [];
 
+  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);
+      }
+    );
+  }
 }

src/app/data_layer/model/employee.ts

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

@@ -0,0 +1,24 @@
+// 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 });
+  }
+}

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));