fix: gantt route sync (#2664)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2664

cypress/e2e/list/list-view-gantt.spec.ts

@@ -77,4 +77,49 @@ describe('List View Gantt', () => {
 			.trigger('mouseup', {force: true})
 		cy.wait('@taskUpdate')
 	})
+
+	it('Should change the query parameters when selecting a date range', () => {
+		const now = Date.UTC(2022, 10, 9)
+		cy.clock(now, ['Date'])
+
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
+			.click()
+		cy.get('.flatpickr-calendar .flatpickr-innerContainer .dayContainer .flatpickr-day')
+			.first()
+			.click()
+		cy.get('.flatpickr-calendar .flatpickr-innerContainer .dayContainer .flatpickr-day')
+			.last()
+			.click()
+
+		cy.url().should('contain', 'dateFrom=2022-09-25')
+		cy.url().should('contain', 'dateTo=2022-11-05')
+	})
+
+	it('Should change the date range based on date query parameters', () => {
+		cy.visit('/lists/1/gantt?dateFrom=2022-09-25&dateTo=2022-11-05')
+
+		cy.get('.g-timeunits-container')
+			.should('contain', 'September 2022')
+			.should('contain', 'October 2022')
+			.should('contain', 'November 2022')
+		cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
+			.should('have.value', '25 Sep 2022 to 5 Nov 2022')
+	})
+
+	it('Should open a task when double clicked on it', () => {
+		const now = new Date()
+		const tasks = TaskFactory.create(1, {
+			start_date: formatISO(now),
+			end_date: formatISO(now.setDate(now.getDate() + 4)),
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-container .g-gantt-chart .g-gantt-row-bars-container .g-gantt-bar')
+			.dblclick()
+
+		cy.url()
+			.should('contain', `/tasks/${tasks[0].id}`)
+	})
 })

src/composables/useRouteFilters.ts

@@ -16,16 +16,22 @@ export function useRouteFilters<CurrentFilters extends Filters>(
 
 	const routeFromFiltersFullPath = computed(() => router.resolve(filtersToRoute(filters.value)).fullPath)
 
-	watch(() => route.value, (route, oldRoute) => {
+	watch(
+		route,
+		(route, oldRoute) => {
 			if (
-			(route && oldRoute && typeof route.name !== 'undefined' && typeof oldRoute.name !== 'undefined' && route.name !== oldRoute.name) ||
+				route?.name !== oldRoute?.name ||
 				routeFromFiltersFullPath.value === route.fullPath
 			) {
 				return
 			}
 
 			filters.value = routeToFilters(route)
-	})
+		},
+		{
+			immediate: true, // set the filter from the initial route
+		},
+	)
 
 	watch(
 		filters,
@@ -35,12 +41,23 @@ export function useRouteFilters<CurrentFilters extends Filters>(
 			}
 		},
 		// only apply new route after all filters have changed in component cycle
-		{flush: 'post'},
+		{
+			deep: true,
+			flush: 'post',
+		},
 	)
 
-	const hasDefaultFilters = computed(() => {
-		return equal(filters.value, getDefaultFilters(route.value))
-	})
+	const hasDefaultFilters = ref(false)
+	watch(
+		[filters, route],
+		([filters, route]) => {
+			hasDefaultFilters.value = equal(filters, getDefaultFilters(route))
+		},
+		{
+			deep: true,
+			immediate: true,
+		},
+	)
 
 	function setDefaultFilters() {
 		filters.value = getDefaultFilters(route.value)

src/helpers/time/isoToKebabDate.ts

@@ -1,8 +1,16 @@
-import {format} from 'date-fns'
-import {DATEFNS_DATE_FORMAT_KEBAB} from '@/constants/date' 
 import type {DateISO} from '@/types/DateISO'
 import type {DateKebab} from '@/types/DateKebab'
 
-export function isoToKebabDate(isoDate: DateISO) {
-	return format(new Date(isoDate), DATEFNS_DATE_FORMAT_KEBAB) as DateKebab
+// ✅ Format a date to YYYY-MM-DD (or any other format)
+function padTo2Digits(num: number) {
+  return num.toString().padStart(2, '0')
+}
+
+export function isoToKebabDate(isoDate: DateISO) {
+	const date = new Date(isoDate)
+	return [
+		date.getFullYear(),
+		padTo2Digits(date.getMonth() + 1), // January is 0, but we want it to be 1
+		padTo2Digits(date.getDate()),
+	].join('-') as DateKebab
 }

src/helpers/time/parseDateProp.ts

@@ -22,7 +22,7 @@ export function parseDateProp(kebabDate: DateKebab | undefined): string | undefi
 		if (!dateValuesAreValid) {
 			throw new Error('Invalid date values')
 		}
-		return new Date(year, month, date).toISOString() as DateISO
+		return new Date(year, month - 1, date).toISOString() as DateISO
 	} catch(e) {
 		// ignore nonsense route queries
 		return

src/views/list/ListGantt.vue

@@ -88,9 +88,15 @@ const {
 	updateTask,
 } = useGanttFilters(route)
 
-const today = new Date(new Date().setHours(0,0,0,0))
-const defaultTaskStartDate: DateISO = new Date(today).toISOString()
-const defaultTaskEndDate: DateISO = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 23,59,0,0).toISOString()
+const DEFAULT_DATE_RANGE_DAYS = 7
+
+const today = new Date()
+const defaultTaskStartDate: DateISO = new Date(today.setHours(0, 0, 0, 0)).toISOString()
+const defaultTaskEndDate: DateISO = new Date(new Date(
+	today.getFullYear(),
+	today.getMonth(),
+	today.getDate() + DEFAULT_DATE_RANGE_DAYS,
+).setHours(23, 59, 0, 0)).toISOString()
 
 async function addGanttTask(title: ITask['title']) {
 	return await addTask({

src/views/list/helpers/useGanttFilters.ts

@@ -98,8 +98,8 @@ export function useGanttFilters(route: Ref<RouteLocationNormalized>): UseGanttFi
 		setDefaultFilters,
 	} = useRouteFilters<GanttFilters>(
 		route,
-		ganttRouteToFilters,
 		ganttGetDefaultFilters,
+		ganttRouteToFilters,
 		ganttFiltersToRoute,
 	)