feat: drag-and-drop schedules #1089

jotalis · 2024-12-29T04:39:13Z

Summary

Drag-And-Drop

Implemented vertically-locked drag-and-drop functionality in the schedule select dropdown, allowing users to reorder schedules
Added support for desktop, mobile, and also keyboard accessibility (users can also reorder schedules using tabbing and arrow keys)
Reordering schedules is now treated as an "unsaved" action and cached in local storage. This allows users to retain and reload their unsaved schedule reordering changes even after refreshing the page

Bug Fixes

Resolved an issue where duplicating a schedule that was not currently selected would incorrectly create a new schedule containing the events of the currently selected schedule, instead of duplicating the intended schedule

Misc

Added a disabled cursor for the schedule note text input when in skeleton mode
Made schedule name tooltip offset consistent with toolbar button tooltip offset

Note
Previously, a list of scheduleNames was passed down as a prop to the SelectSchedulePopover component. For implementing reordering via a sortable dnd list, each scheduleName must be mapped to a unique ID because we can't assume all scheduleNames are unique yet.
To address this:

A schedule mapping is created, which is really an array of objects where each object contains a scheduleName and its unique id (in this case, its original index in the list).
Upon reordering schedules:
- This local mapping is updated by swapping elements within the array using the schedules' unique IDs
- The updated schedule order is also reflected in the AppStore.ts saved schedule array
- The currentScheduleIndex in AppStore is recalculated accordingly.

Important: The local mapping is not fully recreated after every reordering action. Instead, only the swapped elements are updated. The local mapping is only recreated during a complete component re-render. If we were to fully recreate the mapping on every reorder, it would disrupt:

The DND animations / transitions
The index selector mapping for each toolbar button, causing inconsistencies

Test Plan

Ensure toolbar buttons correctly map to the reordered schedules after swapping
- Swap around schedules and just ensure that the button popups display the correct text and perform the actions (Copy, Delete, Rename) correctly
Ensure all schedule actions are saved as "unsaved" actions and can be reloaded correctly
- Create 2-3 schedules with some events, Save to any username with Remember Me checked, Try various combinations of schedule actions (create new schedules, delete some, reorder some, rename some, etc), reload the page, load unsaved changes and make sure the schedule state is the same
Ensure schedule reordering is disabled in skeleton mode
- Force skeleton mode by blocking network requests to https://dev.api.antalmanac.com/trpc/websoc
Ensure schedule swapping works on or via different interfaces (mobile, desktop, tabbing)
Ensure styling looks fine for hover tooltips
Ensure styling looks fine for skeleton mode schedule note input

Issues

Closes #1054

previously, the copy button would copy the selected schedule instead of the schedule it was linked to.

MinhxNguyen7 · 2024-12-29T06:50:17Z

For implementing reordering via a sortable dnd list, each scheduleName must be mapped to a unique ID because we can't assume all scheduleNames are unique yet.

That is the case now because of the RDS migration. All duplicate schedule names have been mangled.

Looks pretty good, and well-detailed PR description as well. I'll try to look at this soon.

MinhxNguyen7

Drag icon is not visible in light mode

MinhxNguyen7 · 2025-01-17T22:02:57Z

@adcockdalton remember to review this. It's marked changes requested because I requested changes, but that has been addressed.

adcockdalton

Firstly I must apologize for the incredible delay on reviewing this. It's a useful PR and very well done and written up; it was disrespectful of me to lose track of it.

As for the PR itself, it looks great for the most part, but I had a couple issues. I'll explain how to repro:

On reload with unsaved changes, deleted classes are only remembered to have been deleted for what seems to be the "root" schedule.

You will be redirected to the "root" schedule, for which the class will be deleted (expected behavior in agreement with the main branch). The other schedules will not have their class deleted.

