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

Implement deleting qualifications #24

Merged
ptran merged 3 commits from feature/delete-qualifications into main 2025-01-09 11:01:22 +00:00
Conversation 1 Commits 3 Files Changed 8 +231 -101
8 changed files with 231 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/qualification/delete/delete.component.css Normal file
View File

15
src/app/qualification/delete/delete.component.html Normal file
View File

@ -0,0 +1,15 @@
<h2 mat-dialog-title>Delete Qualification</h2>
<mat-dialog-content>
@if (apiError) {
<div class="!text-red-600 !mb-4 !p-3 !bg-red-50 !rounded">
<p>{{ apiError }}</p>
</div>
}
Are you sure you want to delete this qualification? This can't be undone.
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="closeModal()">Cancel</button>
<button mat-button (click)="delete()" cdkFocusInitial>Delete</button>
</mat-dialog-actions>

51
src/app/qualification/delete/delete.component.ts Normal file
View File

@ -0,0 +1,51 @@
import {Component, inject} from '@angular/core';
import {
MAT_DIALOG_DATA,
MatDialogActions,
MatDialogContent,
MatDialogRef,
MatDialogTitle
} from "@angular/material/dialog";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import QualificationService from "../../services/qualification.service";
import {MatError} from "@angular/material/form-field";
import {MatButton} from "@angular/material/button";
@Component({
selector: 'app-delete-qualification',
imports: [
FormsModule,
MatDialogContent,
MatDialogTitle,
ReactiveFormsModule,
MatError,
MatDialogActions,
MatButton
],
templateUrl: './delete.component.html',
styleUrl: './delete.component.css'
})
export class DeleteComponent {
public id: number = inject(MAT_DIALOG_DATA);
public apiError: string | null = null;
private qualificationService: QualificationService = inject(QualificationService);
private dialogRef: MatDialogRef<DeleteComponent> = inject(MatDialogRef);
delete() {
this.qualificationService.delete(this.id).subscribe({
next: () => {
this.dialogRef.close(true);
},
error: (error) => {
console.error('Error deleting qualification:', error);
this.apiError = 'API Error';
}
});
}
closeModal() {
this.dialogRef.close(false);
}
}

4
src/app/qualification/edit/edit.component.ts
View File

