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 +114 -126
6 changed files with 114 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5a3fe61134 - Show all commits

23
src/app/delete-qualification/delete-qualification.component.spec.ts
View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DeleteQualificationComponent } from './delete-qualification.component';
describe('DeleteQualificationComponent', () => {
let component: DeleteQualificationComponent;
let fixture: ComponentFixture<DeleteQualificationComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [DeleteQualificationComponent]
})
.compileComponents();
fixture = TestBed.createComponent(DeleteQualificationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

0
src/app/delete-qualification/delete-qualification.component.css → src/app/qualification/delete/delete.component.css
View File

0
src/app/delete-qualification/delete-qualification.component.html → src/app/qualification/delete/delete.component.html
View File

10
src/app/delete-qualification/delete-qualification.component.ts → src/app/qualification/delete/delete.component.ts
View File

@ -1,7 +1,7 @@
import {Component, inject} from '@angular/core'; import {Component, inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog"; import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import QualificationService from "../services/qualification.service"; import QualificationService from "../../services/qualification.service";
@Component({ @Component({
selector: 'app-delete-qualification', selector: 'app-delete-qualification',
@ -11,14 +11,14 @@ import QualificationService from "../services/qualification.service";
MatDialogTitle, MatDialogTitle,
ReactiveFormsModule ReactiveFormsModule
], ],
templateUrl: './delete-qualification.component.html', templateUrl: './delete.component.html',
styleUrl: './delete-qualification.component.css' styleUrl: './delete.component.css'
}) })
export class DeleteQualificationComponent { export class DeleteComponent {
public id: number = inject(MAT_DIALOG_DATA); public id: number = inject(MAT_DIALOG_DATA);
private qualificationService: QualificationService = inject(QualificationService); private qualificationService: QualificationService = inject(QualificationService);
private dialogRef: MatDialogRef<DeleteQualificationComponent> = inject(MatDialogRef); private dialogRef: MatDialogRef<DeleteComponent> = inject(MatDialogRef);
delete() { delete() {
this.qualificationService.delete(this.id).subscribe({ this.qualificationService.delete(this.id).subscribe({

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>

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

@ -1,44 +1,51 @@
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 {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 {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 {CreateQualificationComponent} from "../create-qualification/create-qualification.component";
import {MatIcon} from "@angular/material/icon"; import {MatIcon} from "@angular/material/icon";
import {MatButton, MatIconButton} from "@angular/material/button"; import {MatCard, MatCardContent} from "@angular/material/card";
import {EditQualificationComponent} from "../edit-qualification/edit-qualification.component"; import {MatTooltip} from "@angular/material/tooltip";
import {DeleteQualificationComponent} from "../delete-qualification/delete-qualification.component"; import {MatProgressSpinner} from "@angular/material/progress-spinner";
@Component({ @Component({
selector: 'app-qualifications', selector: 'app-qualifications',
imports: [ imports: [
AsyncPipe, AsyncPipe,
MatButton,
MatTable, MatTable,
MatHeaderCell,
MatColumnDef, MatColumnDef,
MatHeaderCell,
MatCell, MatCell,
MatHeaderRow,
MatRow,
MatHeaderCellDef, MatHeaderCellDef,
MatCellDef, MatCellDef,
MatIconButton,
MatIcon,
MatHeaderRow,
MatRow,
MatHeaderRowDef, MatHeaderRowDef,
MatRowDef, MatRowDef,
MatIcon, MatCard,
MatIconButton, MatCardContent,
MatButton MatTooltip,
MatProgressSpinner
], ],
templateUrl: './qualifications.component.html', templateUrl: './table.component.html',
styleUrl: './qualifications.component.css' styleUrl: './table.component.css'
}) })
export class QualificationsComponent implements OnInit { export class QualificationsComponent implements OnInit {
public qualifications$!: Observable<Qualification[]>; public qualifications$!: Observable<Qualification[]>;
@ -56,7 +63,7 @@ export class QualificationsComponent implements OnInit {
} }
openCreateModal() { openCreateModal() {
const dialogRef = this.dialog.open(CreateQualificationComponent); const dialogRef = this.dialog.open(CreateComponent);
dialogRef.afterClosed().subscribe((success: boolean) => { dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) { if (success) {
@ -66,7 +73,7 @@ export class QualificationsComponent implements OnInit {
} }
openEditModal(qualification: Qualification) { openEditModal(qualification: Qualification) {
const dialogRef = this.dialog.open(EditQualificationComponent, { const dialogRef = this.dialog.open(EditComponent, {
data: qualification data: qualification
}); });
@ -78,7 +85,7 @@ export class QualificationsComponent implements OnInit {
} }
openDeleteModal(id: number) { openDeleteModal(id: number) {
const dialogRef = this.dialog.open(DeleteQualificationComponent, { const dialogRef = this.dialog.open(DeleteComponent, {
data: id data: id
}); });