forked from vikunja/vikunja
feat(calendar): implemented eventAdd and eventChange events from FC
This commit is contained in:
parent
2390c7f4a8
commit
38a519ead6
|
@ -1,15 +1,12 @@
|
|||
<template>
|
||||
<ProjectWrapper
|
||||
ref="projectWrapper"
|
||||
class="project-list"
|
||||
:project-id="projectId"
|
||||
:view-id
|
||||
>
|
||||
<ProjectWrapper ref="projectWrapper" class="project-list" :project-id="projectId" :view-id>
|
||||
<template #header>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="card">
|
||||
<FullCalendar :options="calendarOptions" ref="calendar" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</ProjectWrapper>
|
||||
|
@ -74,19 +71,29 @@ onMounted(() => {
|
|||
|
||||
let initialEvents = [];
|
||||
|
||||
|
||||
function is_midnight(time?: Date) {
|
||||
return (time && time.getHours() == 0 && time.getMinutes() == 0)
|
||||
}
|
||||
|
||||
watch(
|
||||
allTasks,
|
||||
() => {
|
||||
console.log(allTasks.value);
|
||||
for (let task of allTasks.value) {
|
||||
let allDay = (task.startDate && is_midnight(task.startDate) && task.endDate && (is_midnight(task.endDate) || is_midnight(task.endDate)));
|
||||
|
||||
if (task.startDate)
|
||||
calendar.value.calendar.addEvent({
|
||||
id: task.id,
|
||||
title: task.title,
|
||||
start: task.startDate,
|
||||
end: task.endDate,
|
||||
allDay: allDay,
|
||||
color: task.hexColor,
|
||||
extendedProps: {
|
||||
done: task.done
|
||||
exists: true,
|
||||
task: task
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -94,33 +101,10 @@ watch(
|
|||
)
|
||||
|
||||
|
||||
/*
|
||||
const INITIAL_EVENTS = [
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'All-day event',
|
||||
start: todayStr
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'Timed event',
|
||||
start: todayStr + 'T12:00:00'
|
||||
}
|
||||
]*/
|
||||
|
||||
function createEventId() {
|
||||
return String(eventGuid++)
|
||||
}
|
||||
|
||||
/*
|
||||
const {
|
||||
projectId,
|
||||
viewId,
|
||||
} = defineProps<{
|
||||
projectId: IProject['id'],
|
||||
viewId: IProjectView['id'],
|
||||
}>()
|
||||
*/
|
||||
|
||||
|
||||
function handleWeekendsToggle() {
|
||||
|
@ -149,7 +133,7 @@ function handleDateSelect(selectInfo: { view: { calendar: any }; startStr: any;
|
|||
|
||||
function handleEventClick(clickInfo: { event: any }) {
|
||||
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
|
||||
clickInfo.event.extendedProps.done != clickInfo.event.extendedProps.done
|
||||
clickInfo.event.extendedProps.task.done != clickInfo.event.extendedProps.task.done
|
||||
console.log("here")
|
||||
clickInfo.view.calendar.render()
|
||||
}
|
||||
|
@ -163,9 +147,7 @@ function parseTime(time: Date | null) {
|
|||
}
|
||||
|
||||
function eventRender(info: any) {
|
||||
console.log(info);
|
||||
const event = info.event;
|
||||
console.log(event.extendedProps);
|
||||
let timeEl = document.createElement("p");
|
||||
let titleEl = document.createElement("p");
|
||||
timeEl.innerHTML = parseTime(event.start)
|
||||
|
@ -173,7 +155,7 @@ function parseTime(time: Date | null) {
|
|||
if (event.end)
|
||||
timeEl.innerHTML += " - " + parseTime(event.end);
|
||||
|
||||
if(event.extendedProps.done) {
|
||||
if (event.extendedProps.task.done) {
|
||||
let strikethroughEl = document.createElement("s");
|
||||
strikethroughEl.innerHTML = titleEl.innerHTML;
|
||||
titleEl = strikethroughEl;
|
||||
|
@ -183,6 +165,39 @@ function parseTime(time: Date | null) {
|
|||
// {description: "Lecture", department: "BioChemistry"}
|
||||
}
|
||||
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useTaskStore } from '@/stores/tasks'
|
||||
import TaskService from '@/services/task'
|
||||
import TaskModel from '@/models/task'
|
||||
const authStore = useAuthStore()
|
||||
const taskStore = useTaskStore()
|
||||
const taskService = new TaskService()
|
||||
let firstDayOfWeek = Math.min(authStore.settings.weekStart ?? 0, 2)
|
||||
|
||||
|
||||
async function eventAddHandler(addEvent:any) {
|
||||
if(addEvent.event.extendedProps.exists) {
|
||||
return
|
||||
}
|
||||
const task = new TaskModel({
|
||||
title: addEvent.event.title,
|
||||
projectId: projectId,
|
||||
startDate: addEvent.event.start.toString(),
|
||||
endDate: addEvent.event.end.toString(),
|
||||
})
|
||||
|
||||
const createdTask = await taskService.create(task)
|
||||
}
|
||||
|
||||
async function eventChangeHandler(changeEvent:any) {
|
||||
let task: ITask = changeEvent.event.extendedProps.task;
|
||||
task.startDate = changeEvent.event.start;
|
||||
task.endDate = changeEvent.event.end;
|
||||
|
||||
const updatedTask = await taskService.update(task)
|
||||
}
|
||||
|
||||
|
||||
const calendarOptions = ref({
|
||||
plugins: [
|
||||
timeGridPlugin,
|
||||
|
@ -200,12 +215,14 @@ const calendarOptions = ref({
|
|||
selectMirror: true,
|
||||
dayMaxEvents: true,
|
||||
weekends: true,
|
||||
firstDay: firstDayOfWeek,
|
||||
select: handleDateSelect,
|
||||
eventClick: handleEventClick,
|
||||
eventContent: eventRender
|
||||
eventContent: eventRender,
|
||||
eventAdd: eventAddHandler,
|
||||
eventChange: eventChangeHandler
|
||||
/* you can update a remote database when these fire:
|
||||
eventAdd:
|
||||
eventChange:
|
||||
eventRemove:
|
||||
*/
|
||||
});
|
||||
|
@ -213,3 +230,10 @@ const calendarOptions = ref({
|
|||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fc {
|
||||
padding: .5rem;
|
||||
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user