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

Implement editing qualifications (#20)

Browse Source 
Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: #20
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
This commit is contained in:
Get in my car i have candy
2025-01-08 11:25:32 +00:00
parent 36d5a29b9e
commit ae7146d28f
7 changed files with 174 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/qualifications/qualifications.component.html
View File

@ -1,25 +1,42 @@
<h1 >Qualifications</h1>
<button (click)="openCreateModal()">Create qualification</button>
<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="skill">
<th mat-header-cell *matHeaderCellDef>Skill</th>
<td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
</ng-container>
@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="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let qualification"></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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
}
<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">
<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>
}
}

22
src/app/qualifications/qualifications.component.ts
View File

@ -14,6 +14,9 @@ import {
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";
@Component({
selector: 'app-qualifications',
@ -28,14 +31,17 @@ import {CreateQualificationComponent} from "../create-qualification/create-quali
MatHeaderCellDef,
MatCellDef,
MatHeaderRowDef,
MatRowDef
MatRowDef,
MatIcon,
MatIconButton,
MatButton
],
templateUrl: './qualifications.component.html',
styleUrl: './qualifications.component.css'
})
export class QualificationsComponent implements OnInit{
public qualifications$!: Observable<Qualification[]>;
public readonly displayedColumns: string[] = ['skill', 'actions'];
public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
private readonly dialog: MatDialog = inject(MatDialog);
private readonly qualificationService: QualificationService = inject(QualificationService);
@ -57,4 +63,16 @@ export class QualificationsComponent implements OnInit{
}
});
}
openEditModal(qualification: Qualification) {
const dialogRef = this.dialog.open(EditQualificationComponent, {
data: qualification
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.loadQualifications();
}
});
}
}