From e18436a57c1a1c8da300f8b1930b0514cd6ef924 Mon Sep 17 00:00:00 2001 From: mehdiboudjoudi Date: Wed, 15 Jan 2025 12:05:04 +0100 Subject: [PATCH 1/9] 90% done --- src/app/app.component.html | 2 +- src/app/app.routes.ts | 3 +- .../mitarbeiterverwaltung-view.component.html | 33 ++++++++++--------- .../mitarbeiterverwaltung-view.component.ts | 32 +++++++++++++++--- src/app/data_layer/model/employee.ts | 13 ++++++++ .../{ => data_layer}/service/auth.service.ts | 0 .../service/employee.service.ts | 0 .../service/mitarbeiter_data_service.ts | 24 ++++++++++++++ .../service/qualifikationen_data_service.ts | 0 .../{ => data_layer}/service/skill.service.ts | 0 src/main.ts | 3 +- 11 files changed, 85 insertions(+), 25 deletions(-) create mode 100644 src/app/data_layer/model/employee.ts rename src/app/{ => data_layer}/service/auth.service.ts (100%) rename src/app/{ => data_layer}/service/employee.service.ts (100%) create mode 100644 src/app/data_layer/service/mitarbeiter_data_service.ts create mode 100644 src/app/data_layer/service/qualifikationen_data_service.ts rename src/app/{ => data_layer}/service/skill.service.ts (100%) diff --git a/src/app/app.component.html b/src/app/app.component.html index 0680b43..ce0f108 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 93c626a..c241f63 100644 --- a/src/app/app.routes.ts +++ b/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 = [ { diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index baea199..28e7cf1 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -1,28 +1,17 @@ +
-

Employees

+
@@ -44,6 +33,18 @@ + + {{ employee.firstName }} + {{ employee.lastName }} + {{ employee.street }} + {{ employee.postcode }} + {{ employee.city }} + {{ employee.phone }} + + + + +
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts index 3a8f197..a5baa2b 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts +++ b/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); + } + ); + } } diff --git a/src/app/data_layer/model/employee.ts b/src/app/data_layer/model/employee.ts new file mode 100644 index 0000000..e930ff2 --- /dev/null +++ b/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?: [] + ) { + } +} diff --git a/src/app/service/auth.service.ts b/src/app/data_layer/service/auth.service.ts similarity index 100% rename from src/app/service/auth.service.ts rename to src/app/data_layer/service/auth.service.ts diff --git a/src/app/service/employee.service.ts b/src/app/data_layer/service/employee.service.ts similarity index 100% rename from src/app/service/employee.service.ts rename to src/app/data_layer/service/employee.service.ts diff --git a/src/app/data_layer/service/mitarbeiter_data_service.ts b/src/app/data_layer/service/mitarbeiter_data_service.ts new file mode 100644 index 0000000..b11d57b --- /dev/null +++ b/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 { + const endpoint = `${this.baseUrl}/employees`; + const headers = new HttpHeaders({ + 'Authorization': `Bearer ${this.bearerToken}`, + 'Content-Type': 'application/json' + }); + return this.http.get(endpoint, { headers }); + } +} diff --git a/src/app/data_layer/service/qualifikationen_data_service.ts b/src/app/data_layer/service/qualifikationen_data_service.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/app/service/skill.service.ts b/src/app/data_layer/service/skill.service.ts similarity index 100% rename from src/app/service/skill.service.ts rename to src/app/data_layer/service/skill.service.ts diff --git a/src/main.ts b/src/main.ts index 35b00f3..c684fa1 100644 --- a/src/main.ts +++ b/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)); From 67179669c7f7bee659c3853806c5600b0e6a69e5 Mon Sep 17 00:00:00 2001 From: mehdiboudjoudi Date: Wed, 15 Jan 2025 12:14:40 +0100 Subject: [PATCH 2/9] BACK UP COMMIT --- .../mitarbeiterverwaltung-view.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index 28e7cf1..29af3b5 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -13,7 +13,7 @@
-
+
a
From 9807f73f1a283d26ecccfffee238cbbee77ae6fd Mon Sep 17 00:00:00 2001 From: mehdiboudjoudi Date: Wed, 15 Jan 2025 12:28:57 +0100 Subject: [PATCH 3/9] test --- src/app/app.component.html | 2 +- src/app/app.component.ts | 3 +- src/app/app.routes.ts | 2 +- .../employee-list/employee-list.component.css | 0 .../employee-list.component.html | 9 ++++++ .../employee-list.component.spec.ts | 23 ++++++++++++++ .../employee-list/employee-list.component.ts | 30 +++++++++++++++++++ .../mitarbeiterverwaltung-view.component.html | 1 - .../mitarbeiterverwaltung-view.component.ts | 1 - 9 files changed, 66 insertions(+), 5 deletions(-) create mode 100644 src/app/components/employee-list/employee-list.component.css create mode 100644 src/app/components/employee-list/employee-list.component.html create mode 100644 src/app/components/employee-list/employee-list.component.spec.ts create mode 100644 src/app/components/employee-list/employee-list.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index ce0f108..86ddd42 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 18c70af..79dce0a 100644 --- a/src/app/app.component.ts +++ b/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' }) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index c241f63..d68355b 100644 --- a/src/app/app.routes.ts +++ b/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 { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component"; import { AuthGuard } from "./data_layer/service/auth.service"; +import { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component"; export const routes: Routes = [ { diff --git a/src/app/components/employee-list/employee-list.component.css b/src/app/components/employee-list/employee-list.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/employee-list/employee-list.component.html b/src/app/components/employee-list/employee-list.component.html new file mode 100644 index 0000000..217b9d0 --- /dev/null +++ b/src/app/components/employee-list/employee-list.component.html @@ -0,0 +1,9 @@ +

