90% done

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<app-mitarbeiterverwaltung-view></app-mitarbeiterverwaltung-view>

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 "./data_layer/service/auth.service";
 
 export const routes: Routes = [
   {

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

@@ -1,28 +1,17 @@
+<!-- MitarbeiterverwaltungViewComponent HTML (components/mitarbeiterverwaltung-view.component.html) -->
 <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">
@@ -44,6 +33,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,34 @@
-import { Component } from '@angular/core';
+// 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';
+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));