From a95eb4bed322a0335d2d14032921e51a872f8a1f Mon Sep 17 00:00:00 2001
From: ievavold <ievavold@wisc.edu>
Date: Wed, 13 Mar 2019 12:07:51 -0500
Subject: [PATCH] ROENROLL-1460 disables all course drag-and-drop on mobile
---
.../course-search/course-search.component.html | 1 +
.../course-search/course-search.component.ts | 7 ++++++-
.../saved-for-later-container.component.html | 7 ++++++-
.../saved-for-later-container.component.ts | 9 ++++++++-
.../term-container/term-container.component.html | 1 +
.../term-container/term-container.component.ts | 8 +++++++-
6 files changed, 29 insertions(+), 4 deletions(-)
diff --git a/src/app/degree-planner/course-search/course-search.component.html b/src/app/degree-planner/course-search/course-search.component.html
index 64eab64..0df0024 100644
--- a/src/app/degree-planner/course-search/course-search.component.html
+++ b/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"
>
diff --git a/src/app/degree-planner/course-search/course-search.component.ts b/src/app/degree-planner/course-search/course-search.component.ts
index 743abd9..28f9d00 100644
--- a/src/app/degree-planner/course-search/course-search.component.ts
+++ b/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
diff --git a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
index dc037d5..f7c1976 100644
--- a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
+++ b/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>
diff --git a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts
index 362f1d9..8c52be1 100644
--- a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts
+++ b/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(
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 3dd3e61..252e5ea 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/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"
>
diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts
index 071bfa0..18a7003 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/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;
--
GitLab