feat: added support for checking any value against "null" in filter string to see if it was set

frontend/src/components/project/views/ProjectCalendar.vue

@@ -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>

pkg/models/task_collection_filter.go

@@ -244,6 +244,11 @@ func getValueForField(field reflect.StructField, rawValue string, loc *time.Loca
 		loc = config.GetTimeZone()
 	}
 
+	if rawValue == "null" {
+		value = nil
+		return
+	}
+
 	switch field.Type.Kind() {
 	case reflect.Int64:
 		value, err = strconv.ParseInt(rawValue, 10, 64)