Display cart courses

src/app/degree-planner/shared/course-item/course-item.component.html

-<div class="course-item {{disabled ? 'disabled' : ''}}">
-
+<div class="course-item {{ disabled ? 'disabled' : '' }}">
   <div fxLayout="row" fxLayoutAlign="space-between start">
-    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="80" (click)="openCourseDetailsDialog(course)">
+    <div
+      fxLayout="column"
+      fxLayoutAlign="space-between start"
+      fxFlex="80"
+      (click)="openCourseDetailsDialog(course)"
+    >
       <div fxLayout="row" fxLayoutAlign="start center">
         <div class="icon-number-wrapper">
           <p class="course-number">
-            {{ course.subject }} {{course.catalogNumber}}
+            {{ course.subject }} {{ course.catalogNumber }}
           </p>
-        <span [ngSwitch]="status">
-          <i *ngSwitchCase="'Enrolled'" class="material-icons in-progress-icon" matTooltip="Course in progress" matTooltipPosition="above">check_circle</i>
-          <i *ngSwitchCase="'Waitlisted'" class="material-icons problem-icon" matTooltip="Course is waitlisted" matTooltipPosition="above">report_problem</i>
-          <i *ngSwitchCase="'Incomplete'" class="material-icons error-icon" matTooltip="Course is incomplete" matTooltipPosition="above">error</i>
-        </span>
-       </div>
+          <span [ngSwitch]="status">
+            <i
+              *ngSwitchCase="'Enrolled'"
+              class="material-icons in-progress-icon"
+              matTooltip="Course in progress"
+              matTooltipPosition="above"
+              >check_circle</i
+            >
+            <i
+              *ngSwitchCase="'Waitlisted'"
+              class="material-icons problem-icon"
+              matTooltip="Course is waitlisted"
+              matTooltipPosition="above"
+              >report_problem</i
+            >
+            <i
+              *ngSwitchCase="'Incomplete'"
+              class="material-icons error-icon"
+              matTooltip="Course is incomplete"
+              matTooltipPosition="above"
+              >error</i
+            >
+          </span>
+        </div>
       </div>
       <div fxLayout="row" fxLayoutAlign="start center">
-        <p class="course-title">{{course.title}}</p>
+        <p class="course-title">{{ course.title }}</p>
       </div>
     </div>
 
     <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
       <div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
-        <mat-icon [matMenuTriggerFor]="courseMenu" (menuOpened)="onMenuOpen()" aria-label="Course menu" matTooltip="Course Menu" matTooltipPosition="right"
-          class="material-icons">more_horiz</mat-icon>
+        <mat-icon
+          [matMenuTriggerFor]="courseMenu"
+          (menuOpened)="onMenuOpen()"
+          aria-label="Course menu"
+          matTooltip="Course Menu"
+          matTooltipPosition="right"
+          class="material-icons"
+          >more_horiz</mat-icon
+        >
         <mat-menu #courseMenu="matMenu" class="course-item-menu">
-          <button mat-menu-item (click)="openCourseDetailsDialog(course)">Course Details</button>
-          <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup">Move</button>
+          <button mat-menu-item (click)="openCourseDetailsDialog(course)">
+            Course Details
+          </button>
+          <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup">
+            Move
+          </button>
           <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
-            <button mat-menu-item *ngFor="let term of (droppableTermCodes$ | async)" (click)="onMove(term)">{{ term | getTermDescription }}</button>
+            <button
+              mat-menu-item
+              *ngFor="let term of (droppableTermCodes$ | async)"
+              (click)="onMove(term)"
+            >
+              {{ term | getTermDescription }}
+            </button>
           </mat-menu>
-          <button mat-menu-item *ngIf="type !== 'saved'" (click)="onSaveForLater()">Save for later</button>
-          <button mat-menu-item *ngIf="type !== 'search'" (click)="onRemove()">Remove</button>
+          <button
+            mat-menu-item
+            *ngIf="type !== 'saved'"
+            (click)="onSaveForLater()"
+          >
+            Save for later
+          </button>
+          <button mat-menu-item *ngIf="type !== 'search'" (click)="onRemove()">
+            Remove
+          </button>
         </mat-menu>
       </div>
       <div *ngIf="disabled" fxLayout="row" fxLayoutAlign="end center">
         <p>{{ course.grade || '&nbsp;' }}</p>
       </div>
       <div fxLayout="row" fxLayoutAlign="end center">
-        <p class="course-credits">{{ course.credits ? course.credits : course.creditRange }} Cr</p>
+        <p class="course-credits">
+          {{ course.credits ? course.credits : course.creditRange }} Cr
+        </p>
       </div>
     </div>
   </div>

src/app/degree-planner/term-container/term-container.component.html

 <mat-card class="term-container">
   <div class="term-inner">
