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 cart courses in this term -->
      <div
        *ngIf="(term$ | async).era == 'active'"
        fxLayout="row"
        class="term-header"
        fxLayoutAlign="space-between center"
      >
        <h3>My Courses: Cart</h3>
        <div fxLayout="row" fxLayoutAlign="space-between center">
          <p class="text-right semi-bold credits">
            {{ cartCredits$ | async }} Cr
          </p>
          <button mat-icon-button>
            <a href="/my-courses">
              <mat-icon
                aria-label="Go to cart"
                color="primary"
                matTooltip="Go to cart"
                matTooltipPosition="above"
              >
                shopping_cart
              </mat-icon>
            </a>
          </button>
        </div>
      </div>

      <div
        class="course-wrapper"
        *ngFor="let course of (courses$ | async)"
        cdkDrag
        [cdkDragData]="course"
      >
        <ng-container class="course-wrapper-inner" *ngIf="course.id !== null">
          <cse-course-item
            type="course"
            [course]="course"
            [isPastTerm]="isPastTerm$ | async"
          >
          </cse-course-item>
        </ng-container>
      </div>
      <div
        class="no-courses"
        *ngIf="(courses$ | async).length == 0 && (term$ | async).era != 'past'"
      >
        <p>
          No courses planned
        </p>
      </div>
    </div>
    <div
      id="term-{{ termCode }}"
      class="term-body"
      cdkDropList
      [cdkDropListData]="(term$ | async).termCode"
      [cdkDropListConnectedTo]="dropZoneIds$ | async"
      (cdkDropListDropped)="drop($event)"
    >
      <!-- 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"
      >
        <ng-container class="course-wrapper-inner" *ngIf="course.id === null">
          <cse-course-item
            type="course"
            [course]="course"
            [isPastTerm]="isPastTerm$ | async"
            [isCurrentTerm]="isCurrentTerm$ | async"
            [disabled]="(isPastTerm$ | async) || course.id === null"
          >
          </cse-course-item>
        </ng-container>
      </div>
      <div
        class="no-courses"
        *ngIf="(courses$ | async).length === 0 && (term$ | async).era == 'past'"
      >
        <p>
          {{
            (isPastTerm$ | async) ? 'No courses taken' : 'No enrolled courses'
          }}
        </p>
      </div>
    </div>
  </div>

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