LF10-Starter

+Wenn Sie in der EmployeeListComponent.ts ein gültiges Bearer-Token eintragen, sollten hier die Namen der in der Datenbank gespeicherten Mitarbeiter angezeigt werden! +
    + @for(e of employees$ | async; track e.id) { +
  • + {{e.lastName }}, {{e.firstName}} +
    • + } +
diff --git a/src/app/components/employee-list/employee-list.component.spec.ts b/src/app/components/employee-list/employee-list.component.spec.ts new file mode 100644 index 0000000..081f497 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [EmployeeListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EmployeeListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/employee-list/employee-list.component.ts b/src/app/components/employee-list/employee-list.component.ts new file mode 100644 index 0000000..918dbc0 --- /dev/null +++ b/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; + + constructor(private http: HttpClient) { + this.employees$ = of([]); + this.fetchData(); + } + + fetchData() { + this.employees$ = this.http.get('http://localhost:8089/employees', { + headers: new HttpHeaders() + .set('Content-Type', 'application/json') + .set('Authorization', `Bearer ${this.bearer}`) + }); + } + } diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index 29af3b5..8136fb2 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -1,4 +1,3 @@ -
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts index a5baa2b..e50a6f6 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts +++ b/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'; From 5d90b71ba502a765c650b854076fac7ae9ab7132 Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 12:44:05 +0100 Subject: [PATCH 4/9] refactor: simplify component imports and structure --- src/app/app.component.html | 2 +- src/app/app.component.ts | 22 +++---------------- .../mitarbeiter-bearbeiten-view.component.ts | 2 +- .../service/employee.service.ts | 0 .../{data_layer => }/service/skill.service.ts | 0 5 files changed, 5 insertions(+), 21 deletions(-) rename src/app/{data_layer => }/service/employee.service.ts (100%) rename src/app/{data_layer => }/service/skill.service.ts (100%) diff --git a/src/app/app.component.html b/src/app/app.component.html index 86ddd42..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 79dce0a..04ea690 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,26 +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 {EmployeeListComponent} from "./components/employee-list/employee-list.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, EmployeeListComponent], + imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts index 253070e..cc4c5f6 100644 --- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts +++ b/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', diff --git a/src/app/data_layer/service/employee.service.ts b/src/app/service/employee.service.ts similarity index 100% rename from src/app/data_layer/service/employee.service.ts rename to src/app/service/employee.service.ts diff --git a/src/app/data_layer/service/skill.service.ts b/src/app/service/skill.service.ts similarity index 100% rename from src/app/data_layer/service/skill.service.ts rename to src/app/service/skill.service.ts From 9219b9204911a340ad40b8c6f449c09b55f68c8c Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 12:53:31 +0100 Subject: [PATCH 5/9] refactor: restructure employee-related components and services --- src/app/app.routes.ts | 2 +- .../employee-list/employee-list.component.css | 0 .../employee-list.component.html | 9 ---- .../employee-list.component.spec.ts | 23 --------- .../employee-list/employee-list.component.ts | 30 ------------ .../mitarbeiterverwaltung-view.component.html | 49 ++++++++++--------- .../mitarbeiterverwaltung-view.component.ts | 23 +++------ src/app/data_layer/model/employee.ts | 13 ----- .../service/mitarbeiter_data_service.ts | 24 --------- .../service/qualifikationen_data_service.ts | 0 .../{data_layer => }/service/auth.service.ts | 0 11 files changed, 33 insertions(+), 140 deletions(-) delete mode 100644 src/app/components/employee-list/employee-list.component.css delete mode 100644 src/app/components/employee-list/employee-list.component.html delete mode 100644 src/app/components/employee-list/employee-list.component.spec.ts delete mode 100644 src/app/components/employee-list/employee-list.component.ts delete mode 100644 src/app/data_layer/model/employee.ts delete mode 100644 src/app/data_layer/service/mitarbeiter_data_service.ts delete mode 100644 src/app/data_layer/service/qualifikationen_data_service.ts rename src/app/{data_layer => }/service/auth.service.ts (100%) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index d68355b..fff369b 100644 --- a/src/app/app.routes.ts +++ b/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 = [ { diff --git a/src/app/components/employee-list/employee-list.component.css b/src/app/components/employee-list/employee-list.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/employee-list/employee-list.component.html b/src/app/components/employee-list/employee-list.component.html deleted file mode 100644 index 217b9d0..0000000 --- a/src/app/components/employee-list/employee-list.component.html +++ /dev/null @@ -1,9 +0,0 @@ -

LF10-Starter

-Wenn Sie in der EmployeeListComponent.ts ein gültiges Bearer-Token eintragen, sollten hier die Namen der in der Datenbank gespeicherten Mitarbeiter angezeigt werden! -
    - @for(e of employees$ | async; track e.id) { -
  • - {{e.lastName }}, {{e.firstName}} -
    • - } -
diff --git a/src/app/components/employee-list/employee-list.component.spec.ts b/src/app/components/employee-list/employee-list.component.spec.ts deleted file mode 100644 index 081f497..0000000 --- a/src/app/components/employee-list/employee-list.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [EmployeeListComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(EmployeeListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/employee-list/employee-list.component.ts b/src/app/components/employee-list/employee-list.component.ts deleted file mode 100644 index 918dbc0..0000000 --- a/src/app/components/employee-list/employee-list.component.ts +++ /dev/null @@ -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; - - constructor(private http: HttpClient) { - this.employees$ = of([]); - this.fetchData(); - } - - fetchData() { - this.employees$ = this.http.get('http://localhost:8089/employees', { - headers: new HttpHeaders() - .set('Content-Type', 'application/json') - .set('Authorization', `Bearer ${this.bearer}`) - }); - } - } diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index 8136fb2..d450f2e 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -1,7 +1,8 @@
-
    @@ -12,7 +13,7 @@
-
a +
@@ -21,29 +22,31 @@ - - - - - - - - - + + + + + + + + + - - - - - - - - - + @for (employee of employees | async; track employee) { + + + + + + + + + + }
First NameLast NameStreetPostcodeCityPhoneActions
First NameLast NameStreetPostcodeCityPhoneActions
{{ employee.firstName }}{{ employee.lastName }}{{ employee.street }}{{ employee.postcode }}{{ employee.city }}{{ employee.phone }} - - -
{{ employee.firstName }}{{ employee.lastName }}{{ employee.street }}{{ employee.postcode }}{{ employee.city }}{{ employee.phone }} + + +
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts index e50a6f6..5e94483 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts +++ b/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> = 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(); } } diff --git a/src/app/data_layer/model/employee.ts b/src/app/data_layer/model/employee.ts deleted file mode 100644 index e930ff2..0000000 --- a/src/app/data_layer/model/employee.ts +++ /dev/null @@ -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?: [] - ) { - } -} diff --git a/src/app/data_layer/service/mitarbeiter_data_service.ts b/src/app/data_layer/service/mitarbeiter_data_service.ts deleted file mode 100644 index b11d57b..0000000 --- a/src/app/data_layer/service/mitarbeiter_data_service.ts +++ /dev/null @@ -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 { - const endpoint = `${this.baseUrl}/employees`; - const headers = new HttpHeaders({ - 'Authorization': `Bearer ${this.bearerToken}`, - 'Content-Type': 'application/json' - }); - return this.http.get(endpoint, { headers }); - } -} diff --git a/src/app/data_layer/service/qualifikationen_data_service.ts b/src/app/data_layer/service/qualifikationen_data_service.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/data_layer/service/auth.service.ts b/src/app/service/auth.service.ts similarity index 100% rename from src/app/data_layer/service/auth.service.ts rename to src/app/service/auth.service.ts From d80f98f2a01e0638adadd7e7426172b3edad1061 Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 13:29:30 +0100 Subject: [PATCH 6/9] feat(search): implement search functionality for employees --- .../mitarbeiterverwaltung-view.component.css | 2 +- .../mitarbeiterverwaltung-view.component.html | 15 +++++--- .../mitarbeiterverwaltung-view.component.ts | 34 +++++++++++++++++-- 3 files changed, 42 insertions(+), 9 deletions(-) diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css index 6f010a4..3d3b957 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css +++ b/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; } diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index d450f2e..55f61a3 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -13,10 +13,13 @@
-
- - -
+
+
+ + +
+

