From e43266cc2a1bb898c4f94b38ff390da5c8807a60 Mon Sep 17 00:00:00 2001
From: "jvanboxtel@wisc.edu" <jvanboxtel@wisc.edu>
Date: Wed, 12 Dec 2018 11:09:14 -0600
Subject: [PATCH] Adds working sidenav for add course to plan
---
package.json | 2 +-
src/app/app.component.html | 21 ++++-
src/app/app.component.scss | 3 +
src/app/app.component.ts | 13 ++-
src/app/app.module.ts | 3 +-
src/app/core/service/sidenav.service.ts | 24 +++++
.../degree-planner.component.html | 91 ++++++++-----------
.../term-container.component.html | 78 ++++++++--------
.../term-container.component.ts | 7 +-
9 files changed, 140 insertions(+), 102 deletions(-)
create mode 100644 src/app/core/service/sidenav.service.ts
diff --git a/package.json b/package.json
index ab034c3..dc1083a 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"version": "0.0.1",
"scripts": {
"ng": "ng",
- "start": "ng serve --proxy-config proxy.json",
+ "start": "ng serve --proxy-config proxy.json --open",
"build": "ng build",
"test": " ng test --browsers ChromeHeadless",
"test-coverage": " ng test --browsers ChromeHeadless --watch=false --code-coverage",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0485671..448fd24 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,20 @@
<cse-header></cse-header>
<cse-navigation></cse-navigation>
-<main class="uw-row">
- <div class="uw-col">
- <router-outlet></router-outlet>
- </div>
+<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>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..117d812 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.add-sidenav1 {
+ width:380px;
+}
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5a968ee..4501fdf 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,20 @@
-import { Component } from '@angular/core';
+import { SidenavService } from './core/service/sidenav.service';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { MatSidenav } from '@angular/material';
@Component({
selector: 'cse-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
-export class AppComponent { }
+export class AppComponent implements OnInit {
+ @ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;
+ constructor(private sidenavService: SidenavService) { }
+
+ ngOnInit() {
+ this.sidenavService.setSidenav(this.rightAddCourse);
+ }
+}
document.addEventListener('WebComponentsReady', function() {
const customEvent = new CustomEvent('myuw-login', {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f15c253..d4bcc51 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { AppComponent } from './app.component';
import { CoreModule } from '@app/core/core.module';
import { SharedModule } from '@app/shared/shared.module';
import { HeaderComponent } from './core/header/header.component';
+import { SidenavService } from './core/service/sidenav.service';
@NgModule({
imports: [
@@ -22,7 +23,7 @@ import { HeaderComponent } from './core/header/header.component';
AppComponent,
HeaderComponent
],
- providers: [],
+ providers: [ SidenavService ],
bootstrap: [ AppComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
diff --git a/src/app/core/service/sidenav.service.ts b/src/app/core/service/sidenav.service.ts
new file mode 100644
index 0000000..12ddbf0
--- /dev/null
+++ b/src/app/core/service/sidenav.service.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+
+@Injectable()
+export class SidenavService {
+ private sidenav: MatSidenav;
+
+
+ public setSidenav(sidenav: MatSidenav) {
+ this.sidenav = sidenav;
+ }
+
+ public open() {
+ return this.sidenav.open();
+ }
+
+ public close() {
+ return this.sidenav.close();
+ }
+
+ public toggle(): void {
+ this.sidenav.toggle();
+ }
+}
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 49eca23..6e05000 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -1,63 +1,46 @@
<mat-sidenav-container id="plans-container">
<!-- Menu side nav -->
- <mat-sidenav #rightSideNav position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
+ <mat-sidenav #rightMenu position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
<cse-sidenav-menu-item [favoriteDropZone]="getTermDropZone()" [subjectsMap]="subjectsMap"></cse-sidenav-menu-item>
</mat-sidenav>
- <!-- Add course sidenav -->
- <mat-sidenav #leftSideNav position="start" mode="side" [opened]="false">
- <div>sidenav 2</div>
- <button mat-button class="btn-primary" (click)="leftSideNav2.toggle()">Three</button>
- </mat-sidenav>
-
<mat-sidenav-content>
- <mat-sidenav-container hasBackdrop="false">
- <!-- Secondary side nav used after #leftSideNav is shown -->
- <mat-sidenav #leftSideNav2 position="start" mode="over" [opened]="false">
- <div>sidenav 3</div>
- </mat-sidenav>
-
- <mat-sidenav-content>
- <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px" fxLayoutAlign="start center" style="margin: 24px 0px 24px 24px;">
- <mat-form-field>
- <mat-select placeholder="Degree Plans" [disableOptionCentering]="true" [(ngModel)]="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>
- <button id="menu-toggle-btn" mat-button (click)="rightSideNav.toggle()">
- <i *ngIf="rightSideNav.opened" class="material-icons">chevron_right</i>
- <i *ngIf="!rightSideNav.opened" class="material-icons">chevron_left</i>
- </button>
- </div>
+ <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px" fxLayoutAlign="start center" style="margin: 24px 0px 24px 24px;">
+ <mat-form-field>
+ <mat-select placeholder="Degree Plans" [disableOptionCentering]="true" [(ngModel)]="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>
+ <button id="menu-toggle-btn" mat-button (click)="rightMenu.toggle()">
+ <i *ngIf="rightMenu.opened" class="material-icons">chevron_right</i>
+ <i *ngIf="!rightMenu.opened" class="material-icons">chevron_left</i>
+ </button>
+ </div>
- <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
- <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" class="term-container-wrapper">
- <cse-term-container
- *ngFor="let term of termsByAcademicYear[year.key].terms | keyvalue"
- [term]="termsByAcademicYear[year.key].terms[term.key]"
- [courses]="termsByAcademicYear[year.key].terms[term.key]['courses']"
- [termCodes]="getTermDropZone()"
- [termsByAcademicYear]="termsByAcademicYear"
- [subjectsMap]="subjectsMap"
- fxFlex="33%"
- ></cse-term-container>
- </div>
- </mat-expansion-panel>
- </mat-accordion>
- </div>
- </mat-sidenav-content>
-
- </mat-sidenav-container>
+ <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
+ <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" class="term-container-wrapper">
+ <cse-term-container
+ *ngFor="let term of termsByAcademicYear[year.key].terms | keyvalue"
+ [term]="termsByAcademicYear[year.key].terms[term.key]"
+ [courses]="termsByAcademicYear[year.key].terms[term.key]['courses']"
+ [termCodes]="getTermDropZone()"
+ [termsByAcademicYear]="termsByAcademicYear"
+ [subjectsMap]="subjectsMap"
+ fxFlex="33%"
+ ></cse-term-container>
+ </div>
+ </mat-expansion-panel>
+ </mat-accordion>
+ </div>
</mat-sidenav-content>
-
</mat-sidenav-container>
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 23f15eb..f7cac00 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,41 +1,41 @@
<mat-card class="term-container">
- <div class="term-inner">
- <div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
- <h2>{{ term.termCode | getTermDescription }}</h2>
- <div fxLayout="row" fxLayoutAlign="end center">
- <p class="text-right semi-bold credits">{{getTotalCredits()}} Cr</p>
- <button mat-icon-button>
- <mat-icon aria-label="Open dialog with notes in this term" class="add-note-icon" (click)="openNotesDialog(false, term.termCode)" matTooltip="Add Note" matTooltipPosition="above">note_add</mat-icon>
- <!-- <mat-icon aria-label="Open dialog with notes in this term" class="add-note-icon" (click)="openNotesDialog(false, term.termCode)" matTooltip="Edit Note" matTooltipPosition="above">insert_drive_file</mat-icon> -->
- </button>
- </div>
- </div>
- <div
- cdkDropList
- id="term-{{term.termCode}}"
- [cdkDropListData]="courses"
- [cdkDropListConnectedTo]="termCodes"
- class="course-list"
- (cdkDropListDropped)="drop($event)">
- <ng-container *ngFor="let note of notes | async">
- <div *ngIf="note.termCode == term.termCode" class="note-item" (click)="openNotesDialog(note, term.termCode)" >
- <p class="semi-bold">Note</p>
- <p class="note-excerpt">{{ note.note }}</p>
- </div>
- </ng-container>
- <div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of courses" cdkDrag>
- <div class="course-wrapper-inner">
- <cse-course-item
- [course]="course"
- (click)="openCourseDetailsDialog(course)"
- [status]="'in-progress'"
- [subject]="subjectsMap[course.subjectCode]"
- ></cse-course-item>
- </div>
- </div>
- </div>
- </div>
- <div class="add-new-wrapper">
- <button mat-raised-button>+ Add Course</button>
- </div>
+ <div class="term-inner">
+ <div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
+ <h2>{{ term.termCode | getTermDescription }}</h2>
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <p class="text-right semi-bold credits">{{getTotalCredits()}} Cr</p>
+ <button mat-icon-button>
+ <mat-icon aria-label="Open dialog with notes in this term" class="add-note-icon" (click)="openNotesDialog(false, term.termCode)" matTooltip="Add Note" matTooltipPosition="above">note_add</mat-icon>
+ <!-- <mat-icon aria-label="Open dialog with notes in this term" class="add-note-icon" (click)="openNotesDialog(false, term.termCode)" matTooltip="Edit Note" matTooltipPosition="above">insert_drive_file</mat-icon> -->
+ </button>
+ </div>
+ </div>
+ <div
+ cdkDropList
+ id="term-{{term.termCode}}"
+ [cdkDropListData]="courses"
+ [cdkDropListConnectedTo]="termCodes"
+ class="course-list"
+ (cdkDropListDropped)="drop($event)">
+ <ng-container *ngFor="let note of notes | async">
+ <div *ngIf="note.termCode == term.termCode" class="note-item" (click)="openNotesDialog(note, term.termCode)" >
+ <p class="semi-bold">Note</p>
+ <p class="note-excerpt">{{ note.note }}</p>
+ </div>
+ </ng-container>
+ <div class="course-wrapper" [cdkDragData]="course" *ngFor="let course of courses" cdkDrag>
+ <div class="course-wrapper-inner">
+ <cse-course-item
+ [course]="course"
+ (click)="openCourseDetailsDialog(course)"
+ [status]="'in-progress'"
+ [subject]="subjectsMap[course.subjectCode]"
+ ></cse-course-item>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="add-new-wrapper">
+ <button mat-raised-button (click)="openAddSidenav()">+ Add Course</button>
+ </div>
</mat-card>
\ 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 3fd90d1..474465d 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, ChangeDetectorRef } from '@angular/core';
+import { SidenavService } from './../../core/service/sidenav.service';
+import { Component, Input, ChangeDetectorRef, ViewChild } from '@angular/core';
import { Term } from '../../core/models/term';
import { Course } from '../../core/models/course';
import { DataService } from '../../core/data.service';
@@ -34,8 +35,12 @@ export class TermContainerComponent {
constructor(
private dataService: DataService,
public dialog: MatDialog,
+ private sidenavService: SidenavService,
private cdRef: ChangeDetectorRef) { }
+ openAddSidenav() {
+ this.sidenavService.open();
+ }
openNotesDialog(note, termCode) {
let dialogRef;
if (!note) {
--
GitLab