term-container.component.html

<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">{{ credits$ | async }} Cr</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>
    <div id="term-{{termCode}}" class="term-body" cdkDropList
      [cdkDropListData]="(term$ | async).termCode"
      [cdkDropListConnectedTo]="dropZoneIds$ | async"
      (cdkDropListDropped)="drop($event)">

      <!-- 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>

      <!-- Render list of courses in this term -->
      <div class="course-wrapper" *ngFor="let course of courses$ | async"
        cdkDrag
        [cdkDragDisabled]="(isPastTerm$ | async) || course.id === null"
        [cdkDragData]="course">
        <div class="course-wrapper-inner">
          <cse-course-item
            type="course"
            [course]="course"
            [isPastTerm]="(isPastTerm$ | async)"
            [isCurrentTerm]="(isCurrentTerm$ | async)"
            [disabled]="(isPastTerm$ | async) || (course.id === null)">
          </cse-course-item>
        </div>
      </div>

      <div class="no-courses" *ngIf="(courses$ | async).length === 0">
        <p>{{ (isPastTerm$ | async) ? 'No Courses Taken' : 'No Courses Planned' }}</p>
      </div>
    </div>
  </div>
  <div class="add-new-wrapper" *ngIf="(isPastTerm$ | async) === false">
    <button
      mat-raised-button
      class="add-course-button"
      (click)="openCourseSearch()">
      + Add Course
    </button>
	</div>
</mat-card>