Search for a propertiy of an Employee. eg. First Name

+
@@ -33,7 +36,8 @@ - @for (employee of employees | async; track employee) { + @if (employees) { + @for (employee of employees; track employee) { {{ employee.firstName }} {{ employee.lastName }} @@ -47,6 +51,7 @@ } + }
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts index 5e94483..4f73fdf 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts @@ -3,20 +3,48 @@ 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'; @Component({ selector: 'app-mitarbeiterverwaltung-view', templateUrl: './mitarbeiterverwaltung-view.component.html', styleUrls: ['./mitarbeiterverwaltung-view.component.css'], standalone: true, - imports: [CommonModule] + imports: [CommonModule, ReactiveFormsModule] }) export class MitarbeiterverwaltungViewComponent implements OnInit { - employees: Observable> = of([]); + employees: Array = []; + searchForm!: FormGroup; constructor(private employeeService: EmployeeService) {} + submit() { + const searchTerm = this.searchForm.get("search")?.value || ''; + + this.employeeService.getAllEmployees().subscribe(employees => { + let foundEmployees: Array = []; + 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; + }); + } + ngOnInit(): void { - this.employees = this.employeeService.getAllEmployees(); + this.searchForm = new FormGroup({ + search: new FormControl(''), + }); + this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees); } } From 4c0371efb34ebb9da82233524470c0c1aab6f4dc Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 13:32:37 +0100 Subject: [PATCH 7/9] feat(mitarbeiterverwaltung): add edit employee functionality --- .../mitarbeiterverwaltung-view.component.html | 2 +- .../mitarbeiterverwaltung-view.component.ts | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index 55f61a3..5b183e7 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -46,7 +46,7 @@ {{ employee.city }} {{ employee.phone }} - + diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts index 4f73fdf..1e5565b 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts @@ -4,6 +4,7 @@ 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', @@ -16,7 +17,7 @@ export class MitarbeiterverwaltungViewComponent implements OnInit { employees: Array = []; searchForm!: FormGroup; - constructor(private employeeService: EmployeeService) {} + constructor(private employeeService: EmployeeService, private router: Router) {} submit() { const searchTerm = this.searchForm.get("search")?.value || ''; @@ -41,6 +42,10 @@ export class MitarbeiterverwaltungViewComponent implements OnInit { }); } + editEmployee(id: number) { + this.router.navigate([`/mitarbeiterbearbeiten/${id}`]); + } + ngOnInit(): void { this.searchForm = new FormGroup({ search: new FormControl(''), From c7f3bf5c54b4f1405993457d3a35cbd7349a7f5d Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 13:39:00 +0100 Subject: [PATCH 8/9] feat: implement employee deletion functionality --- .../mitarbeiterverwaltung-view.component.html | 2 +- .../mitarbeiterverwaltung-view.component.ts | 5 +++++ src/app/service/employee.service.ts | 3 +++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index 5b183e7..4e0d623 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -47,7 +47,7 @@ {{ employee.phone }} - + } diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts index 1e5565b..afcdff1 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts @@ -46,6 +46,11 @@ export class MitarbeiterverwaltungViewComponent implements OnInit { 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(''), diff --git a/src/app/service/employee.service.ts b/src/app/service/employee.service.ts index a8a4d38..e87bcf5 100644 --- a/src/app/service/employee.service.ts +++ b/src/app/service/employee.service.ts @@ -31,6 +31,9 @@ export class EmployeeService { return this.http.get>(`${SkillService.BASE_URL}/employees`); } + deleteEmployee(id: number) { + this.http.delete(`${SkillService.BASE_URL}/employees/${id}`).subscribe(); + } getEmployeeById(id: number): Observable { return this.http.get(`${SkillService.BASE_URL}/employees/${id}`); From d80c334e297a3aaf47c6dce9ae41b1549a5424b3 Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 15 Jan 2025 13:40:48 +0100 Subject: [PATCH 9/9] style: Update button styles in employee table --- .../mitarbeiterverwaltung-view.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html index 4e0d623..7823733 100644 --- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -46,8 +46,8 @@ {{ employee.city }} {{ employee.phone }} - - + + }