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

Implement qualification details (#26)

Browse Source 
Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: #26
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
This commit is contained in:
Get in my car i have candy
2025-01-09 11:48:39 +00:00
parent 176074fbdc
commit a2bc06aee0
9 changed files with 154 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,14 @@
<ng-container matColumnDef="skill">
<th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
<td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.skill }}
<td mat-cell *matCellDef="let qualification" class="!py-4">
<a
class="!text-blue-600 hover:!underline cursor-pointer"
[matTooltip]="'Click to view qualification details'"
(click)="openDetailsModal(qualification)"
>
{{ qualification.skill }}
</a>
</td>
</ng-container>

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

@ -1,102 +1,105 @@
import {Component, inject, OnInit} from '@angular/core';
import {Observable} from "rxjs";
import {Qualification} from "../Qualification";
import {AsyncPipe} 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,
MatColumnDef,
MatHeaderCell,
MatHeaderCellDef,
MatHeaderRow,
MatHeaderRowDef,
MatRow,
MatRowDef,
MatTable
MatCell,
MatCellDef,
MatColumnDef,
MatHeaderCell,
MatHeaderCellDef,
MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
MatTable
} from "@angular/material/table";
import {MatIcon} from "@angular/material/icon";
import {MatCard, MatCardContent} from "@angular/material/card";
import {MatTooltip} from "@angular/material/tooltip";
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {DetailsComponent} from "../details/details.component";
@Component({
selector: 'app-qualifications',
imports: [
AsyncPipe,
MatButton,
MatTable,
MatColumnDef,
MatHeaderCell,
MatCell,
MatHeaderCellDef,
MatCellDef,
MatIconButton,
MatIcon,
MatHeaderRow,
MatRow,
MatHeaderRowDef,
MatRowDef,
MatCard,
MatCardContent,
MatTooltip,
MatProgressSpinner
],
templateUrl: './table.component.html',
standalone: true,
styleUrl: './table.component.css'
selector: 'app-qualifications',
imports: [
AsyncPipe,
MatButton,
MatTable,
MatColumnDef,
MatHeaderCell,
MatCell,
MatHeaderCellDef,
MatCellDef,
MatIconButton,
MatIcon,
MatHeaderRow,
MatRow,
MatHeaderRowDef,
MatRowDef,
MatCard,
MatCardContent,
MatTooltip,
MatProgressSpinner
],
templateUrl: './table.component.html',
styleUrl: './table.component.css'
})
export class QualificationsComponent implements OnInit {
public qualifications$!: Observable<Qualification[]>;
public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
public qualifications$!: Observable<Qualification[]>;
public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
private readonly dialog: MatDialog = inject(MatDialog);
private readonly qualificationService: QualificationService = inject(QualificationService);
private readonly dialog: MatDialog = inject(MatDialog);
private readonly qualificationService: QualificationService = inject(QualificationService);
ngOnInit() {
this.loadQualifications();
}
private loadQualifications() {
this.qualifications$ = this.qualificationService.getAll();
}
openCreateModal() {
const dialogRef = this.dialog.open(CreateComponent);
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
ngOnInit() {
this.loadQualifications();
}
});
}
}
openEditModal(qualification: Qualification) {
const dialogRef = this.dialog.open(EditComponent, {
data: qualification
});
private loadQualifications() {
this.qualifications$ = this.qualificationService.getAll();
}
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications();
}
});
}
openCreateModal() {
const dialogRef = this.dialog.open(CreateComponent);
openDeleteModal(id: number) {
const dialogRef = this.dialog.open(DeleteComponent, {
data: id
});
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications();
}
});
}
dialogRef.afterClosed().subscribe((success: boolean) => {
if (success) {
this.loadQualifications();
}
});
}
openEditModal(qualification: Qualification) {
const dialogRef = this.dialog.open(EditComponent, {
data: qualification
});
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();
}
});
}
openDetailsModal(qualification: Qualification) {
const dialogRef = this.dialog.open(DetailsComponent, {
data: qualification
});
}
}