ROENROLL-1388

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

@@ -34,8 +34,8 @@
 			<mat-menu #degreePlanMenu="matMenu">
         <button mat-menu-item (click)="onCreatePlanClick()">Create new plan</button>
         <button mat-menu-item (click)="onRenamePlanClick(degreePlan)">Rename plan</button>
-        <button mat-menu-item (click)="onDeletePlanClick(degreePlan)">Delete plan</button>
-        <button mat-menu-item (click)="onMakePrimayClick(degreePlan)">Make primary</button>
+				<button mat-menu-item (click)="onDeletePlanClick(degreePlan)" [disabled]="degreePlan.primary">Delete plan</button>
+        <button mat-menu-item (click)="onMakePrimayClick(degreePlan)" [disabled]="degreePlan.primary">Make primary</button>
         <hr>
         <button mat-menu-item (click)="onPrintPlanClick(degreePlan)">Print plan</button>
 				<button mat-menu-item (click)="onSharePlanClick(degreePlan)">Share plan</button>

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

-import { tap } from 'rxjs/operators';
+import { tap, withLatestFrom } from 'rxjs/operators';
 // Libraries
 import { OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -13,6 +13,7 @@ import { MatDialog } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { filter } from 'rxjs/operators';
+import { MatSnackBar } from '@angular/material';
 
 // Models
 import { GlobalState } from '@app/core/state';
@@ -34,6 +35,7 @@ import {
   MakePlanPrimary,
   CreatePlan,
   ChangePlanName,
+  DeletePlan,
 } from '@app/degree-planner/store/actions/plan.actions';
 
 import {
@@ -62,6 +64,7 @@ export class DegreePlannerComponent implements OnInit {
     private store: Store<GlobalState>,
     public mediaMatcher: MediaMatcher,
     public dialog: MatDialog,
+    private snackBar: MatSnackBar,
   ) {
     this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
   }
@@ -118,15 +121,44 @@ export class DegreePlannerComponent implements OnInit {
       });
   }
 
