iwa_252490/project/frontend-angular/src/app/grade-teacher/grade-teacher.html

<div>
  <div>
    <h1>{{subject?.name}}</h1>
  </div>

  <div>
    <form (ngSubmit)="f.form.valid && addGrade()" #f="ngForm" novalidate>
      <div>
        <label for="grade">Grade</label>
        <select id="grade" name="grade" [(ngModel)]="form.grade" #grade="ngModel" required>
          <option *ngFor="let g of gradeOptions" [value]="g">{{ g }}</option>
        </select>
        @if (f.submitted && grade.invalid) {
          <div>
        @if (grade.errors?.['required']) {
          <div>Grade is required</div>
        }
          </div>
        }
      </div>
      <div *ngIf="errorMessage === 'Student already has a grade'">
        Student already has a grade
      </div>
      <div>
        <label for="student">Student</label>
        <select id="student" name="student" [(ngModel)]="form.student" #student="ngModel" required>
          <option *ngFor="let student of studentList" [value]="student.id">{{ student.firstname }} {{ student.lastname }}</option>
        </select>
        @if (f.submitted && student.invalid) {
          <div>
            @if (student.errors?.['required']) {
              <div>Student is required</div>
            }
          </div>
        }
      </div>
      <div>
        <button type="submit">Add Grade</button>
      </div>
    </form>
  </div>

  <div>
    <table>
      <thead>
      <tr>
        <th>Name</th>
        <th>Last Name</th>
        <th>Grades</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let student of studentList; index as i">
        <tr [class.even-row]="i % 2 === 1">
          <td>{{ student.firstname }}</td>
          <td>{{ student.lastname }}</td>
          <td>
            <div>
              <ng-container *ngFor="let grade of gradeList">
                @if (grade.student.id === student.id) {
                  <div>
                    @if (selectedGrade === grade) {
                      <select [(ngModel)]="selectedGradeValue">
                        <option *ngFor="let g of gradeOptions" [value]="g">{{ g }}</option>
                      </select>
                      <button (click)="saveGrade()">Save</button>
                      <button (click)="cancelEdit()">Cancel</button>
                    } @else {
                      <span>{{ grade.grade }}</span>
                      <button (click)="editGrade(grade)">Edit</button>
                    }
                  </div>
                }
              </ng-container>
            </div>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </table>
  </div>
</div>