103 lines
2.8 KiB
Vue
103 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import type { PropType} from "vue";
|
|
import type {ContextMenuType} from "@models/misc/contextMenu"
|
|
import type {calendarShowEvent, ShowEventActionTrigger} from "@models/misc/calendarShowEvent.ts";
|
|
import {calendarShowEventMenu} from "@models/misc/calendarShowEvent";
|
|
import { ref } from 'vue';
|
|
import ContextMenu from '@partials/ContextMenu.vue';
|
|
|
|
const emit = defineEmits([
|
|
'contextMenuEditInstance',
|
|
'contextMenuEditShow',
|
|
'contextMenuDeleteInstance',
|
|
'contextMenuDeleteShow'
|
|
]);
|
|
|
|
// Data
|
|
const calendar = ref(null);
|
|
const currentCalendarDate = ref(null);
|
|
const selectedShowInstance = ref(null);
|
|
const contextMenu = ref<ContextMenuType>({
|
|
visible: false,
|
|
position: {
|
|
top: 0,
|
|
left: 0,
|
|
},
|
|
menu: calendarShowEventMenu
|
|
});
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
editMode: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
shows: {
|
|
type: Array as PropType<calendarShowEvent[]>,
|
|
default: false,
|
|
}
|
|
});
|
|
|
|
// Funcs
|
|
const openContextMenu = (showInstance: Record<string, unknown>, browserEvent: MouseEvent) => {
|
|
if (!props.editMode) return;
|
|
|
|
selectedShowInstance.value = showInstance;
|
|
contextMenu.value.visible = true;
|
|
contextMenu.value.position.top = browserEvent.y;
|
|
contextMenu.value.position.left = browserEvent.x + 5;
|
|
};
|
|
|
|
const hideContextMenu = () => {
|
|
contextMenu.value.visible = false;
|
|
};
|
|
|
|
const contextMenuAction = (action: ShowEventActionTrigger, item: Object) => {
|
|
if (!selectedShowInstance.value) return;
|
|
emit(action, selectedShowInstance.value.showInstanceIndex);
|
|
contextMenu.value.visible = false;
|
|
};
|
|
|
|
const formatTime = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-calendar
|
|
ref="calendar"
|
|
v-model="currentCalendarDate"
|
|
:events="shows"
|
|
:event-margin-bottom="3"
|
|
@contextmenu:event="openContextMenu"
|
|
>
|
|
<template v-slot:event="{ event }">
|
|
<div
|
|
class="v-event mx-1 event-content"
|
|
:style="{ backgroundColor: event.color as string }"
|
|
@click="(e) => openContextMenu(event, e)"
|
|
@click.self="hideContextMenu"
|
|
>
|
|
<span>{{ event.title }}</span>
|
|
<br/>
|
|
<span>{{ formatTime(event.start as string) }} - {{ formatTime(event.end as string) }}</span>
|
|
</div>
|
|
</template>
|
|
</v-calendar>
|
|
|
|
<ContextMenu v-if="contextMenu.visible" @contextMenuAction="contextMenuAction" :event="selectedShowInstance"
|
|
:menu="contextMenu.menu" :top="contextMenu.position.top" :left="contextMenu.position.left"/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.event-content {
|
|
position: relative;
|
|
white-space: normal;
|
|
line-height: 1.2;
|
|
padding: 4px 8px;
|
|
background-color: #7492b9;
|
|
border-radius: 8px;
|
|
color: white;
|
|
}
|
|
</style>
|