From 8b0965144982eb3f35a4379c9d35febb217858ea Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Fri, 26 Apr 2024 13:27:59 +0200
Subject: [PATCH] feat: implement resources and rooms overview

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 .../Editor/FreeBusy/RoomAvailabilityList.vue  | 208 +++++++++
 .../Editor/FreeBusy/RoomAvailabilityModal.vue | 409 ++++++++++++++++++
 .../Editor/Resources/ResourceListSearch.vue   |  24 +-
 src/models/attendee.js                        |  20 +
 src/services/caldavService.js                 |  12 +
 src/services/freeBusySlotService.js           |   6 +-
 src/store/principals.js                       |  46 ++
 src/views/Calendar.vue                        |   6 +
 tests/javascript/unit/models/attendee.test.js |  75 +++-
 9 files changed, 803 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Editor/FreeBusy/RoomAvailabilityList.vue
 create mode 100644 src/components/Editor/FreeBusy/RoomAvailabilityModal.vue

diff --git a/src/components/Editor/FreeBusy/RoomAvailabilityList.vue b/src/components/Editor/FreeBusy/RoomAvailabilityList.vue
new file mode 100644
index 000000000..c689d4800
--- /dev/null
+++ b/src/components/Editor/FreeBusy/RoomAvailabilityList.vue
@@ -0,0 +1,208 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcDialog :open="showDialog"
+		:name="$t('calendar', 'Search room')"
+		size="large"
+		@update:open="(e) => $emit('update:show-dialog', e)">
+		<div class="modal__content__header">
+			<table>
+				<tr>
+					<th class="name">
+						{{ $t('calendar', 'Room name') }}
+					</th>
+					<th>&nbsp;</th>
+				</tr>
+				<tr v-for="room in rooms" :key="room.id">
+					<td>
+						<div class="item">
+							<div>
+								<div class="item-name">
+									{{ room.displayname }}
+								</div>
+							</div>
+						</div>
+					</td>
+					<td>
+						<div class="item-actions">
+							<NcButton type="secondary"
+								class="rooms__availability"
+								@click="openRoomAvailability(room)">
+								{{ $t('calendar', 'Check room availability') }}
+							</NcButton>
+						</div>
+					</td>
+				</tr>
+			</table>
+			<div>
+				<RoomAvailabilityModal v-if="showRoomAvailabilityModal"
+					:show.sync="showRoomAvailabilityModal"
+					:start-date="calendarObjectInstance.startDate"
+					:end-date="calendarObjectInstance.endDate"
+					:rooms="selectedRooms"
+					:calendar-object-instance="calendarObjectInstance"
+					:organizer="currentUserPrincipalAsAttendee" />
+			</div>
+		</div>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog } from '@nextcloud/vue'
+import RoomAvailabilityModal from './RoomAvailabilityModal.vue'
+import { mapPrincipalObjectToAttendeeObject } from '../../../models/attendee.js'
+import { mapStores } from 'pinia'
+import usePrincipalsStore from '../../../store/principals.js'
+
+export default {
+	name: 'RoomAvailabilityList',
+	components: {
+		NcButton,
+		NcDialog,
+		RoomAvailabilityModal,
+	},
+	props: {
+		calendarObjectInstance: {
+			type: Object,
+			required: true,
+		},
+		startDate: {
+			type: Date,
+			required: true,
+		},
+		endDate: {
+			type: Date,
+			required: true,
+		},
+		showDialog: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			showRoomAvailabilityModal: false,
+			selectedRooms: [],
+		}
+	},
+	computed: {
+		...mapStores(usePrincipalsStore),
+		rooms() {
+			return this.principalsStore.getRoomPrincipals
+		},
+		/**
+		 * Return the current user principal as a ORGANIZER attendee object.
+		 *
+		 * @return {object}
+		 */
+		currentUserPrincipalAsAttendee() {
+			return mapPrincipalObjectToAttendeeObject(
+				this.principalsStore.getCurrentUserPrincipal,
+				true,
+			)
+		},
+	},
+	methods: {
+		openRoomAvailability(room) {
+			this.selectedRooms = [room]
+			this.showRoomAvailabilityModal = true
+		},
+	},
+}
+</script>
+<style scoped lang="scss">
+.icon-close {
+	display: block;
+	height: 100%;
+}
+.modal__content {
+	padding: 50px;
+	//when the calendar is open, it's cut at the bottom, adding a margin fixes it
+	margin-bottom: 95px;
+	&__actions{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+		&__select{
+			width: 260px;
+		}
+		&__date{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			& > *{
+				margin-left: 5px;
+			}
+		}
+	}
+	&__header {
+		padding: 20px;
+		h3{
+			font-weight: 500;
+		}
+		margin-bottom: 20px;
+		&__attendees{
+			&__user-bubble{
+				margin-right: 5px;
+			}
+		}
+	}
+	&__footer{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 20px;
+		&__title{
+			h3{
+				font-weight: 500;
+			}
+			&__timezone{
+				color: var(--color-text-lighter);
+			}
+		}
+	}
+}
+:deep(.vs__search ) {
+	text-overflow: ellipsis;
+}
+:deep(.mx-input) {
+	height: 38px !important;
+}
+</style>
+<style lang="scss">
+.blocking-event-free-busy {
+	// Show the blocking event above any other blocks, especially the *blocked for all* one
+	z-index: 3 !important;
+}
+
+.free-busy-block {
+	opacity: 0.7 !important;
+}
+.rooms {
+		 &__availability {
+			 margin-bottom: 10px;
+		 }
+}
+h6 {
+	margin-top: 10px;
+}
+
+.item-name {
+	font-weight: bold;
+}
+
+.item-actions {
+	text-align: center;
+}
+
+.rooms__availability {
+	margin: 10px 0;
+}
+
+.name {
+	opacity: .8;
+}
+</style>
diff --git a/src/components/Editor/FreeBusy/RoomAvailabilityModal.vue b/src/components/Editor/FreeBusy/RoomAvailabilityModal.vue
new file mode 100644
index 000000000..153f9a312
--- /dev/null
+++ b/src/components/Editor/FreeBusy/RoomAvailabilityModal.vue
@@ -0,0 +1,409 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcModal size="large"
+		:show="show"
+		:name="$t('calendar', 'Check room availability')"
+		@update:show="(e) => $emit('update:show', e)">
+		<div class="modal__content">
+			<div class="modal__content__header">
+				<h2>{{ $t('calendar', 'Find a time') }}</h2>
+			</div>
+			<div class="modal__content__actions">
+				<div class="modal__content__actions__date">
+					<NcButton type="secondary"
+						@click="handleActions('today')">
+						{{ $t('calendar', 'Today') }}
+					</NcButton>
+					<NcButton type="secondary"
+						@click="handleActions('left')">
+						<template #icon>
+							<ChevronLeftIcon :size="20" />
+						</template>
+					</NcButton>
+					<NcButton type="secondary"
+						@click="handleActions('right')">
+						<template #icon>
+							<ChevronRightIcon :size="20" />
+						</template>
+					</NcButton>
+
+					<NcDateTimePickerNative :id="datePickerInputId"
+						:hide-label="true"
+						:value="currentDate"
+						@input="(date)=>handleActions('picker', date)" />
+					<NcPopover :focus-trap="false">
+						<template #trigger>
+							<NcButton type="tertiary-no-background">
+								<template #icon>
+									<HelpCircleIcon :size="20" />
+								</template>
+							</NcButton>
+						</template>
+						<template>
+							<div class="freebusy-caption">
+								<div class="freebusy-caption__calendar-user-types" />
+								<div class="freebusy-caption__colors">
+									<div v-for="color in colorCaption" :key="color.color" class="freebusy-caption-item">
+										<div class="freebusy-caption-item__color" :style="{ 'background-color': color.color }" />
+										<div class="fregetebusy-caption-item__label">
+											{{ color.label }}
+										</div>
+									</div>
+								</div>
+							</div>
+						</template>
+					</NcPopover>
+				</div>
+			</div>
+			<FullCalendar ref="freeBusyFullCalendar"
+				:options="options" />
+		</div>
+	</NcModal>
+</template>
+<script>
+import { NcButton, NcDateTimePickerNative, NcModal, NcPopover } from '@nextcloud/vue'
+import { getFullCalendarLocale } from '../../../fullcalendar/localization/localeProvider.js'
+import FullCalendar from '@fullcalendar/vue'
+import { getDateFormattingConfig } from '../../../fullcalendar/localization/dateFormattingConfig.js'
+import { getBusySlots, getFirstFreeSlot } from '../../../services/freeBusySlotService.js'
+import dateFormat from '../../../filters/dateFormat.js'
+import { getColorForFBType } from '../../../utils/freebusy.js'
+import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
+import momentPluginFactory from '../../../fullcalendar/localization/momentPlugin.js'
+import VTimezoneNamedTimezone from '../../../fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js'
+import interactionPlugin from '@fullcalendar/interaction'
+import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
+import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
+import HelpCircleIcon from 'vue-material-design-icons/HelpCircle.vue'
+import freeBusyBlockedForAllEventSource from '../../../fullcalendar/eventSources/freeBusyBlockedForAllEventSource.js'
+import freeBusyFakeBlockingEventSource from '../../../fullcalendar/eventSources/freeBusyFakeBlockingEventSource.js'
+import freeBusyResourceEventSource from '../../../fullcalendar/eventSources/freeBusyResourceEventSource.js'
+import { mapPrincipalObjectToAttendeeObject } from '../../../models/attendee.js'
+import { mapState } from 'pinia'
+import useSettingsStore from '../../../store/settings.js'
+import { randomId } from '../../../utils/randomId.js'
+
+export default {
+	name: 'RoomAvailabilityModal',
+	components: {
+		ChevronRightIcon,
+		ChevronLeftIcon,
+		HelpCircleIcon,
+		NcPopover,
+		NcModal,
+		FullCalendar,
+		NcDateTimePickerNative,
+		NcButton,
+	},
+	props: {
+		show: {
+			type: Boolean,
+			required: true,
+		},
+		startDate: {
+			type: Date,
+			required: true,
+		},
+		endDate: {
+			type: Date,
+			required: true,
+		},
+		calendarObjectInstance: {
+			type: Object,
+			required: true,
+		},
+		organizer: {
+			type: Object,
+			required: true,
+		},
+		rooms: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			currentDate: this.startDate,
+			currentStart: this.startDate,
+			currentEnd: this.endDate,
+			lang: getFullCalendarLocale().locale,
+			freeSlots: [],
+		}
+	},
+	computed: {
+		...mapState(useSettingsStore, {
+			timezoneId: 'getResolvedTimezone',
+		}),
+		/**
+		 * Map all given rooms to attendee properties.
+		 *
+		 * @return {import('@nextcloud/calendar-js').AttendeeProperty[]}
+		 */
+		attendees() {
+			return this.rooms.map((room) => mapPrincipalObjectToAttendeeObject(room))
+		},
+		resources() {
+			const resources = []
+			for (const attendee of this.attendees) {
+				const title = attendee.commonName || attendee.uri.slice(7)
+				resources.push({
+					id: attendee.attendeeProperty.email,
+					title,
+				})
+			}
+			// Sort the resources by ID, just like fullcalendar does. This ensures that
+			// the fake blocking event can know the first and last resource reliably
+			// ref https://fullcalendar.io/docs/resourceOrder
+			resources.sort((a, b) => (a.id > b.id) - (a.id < b.id))
+
+			return resources
+		},
+		eventSources() {
+			return [
+				freeBusyResourceEventSource(
+					this._uid,
+					this.organizer.attendeeProperty,
+					this.attendees.map((a) => a.attendeeProperty),
+				),
+				freeBusyFakeBlockingEventSource(
+					this._uid,
+					this.resources,
+					this.currentStart,
+					this.currentEnd,
+				),
+				freeBusyBlockedForAllEventSource(
+					this.organizer.attendeeProperty,
+					this.attendees.map((a) => a.attendeeProperty),
+					this.resources,
+				),
+			]
+		},
+		/**
+		 * FullCalendar Plugins
+		 *
+		 * @return {(PluginDef)[]}
+		 */
+		plugins() {
+			return [
+				resourceTimelinePlugin,
+				momentPluginFactory(),
+				VTimezoneNamedTimezone,
+				interactionPlugin,
+			]
+		},
+		scrollTime() {
+			const options = { hour: '2-digit', minute: '2-digit', seconds: '2-digit', hour12: false }
+
+			return this.currentDate.getHours() > 0 ? new Date(this.currentDate.getTime() - 60 * 60 * 1000).toLocaleTimeString(this.lang, options) : '10:00:00'
+		},
+		/**
+		 * List of possible Free-Busy values.
+		 * This is used as legend.
+		 *
+		 * @return {({color: string, label: string})[]}
+		 */
+		colorCaption() {
+			return [{
+				// TRANSLATORS: free as in available
+				label: this.$t('calendar', 'Free'),
+				color: getColorForFBType('FREE'),
+			}, {
+				label: this.$t('calendar', 'Busy (tentative)'),
+				color: getColorForFBType('BUSY-TENTATIVE'),
+			}, {
+				label: this.$t('calendar', 'Busy'),
+				color: getColorForFBType('BUSY'),
+			}, {
+				label: this.$t('calendar', 'Out of office'),
+				color: getColorForFBType('BUSY-UNAVAILABLE'),
+			}, {
+				label: this.$t('calendar', 'Unknown'),
+				color: getColorForFBType('UNKNOWN'),
+			}]
+		},
+		options() {
+			return {
+				// Initialization:
+				initialView: 'resourceTimelineDay',
+				initialDate: this.currentStart,
+				schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
+				// Data
+				eventSources: this.eventSources,
+				resources: this.resources,
+				// Plugins
+				plugins: this.plugins,
+				// Interaction:
+				editable: false,
+				selectable: true,
+				select: this.handleSelect,
+				// Localization:
+				...getDateFormattingConfig(),
+				...getFullCalendarLocale(),
+				// Rendering
+				height: 'auto',
+				loading: this.loading,
+				headerToolbar: false,
+				resourceAreaColumns: [
+					{
+						field: 'title',
+						headerContent: 'Room',
+					},
+				],
+				// Timezones:
+				timeZone: this.timezoneId,
+				// Formatting of the title
+				// will produce something like "Tuesday, September 18, 2018"
+				// ref https://fullcalendar.io/docs/date-formatting
+				titleFormat: {
+					month: 'long',
+					year: 'numeric',
+					day: 'numeric',
+					weekday: 'long',
+				},
+				dateClick: this.findFreeSlots(),
+			}
+		},
+		/**
+		 * @return {string}
+		 */
+		datePickerInputId() {
+			return randomId()
+		},
+	},
+	methods: {
+		handleActions(action, date = null) {
+			const calendar = this.$refs.freeBusyFullCalendar.getApi()
+			switch (action) {
+			case 'today':
+				calendar.today()
+				break
+			case 'left':
+				calendar.prev()
+				break
+			case 'right':
+				calendar.next()
+				break
+			case 'picker':
+				calendar.gotoDate(date)
+				break
+			}
+			this.currentDate = calendar.getDate()
+			calendar.scrollToTime(this.scrollTime)
+			this.findFreeSlots()
+		},
+		async findFreeSlots() {
+			// Doesn't make sense for multiple days
+			if (this.currentStart.getDate() !== this.currentEnd.getDate()) {
+				return
+			}
+
+			// Needed to update with full calendar widget changes
+			const startSearch = new Date(this.currentStart)
+			startSearch.setDate(this.currentDate.getDate())
+			startSearch.setMonth(this.currentDate.getMonth())
+			startSearch.setYear(this.currentDate.getFullYear())
+
+			const endSearch = new Date(this.currentEnd)
+			endSearch.setDate(this.currentDate.getDate())
+			endSearch.setMonth(this.currentDate.getMonth())
+			endSearch.setYear(this.currentDate.getFullYear())
+
+			try {
+				// for now search slots only in the first week days
+				const endSearchDate = new Date(startSearch)
+				endSearchDate.setDate(startSearch.getDate() + 7)
+				const eventResults = await getBusySlots(
+					this.organizer.attendeeProperty,
+					this.attendees.map((a) => a.attendeeProperty),
+					startSearch,
+					endSearchDate,
+					this.timeZoneId,
+				)
+
+				const freeSlots = getFirstFreeSlot(
+					startSearch,
+					endSearch,
+					eventResults.events,
+				)
+
+				freeSlots.forEach((slot) => {
+					slot.displayStart = dateFormat(slot.start, false, getFullCalendarLocale().locale)
+				})
+
+				this.freeSlots = freeSlots
+			} catch (error) {
+				// Handle error here
+				console.error('Error occurred while finding free slots:', error)
+				throw error // Re-throwing the error to handle it in the caller
+			}
+		},
+	},
+}
+</script>
+<style scoped lang="scss">
+.icon-close {
+	display: block;
+	height: 100%;
+}
+.modal__content {
+	padding: 15px;
+	//when the calendar is open, it's cut at the bottom, adding a margin fixes it
+	margin-bottom: 95px;
+	&__actions{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+		&__select{
+			width: 260px;
+		}
+		&__date{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			& > *{
+				margin-left: 5px;
+			}
+		}
+	}
+	&__header{
+		h3{
+			font-weight: 500;
+		}
+		margin-bottom: 20px;
+	}
+	&__footer{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 20px;
+		&__title{
+			h3{
+				font-weight: 500;
+			}
+			&__timezone{
+				color: var(--color-text-lighter);
+			}
+		}
+	}
+}
+:deep(.vs__search ) {
+	text-overflow: ellipsis;
+}
+:deep(.mx-input) {
+	height: 38px !important;
+}
+</style>
+<style lang="scss">
+.blocking-event-free-busy {
+	// Show the blocking event above any other blocks, especially the *blocked for all* one
+	z-index: 3 !important;
+}
+
+.free-busy-block {
+	opacity: 0.7 !important;
+}
+</style>
diff --git a/src/components/Editor/Resources/ResourceListSearch.vue b/src/components/Editor/Resources/ResourceListSearch.vue
index 1f17e41bf..182ec25c3 100644
--- a/src/components/Editor/Resources/ResourceListSearch.vue
+++ b/src/components/Editor/Resources/ResourceListSearch.vue
@@ -5,6 +5,15 @@
 
 <template>
 	<div class="resource-search">
