@bagelink/vue 0.0.1218 → 0.0.1220

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { EventInterface } from '../../typings/interfaces/event.interface'
+import type { modeType } from '../../typings/types'
+import { computed, onMounted, ref } from 'vue'
+import { EVENT_COLORS } from '../../constants'
+
+interface extendedEventInterface extends EventInterface {
+	nDays: number
+}
+
+const props = defineProps({
+	scheduleEvent: {
+		type: Object as PropType<extendedEventInterface>,
+		default: null,
+	},
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	mode: {
+		type: String as PropType<modeType>,
+		required: true,
+	},
+})
+
+const emit = defineEmits(['eventWasClicked'])
+
+const colors = EVENT_COLORS as { [key: string]: string }
+const eventColor = ref('#fff')
+const eventBackgroundColor = ref('')
+const eventElementIdPrefix = 'week-timeline__event-id-'
+
+const eventWidth = computed(() => {
+	if (props.mode !== 'day')
+		return `calc(${props.scheduleEvent.nDays * 100}% - 6px)`
+
+	return 'calc(100% - 6px)'
+})
+
+function setColors() {
+	if (
+		props.scheduleEvent.colorScheme
+		&& props.config.style?.colorSchemes
+		&& props.config.style.colorSchemes[props.scheduleEvent.colorScheme]
+	) {
+		eventColor.value = props.config.style.colorSchemes[props.scheduleEvent.colorScheme].color
+		eventBackgroundColor.value = props.config.style.colorSchemes[props.scheduleEvent.colorScheme].backgroundColor
+		return
+	}
+
+	if (props.scheduleEvent.color) {
+		eventColor.value = '#fff'
+		eventBackgroundColor.value = colors[props.scheduleEvent.color]
+		return
+	}
+
+	eventBackgroundColor.value = colors.blue
+}
+
+function handleClickOnEvent() {
+	const eventElement = document.getElementById(
+		eventElementIdPrefix + props.scheduleEvent.id
+	)
+
+	emit('eventWasClicked', {
+		clickedEvent: props.scheduleEvent,
+		eventElement,
+	})
+}
+
+onMounted(() => {
+	setColors()
+})
+</script>
+
+<template>
+	<div
+		v-if="scheduleEvent"
+		:id="`${eventElementIdPrefix}${scheduleEvent.id}`"
+		class="week-timeline__event is-event"
+		:style="{
+			width: eventWidth,
+			color: eventColor,
+			backgroundColor: eventBackgroundColor,
+			zIndex: 1,
+		}"
+		@click="handleClickOnEvent"
+	>
+		{{ scheduleEvent.title }}
+	</div>
+
+	<div
+		v-else
+		class="week-timeline__event"
+	/>
+</template>
+
+<style scoped>
+.week-timeline__event {
+  position: relative;
+  --event-padding: 3px;
+  display: flex;
+  align-items: center;
+  height: 0.9rem;
+  width: calc(100% - var(--event-padding));
+  font-size: var(--qalendar-font-2xs);
+  border-radius: 4px;
+  padding: var(--event-padding);
+  margin-bottom: 0.25em;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+}
+
+.week-timeline__event:active {
+  cursor: not-allowed;
+}
+</style>

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

