@bagelink/vue 0.0.1218 → 0.0.1224

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

@@ -0,0 +1,198 @@
+<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:first-child {
+	border-inline-start: 1px solid var(--border-color);
+}
+
+.calendar-week__day {
+	border-inline-end: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--border-color);
+
+}
+</style>