update state when course moved inside same term

src/app/degree-planner/store/actions/course.actions.ts

@@ -8,6 +8,7 @@ export enum CourseActionTypes {
   RemoveCourse = '[Course] Remove',
   RemoveCourseSuccess = '[Course] Remove (Success)',
 
+  MoveCourseInsideTerm = '[Course] Move Inside Term',
   MoveCourseBetweenTerms = '[Course] Move Between Terms',
   MoveCourseBetweenTermsSuccess = '[Course] Move Between Terms (Success)',
 
@@ -23,6 +24,13 @@ export enum CourseActionTypes {
   CourseError = '[Course] Error',
 }
 
+export class MoveCourseInsideTerm implements Action {
+  public readonly type = CourseActionTypes.MoveCourseInsideTerm;
+  constructor(
+    public payload: { termCode: string; recordId: number; newIndex: number },
+  ) {}
+}
+
 export class MoveCourseBetweenTerms implements Action {
   public readonly type = CourseActionTypes.MoveCourseBetweenTerms;
   constructor(

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

@@ -17,6 +17,7 @@ import {
   DeletePlanSuccess,
 } from '@app/degree-planner/store/actions/plan.actions';
 import {
+  MoveCourseInsideTerm,
   CourseActionTypes,
   RemoveCourse,
   MoveCourseBetweenTerms,
@@ -53,6 +54,7 @@ type SupportedActions =
   | SwitchPlanSuccess
   | WriteNoteSuccess
   | DeleteNoteSuccess
+  | MoveCourseInsideTerm
   | MoveCourseBetweenTerms
   | RemoveCourse
   | AddCourseSuccess
@@ -207,6 +209,38 @@ export function degreePlannerReducer(
       return { ...state, visibleYears };
     }
 
+    case CourseActionTypes.MoveCourseInsideTerm: {
+      const { termCode, recordId, newIndex } = action.payload;
+      const { yearCode, termName } = parseTermCode(termCode);
+      const year = state.visibleYears[yearCode];
+
+      if (year) {
+        const courses = year[termName].courses;
+        const course = courses.find(course => course.id === recordId);
+        const oldIndex = courses.findIndex(course => course.id === recordId);
+        if (course) {
+          const newCourses = courses.slice();
+          newCourses.splice(oldIndex, 1);
+          newCourses.splice(newIndex, 0, course);
+
+          const visibleYears = {
+            ...state.visibleYears,
+            [yearCode]: {
+              ...state.visibleYears[yearCode],
+              [termName]: {
+                ...state.visibleYears[yearCode][termName],
+                courses: newCourses,
+              },
+            },
+          };
+
+          return { ...state, visibleYears };
+        }
+      }
+
+      return state;
+    }
+
     case CourseActionTypes.MoveCourseBetweenTerms: {
       const {
         to: toTermCode,

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

-// Libraries
 import { Component, Input, OnInit } from '@angular/core';
-import {
-  CdkDragDrop,
-  moveItemInArray,
-  transferArrayItem,
-} from '@angular/cdk/drag-drop';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { MatDialog } from '@angular/material';
 import { Observable } from 'rxjs';
 import { filter, map, distinctUntilChanged } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
 import { DegreePlannerState } from '@app/degree-planner/store/state';
-import {
-  MoveCourseBetweenTerms,
-  AddCourse,
-  RemoveSaveForLater,
-} from '@app/degree-planner/store/actions/course.actions';
-
-import {
-  ToggleCourseSearch,
-  OpenCourseSearch,
-  CloseCourseSearch,
-} from '@app/degree-planner/store/actions/ui.actions';
-
-// Services
-import { SidenavService } from './../../core/service/sidenav.service';
+import { ToggleCourseSearch } from '@app/degree-planner/store/actions/ui.actions';
 
 // Models
 import * as actions from '@app/degree-planner/store/actions/course.actions';
@@ -127,24 +109,29 @@ export class TermContainerComponent implements OnInit {
     this.store.dispatch(new ToggleCourseSearch());
   }
 
-  drop(event: CdkDragDrop<string[]>) {
+  drop(event: CdkDragDrop<string>) {
     const newContainer = event.container.id;
     const previousContainer = event.previousContainer.id;
 
     if (newContainer === previousContainer) {
-      // If the user dropped a course into the same container do nothing
-      moveItemInArray(
-        event.container.data,
-        event.previousIndex,
-        event.currentIndex,
-      );
-      return;
+      const newIndex = event.currentIndex;
+      const { id: recordId, termCode } = event.item.data as Course;
+
+      if (recordId !== null) {
+        const action = new actions.MoveCourseInsideTerm({
+          termCode,
+          recordId,
+          newIndex,
+        });
+        this.store.dispatch(action);
+      }
     } else if (previousContainer.indexOf('term-') === 0) {
       // If moving from term to term
 
       // Get the pervious and new term code, and the record ID
-      const to = newContainer.substr(5);
-      const { termCode: from, id } = event.item.data;
+      const from = event.previousContainer.data;
+      const to = event.container.data;
+      const { id } = event.item.data;
       const newIndex = event.currentIndex;
 
       // Dispatch a new change request