forked from vikunja/vikunja
feat: added element to drag unscheduled tasks onto calendar
This commit is contained in:
parent
45cc37d98c
commit
95a9c06921
|
@ -1,18 +1,21 @@
|
|||
<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 #default>
|
||||
<div class="card" id="tasklist">
|
||||
<div
|
||||
v-for="t in listTasks"
|
||||
:key="t.id"
|
||||
class="task"
|
||||
>
|
||||
{{ t.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="card">
|
||||
<FullCalendar
|
||||
ref="calendar"
|
||||
:options="calendarOptions"
|
||||
/>
|
||||
<FullCalendar ref="calendar" :options="calendarOptions" />
|
||||
</div>
|
||||
</template>
|
||||
</ProjectWrapper>
|
||||
|
@ -22,9 +25,10 @@
|
|||
|
||||
import { ref, watch } from 'vue'
|
||||
import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
|
||||
import SingleTaskInProject from '@/components/tasks/partials/singleTaskInProject.vue'
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import interactionPlugin, { Draggable } from '@fullcalendar/interaction'
|
||||
import type { IProject } from '@/modelTypes/IProject'
|
||||
import type { IProjectView } from '@/modelTypes/IProjectView'
|
||||
import type { ITask } from '@/modelTypes/ITask'
|
||||
|
@ -34,6 +38,8 @@ import TaskService from '@/services/task'
|
|||
import TaskModel from '@/models/task'
|
||||
import type { DateSelectArg, EventAddArg, EventChangeArg, EventClickArg, CustomContentGenerator, EventContentArg } from '@fullcalendar/core/index.js'
|
||||
import router from '@/router'
|
||||
import {useTaskStore} from '@/stores/tasks'
|
||||
import type { TaskFilterParams } from '@/services/taskCollection'
|
||||
|
||||
const {
|
||||
projectId,
|
||||
|
@ -48,7 +54,7 @@ const projectWrapper = ref(null)
|
|||
|
||||
const {
|
||||
tasks: allTasks,
|
||||
} = useTaskList(() => projectId, () => viewId)
|
||||
} = useTaskList(() => projectId, () => viewId, { id: 'desc' })
|
||||
|
||||
|
||||
/*
|
||||
|
@ -66,15 +72,18 @@ function is_midnight(time?: Date) {
|
|||
return (time && time.getHours() == 0 && time.getMinutes() == 0)
|
||||
}
|
||||
|
||||
function isAllDay(task: ITask){
|
||||
return (task.startDate && is_midnight(task.startDate) && task.endDate && (is_midnight(task.endDate) || is_midnight(task.endDate)))
|
||||
function isAllDay(task: ITask) {
|
||||
return (task.startDate && is_midnight(task.startDate) && ((task.endDate && (is_midnight(task.endDate) || is_midnight(task.endDate))) || !task.endDate))
|
||||
}
|
||||
|
||||
watch(
|
||||
[allTasks, calendar],
|
||||
() => {
|
||||
if(!calendar.value)
|
||||
if (!calendar.value)
|
||||
return
|
||||
new Draggable(document.getElementById("tasklist"), {
|
||||
itemSelector: ".task",
|
||||
})
|
||||
for (const task of allTasks.value) {
|
||||
if (task.startDate)
|
||||
calendar.value.calendar.addEvent({
|
||||
|
@ -120,7 +129,7 @@ function handleDateSelect(selectInfo: DateSelectArg) {
|
|||
function handleEventClick(clickInfo: EventClickArg) {
|
||||
router.push({
|
||||
name: 'task.detail',
|
||||
params: {id: clickInfo.event.id},
|
||||
params: { id: clickInfo.event.id },
|
||||
//state: {backdropView: router.currentRoute.value.fullPath},
|
||||
})
|
||||
return
|
||||
|
@ -158,42 +167,54 @@ function eventRender(info: CustomContentGenerator<EventContentArg>) {
|
|||
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const taskStore = useTaskStore()
|
||||
const taskService = new TaskService()
|
||||
const firstDayOfWeek = Math.min(authStore.settings.weekStart ?? 0, 2)
|
||||
|
||||
const listTasksParams: TaskFilterParams = {
|
||||
filter: 'done = false && start_date = null',
|
||||
sort_by: ['id'],
|
||||
order_by: ['desc'],
|
||||
filter_include_nulls: true,
|
||||
s: '',
|
||||
}
|
||||
|
||||
let listTasks: {[id: number]: ITask} = []
|
||||
|
||||
taskStore.loadTasks(listTasksParams).then((list) => listTasks = list)
|
||||
|
||||
|
||||
|
||||
async function eventAddHandler(addEvent: EventAddArg) {
|
||||
if(addEvent.event.extendedProps.exists) {
|
||||
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(),
|
||||
})
|
||||
|
||||
title: addEvent.event.title,
|
||||
projectId: projectId,
|
||||
startDate: addEvent.event.start.toString(),
|
||||
endDate: addEvent.event.end.toString(),
|
||||
})
|
||||
|
||||
const createdTask = await taskService.create(task)
|
||||
|
||||
addEvent.event = {
|
||||
id: String(createdTask.id),
|
||||
title: createdTask.title,
|
||||
start: createdTask.startDate,
|
||||
end: createdTask.endDate,
|
||||
allDay: isAllDay(createdTask) ?? false,
|
||||
color: createdTask.hexColor,
|
||||
extendedProps: {
|
||||
exists: true,
|
||||
task: createdTask,
|
||||
},
|
||||
}
|
||||
addEvent.event.setProp('id', createdTask.id)
|
||||
addEvent.event.setProp('title', createdTask.title)
|
||||
addEvent.event.setDates(createdTask.startDate.toString(), createdTask.endDate.toString(), { allDay: isAllDay(createdTask) ?? false })
|
||||
addEvent.event.setProp('color', createdTask.hexColor)
|
||||
addEvent.event.setExtendedProp('exists', true)
|
||||
addEvent.event.setExtendedProp('task', createdTask)
|
||||
|
||||
eventGuid = createdTask.id + 1
|
||||
}
|
||||
|
||||
async function eventChangeHandler(changeEvent: EventChangeArg) {
|
||||
const task: ITask = changeEvent.event.extendedProps.task
|
||||
if (!task)
|
||||
return
|
||||
task.startDate = changeEvent.event.start
|
||||
task.endDate = changeEvent.event.end
|
||||
|
||||
|
||||
/*const updatedTask = */await taskService.update(task)
|
||||
}
|
||||
|
||||
|
@ -231,9 +252,15 @@ const calendarOptions = ref({
|
|||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.fc {
|
||||
padding: .5rem;
|
||||
--fc-border-color: #3b3b3b;
|
||||
}
|
||||
|
||||
.fc-timegrid-event-harness-inset .fc-timegrid-event,
|
||||
.fc-timegrid-event.fc-event-mirror,
|
||||
.fc-timegrid-more-link {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user