ROENROLL-1381

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html

@@ -54,16 +54,12 @@
       <button mat-button class="sidenav-link-btn" (click)="print()">
         <i class="material-icons">print</i> Print
       </button>
-      <button mat-button class="sidenav-link-btn">
-        <svg
-          class="material-icons"
-          style="width:24px;height:24px"
-          viewBox="0 0 24 24"
-        >
+      <a href="/api/degreeplanpdf?roadmapId={{planId}}" mat-button class="sidenav-link-btn">
+        <svg class="material-icons" style="width:24px;height:24px" viewBox="0 0 24 24" >
           <path fill="#0479a8" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
         </svg>
         Download PDF
-      </button>
+      </a>
       <button mat-button class="sidenav-link-btn" (click)="onCreatePlanClick()">
         <i class="material-icons">add_box</i> Add Degree Plan
       </button>

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts

 // Libraries
-import { Component } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Component, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
 
 // State management
 import { GlobalState } from '@app/core/state';
+import { Store, select } from '@ngrx/store';
 import { AddAcademicYearRequest } from '@app/degree-planner/store/actions/addAcademicYear.actions';
 import { PromptDialogComponent } from '@app/shared/dialogs/prompt-dialog/prompt-dialog.component';
 import { CreatePlan } from '@app/degree-planner/store/actions/plan.actions';
+import * as selectors from '@app/degree-planner/store/selectors';
 
 @Component({
   selector: 'cse-sidenav-menu-item',
   templateUrl: './sidenav-menu-item.component.html',
   styleUrls: ['./sidenav-menu-item.component.scss'],
 })
-export class SidenavMenuItemComponent {
+export class SidenavMenuItemComponent implements OnDestroy {
   public inputForm: FormGroup;
   public yearCodes$: Observable<string[]>;
+  public activeRoadmapId: Subscription;
+  public planId: number;
   constructor(
     private store: Store<GlobalState>,
     public dialog: MatDialog,
     private snackBar: MatSnackBar,
-  ) {}
+  ) {
+    this.activeRoadmapId = this.store
+      .pipe(
+        select(selectors.selectVisibleDegreePlan),
+        filter(isntUndefined),
+        map(plan => plan.roadmapId),
+      )
+      .subscribe(planId => {
+        this.planId = planId;
+      });
+  }
+  // Unsubscribe from subs to prevent memeory leaks
+  public ngOnDestroy() {
+    this.activeRoadmapId.unsubscribe();
+  }
 
   public onAddAcademicYear() {
     this.store.dispatch(new AddAcademicYearRequest());
@@ -55,3 +73,7 @@ export class SidenavMenuItemComponent {
       });
   }
 }
+
+const isntUndefined = <T>(anything: T | undefined): anything is T => {
+  return anything !== undefined;
+};