@ -71,8 +71,8 @@ export class EditComponent {
} }
this.qualificationService.edit(this.qualification.id, this.qualificationForm.value).subscribe({ this.qualificationService.edit(this.qualification.id, this.qualificationForm.value).subscribe({
next: (createdQualification) => { next: (editedQualification) => {
this.dialogRef.close(createdQualification); this.dialogRef.close(editedQualification);
}, },
error: (error) => { error: (error) => {
console.error('Error creating qualification:', error); console.error('Error creating qualification:', error);

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

@ -1,86 +1,90 @@
<section class="!space-y-6 mb-6"> <section class="!space-y-6 mb-6">
@defer { @defer {
@if (qualifications$ | async; as qualifications) { @if (qualifications$ | async; as qualifications) {
<div class="!space-y-6"> <div class="!space-y-6">
<div class="!flex !justify-between !items-center"> <div class="!flex !justify-between !items-center">
<h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2> <h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2>
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="openCreateModal()"> <button mat-flat-button color="primary" class="!bg-blue-600 !text-white"
<mat-icon class="!mr-2">add</mat-icon> (click)="openCreateModal()">
Add Qualification <mat-icon class="!mr-2">add</mat-icon>
</button> Create Qualification
</div> </button>
</div>
@if (qualifications) { @if (qualifications) {
<div class="overflow-x-auto rounded-lg bg-gray-50 p-4"> <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
<table mat-table [dataSource]="qualifications" class="mat-elevation-z8"> <table mat-table [dataSource]="qualifications" class="!w-full">
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th> <th mat-header-cell *matHeaderCellDef class="!text-left">ID</th>
<td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td> <td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.id }}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="skill"> <ng-container matColumnDef="skill">
<th mat-header-cell *matHeaderCellDef>Skill</th> <th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
<td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td> <td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.skill }}
</ng-container> </td>
</ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th> <th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let qualification"> <td mat-cell *matCellDef="let qualification" class="!py-4">
<button mat-icon-button color="primary" (click)="openEditModal(qualification)"> <button mat-icon-button color="primary" [matTooltip]="'Edit qualification'"
<mat-icon>edit</mat-icon> class="!mr-2" (click)="openEditModal(qualification)">
</button> <mat-icon>edit</mat-icon>
<button mat-icon-button color="warn"> </button>
<mat-icon>delete</mat-icon> <button mat-icon-button color="warn" [matTooltip]="'Delete qualification'"
</button> (click)="openDeleteModal(qualification.id)">
</td> <mat-icon>delete</mat-icon>
</ng-container> </button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
} @else { } @else {
<mat-card class="!text-center !py-8"> <mat-card class="!text-center !py-8">
<mat-card-content> <mat-card-content>
<mat-icon class="!w-12 !h-12 !text-gray-400 !mb-4">school</mat-icon> <mat-icon class="!w-12 !h-12 !text-gray-400 !mb-4">school</mat-icon>
<p class="!text-gray-600">No qualifications found</p> <p class="!text-gray-600">No qualifications found</p>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
}
</div>
} }
</div> } @placeholder {
<div class="!space-y-6">
<div class="!animate-pulse">
<div class="!flex !justify-between !items-center !mb-8">
<div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
<div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
</div>
<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) {
<div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
}
</div>
</div>
</div>
</div>
} @error {
<mat-card class="!bg-red-50 !border !border-red-100">
<mat-card-content class="!p-4">
<div class="!flex !items-center !gap-4 !text-red-800">
<mat-icon class="!text-red-500">error_outline</mat-icon>
<div>
<h3 class="!font-medium !mb-1">Error loading qualifications</h3>
<p class="!text-sm !text-red-700">Please try refreshing the page.</p>
</div>
</div>
</mat-card-content>
</mat-card>
} @loading (minimum 1ms) {
<div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
</div>
} }
} @placeholder {
<div class="!space-y-6">
<div class="!animate-pulse">
<div class="!flex !justify-between !items-center !mb-8">
<div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
<div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
</div>
<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) {
<div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
}
</div>
</div>
</div>
</div>
} @error {
<mat-card class="!bg-red-50 !border !border-red-100">
<mat-card-content class="!p-4">
<div class="!flex !items-center !gap-4 !text-red-800">
<mat-icon class="!text-red-500">error_outline</mat-icon>
<div>
<h3 class="!font-medium !mb-1">Error loading qualifications</h3>
<p class="!text-sm !text-red-700">Please try refreshing the page.</p>
</div>
</div>
</mat-card-content>
</mat-card>
} @loading (minimum 500ms) {
<div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
</div>
}
</section> </section>

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

