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

add employee details

Browse Source 
Reviewed-on: #27
Reviewed-by: Get in my car i have candy <huydw@proton.me>
This commit is contained in:
Constantin Simonis 2025-01-09 12:14:55 +00:00
parent 1e52741155
commit 9104dfa541
7 changed files with 86 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/employee/details/details.component.css Normal file
View File

27
src/app/employee/details/details.component.html Normal file
View File

@ -0,0 +1,27 @@
<h2 mat-dialog-title>{{ employee.firstName }} {{ employee.lastName }}</h2>
<mat-dialog-content>
<div class="flex">
<div class="flex-1">
<p><strong>ID:</strong> {{ employee.id }}</p>
<p><strong>First Name:</strong> {{ employee.firstName }}</p>
<p><strong>Last Name:</strong> {{ employee.lastName }}</p>
<p><strong>Phone:</strong> {{ employee.phone }}</p>
<p><strong>Postcode:</strong> {{ employee.postcode }}</p>
<p><strong>Street:</strong> {{ employee.street }}</p>
<p><strong>City:</strong> {{ employee.city }}</p>
<p><strong>Skills:</strong></p>
<ul>
@for (skill of employee.skillSet; track null) {
<li> <strong>•</strong> {{skill.skill}}</li>
} @empty {
<li><strong>-</strong></li>
}
</ul>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end" class="mt-4">
<button mat-button (click)="closeModal()">Close</button>
</mat-dialog-actions>

26
src/app/employee/details/details.component.ts Normal file
View File

@ -0,0 +1,26 @@
import {Component, inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
import {Employee} from "../Employee";
import {MatButton} from "@angular/material/button";
import {DialogRef} from "@angular/cdk/dialog";
@Component({
selector: 'app-details',
imports: [
MatDialogTitle,
MatDialogContent,
MatButton,
MatDialogActions
],
templateUrl: './details.component.html',
standalone: true,
styleUrl: './details.component.css'
})
export class DetailsComponent {
employee: Employee = inject(MAT_DIALOG_DATA);
dialogRef: DialogRef = inject(DialogRef);
closeModal() {
this.dialogRef.close();
}
}

23
src/app/employee/table/table.component.html
View File

@ -14,30 +14,35 @@
<div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
<table mat-table [dataSource]="employees" matSort class="!w-full">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef class="!text-left"> Name </th>
<th mat-header-cell *matHeaderCellDef class="!text-left"> Name</th>
<td mat-cell *matCellDef="let employee" class="!py-4">
<div class="!flex !items-center">
<div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
<span class="!text-blue-600 !font-medium">
{{employee.firstName[0]}}{{employee.lastName[0]}}
{{ employee.firstName[0] }}{{ employee.lastName[0] }}
</span>
</div>
<div>
<div class="!font-medium !text-gray-900">
{{employee.lastName}}, {{employee.firstName}}
</div>
<a
class="!text-blue-600 hover:!underline cursor-pointer"
[matTooltip]="'Click to view Employee details'"
(click)="openDetailModal(employee)">
{{ employee.lastName }}, {{ employee.firstName }}
</a>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="!text-right"> Actions </th>
<th mat-header-cell *matHeaderCellDef class="!text-right"> Actions</th>
<td mat-cell *matCellDef="let employee" class="!text-right !py-4">
<button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2" (click)="showEditEmployeeModal(employee)">
<button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2"
(click)="showEditEmployeeModal(employee)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">
<button mat-icon-button color="warn" [matTooltip]="'Delete employee'"
(click)="openDeleteDialogue(employee)">
<mat-icon>delete</mat-icon>
</button>
</td>
@ -67,7 +72,7 @@
<div class="!bg-gray-50 !p-4 !rounded-lg">
<div class="!space-y-4">
<div class="!h-10 !bg-gray-200 !rounded"></div>
@for(i of [1,2,3]; track i) {
@for (i of [1, 2, 3]; track i) {
<div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
}
</div>

5
src/app/employee/table/table.component.ts
View File

@ -19,6 +19,7 @@ import {DeleteComponent} from "../delete/delete.component";
import EmployeeApiService from "../../services/employee-api.service";
import {CreateComponent} from "../create/create.component";
import {EditComponent} from "../edit/edit.component";
import {DetailsComponent} from "../details/details.component";
@Component({
selector: 'app-employee-list',
@ -95,4 +96,8 @@ export class TableComponent implements OnInit{
this.employees$ = this.fetchEmployees();
});
}
protected openDetailModal(employee: Employee) {
this.matDialog.open(DetailsComponent, {data: employee});
}
}

5
src/app/qualification/details/details.component.html
View File

@ -8,7 +8,10 @@
<p class="text-gray-500 italic">No employees found with this qualification.</p>
} @else {
@for (employee of employees; track employee.id) {
<a class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
<a
class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
(click)="openEmployeeDetailsModal(employee)"
>
<span class="font-medium">{{ employee.firstName }} {{ employee.lastName }}</span>
</a>
}

11
src/app/qualification/details/details.component.ts
View File

@ -1,6 +1,6 @@
import {Component, inject} from '@angular/core';
import {
MAT_DIALOG_DATA,
MAT_DIALOG_DATA, MatDialog,
MatDialogActions,
MatDialogContent,
MatDialogRef,
@ -10,6 +10,8 @@ import QualificationService from "../../services/qualification.service";
import {Qualification} from "../Qualification";
import {AsyncPipe} from "@angular/common";
import {MatButton} from "@angular/material/button";
import {Employee} from "../../employee/Employee";
import {DetailsComponent as EmployeeDetailsComponent} from "../../employee/details/details.component";
@Component({
selector: 'app-details',
@ -26,6 +28,7 @@ import {MatButton} from "@angular/material/button";
export class DetailsComponent {
private qualificationService = inject(QualificationService);
private dialogRef: MatDialogRef<DetailsComponent> = inject(MatDialogRef);
private dialog: MatDialog = inject(MatDialog);
public qualification: Qualification = inject(MAT_DIALOG_DATA);
public employees$ = this.qualificationService.findEmployees(this.qualification.id);
@ -33,4 +36,10 @@ export class DetailsComponent {
closeModal() {
this.dialogRef.close();
}
openEmployeeDetailsModal(employee: Employee) {
this.dialog.open(EmployeeDetailsComponent, {
data: employee
});
}
}