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

32
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 {
@ -59,7 +63,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>
@ -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>

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

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