@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+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 { FullDayEventsWeek } from '../../typings/interfaces/full-day-events-week.type'
+import type { PeriodInterface } from '../../typings/interfaces/period.interface'
+import type { modeType } from '../../typings/types'
+import { ref, computed, onMounted, watch, useSlots } from 'vue'
+import EventPosition from '../../helpers/EventPosition'
+import { EventsFilter } from '../../helpers/EventsFilter'
+import Helpers from '../../helpers/Helpers'
+import { WEEK_START_DAY } from '../../helpers/Time'
+import { WeekHelper } from '../../helpers/Week'
+import EventFlyout from '../partials/EventFlyout.vue'
+import Day from './Day.vue'
+import DayTimeline from './DayTimeline.vue'
+import WeekTimeline from './WeekTimeline.vue'
+
+const props = defineProps({
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	eventsProp: {
+		type: Array as PropType<EventInterface[]>,
+		default: () => [],
+	},
+	period: {
+		type: Object as PropType<PeriodInterface>,
+		required: true,
+	},
+	modeProp: {
+		type: String as PropType<modeType>,
+		default: 'week',
+	},
+	time: {
+		type: Object as PropType<Time | any>,
+		required: true,
+	},
+})
+
+const emit = defineEmits([
+	'eventWasClicked',
+	'eventWasResized',
+	'eventWasDragged',
+	'editEvent',
+	'deleteEvent',
+	'intervalWasClicked',
+	'dayWasClicked',
+	'datetimeWasClicked',
+])
+
+const eventPosition = new EventPosition()
+
+const days = ref<DayInterface[]>([])
+const mode = ref<modeType>(props.modeProp)
+const selectedEvent = ref<EventInterface | null>(null)
+const selectedEventElement = ref<any | null>(null)
+const events = ref<EventInterface[]>(props.eventsProp)
+const fullDayEvents = ref<FullDayEventsWeek>([])
+const weekVersion = ref(0)
+const dayIntervals = ref<DayIntervalsType | any>({
+	length: 60,
+	height: 66,
+})
+const weekHeight = ref('1584px')
+const currentTimePercentage = ref(0)
+const showCurrentTime = ref(!!props.config.showCurrentTime)
+
+const hasCustomCurrentTimeSlot = computed(() => {
+	return Helpers.hasSlotContent(useSlots().customCurrentTime)
+})
+
+const nDays = computed(() => {
+	return props.config.week?.nDays || 7
+})
+
+watch(() => props.period, () => {
+	setInitialEvents(mode.value)
+}, { deep: true })
+
+watch(() => props.modeProp, (value) => {
+	mode.value = value
+	setInitialEvents(value)
+}, { deep: true })
+
+onMounted(() => {
+	setDayIntervals()
+	separateFullDayEventsFromOtherEvents()
+	setInitialEvents(props.modeProp)
+	if (props.config.showCurrentTime || hasCustomCurrentTimeSlot.value) setCurrentTime()
+})
+
+function separateFullDayEventsFromOtherEvents() {
+	const {
+		singleDayTimedEvents,
+		fullDayAndMultipleDayEvents,
+	} = WeekHelper.eventSeparator(events.value, props.time)
+
+	events.value = singleDayTimedEvents
+	positionFullDayEvents(fullDayAndMultipleDayEvents)
+}
+
+function positionFullDayEvents(fullDayAndMultipleDayEvents: EventInterface[]) {
+	const weekEndDate = nDays.value === 5
+		? new Date(
+			props.period.end.getFullYear(),
+			props.period.end.getMonth(),
+			props.period.end.getDate() - 2
+		)
+		: props.period.end
+
+	fullDayEvents.value = fullDayAndMultipleDayEvents.length
+		? eventPosition.positionFullDayEventsInWeek(
+			props.period.start,
+			weekEndDate,
+			fullDayAndMultipleDayEvents
+		)
+		: []
+}
+
+function setDays() {
+	const daysArray = props.time
+		.getCalendarWeekDateObjects(props.period.start)
+		.map((day: Date) => {
+			const dayName = props.time.getLocalizedNameOfWeekday(day, 'long')
+			const dateTimeString = props.time.getDateTimeStringFromDate(
+				day,
+				'start'
+			)
+			const dayEvents = new EventsFilter(events.value).getEventsForDay(props.time, dateTimeString)
+
+			return { dayName, dateTimeString, events: dayEvents }
+		})
+
+	if (nDays.value === 5 && props.time.FIRST_DAY_OF_WEEK === WEEK_START_DAY.MONDAY) {
+		// Delete Saturday & Sunday
+		daysArray.splice(5, 2)
+		fullDayEvents.value.splice(5, 2)
+	} else if (nDays.value === 5 && props.time.FIRST_DAY_OF_WEEK === WEEK_START_DAY.SUNDAY) {
+		// First delete Saturday, then Sunday
+		daysArray.splice(6, 1)
+		fullDayEvents.value.splice(6, 1)
+		daysArray.splice(0, 1)
+		fullDayEvents.value.splice(0, 1)
+	}
+
+	days.value = daysArray
+}
+
+function mergeFullDayEventsIntoDays() {
+	for (const [dayIndex] of days.value.entries()) {
+		days.value[dayIndex].fullDayEvents = fullDayEvents.value[dayIndex]
+	}
+}
+
+function setDay() {
+	const dayDateTimeString = props.time.getDateTimeStringFromDate(
+		props.period.selectedDate
+	)
+	// 1. Set the timed events
+	days.value = [
+		{
+			dayName: new Date(props.period.selectedDate).toLocaleDateString(
+				props.time.CALENDAR_LOCALE,
+				{ weekday: 'long' }
+			),
+			dateTimeString: props.time.getDateTimeStringFromDate(
+				props.period.selectedDate,
+				'start'
+			),
+			events: new EventsFilter(events.value).getEventsForDay(props.time, dayDateTimeString),
+		},
+	]
+
+	if (!fullDayEvents.value.length) return
+
+	// 2. Set full day events
+	for (const day of fullDayEvents.value) {
+		const dayDateString = props.time.getDateTimeStringFromDate(day.date)
+		if (dayDateString.substring(0, 11) === dayDateTimeString.substring(0, 11)) {
+			fullDayEvents.value = [day]
+			return
+		}
+	}
+}
+
+function setInitialEvents(currentMode: modeType) {
+	if (currentMode === 'day') setDay()
+	if (currentMode === 'week') setDays()
+
+	mergeFullDayEventsIntoDays()
+}
+
+function handleClickOnEvent(event: {
+	eventElement: HTMLDivElement
+	clickedEvent: EventInterface
+}) {
+	emit('eventWasClicked', event)
+
+	selectedEventElement.value = event.eventElement
+	selectedEvent.value = event.clickedEvent
+}
+
+function handleEventWasDragged(event: EventInterface) {
+	const cleanedUpEvent = event
+	// Reset all properties of the event, that need be calculated anew
+	delete cleanedUpEvent.totalConcurrentEvents
+	delete cleanedUpEvent.nOfPreviousConcurrentEvents
+
+	const filteredEvents = events.value.filter(e => e.id !== event.id)
+	events.value = [
+		cleanedUpEvent,
+		...filteredEvents.map((e) => {
+			// Reset all properties of each event, that need be calculated anew
+			delete e.nOfPreviousConcurrentEvents
+			delete e.totalConcurrentEvents
+
+			return e
+		}),
+	]
+	setInitialEvents(mode.value)
+	weekVersion.value = weekVersion.value + 1
+	emit('eventWasDragged', event)
+}
+
+function setDayIntervals() {
+	if (props.config.dayIntervals) {
+		for (const [key, value] of Object.entries(props.config.dayIntervals)) {
+			dayIntervals.value[key] = value
+		}
+	}
+
+	setWeekHeightBasedOnIntervals()
+}
+
+function setWeekHeightBasedOnIntervals() {
+	// 1. Catch faulty configurations
+	if (![15, 30, 60].includes(dayIntervals.value.length)) {
+		dayIntervals.value.length = 60
+		dayIntervals.value.height = 66
+		console.warn(
+			'The dayIntervals configuration is faulty. It has been reset to default values.'
+		)
+	}
+
+	// 2. Set a multiplier, for getting length of an hour based on the interval length
+	let intervalMultiplier = 1
+	if (dayIntervals.value.length === 15) intervalMultiplier = 4
+	if (dayIntervals.value.length === 30) intervalMultiplier = 2
+
+	// 3. Set height of the week based on the number and length of intervals
+	weekHeight.value = `${dayIntervals.value.height * intervalMultiplier * props.time.HOURS_PER_DAY}px`
+}
+
+function setCurrentTime() {
+	const setTime = () => {
+		const nowString = props.time.getDateTimeStringFromDate(new Date())
+		const currentTimePercentage = props.time.getPercentageOfDayFromDateTimeString(
+			nowString,
+			props.time.DAY_START,
+			props.time.DAY_END
+		)
+
+		if (currentTimePercentage < 0 || currentTimePercentage > 100) {
+			showCurrentTime.value = false
+			return
+		}
+
+		showCurrentTime.value = true
+		currentTimePercentage.value = currentTimePercentage
+	}
+	setTime()
+	setInterval(() => { setTime() }, 60000)
+}
+</script>
+
+<template>
+	<WeekTimeline
+		:days="days"
+		:time="time"
+		:full-day-events="fullDayEvents"
+		:config="config"
+		:mode="mode"
+		@event-was-clicked="handleClickOnEvent"
+		@day-was-clicked="$emit('dayWasClicked', $event)"
+	/>
+
+	<div class="calendar-week__wrapper">
+		<EventFlyout
+			v-if="!config.eventDialog || !config.eventDialog.isDisabled"
+			:calendar-event-prop="selectedEvent"
+			:event-element="selectedEventElement"
+			:time="time"
+			:config="config"
+			@hide="selectedEvent = null"
+			@edit-event="$emit('editEvent', $event)"
+			@delete-event="$emit('deleteEvent', $event)"
+		>
+			<template #default="p">
+				<slot
+					name="eventDialog"
+					:event-dialog-data="p.eventDialogData"
+					:close-event-dialog="p.closeEventDialog"
+				/>
+			</template>
+		</EventFlyout>
+
+		<section class="calendar-week">
+			<div
+				v-if="hasCustomCurrentTimeSlot && showCurrentTime"
+				class="custom-current-time"
+				:style="{ top: `${currentTimePercentage}%` }"
+			>
+				<slot name="customCurrentTime" />
+			</div>
+
+			<div
+				v-else-if="config && config.showCurrentTime && showCurrentTime"
+				class="current-time-line"
+				:style="{ top: `${currentTimePercentage}%` }"
+			>
+				<div class="current-time-line__circle" />
+			</div>
+
+			<DayTimeline
+				:key="period.start.getTime() + period.end.getTime() + mode"
+				:time="time"
+				:day-intervals="dayIntervals"
+				:week-height="weekHeight"
+			/>
+
+			<div class="calendar-week__events">
+				<Day
+					v-for="(day, dayIndex) in days"
+					:key="day.dateTimeString + mode + weekVersion"
+					:day="day"
+					:time="time"
+					:config="config"
+					:day-info="{ daysTotalN: days.length, thisDayIndex: dayIndex, dateTimeString: day.dateTimeString }"
+					:mode="mode"
+					:day-intervals="dayIntervals"
+					:week-height="+weekHeight.replace('px', '')"
+					@event-was-clicked="handleClickOnEvent"
+					@event-was-resized="$emit('eventWasResized', $event)"
+					@event-was-dragged="handleEventWasDragged"
+					@interval-was-clicked="$emit('intervalWasClicked', $event)"
+					@day-was-clicked="$emit('dayWasClicked', $event)"
+					@datetime-was-clicked="$emit('datetimeWasClicked', $event)"
+				>
+					<template #weekDayEvent="p">
+						<slot
+							:event-data="p.eventData"
+							name="weekDayEvent"
+						/>
+					</template>
+				</Day>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style scoped>
+.calendar-week__wrapper {
+	position: relative;
+	padding-left: var(--qalendar-week-padding-left);
+	overflow-y: auto;
+}
+
+.calendar-week {
+	position: relative;
+	width: 100%;
+	flex: 1 1 auto;
+}
+
+.calendar-week__events {
+	display: flex;
+	width: 100%;
+	height: v-bind(weekHeight);
+	overflow: hidden;
+}
+
+.calendar-week .current-time-line {
+	position: absolute;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	z-index: 1;
+	background-color: red;
+}
+
+.calendar-week .current-time-line__circle {
+	position: relative;
+}
+
+.calendar-week .current-time-line__circle::before {
+	content: '';
+	position: absolute;
+	transform: translate(-45%, -45%);
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	background-color: red;
+}
+
+.calendar-week .custom-current-time {
+	position: absolute;
+	left: 0;
+	width: 100%;
+	z-index: 1;
+}
+</style>

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { DayInterface } from '../../typings/interfaces/day.interface'
+import type { DayWithFullDayEvents } from '../../typings/interfaces/full-day-events-week.type'
+import type { modeType } from '../../typings/types'
+import { ref, defineEmits } from 'vue'
+import FullDayEvent from './FullDayEvent.vue'
+
+const props = defineProps<{
+	days: DayInterface[]
+	time: Time
+	fullDayEvents: DayWithFullDayEvents[]
+	config: ConfigInterface
+	mode: modeType
+}>()
+
+const emit = defineEmits<{
+	(e: 'eventWasClicked', event: any): void
+	(e: 'dayWasClicked', date: string): void
+}>()
+
+const now = ref(new Date())
+
+function getDaysDate(day: DayInterface) {
+	const { date } = props.time.getAllVariablesFromDateTimeString(
+		day.dateTimeString
+	)
+	return date
+}
+</script>
+
+<template>
+	<div class="week-timeline">
+		<div
+			v-for="(day, dayIndex) in days"
+			:key="dayIndex"
+			class="week-timeline__day"
+			:class="{
+				'is-today':
+					time.getDateTimeStringFromDate(now, 'start') === day.dateTimeString,
+			}"
+			@click="emit('dayWasClicked', time.dateStringFrom(day.dateTimeString))"
+		>
+			<div class="week-timeline__day-name">
+				{{ day.dayName.substring(0, 2).toUpperCase() }}
+			</div>
+
+			<div class="week-timeline__date">
+				{{ getDaysDate(day) }}
+			</div>
+
+			<div class="week-timeline__events">
+				<template
+					v-for="(event, key) in day.fullDayEvents"
+					:key="key"
+				>
+					<FullDayEvent
+						v-if="key !== 'date'"
+						:schedule-event="typeof event === 'object' ? event : null"
+						:config="config"
+						:mode="mode"
+						@event-was-clicked="emit('eventWasClicked', $event)"
+					/>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.week-timeline {
+	height: fit-content;
+	display: flex;
+	justify-content: space-evenly;
+	padding-bottom: var(--qalendar-spacing-half);
+	padding-left: var(--qalendar-week-padding-left);
+	border-bottom: var(--qalendar-border-gray-thin);
+}
+
+.mode-is-day .week-timeline {
+	width: 100%;
+	padding-left: 0;
+}
+
+.week-timeline__day {
+	width: 100%;
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.week-timeline__day-name {
+	font-size: var(--qalendar-font-3xs);
+	font-weight: 400;
+	margin-bottom: 4px;
+	color: var(--qalendar-gray-quite-dark);
+}
+
+.week-timeline__date {
+	font-size: 1.2rem;
+	margin-bottom: 4px;
+	height: 2rem;
+	width: 2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.is-today .week-timeline__date {
+	background-color: var(--qalendar-blue);
+	color: #fff;
+}
+
+.week-timeline__events {
+	width: 100%;
+	flex: 1;
+	border-right: 1px dashed rgb(224 224 224);
+}
+
+.week-timeline__day:first-child .week-timeline__events {
+	border-left: 1px dashed rgb(224 224 224);
+}
+</style>

package/src/components/Calendar/constants.ts

@@ -0,0 +1,13 @@
+export const EVENT_COLORS = {
+  yellow: "rgb(244, 180, 0)",
+  blue: "rgb(38, 132, 255)",
+  green: "rgb(51, 182, 121)",
+  red: "rgb(255, 84, 86)",
+  pink: "rgb(239, 139, 239)",
+  purple: "rgb(157, 114, 245)",
+  turquoise: "rgb(64, 190, 190)",
+  brown: "rgb(169, 99, 30)",
+};
+
+export const DATE_TIME_STRING_PATTERN = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/;
+export const DATE_TIME_STRING_FULL_DAY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;

package/src/components/Calendar/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}