term-container.component.html

<ng-template #enrolled id="enrolled-courses">
  <div class="course-list-wrapper">
    <div class="course-list">
      <div class="course-list-inner">
        <ng-container *ngIf="enrolledCourses.length === 0">
          <p *ngIf="(term$ | async).era === 'past'" class="no-courses">
            No courses taken
          </p>
          <p *ngIf="(term$ | async).era === 'active'" 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).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">
        <ng-container
          *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver"
        >
          <p *ngIf="(term$ | async).era === 'active'" class="no-courses">
            No Courses in cart
          </p>
          <p *ngIf="(term$ | async).era === 'future'" class="no-courses">
            No courses planned
          </p>
          <p *ngIf="(term$ | async).era === 'past'" class="no-courses">
            No courses planned
          </p>
        </ng-container>
        <div
          cdkDrag
          [cdkDragData]="course"
          [cdkDragDisabled]="mobileView.matches"
          class="course-wrapper"
          *ngFor="let course of plannedCourses"
        >
          <cse-course-item
            role="button"
            aria-labelledby="planned-courses"
            type="course"
            [course]="course"
            [era]="(term$ | async).era"
          >
          </cse-course-item>
        </div>
      </div>
    </div>

    <!-- Add course -->
    <div class="add-new-wrapper" *ngIf="(term$ | async).era !== 'past'">
      <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"
    >
      <h3 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h3>
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <p class="text-right semi-bold credits">
          <span *ngIf="visibleCredits === 'planned'" attr.aria-label="{{ plannedCredits }} credits">
            {{ plannedCredits }} Cr
          </span>
          <span *ngIf="visibleCredits === 'enrolled'" attr.aria-label="{{ enrolledCredits }} credits">
            {{ enrolledCredits }} Cr
          </span>
        </p>
        <ng-container *ngIf="(note$ | async) as note; else newNote">
          <button
            mat-icon-button
            aria-label="Open dialog to edit note in this term"
            [disabled]="note.isLoaded === false"
            (click)="openNotesDialog(note)"
          >
            <mat-icon
              aria-label="Open dialog to edit note in this term"
              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()"
            aria-label="Open dialog to add note in this term"
          >
            <mat-icon
              aria-label="Open dialog to add note in this term"
              alt="Add note"
              color="primary"
              matTooltip="Add note"
              matTooltipPosition="above"
            >
              note_add
            </mat-icon>
          </button>
        </ng-template>
      </div>
    </div>

    <!-- 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).era === 'active'">
    <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
      <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" aria-label="In progress courses">
        <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
      </mat-tab>
      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'" aria-label="Cart courses">
        <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).era === 'past'">
    <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
      <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" aria-label="Completed courses">
        <ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
      </mat-tab>
      <mat-tab [label]="'Cart (' + plannedCourses.length + ')'" aria-label="Cart courses">
        <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).era === 'future'">
    <ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
  </ng-container>
</mat-card>