term-container.component.html

<ng-template #enrolled id="enrolled-courses">
  <div class="course-list-wrapper">
    <div class="course-list">
      <div class="course-list-inner" attr.aria-label="List of courses in {{ termCode | getTermDescription }} term">
        <ng-container *ngIf="enrolledCourses.length === 0">
          <p *ngIf="(term$ | async).termCode.isPast()" aria-label="No courses taken" class="no-courses">
            No courses taken
          </p>
          <p *ngIf="(term$ | async).termCode.isActive()" aria-label="Not enrolled in any courses" class="no-courses">
            Not enrolled in any courses
          </p>
        </ng-container>

        <cse-course-item
          role="button"
          aria-labelledby="enrolled-courses"
          *ngFor="let course of enrolledCourses"
          type="course"
          [disabled]="true"
          [course]="course"
          [era]="(term$ | async).termCode.era">
        </cse-course-item>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #planned id="planned-courses">
  <div class="course-list-wrapper">
    <div
      class="course-list"
      cdkDropList
      id="term-{{ termCode }}"
      [cdkDropListData]="(term$ | async).termCode"
      [cdkDropListConnectedTo]="dropZoneIds$ | async"
      (cdkDropListDropped)="drop($event)"
      (cdkDropListEntered)="dragEnter($event)"
      (cdkDropListExited)="dragExit($event)">
      <div class="course-list-inner term-body" attr.aria-label="List of courses in {{ termCode | getTermDescription }} term">
        <ng-container
          *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver">
          <p *ngIf="(term$ | async).termCode.isActive()" class="no-courses">
            No courses in cart
          </p>
          <p *ngIf="(term$ | async).termCode.isFuture()" class="no-courses">
            No courses planned
          </p>
          <p *ngIf="(term$ | async).termCode.isPast()" class="no-courses">
            No courses planned
          </p>
        </ng-container>
        <span class="assistive-text">{{ assistiveText }}</span>
        <div
          cdkDrag
          [cdkDragData]="course"
          [cdkDragDisabled]="mobileView.matches"
          (cdkDragStarted)="startDrag($event)"
          class="course-wrapper"
          *ngFor="let course of plannedCourses">
          <cse-course-item
            draggable="true"
            role="button"
            aria-labelledby="planned-courses"
            type="course"
            [course]="course"
            [era]="(term$ | async).termCode.era">
          </cse-course-item>
        </div>
      </div>
    </div>

    <!-- Add course -->
    <div class="add-new-wrapper" *ngIf="(term$ | async).termCode.isPast() == false">
      <button
        mat-raised-button
        attr.aria-label="Add course to {{ termCode | getTermDescription }}"
        class="add-course-button"
        (click)="openCourseSearch()">
        + Add Course
      </button>
    </div>
  </div>
</ng-template>

<mat-card
  class="term-container"
  [ngClass]="{ 'no-scrolling': mobileView.matches }"
  role="region"
  cdkFocusInitial>
  <div class="term-inner">
    <div
      fxLayout="row"
      class="term-header"
      fxLayoutAlign="space-between center"
      attr.aria-label="{{ termCode | getTermDescription }} term">
      <h3 class="term-description">{{ termCode | getTermDescription }}</h3>

      <div fxLayout="row" fxLayoutAlign="space-between center">
        <p class="text-right semi-bold credits">
          <ng-container *ngIf="visibleCredits === 'planned'">
            <span attr.aria-label="{{ plannedCredits }} credits">{{ plannedCredits }} Cr</span>
          </ng-container>
          <ng-container *ngIf="visibleCredits === 'enrolled'">
            <span attr.aria-label="{{ enrolledCredits }} credits">{{ enrolledCredits }} Cr</span>
          </ng-container>
        </p>
        <ng-container *ngIf="(note$ | async) as note; else newNote">
          <button
            mat-icon-button
            attr.aria-label="Edit note for {{ termCode | getTermDescription }}"
            [disabled]="note.isLoaded === false"
            (click)="openNotesDialog(note)">
            <mat-icon
              alt="Edit note"
              color="primary"
              matTooltip="Edit note"
              matTooltipPosition="above">
              insert_drive_file
            </mat-icon>
          </button>
        </ng-container>
        <ng-template #newNote>
          <button
            mat-icon-button
            (click)="openNotesDialog()"
            attr.aria-label="Add note to {{ termCode | getTermDescription }}">
            <mat-icon
              alt="Add note"
              color="primary"
              matTooltip="Add note"
              matTooltipPosition="above">
              note_add
            </mat-icon>
          </button>
        </ng-template>
      </div>
    </div>

    <p class="credit-overload-warning" *ngIf="((visibleCredits === 'planned') && (tooManyCredits$ | async)) || ((visibleCredits === 'enrolled') && (enrolledCredits > maxAllowedCredits))">
      Warning: credit overload
    </p>

    <!-- Render term note (if it exists) -->
    <ng-container *ngIf="(note$ | async) as note">
      <ng-container *ngIf="note.isLoaded; else noteIsLoading">
        <div class="note-item" (click)="openNotesDialog(note)">
          <p class="semi-bold">Note</p>
          <p class="note-excerpt">{{ note.text }}</p>
        </div>
      </ng-container>
      <ng-template #noteIsLoading>
        <div class="note-item note-item-loading">
          <p class="semi-bold">Note</p>
          <p class="note-excerpt">{{ note.text }}</p>
          <mat-progress-spinner
            mode="indeterminate"
            diameter="24">
          </mat-progress-spinner>
        </div>
      </ng-template>
    </ng-container>
  </div>

      <!-- If this term is an active term -->
  <ng-container *ngIf="(term$ | async).termCode.isActive()">
    <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="(enrolledCourses.length > 0) ? 0 : 1">
      <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" [aria-label]="'In Progress courses (' + enrolledCourses.length + ')'">
        <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
      </mat-tab>
      <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'Cart courses (' + plannedCourses.length + ')' : 'Planned courses (' + plannedCourses.length + ')'">
        <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
      </mat-tab>
    </mat-tab-group>
  </ng-container>

  <!-- If this term is a past term -->
  <ng-container *ngIf="(term$ | async).termCode.isPast()">
    <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
      <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" [aria-label]="'Completed courses (' + enrolledCourses.length + ')'">
        <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
      </mat-tab>
        <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'Cart courses (' + plannedCourses.length + ')' : 'Planned courses (' + plannedCourses.length + ')'">
          <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
        </mat-tab>
    </mat-tab-group>
  </ng-container>

  <!-- If this term is a future term -->
  <ng-container *ngIf="(term$ | async).termCode.isFuture()">
    <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
  </ng-container>
</mat-card>