ROENROLL-1460 disables all course drag-and-drop on mobile

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

@@ -45,6 +45,7 @@
           <div
             class="course-wrapper"
             cdkDrag
+            [cdkDragDisabled]="mobileView.matches"
             [cdkDragData]="course"
             *ngFor="let course of queriedCourses"
           >

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

@@ -18,6 +18,7 @@ import { MatSnackBar } from '@angular/material';
 // Data modles
 import { Course, SubjectMapping } from '@app/core/models/course';
 import { TermCode } from '@app/core/models/termcode';
+import { MediaMatcher } from '@angular/cdk/layout';
 
 @Component({
   selector: 'cse-course-search',
@@ -46,13 +47,17 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
 
   public termSubscription: Subscription;
   public searchOpenSubscribe: Subscription;
+  public mobileView: MediaQueryList;
 
   constructor(
     private store: Store<GlobalState>,
     private fb: FormBuilder,
     private api: DegreePlannerApiService,
     private snackBar: MatSnackBar,
-  ) {}
+    mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+  }
 
   public ngOnInit(): void {
     // Internal values used to manage loading state

src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html

@@ -6,7 +6,12 @@
     [cdkDropListData]="courses$ | async"
     [cdkDropListConnectedTo]="dropZoneIds$ | async"
     (cdkDropListDropped)="drop($event)">
-    <div class="course-wrapper" *ngFor="let course of courses$ | async" cdkDrag [cdkDragData]="course">
+    <div
+      class="course-wrapper"
+      *ngFor="let course of courses$ | async"
+      cdkDrag
+      [cdkDragDisabled]="mobileView.matches"
+      [cdkDragData]="course">
       <div class="course-wrapper-inner">
         <cse-course-item [course]="course" type="saved" class="course-favorite"></cse-course-item>
       </div>

src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts

@@ -15,6 +15,7 @@ import {
 import * as selectors from '@app/degree-planner/store/selectors';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { TermCode } from '@app/core/models/termcode';
+import { MediaMatcher } from '@angular/cdk/layout';
 
 @Component({
   selector: 'cse-saved-for-later-container',
@@ -24,8 +25,14 @@ import { TermCode } from '@app/core/models/termcode';
 export class SavedForLaterContainerComponent implements OnInit {
   public courses$: Observable<SavedForLaterCourse[]>;
   public dropZoneIds$: Observable<string[]>;
+  public mobileView: MediaQueryList;
 
-  constructor(private store: Store<{ degreePlanner: DegreePlannerState }>) {}
+  constructor(
+    private store: Store<{ degreePlanner: DegreePlannerState }>,
+    mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+  }
 
   public ngOnInit() {
     this.dropZoneIds$ = this.store.pipe(

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

@@ -39,6 +39,7 @@
             <div
               cdkDrag
               [cdkDragData]="course"
+              [cdkDragDisabled]="mobileView.matches"
               class="course-wrapper"
               *ngFor="let course of plannedCourses"
             >

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

@@ -28,6 +28,7 @@ import { TermCode } from '@app/core/models/termcode';
 import { ConfirmDialogComponent } from '@app/shared/dialogs/confirm-dialog/confirm-dialog.component';
 import { maybeQueueResolutionOfComponentResources } from '@angular/core/src/metadata/resource_loading';
 import { WeekDay } from '@angular/common';
+import { MediaMatcher } from '@angular/cdk/layout';
 const isntUndefined = <T>(thing: T | undefined): thing is T => {
   return thing !== undefined;
 };
@@ -55,10 +56,15 @@ export class TermContainerComponent implements OnInit, OnDestroy {
   public enrolledCredits: number;
   public visibleCredits: 'enrolled' | 'planned';
   public courseNotOfferedInTerm: Course[];
+  public mobileView: MediaQueryList;
+
   constructor(
     public dialog: MatDialog,
     private store: Store<{ degreePlanner: DegreePlannerState }>,
-  ) {}
+    mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+  }
 
   public ngOnInit() {
     this.hasItemDraggedOver = false;