@ -1,51 +1,53 @@
import {Component, inject, OnInit} from '@angular/core'; import {Component, inject, OnInit} from '@angular/core';
import {Observable} from "rxjs"; import {Observable} from "rxjs";
import {Qualification} from "../Qualification"; import {Qualification} from "../Qualification";
import {AsyncPipe, NgFor} from "@angular/common"; import {MatDialog} from "@angular/material/dialog";
import QualificationService from "../../services/qualification.service";
import {CreateComponent} from "../create/create.component";
import {EditComponent} from "../edit/edit.component";
import {DeleteComponent} from "../delete/delete.component";
import {AsyncPipe} from "@angular/common";
import {MatButton, MatIconButton} from "@angular/material/button";
import { import {
MatCell, MatCellDef, MatCell,
MatCellDef,
MatColumnDef, MatColumnDef,
MatHeaderCell, MatHeaderCell,
MatHeaderCellDef, MatHeaderCellDef,
MatHeaderRow, MatHeaderRowDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
MatRow, MatRowDef,
MatTable MatTable
} from "@angular/material/table"; } from "@angular/material/table";
import QualificationService from "../../services/qualification.service";
import {MatDialog} from "@angular/material/dialog";
import {CreateComponent} from "../create/create.component";
import {MatIcon} from "@angular/material/icon"; import {MatIcon} from "@angular/material/icon";
import {MatButton, MatIconButton} from "@angular/material/button";
import {EditComponent} from "../edit/edit.component";
import {MatCard, MatCardContent} from "@angular/material/card"; import {MatCard, MatCardContent} from "@angular/material/card";
import {MatTooltip} from "@angular/material/tooltip";
import {MatProgressSpinner} from "@angular/material/progress-spinner"; import {MatProgressSpinner} from "@angular/material/progress-spinner";
@Component({ @Component({
selector: 'app-qualifications', selector: 'app-qualifications',
imports: [ imports: [
AsyncPipe, AsyncPipe,
NgFor, MatButton,
MatTable, MatTable,
MatHeaderCell,
MatColumnDef, MatColumnDef,
MatHeaderCell,
MatCell, MatCell,
MatHeaderRow,
MatRow,
MatHeaderCellDef, MatHeaderCellDef,
MatCellDef, MatCellDef,
MatIconButton,
MatIcon,
MatHeaderRow,
MatRow,
MatHeaderRowDef, MatHeaderRowDef,
MatRowDef, MatRowDef,
MatIcon,
MatIconButton,
MatButton,
MatCard, MatCard,
MatCardContent, MatCardContent,
MatTooltip,
MatProgressSpinner MatProgressSpinner
], ],
templateUrl: './table.component.html', templateUrl: './table.component.html',
styleUrl: './table.component.css' styleUrl: './table.component.css'
}) })
export class QualificationsComponent implements OnInit{ export class QualificationsComponent implements OnInit {
public qualifications$!: Observable<Qualification[]>; public qualifications$!: Observable<Qualification[]>;
public readonly displayedColumns: string[] = ['id', 'skill', 'actions']; public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
@ -63,8 +65,8 @@ export class QualificationsComponent implements OnInit{
openCreateModal() { openCreateModal() {
const dialogRef = this.dialog.open(CreateComponent); const dialogRef = this.dialog.open(CreateComponent);
dialogRef.afterClosed().subscribe(result => { dialogRef.afterClosed().subscribe((success: boolean) => {
if (result) { if (success) {
this.loadQualifications(); this.loadQualifications();
} }
}); });
@ -75,8 +77,20 @@ export class QualificationsComponent implements OnInit{
data: qualification data: qualification
}); });
dialogRef.afterClosed().subscribe(result => { dialogRef.afterClosed().subscribe((success: boolean) => {
if (result) { if (success) {
this.loadQualifications();
}
});
}
openDeleteModal(id: number) {
const dialogRef = this.dialog.open(DeleteComponent, {
data: id
});
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications(); this.loadQualifications();
} }
}); });

42
src/app/qualifications/qualifications.component.html Normal file
View File

@ -0,0 +1,42 @@
<div class="flex">
<h1 class="text-2xl font-semibold">Qualifications</h1>
<button mat-flat-button class="ml-auto bg-blue-600" (click)="openCreateModal()">
<mat-icon class="mr-2">add</mat-icon>
Create qualification
</button>
</div>
@if (qualifications$ | async; as qualifications) {
@if (qualifications) {
<table
mat-table
[dataSource]="qualifications"
class="mat-elevation-z8"
>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
</ng-container>
<ng-container matColumnDef="skill">
<th mat-header-cell *matHeaderCellDef>Skill</th>
<td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let qualification">
<button mat-icon-button color="primary" (click)="openEditModal(qualification)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="openDeleteModal(qualification.id)">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
}
}

4
src/app/services/qualification.service.ts
View File

@ -25,4 +25,8 @@ export default class QualificationService {
public edit(id: number, data: any) { public edit(id: number, data: any) {
return this.http.put(`${QualificationService.BASE_URL}/qualifications/${id}`, data) return this.http.put(`${QualificationService.BASE_URL}/qualifications/${id}`, data)
} }
delete(id: number) {
return this.http.delete(`${QualificationService.BASE_URL}/qualifications/${id}`)
}
} }