-  public onMakePrimayClick(currentPlan: DegreePlan) {
-    // TODO
-    console.warn('onMakePrimayClick');
+  public onMakePrimayClick(_currentPlan: DegreePlan) {
+    const data: DialogMode = { mode: 'makePrimary' };
+    this.dialog
+      .open(ModifyPlanDialogComponent, { data })
+      .afterClosed()
+      .subscribe((result: { areYouSure: true } | undefined) => {
+        if (result !== undefined && result.areYouSure === true) {
+          const action = new MakePlanPrimary();
+          this.store.dispatch(action);
+        }
+      });
   }
 
-  public onDeletePlanClick() {
-    // TODO
-    // open confirm dialog
-    console.log('onDeletePlanClick');
+  public onDeletePlanClick(currentPlan: DegreePlan) {
+    if (currentPlan.primary) {
+      this.snackBar.open('The primary degree plan cannot be deleted');
+      return;
+    }
+
+    const data: DialogMode = { mode: 'delete', name: currentPlan.name };
+    this.dialog
+      .open(ModifyPlanDialogComponent, { data })
+      .afterClosed()
+      .pipe(withLatestFrom(this.store))
+      .subscribe(([result, state]) => {
+        if (typeof result === 'object' && result.areYouSure === true) {
+          const { roadmapId } = currentPlan;
+          const deleteAction = new DeletePlan({ roadmapId });
+          this.store.dispatch(deleteAction);
+
+          const primaryPlan = state.degreePlanner.allDegreePlans.find(plan => {
+            return plan.primary;
+          }) as DegreePlan;
+          const newVisibleRoadmapId = primaryPlan.roadmapId;
+          const switchPlanAction = new SwitchPlan({ newVisibleRoadmapId });
+          this.store.dispatch(switchPlanAction);
+        }
+      });
   }
 
   public onPrintPlanClick() {

src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html

@@ -7,6 +7,8 @@
 
 <mat-toolbar color="primary" class="dialog-toolbar">
   <span class="dialog-toolbar-title" [ngSwitch]="data.mode">
+    <span *ngSwitchCase="'makePrimary'">Set as the primary plan</span>
+    <span *ngSwitchCase="'delete'">Delete plan</span>
     <span *ngSwitchCase="'rename'">Rename plan</span>
     <span *ngSwitchCase="'create'">Create plan</span>
   </span>
@@ -17,6 +19,12 @@
 
 <mat-dialog-content class="mat-typography dialog-with-toolbar">
   <ng-container [ngSwitch]="data.mode">
+    <div class="delete-plan-content" *ngSwitchCase="'delete'">
+      <mat-dialog-content>
+        <p>Are you sure you want to delete the degree plan named <strong>{{data.name}}</strong>?</p>
+      </mat-dialog-content>
+    </div>
+
     <div class="rename-plan-content" *ngSwitchCase="'rename'">
       <mat-dialog-content [formGroup]="form">
         <mat-form-field class="form-field-stretch">
@@ -41,6 +49,8 @@
 
     <button mat-rasied-button class="btn-primary mat-button" [disabled]="form.invalid" (click)="onSubmit()">
       <ng-container [ngSwitch]="data.mode">
+        <span *ngSwitchCase="'makePrimary'">Set as the primary plan</span>
+        <span *ngSwitchCase="'delete'">Delete this plan</span>
         <span *ngSwitchCase="'rename'">Rename plan</span>
         <span *ngSwitchCase="'create'">Create plan</span>
       </ng-container>

src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.ts

@@ -3,6 +3,8 @@ import { Component, Input, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
 export type DialogMode =
+  | { mode: 'makePrimary' }
+  | { mode: 'delete'; name: string }
   | { mode: 'rename'; oldName: string }
   | { mode: 'create' };
 
@@ -18,19 +20,28 @@ export class ModifyPlanDialogComponent {
     @Inject(MAT_DIALOG_DATA) public data: DialogMode,
   ) {
     const initialName = this.data.mode === 'rename' ? this.data.oldName : '';
-    this.form = new FormGroup({
-      planName: new FormControl(initialName, Validators.required),
-    });
+    if (this.data.mode === 'rename' || this.data.mode === 'create') {
+      this.form = new FormGroup({
+        planName: new FormControl(initialName, Validators.required),
+      });
+    } else {
+      this.form = new FormGroup({});
+    }
   }
 
   onSubmit() {
     switch (this.data.mode) {
-      case 'rename':
-        this.dialogRef.close({ name: `${this.form.value.planName}` });
+      case 'makePrimary':
+      case 'delete': {
+        this.dialogRef.close({ areYouSure: true });
         break;
-      case 'create':
-        this.dialogRef.close({ name: `${this.form.value.planName}` });
+      }
+      case 'rename':
+      case 'create': {
+        const name = `${this.form.value.planName}`;
+        this.dialogRef.close({ name });
         break;
+      }
       default:
         this.dialogRef.close();
     }

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

@@ -31,8 +31,8 @@
 		<div>
 			<button mat-button class="sidenav-link-btn"><i class="material-icons">print</i>Print</button>
 			<button mat-button class="sidenav-link-btn"><i class="material-icons">email</i> Share Plan</button>
-			<button mat-button class="sidenav-link-btn"><i class="material-icons">add_box</i> Add Degree Plan</button>
+			<button mat-button class="sidenav-link-btn" (click)="addDegreePlan()"><i class="material-icons">add_box</i> Add Degree Plan</button>
 			<button mat-button class="sidenav-link-btn" (click)="addAcademicYear()"><i class="material-icons">add_box</i> Add Academic Year</button>
 		</div>
 	</mat-expansion-panel>
-</div>
\ No newline at end of file
+</div>

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

 // Libraries
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { MatDialog } from '@angular/material';
 
 // State management
 import { GlobalState } from '@app/core/state';
 import { AddAcademicYearRequest } from '@app/degree-planner/store/actions/addAcademicYear.actions';
+import {
+  ModifyPlanDialogComponent,
+  DialogMode,
+} from '@app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component';
+import { CreatePlan } from '@app/degree-planner/store/actions/plan.actions';
 
 @Component({
   selector: 'cse-sidenav-menu-item',
   templateUrl: './sidenav-menu-item.component.html',
   styleUrls: ['./sidenav-menu-item.component.scss'],
 })
-
 export class SidenavMenuItemComponent {
-  constructor(private store: Store<GlobalState>) {}
+  constructor(private store: Store<GlobalState>, public dialog: MatDialog) {}
 
   public addAcademicYear() {
     this.store.dispatch(new AddAcademicYearRequest());
   }
+
+  public addDegreePlan() {
+    const data: DialogMode = { mode: 'create' };
+    this.dialog
+      .open(ModifyPlanDialogComponent, { data })
+      .afterClosed()
+      .subscribe((result: { name: string } | undefined) => {
+        if (result !== undefined && typeof result.name === 'string') {
+          const name = result.name;
+          const action = new CreatePlan({ name, primary: false });
+          this.store.dispatch(action);
+        }
+      });
+  }
 }

src/app/degree-planner/store/reducer.ts

@@ -12,8 +12,8 @@ import {
   MakePlanPrimaryFailure,
   ChangePlanNameSuccess,
   ChangePlanNameFailure,
-  CreatePlan,
   CreatePlanSuccess,
+  DeletePlanSuccess,
 } from '@app/degree-planner/store/actions/plan.actions';
 import {
   CourseActionTypes,
@@ -53,6 +53,7 @@ type SupportedActions =
   | MakePlanPrimaryFailure
   | ChangePlanNameSuccess
   | ChangePlanNameFailure
+  | DeletePlanSuccess
   | ToggleAcademicYear;
 
 export function degreePlannerReducer(
@@ -347,6 +348,13 @@ export function degreePlannerReducer(
       };
     }
 
+    case PlanActionTypes.DeletePlanSuccess: {
+      const allDegreePlans = state.allDegreePlans.filter(plan => {
+        return plan.roadmapId !== action.payload.roadmapId;
+      });
+      return { ...state, allDegreePlans };
+    }
+
     /**
      * It's okay if the action didn't match any of the cases above. If that's
      * the case, just return the existing state object.