From 3bb455aaed456d6004acca345f5e66023579df4e Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Mon, 5 Nov 2018 08:57:47 -0600
Subject: [PATCH] group terms inside year container
---
.../degree-planner/degree-planner.component.html | 15 +++------------
.../degree-planner/degree-planner.component.scss | 11 +----------
.../degree-planner/degree-planner.component.ts | 9 +++++++++
.../term-container/term-container.component.html | 10 +++++++---
.../term-container/term-container.component.scss | 8 ++++++++
.../term-container/term-container.component.ts | 9 +++++----
6 files changed, 33 insertions(+), 29 deletions(-)
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 35be220..21b2c83 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -25,22 +25,13 @@
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
<mat-accordion>
- <mat-expansion-panel *ngFor="let term of terms" class="year-container"> <!--[expanded]="true"-->
+ <mat-expansion-panel *ngFor="let term of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
<mat-expansion-panel-header>
<mat-panel-title>
- {{ term.academicYear | academicYearState }}
+ {{ term.key | academicYearState }}
</mat-panel-title>
</mat-expansion-panel-header>
- <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
- <mat-card class="term-container" fxFlex="33%">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold">Credits: 13</p>
- </div>
- <div style="background-color: #fff">
- <app-term-container></app-term-container>
- </div>
- </mat-card>
- </div>
+ <app-term-container [terms]="term.value"></app-term-container>
</mat-expansion-panel>
</mat-accordion>
</div>
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index 97d746b..58ac125 100644
--- a/src/app/degree-planner/degree-planner.component.scss
+++ b/src/app/degree-planner/degree-planner.component.scss
@@ -3,16 +3,7 @@
}
mat-sidenav {
- width: 280px;
-}
-
-.term-container {
- background-color: #E1E1E1;
-}
-
-.term-container h2 {
- color: #2879A8;
- font-weight: 400;
+ width: 340px;
}
#menu-toggle-btn {
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 210c854..ec091ef 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -16,6 +16,7 @@ export class DegreePlannerComponent {
degreePlanCourses: Course[];
selectedDegreePlan: number;
terms: Term[];
+ termsByAcademicYear: Object;
constructor(private dataService: DataService) {
this.dataService.getDegreePlans()
@@ -32,6 +33,14 @@ export class DegreePlannerComponent {
this.dataService.getTerms()
.subscribe(terms => {
this.terms = terms;
+ this.termsByAcademicYear = {};
+ this.terms.forEach(term => {
+ if (this.termsByAcademicYear[term.academicYear]) {
+ this.termsByAcademicYear[term.academicYear].push(term);
+ } else {
+ this.termsByAcademicYear[term.academicYear] = [term];
+ }
+ });
});
}
}
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 bd07330..06c3b2e 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,3 +1,7 @@
-<p>
- term-container works!
-</p>
+<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
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 e69de29..bfcdc11 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/src/app/degree-planner/term-container/term-container.component.scss
@@ -0,0 +1,8 @@
+.term-container {
+ background-color: #E1E1E1;
+}
+
+.term-container h2 {
+ color: #2879A8;
+ font-weight: 400;
+}
\ 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 da33d66..ca27985 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -1,15 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Term } from '../../core/models/term';
@Component({
selector: 'app-term-container',
templateUrl: './term-container.component.html',
styleUrls: ['./term-container.component.scss']
})
+
export class TermContainerComponent implements OnInit {
+ @Input() terms: Term[];
constructor() { }
- ngOnInit() {
- }
-
+ ngOnInit() { }
}
--
GitLab