To follow-up with this, it also seems appropriate (if easily implementable from where we are now, since I'd like to merge this in soon) to also remember which schedule was being viewed on reload (without saving).

I couldn't get mobile reordering via touch-scroll to work on my end. This could just be a chrome devtools issue though--is it currently working for you?

--

I also wanted to ask about your reasoning behind the tooltips:

I'm pretty sure tooltips have to encode additional information in order to be useful for accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role , but I could be wrong on that--I'm not very familiar with screen readers and the like.

--

LGTM: all other unsaved changes features, tabbing, light mode

jotalis · 2025-01-22T20:25:35Z

The saving issue seems to be a problem on prod as well. I'll look into why and get it fixed.

The main point of the tooltip is to provide the full length of the schedule name if it exceeds the display limit and is omitted with ellipses. Currently, its behavior renders a tooltip for every schedule name regardless of whether the schedule name length exceeds the display length. This behavior is consistent with prod and can be reworked, if needed, in another PR. This PR just improves the styling of the tooltip offsets.

KevinWu098

PR looks really great, thanks for tackling this much-requested feature! Will be a really nice value add for users.

Have added a handful of (mostly) non-blocking / quick fix comments mostly regarding code standards.

For testing:

Schedule select popover buttons (duplicate, rename, delete) work after reordering
Autosave works
Mobile works, Keyboard controls work
Skeleton Mode works great (or rather, doesn't)
Styles look good
Deleting schedules correctly deletes from the appropriate schedule

KevinWu098 · 2025-02-08T09:27:49Z

apps/antalmanac/src/actions/ActionTypesStore.ts

@@ -143,7 +152,7 @@ class ActionTypesStore extends EventEmitter {

    async loadScheduleFromLocalSave() {
        const unsavedActionsString = getLocalStorageUnsavedActions();
-
+        console.log(unsavedActionsString);


chore: extraneous console log

KevinWu098 · 2025-02-08T09:27:57Z

apps/antalmanac/src/actions/ActionTypesStore.ts

@@ -153,18 +162,20 @@ class ActionTypesStore extends EventEmitter {
        const actions = parseUnsavedActionsString(unsavedActionsString);

        actions.forEach((action) => {
+            console.log(typeof action);


chore: console log

KevinWu098 · 2025-02-08T09:44:34Z

apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx

+                inputProps={{
+                    maxLength: NOTE_MAX_LEN,
+                    style: { cursor: skeletonMode ? 'not-allowed' : 'text' },
+                }}
                InputProps={{ disableUnderline: true }}
                fullWidth
                multiline
                disabled={skeletonMode}
+                sx={{
+                    '& .MuiInputBase-root': {
+                        cursor: skeletonMode ? 'not-allowed' : 'text',
+                    },
+                }}


question (non-blocking): why are we applying the cursor styling in both inputProps and in sx?

KevinWu098 · 2025-02-08T09:47:38Z

apps/antalmanac/src/components/Calendar/Toolbar/ScheduleSelect/drag-and-drop/SortableList.tsx

+        <DndContext
+            sensors={sensors}
+            modifiers={[restrictToVerticalAxis]}
+            onDragStart={({ active }) => {


suggestion: Generally, it's better to extract logic out into named functions rather than using inline anonymous functions. Won't ask of that in this PR, but I think the codebase would be better off as we move towards explicit handlers

KevinWu098 · 2025-02-08T09:48:44Z

apps/antalmanac/src/components/Calendar/Toolbar/ScheduleSelect/drag-and-drop/SortableList.tsx

suggestion: If you followed any documentation / largely drew your implementation from some source(s), it would be beneficial for future maintenance to link it here in a JSDoc

KevinWu098 · 2025-02-08T09:49:14Z

apps/antalmanac/src/components/Calendar/Toolbar/ScheduleSelect/drag-and-drop/SortableItem.tsx

+            }}
+        >
+            <DragIndicatorIcon
+                style={{


issue: prefer sx

KevinWu098 · 2025-02-08T09:51:28Z

apps/antalmanac/src/components/Calendar/Toolbar/ScheduleSelect/drag-and-drop/SortableItem.tsx

+    disabled?: boolean;
+}
+
+export function DragHandle({ disabled = false }: DragHandleProps) {


question/nit (non-blocking): we should keep files (mostly) atomic -- is there a reason this isn't in another file DragHandle.tsx?

KevinWu098 · 2025-02-08T09:53:22Z

apps/antalmanac/src/components/Calendar/Toolbar/ScheduleSelect/ScheduleSelect.tsx

+                            return (
+                                <SortableList.Item id={item.id}>
+                                    <Box
+                                        display="flex"


suggestion: place these props in sx

jotalis added 11 commits December 27, 2024 23:42

fix: fetch updated schedule names for copy, delete, rename

89d7e41

feat: build the sortable dnd components

021e4f4

feat: reordering schedule functionality

d263255

feat: implement schedule reordering into ScheduleSelect

513a568

fix(copy-button): ensure correct schedule is copied

f7efdcf

previously, the copy button would copy the selected schedule instead of the schedule it was linked to.

fix: offset tooltip to be consistent with button tooltips

8410422

feat: make schedule note in skeleton mode more clearly disabled

cbddd62

chore: remove unused code and improve readability

101b66d

chore: cleanup code

378acd8

feat: add reordering as an action stored in local storage

fd4ef8e

Merge branch 'main' into dnd-schedules

f0c58e8

jotalis requested review from MinhxNguyen7, KevinWu098 and adcockdalton December 29, 2024 04:40

jotalis mentioned this pull request Dec 29, 2024

fix: add copy, rename, and delete as unsaved actions properly #1091

Merged

Merge branch 'main' into dnd-schedules

536c935

MinhxNguyen7 removed their request for review December 31, 2024 19:26

MinhxNguyen7 assigned jotalis Jan 6, 2025

jotalis removed the request for review from KevinWu098 January 7, 2025 23:34

MinhxNguyen7 requested changes Jan 8, 2025

View reviewed changes

jotalis added 2 commits January 8, 2025 12:42

fix: add black drag handle for light mode

01076ac

Merge branch 'main' into dnd-schedules

1dc9228

MinhxNguyen7 requested review from MinhxNguyen7 and removed request for MinhxNguyen7 January 17, 2025 22:02

jotalis requested a review from MinhxNguyen7 January 21, 2025 10:41

adcockdalton requested changes Jan 22, 2025

View reviewed changes

Merge branch 'main' into dnd-schedules

3cac598

fix: deleting as an unsaved action corresponds to correct schedule

9ef1dad

jotalis requested a review from adcockdalton February 5, 2025 12:35

github-actions bot deployed to staging-frontend February 5, 2025 12:35 View deployment

KevinWu098 changed the title ~~feature/drag-and-drop schedules~~ feat: drag-and-drop schedules Feb 8, 2025

KevinWu098 requested changes Feb 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: drag-and-drop schedules #1089

feat: drag-and-drop schedules #1089

jotalis commented Dec 29, 2024 •

edited

Loading

MinhxNguyen7 commented Dec 29, 2024 •

edited

Loading

MinhxNguyen7 left a comment

MinhxNguyen7 commented Jan 17, 2025

adcockdalton left a comment

jotalis commented Jan 22, 2025

KevinWu098 left a comment

KevinWu098 Feb 8, 2025

KevinWu098 Feb 8, 2025

KevinWu098 Feb 8, 2025

KevinWu098 Feb 8, 2025

KevinWu098 Feb 8, 2025

KevinWu098 Feb 8, 2025

KevinWu098 Feb 8, 2025

KevinWu098 Feb 8, 2025

feat: drag-and-drop schedules #1089

Are you sure you want to change the base?

feat: drag-and-drop schedules #1089

Conversation

jotalis commented Dec 29, 2024 • edited Loading

Summary

Test Plan

Issues

MinhxNguyen7 commented Dec 29, 2024 • edited Loading

MinhxNguyen7 left a comment

Choose a reason for hiding this comment

MinhxNguyen7 commented Jan 17, 2025

adcockdalton left a comment

Choose a reason for hiding this comment

jotalis commented Jan 22, 2025

KevinWu098 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jotalis commented Dec 29, 2024 •

edited

Loading

MinhxNguyen7 commented Dec 29, 2024 •

edited

Loading