Skip to content
Snippets Groups Projects
Commit 017ac528 authored by Scott Berg's avatar Scott Berg
Browse files

Update degree planner to display all terms and courses in a plan.

parent d076a468
No related branches found
No related tags found
No related merge requests found
Pipeline #29006 failed
......@@ -34,14 +34,14 @@
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
<mat-accordion>
<mat-accordion multi="true">
<mat-expansion-panel *ngFor="let year of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
<mat-expansion-panel-header>
<mat-panel-title>
{{ termsByAcademicYear[year.key].year | academicYearState }}
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" class="term-container-wrapper">
<cse-term-container
*ngFor="let term of termsByAcademicYear[year.key].terms | keyvalue"
[term]="termsByAcademicYear[year.key].terms[term.key]"
......
......@@ -28,25 +28,14 @@ export class DegreePlannerComponent {
this.dataService.getDegreePlannerCourseData()
.subscribe(degreePlanCourses => {
this.degreePlanCourses = degreePlanCourses;
if (this.termsByAcademicYear) {
this.updateCourses();
}
});
this.dataService.getTerms()
.subscribe(terms => {
this.terms = terms;
// Create an empty object to store term data in
this.termsByAcademicYear = {};
// Loop through each term
this.terms.forEach(term => {
for (const course of degreePlanCourses) {
// Get the 3 digit year code and 1 digit term code
const year = term.termCode.substring(0, 3);
const termCode = term.termCode.substring(3);
const year = course.termCode.substring(0, 3);
const termCode = course.termCode.substring(3);
// If this year does not exsist in the "termsByAcademicYear" create a new year
// This year has placeholder data for each term in the year
if (!this.termsByAcademicYear[year]) {
this.termsByAcademicYear[year] = {
year: year,
......@@ -58,15 +47,12 @@ export class DegreePlannerComponent {
};
}
// Overwrite the default term with the current term
this.termsByAcademicYear[year].terms[termCode] = { ...term, courses: [] };
});
if (this.degreePlanCourses) {
this.updateCourses();
this.termsByAcademicYear[year].terms[termCode].courses.push(course);
}
});
this.dataService.getTerms()
.subscribe(terms => {});
}
updateCourses() {
......@@ -78,8 +64,6 @@ export class DegreePlannerComponent {
this.termsByAcademicYear[yearCode].terms[termCode].courses.push(course);
}
}
console.log(this.termsByAcademicYear);
}
getCoursesByTerm(termCode) {
......@@ -101,7 +85,9 @@ export class DegreePlannerComponent {
return false;
}
const termCodes = ['favoriteCourse-dropZone'];
const termCodes = [
'favoriteCourse-dropZone'
];
for (const yearCode in this.termsByAcademicYear) {
if (this.termsByAcademicYear[yearCode]) {
......@@ -109,11 +95,13 @@ export class DegreePlannerComponent {
for (const termKey in year.terms) {
if (year.terms[termKey]) {
const term = year.terms[termKey];
termCodes.push(term.termCode);
termCodes.push('term-' + term.termCode);
}
}
}
}
// console.log(termCodes);
return termCodes;
}
......
......@@ -4,7 +4,7 @@
</div>
<div
cdkDropList
id="{{term.termCode}}"
id="term-{{term.termCode}}"
[cdkDropListData]="courses"
[cdkDropListConnectedTo]="termCodes"
class="course-list"
......
......@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
import { Term } from '../../core/models/term';
import { Course } from '../../core/models/course';
import { DataService } from '../../core/data.service';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'cse-term-container',
......@@ -34,14 +34,15 @@ export class TermContainerComponent {
}
drop(event: CdkDragDrop<string[]>) {
const newTermCode = event.container.id.substr(5, 4);
if (event.previousContainer.id === 'favoriteCourse-dropZone' && event.container.id !== 'favoriteCourse-dropZone') {
// If moving from favorites to term
this.dataService.addCourse(event.item.data.subjectCode, event.item.data.courseId, event.container.id)
this.dataService.addCourse(event.item.data.subjectCode, event.item.data.courseId, newTermCode)
.subscribe(data => {
const yearCode = event.container.id.substring(0, 3);
const termCode = event.container.id.substring(3);
const yearCode = newTermCode.substring(0, 3);
const termCode = newTermCode.substring(3);
this.termsByAcademicYear[yearCode].terms[termCode].courses[event.currentIndex] = data;
});
......@@ -63,7 +64,7 @@ export class TermContainerComponent {
event.currentIndex);
// Tell the API this course updated
this.dataService.updateCourseTerm(event.item.data.id, event.container.id)
this.dataService.updateCourseTerm(event.item.data.id, newTermCode)
.subscribe( data => {
// TODO Handle errors
});
......
......@@ -86,3 +86,27 @@ body {
.no-courses {
padding: 20px 10px;
}
/*
Note: The follow styles need to be in the global styles file
and they need !important.
The following styles switch the display of the terms hidden within the
mat-expansion-panel. By default they are always displaying flex, causing
the drop zone hitbox to mess up and register terms that are in closed panels.
The !important is needed to overwrite the default styles applied by the mat-expansion-panel
and these styles need to be in this file because the mat-expansion-panel's body is a seperate
component and it's styles are encapsulated and cannot be styled directly from one of our components
*/
.term-container-wrapper {
display: none !important;
}
.mat-expanded, .ng-animating {
.term-container-wrapper {
display: flex !important;
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment