angular/ems-frontend
angular/ems-frontend
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix issues

Browse Source
This commit is contained in:
Hop In, I Have Puppies AND WiFi 2024-12-18 12:22:25 +01:00 committed by Phan Huy Tran
parent c159429ca7
commit 3e7d5b0178
2 changed files with 7 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/employee-list/employee-list.component.html
View File

@ -10,7 +10,7 @@
</button>
</div>
@if (employees.length) {
@if (employees) {
<div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
<table mat-table [dataSource]="employees" matSort class="!w-full">
<!-- Name Column -->

109
src/app/employee-list/employee-list.component.ts
View File

@ -1,9 +1,8 @@
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';
@ -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<Employee[]>;
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<Employee[]> {
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<Employee[]> {
const headers = this.createAuthenticatedHeaders(token);
private fetchEmployees(): Observable<Employee[]> {
return this.httpClient.get<Employee[]>(
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,