From 620676bc85cd7d7ab62a1eea34163720b96b25a5 Mon Sep 17 00:00:00 2001
From: Scott Berg <scott.berg@wisc.edu>
Date: Wed, 7 Nov 2018 19:12:27 +0000
Subject: [PATCH] Refactor Term Container and Course Item
---
.../degree-planner.component.html | 8 ++++--
.../degree-planner.component.ts | 11 ++++++--
.../degree-planner/degree-planner.module.ts | 2 ++
.../course-item/course-item.component.html | 6 ++--
.../course-item/course-item.component.ts | 16 +++++------
.../degree-planner/shared/shared.module.ts | 2 +-
.../term-container.component.html | 15 +++++-----
.../term-container.component.ts | 28 +++++++++++++++----
src/app/shared/academic-year-state.pipe.ts | 27 ++++++++++++------
9 files changed, 75 insertions(+), 40 deletions(-)
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 21b2c83..43fe4e4 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -25,13 +25,15 @@
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
<mat-accordion>
- <mat-expansion-panel *ngFor="let term of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
+ <mat-expansion-panel *ngFor="let year of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
<mat-expansion-panel-header>
<mat-panel-title>
- {{ term.key | academicYearState }}
+ {{ termsByAcademicYear[year.key].year | academicYearState }}
</mat-panel-title>
</mat-expansion-panel-header>
- <app-term-container [terms]="term.value"></app-term-container>
+ <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>
+ </div>
</mat-expansion-panel>
</mat-accordion>
</div>
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index ec091ef..fb67e7c 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -35,10 +35,15 @@ export class DegreePlannerComponent {
this.terms = terms;
this.termsByAcademicYear = {};
this.terms.forEach(term => {
- if (this.termsByAcademicYear[term.academicYear]) {
- this.termsByAcademicYear[term.academicYear].push(term);
+ const year = term.termCode.substring(0, 3);
+
+ if (this.termsByAcademicYear[year]) {
+ this.termsByAcademicYear[year].terms.push(term);
} else {
- this.termsByAcademicYear[term.academicYear] = [term];
+ this.termsByAcademicYear[year] = {
+ year: year,
+ terms: [term]
+ };
}
});
});
diff --git a/src/app/degree-planner/degree-planner.module.ts b/src/app/degree-planner/degree-planner.module.ts
index 3339978..640702d 100644
--- a/src/app/degree-planner/degree-planner.module.ts
+++ b/src/app/degree-planner/degree-planner.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DegreePlannerComponent } from './degree-planner.component';
import { SharedModule } from '../shared/shared.module';
+import {SharedDegreePlannerModule} from './shared/shared.module';
import { DegreePlannerRoutingModule } from './degree-planner.routing.module';
import { TermContainerComponent } from './term-container/term-container.component';
import { SidenavMenuItemComponent } from './sidenav-menu-item/sidenav-menu-item.component';
@@ -11,6 +12,7 @@ import { FavoritesContainerComponent } from './favorites-container/favorites-con
imports: [
CommonModule,
SharedModule,
+ SharedDegreePlannerModule,
DegreePlannerRoutingModule
],
declarations: [
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 5111a44..d803ebc 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,10 +1,10 @@
<div class="course-item">
<div class="course-row course-info">
- <p class="course-number">CHEM 641</p>
- <p class="course-credits">3 Cr</p>
+ <p class="course-number">{{course.subjectCode}} {{course.catalogNumber}}</p>
+ <p class="course-credits">{{course.credits}} Cr</p>
</div>
<div class="course-row">
- <p class="course-title">Course Title Here</p>
+ <p class="course-title">{{course.title}}</p>
</div>
</div>
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 35ecea8..450b9ed 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
@@ -1,16 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
import { Course } from '../../../core/models/course';
@Component({
- selector: 'app-course-item',
- templateUrl: './course-item.component.html',
- styleUrls: ['./course-item.component.scss']
+ selector: 'app-course-item',
+ templateUrl: './course-item.component.html',
+ styleUrls: ['./course-item.component.scss']
})
-export class CourseItemComponent implements OnInit {
- course: Course;
+export class CourseItemComponent {
+ @Input() course: Course;
- constructor() { }
-
- ngOnInit() { }
+ constructor() {}
}
diff --git a/src/app/degree-planner/shared/shared.module.ts b/src/app/degree-planner/shared/shared.module.ts
index 4cf44a3..80ead02 100644
--- a/src/app/degree-planner/shared/shared.module.ts
+++ b/src/app/degree-planner/shared/shared.module.ts
@@ -8,4 +8,4 @@ import { CourseItemComponent } from './course-item/course-item.component';
declarations: [ CourseItemComponent ]
})
-export class SharedModule { }
+export class SharedDegreePlannerModule { }
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 06c3b2e..3315e8d 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,7 +1,8 @@
-<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
- <mat-card class="term-container" *ngFor="let term of terms" fxFlex="33%">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold">Credits: 13</p>
- </div>
- </mat-card>
-</div>
\ No newline at end of file
+<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>
+ </div>
+ <div>
+ <app-course-item *ngFor="let course of getCoursesByTerm(term.termCode)" [course]="course"></app-course-item>
+ </div>
+</mat-card>
\ 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 ca27985..a644fcc 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -1,5 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
+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',
@@ -7,10 +9,26 @@ import { Term } from '../../core/models/term';
styleUrls: ['./term-container.component.scss']
})
-export class TermContainerComponent implements OnInit {
- @Input() terms: Term[];
+export class TermContainerComponent {
+ @Input() term: Term;
+ terms: any[];
+ courses: Course[];
- constructor() { }
+ constructor(private dataService: DataService) {
+ this.dataService.getDegreePlannerCourseData()
+ .subscribe(degreePlanCourses => {
+ this.terms = degreePlanCourses;
+ });
+ }
- ngOnInit() { }
+ getCoursesByTerm( termCode ) {
+ if (this.terms) {
+ for ( const term of this.terms ) {
+ if (term.termCode === termCode) {
+ return term.courses;
+ }
+ }
+ }
+ return [];
+ }
}
diff --git a/src/app/shared/academic-year-state.pipe.ts b/src/app/shared/academic-year-state.pipe.ts
index c333a74..047db3a 100644
--- a/src/app/shared/academic-year-state.pipe.ts
+++ b/src/app/shared/academic-year-state.pipe.ts
@@ -6,19 +6,28 @@ import { Pipe, PipeTransform } from '@angular/core';
export class AcademicYearStatePipe implements PipeTransform {
- transform(academicYear: string, args?: any): any {
- const fullAcademicYear = academicYear.replace('-', ' - 20');
- const startYear = parseInt(fullAcademicYear.substring(0, 4), 10);
- const currentYear = (new Date()).getFullYear();
+ transform(yearCode: string, args?: any): any {
+ // Get the century digit
+ const century = parseInt(yearCode.substring(0, 1), 0) + 19;
- if (startYear === currentYear) {
- return `Current: ${fullAcademicYear}`;
+ // Get the year
+ const academicYear = parseInt(yearCode.substring(1), 0);
+
+ const endYear = (century * 100) + academicYear;
+ const startYear = endYear - 1;
+
+ const yearString = `${startYear} - ${endYear}`;
+
+ const currentYear = new Date().getFullYear();
+
+ if (currentYear === (startYear)) {
+ return `Current: ${yearString}`;
} else if (startYear > currentYear) {
- return `Future: ${fullAcademicYear}`;
+ return `Future: ${yearString}`;
} else if (startYear < currentYear) {
- return `Past: ${fullAcademicYear}`;
+ return `Past: ${yearString}`;
}
- return fullAcademicYear;
+ return yearString;
}
}
--
GitLab