feat: Drag & drop for re-ordering event types #15495

Amit91848 · 2024-06-19T14:55:46Z

What does this PR do?

Fixes [CAL-3514] Drag & drop for re-ordering event types #14701
Fixes CAL-3514

Implemented Drag and Drop using ~~React Beautiful DnD library~~ Framer motion's Reorder Component

Recording.2024-06-20.173734.mp4

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected)
I have added a Docs issue here if this PR makes changes that would require a documentation change
I have added or modified automated tests that prove my fix is effective or that my feature works (PRs might be rejected if logical changes are not properly tested)

vercel · 2024-06-19T14:55:51Z

@Amit91848 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

graphite-app · 2024-06-19T15:00:15Z

Graphite Automations

"Add community label" took an action on this PR • (06/19/24)

1 label was added to this PR based on Keith Williams's automation.

"Add foundation team as reviewer" took an action on this PR • (06/19/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add consumer team as reviewer" took an action on this PR • (06/19/24)

1 reviewer was added to this PR based on Keith Williams's automation.

socket-security · 2024-06-19T15:02:53Z

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

Amit91848 · 2024-06-20T12:20:11Z

apps/web/modules/event-types/views/event-types-listing-view.tsx

+  async function moveEventType(index: number, increment: number, enableAnimation: boolean) {
+    enableAnimations(enableAnimation);


Recording.2024-06-19.201752.mp4

Only use useAutoAnimate when using arrow buttons or else causes double animations as react beautiful dnd has its own drop animation

Amit91848 · 2024-06-20T12:23:04Z

apps/web/modules/event-types/views/event-types-listing-view.tsx

-    }
+
+    newList.splice(index, 1);
+


Initially thought this was causing animation issues, but isn't the case. lmk if this should be reverted

joeauyeung · 2024-06-24T16:38:30Z

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import type { FC } from "react";
 import { memo, useEffect, useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";


@Amit91848 the unpacked size of this package is 1.39mb. I feel like that's pretty big but I wanted to get other people's opinions.

Yeah makes sense. I looked up a few more options lmk what do you think

Pragmatic Drag and Drop from the same guys as React Beautiful Dnd, used at Atlassian for trello jira etc. Unpacked is 407kb

Dnd Kit Unpacked is slightly smaller at 1.05 Mb, but very widely used.

Form kit Unpacked is 516kb but it is only 6-7 months old so not sure how stable it is.

I noticed framer-motion is already being used, it has something similar Reorder .

keithwillcode · 2024-06-28T10:22:43Z

I think we had another PR opened for this too and we agreed that for drag and drop, we don't want to introduce another package for this. Can you confirm @PeerRich @sean-brydon

sean-brydon · 2024-06-28T10:25:21Z

I think we had another PR opened for this too and we agreed that for drag and drop, we don't want to introduce another package for this. Can you confirm @PeerRich @sean-brydon

Yeah lets try not to use a new package for this. Not a massive important feature so lets save them KBs! If we can get this working with framer motion it'd be great - i understand it has its limitations

Udit-takkar · 2024-07-02T06:20:20Z

apps/web/package.json

@@ -106,6 +106,7 @@
    "qrcode": "^1.5.1",
    "raw-body": "^2.5.1",
    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",


are you using this package anywhere?

No I am trying to make it work using framer-motions Reorder, this is still a WIP will remove it soon. Making it draft till then

anikdhabal

Event.Types._.Cal.com.and.14.more.pages.-.Personal.-.Microsoft.Edge.2024-07-04.23-25-12.mp4

Apart from this, currently there is a lot of functionality related to event types that is broken. You need to refresh the page in order to see the results. For example, after deleting an event type or changing the event type's title or description, you need to refresh the page to see the results. The 'Show on Profile' toggle button is not working.

@Amit91848 pls fix

…ag_and_drop_reordering_event_type

… feat/drag_and_drop_reordering_event_type" This reverts commit b638e7e.

…ag_and_drop_reordering_event_type

… feat/drag_and_drop_reordering_event_type" This reverts commit 40337c7.

Amit91848 · 2024-07-06T18:36:45Z

Event.Types._.Cal.com.and.14.more.pages.-.Personal.-.Microsoft.Edge.2024-07-04.23-25-12.mp4

This an issue in the current version of framer-motion library, updating it should fix this, checkout #15495 (comment)

Apart from this, currently there is a lot of functionality related to event types that is broken. You need to refresh the page in order to see the results. For example, after deleting an event type or changing the event type's title or description, you need to refresh the page to see the results. The 'Show on Profile' toggle button is not working.

Fixed the sync issue between the two lists, this should work now.

anikdhabal

Also, sometimes the reordering animation works, and sometimes it does not.

Event.Types._.Cal.com.and.16.more.pages.-.Personal.-.Microsoft.Edge.2024-07-19.20-54-26.mp4

keithwillcode · 2024-07-29T04:31:45Z

Going to close this because of the low prio and issues that have been found. Not currently worth the effort to build this.

feat: Drag & drop for re-ordering event types

d9cbd4d

graphite-app bot added the community Created by Linear-GitHub Sync label Jun 19, 2024

graphite-app bot requested review from a team June 19, 2024 14:55

github-actions bot added event-types area: event types, event-types Low priority Created by Linear-GitHub Sync ui area: UI, frontend, button, form, input 🧹 Improvements Improvements to existing features. Mostly UX/UI labels Jun 19, 2024

dosubot bot added ✨ feature New feature or request ⬆️ dependencies Pull requests that update a dependency file labels Jun 19, 2024

keithwillcode added this to the v4.4 milestone Jun 19, 2024

Amit91848 and others added 3 commits June 20, 2024 11:16

fix indentation

f0505b1

Merge branch 'main' into feat/drag_and_drop_reordering_event_type

9169827

fix animation after drop

e8f9e11

Amit91848 commented Jun 20, 2024

View reviewed changes

Merge branch 'main' into feat/drag_and_drop_reordering_event_type

fe9d39e

joeauyeung reviewed Jun 24, 2024

View reviewed changes

Merge branch 'main' into feat/drag_and_drop_reordering_event_type

b31dbe9

keithwillcode added the community-interns The team responsible for reviewing, testing and shipping low/medium community PRs label Jun 27, 2024

use Reorder from framer-motion

8ddd81f

Udit-takkar reviewed Jul 2, 2024

View reviewed changes

Amit91848 marked this pull request as draft July 2, 2024 06:27

Amit91848 added 2 commits July 2, 2024 09:23

code refactor and some bug fixes

7f8c1bc

remove react beautiful dnd

efe5279

Amit91848 requested review from Udit-takkar, sean-brydon and joeauyeung July 2, 2024 10:50

anikdhabal requested changes Jul 4, 2024

View reviewed changes

Merge branch 'main' of https://github.com/calcom/cal.com into feat/dr…

b638e7e

…ag_and_drop_reordering_event_type

github-actions bot added ❗️ migrations contains migration files ❗️ .env changes contains changes to env variables labels Jul 6, 2024

Amit91848 and others added 8 commits July 6, 2024 17:05

Revert "Merge branch 'main' of https://github.com/calcom/cal.com into…

4a4c96b

… feat/drag_and_drop_reordering_event_type" This reverts commit b638e7e.

Merge branch 'main' of https://github.com/calcom/cal.com into feat/dr…

40337c7

…ag_and_drop_reordering_event_type

Revert "Merge branch 'main' of https://github.com/calcom/cal.com into…

1c4278f

… feat/drag_and_drop_reordering_event_type" This reverts commit 40337c7.

Merge branch 'main' into feat/drag_and_drop_reordering_event_type

2ac4f7a

fix merge conflicts

6a1910c

final merge error fix

38f62cf

hopefully final merge fix

af19e63

update shadowList

a292ed6

Amit91848 requested a review from anikdhabal July 6, 2024 18:36

anikdhabal removed ⬆️ dependencies Pull requests that update a dependency file ❗️ migrations contains migration files ❗️ .env changes contains changes to env variables labels Jul 19, 2024

anikdhabal requested changes Jul 20, 2024

View reviewed changes

anikdhabal marked this pull request as draft July 27, 2024 03:18

keithwillcode closed this Jul 29, 2024

dosubot bot modified the milestones: v4.4, v4.5 Aug 19, 2024

dosubot bot added this to the v4.6 milestone Sep 15, 2024

keithwillcode modified the milestones: v4.6, v4.5 Sep 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Drag & drop for re-ordering event types #15495

feat: Drag & drop for re-ordering event types #15495

Amit91848 commented Jun 19, 2024 •

edited

Loading

vercel bot commented Jun 19, 2024

graphite-app bot commented Jun 19, 2024

socket-security bot commented Jun 19, 2024 •

edited

Loading

Amit91848 Jun 20, 2024 •

edited

Loading

Amit91848 Jun 20, 2024

joeauyeung Jun 24, 2024

Amit91848 Jun 25, 2024

keithwillcode commented Jun 28, 2024

sean-brydon commented Jun 28, 2024

Udit-takkar Jul 2, 2024

Amit91848 Jul 2, 2024

anikdhabal left a comment •

edited

Loading

Amit91848 commented Jul 6, 2024

anikdhabal left a comment

keithwillcode commented Jul 29, 2024

		async function moveEventType(index: number, increment: number, enableAnimation: boolean) {
		enableAnimations(enableAnimation);

feat: Drag & drop for re-ordering event types #15495

feat: Drag & drop for re-ordering event types #15495

Conversation

Amit91848 commented Jun 19, 2024 • edited Loading

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

vercel bot commented Jun 19, 2024

graphite-app bot commented Jun 19, 2024

Graphite Automations

socket-security bot commented Jun 19, 2024 • edited Loading

Amit91848 Jun 20, 2024 • edited Loading

Choose a reason for hiding this comment

Amit91848 Jun 20, 2024

Choose a reason for hiding this comment

joeauyeung Jun 24, 2024

Choose a reason for hiding this comment

Amit91848 Jun 25, 2024

Choose a reason for hiding this comment

keithwillcode commented Jun 28, 2024

sean-brydon commented Jun 28, 2024

Udit-takkar Jul 2, 2024

Choose a reason for hiding this comment

Amit91848 Jul 2, 2024

Choose a reason for hiding this comment

anikdhabal left a comment • edited Loading

Choose a reason for hiding this comment

Amit91848 commented Jul 6, 2024

anikdhabal left a comment

Choose a reason for hiding this comment

keithwillcode commented Jul 29, 2024

Amit91848 commented Jun 19, 2024 •

edited

Loading

socket-security bot commented Jun 19, 2024 •

edited

Loading

Amit91848 Jun 20, 2024 •

edited

Loading

anikdhabal left a comment •

edited

Loading