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)

Browse Source 
Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: #24
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
This commit is contained in:
Huy 2025-01-09 11:01:21 +00:00
parent dc61810632
commit 294191d24e
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({
next: (createdQualification) => {
this.dialogRef.close(createdQualification);
next: (editedQualification) => {
this.dialogRef.close(editedQualification);
},
error: (error) => {
console.error('Error creating qualification:', error);

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

@ -4,39 +4,43 @@
<div class="!space-y-6">
<div class="!flex !justify-between !items-center">
<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"
(click)="openCreateModal()">
<mat-icon class="!mr-2">add</mat-icon>
Add Qualification
Create Qualification
</button>
</div>
@if (qualifications) {
<div class="overflow-x-auto rounded-lg bg-gray-50 p-4">
<table mat-table [dataSource]="qualifications" class="mat-elevation-z8">
<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>ID</th>
<td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
<th mat-header-cell *matHeaderCellDef class="!text-left">ID</th>
<td mat-cell *matCellDef="let qualification" class="!py-4">{{ 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>
<th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
<td mat-cell *matCellDef="let qualification" class="!py-4">{{ 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)">
<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">
<button mat-icon-button color="warn" [matTooltip]="'Delete qualification'"
(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>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
} @else {
@ -78,7 +82,7 @@
</div>
</mat-card-content>
</mat-card>
} @loading (minimum 500ms) {
} @loading (minimum 1ms) {
<div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
</div>

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

@ -1,45 +1,47 @@
import {Component, inject, OnInit} from '@angular/core';
import {Observable} from "rxjs";
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 {
MatCell, MatCellDef,
MatCell,
MatCellDef,
MatColumnDef,
MatHeaderCell,
MatHeaderCellDef,
MatHeaderRow, MatHeaderRowDef,
MatRow, MatRowDef,
MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
MatTable
} 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 {MatButton, MatIconButton} from "@angular/material/button";
import {EditComponent} from "../edit/edit.component";
import {MatCard, MatCardContent} from "@angular/material/card";
import {MatTooltip} from "@angular/material/tooltip";
import {MatProgressSpinner} from "@angular/material/progress-spinner";
@Component({
selector: 'app-qualifications',
imports: [
AsyncPipe,
NgFor,
MatButton,
MatTable,
MatHeaderCell,
MatColumnDef,
MatHeaderCell,
MatCell,
MatHeaderRow,
MatRow,
MatHeaderCellDef,
MatCellDef,
MatIconButton,
MatIcon,
MatHeaderRow,
MatRow,
MatHeaderRowDef,
MatRowDef,
MatIcon,
MatIconButton,
MatButton,
MatCard,
MatCardContent,
MatTooltip,
MatProgressSpinner
],
templateUrl: './table.component.html',
@ -63,8 +65,8 @@ export class QualificationsComponent implements OnInit{
openCreateModal() {
const dialogRef = this.dialog.open(CreateComponent);
dialogRef.afterClosed().subscribe(result => {
if (result) {
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications();
}
});
@ -75,8 +77,20 @@ export class QualificationsComponent implements OnInit{
data: qualification
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications();
}
});
}
openDeleteModal(id: number) {
const dialogRef = this.dialog.open(DeleteComponent, {
data: id
});
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
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) {
return this.http.put(`${QualificationService.BASE_URL}/qualifications/${id}`, data)
}
delete(id: number) {
return this.http.delete(`${QualificationService.BASE_URL}/qualifications/${id}`)
}
}