ROENROLL-1212 working degree plan select

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

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');
 	}
-
 }

src/app/core/models/degree-plan.ts

+export interface DegreePlan {
+	roadmapId: number;
+	pvi: string;
+	name: string;
+	primary: boolean;
+}

src/app/degree-planner/degree-planner.component.html

-<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

src/app/degree-planner/degree-planner.component.ts

-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));
 	}
 }

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 { }

src/app/shared/shared.module.ts

 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 { }

src/assets/sass/general.scss

 body {
+    background-color: #ccc;
     margin: 0px;
 }