Separate cart courses and enrolled into separate drop zones

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

@@ -113,7 +113,15 @@
           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"

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

 import { Component, Input, OnInit } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { MatDialog } from '@angular/material';
+import { MatDialog, ErrorStateMatcher } from '@angular/material';
 import { Observable } from 'rxjs';
 import { filter, map, distinctUntilChanged } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
@@ -21,19 +21,24 @@ import {
   NotesDialogData,
 } from '@app/degree-planner/dialogs/notes-dialog/notes-dialog.component';
 import * as utils from '@app/degree-planner/shared/utils';
+import { findSafariExecutable } from 'selenium-webdriver/safari';
 
 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;
+    if (course.credits == undefined) {
+      return sum + course.credits;
+    }
+    return 0;
   }, 0);
 };
 
 const sumCreditsInCart = (courses: Course[]): number => {
   return courses
-    .filter(course => course.id)
+    .filter(course => course.id && course.creditRange)
     .reduce((sum, course) => {
       return sum + parseInt(course.creditRange);
     }, 0);