Roenroll 1411 dialog explaining error

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

@@ -16,8 +16,13 @@ import * as selectors from '@app/degree-planner/store/selectors';
 import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
 import { ConfirmDialogComponent } from '@app/shared/dialogs/confirm-dialog/confirm-dialog.component';
 import { CourseDetailsDialogComponent } from '@app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged, filter } from 'rxjs/operators';
 import { TermCode } from '@app/core/models/termcode';
+import { PlannedTerm } from '@app/core/models/planned-term';
+
+const isntUndefined = <T>(thing: T | undefined): thing is T => {
+  return thing !== undefined;
+};
 
 @Component({
   selector: 'cse-course-item',
@@ -35,6 +40,8 @@ export class CourseItemComponent implements OnInit {
   status: string;
   public visibleTermCodes$: Observable<string[]>;
   public droppableTermCodes$: Observable<string[]>;
+  public term$: Observable<PlannedTerm>;
+  public plannedCourses: Course[];
 
   constructor(
     private api: DegreePlannerApiService,
@@ -84,13 +91,47 @@ export class CourseItemComponent implements OnInit {
    *  Handle moving a course to different terms based on course type
    *
    */
-  onMove(toTermCode: TermCode) {
+  onMove(termCode: string) {
+    const toTermCode = new TermCode(termCode);
+
+    this.term$ = this.store.pipe(
+      select(selectors.selectVisibleTerm, { termCode: toTermCode }),
+      filter(isntUndefined),
+      distinctUntilChanged(),
+    );
+
+    this.term$.subscribe(term => {
+      this.plannedCourses = term.plannedCourses;
+    });
+
+    const isCourseInPlannedCourses = this.plannedCourses.some(
+      course => course.courseId === this.course.courseId,
+    );
+    if (isCourseInPlannedCourses) {
+      this.dialog
+        .open(ConfirmDialogComponent, {
+          data: {
+            title: "Can't add course",
+            confirmText: 'OK',
+            dialogClass: 'alertDialog',
+            text: `This course already exists in selected term!`,
+          },
+        })
+        .afterClosed();
+      return;
+    }
+
     switch (this.type) {
       case 'course': {
         const id = this.course.id as number;
         const from = new TermCode(this.course.termCode);
         this.store.dispatch(
-          new MoveCourseBetweenTerms({ to: toTermCode, from, id, newIndex: 0 }),
+          new MoveCourseBetweenTerms({
+            to: toTermCode,
+            from,
+            id,
+            newIndex: 0,
+          }),
         );
         break;
       }

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

@@ -134,6 +134,25 @@ export class TermContainerComponent implements OnInit, OnDestroy {
     const newContainer = event.container.id;
     const previousContainer = event.previousContainer.id;
 
+    const { courseId } = event.item.data as Course;
+    const isCourseInPlannedCourses = this.plannedCourses.some(
+      course => course.courseId === courseId,
+    );
+
+    if (newContainer !== previousContainer && isCourseInPlannedCourses) {
+      this.dialog
+        .open(ConfirmDialogComponent, {
+          data: {
+            title: "Can't add course to term",
+            confirmText: 'OK',
+            dialogClass: 'alertDialog',
+            text: `This course already exists in selected term!`,
+          },
+        })
+        .afterClosed();
+      return;
+    }
+
     if (newContainer === previousContainer) {
       const newIndex = event.currentIndex;
       const { id: recordId, termCode } = event.item.data as Course;

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html

@@ -13,6 +13,7 @@
   id="confirmation-dialog"
   class="mat-typography dialog-with-toolbar"
 >
+<div class="{{ dialogClass }}">
   <mat-dialog-content>
     <p class="dialog-text" *ngFor="let line of text">{{ line }}</p>
   </mat-dialog-content>
@@ -35,4 +36,6 @@
       {{ confirmText }}
     </button>
   </mat-dialog-actions>
+</div>
+
 </mat-dialog-content>

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -9,6 +9,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 export class ConfirmDialogComponent {
   title: string;
   text: string[];
+  dialogClass: string;
   cancelText: string;
   confirmText: string;
   confirmColor: string;
@@ -20,6 +21,7 @@ export class ConfirmDialogComponent {
     const {
       title = 'Are you sure?',
       text = '',
+      dialogClass = '',
       cancelText = 'Cancel',
       confirmText = 'Confirm',
       confirmColor = 'primary',
@@ -27,6 +29,7 @@ export class ConfirmDialogComponent {
 
     this.title = title;
     this.text = text;
+    this.dialogClass = dialogClass;
     this.cancelText = cancelText;
     this.confirmText = confirmText;
     this.confirmColor = confirmColor;

src/app/shared/dialogs/dialogs.scss

@@ -18,3 +18,9 @@
 button.mat-primary {
   text-transform: uppercase;
 }
+
+.alertDialog {
+  .confirm-button:first-of-type {
+    display: none;
+  }
+}