jank/employeeService
1
1
Fork 0
Code Issues 2 Pull requests 4 Projects 1 Releases Packages Wiki Activity Actions

refactor: restructure employee-related components and services

Browse source
This commit is contained in:
Jan K9f 2025-01-15 12:53:31 +01:00
parent 5d90b71ba5
commit 9219b92049
Signed by: jank
GPG key ID: 50620ADD22CD330B
11 changed files with 33 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/app/components/employee-list/employee-list.component.css
View file

9
src/app/components/employee-list/employee-list.component.html
View file

@ -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>

23
src/app/components/employee-list/employee-list.component.spec.ts
View file

@ -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();
});
});

30
src/app/components/employee-list/employee-list.component.ts
View file

@ -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}`)
});
}
}

49
src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
View file

@ -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>

23
src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
View file

@ -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();
}
}