Primo rilascio

frontend/nursery-app/src/app/components/teachers/teachers.component.html

@@ -0,0 +1,86 @@
+<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>