@bagelink/vue 0.0.1218 → 0.0.1220

package/src/components/Calendar/components/month/Month.vue

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { DayInterface } from '../../typings/interfaces/day.interface'
+import type { EventInterface } from '../../typings/interfaces/event.interface'
+import type { PeriodInterface } from '../../typings/interfaces/period.interface'
+import { ref, onMounted } from 'vue'
+import EDate from '../../helpers/EDate'
+import EventPosition from '../../helpers/EventPosition'
+import Helpers from '../../helpers/Helpers'
+import EventFlyout from '../partials/EventFlyout.vue'
+import AgendaEvents from './AgendaEvents.vue'
+import Day from './Day.vue'
+import WeekDay from './WeekDay.vue'
+
+const props = defineProps({
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	period: {
+		type: Object as PropType<PeriodInterface>,
+		required: true,
+	},
+	eventsProp: {
+		type: Array as PropType<EventInterface[]>,
+		default: () => [],
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'editEvent', event: any): void
+	(e: 'deleteEvent', event: any): void
+	(e: 'updatedPeriod', period: any): void
+	(e: 'eventWasClicked', event: any): void
+	(e: 'eventWasDragged', event: any): void
+	(e: 'dateWasClicked', date: any): void
+}>()
+
+const EventPositionHelper = new EventPosition()
+
+const month = ref<DayInterface[][]>([])
+const selectedEvent = ref<EventInterface | null>(null)
+const selectedEventElement = ref<any | null>(null)
+const events = ref(props.eventsProp)
+const fullDayEvents = ref<EventInterface[]>([])
+const selectedDay = ref<DayInterface | null>(null)
+
+function initMonth() {
+	month.value = []
+	sortOutFullDayEvents()
+	setMonth()
+	if (props.config.isSmall) setInitialSelectedDay()
+}
+
+function setMonth() {
+	const { month: currentMonth, fullYear } = new EDate(props.period.selectedDate)
+	const calendarMonth = props.time.getCalendarMonthSplitInWeeks(
+		fullYear,
+		currentMonth
+	)
+
+	const monthWithEvents = calendarMonth.map((week) => {
+		return week.map((day) => {
+			const dateTimeString = props.time.getDateTimeStringFromDate(day)
+			const dayEvents = events.value.filter((event) => {
+				return props.time.dateStringsHaveEqualDates(event.time.start, dateTimeString)
+			})
+
+			return {
+				isTrailingOrLeadingDate: props.time.isTrailingOrLeadingDate(day, currentMonth),
+				dayName: props.time.getLocalizedNameOfWeekday(day),
+				dateTimeString: props.time.getDateTimeStringFromDate(day),
+				events: dayEvents,
+			}
+		})
+	})
+
+	month.value = EventPositionHelper.positionFullDayEventsInMonth(
+		monthWithEvents,
+		fullDayEvents.value
+	)
+}
+
+function sortOutFullDayEvents() {
+	const timedEvents = []
+	const fullDayEventsArray = []
+
+	for (const calendarEvent of events.value) {
+		if (Helpers.getEventType(calendarEvent, props.time) === 'SINGLE_DAY_TIMED') {
+			timedEvents.push(calendarEvent)
+		} else {
+			fullDayEventsArray.push(calendarEvent)
+		}
+	}
+
+	events.value = timedEvents
+	fullDayEvents.value = fullDayEventsArray
+}
+
+function handleClickOnEvent(event: {
+	eventElement: HTMLDivElement
+	clickedEvent: EventInterface
+}) {
+	emit('eventWasClicked', event)
+	selectedEventElement.value = event.eventElement
+	selectedEvent.value = event.clickedEvent
+}
+
+function handleEventWasDragged(calendarEvent: EventInterface) {
+	emit('eventWasDragged', calendarEvent)
+	const newEvents = [...events.value, ...fullDayEvents.value].filter(
+		e => e.id !== calendarEvent.id
+	)
+	newEvents.push(calendarEvent)
+	events.value = []
+	fullDayEvents.value = []
+	events.value = newEvents
+	initMonth()
+}
+
+function setInitialSelectedDay() {
+	const selectedDayDateString = props.time.getDateStringFromDate(props.period.selectedDate)
+	selectedDay.value = month.value.flat().find((day) => {
+		return props.time.dateStringFrom(day.dateTimeString) === selectedDayDateString
+	}) || null
+}
+
+onMounted(() => {
+	initMonth()
+})
+</script>
+
+<template>
+	<div class="calendar-month">
+		<div
+			class="calendar-month__week-day-names"
+		>
+			<WeekDay
+				v-for="(day, dayIndex) in month[0]"
+				:key="dayIndex"
+				class="calendar-month__week-day-name"
+				:config="config"
+				:day="day"
+				:time="time"
+			/>
+		</div>
+		<div class="calendar-month__weeks">
+			<div
+				v-for="(week, weekIndex) in month"
+				:key="weekIndex"
+				class="calendar-month__week"
+			>
+				<Day
+					v-for="(day, dayIndex) in week"
+					:key="dayIndex"
+					:config="config"
+					:day="day"
+					:time="time"
+					:is-selected="selectedDay?.dateTimeString === day.dateTimeString"
+					@eventWasClicked="handleClickOnEvent"
+					@eventWasDragged="handleEventWasDragged"
+					@dateWasClicked="emit('dateWasClicked', $event)"
+					@dayWasSelected="selectedDay = $event"
+					@updatedPeriod="emit('updatedPeriod', $event)"
+				>
+					<template #monthEvent="{ eventData }">
+						<slot
+							:event-data="eventData"
+							name="monthEvent"
+						/>
+					</template>
+
+					<template #dayCell="{ dayData }">
+						<slot
+							:day-data="dayData"
+							name="dayCell"
+						/>
+					</template>
+				</Day>
+			</div>
+		</div>
+
+		<div
+			v-if="!(config.month?.showEventsOnMobileView === false)"
+			class="calendar-month__day_events"
+		>
+			<AgendaEvents
+				v-if="selectedDay"
+				:config="config"
+				:time="time"
+				:day="selectedDay"
+				@eventWasClicked="handleClickOnEvent"
+			/>
+		</div>
+
+		<EventFlyout
+			v-if="!config.eventDialog || !config.eventDialog.isDisabled"
+			:calendar-event-prop="selectedEvent"
+			:event-element="selectedEventElement"
+			:time="time"
+			:config="config"
+			@hide="selectedEvent = null"
+			@editEvent="emit('editEvent', $event)"
+			@deleteEvent="emit('deleteEvent', $event)"
+		>
+			<template #default="p">
+				<slot
+					name="eventDialog"
+					:event-dialog-data="p.eventDialogData"
+					:close-event-dialog="p.closeEventDialog"
+				/>
+			</template>
+		</EventFlyout>
+	</div>
+</template>
+
+<style>
+.calendar-month {
+	position: relative;
+	display: flex;
+	flex-flow: column;
+	width: 100%;
+	height: 100%;
+	overflow-y: auto;
+}
+
+:global(.qalendar-is-small) .calendar-month {
+	height: initial;
+}
+
+.calendar-month__week-day-names {
+	display: flex;
+	justify-content: space-between;
+}
+
+.calendar-month__week-day-name {
+	flex: 1;
+	text-align: center;
+}
+
+.calendar-month__weeks {
+	height: 100%;
+	flex-grow: 1;
+	display: flex;
+	flex-flow: column;
+	justify-content: space-between;
+}
+
+.calendar-month__week {
+	display: flex;
+	flex: 1;
+}
+
+.calendar-month__week:first-child {
+	border-top: var(--qalendar-border-gray-thin);
+}
+
+@media (prefers-color-scheme: dark) {
+	.calendar-month__week:first-child {
+		border-color: var(--qalendar-dark-mode-line-color);
+	}
+}
+
+.calendar-month__day_events {
+	height: 100%;
+	display: none;
+}
+
+:global(.qalendar-is-small) .calendar-month__day_events {
+	display: block;
+}
+</style>

package/src/components/Calendar/components/month/WeekDay.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { DayInterface } from '../../typings/interfaces/day.interface'
+
+defineProps<{
+	day: DayInterface
+}>()
+</script>
+
+<template>
+	<span
+		class="calendar-month__day-name"
+	>
+		{{ day.dayName }}
+	</span>
+</template>
+
+<style scoped>
+.calendar-month__day-name {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--qalendar-gray-quite-dark);
+  margin-bottom: var(--qalendar-spacing-half);
+}
+</style>