fixup! Improve free/busy UI

Signed-off-by: Hamza Mahjoubi <[email protected]>

css/freebusy.scss

@@ -66,7 +66,8 @@
 	&__colors {
 		width: 100%;
 		display:flex;
-		flex-wrap: wrap;
+		flex-direction: column;
+		padding-left: 2px;
 		.freebusy-caption-item {
 			display: flex;
 			align-items: center;

src/components/Editor/FreeBusy/FreeBusy.vue

@@ -28,12 +28,31 @@
 			<div v-if="loadingIndicator" class="loading-indicator">
 				<div class="icon-loading" />
 			</div>
-			<h2>Find a time</h2>
 			<div class="modal__content__header">
-				<div class="modal__content__header__title">
-					<h3>{{ formattedCurrentDate }}</h3>
+				<h2>Find a time</h2>
+				<h3>{{ eventTitle }}</h3>
+				<div class="modal__content__header__attendees">
+					with:
+					<NcUserBubble :display-name="organizer.commonName" />
+					<NcUserBubble v-for="attendee in attendees"
+						:key="attendee.id"
+						class="modal__content__header__attendees__user-bubble"
+						:display-name="attendee.commonName">
+						<template #name>
+							<a href="#"
+								title="Remove user"
+								class="icon-close"
+								@click="removeAttendee(attendee)" />
+						</template>
+					</NcUserBubble>
 				</div>
-				<div class="modal__content__header__actions">
+			</div>
+			<div class="modal__content__actions">
+				<InviteesListSearch class="modal__content__actions__select"
+					:already-invited-emails="alreadyInvitedEmails"
+					:organizer="organizer"
+					@add-attendee="addAttendee" />
+				<div class="modal__content__actions__date">
 					<NcButton type="secondary"
 						@click="handleActions('today')">
 						{{ $t('calendar', 'Today') }}
@@ -51,23 +70,45 @@
 						</template>
 					</NcButton>
 
-					<NcDatetimePicker :value="currentDate"
+					<NcDateTimePicker :value="currentDate"
 						confirm
 						@confirm="setCurrentDate" />
+					<NcPopover>
+						<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="freebusy-caption-item__label">
+											{{ color.label }}
+										</div>
+									</div>
+								</div>
+							</div>
+						</template>
+					</NcPopover>
 				</div>
 			</div>
 			<FullCalendar ref="freeBusyFullCalendar"
 				:options="options" />
-			<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="freebusy-caption-item__label">
-							{{ color.label }}
-						</div>
-					</div>
-				</div>
+			<div class="modal__content__footer">
+				<h3 class="modal__content__footer__title">
+					{{ formattedCurrentDate }}
+				</h3>
+				<NcButton>
+					{{ $t('calendar', 'Done') }}
+					<template #icon>
+						<CheckIcon :size="20" />
+					</template>
+				</NcButton>
 			</div>
 		</div>
 	</Modal>
@@ -77,8 +118,12 @@
 // Import FullCalendar itself
 import FullCalendar from '@fullcalendar/vue'
 import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
-import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
+import interactionPlugin from '@fullcalendar/interaction'
+
+import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePicker.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 // Import event sources
 import freeBusyBlockedForAllEventSource from '../../../fullcalendar/eventSources/freeBusyBlockedForAllEventSource.js'
 import freeBusyFakeBlockingEventSource from '../../../fullcalendar/eventSources/freeBusyFakeBlockingEventSource.js'
@@ -99,22 +144,27 @@ import {
 import { NcModal as Modal } from '@nextcloud/vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
-import Vue from 'vue'
-import OrganizerListItem from '../Invitees/OrganizerListItem.vue'
-import InviteesListItem from '../Invitees/InviteesListItem.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import HelpCircleIcon from 'vue-material-design-icons/HelpCircle.vue'
+
+import InviteesListSearch from '../Invitees/InviteesListSearch.vue'
 
 import { getColorForFBType } from '../../../utils/freebusy.js'
 
 export default {
 	name: 'FreeBusy',
 	components: {
 		FullCalendar,
-		NcDatetimePicker,
+		InviteesListSearch,
+		NcDateTimePicker,
 		Modal,
 		NcButton,
+		NcPopover,
+		NcUserBubble,
 		ChevronRightIcon,
 		ChevronLeftIcon,
-
+		CheckIcon,
+		HelpCircleIcon,
 	},
 	props: {
 		/**
@@ -147,6 +197,15 @@ export default {
 			type: Date,
 			required: true,
 		},
+		eventTitle: {
+			type: String,
+			required: true,
+
+		},
+		alreadyInvitedEmails: {
+			type: Array,
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -175,6 +234,7 @@ export default {
 				resourceTimelinePlugin,
 				momentPluginFactory(this.$store),
 				VTimezoneNamedTimezone,
+				interactionPlugin,
 			]
 		},
 		formattedCurrentDate() {
@@ -282,15 +342,15 @@ export default {
 				plugins: this.plugins,
 				// Interaction:
 				editable: false,
-				selectable: false,
+				selectable: true,
+				select: this.handleSelect,
 				// Localization:
 				...getDateFormattingConfig(),
 				...getFullCalendarLocale(),
 				// Rendering
 				height: 'auto',
 				loading: this.loading,
 				headerToolbar: false,
-			//	resourceLabelContent: this.customResourceRender,
 				resourceAreaColumns: [
 					{
 						field: 'title',
@@ -312,6 +372,13 @@ export default {
 		},
 	},
 	methods: {
+
+		addAttendee(attendee) {
+			this.$emit('add-attendee', attendee)
+		},
+		removeAttendee(attendee) {
+			this.$emit('remove-attendee', attendee)
+		},
 		loading(isLoading) {
 			this.loadingIndicator = isLoading
 		},
@@ -336,43 +403,28 @@ export default {
 				break
 			}
 		},
-		 customResourceRender(arg) {
-			const attendee = [this.organizer, ...this.attendees].find((a) => a.uri === arg.resource.id)
-			let component = null
-			if (attendee === this.organizer) {
-				component	= new Vue({
- 			 render: h => h(OrganizerListItem, { props: { organizer: attendee, isReadOnly: false } }),
-				}).$mount()
-			} else {
-				component	= new Vue({
- 			 render: h => h(InviteesListItem, { props: { attendee, organizerDisplayName: this.organizer.commonName, isReadOnly: false } }),
-				}).$mount()
-
-			}
-
-			const html = document.createElement('div')
-			html.style.position = 'absolute'
-			html.innerText(component.$el.outerHTML)
-
- 		 	return {
-   				 html,
-  				}
-		},
 	},
 }
 </script>
 
 <style lang='scss' scoped>
+.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;
-	&__header{
+	&__actions{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		margin-bottom: 20px;
-		&__actions{
+		&__select{
+			width: 260px;
+		}
+		&__date{
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
@@ -381,6 +433,26 @@ export default {
 			}
 		}
 	}
+	&__header{
+		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{
+			font-weight: 500;
+		}
+	}
 }
 
 ::v-deep .mx-input{

src/components/Editor/Invitees/InviteesList.vue

@@ -74,6 +74,10 @@
 				:organizer="calendarObjectInstance.organizer"
 				:start-date="calendarObjectInstance.startDate"
 				:end-date="calendarObjectInstance.endDate"
+				:event-title="calendarObjectInstance.title"
+				:already-invited-emails="alreadyInvitedEmails"
+				@remove-attendee="removeAttendee"
+				@add-attendee="addAttendee"
 				@close="closeFreeBusy" />
 		</div>
 	</div>