-    <div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
+    <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>
@@ -10,7 +14,13 @@
               aria-label="Open dialog with notes in this term"
               color="primary"
               matTooltip="Edit Note"
+<<<<<<< HEAD
               matTooltipPosition="above">
+=======
+              (click)="openNotesDialog(note)"
+              matTooltipPosition="above"
+            >
+>>>>>>> Display cart courses
               insert_drive_file
             </mat-icon>
           </button>
@@ -21,18 +31,31 @@
               aria-label="Open dialog with notes in this term"
               color="primary"
               matTooltip="Add Note"
+<<<<<<< HEAD
               matTooltipPosition="above">
               note_add
             </mat-icon>
           </button>
         </ng-template>
+=======
+              (click)="openNotesDialog()"
+              matTooltipPosition="above"
+            >
+              note_add
+            </mat-icon>
+          </ng-template>
+        </button>
+>>>>>>> Display cart courses
       </div>
     </div>
-    <div id="term-{{termCode}}" class="term-body" cdkDropList
+    <div
+      id="term-{{ termCode }}"
+      class="term-body"
+      cdkDropList
       [cdkDropListData]="(term$ | async).termCode"
       [cdkDropListConnectedTo]="dropZoneIds$ | async"
-      (cdkDropListDropped)="drop($event)">
-
+      (cdkDropListDropped)="drop($event)"
+    >
       <!-- Render term note (if it exists) -->
       <ng-container *ngIf="note$ | async as note">
         <ng-container *ngIf="note.isLoaded; else noteIsLoading">
@@ -50,33 +73,96 @@
         </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">
+        <p>
+          No courses planned
+        </p>
+      </div>
+
       <!-- Render list of courses in this term -->
-      <div class="course-wrapper" *ngFor="let course of courses$ | async"
+      <div
+        class="course-wrapper"
+        *ngFor="let course of (courses$ | async)"
         cdkDrag
         [cdkDragDisabled]="(isPastTerm$ | async) || course.id === null"
-        [cdkDragData]="course">
-        <div class="course-wrapper-inner">
+        [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)">
+            [isPastTerm]="isPastTerm$ | async"
+            [isCurrentTerm]="isCurrentTerm$ | async"
+            [disabled]="(isPastTerm$ | async) || course.id === null"
+          >
           </cse-course-item>
-        </div>
+        </ng-container>
       </div>
-
-      <div class="no-courses" *ngIf="(courses$ | async).length === 0">
-        <p>{{ (isPastTerm$ | async) ? 'No Courses Taken' : 'No Courses Planned' }}</p>
+      <div
+        class="no-courses"
+        *ngIf="
+          (courses$ | async).length === 0 && (term$ | async).era == 'passt'
+        "
+      >
+        <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()">
+      (click)="openCourseSearch()"
+    >
       + Add Course
     </button>
-	</div>
+  </div>
 </mat-card>

src/app/degree-planner/term-container/term-container.component.scss

@@ -25,6 +25,9 @@
   h2 {
     margin: 0;
   }
+  h3 {
+    font-weight: 400;
+  }
 
   .mat-icon-button {
     line-height: 20px;

src/app/degree-planner/term-container/term-container.component.ts

@@ -25,13 +25,20 @@ import * as utils from '@app/degree-planner/shared/utils';
 const isntUndefined = <T>(thing: T | undefined): thing is T => {
   return thing !== undefined;
 };
-
 const sumCredits = (courses: Course[]): number => {
   return courses.reduce((sum, course) => {
     return sum + course.credits;
   }, 0);
 };
 
+const sumCreditsInCart = (courses: Course[]): number => {
+  return courses
+    .filter(course => course.id)
+    .reduce((sum, course) => {
+      return sum + parseInt(course.creditRange);
+    }, 0);
+};
+
 @Component({
   selector: 'cse-term-container',
   templateUrl: './term-container.component.html',
@@ -46,6 +53,7 @@ export class TermContainerComponent implements OnInit {
   public note$: Observable<PlannedTermNote | undefined>;
   public courses$: Observable<Course[]>;
   public credits$: Observable<number>;
+  public cartCredits$: Observable<number>;
   public isPastTerm$: Observable<boolean>;
   public dropZoneIds$: Observable<string[]>;
   public isCurrentTerm$: Observable<boolean>;
@@ -80,6 +88,11 @@ export class TermContainerComponent implements OnInit {
       distinctUntilChanged(),
     );
 
+    this.cartCredits$ = this.courses$.pipe(
+      map(sumCreditsInCart),
+      distinctUntilChanged(),
+    );
+
     this.isPastTerm$ = this.term$.pipe(
       map(term => term.era === 'past'),
       distinctUntilChanged(),