Skip to content

feat(resources): browsable room finder with availability and dropdown filters#8264

Open
Rikdekker wants to merge 2 commits intonextcloud:mainfrom
Rikdekker:feature/visual-room-browser-v2
Open

feat(resources): browsable room finder with availability and dropdown filters#8264
Rikdekker wants to merge 2 commits intonextcloud:mainfrom
Rikdekker:feature/visual-room-browser-v2

Conversation

@Rikdekker
Copy link
Copy Markdown

@Rikdekker Rikdekker commented May 5, 2026

Summary

Replace the search-based resource picker with a browsable room finder in the right column of the event editor. All room principals are loaded on mount, with real-time availability via free/busy queries. Filters are presented as NcSelect dropdowns following the design feedback on #7996.

This PR replaces #7996. Per @nimishavijay's scope feedback, the modal-layout improvements and hybrid meeting toggles from #7996 are intentionally left out and will be proposed in separate PRs later.

image

What

  • All room principals are fetched on mount via principalsStore.getRoomPrincipals and shown as cards
  • Each card displays availability (Available / Unavailable / Reserved), capacity, room number, type, and an add/remove button
  • Availability is checked via the existing checkResourceAvailability() from freeBusyService.js; updates within 500ms (debounced) when start/end date changes
  • Adding a room auto-fills the event LOCATION property from roomAddress (depends on the principal mapping in the prerequisite PR)
  • Filters: text search, "Available only" toggle, minimum capacity, plus dynamic NcSelect dropdowns for Building, Floor, and Features (populated from actual room metadata)
  • Read-only mode and non-organizer view hide the action buttons
  • Empty state when no room backend is registered

Why this PR addresses the previous review feedback

Reviewer Feedback Addressed
@SebastianKrupinski Convert to TypeScript with Composition API + <script setup> ✅ both ResourceList.vue and ResourceRoomCard.vue use <script setup lang=\"ts\">
@SebastianKrupinski Delete unused ResourceListItem.vue and ResourceListSearch.vue ✅ removed
@SebastianKrupinski Restore isViewedByOrganizer guard in onMounted ✅ restored
@SebastianKrupinski Copyright year ✅ 2026
@jancborchardt Outlook-style right sidebar ✅ stays in the existing right column of EditFull.vue
@jancborchardt Use NcSelect dropdowns instead of filter chips ✅ chips replaced with NcSelect for Building / Floor / Features
@jancborchardt NC design language and alignment ✅ uses NC color tokens (no hex), NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcTextField, NcSelect
@nimishavijay Keep scope to room management only ✅ this PR touches only ResourceList.vue, ResourceRoomCard.vue, and resourceProps.js
@nimishavijay Update UI per Jan's feedback

Files

  • src/components/Editor/Resources/ResourceList.vue — replaced (244 → ~600 lines)
  • src/components/Editor/Resources/ResourceRoomCard.vue — new
  • src/components/Editor/Resources/ResourceListItem.vue — deleted (no longer used)
  • src/components/Editor/Resources/ResourceListSearch.vue — deleted (no longer used)
  • src/models/resourceProps.js — adds formatFacility() helper and extends getAllRoomTypes() with additional standard room types

Dependency

This PR depends on the principal-mapping PR. Please merge that first:

(Alternatively, if you'd prefer, I can rebase this PR onto main once #8263 is merged.)

Related

Test plan

  • Open an event editor with a room backend registered (e.g. RoomVox)
  • All rooms are displayed in the right column
  • Building / Floor / Features dropdowns are populated from actual room metadata (only show when data exists)
  • Text search filters across name, building, address, floor, room number
  • "Available only" toggle hides unavailable rooms
  • Minimum capacity filter works
  • Free/busy availability updates ~500ms after changing event time
  • Adding a room populates the event LOCATION field
  • Removing a room is reflected in availability
  • Read-only mode hides add/remove buttons
  • Non-organizer view hides action buttons
  • Without a room backend, the finder shows "No rooms available"
  • npm run test:unit passes

@codecov
Copy link
Copy Markdown

codecov Bot commented May 5, 2026

Codecov Report

❌ Patch coverage is 80.95238% with 4 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
src/models/principal.js 80.95% 3 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

Rik Dekker added 2 commits May 5, 2026 22:44
Extend the principal model to extract room-seating-capacity,
room-type, room-features, room-building-address, and
room-building-room-number from CalDAV principal responses.

These properties are defined in the CalDAV standard and already
served by Nextcloud room backends, but not yet used by the Calendar
frontend. Mapping them into the principal model makes them available
for any future UI improvement (e.g. a browsable room finder) without
changing how principals are fetched. Backward compatible: properties
default to null when not provided by the backend.

Also derives roomBuildingName from the building address (first
segment) and constructs a roomAddress string suitable for the event
LOCATION field.

Signed-off-by: Rik Dekker <rik@rikdekker.nl>
… filters

Replace the search-based resource picker with a browsable room finder
that loads all room principals on mount and shows their availability
in real time via free/busy queries.

UI follows the design feedback from @jancborchardt on PR nextcloud#7996:
right-column placement (Outlook-style), NcSelect dropdowns for
Building/Capacity/Floor/Features (no chips), text search, and a
"Show unavailable" toggle. Each room is rendered as a compact card
with availability status, capacity, and add/remove action.

Selecting a room auto-fills the event LOCATION property using the
roomAddress derived from CalDAV building-address and room-number
metadata.

Implementation reuses existing services and components:
- principalsStore.getRoomPrincipals for initial load
- checkResourceAvailability() from freeBusyService.js for availability
- @nextcloud/vue: NcSelect, NcTextField, NcCheckboxRadioSwitch,
  NcLoadingIcon, NcButton

Removes the now-redundant ResourceListItem.vue and
ResourceListSearch.vue. Adds formatFacility() helper and extends
getAllRoomTypes() in resourceProps.js with additional standard
room types (board room, conference room, rehearsal room, studio,
outdoor area).

Components are written in TypeScript with Composition API and
<script setup>, following the Sebastian Krupinski review feedback.

Depends on the principal.js room metadata mapping
(feat(principal): map CalDAV room metadata properties).

Signed-off-by: Rik Dekker <rik@rikdekker.nl>
@Rikdekker Rikdekker force-pushed the feature/visual-room-browser-v2 branch from bd9b34d to 3edf2ae Compare May 5, 2026 20:46
@SebastianKrupinski
Copy link
Copy Markdown
Contributor

Hi @Rikdekker

Thank you for the PR. I will review it as soon as I can.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants