87 lines
2.9 KiB
HTML
87 lines
2.9 KiB
HTML
<h2>Gestione Insegnanti</h2>
|
|
|
|
<div class="actions-header">
|
|
<button mat-raised-button color="primary" (click)="addTeacher()">
|
|
<mat-icon>person_add</mat-icon> Aggiungi Insegnante
|
|
</button>
|
|
</div>
|
|
|
|
<div class="spinner-container" *ngIf="isLoading">
|
|
<mat-spinner diameter="50"></mat-spinner>
|
|
</div>
|
|
|
|
<div *ngIf="error" class="error-message">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div *ngIf="!isLoading && !error">
|
|
<table mat-table [dataSource]="(teachers$ | async) ?? []" class="mat-elevation-z8 teacher-table">
|
|
|
|
<!-- Colonna ID -->
|
|
<ng-container matColumnDef="id">
|
|
<th mat-header-cell *matHeaderCellDef> ID </th>
|
|
<td mat-cell *matCellDef="let teacher"> {{teacher.id}} </td>
|
|
</ng-container>
|
|
|
|
<!-- Colonna Cognome -->
|
|
<ng-container matColumnDef="last_name">
|
|
<th mat-header-cell *matHeaderCellDef> Cognome </th>
|
|
<td mat-cell *matCellDef="let teacher"> {{teacher.last_name}} </td>
|
|
</ng-container>
|
|
|
|
<!-- Colonna Nome -->
|
|
<ng-container matColumnDef="first_name">
|
|
<th mat-header-cell *matHeaderCellDef> Nome </th>
|
|
<td mat-cell *matCellDef="let teacher"> {{teacher.first_name}} </td>
|
|
</ng-container>
|
|
|
|
<!-- Colonna Email -->
|
|
<ng-container matColumnDef="email">
|
|
<th mat-header-cell *matHeaderCellDef> Email </th>
|
|
<td mat-cell *matCellDef="let teacher"> {{teacher.email || '-'}} </td>
|
|
</ng-container>
|
|
|
|
<!-- Colonna Telefono -->
|
|
<ng-container matColumnDef="phone">
|
|
<th mat-header-cell *matHeaderCellDef> Telefono </th>
|
|
<td mat-cell *matCellDef="let teacher"> {{teacher.phone || '-'}} </td>
|
|
</ng-container>
|
|
|
|
<!-- Colonna Attivo -->
|
|
<ng-container matColumnDef="is_active">
|
|
<th mat-header-cell *matHeaderCellDef> Attivo </th>
|
|
<td mat-cell *matCellDef="let teacher">
|
|
<mat-slide-toggle
|
|
[checked]="teacher.is_active"
|
|
(change)="toggleActive(teacher, $event)"
|
|
aria-label="Stato attivo insegnante">
|
|
</mat-slide-toggle>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<!-- Colonna Azioni -->
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef> Azioni </th>
|
|
<td mat-cell *matCellDef="let teacher">
|
|
<button mat-icon-button color="primary" aria-label="Modifica insegnante" (click)="editTeacher(teacher)">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="warn" aria-label="Elimina insegnante" (click)="deleteTeacher(teacher)">
|
|
<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>
|
|
|
|
<!-- Riga da mostrare quando non ci sono dati -->
|
|
<tr class="mat-row" *matNoDataRow>
|
|
<td class="mat-cell" [attr.colspan]="displayedColumns.length">
|
|
Nessun insegnante trovato.
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|