+		<NcButton class="button availability" @click="openRoomAvailability">
+			{{ $t('calendar', 'Show all rooms') }}
+		</NcButton>
+
+		<RoomAvailabilityList v-if="showRoomAvailabilityModal"
+			:show-dialog.sync="showRoomAvailabilityModal"
+			:calendar-object-instance="calendarObjectInstance"
+			:start-date="calendarObjectInstance.startDate"
+			:end-date="calendarObjectInstance.endDate" />
 		<NcSelect class="resource-search__multiselect"
 			:options="matches"
 			:searchable="true"
@@ -67,6 +76,7 @@ import {
 	NcActions as Actions,
 	NcActionCheckbox as ActionCheckbox,
 	NcSelect,
+	NcButton,
 } from '@nextcloud/vue'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
 import debounce from 'debounce'
@@ -76,11 +86,13 @@ import ResourceSeatingCapacity from './ResourceSeatingCapacity.vue'
 import ResourceRoomType from './ResourceRoomType.vue'
 import usePrincipalsStore from '../../../store/principals.js'
 import { mapStores } from 'pinia'
-
+import RoomAvailabilityList from '../FreeBusy/RoomAvailabilityList.vue'
 export default {
 	name: 'ResourceListSearch',
 	components: {
+		RoomAvailabilityList,
 		Avatar,
+		NcButton,
 		NcSelect,
 		ResourceSeatingCapacity,
 		Actions,
@@ -108,6 +120,8 @@ export default {
 			isAccessible: false,
 			hasProjector: false,
 			hasWhiteboard: false,
+			showRoomAvailabilityModal: false,
+			rooms: [],
 		}
 	},
 	computed: {
@@ -133,6 +147,9 @@ export default {
 		},
 	},
 	methods: {
+		openRoomAvailability() {
+			this.showRoomAvailabilityModal = true
+		},
 		findResources: debounce(async function(query) {
 			this.isLoading = true
 			let matches = []
@@ -237,3 +254,8 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.button.availability {
+      margin-bottom: 8px;
+}
+</style>
diff --git a/src/models/attendee.js b/src/models/attendee.js
index 516422e9e..aa411338b 100644
--- a/src/models/attendee.js
+++ b/src/models/attendee.js
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { AttendeeProperty } from '@nextcloud/calendar-js'
+
 /**
  * Creates a complete attendee object based on given props
  *
@@ -50,7 +52,25 @@ const mapAttendeePropertyToAttendeeObject = (attendeeProperty) => {
 	})
 }
 
+/**
+ * Maps a principal object to to our attendee object
+ *
+ * @param {object} principalObject An attendee object created by mapDavToPrincipal()
+ * @param {boolean} isOrganizer Should it be an attendee or an organizer?
+ * @return {AttendeeProperty}
+ */
+const mapPrincipalObjectToAttendeeObject = (principalObject, isOrganizer = false) => {
+	const attendeeProperty = AttendeeProperty.fromNameAndEMail(
+		principalObject.displayname,
+		principalObject.emailAddress,
+		isOrganizer,
+	)
+	attendeeProperty.userType = principalObject.calendarUserType
+	return mapAttendeePropertyToAttendeeObject(attendeeProperty)
+}
+
 export {
 	getDefaultAttendeeObject,
 	mapAttendeePropertyToAttendeeObject,
+	mapPrincipalObjectToAttendeeObject,
 }
diff --git a/src/services/caldavService.js b/src/services/caldavService.js
index 8796f56a9..305004451 100644
--- a/src/services/caldavService.js
+++ b/src/services/caldavService.js
@@ -257,6 +257,17 @@ const findPrincipalByUrl = async (url) => {
 	return getClient().findPrincipal(url)
 }
 
+/**
+ * Finds all principals in a collection at the given URL
+ *
+ * @param {string} url The URL of the principal collection
+ * @param {object} options Passed to cdav-library/Principal::getPropFindList()
+ * @return {Promise<Principal[]>}
+ */
+const findPrincipalsInCollection = async (url, options = {}) => {
+	return getClient().findPrincipalsInCollection(url, options)
+}
+
 export {
 	initializeClientForUserView,
 	initializeClientForPublicView,
@@ -274,4 +285,5 @@ export {
 	principalPropertySearchByDisplaynameOrEmail,
 	advancedPrincipalPropertySearch,
 	findPrincipalByUrl,
+	findPrincipalsInCollection,
 }
diff --git a/src/services/freeBusySlotService.js b/src/services/freeBusySlotService.js
index b88ac93c2..3cca3d298 100644
--- a/src/services/freeBusySlotService.js
+++ b/src/services/freeBusySlotService.js
@@ -12,7 +12,7 @@ import logger from '../utils/logger.js'
 /**
  * Get the first available slot for an event using freebusy API
  *
- * @param {AttendeeProperty} organizer The organizer of the event
+ * @param {Principal} organizer The organizer of the event
  * @param {AttendeeProperty[]} attendees Array of the event's attendees
  * @param {Date} start The start date and time of the event
  * @param {Date} end The end date and time of the event
@@ -242,6 +242,10 @@ function checkTimes(currentCheckedTime, duration, events) {
 }
 
 // make a function that sorts a list of objects by the "start" property
+/**
+ *
+ * @param events
+ */
 function sortEvents(events) {
 	// remove events that have the same start and end time, if not done causes problems
 	const mappedEvents = new Map()
diff --git a/src/store/principals.js b/src/store/principals.js
index b94363466..5a0d4c88d 100644
--- a/src/store/principals.js
+++ b/src/store/principals.js
@@ -5,6 +5,7 @@
 import {
 	findPrincipalByUrl,
 	getCurrentUserPrincipal,
+	findPrincipalsInCollection,
 } from '../services/caldavService.js'
 import logger from '../utils/logger.js'
 import {
@@ -13,6 +14,7 @@ import {
 } from '../models/principal.js'
 import { defineStore } from 'pinia'
 import Vue from 'vue'
+import { generateRemoteUrl } from '@nextcloud/router'
 
 export default defineStore('principals', {
 	state: () => {
@@ -54,6 +56,22 @@ export default defineStore('principals', {
 		 * @return {string|undefined}
 		 */
 		getCurrentUserPrincipalEmail: (state) => state.principalsById[state.currentUserPrincipal]?.emailAddress,
+
+		/**
+		 * Gets all room principals
+		 *
+		 * @param {object} state the store data
+		 * @return {object[]}
+		 */
+		getRoomPrincipals: (state) => state.principals.filter((principal) => principal.isCalendarRoom),
+
+		/**
+		 * Gets all resource principals
+		 *
+		 * @param {object} state the store data
+		 * @return {object[]}
+		 */
+		getResourcePrincipals: (state) => state.principals.filter((principal) => principal.isCalendarResource),
 	},
 	actions: {
 		/**
@@ -78,6 +96,34 @@ export default defineStore('principals', {
 
 		},
 
+		/**
+		 * Fetches all principals of all rooms and resources from the DAV server and commits it to the state
+		 *
+		 * @return {Promise<void>}
+		 */
+		async fetchRoomAndResourcePrincipals() {
+			const options = {
+				enableCalDAVResourceBooking: true,
+			}
+			const principalCollections = await Promise.all([
+				findPrincipalsInCollection(generateRemoteUrl('dav/principals/calendar-rooms/'), options),
+				findPrincipalsInCollection(generateRemoteUrl('dav/principals/calendar-resources/'), options),
+			])
+			for (const principals of principalCollections) {
+				if (!principals) {
+				// TODO - handle error
+					continue
+				}
+
+				logger.debug('Fetched principals', { principals })
+				for (const principal of principals) {
+					this.addPrincipalMutation({
+						principal: mapDavToPrincipal(principal),
+					})
+				}
+			}
+		},
+
 		/**
 		 * Fetches the current-user-principal
 		 *
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index 5c57bcacc..3fec8c555 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -351,6 +351,12 @@ export default {
 		}
 
 		await this.loadMomentLocale()
+
+		await this.principalsStore.fetchRoomAndResourcePrincipals()
+		logger.debug('Fetched rooms and resources', {
+			rooms: this.principalsStore.getRoomPrincipals,
+			resources: this.principalsStore.getResourcePrincipals,
+		})
 	},
 	methods: {
 		/**
diff --git a/tests/javascript/unit/models/attendee.test.js b/tests/javascript/unit/models/attendee.test.js
index d5b862cfe..42d05d7d4 100644
--- a/tests/javascript/unit/models/attendee.test.js
+++ b/tests/javascript/unit/models/attendee.test.js
@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import {getDefaultAttendeeObject, mapAttendeePropertyToAttendeeObject} from "../../../../src/models/attendee.js";
+import {getDefaultAttendeeObject, mapAttendeePropertyToAttendeeObject, mapPrincipalObjectToAttendeeObject} from "../../../../src/models/attendee.js";
+import { AttendeeProperty } from '@nextcloud/calendar-js'
 
 describe('Test suite: Attendee model (models/attendee.js)', () => {
 
@@ -148,4 +149,76 @@ describe('Test suite: Attendee model (models/attendee.js)', () => {
 			uri: 'mailto:jdoe@example.com',
 		})
 	})
+
+	it('should map a principal object to an attendee object', () => {
+		const principalModel = {
+			id: 'L3JlbW90ZS5waHAvZGF2L3ByaW5jaXBhbHMvY2FsZW5kYXItcm9vbXMvcm9vbS0xMjMv',
+			dav: {},
+			calendarUserType: 'ROOM',
+			principalScheme: 'principal:principals/calendar-rooms/room-123',
+			emailAddress: 'room-123@example.com',
+			displayname: 'ROOM 123',
+			url: '/remote.php/dav/principals/calendar-rooms/room-123/',
+			isUser: false,
+			isGroup: false,
+			isCircle: false,
+			isCalendarResource: false,
+			isCalendarRoom: true,
+			principalId: 'room-123',
+			userId: null,
+		}
+
+		const attendeeProperty = new AttendeeProperty('ATTENDEE')
+		attendeeProperty.commonName = 'ROOM 123'
+		attendeeProperty.email = 'room-123@example.com'
+		attendeeProperty.userType = 'ROOM'
+
+		const actual = mapPrincipalObjectToAttendeeObject(principalModel)
+		expect(actual).toMatchObject({
+			commonName: 'ROOM 123',
+			member: null,
+			calendarUserType: 'ROOM',
+			participationStatus: 'NEEDS-ACTION',
+			role: 'REQ-PARTICIPANT',
+			rsvp: false,
+			uri: 'mailto:room-123@example.com',
+		})
+		expect(actual.attendeeProperty.toString()).toBe(attendeeProperty.toString())
+	})
+
+	it('should map a principal object to an attendee object (organizer)', () => {
+		const principalModel = {
+			id: 'L3JlbW90ZS5waHAvZGF2L3ByaW5jaXBhbHMvY2FsZW5kYXItcmVzb3VyY2VzL3Byb2plY3Rvci0xMjMv',
+			dav: {},
+			calendarUserType: 'RESOURCE',
+			principalScheme: 'principal:principals/calendar-resources/projector-123',
+			emailAddress: 'projector-123@example.com',
+			displayname: 'Projector 123',
+			url: '/remote.php/dav/principals/calendar-resources/projector-123/',
+			isUser: false,
+			isGroup: false,
+			isCircle: false,
+			isCalendarResource: true,
+			isCalendarRoom: false,
+			principalId: 'projector-123',
+			userId: null,
+		}
+
+		const attendeeProperty = new AttendeeProperty('ORGANIZER')
+		attendeeProperty.commonName = 'Projector 123'
+		attendeeProperty.email = 'projector-123@example.com'
+		attendeeProperty.userType = 'RESOURCE'
+
+		const actual = mapPrincipalObjectToAttendeeObject(principalModel, true)
+		expect(actual).toMatchObject({
+			commonName: 'Projector 123',
+			member: null,
+			calendarUserType: 'RESOURCE',
+			participationStatus: 'NEEDS-ACTION',
+			role: 'REQ-PARTICIPANT',
+			rsvp: false,
+			uri: 'mailto:projector-123@example.com',
+		})
+		expect(actual.attendeeProperty.toString()).toBe(attendeeProperty.toString())
+	})
 })