From 1859ee572582f8b9654f3595c0b16da978d04268 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Thu, 21 Feb 2019 16:38:01 -0600
Subject: [PATCH] Display cart courses
---
.../course-item/course-item.component.html | 87 ++++++++++---
.../term-container.component.html | 118 +++++++++++++++---
.../term-container.component.scss | 3 +
.../term-container.component.ts | 15 ++-
4 files changed, 187 insertions(+), 36 deletions(-)
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 2f06f3b..a42de2a 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,43 +1,92 @@
-<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 || ' ' }}</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>
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 100368f..7d2f4f6 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,6 +1,10 @@
<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>
diff --git a/src/app/degree-planner/term-container/term-container.component.scss b/src/app/degree-planner/term-container/term-container.component.scss
index 6429a25..7161f94 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/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;
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 cb1da4f..d0fde03 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/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(),
--
GitLab