From d95aa469a6201dae8e676a376b4623526989bcb6 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 18 Dec 2024 12:22:25 +0100 Subject: [PATCH] fix issues --- .../employee-list.component.html | 2 +- .../employee-list/employee-list.component.ts | 111 ++---------------- 2 files changed, 8 insertions(+), 105 deletions(-) diff --git a/src/app/employee-list/employee-list.component.html b/src/app/employee-list/employee-list.component.html index dafe1fc..0d95d3d 100644 --- a/src/app/employee-list/employee-list.component.html +++ b/src/app/employee-list/employee-list.component.html @@ -10,7 +10,7 @@ - @if (employees.length) { + @if (employees) {
diff --git a/src/app/employee-list/employee-list.component.ts b/src/app/employee-list/employee-list.component.ts index 479af4f..2914427 100644 --- a/src/app/employee-list/employee-list.component.ts +++ b/src/app/employee-list/employee-list.component.ts @@ -1,10 +1,9 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { Observable, catchError, map, of, retry, switchMap } from 'rxjs'; -import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; +import { Observable, catchError, of, retry } from 'rxjs'; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Employee } from '../Employee'; -import { AuthService } from '../services/auth.service'; - + import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; @@ -14,7 +13,7 @@ import { MatDividerModule } from '@angular/material/divider'; import { MatTooltipModule } from '@angular/material/tooltip'; import { MatMenuModule } from '@angular/material/menu'; import { MatTableModule } from '@angular/material/table'; -import { MatSortModule, Sort } from '@angular/material/sort'; +import { MatSortModule } from '@angular/material/sort'; @Component({ selector: 'app-employee-list', @@ -36,114 +35,24 @@ import { MatSortModule, Sort } from '@angular/material/sort'; host: { class: 'block w-full p-6' }, - styles: [` - :host ::ng-deep { - .mat-mdc-card { - --mdc-elevated-card-container-color: transparent; - @apply !shadow-none !rounded-xl; - } - - .mat-mdc-button-base { - --mat-mdc-button-persistent-ripple-color: currentColor; - @apply !rounded-lg; - } - - .mat-mdc-progress-spinner { - --mdc-circular-progress-active-indicator-color: #2563eb; - } - - .mdc-data-table__header-cell { - @apply !text-gray-600 !font-semibold !text-sm !py-4 !px-6; - } - - .mat-mdc-table { - @apply !bg-transparent !border-separate !border-spacing-y-2; - - .mat-mdc-row { - @apply !bg-white !rounded-xl !shadow-sm !transition-all !duration-200; - - &:hover { - @apply !bg-gray-50 !shadow-md !transform !scale-[1.01]; - } - - .mat-mdc-cell { - @apply !border-b-0 !py-4 !px-6 first:!rounded-l-xl last:!rounded-r-xl; - } - } - - .mat-mdc-header-row { - @apply !bg-transparent; - - .mat-mdc-header-cell { - @apply !border-b-0; - } - } - } - - .mat-mdc-menu-panel { - @apply !rounded-xl !shadow-lg; - } - - .mat-mdc-menu-item { - @apply !rounded-lg !mx-1 !my-0.5; - } - - .mdc-button { - @apply !font-medium; - - &.mat-primary { - @apply !bg-blue-600 !text-white hover:!bg-blue-700; - } - - &.mat-warn { - @apply !bg-red-600 !text-white hover:!bg-red-700; - } - } - - .mat-mdc-snack-bar-container { - &.error-snackbar { - @apply !rounded-xl; - - .mdc-snackbar__surface { - @apply !bg-red-50 !text-red-900 !border !border-red-100; - } - } - } - } - `] + styleUrl: './employee-list.component.css' }) export class EmployeeListComponent { private static readonly EMPLOYEES_ENDPOINT = '/backend/employees'; private static readonly MAX_RETRIES = 3; public employees$: Observable; public readonly displayedColumns: string[] = ['name', 'actions']; - bearer = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzM5MTQ5MjgsImlhdCI6MTczMzkxMTMyOCwianRpIjoiMjNhYzMwMmUtYmYxNS00OTRmLWJhYTItNjIzODllYWZkMmZhIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiI2ODdiMTEwYS00NTRjLTQwMzgtYjBkMS1kZDAzZGQ1N2JiNjEiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.E5ir1Z-POpUU_jvTh8CzoMYO74qo_7uQXw7QQBUvXB2_37pT3_tutAq6sM4V5cNBu--fWar5bltlNcOAWd_7Kdb66Qc23i0RR9vPneoSduJAzoD8gtFbx8c7ltNR4pG-c6tdnkGhLLqM621DShaSlH8Shp-Z0-y4Iq3GFdQrAFH1CrRVYlW0qFv1EZsE9BmhW3hJwrR1S2IPiEN6MwhehLflLa_ZgLcF417ocIfK-6gbbRNAwXA-JajFVOZAEVXs-52Ta9Kb_EEQFpRsjXorfflmbizQmgrbhBUB7MTiPYIcRruZSYdfmjcE008PHnut52cTcVYEuOrUCUqY4VmhoQ'; constructor( private readonly httpClient: HttpClient, - private readonly authService: AuthService, private readonly snackBar: MatSnackBar ) { - this.employees$ = this.initializeEmployeesStream(); + this.employees$ = this.fetchEmployees(); } - private initializeEmployeesStream(): Observable { - return of(this.bearer).pipe( - retry(EmployeeListComponent.MAX_RETRIES), - catchError((error: HttpErrorResponse) => { - console.error('Error fetching auth token:', error); - this.showErrorMessage('Failed to authenticate. Please try again.'); - return of([]); - }), - switchMap(token => this.fetchEmployees(token as string)) - ); - } - - private fetchEmployees(token: string): Observable { - const headers = this.createAuthenticatedHeaders(token); + private fetchEmployees(): Observable { return this.httpClient.get( EmployeeListComponent.EMPLOYEES_ENDPOINT, - { headers } ).pipe( retry(EmployeeListComponent.MAX_RETRIES), catchError((error: HttpErrorResponse) => { @@ -154,12 +63,6 @@ export class EmployeeListComponent { ); } - private createAuthenticatedHeaders(token: string): HttpHeaders { - return new HttpHeaders() - .set('Content-Type', 'application/json') - .set('Authorization', `Bearer ${token}`); - } - private showErrorMessage(message: string): void { this.snackBar.open(message, 'Close', { duration: 5000,