From eead960f44db4924ad09aee08d1215c4f482cf03 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Wed, 23 Jan 2019 13:06:56 -0600
Subject: [PATCH] Markup for Add Course to plan sidenav
---
src/app/app.component.html | 103 ++++++++++++++++++++++++++++++-------
src/app/app.component.ts | 25 ++++++++-
2 files changed, 109 insertions(+), 19 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2340aa7..c9921fb 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,21 +2,88 @@
<cse-header></cse-header>
<cse-navigation></cse-navigation>
</header>
-<main>
- <mat-sidenav-container class="example-container" hasBackdrop="false">
- <mat-sidenav #rightAddCourse2 mode="over" position="end">Drawer content 2
- </mat-sidenav>
- <mat-sidenav-content>
- <mat-sidenav-container>
- <mat-sidenav #rightAddCourse class="add-sidenav1"mode="over" position="end">
- <div>content
- <button mat-button class="btn-primary" (click)="rightAddCourse2.toggle()">Next side nav</button>
- </div>
- </mat-sidenav>
- <mat-sidenav-content>
- <router-outlet></router-outlet>
- </mat-sidenav-content>
- </mat-sidenav-container>
- </mat-sidenav-content>
- </mat-sidenav-container>
-</main>
+ <main>
+ <mat-sidenav-container class="example-container" hasBackdrop="false">
+ <mat-sidenav #rightAddCourse2 mode="over" position="end">
+ <mat-toolbar color="primary" class="dialog-toolbar">
+ <button mat-button class="close-btn" (click)="closeSidenav(rightAddCourse2)"><i class="material-icons">clear</i></button>
+ <span class="dialog-toolbar-title">Add course to degree plan</span>
+ </mat-toolbar>
+ Course Details
+ <!-- <cse-course-details></cse-course-details> -->
+ </mat-sidenav>
+ <mat-sidenav-content>
+ <mat-sidenav-container>
+ <mat-sidenav #rightAddCourse class="add-sidenav1" mode="over" position="end">
+ <mat-toolbar color="primary" class="dialog-toolbar">
+ <span class="dialog-toolbar-title">Course Search</span>
+ <button mat-button class="close-btn" (click)="closeSidenav(rightAddCourse)"><i class="material-icons">clear</i></button>
+ </mat-toolbar>
+ <div fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
+ <mat-form-field>
+ <mat-select placeholder="Term" required>
+ <mat-option *ngFor="let term of coursesData$ | async" [value]="term">
+ {{ term[0].termCode | getTermDescription }}
+ </mat-option>
+ <!-- <mat-option>Spring 2019</mat-option>
+ <mat-option>Summer 2019</mat-option>
+ <mat-option>Fall 2019</mat-option>
+ <mat-option>Spring 2020</mat-option>
+ <mat-option>Summer 2020</mat-option> -->
+ </mat-select>
+ <!-- <mat-error *ngIf="terms.hasError('required')">Please select term</mat-error> -->
+ </mat-form-field>
+
+ <mat-form-field>
+ <mat-select placeholder="Subject" [formControl]="" required>
+ <mat-option>Afro-American Studies</mat-option>
+ <mat-option>Agricultural and Applied Economics</mat-option>
+ <mat-option>Agroecology</mat-option>
+ <mat-option>Agronomy</mat-option>
+ <mat-option>Air Force Aerospace Studies</mat-option>
+ <mat-option>American Indian Studies</mat-option>
+ <mat-option>Anatomy</mat-option>
+ <mat-option>Anatomy & Physiology</mat-option>
+ </mat-select>
+ <!-- <mat-error *ngIf="terms.hasError('required')">Please select an existing subject or 'All'.</mat-error> -->
+ </mat-form-field>
+
+ <mat-form-field class="example-full-width">
+ <input matInput placeholder="Subject, number" value="">
+ </mat-form-field>
+ </div>
+
+ <div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3">
+ <h3 style="margin: 0px;">7 of 7 results</h3>
+ <span class="mat-button">Reset Search</span>
+ </div>
+
+ <div id="course-search-results" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
+ <mat-form-field>
+ <mat-select placeholder="Order by">
+ <mat-option>Relevance</mat-option>
+ <mat-option>Subject</mat-option>
+ <mat-option>Catalog Number</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <cse-course-item (click)="rightAddCourse2.toggle()"
+ style="padding: 8px;
+ border: solid 1px #FDFDFD;
+ background-color: #FDFDFD;
+ border-radius: 5px;
+ font-family: 'Helvetica Neue', Georgia, Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+ cursor: pointer;">
+ Chem 101
+ </cse-course-item>
+ </div>
+ </mat-sidenav>
+ <mat-sidenav-content>
+ <router-outlet></router-outlet>
+ </mat-sidenav-content>
+ </mat-sidenav-container>
+ </mat-sidenav-content>
+ </mat-sidenav-container>
+ </main>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d1da795..d67f0c7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,10 @@
import { SidenavService } from './core/service/sidenav.service';
+import { DataService } from './core/data.service';
import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSidenav } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+import { DegreePlannerDataService } from './core/service/degree-planner-data.service';
+// import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'cse-root',
@@ -14,8 +18,27 @@ export class AppComponent implements OnInit {
ngOnInit() {
this.sidenavService.setSidenav(this.rightAddCourse);
}
-}
+ coursesData$: any;
+ selectedDegreePlan: number;
+
+ @ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;
+ constructor(
+ private dataService: DataService,
+ private route: ActivatedRoute,
+ private sidenavService: SidenavService,
+ private degreePlannerDataSvc: DegreePlannerDataService) {
+ this.selectedDegreePlan = 520224;
+ this.coursesData$ = this.degreePlannerDataSvc.getDegreePlanDataById(this.selectedDegreePlan);
+ }
+ ngOnInit() {
+ this.sidenavService.setSidenav(this.rightAddCourse);
+ }
+
+ closeSidenav(id) {
+ return id.close();
+ }
+}
document.addEventListener('WebComponentsReady', function() {
const customEvent = new CustomEvent('myuw-login', {
detail: {
--
GitLab