ROENROLL-1122 3 dot menu

src/app/degree-planner/shared/course-item/course-item.component.html

@@ -22,20 +22,20 @@
 
     <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
       <div fxLayout="row" fxLayoutAlign="end center">
-        <mat-icon [matMenuTriggerFor]="courseMenu" aria-label="Course menu" matTooltip="Course Menu" matTooltipPosition="right"
+        <mat-icon [matMenuTriggerFor]="courseMenu" (menuOpened)="onMenuOpen()" aria-label="Course menu" matTooltip="Course Menu" matTooltipPosition="right"
           class="material-icons">more_horiz</mat-icon>
         <mat-menu #courseMenu="matMenu" class="course-item-menu">
           <button mat-menu-item (click)="openCourseDetailsDialog(course)">Course Details</button>
           <button mat-menu-item [matMenuTriggerFor]="academicYearsGroup">Move</button>
           <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
-            <!-- <button mat-menu-item (click)="moveToFavorites(course)" *ngIf="!savedForLater" class="favorites-list">Saved for later</button>
-							<button mat-menu-item *ngFor="let termCode of termCodes" (click)="savedForLater ? addToTerm(termCode) : switchTerm(termCode)">{{ termCode | getTermDescription }}</button> -->
+            <button mat-menu-item (click)="moveToFavorites(course)" *ngIf="type != 'saved'" class="favorites-list">Saved for later</button>
+            <button mat-menu-item *ngFor="let term of visibleTerms" (click)="(type == 'saved') ? addToTerm(course, term) : switchTerm(course, term)">{{ term | getTermDescription }}</button>
           </mat-menu>
           <button *ngIf="!disabled" mat-menu-item (click)="openRemoveConfirmationDialog()">Remove</button>
         </mat-menu>
       </div>
       <div fxLayout="row" fxLayoutAlign="end center">
-        <p class="course-credits">{{ course.credits !== undefined ? course.credits : "--" }} Cr</p>
+        <p class="course-credits">{{ course.credits ? course.credits : "--" }} Cr</p>
       </div>
     </div>
   </div>

src/app/degree-planner/shared/course-item/course-item.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material';
+import { Store, select } from '@ngrx/store';
 
+import {
+  AddCourse,
+  AddSaveForLater,
+  MoveCourseBetweenTerms,
+} from './../../store/actions/course.actions';
+import { getDropableTerms } from '@app/degree-planner/store/selectors';
+import { GlobalState } from '@app/core/state';
 import { Course } from '@app/core/models/course';
 
 import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
@@ -15,15 +23,49 @@ import { RemoveCourseConfirmDialogComponent } from '@app/degree-planner/dialogs/
   styleUrls: ['./course-item.component.scss'],
 })
 export class CourseItemComponent implements OnInit {
-  status; // TODO make this work k thx plz!?
   @Input() course: Course;
   @Input() disabled: string;
   @Input() type: 'saved' | 'course' | 'search';
+  status; // TODO make this work k thx plz!?
+  visibleTerms: any;
 
-  constructor(private api: DegreePlannerApiService, public dialog: MatDialog) {}
+  constructor(
+    private api: DegreePlannerApiService,
+    public dialog: MatDialog,
+    private store: Store<GlobalState>,
+  ) {}
 
   ngOnInit() {}
 
+  onMenuOpen() {
+    this.store
+      .pipe(select(getDropableTerms))
+      .subscribe(terms => (this.visibleTerms = terms));
+  }
+
+  moveToFavorites(course) {
+    this.store.dispatch(
+      new AddSaveForLater({
+        courseId: course.courseId,
+        subjectCode: course.subjectCode,
+        title: course.title,
+        catalogNumber: course.catalogNumber,
+      }),
+    );
+  }
+
+  addToTerm(course, term) {
+    const { subjectCode, courseId } = course;
+    const termCode = term;
+    this.store.dispatch(new AddCourse({ subjectCode, courseId, termCode }));
+  }
+
+  switchTerm(course, term) {
+    const { id, termCode: from } = course;
+    const to = term;
+    this.store.dispatch(new MoveCourseBetweenTerms({ to, from, id }));
+  }
+
   openCourseDetailsDialog(course) {
     this.api
       .getCourseDetails(course.subjectCode, course.courseId)

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

@@ -4,8 +4,6 @@ import { createSelector } from '@ngrx/store';
 // Models
 import { GlobalState } from '@app/core/state';
 import { Year } from '@app/core/models/year';
-import { Note } from '@app/core/models/note';
-import { Course } from '@app/core/models/course';
 import { PlannedTerm } from '@app/core/models/planned-term';
 import { DegreePlannerState } from './state';
 
@@ -58,6 +56,16 @@ export const getAllVisibleTerms = createSelector(
   state => state.visibleTerms,
 );
 
+export const getDropableTerms = createSelector(
+  getDegreePlannerState,
+  (state: DegreePlannerState) => {
+    const allTerms = state.visibleTerms.map(term => term.termCode);
+    const currentTerm = state.activeTermCodes[0];
+    const indexOfActive = allTerms.indexOf(currentTerm);
+    return allTerms.slice(indexOfActive - allTerms.length);
+  },
+);
+
 export const getAllVisibleTermsByYear = createSelector(
   getDegreePlannerState,
   state => {

src/app/shared/pipes/get-term-description.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-	name: 'getTermDescription'
+  name: 'getTermDescription',
 })
-
 export class GetTermDescriptionPipe implements PipeTransform {
+  transform(termCode: string, args?: any): any {
+    let termDescription = '';
+    const splitId = termCode.split('');
+    const century = (19 + Number(splitId[0])).toString();
+    const year = Number(splitId.splice(1, 2).join(''));
+    const term = Number(splitId[1]);
 
-	transform(termCode: string, args?: any): any {
-		let termDescription = '';
-		const splitId = termCode.split('');
-		const century = (19 + Number(splitId[0])).toString();
-		const year = Number(splitId.splice(1, 2).join(''));
-		const term = Number(splitId[1]);
-
-		switch (term) {
-			case 2:
-				termDescription = 'Fall ' + century;
-				termDescription += (year - 1).toString();
-				break;
-			case 3:
-				termDescription = 'Fall ' + century;
-				termDescription += (year - 1).toString();
-				break;
-			case 4:
-				termDescription = 'Spring ' + century;
-				termDescription += (year).toString();
-				break;
-			case 6:
-				termDescription = 'Summer ' + century;
-				termDescription += (year).toString();
-				break;
-		}
-		return termDescription;
-	}
-
+    switch (term) {
+      case 2:
+        termDescription = 'Fall ' + century;
+        termDescription += (year - 1).toString();
+        break;
+      case 3:
+        termDescription = 'Fall ' + century;
+        termDescription += (year - 1).toString();
+        break;
+      case 4:
+        termDescription = 'Spring ' + century;
+        termDescription += year.toString();
+        break;
+      case 6:
+        termDescription = 'Summer ' + century;
+        termDescription += year.toString();
+        break;
+    }
+    return termDescription;
+  }
 }