From b38cf39d771cf1e1dec5477c17d491f13fc28bcc Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Mon, 29 Apr 2019 15:26:12 -0500
Subject: [PATCH] Add cdkDragStarted property to watch when course is dragged
---
.../course-item/course-item.component.html | 1 -
.../term-container.component.html | 40 ++++++++-----------
.../term-container.component.ts | 8 ++++
3 files changed, 24 insertions(+), 25 deletions(-)
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index adb04d6..8a7430e 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/src/app/degree-planner/shared/course-item/course-item.component.html
@@ -13,7 +13,6 @@
aria-haspopup="true">
<div fxLayout="row" fxLayoutAlign="start center">
<div class="icon-number-wrapper">
- <span class="assistive-text">Moving course {{ course | courseDescription }}</span>
<p cdkFocusRegionStart class="course-number">
{{ course | courseDescription }}
</p>
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 25d3672..1e609fd 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -18,8 +18,7 @@
type="course"
[disabled]="true"
[course]="course"
- [era]="(term$ | async).era"
- >
+ [era]="(term$ | async).era">
</cse-course-item>
</div>
</div>
@@ -36,12 +35,10 @@
[cdkDropListConnectedTo]="dropZoneIds$ | async"
(cdkDropListDropped)="drop($event)"
(cdkDropListEntered)="dragEnter($event)"
- (cdkDropListExited)="dragExit($event)"
- >
+ (cdkDropListExited)="dragExit($event)">
<div class="course-list-inner term-body">
<ng-container
- *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver"
- >
+ *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver">
<p *ngIf="(term$ | async).era === 'active'" class="no-courses">
No Courses in cart
</p>
@@ -52,20 +49,21 @@
No courses planned
</p>
</ng-container>
+ <span class="assistive-text">{{ assistiveText }}</span>
<div
cdkDrag
[cdkDragData]="course"
[cdkDragDisabled]="mobileView.matches"
+ (cdkDragStarted)="startDrag($event)"
class="course-wrapper"
- *ngFor="let course of plannedCourses"
- >
+ *ngFor="let course of plannedCourses">
<cse-course-item
+ draggable="true"
role="button"
aria-labelledby="planned-courses"
type="course"
[course]="course"
- [era]="(term$ | async).era"
- >
+ [era]="(term$ | async).era">
</cse-course-item>
</div>
</div>
@@ -77,8 +75,7 @@
mat-raised-button
attr.aria-label="Add course to {{ termCode | getTermDescription }}"
class="add-course-button"
- (click)="openCourseSearch()"
- >
+ (click)="openCourseSearch()">
+ Add Course
</button>
</div>
@@ -95,8 +92,7 @@
<div
fxLayout="row"
class="term-header"
- fxLayoutAlign="space-between center"
- >
+ fxLayoutAlign="space-between center">
<h3 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h3>
<div fxLayout="row" fxLayoutAlign="space-between center">
<p class="text-right semi-bold credits">
@@ -112,15 +108,13 @@
mat-icon-button
aria-label="Open dialog to edit note in this term"
[disabled]="note.isLoaded === false"
- (click)="openNotesDialog(note)"
- >
+ (click)="openNotesDialog(note)">
<mat-icon
aria-label="Open dialog to edit note in this term"
alt="Edit note"
color="primary"
matTooltip="Edit note"
- matTooltipPosition="above"
- >
+ matTooltipPosition="above">
insert_drive_file
</mat-icon>
</button>
@@ -129,15 +123,13 @@
<button
mat-icon-button
(click)="openNotesDialog()"
- aria-label="Open dialog to add note in this term"
- >
+ aria-label="Open dialog to add note in this term">
<mat-icon
aria-label="Open dialog to add note in this term"
alt="Add note"
color="primary"
matTooltip="Add note"
- matTooltipPosition="above"
- >
+ matTooltipPosition="above">
note_add
</mat-icon>
</button>
@@ -159,8 +151,8 @@
<p class="note-excerpt">{{ note.text }}</p>
<mat-progress-spinner
mode="indeterminate"
- diameter="24"
- ></mat-progress-spinner>
+ diameter="24">
+ </mat-progress-spinner>
</div>
</ng-template>
</ng-container>
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 269b250..4c656ff 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -58,6 +58,7 @@ export class TermContainerComponent implements OnInit, OnDestroy {
public visibleCredits: 'enrolled' | 'planned';
public courseNotOfferedInTerm: ReadonlyArray<Course>;
public mobileView: MediaQueryList;
+ public assistiveText: string;
constructor(
public dialog: MatDialog,
@@ -137,7 +138,14 @@ export class TermContainerComponent implements OnInit, OnDestroy {
}
}
+ startDrag(event) {
+ this.assistiveText = `Dragging course ${
+ event.source.data.subjectDescription
+ } ${event.source.data.catalogNumber}`;
+ }
+
drop(event: CdkDragDrop<TermCode>) {
+ this.assistiveText = '';
const newContainer = event.container.id;
const previousContainer = event.previousContainer.id;
const { courseId } = event.item.data as Course;
--
GitLab