ROENROLL-1420

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

@@ -3,8 +3,8 @@
       <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>
+                <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"></cse-course-item>
@@ -26,8 +26,9 @@
         >
           <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 === '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
@@ -121,14 +122,23 @@
   <!-- 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="Enrolled"><ng-container *ngTemplateOutlet="enrolled"></ng-container></mat-tab>
-        <mat-tab label="Cart"><ng-container *ngTemplateOutlet="planned"></ng-container></mat-tab>
-      </mat-tab-group>
+        <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 *ngTemplateOutlet="enrolled"></ng-container>
+      <ng-container *ngIf="plannedCourses.length > 0">
+          <mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="1">
+              <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 -->

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

@@ -78,7 +78,11 @@ export class TermContainerComponent implements OnInit, OnDestroy {
       this.enrolledCredits = this.sumEnrolledCredits(term.enrolledCourses);
 
       this.era = term.era;
-      this.visibleCredits = term.era === 'past' ? 'enrolled' : 'planned';
+
+      this.visibleCredits = 'planned';
+      if (term.era === 'past' && this.plannedCourses.length === 0) {
+        this.visibleCredits = 'enrolled';
+      }
     });
 
     this.note$ = this.term$.pipe(
@@ -117,8 +121,8 @@ export class TermContainerComponent implements OnInit, OnDestroy {
   }
 
   changeVisibleCredits(event) {
-    switch (event.tab.textLabel) {
-      case 'Enrolled':
+    switch (event.index) {
+      case 0:
         this.visibleCredits = 'enrolled';
         break;
       default: