term-container.component.html

<ng-template #enrolled>
  <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
              *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>
    <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"
              class="course-wrapper"
              *ngFor="let course of plannedCourses"
            >
              <cse-course-item
                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
            class="add-course-button"
            (click)="openCourseSearch()"
          >
            + Add Course
          </button>
        </div>
    </div>
</ng-template>

<mat-card class="term-container">
  <div class="term-inner">
    <div
      fxLayout="row"
      class="term-header"
      fxLayoutAlign="space-between center"
    >
      <h2>{{ termCode | getTermDescription }}</h2>
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <p class="text-right semi-bold credits">
          <span *ngIf="visibleCredits === 'planned'">{{plannedCredits}} Cr</span>
          <span *ngIf="visibleCredits === 'enrolled'">{{enrolledCredits}} Cr</span>
        </p>
        <ng-container *ngIf="(note$ | async) as note; else newNote">
          <button
            mat-icon-button
            [disabled]="note.isLoaded === false"
            (click)="openNotesDialog(note)"
          >
            <mat-icon
              aria-label="Open dialog with notes in this term"
              color="primary"
              matTooltip="Edit Note"
              matTooltipPosition="above"
            >
              insert_drive_file
            </mat-icon>
          </button>
        </ng-container>
        <ng-template #newNote>
          <button mat-icon-button (click)="openNotesDialog()">
            <mat-icon
              aria-label="Open dialog with notes in this term"
              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]="1">
        <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'"><ng-container *ngTemplateOutlet="enrolled"></ng-container></mat-tab>
        <mat-tab [label]="'Cart (' + plannedCourses.length + ')'"><ng-container *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'">
      <ng-container *ngIf="plannedCourses.length > 0">
          <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
              <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'"><ng-container *ngTemplateOutlet="enrolled"></ng-container></mat-tab>
              <mat-tab [label]="'Cart (' + plannedCourses.length + ')'"><ng-container *ngTemplateOutlet="planned"></ng-container></mat-tab>
          </mat-tab-group>
      </ng-container>

      <ng-container *ngIf="plannedCourses.length === 0" >
          <ng-container *ngTemplateOutlet="enrolled"></ng-container>
      </ng-container>
  </ng-container>

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