refactor: restructure employee-related components and services
This commit is contained in:
parent
5d90b71ba5
commit
9219b92049
GPG key ID:
50620ADD22CD330B
11 changed files with 33 additions and 140 deletions
|
|
@ -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 = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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}`)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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?: []
|
||||
) {
|
||||
}
|
||||
}
|
||||
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
Reference in a new issue