Feature/visual room browser v4

src/components/Editor/Resources/ResourceList.vue

@@ -19,11 +19,10 @@
 			</NcButton>
 		</div>
 
-		<RoomAvailabilityList
+		<RoomSelectionModal
 			v-if="showRoomAvailabilityModal"
-			:showDialog="showRoomAvailabilityModal"
 			:calendarObjectInstance="calendarObjectInstance"
-			@update:showDialog="setShowRoomAvailabilityModal" />
+			@close="setShowRoomAvailabilityModal(false)" />
 
 		<ResourceListSearch
 			v-if="!isReadOnly && hasUserEmailAddress && resourceBookingEnabled"
@@ -59,9 +58,9 @@ import {
 import debounce from 'debounce'
 import { mapStores } from 'pinia'
 import DoorOpenIcon from 'vue-material-design-icons/DoorOpen.vue'
-import RoomAvailabilityList from '../FreeBusy/RoomAvailabilityList.vue'
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceListSearch from './ResourceListSearch.vue'
+import RoomSelectionModal from './RoomSelectionModal.vue'
 import { advancedPrincipalPropertySearch } from '../../../services/caldavService.js'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
 import useCalendarObjectInstanceStore from '../../../store/calendarObjectInstance.js'
@@ -75,7 +74,7 @@ export default {
 		ResourceListSearch,
 		NcButton,
 		DoorOpenIcon,
-		RoomAvailabilityList,
+		RoomSelectionModal,
 	},
 
 	props: {

src/components/Editor/Resources/ResourceListItem.vue

@@ -86,12 +86,12 @@ import Delete from 'vue-material-design-icons/TrashCanOutline.vue'
 import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
 import RoomAvailabilityModal from '../FreeBusy/RoomAvailabilityModal.vue'
 import { mapPrincipalObjectToAttendeeObject } from '../../../models/attendee.js'
-import { formatRoomType } from '../../../models/resourceProps.js'
 import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
 import useCalendarObjectInstanceStore from '../../../store/calendarObjectInstance.js'
 import usePrincipalsStore from '../../../store/principals.js'
 import { removeMailtoPrefix } from '../../../utils/attendee.js'
 import logger from '../../../utils/logger.js'
+import { formatRoomType } from '@/models/resourceProps'
 
 export default {
 	name: 'ResourceListItem',

src/components/Editor/Resources/ResourceRoomCard.vue

@@ -0,0 +1,220 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { RoomOption } from '@/utils/roomFilter'
+
+import { n, t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
+import { computed } from 'vue'
+import AccountOutlineIcon from 'vue-material-design-icons/AccountOutline.vue'
+import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import { formatRoomFeature, formatRoomType } from '@/models/resourceProps'
+
+const props = withDefaults(defineProps<{
+	room: RoomOption
+	isSelected?: boolean
+	canCheckAvailability?: boolean
+}>(), {
+	isSelected: false,
+	canCheckAvailability: false,
+})
+
+const emit = defineEmits<{
+	toggle: [room: RoomOption]
+	checkAvailability: [room: RoomOption]
+}>()
+
+/**
+ * An unavailable room cannot be picked, but a room that was picked before it
+ * became unavailable must stay selectable so it can be deselected again.
+ */
+const isUnavailable = computed<boolean>(() => !props.room.isAvailable && !props.isSelected)
+
+const capacityLabel = computed<string | null>(() => {
+	const capacity = props.room.principal.roomSeatingCapacity
+	if (capacity === null) {
+		return null
+	}
+
+	return n('calendar', '%n seat', '%n seats', capacity)
+})
+
+const metaLabels = computed<string[]>(() => {
+	const labels = new Array<string>()
+	const roomType = props.room.principal.roomType
+	if (roomType) {
+		labels.push(formatRoomType(roomType) ?? roomType)
+	}
+
+	const roomNumber = props.room.principal.roomBuildingRoomNumber
+	if (roomNumber) {
+		labels.push(roomNumber)
+	}
+
+	for (const feature of props.room.principal.roomFeatures ?? []) {
+		labels.push(formatRoomFeature(feature))
+	}
+
+	return labels
+})
+/**
+ * Toggle the room, unless it cannot be booked anyway
+ */
+function onToggle(): void {
+	if (isUnavailable.value) {
+		return
+	}
+
+	emit('toggle', props.room)
+}
+</script>
+
+<template>
+	<div
+		class="room-card"
+		:class="{
+			'room-card--selected': isSelected,
+			'room-card--unavailable': isUnavailable,
+		}">
+		<button
+			class="room-card__main"
+			type="button"
+			:aria-pressed="isSelected"
+			:aria-disabled="isUnavailable"
+			@click="onToggle">
+			<span class="room-card__info">
+				<span class="room-card__name">{{ room.principal.displayname }}</span>
+				<span class="room-card__meta">
+					<span
+						v-if="room.principal.roomSeatingCapacity !== null"
+						class="room-card__meta__capacity"
+						:aria-label="capacityLabel">
+						<AccountOutlineIcon :size="16" />
+						{{ room.principal.roomSeatingCapacity }}
+					</span>
+					<template v-for="(metaLabel, idx) in metaLabels" :key="idx">
+						<span v-if="idx != 0 || room.principal.roomSeatingCapacity !== null">
+							·
+						</span>
+						<span>
+							{{ metaLabel }}
+						</span>
+					</template>
+				</span>
+			</span>
+			<span v-if="isUnavailable" class="room-card__status">
+				{{ t('calendar', 'Unavailable') }}
+			</span>
+			<Check v-else-if="isSelected" class="room-card__check" :size="20" />
+
+			<div class="room-card__availability">
+				<NcButton
+					v-if="canCheckAvailability"
+					variant="tertiary"
+					:ariaLabel="t('calendar', 'Check room availability')"
+					:title="t('calendar', 'Check room availability')"
+					@click.stop="emit('checkAvailability', room)">
+					<template #icon>
+						<CalendarClock :size="20" />
+					</template>
+				</NcButton>
+			</div>
+		</button>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.room-card {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	border: 2px solid var(--color-border);
+	border-radius: var(--border-radius-element);
+	overflow: hidden;
+	margin-bottom: var(--default-grid-baseline);
+
+	&--selected {
+		border-color: var(--color-primary-element);
+		background-color: var(--color-primary-element-light);
+	}
+
+	& &__main {
+		margin: 0;
+	}
+
+	&__main {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 2);
+		flex: 1 1 auto;
+		min-width: 0;
+		padding: calc(var(--default-grid-baseline) * 2);
+		border: none;
+		border-radius: 0;
+		background-color: transparent;
+		text-align: start;
+		font-weight: normal;
+
+		&:focus {
+			background-color: unset;
+		}
+	}
+
+	&--unavailable &__main {
+		cursor: not-allowed;
+	}
+
+	&--unavailable &__main &__availability {
+		cursor: pointer;
+	}
+
+	&--unavailable &__info {
+		opacity: 0.7;
+	}
+
+	&__info {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	&__name {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	&__meta {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		color: var(--color-text-maxcontrast);
+		font-size: var(--font-size-small, 0.875rem);
+
+		&__capacity {
+			display: inline-flex;
+			align-items: baseline;
+			gap: var(--default-grid-baseline);
+		}
+	}
+
+	&__status {
+		color: var(--color-error-text);
+		white-space: nowrap;
+	}
+
+	&__check {
+		color: var(--color-primary-element);
+	}
+
+	&__availability {
+		flex: 0 0 auto;
+		margin-inline-end: var(--default-grid-baseline);
+	}
+}
+</style>

src/components/Editor/Resources/ResourceRoomType.vue

@@ -24,7 +24,7 @@
 
 <script>
 import { NcSelect } from '@nextcloud/vue'
-import { getAllRoomTypes } from '../../../models/resourceProps.js'
+import { getAllRoomTypes } from '@/models/resourceProps'
 
 export default {
 	name: 'ResourceRoomType',