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

Enhance employee and qualification forms with hints and improved layouts (#37)

Browse Source 
- Added hints to input fields in create and edit employee forms for better user guidance.
- Updated the layout of dialog actions in employee and qualification forms for improved usability.
- Enhanced delete confirmation dialogs for qualifications and employees with better styling and error handling.
- Improved the display of employee details and qualifications with better formatting and structure.

These changes aim to improve user experience and accessibility across the application.

Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/37
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>
This commit is contained in:
Jan-Marlon Leibl
2025-01-15 10:34:10 +00:00
committed by Hop In, I Have Puppies AND WiFi
parent 37b5c27a50
commit 95bf76f9c1
18 changed files with 354 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app/qualification/table/table.component.html
View File

@ -7,42 +7,50 @@
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white"
(click)="openCreateModal()">
<mat-icon class="!mr-2">add</mat-icon>
Create Qualification
Add Qualification
</button>
</div>
@if (qualifications) {
<div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
<table mat-table [dataSource]="qualifications" class="!w-full">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef class="!text-left">ID</th>
<td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.id }}</td>
</ng-container>
<table mat-table [dataSource]="qualifications" matSort class="!w-full">
<ng-container matColumnDef="skill">
<th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
<th mat-header-cell *matHeaderCellDef class="!text-left !w-full">Skill</th>
<td mat-cell *matCellDef="let qualification" class="!py-4">
<a
class="!text-blue-600 hover:!underline cursor-pointer"
[matTooltip]="'Click to view qualification details'"
(click)="openDetailsModal(qualification)"
>
{{ qualification.skill }}
</a>
<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">
{{ qualification.skill[0]?.toUpperCase() }}
</span>
</div>
<div>
<a class="!text-blue-600 hover:!underline cursor-pointer"
[matTooltip]="'Click to view qualification details'"
(click)="openDetailsModal(qualification)">
{{ qualification.skill }}
</a>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let qualification" class="!py-4">
<button mat-icon-button color="primary" [matTooltip]="'Edit qualification'"
class="!mr-2" (click)="openEditModal(qualification)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" [matTooltip]="'Delete qualification'"
(click)="openDeleteModal(qualification.id)">
<mat-icon>delete</mat-icon>
</button>
<th mat-header-cell *matHeaderCellDef class="!text-right !w-[120px]">Actions</th>
<td mat-cell *matCellDef="let qualification" class="!text-right !py-4 !whitespace-nowrap">
<div class="!flex !justify-end !items-center !gap-1">
<button mat-icon-button
color="primary"
[matTooltip]="'Edit qualification'"
(click)="openEditModal(qualification)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button
color="warn"
[matTooltip]="'Delete qualification'"
(click)="openDeleteModal(qualification.id)">
<mat-icon>delete</mat-icon>
</button>
</div>
</td>
</ng-container>

6
src/app/qualification/table/table.component.ts
View File

@ -22,6 +22,7 @@ import {MatCard, MatCardContent} from "@angular/material/card";
import {MatTooltip} from "@angular/material/tooltip";
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {DetailsComponent} from "../details/details.component";
import {MatSort} from "@angular/material/sort";
@Component({
selector: 'app-qualifications',
@ -43,14 +44,15 @@ import {DetailsComponent} from "../details/details.component";
MatCard,
MatCardContent,
MatTooltip,
MatProgressSpinner
MatProgressSpinner,
MatSort
],
templateUrl: './table.component.html',
styleUrl: './table.component.css'
})
export class QualificationsComponent implements OnInit {
public qualifications$!: Observable<Qualification[]>;
public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
public readonly displayedColumns: string[] = ['skill', 'actions'];
private readonly dialog: MatDialog = inject(MatDialog);
private readonly qualificationService: QualificationService = inject(QualificationService);