From f138a5e16459bdb41740e932a978d308a2a662a0 Mon Sep 17 00:00:00 2001
From: "jvanboxtel@wisc.edu" <jvanboxtel@wisc.edu>
Date: Thu, 25 Oct 2018 16:11:00 -0500
Subject: [PATCH] ROENROLL-1212 working degree plan select
---
angular.json | 19 +++--
src/app/core/data.service.ts | 11 ++-
src/app/core/models/degree-plan.ts | 6 ++
.../degree-planner.component.html | 72 ++++++++++---------
...nent.css => degree-planner.component.scss} | 0
.../degree-planner.component.ts | 26 ++++---
.../degree-planner/degree-planner.module.ts | 4 +-
src/app/shared/shared.module.ts | 17 +++--
src/assets/sass/general.scss | 1 +
9 files changed, 96 insertions(+), 60 deletions(-)
create mode 100644 src/app/core/models/degree-plan.ts
rename src/app/degree-planner/{degree-planner.component.css => degree-planner.component.scss} (100%)
diff --git a/angular.json b/angular.json
index 9d3fdad..f69522a 100644
--- a/angular.json
+++ b/angular.json
@@ -28,12 +28,12 @@
"src/styles.css"
],
"scripts": [
- "./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
- "./node_modules/@myuw-web-components/myuw-app-styles/dist/myuw-app-styles.min.js",
- "./node_modules/@myuw-web-components/myuw-app-bar/dist/myuw-app-bar.min.js",
- "./node_modules/@myuw-web-components/myuw-drawer/dist/myuw-drawer.min.js",
- "./node_modules/@myuw-web-components/myuw-profile/dist/myuw-profile.min.js",
- "./node_modules/@myuw-web-components/myuw-help/dist/myuw-help.min.js"
+ "./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
+ "./node_modules/@myuw-web-components/myuw-app-styles/dist/myuw-app-styles.min.js",
+ "./node_modules/@myuw-web-components/myuw-app-bar/dist/myuw-app-bar.min.js",
+ "./node_modules/@myuw-web-components/myuw-drawer/dist/myuw-drawer.min.js",
+ "./node_modules/@myuw-web-components/myuw-profile/dist/myuw-profile.min.js",
+ "./node_modules/@myuw-web-components/myuw-help/dist/myuw-help.min.js"
]
},
"configurations": {
@@ -132,5 +132,10 @@
}
}
},
- "defaultProject": "course-search-enroll-fe"
+ "defaultProject": "course-search-enroll-fe",
+ "schematics": {
+ "@schematics/angular:component": {
+ "styleext": "scss"
+ }
+ }
}
\ No newline at end of file
diff --git a/src/app/core/data.service.ts b/src/app/core/data.service.ts
index 1ea2ea5..266eb4d 100644
--- a/src/app/core/data.service.ts
+++ b/src/app/core/data.service.ts
@@ -5,6 +5,7 @@ import { throwError, Observable } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { ConfigService } from './config.service';
import { Course } from './models/course';
+import { DegreePlan } from './models/degree-plan';
@Injectable()
export class DataService {
@@ -14,13 +15,17 @@ export class DataService {
this.plannerApiUrl = this.configService.apiPlannerUrl;
}
- getCourseData(): Observable<Course> {
- return this.http.get<Course>(this.plannerApiUrl + '/degreePlan/520224/courses')
+ getDegreePlans(): Observable<DegreePlan[]> {
+ return this.http.get<DegreePlan[]>(this.plannerApiUrl + '/degreePlan')
+ .pipe(catchError(this.errorHandler));
+ }
+
+ getDegreePlannerCourseData(): Observable<Course[]> {
+ return this.http.get<Course[]>(this.plannerApiUrl + '/degreePlan/520224/courses')
.pipe(catchError(this.errorHandler));
}
private errorHandler(error: Response) {
return throwError(error || 'Server Error');
}
-
}
diff --git a/src/app/core/models/degree-plan.ts b/src/app/core/models/degree-plan.ts
new file mode 100644
index 0000000..0238487
--- /dev/null
+++ b/src/app/core/models/degree-plan.ts
@@ -0,0 +1,6 @@
+export interface DegreePlan {
+ roadmapId: number;
+ pvi: string;
+ name: string;
+ primary: boolean;
+}
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index fc080c8..c47ad1c 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -1,38 +1,44 @@
-<div fxLayout="row" fxLayout.sm="column" fxLayoutGap="20px" fxLayoutAlign="space-between stretch" style="margin: 24px">
- <p>Degree Plans</p>
+<div fxLayout="row" fxLayout.sm="column" fxLayoutGap="20px" fxLayoutAlign="space-between" style="margin: 24px">
+ <mat-form-field>
+ <mat-select placeholder="Degree Plans" [disableOptionCentering]=true [value]="selectedDegreePlan">
+ <mat-option *ngFor="let degreePlan of degreePlans" [value]="degreePlan.roadmapId">
+ {{degreePlan.name}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
<button mat-button class="btn-primary">Check Plan (DARS)</button>
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
-
- <mat-expansion-panel class="year-container">
- <mat-expansion-panel-header>
- <mat-panel-title>
- Past: 2017-2018
- </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>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
- </div>
- <div style="background-color: #fff">
- <app-term-container></app-term-container>
- </div>
- </mat-card>
- <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
- </div>
- <div style="background-color: #fff">Courses go here....</div>
- </mat-card>
- <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
- </div>
- <div style="background-color: #fff">Courses go here....</div>
- </mat-card>
- </div>
- </mat-expansion-panel>
-
+ <mat-accordion>
+ <mat-expansion-panel class="year-container" [expanded]="true">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ Past: 2017-2018
+ </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>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
+ </div>
+ <div style="background-color: #fff">
+ <app-term-container></app-term-container>
+ </div>
+ </mat-card>
+ <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
+ <div fxLayout="row" fxLayoutAlign="space-between stretch">
+ <h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
+ </div>
+ <div style="background-color: #fff">Courses go here....</div>
+ </mat-card>
+ <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
+ <div fxLayout="row" fxLayoutAlign="space-between stretch">
+ <h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
+ </div>
+ <div style="background-color: #fff">Courses go here....</div>
+ </mat-card>
+ </div>
+ </mat-expansion-panel>
+ </mat-accordion>
</div>
\ No newline at end of file
diff --git a/src/app/degree-planner/degree-planner.component.css b/src/app/degree-planner/degree-planner.component.scss
similarity index 100%
rename from src/app/degree-planner/degree-planner.component.css
rename to src/app/degree-planner/degree-planner.component.scss
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 1ab6fe0..3bfb809 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -1,21 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
import { DataService } from '../core/data.service';
+import { DegreePlan } from '../core/models/degree-plan';
@Component({
selector: 'app-degree-planner',
templateUrl: './degree-planner.component.html',
- styleUrls: ['./degree-planner.component.css']
+ styleUrls: ['./degree-planner.component.scss']
})
-export class DegreePlannerComponent implements OnInit {
-
- constructor(private dataService: DataService) { }
+export class DegreePlannerComponent {
+ degreePlans: DegreePlan[];
+ selectedDegreePlan: number;
- ngOnInit() {
- this.getCourseData();
- }
+ constructor(private dataService: DataService) {
+ this.dataService.getDegreePlans()
+ .subscribe(data => {
+ this.degreePlans = data;
+ this.selectedDegreePlan = this.degreePlans[0].roadmapId;
+ });
- getCourseData(): void {
- this.dataService.getCourseData()
- .subscribe((data) => console.log('data: ', data));
+ // this.dataService.getDegreePlannerCourseData()
+ // .subscribe((data) => console.log('data: ', data));
}
}
diff --git a/src/app/degree-planner/degree-planner.module.ts b/src/app/degree-planner/degree-planner.module.ts
index b3cc02b..5226f29 100644
--- a/src/app/degree-planner/degree-planner.module.ts
+++ b/src/app/degree-planner/degree-planner.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
import { DegreePlannerComponent } from './degree-planner.component';
import { SharedModule } from '../shared/shared.module';
import { DegreePlannerRoutingModule } from './degree-planner.routing.module';
+import { TermContainerComponent } from './term-container/term-container.component';
@NgModule({
imports: [
@@ -11,7 +12,8 @@ import { DegreePlannerRoutingModule } from './degree-planner.routing.module';
DegreePlannerRoutingModule
],
declarations: [
- DegreePlannerComponent
+ DegreePlannerComponent,
+ TermContainerComponent
]
})
export class DegreePlannerModule { }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 189cdae..ea9c63d 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,8 +1,16 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule, MatMenuModule, MatIconModule, MatTabsModule, MatExpansionModule, MatCardModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
+import {
+ MatButtonModule,
+ MatMenuModule,
+ MatIconModule,
+ MatTabsModule,
+ MatExpansionModule,
+ MatCardModule,
+ MatSelectModule } from '@angular/material';
+
import { TermContainerComponent } from '../degree-planner/term-container/term-container.component';
const modules = [
@@ -15,14 +23,13 @@ const modules = [
MatTabsModule,
MatExpansionModule,
MatCardModule,
+ MatSelectModule,
FlexLayoutModule
];
@NgModule({
imports: [ modules ],
- exports: [ modules, TermContainerComponent ],
- declarations: [
- TermContainerComponent
- ],
+ exports: [ modules ],
+ declarations: [ ],
})
export class SharedModule { }
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 97b6720..f43bc86 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -1,4 +1,5 @@
body {
+ background-color: #ccc;
margin: 0px;
}
--
GitLab