[wip] feat(calendar): schedule a meeting

[skip ci] Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Dec 17, 2024 · 4318ec8 · 4318ec8
1 parent ffe4ca2
commit 4318ec8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/src/components/CalendarEventsDialog.vue b/src/components/CalendarEventsDialog.vue
@@ -12,9 +12,12 @@ import IconCalendarRefresh from 'vue-material-design-icons/CalendarRefresh.vue'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+// import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
 
 import { useGroupwareStore } from '../stores/groupware.ts'
@@ -42,6 +45,13 @@ const upcomingEvents = computed(() => {
 		}))
 })
 
+const selectedCalendar = ref(null)
+const calendarOptions = computed(() => Object.values(calendars.value).map(calendar => ({
+	value: calendar.uri,
+	label: calendar.name,
+	style: `background-color: ${calendar.color ?? usernameToColor(calendar.uri).color}`,
+})))
+
 onBeforeMount(() => {
 	getCalendars()
 })
@@ -93,6 +103,29 @@ async function getCalendars() {
 				<p>{{ loading ? t('spreed', 'Loading …') : t('spreed', 'No upcoming events') }}</p>
 			</template>
 		</NcEmptyContent>
+
+		<div>
+			<h4>{{ t('spreed', 'Schedule a meeting') }}</h4>
+			<NcSelect id="schedule_meeting_select"
+				v-model="selectedCalendar"
+				:options="calendarOptions"
+				:placeholder="t('spreed', 'Select calendar …')">
+				:input-label="t('spreed', 'Select calendar …')">
+				<template #option="option">
+					<span class="calendar-badge" :style="option.style" />
+					{{ option.label }}
+				</template>
+			</NcSelect>
+			<!-- <NcDateTimePickerNative id="schedule_meeting_input" ></NcDateTimePickerNative> -->
+		</div>
+
+		<template #actions>
+			<NcButton type="primary"
+				:disabled="true"
+				@click="emit('close')">
+				{{ t('spreed', 'Submit') }}
+			</NcButton>
+		</template>
 	</NcDialog>
 </template>
 

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
@@ -107,6 +107,7 @@
 				:show-actions="!isSidebar"
 				:is-sidebar="isSidebar"
 				:model="localMediaModel"
+				@open-calendar-events-dialog="showCalendarEventsDialog = true"
 				@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
 			<CallButton shrink-on-mobile :hide-text="isSidebar" :is-screensharing="!!localMediaModel.attributes.localScreen" />

diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
@@ -71,6 +71,17 @@
 				</NcActionButton>
 			</template>
 
+			<!-- Moderator actions -->
+			<template v-if="canFullModerate">
+				<NcActionButton close-after-click
+					@click="$emit('open-calendar-events-dialog')">
+					<template #icon>
+						<IconCalendarBlank :size="20" />
+					</template>
+					{{ t('spreed', 'Schedule a meeting') }}
+				</NcActionButton>
+			</template>
+
 			<!-- Fullscreen -->
 			<NcActionButton :aria-label="t('spreed', 'Toggle full screen')"
 				close-after-click
@@ -150,6 +161,7 @@
 </template>
 
 <script>
+import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 import IconCog from 'vue-material-design-icons/Cog.vue'
 import IconDotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -208,6 +220,7 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		// Icons
+		IconCalendarBlank,
 		IconCog,
 		IconDotsCircle,
 		IconDotsHorizontal,
@@ -255,7 +268,7 @@ export default {
 		},
 	},
 
-	emits: ['open-breakout-rooms-editor'],
+	emits: ['open-breakout-rooms-editor', 'open-calendar-events-dialog'],
 
 	setup() {
 		return {