diff --git a/src/app/core/models/course.ts b/src/app/core/models/course.ts
index a4e5c5c76f3350fc163f7b24cb2a63a97cf4b9e0..841be596453a0c62085eea01bc9e5055947bc91d 100644
--- a/src/app/core/models/course.ts
+++ b/src/app/core/models/course.ts
@@ -26,6 +26,7 @@ export interface CourseBase {
enrollmentOptions?: any;
packageEnrollmentStatus?: any;
creditRange?: any;
+ studentEnrollmentStatus: 'Enrolled' | 'Waitlisted' | null;
}
export interface Course extends CourseBase {
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index 660607261499ffec61f9dfd2f97bc2de4e21bfae..b8b0e88cd6e97df7f59761900ae6548bb3ce4f55 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/src/app/degree-planner/shared/course-item/course-item.component.html
@@ -1,4 +1,4 @@
-<div class="course-item {{status}} {{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)">
@@ -7,12 +7,12 @@
<p class="course-number">
{{ course.subject }} {{course.catalogNumber}}
</p>
- <div [ngSwitch]="status">
- <i *ngSwitchCase="'in-progress'" class="material-icons in-progress-icon">check_circle</i>
- <i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
- <i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
- </div>
- </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>
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.scss b/src/app/degree-planner/shared/course-item/course-item.component.scss
index 8b173f5074616fd913e5ccb444bf1403e0489a48..1dff05950bdce564d9994bdc4bd70b91cab33b07 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.scss
+++ b/src/app/degree-planner/shared/course-item/course-item.component.scss
@@ -65,15 +65,6 @@
align-items: center;
}
-.not-offered {
- .course-number,
- .course-credits,
- .course-title {
- text-decoration: line-through;
- opacity: 0.8;
- }
-}
-
button.mat-menu-item {
text-transform: none !important;
}
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.ts b/src/app/degree-planner/shared/course-item/course-item.component.ts
index a9b486aac6bcf5644dace0f7a4bad6334587ce81..7dcfc5d164a36dae5b4fe393e860fedc7c5005b1 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.ts
+++ b/src/app/degree-planner/shared/course-item/course-item.component.ts
@@ -24,10 +24,13 @@ import { RemoveCourseConfirmDialogComponent } from '@app/degree-planner/dialogs/
})
export class CourseItemComponent implements OnInit {
@Input() course: Course;
- @Input() disabled: string;
+ @Input() isCurrentTerm: boolean;
+ @Input() isPastTerm: boolean;
+ @Input() disabled: boolean;
@Input() type: 'saved' | 'course' | 'search';
- status; // TODO make this work k thx plz!?
visibleTerms: any;
+ activeTerm: any;
+ status: string;
constructor(
private api: DegreePlannerApiService,
@@ -35,7 +38,22 @@ export class CourseItemComponent implements OnInit {
private store: Store<GlobalState>,
) {}
- ngOnInit() {}
+ ngOnInit() {
+ switch (true) {
+ case this.course.studentEnrollmentStatus === 'Enrolled' &&
+ this.isCurrentTerm:
+ this.status = 'Enrolled';
+ break;
+ case this.course.studentEnrollmentStatus === 'Waitlisted':
+ this.status = 'Waitlisted';
+ break;
+ case !this.course.grade && this.isPastTerm:
+ this.status = 'Incomplete';
+ break;
+ default:
+ this.status = '';
+ }
+ }
onMenuOpen() {
this.store
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
index d2db7347a3ea898bd1d53bac0d6599baa0fcc861..8c8b15ee3a587ab72e6630ead2636211abe54085 100644
--- a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
@@ -6,10 +6,9 @@
</mat-panel-title>
</mat-expansion-panel-header>
<ul id="course-key-list">
- <li><i class="material-icons in-progress-icon">check_circle</i> Course is currently in progress</li>
- <li><i class="material-icons problem-icon">report_problem</i> Course is waitlisted</li>
- <li><i class="material-icons error-icon">error</i> Course is incomplete</li>
- <li><i class="material-icons not-offered">remove</i>Course no longer offered in term</li>
+ <li><i class="material-icons in-progress-icon" matTooltip="Course in progress" matTooltipPosition="left">check_circle</i> Course is currently in progress</li>
+ <li><i class="material-icons problem-icon" matTooltip="Course is waitlisted" matTooltipPosition="left">report_problem</i> Course is waitlisted</li>
+ <li><i class="material-icons error-icon" matTooltip="Course is incomplete" matTooltipPosition="left">error</i> Course is incomplete</li>
</ul>
</mat-expansion-panel>
<mat-expansion-panel id="course-keys-container" expanded="true">
diff --git a/src/app/degree-planner/store/selectors.ts b/src/app/degree-planner/store/selectors.ts
index 01ce5daa0c87da0c427975d502d2c6863ae387ef..0a1ee7b54e71237bfd3fa1fa42c2884299416954 100644
--- a/src/app/degree-planner/store/selectors.ts
+++ b/src/app/degree-planner/store/selectors.ts
@@ -6,6 +6,9 @@ import { GlobalState } from '@app/core/state';
import { Year } from '@app/core/models/year';
import { PlannedTerm } from '@app/core/models/planned-term';
import { DegreePlannerState } from './state';
+import { SelectorFlags } from '@angular/core/src/render3/interfaces/projection';
+import { fileURLToPath } from 'url';
+import { injectTemplateRef } from '@angular/core/src/render3/view_engine_compatibility';
export const getDegreePlannerState = ({ degreePlanner }: GlobalState) => {
return degreePlanner;
@@ -133,6 +136,16 @@ export const getActiveTerms = createSelector(
},
);
+export const isCurrentTerm = (termCode: string) =>
+ createSelector(
+ getDegreePlannerState,
+ (state: DegreePlannerState) => {
+ const currentTermCode = state.activeTermCodes[0];
+
+ return termCode === currentTermCode;
+ },
+ );
+
export const isPastTerm = (termCode: string) =>
createSelector(
getDegreePlannerState,
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 82a5eaf8ed09a44b9e7b11fff22101e4b7752a57..72beb308bd081d452c672665c5b12994d4a581c1 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -48,7 +48,7 @@
*ngFor="let course of term.courses"
>
<div class="course-wrapper-inner">
- <cse-course-item [course]="course" type="course" [disabled]="(isPastTerm$ | async) || course.id === null"></cse-course-item>
+ <cse-course-item [course]="course" type="course" [disabled]="(isPastTerm$ | async) || course.id === null" [isPastTerm]="(isPastTerm$ | async)" [isCurrentTerm]="(isCurrentTerm$ | async)"></cse-course-item>
</div>
</div>
diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts
index d856aff287ce331f6a4152c51b44ce7e450986e2..f572ff334b5aae620bb3f57a1a2bd09dc07b35dc 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -25,7 +25,11 @@ import {
} from '@app/degree-planner/store/actions/ui.actions';
// Selectors
-import { getDropZones, isPastTerm } from '@app/degree-planner/store/selectors';
+import {
+ getDropZones,
+ isCurrentTerm,
+ isPastTerm,
+} from '@app/degree-planner/store/selectors';
// Services
import { SidenavService } from './../../core/service/sidenav.service';
@@ -46,6 +50,7 @@ export class TermContainerComponent implements OnInit {
@Input() term: PlannedTerm;
public dropZones$: Observable<String[]>;
public isPastTerm$: Observable<Boolean>;
+ public isCurrentTerm$: Observable<Boolean>;
constructor(
public dialog: MatDialog,
@@ -56,6 +61,9 @@ export class TermContainerComponent implements OnInit {
public ngOnInit() {
this.dropZones$ = this.store.pipe(select(getDropZones));
this.isPastTerm$ = this.store.pipe(select(isPastTerm(this.term.termCode)));
+ this.isCurrentTerm$ = this.store.pipe(
+ select(isCurrentTerm(this.term.termCode)),
+ );
}
public openAddSidenav(): void {