Enh: free busy UI

[hamza221]

Fixes #39

Current state	Goal
https://github.com/nextcloud/calendar/assets/40746210/50a499d4-4c40-413e-b171-a8d76843c762

Todo list from design team:
--Nimisha
Differences from current free/busy view:

• Use components for all the elements (eg, date picker, today/previous day/next day buttons)
• Add a heading "Find a time"
• Add the time and time zone below the date in the top left corner
• Nice-to-haves:
  • The "guide" for the color (currently below the free/busy section) can be shifted into a small help section on the top right, which on hover opens a tooltip showing the guide
  • change the colors:
    • busy: --color-error in 0.3 opacity
    • out of office/unavailable: --color-background-darker
    • busy tentatively: --color-warning in 0.3 opacity
    • unknown: --color-info in 0.3 opacity

New features:

• Allow selecting different times in the modal itself: the selected time is indicated by the border (2px solid --color-primary-element with --border-radius)
• Selected time is also reflected in the top left date and time
• Show detailed attendees: Attendee names are shown as well as avatar and role, similar to how it's shown in the attendee list in the sidebar
• Add and remove attendees: Add attendees via a select component, similar to the attendee list in the sidebar,
• newly added attendees are shown at the bottom
• Remove attendees using a close button
• A done button to save changes
  -- Jan
• Scroll point: Currently when opening the free/busy modal, it always starts at midnight. Instead, it should scroll so the current time slot is in the middle. If it’s a full-day event, it could start at e.g. 8/9/10 AM, something of the sort. (If the person has out of office set, at their start of day for example)
• Color contrast: We need to make sure that the out of office, busy etc. blocks have proper contrast and/or are understandable without color. E.g. for out of office we could use grey with diagonal hatch pattern lines, and for busy we could use the red with diagonal criss-cross lines.
• Width: Since this element will most likely always scroll horizontally, it would be good to give it more space to the sides. Currently it is a box inside the modal, but it could also extend to the left and right edge (the text on the left should still be aligned with the other text of course). This is mostly a detail though, and least important of the points. :)

[codecov]

Codecov Report

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

Project coverage is 24.00%. Comparing base (7a307bb) to head (ccaca16).
Report is 3 commits behind head on main.

Files	Patch %	Lines
src/components/Editor/FreeBusy/FreeBusy.vue	0.00%	45 Missing ⚠️
src/utils/freebusy.js	0.00%	4 Missing ⚠️
src/views/EditSidebar.vue	0.00%	4 Missing ⚠️
src/components/Editor/Invitees/InviteesList.vue	0.00%	3 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #5671      +/-   ##
============================================
- Coverage     24.13%   24.00%   -0.14%     
  Complexity      423      423              
============================================
  Files           243      243              
  Lines         11038    11100      +62     
  Branches       1833     1838       +5     
============================================
  Hits           2664     2664              
- Misses         8374     8436      +62     

Flag	Coverage Δ
javascript	14.96% <0.00%> (-0.11%)	⬇️
php	61.97% <ø> (ø)

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.

[tcitworld]

Adding the delete option to fullCalendar is tricky since it's a premium feature

We are entitled to the premium features: https://fullcalendar.io/license

calendar/src/components/Editor/FreeBusy/FreeBusy.vue

Line 223 in 3bc0d2d

schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',

[ChristophWurst]

• Nitpick: remove ":" at
• Bug: text is just cut and not ellipsized at
• Bug: only have border radius for top left and top right of first and bottom left and bottom right for last row of the fake event at

[GVodyanov]

Error when opening the ? icon

Bad contrast of calendar icon

[hamza221]

Bad contrast of calendar icon

It's a bug in nc/vue

[ChristophWurst]

is this a generic issue with NcSelect? then let's make sure this is tracked and fixed upstream

we can keep this as temporary fix

[hamza221]

nextcloud-libraries/nextcloud-vue#5325

[ChristophWurst]

Scroll point

Is it fixable? That was the highest priority change requested by Jan. We should have this here or in a follow-up.

[ChristophWurst]

Works 🚀

^ IMO needs a bit of padding but we can leave that open until the design review

Great work!