@bagelink/vue 0.0.1216 → 0.0.1220

package/src/components/Calendar/components/partials/EventFlyout.vue

@@ -0,0 +1,429 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { EventInterface } from '../../typings/interfaces/event.interface'
+import { Icon } from '@bagelink/vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { EVENT_COLORS } from '../../constants'
+import EventFlyoutPosition, { EVENT_FLYOUT_WIDTH } from '../../helpers/EventFlyoutPosition'
+import Helpers from '../../helpers/Helpers'
+
+const props = defineProps({
+	calendarEventProp: {
+		type: Object as PropType<EventInterface | null>,
+		default: () => ({}),
+	},
+	eventElement: {
+		type: Object as PropType<HTMLElement | any>,
+		default: null,
+	},
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+})
+
+const emit = defineEmits(['hide', 'editEvent', 'deleteEvent'])
+
+const eventFlyoutPositionHelper = new EventFlyoutPosition()
+
+const isVisible = ref(false)
+const top = ref<number | null>(0)
+const left = ref<number | null>(0)
+const calendarEvent = ref(props.calendarEventProp)
+const flyoutWidth = `${EVENT_FLYOUT_WIDTH}px`
+const colors = EVENT_COLORS
+
+const icons = {
+	clock: 'clock',
+	user: 'user',
+	description: 'comment',
+	trash: 'delete',
+	edit: 'edit',
+	times: 'close',
+	topic: 'help',
+	location: 'location_on',
+}
+
+const getEventTime = computed(() => {
+	if (!calendarEvent.value || !calendarEvent.value.time) return null
+
+	const eventType = Helpers.getEventType(calendarEvent.value, props.time)
+
+	if (['MULTI_DAY_TIMED'].includes(eventType)) {
+		const startLocalizedString = `${getDateFromDateString(
+			calendarEvent.value.time.start
+		)} ${props.time.getLocalizedTime(calendarEvent.value.time.start)}`
+		const endLocalizedString = `${getDateFromDateString(
+			calendarEvent.value.time.end
+		)} ${props.time.getLocalizedTime(calendarEvent.value.time.end)}`
+
+		return `${startLocalizedString} - ${endLocalizedString}`
+	}
+
+	if (['SINGLE_DAY_FULL_DAY', 'MULTI_DAY_FULL_DAY'].includes(eventType)) {
+		const startDate = getDateFromDateString(calendarEvent.value.time.start)
+		const endDate = getDateFromDateString(calendarEvent.value.time.end)
+
+		if (startDate === endDate) return startDate
+
+		return `${startDate} - ${endDate}`
+	}
+
+	const dateString = getDateFromDateString(calendarEvent.value.time.start)
+	const timeString = props.time.getLocalizedTimeRange(
+		calendarEvent.value.time.start,
+		calendarEvent.value.time.end
+	)
+
+	return `${dateString} ⋅ ${timeString}`
+})
+
+const eventFlyoutInlineStyles = computed(() => {
+	if (typeof top.value === 'number' && !left.value) {
+		return {
+			top: `${top.value}px`,
+			left: '50%',
+			position: 'fixed' as const,
+			transform: 'translateX(-50%)',
+		}
+	}
+
+	return {
+		top: `${top.value}px`,
+		left: `${left.value}px`,
+		position: 'fixed' as const,
+	}
+})
+
+const isEditable = computed(() => props.calendarEventProp?.isEditable || false)
+
+const eventBackgroundColor = computed(() => {
+	if (
+		calendarEvent.value?.colorScheme
+		&& props.config.style?.colorSchemes
+		&& props.config.style.colorSchemes[calendarEvent.value.colorScheme]
+	) {
+		return props.config.style.colorSchemes[calendarEvent.value.colorScheme]
+			.backgroundColor
+	}
+
+	return colors[calendarEvent.value?.color || 'blue']
+})
+
+function setFlyoutPosition() {
+	const calendar = props.eventElement?.closest('.calendar-root')
+	const flyout = document.querySelector('.event-flyout')
+
+	if (!props.eventElement) return
+
+	const flyoutPosition = eventFlyoutPositionHelper.calculateFlyoutPosition(
+		props.eventElement?.getBoundingClientRect(),
+		{
+			height: flyout?.clientHeight || 300,
+			width: flyout?.clientWidth || 0,
+		},
+		calendar ? calendar.getBoundingClientRect() : null
+	)
+
+	top.value = typeof flyoutPosition?.top === 'number' ? flyoutPosition.top : null
+	left.value = typeof flyoutPosition?.left === 'number' ? flyoutPosition.left : null
+}
+
+function editEvent() {
+	emit('editEvent', calendarEvent.value?.id)
+	closeFlyout()
+}
+
+function deleteEvent() {
+	emit('deleteEvent', calendarEvent.value?.id)
+	closeFlyout()
+}
+
+function closeFlyout() {
+	isVisible.value = false
+
+	setTimeout(() => {
+		emit('hide')
+	}, 100)
+}
+
+function getDateFromDateString(dateString: string) {
+	const { year, month, date } = props.time.getAllVariablesFromDateTimeString(dateString)
+
+	return new Date(year, month, date).toLocaleDateString(
+		props.time.CALENDAR_LOCALE,
+		{
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+		}
+	)
+}
+
+function closeFlyoutOnClickOutside(e: any) {
+	const flyout = document.querySelector('.event-flyout')
+	if (!flyout || !isVisible.value) return
+
+	const isClickOutside = !flyout.contains(e.target)
+	const isClickOnEvent = !!e.target.closest('.is-event')
+	const closeOnClickOutside = props.config.eventDialog?.closeOnClickOutside ?? true
+
+	if (isVisible.value && isClickOutside && !isClickOnEvent && closeOnClickOutside) {
+		closeFlyout()
+	}
+}
+
+// Watch for changes
+watch(
+	() => props.calendarEventProp,
+	(value) => {
+		setTimeout(() => {
+			calendarEvent.value = value
+			isVisible.value = !!value
+			nextTick(() => { setFlyoutPosition() })
+		}, 10)
+	},
+	{ deep: true }
+)
+
+// Lifecycle hooks
+onMounted(() => {
+	document.addEventListener('click', closeFlyoutOnClickOutside)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('click', closeFlyoutOnClickOutside)
+})
+</script>
+
+<template>
+	<div
+		class="event-flyout p-05 bg-white"
+		:class="{ 'is-visible': isVisible, 'is-not-editable': !isEditable }"
+		:style="eventFlyoutInlineStyles"
+	>
+		<div
+			v-if="!config.eventDialog || !config.eventDialog.isCustom"
+			class="event-flyout__relative-wrapper"
+		>
+			<div class="event-flyout__menu">
+				<span
+					v-if="isEditable"
+					class="event-flyout__menu-editable"
+				>
+					<Icon
+						class="event-flyout__menu-item is-edit-icon"
+						:icon="icons.edit"
+						@click="editEvent"
+					/>
+
+					<Icon
+						class="event-flyout__menu-item is-trash-icon"
+						:icon="icons.trash"
+						@click="deleteEvent"
+					/>
+				</span>
+
+				<span class="event-flyout__menu-close">
+					<Icon
+						class="event-flyout__menu-item is-times-icon"
+						:icon="icons.times"
+						@click="closeFlyout"
+					/>
+				</span>
+			</div>
+
+			<div
+				v-if="calendarEvent"
+				class="event-flyout__info-wrapper"
+			>
+				<div
+					v-if="calendarEvent.title"
+					class="event-flyout__row is-title"
+				>
+					<div
+						class="event-flyout__color-icon"
+						:style="{ backgroundColor: eventBackgroundColor }"
+					/>
+					{{ calendarEvent.title }}
+				</div>
+
+				<div
+					v-if="calendarEvent.time"
+					class="event-flyout__row is-time"
+				>
+					{{ getEventTime }}
+				</div>
+
+				<div
+					v-if="calendarEvent.location"
+					class="event-flyout__row is-location"
+				>
+					<Icon :icon="icons.location" />
+					{{ calendarEvent.location }}
+				</div>
+
+				<div
+					v-if="calendarEvent.with"
+					class="event-flyout__row is-with"
+				>
+					<Icon :icon="icons.user" />
+					{{ calendarEvent.with }}
+				</div>
+
+				<div
+					v-if="calendarEvent.topic"
+					class="event-flyout__row is-topic"
+				>
+					<Icon :icon="icons.topic" />
+					{{ calendarEvent.topic }}
+				</div>
+
+				<div
+					v-if="calendarEvent.description"
+					class="event-flyout__row is-description"
+				>
+					<Icon :icon="icons.description" />
+					<p v-html="calendarEvent.description" />
+				</div>
+			</div>
+		</div>
+
+		<slot
+			v-else
+			:event-dialog-data="calendarEvent"
+			:close-event-dialog="closeFlyout"
+		/>
+	</div>
+</template>
+
+<style>
+.event-flyout {
+	position: fixed;
+	z-index: 50;
+	background-color: #fff;
+	max-height: 100%;
+	width: v-bind(flyoutWidth);
+	max-width: 98%;
+	border: var(--qalendar-border-gray-thin);
+	border-radius: 8px;
+	box-shadow: 0 12px 24px rgb(0 0 0 / 9%), 0 6px 12px rgb(0 0 0 / 18%);
+	overflow: hidden;
+	transition: all 0.2s ease;
+	transition-property: opacity, transform;
+	transform: translateY(-40px);
+	opacity: 0;
+	pointer-events: none;
+}
+
+@media (prefers-color-scheme: dark) {
+	.event-flyout {
+		background-color: var(--qalendar-dark-mode-elevated-surface);
+		border-color: transparent;
+	}
+}
+
+.event-flyout.is-visible {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: initial;
+}
+
+.event-flyout__relative-wrapper {
+	position: relative;
+}
+
+.event-flyout__menu {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.event-flyout__menu-editable,
+.event-flyout__menu-close {
+	padding: var(--qalendar-spacing) var(--qalendar-spacing) 0 var(--qalendar-spacing);
+	display: flex;
+	gap: 20px;
+}
+
+.is-not-editable .event-flyout__menu-close {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.event-flyout__menu-item {
+	font-size: var(--qalendar-font-l);
+	color: gray;
+}
+
+@media (prefers-color-scheme: dark) {
+	.event-flyout__menu-item {
+		color: var(--qalendar-dark-mode-text-hint);
+	}
+}
+
+.event-flyout__menu-item:hover {
+	color: var(--qalendar-theme-color);
+	cursor: pointer;
+}
+
+.is-trash-icon:hover {
+	color: red;
+}
+
+.event-flyout__info-wrapper {
+	padding: var(--qalendar-spacing);
+}
+
+.event-flyout__row {
+	display: flex;
+	gap: var(--qalendar-spacing);
+	margin-bottom: 0.25em;
+	font-weight: 400;
+}
+
+.event-flyout__row p {
+	margin: 0;
+	padding: 0;
+}
+
+.event-flyout__row svg {
+	margin-top: 0.1rem;
+	color: #5f6368;
+	width: 14px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.event-flyout__row svg {
+		color: var(--qalendar-dark-mode-text-hint);
+	}
+}
+
+.event-flyout__color-icon {
+	--icon-height: 16px;
+	border-radius: 50%;
+	height: var(--icon-height);
+	width: var(--icon-height);
+}
+
+.is-title {
+	font-size: var(--qalendar-font-l);
+	align-items: center;
+}
+
+.is-not-editable .is-title {
+	max-width: 90%;
+}
+
+.is-time {
+	font-size: var(--qalendar-font-s);
+	margin-bottom: 0.75em;
+}
+</style>

package/src/components/Calendar/components/week/Day.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { Interval } from '../../helpers/DayIntervals'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface, DayIntervalsType } from '../../typings/config.interface'
+import type { DayInterface } from '../../typings/interfaces/day.interface'
+import type { EventInterface } from '../../typings/interfaces/event.interface'
+import type { DayInfo, modeType } from '../../typings/types'
+import { ref, computed, onMounted } from 'vue'
+import DayIntervals from '../../helpers/DayIntervals'
+import EventConcurrency from '../../helpers/EventConcurrency'
+import DayEvent from './DayEvent.vue'
+
+const props = defineProps({
+	day: {
+		type: Object as PropType<DayInterface>,
+		required: true,
+	},
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	dayInfo: {
+		type: Object as PropType<DayInfo>,
+		required: true,
+	},
+	mode: {
+		type: String as PropType<modeType>,
+		required: true,
+	},
+	dayIntervals: {
+		type: Object as PropType<DayIntervalsType>,
+		required: true,
+	},
+	weekHeight: {
+		type: Number,
+		required: true,
+	},
+})
+
+const emit = defineEmits([
+	'eventWasClicked',
+	'eventWasResized',
+	'eventWasDragged',
+	'intervalWasClicked',
+	'dayWasClicked',
+	'datetimeWasClicked',
+	'dragStart',
+	'dragEnd',
+])
+
+const eventConcurrencyHelper = new EventConcurrency()
+
+const events = ref<EventInterface[]>([])
+const intervals = ref<Interval[]>([])
+
+const intervalStyles = computed(() => {
+	return props.config.dayIntervals?.intervalStyles
+		? props.config.dayIntervals.intervalStyles
+		: {}
+})
+
+function calculateEventConcurrency() {
+	events.value = eventConcurrencyHelper.calculateConcurrencyForEvents(
+		props.day.events
+	)
+}
+
+function handleEventWasResized(event: any) {
+	emit('eventWasResized', event)
+	calculateEventConcurrency()
+}
+
+function handleClickOnInterval(payload: Interval) {
+	const { intervalStart, intervalEnd } = payload
+	emit('intervalWasClicked', { intervalStart, intervalEnd })
+}
+
+function setClickableIntervals() {
+	let dayStartTimeString = props.day.dateTimeString
+	if (props.time.DAY_START !== 0) {
+		const { hour: startHour } = props.time.getHourAndMinutesFromTimePoints(props.time.DAY_START)
+		dayStartTimeString = props.time.setSegmentOfDateTimeString(dayStartTimeString, { hour: startHour })
+	}
+
+	intervals.value = new DayIntervals(
+		props.dayIntervals.length || 60,
+		dayStartTimeString,
+		props.time.HOURS_PER_DAY,
+	).getIntervals()
+}
+
+function getDateStringForFlexibleDayBoundaries(dateString: string, timeClickedHHMM: string) {
+	const hourTwoDigits = props.time.doubleDigit(props.time.DAY_START / 100)
+	const dayStartTimeHHMM = `${hourTwoDigits}:00`
+	const isClickOnNextDay = timeClickedHHMM < dayStartTimeHHMM
+
+	if (isClickOnNextDay) {
+		dateString = props.time.dateStringFrom(
+			props.time.addDaysToDateTimeString(1, dateString)
+		)
+	}
+
+	return dateString
+}
+
+function handleClickOnDay(event: MouseEvent) {
+	const timeClicked = props.time.getTimeFromClick(event.offsetY, props.weekHeight)
+	let dateString = props.time.dateStringFrom(props.day.dateTimeString)
+	const isFlexibleDay = props.time.DAY_END <= props.time.DAY_START
+	if (isFlexibleDay) dateString = getDateStringForFlexibleDayBoundaries(dateString, timeClicked)
+	const dateTimeString = `${dateString} ${timeClicked}`
+
+	emit('dayWasClicked', dateString)
+	emit('datetimeWasClicked', dateTimeString)
+}
+
+onMounted(() => {
+	calculateEventConcurrency()
+	if (props.dayIntervals.displayClickableInterval) setClickableIntervals()
+})
+</script>
+
+<template>
+	<div
+		class="calendar-week__day"
+		@click.self="handleClickOnDay"
+	>
+		<DayEvent
+			v-for="(event, eventIndex) in events"
+			:key="eventIndex"
+			data-test="day-event"
+			:event-prop="event"
+			:day="day"
+			:time="time"
+			:config="config"
+			:day-info="dayInfo"
+			:mode="mode"
+			@eventWasClicked="$emit('eventWasClicked', $event)"
+			@eventWasDragged="$emit('eventWasDragged', $event)"
+			@eventWasResized="handleEventWasResized"
+			@dragStart="$emit('dragStart')"
+			@dragEnd="$emit('dragEnd')"
+		>
+			<template #weekDayEvent="p">
+				<slot
+					:event-data="p.eventData"
+					name="weekDayEvent"
+				/>
+			</template>
+		</DayEvent>
+
+		<template v-if="dayIntervals && dayIntervals.displayClickableInterval">
+			<div
+				v-for="(interval, intervalIndex) in intervals"
+				:id="`interval-${intervalIndex}`"
+				:key="interval.intervalStart"
+				class="calendar-week__day-interval"
+				:class="{ 'has-border': interval.hasBorder }"
+				:style="intervalStyles"
+				@click="handleClickOnInterval(interval)"
+			>
+				{{ time.getLocalizedTime(interval.intervalStart) }}
+			</div>
+		</template>
+	</div>
+</template>
+
+<style scoped>
+.calendar-week__day {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.calendar-week__day .calendar-week__day-interval {
+	flex: 1;
+	font-size: var(--qalendar-font-xs);
+	color: var(--qalendar-gray);
+	padding: 2px;
+}
+
+.calendar-week__day .calendar-week__day-interval.has-border {
+	border-bottom: var(--qalendar-border-dashed-gray-thin);
+}
+
+.calendar-week__day:first-child {
+	border-left: 1px dashed rgb(224 224 224);
+}
+
+@media (prefers-color-scheme: dark) {
+	.calendar-week__day:first-child {
+		border-color: var(--qalendar-dark-mode-line-color);
+	}
+}
+
+.calendar-week__day:not(:last-child) {
+	border-right: 1px dashed rgb(224 224 224);
+}
+
+@media (prefers-color-scheme: dark) {
+	.calendar-week__day:not(:last-child) {
+		border-color: var(--qalendar-dark-mode-line-color);
+	}
+}
+</style>