Fix calendar lists not being orderable any more

[GVodyanov]

Fix #6501

So the problem with this bug is that the way that dragging the calendars previously worked is conceptually incompatible with the division of calendars into different sections, mostly because of the hidden calendars. The hidden calendars being part of the order, but being in a different place from all the others, causes the order coming from vue-draggable to be wrong. Another issue discussed with Christoph is the drag to reorder feature is pretty hard to discover.

Here are a few things I thought about:

• Instead of having one big orderable section, have 3, one for personal, one for shared, and one for deck. This however still doesn't fix the issue of hidden calendars.
• One potential solution to the hidden calendars is making all calendars unhidden when the users starts dragging, but this would be pretty jarring.
• Have some sort of button indicating that you are able to reorder the calendars (should probably talk with designers)

In the end to make this happen I thought of adding a button which opens a modal with the three sections: personal, shared, and deck, and WITHOUT the hidden calendars section.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 45 lines in your changes missing coverage. Please review.

Project coverage is 23.21%. Comparing base (454e65d) to head (9bf06c7).
Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
.../AppNavigation/CalendarList/CalendarOrderModal.vue	0.00%	41 Missing ⚠️
src/components/AppNavigation/CalendarList.vue	0.00%	4 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #6536      +/-   ##
============================================
- Coverage     23.33%   23.21%   -0.12%     
  Complexity      453      453              
============================================
  Files           248      249       +1     
  Lines         11777    11835      +58     
  Branches       2257     2268      +11     
============================================
  Hits           2748     2748              
- Misses         8705     8763      +58     
  Partials        324      324              

Flag	Coverage Δ
javascript	14.86% <0.00%> (-0.10%)	⬇️
php	59.29% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[GVodyanov]

What it could look like:

[ChristophWurst]

I'd say ignore hidden calendars for ordering. Just sort them alphabetically all the time.

For own vs shared calendars vs deck I'd find it OK to split the drag area into three, because you can't drag from owned calendars to shared etc.

Have some sort of button indicating that you are able to reorder the calendars (should probably talk with designers)

That's a bonus, but I'd support that for feature discoverability 👍

[GVodyanov]

@ChristophWurst The issue with ignoring hidden calendars is that even though they are hidden, they still make up the "order" of the calendars. So if you have:

• Calendar ID 1
• Calendar ID 2 (hidden)
• Calendar ID 3
• Calendar ID 4

With the order [1, 2, 3, 4]

The draggable list would show:

• Calendar ID 1
• Calendar ID 3
• Calendar ID 4

Now imagine you move Calendar ID 4 to the second position, resulting in:

• Calendar ID 1
• Calendar ID 4
• Calendar ID 3

The order could either be [1, 2, 4, 3] or [1, 4, 2, 3] seeing as the hidden calendar, even if not displayed in the UI, still is part of the list. This causes draggable to give weird results.

There are a few ways that come to mind to solve this: show the hidden calendars when dragging (jarring because they appear out of nowhere), append hidden calendars to the end (messing up the order when u want to hide a calendar), etc. The modal is also one.

[ChristophWurst]

append hidden calendars to the end (messing up the order when u want to hide a calendar)

This :)

See hidden list as extension of the visible calendars list. In your example, the order will be [ 1 4 3 2 ]. When you unhide the calendar it will be at the bottom of the visible calendars, which seems acceptable to me.