From 3a47a7b1d0ef748aeba0e439ad9c7aaf805a3b84 Mon Sep 17 00:00:00 2001
From: Scott Berg <scott.berg@wisc.edu>
Date: Thu, 8 Nov 2018 14:17:34 +0000
Subject: [PATCH] Move course API call to degree planner component
---
.../degree-planner.component.html | 2 +-
.../degree-planner.component.ts | 14 ++++++++++++-
.../course-item/course-item.component.html | 15 ++++++++++++-
.../course-item/course-item.component.scss | 13 ++++++++++++
.../course-item/course-item.component.ts | 1 +
.../sidenav-menu-item.component.html | 2 +-
.../sidenav-menu-item.component.scss | 17 +++++++--------
.../term-container.component.html | 5 +++--
.../term-container.component.scss | 9 ++++++++
.../term-container.component.ts | 21 ++-----------------
src/assets/sass/general.scss | 8 +++++++
11 files changed, 72 insertions(+), 35 deletions(-)
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 43fe4e4..2108de7 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -32,7 +32,7 @@
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
- <app-term-container *ngFor="let term of termsByAcademicYear[year.key].terms" [term]="term" fxFlex="33%"></app-term-container>
+ <app-term-container *ngFor="let term of termsByAcademicYear[year.key].terms" [term]="term" [courses]="getCoursesByTerm(term.termCode)" fxFlex="33%"></app-term-container>
</div>
</mat-expansion-panel>
</mat-accordion>
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index fb67e7c..7365f5e 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -13,7 +13,7 @@ import { Term } from '../core/models/term';
export class DegreePlannerComponent {
degreePlans: DegreePlan[];
- degreePlanCourses: Course[];
+ degreePlanCourses: any[];
selectedDegreePlan: number;
terms: Term[];
termsByAcademicYear: Object;
@@ -48,4 +48,16 @@ export class DegreePlannerComponent {
});
});
}
+
+ getCoursesByTerm(termCode) {
+ if (!this.degreePlanCourses) {
+ return false;
+ }
+
+ for ( const term of this.degreePlanCourses ) {
+ if (term.termCode === termCode) {
+ return term.courses;
+ }
+ }
+ }
}
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 d803ebc..c176141 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,6 +1,19 @@
<div class="course-item">
<div class="course-row course-info">
- <p class="course-number">{{course.subjectCode}} {{course.catalogNumber}}</p>
+ <div class="icon-number-wrapper">
+ <p class="course-number">
+ {{course.subjectCode}} {{course.catalogNumber}}
+ </p>
+ <div [ngSwitch]="status">
+ <i *ngSwitchCase="'complete'" class="material-icons complete-icon">check_circle</i>
+ <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>
+ <i *ngSwitchCase="'likely-offered'" class="material-icons help-icon">help</i>
+ <i *ngSwitchCase="'not-offered'" class="material-icons not-offered">remove</i>
+ <i *ngSwitchCase="'favorite'" class="material-icons favorite-icon">favorite_border</i>
+ </div>
+ </div>
<p class="course-credits">{{course.credits}} Cr</p>
</div>
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 0f7bbb4..b9a4cad 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
@@ -57,4 +57,17 @@
.course-number {
font-weight: bold;
+ font-size: 16px;
+ display: inline-block;
+}
+
+.material-icons {
+ font-size: 16px;
+ margin-left: 10px;
+ padding-top: 6px;
+}
+
+.icon-number-wrapper {
+ display: flex;
+ align-items: center;
}
\ No newline at end of file
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 450b9ed..8eb107b 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
@@ -8,6 +8,7 @@ import { Course } from '../../../core/models/course';
})
export class CourseItemComponent {
@Input() course: Course;
+ @Input() status: string;
constructor() {}
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 eac09fe..2e4babd 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
@@ -27,7 +27,7 @@
<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 help-icon">help</i> Course is likely to be offered based on course history</li>
- <li><span class="not-offered">―</span>Course no longer offered</li>
+ <li><i class="material-icons not-offered">remove</i>Course no longer offered</li>
<li><i class="material-icons favorite-icon">favorite_border</i> Course is a favorite</li>
</ul>
</mat-expansion-panel>
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss
index bd35823..8b5c378 100644
--- a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss
@@ -39,18 +39,15 @@
margin-top: 0px;
border-top: 1px solid rgba(0, 0, 0, 0.54);
li {
- padding-bottom: 12px;
position: relative;
- padding-left: 2.6em;
+ display: flex;
+ align-items: center;
+ padding-bottom: 12px;
+ padding-left: 1em;
+
.material-icons {
- position: absolute;
- left: 2px;
- top: -2px;
- }
- .not-offered {
- position: absolute;
- top: 0;
- left: 7px;
+ margin-right: 8px;
+ font-size: 16px;
}
}
}
\ No newline at end of file
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 3315e8d..02d8751 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,8 +1,9 @@
<mat-card class="term-container">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold">Credits: 13</p>
+ <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold credits">Credits: 13</p>
</div>
<div>
- <app-course-item *ngFor="let course of getCoursesByTerm(term.termCode)" [course]="course"></app-course-item>
+ <app-course-item *ngFor="let course of courses" [course]="course" [status]="'complete'"></app-course-item>
+ <p *ngIf="!courses" class="no-courses text-center semi-bold">No Courses Taken</p>
</div>
</mat-card>
\ No newline at end of file
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 bfcdc11..8ea8ec9 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/src/app/degree-planner/term-container/term-container.component.scss
@@ -5,4 +5,13 @@
.term-container h2 {
color: #2879A8;
font-weight: 400;
+}
+
+.credits,
+.term-container h2 {
+ margin: 0 0 20px 0;
+}
+
+.no-courses {
+ padding: 20px 10px;
}
\ No newline at end of file
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 a644fcc..1c4e348 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -1,7 +1,6 @@
import { Component, Input } from '@angular/core';
import { Term } from '../../core/models/term';
import { Course } from '../../core/models/course';
-import { DataService } from '../../core/data.service';
@Component({
selector: 'app-term-container',
@@ -11,24 +10,8 @@ import { DataService } from '../../core/data.service';
export class TermContainerComponent {
@Input() term: Term;
+ @Input() courses: Course[];
terms: any[];
- courses: Course[];
- constructor(private dataService: DataService) {
- this.dataService.getDegreePlannerCourseData()
- .subscribe(degreePlanCourses => {
- this.terms = degreePlanCourses;
- });
- }
-
- getCoursesByTerm( termCode ) {
- if (this.terms) {
- for ( const term of this.terms ) {
- if (term.termCode === termCode) {
- return term.courses;
- }
- }
- }
- return [];
- }
+ constructor() {}
}
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index b627189..7ed1e86 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -9,6 +9,14 @@ body {
text-align: right;
}
+.text-left {
+ text-align: left;
+}
+
+.text-center {
+ text-align: center;
+}
+
.semi-bold {
font-weight: 700;
}
--
GitLab