feat: implement resources and rooms overview

[st3iny]

Fix #3185

Requires nextcloud/cdav-library#890

TODO

• Implement a list (modal?) that shows all available rooms
• Add an action to show the free busy slots for a room (action/button?)

How to use

1. Install https://github.com/nextcloud/calendar_resource_management
2. Run the following script to add some rooms:

occ calendar-resource:building:create 'Arkham Asylum' \
    --address 'Amadeus Way, Gotham NG11 0AS' \
    --description 'Elizabeth Arkham Asylum for the Criminally Insane' \
    --wheelchair-accessible false
occ calendar-resource:story:create 1 '1st floor'
occ calendar-resource:story:create 1 '2nd floor'
occ calendar-resource:room:create 1 arkham_meeting_1 'The Joker' [email protected] 'meeting-room' \
    --contact-person-user-id amadeus \
    --capacity 10 \
    --room-number 404 \
    --has-phone '+1 555 777 123' \
    --has-video-conferencing true \
    --has-tv false \
    --has-projector false \
    --has-whiteboard false \
    --wheelchair-accessible false
occ calendar-resource:room:create 2 arkham_meeting_2 'Bane' [email protected] 'other'

3. Run the cron job multiple times to update metadata: php -f [path_to_nextcloud]/cron.php

The data will be fetched automatically and is available via:

this.$store.getters.getRoomPrincipals // get an array room objects
this.$store.getters.getResourcePrincipals // get an array resources objects

Exemplary data

const someRoom = this.$store.getters.getRoomPrincipals[0]
someRoom.dav.roomAddress
someRoom.dav.roomBuildingAddress
someRoom.dav.roomBuildingRoomNumber
someRoom.dav.roomBuildingStory
someRoom.dav.roomFeatures
someRoom.dav.roomId
someRoom.dav.roomSeatingCapacity
someRoom.dav.roomType
// [...] etc.

[codecov]

Codecov Report

Attention: Patch coverage is 3.62319% with 133 lines in your changes missing coverage. Please review.

Project coverage is 23.68%. Comparing base (fd1e0cb) to head (8b09651).
Report is 38 commits behind head on main.

Files	Patch %	Lines
...mponents/Editor/FreeBusy/RoomAvailabilityModal.vue	0.00%	86 Missing ⚠️
...omponents/Editor/FreeBusy/RoomAvailabilityList.vue	0.00%	28 Missing ⚠️
src/store/principals.js	0.00%	10 Missing and 1 partial ⚠️
...components/Editor/Resources/ResourceListSearch.vue	0.00%	5 Missing ⚠️
src/views/Calendar.vue	0.00%	2 Missing ⚠️
src/services/caldavService.js	50.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #5961      +/-   ##
============================================
- Coverage     23.97%   23.68%   -0.29%     
  Complexity      457      457              
============================================
  Files           247      249       +2     
  Lines         11606    11773     +167     
  Branches       2177     2214      +37     
============================================
+ Hits           2782     2788       +6     
- Misses         8509     8667     +158     
- Partials        315      318       +3     

Flag	Coverage Δ
javascript	15.26% <3.62%> (-0.21%)	⬇️
php	59.53% <ø> (ø)

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.

[GretaD]

not ready for review, i accidentally discarded my local changes and had to redo it :( so, i pushed not to lose this draft.

[GretaD]

[kesselb]

Are you going to update cdav-library with this pr and or a follow-up?

[kesselb]

I'm seeing the error below when clicking on "Check room availability".

TypeError: room.toAttendeeProperty is not a function

Likely I did something wrong with build and link.

[st3iny]

@kesselb The PR is already released and bumped here. Linking is not required anymore and it should work out of the box. I adjusted the description accordingly.

[GretaD]

[kesselb]

Modal size "large" is still relatively small. We could use "full" here to improve the usability especially on larger screens.

large:

full:

I'm aware full looks a bit odd ;)

[kesselb]

A good enhancement would be to select multiple rooms and show the availability within the same table.

[kesselb]

As a user, I would like to have a button to "pick" the current room for the event. Currently, you need to close the modal again and type the room name into the field.

[GretaD]

As a user, I would like to have a button to "pick" the current room for the event. Currently, you need to close the modal again and type the room name into the field.

yes,, thats a good improvement, but for now, the goal of this pr is the overview modal.

[ChristophWurst]

What is missing here?

[GretaD]

What is missing here?

is was the modal closing issue. Richard fixed it yesterday.

[ChristophWurst]

what is necessary to make the button show? I do have rooms on my system. wrong checkout

[ChristophWurst]

Works as advertised

Some feedback

• The action behind the button Room availability might be unclear. Consider renaming to Show all rooms or something similar. And then add a heading afterwards for Search room or similar. Then the UI will be structured more clearly.
• Two headings Availability of rooms and Find a room
• Find a room for a static list. Find implies that there is a way to search.
• The room list should probably be a table-like structure. The name can grow and the buttons to check availability are aligned on the right.
• Vue warning when I open the modal
• JS error when I click into the free/busy calendar

[ChristophWurst]

See nextcloud/spreed#12732 for the onMounted/setup warning. It seems to happen with other components too.

[SebastianKrupinski]

Works Good.