From 069b73fe5db418d37665b5c7d6e579a5d9d6706b Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 20 Oct 2026 12:17:09 +0200
Subject: [PATCH] fix(gantt): keep exact dates when dragging or clicking bars

frappe-gantt converts the bar position back to dates in whole units,
truncating fractions. In the month view this snapped dates to the turn
of the month, and bars shorter than a month ended one second before
they started. The week and day views lost the time of day or minutes.
The conversion also ran on any mouse movement while a bar was pressed,
so just clicking a bar to open the card changed its dates.

Take the card dates from the store when a drag starts and shift them by
the dragged distance instead. Full days are added on the calendar so the
time of day is kept across DST changes. Clicking a bar without moving it
no longer saves anything.

Signed-off-by: Jonas <jonas@freesources.org>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 package-lock.json                  | 27 +---------
 package.json                       |  1 +
 src/components/board/GanttView.vue | 71 ++++++++++++++++---------
 src/helpers/ganttDates.js          | 60 +++++++++++++++++++++
 src/helpers/ganttDates.spec.js     | 83 ++++++++++++++++++++++++++++++
 5 files changed, 193 insertions(+), 49 deletions(-)
 create mode 100644 src/helpers/ganttDates.js
 create mode 100644 src/helpers/ganttDates.spec.js

diff --git a/package-lock.json b/package-lock.json
index 6b6aecc9f9..4cc3393749 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "vue3-smooth-dnd": "^0.0.6"
       },
       "devDependencies": {
+        "@jest/globals": "^29.7.0",
         "@nextcloud/babel-config": "^1.3.0",
         "@nextcloud/browserslist-config": "^3.0.1",
         "@nextcloud/e2e-test-server": "^0.5.1",
@@ -2314,7 +2315,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2331,7 +2331,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2348,7 +2347,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2365,7 +2363,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2382,7 +2379,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2399,7 +2395,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2416,7 +2411,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2433,7 +2427,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2450,7 +2443,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2467,7 +2459,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2484,7 +2475,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2501,7 +2491,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2518,7 +2507,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2535,7 +2523,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2552,7 +2539,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2569,7 +2555,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2586,7 +2571,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2603,7 +2587,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2620,7 +2603,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2637,7 +2619,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2654,7 +2635,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2671,7 +2651,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2688,7 +2667,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2705,7 +2683,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2722,7 +2699,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2739,7 +2715,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
diff --git a/package.json b/package.json
index f4cd1eb1a1..00bfc6ecbe 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "npm": "^11.3.0"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@nextcloud/babel-config": "^1.3.0",
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/e2e-test-server": "^0.5.1",
diff --git a/src/components/board/GanttView.vue b/src/components/board/GanttView.vue
index 0eaeca01dd..d6e1026447 100644
--- a/src/components/board/GanttView.vue
+++ b/src/components/board/GanttView.vue
@@ -13,7 +13,10 @@
 			</NcButton>
 		</div>
 
-		<div v-if="ganttTasks.length > 0" ref="ganttContainer" class="gantt-chart" />
+		<div v-if="ganttTasks.length > 0"
+			ref="ganttContainer"
+			class="gantt-chart"
+			@mousedown.capture="onChartMouseDown" />
 
 		<NcEmptyContent v-if="!ganttTasks.length && !undatedCards.length">
 			<template #icon>
@@ -66,6 +69,7 @@ import { NcButton, NcEmptyContent } from '@nextcloud/vue'
 import ChartGanttIcon from 'vue-material-design-icons/ChartGantt.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import { computeDraggedDates, DAYS_PER_UNIT } from '../../helpers/ganttDates.js'
 import { useCardStore } from '../../stores/card.js'
 import { useBoardStore } from '../../stores/board.js'
 
@@ -75,18 +79,6 @@ const STACK_COLORS = [
 	'#3f51b5', '#8bc34a', '#ff5722', '#009688',
 ]
 
-// Mirrors frappe-gantt date_utils.convert_scales() constants.
-// days_per_unit[scale] = how many days one unit of that scale is.
-const DAYS_PER_UNIT = {
-	millisecond: 1 / 86400000,
-	second: 1 / 86400,
-	minute: 1 / 1440,
-	hour: 1 / 24,
-	day: 1,
-	month: 30,
-	year: 365,
-}
-
 const GANTT_VIEW_MODES = [
 	{
 		name: 'Day',
@@ -201,7 +193,7 @@ export default {
 	},
 	computed: {
 		...mapState(useBoardStore, ['canEdit']),
-		...mapState(useCardStore, ['cardsByStack']),
+		...mapState(useCardStore, ['cardsByStack', 'cardById']),
 		partitionedCards() {
 			const undatedCards = []
 			const ganttTasks = []
@@ -275,9 +267,11 @@ export default {
 		this._onMouseUp = async (event) => {
 			if (this.pendingChange) {
 				const { task, start, end } = this.pendingChange
-				await this.updateTaskDate(task, start, end)
+				const changed = await this.updateTaskDate(task, start, end)
 				this.pendingChange = null
-				return
+				if (changed) {
+					return
+				}
 			}
 
 			const barWrapper = event.target.closest('.bar-wrapper')
@@ -368,30 +362,61 @@ export default {
 				readonly_progress: true,
 				readonly: !this.canEdit,
 				popup: false,
-				on_date_change: (task, start, end) => {
-					this.pendingChange = { task, start, end }
+				on_date_change: (task) => {
+					this.pendingChange = { task, start: task._start, end: task._end }
 				},
 			})
 
-			this._patchBarDuration()
+			this._patchBarPrototype()
 			this.fitColumnsToWidth()
 			this.ganttInstance.change_view_mode(this.ganttInstance.config.view_mode.name, true)
 			this.ganttInstance.scroll_current()
 		},
 		async updateTaskDate(task, start, end) {
+			const card = this.cardById(task._card.id)
+			const current = this.cardToGanttTask(card, 0)
+			if (current.start.getTime() === start.getTime() && current.end.getTime() === end.getTime()) {
+				return false
+			}
 			await this.updateCardDatesInStore({
-				...task._card,
-				startdate: new Date(start).toISOString(),
-				duedate: new Date(end).toISOString(),
+				...card,
+				startdate: start.toISOString(),
+				duedate: end.toISOString(),
 			})
+			return true
 		},
-		_patchBarDuration() {
+		onChartMouseDown(event) {
+			const barWrapper = event.target.closest('.bar-wrapper')
+			const bar = barWrapper && this.ganttInstance?.get_bar(barWrapper.getAttribute('data-id'))
+			const card = bar && this.cardById(bar.task._card.id)
+			if (!card) {
+				return
+			}
+			const { start, end } = this.cardToGanttTask(card, 0)
+			bar._deckDragOrigin = { start, end, x: bar.$bar.getX(), width: bar.$bar.getWidth() }
+		},
+
+		_patchBarPrototype() {
 			const bars = this.ganttInstance?.bars
 			if (!bars?.length) return
 			const BarProto = Object.getPrototypeOf(bars[0])
 			if (BarProto._deckDurationPatched) return
 			BarProto._deckDurationPatched = true
 
+			// frappe-gantt converts the bar position back to dates in whole units, which snaps
+			// dates to the start of a month or day. Shift the dates by the dragged distance instead.
+			BarProto.compute_start_end_date = function() {
+				if (!this._deckDragOrigin) {
+					return { new_start_date: this.task._start, new_end_date: this.task._end }
+				}
+				const { start, end } = computeDraggedDates(this._deckDragOrigin, this.$bar.getX(), this.$bar.getWidth(), {
+					unit: this.gantt.config.unit,
+					step: this.gantt.config.step,
+					columnWidth: this.gantt.config.column_width,
+				})
+				return { new_start_date: start, new_end_date: end }
+			}
+
 			// we overwrite the compute_duration function because it enforces a minimum of 1 day duration
 			// for reference: https://github.com/frappe/gantt/issues/534
 			BarProto.compute_duration = function() {
diff --git a/src/helpers/ganttDates.js b/src/helpers/ganttDates.js
new file mode 100644
index 0000000000..b1f821bd22
--- /dev/null
+++ b/src/helpers/ganttDates.js
@@ -0,0 +1,60 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+const MS_PER_DAY = 86400000
+const MS_PER_MINUTE = 60000
+
+// Mirrors frappe-gantt date_utils.convert_scales() constants.
+// DAYS_PER_UNIT[scale] = how many days one unit of that scale is.
+export const DAYS_PER_UNIT = {
+	millisecond: 1 / 86400000,
+	second: 1 / 86400,
+	minute: 1 / 1440,
+	hour: 1 / 24,
+	day: 1,
+	month: 30,
+	year: 365,
+}
+
+/**
+ * Shift a date by a duration rounded to full minutes.
+ * Full days are added on the calendar, so the time of day is kept across DST changes.
+ *
+ * @param {Date} date the date to shift
+ * @param {number} ms the duration in milliseconds, may be negative
+ * @return {Date}
+ */
+export function shiftDate(date, ms) {
+	const minutes = Math.round(ms / MS_PER_MINUTE)
+	const days = Math.trunc(minutes * MS_PER_MINUTE / MS_PER_DAY)
+	const result = new Date(date)
+	result.setDate(result.getDate() + days)
+	result.setTime(result.getTime() + minutes * MS_PER_MINUTE - days * MS_PER_DAY)
+	return result
+}
+
+/**
+ * Compute the dates of a gantt bar from how far it was moved or resized since the drag started.
+ *
+ * @param {object} origin dates and position of the bar when the drag started
+ * @param {Date} origin.start start date
+ * @param {Date} origin.end end date
+ * @param {number} origin.x left position in pixels
+ * @param {number} origin.width width in pixels
+ * @param {number} x current left position in pixels
+ * @param {number} width current width in pixels
+ * @param {object} scale the scale of the chart
+ * @param {string} scale.unit time unit of one step, e.g. 'day'
+ * @param {number} scale.step number of units per column
+ * @param {number} scale.columnWidth width of one column in pixels
+ * @return {{start: Date, end: Date}}
+ */
+export function computeDraggedDates(origin, x, width, { unit, step, columnWidth }) {
+	const msPerPixel = DAYS_PER_UNIT[unit] * step * MS_PER_DAY / columnWidth
+	return {
+		start: shiftDate(origin.start, (x - origin.x) * msPerPixel),
+		end: shiftDate(origin.end, (x + width - origin.x - origin.width) * msPerPixel),
+	}
+}
diff --git a/src/helpers/ganttDates.spec.js b/src/helpers/ganttDates.spec.js
new file mode 100644
index 0000000000..e8bda78715
--- /dev/null
+++ b/src/helpers/ganttDates.spec.js
@@ -0,0 +1,83 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it } from '@jest/globals'
+import { computeDraggedDates, shiftDate } from './ganttDates.js'
+
+const HOUR = 3600000
+const DAY = 24 * HOUR
+
+// Month view: one column is one 30 day month, snapping happens every 7 days
+const MONTH_SCALE = { unit: 'month', step: 1, columnWidth: 120 }
+const MONTH_SNAP_PX = 120 / (30 / 7)
+// Week view: one column is 7 days, snapping happens every day
+const WEEK_SCALE = { unit: 'day', step: 7, columnWidth: 140 }
+// Day view: one column is 12 hours, snapping happens every hour
+const DAY_SCALE = { unit: 'hour', step: 12, columnWidth: 38 }
+
+function origin() {
+	return {
+		start: new Date(2026, 9, 30, 9, 30),
+		end: new Date(2026, 10, 29, 17, 15),
+		x: 472.23,
+		width: 160.71,
+	}
+}
+
+describe('shiftDate', () => {
+	it('keeps the time of day when shifting by full days', () => {
+		const result = shiftDate(new Date(2026, 9, 20, 9, 30), 10 * DAY)
+		expect(result).toEqual(new Date(2026, 9, 30, 9, 30))
+	})
+
+	it('shifts by hours and minutes', () => {
+		const result = shiftDate(new Date(2026, 9, 20, 9, 30), -(DAY + 2 * HOUR + 15 * 60000))
+		expect(result).toEqual(new Date(2026, 9, 19, 7, 15))
+	})
+
+	it('rounds floating point noise to full minutes', () => {
+		const result = shiftDate(new Date(2026, 9, 20, 9, 30), 7 * DAY - 0.0001)
+		expect(result).toEqual(new Date(2026, 9, 27, 9, 30))
+	})
+})
+
+describe('computeDraggedDates', () => {
+	it('keeps the dates when the bar was not moved', () => {
+		const o = origin()
+		for (const scale of [MONTH_SCALE, WEEK_SCALE, DAY_SCALE]) {
+			const { start, end } = computeDraggedDates(o, o.x, o.width, scale)
+			expect(start).toEqual(o.start)
+			expect(end).toEqual(o.end)
+		}
+	})
+
+	it('moves both dates by the snapped distance in the month view', () => {
+		const o = origin()
+		const { start, end } = computeDraggedDates(o, o.x + 3 * MONTH_SNAP_PX, o.width, MONTH_SCALE)
+		expect(start).toEqual(new Date(2026, 10, 20, 9, 30))
+		expect(end).toEqual(new Date(2026, 11, 20, 17, 15))
+	})
+
+	it('only moves the end date when resizing on the right in the month view', () => {
+		const o = origin()
+		const { start, end } = computeDraggedDates(o, o.x, o.width + MONTH_SNAP_PX, MONTH_SCALE)
+		expect(start).toEqual(o.start)
+		expect(end).toEqual(new Date(2026, 11, 6, 17, 15))
+	})
+
+	it('only moves the start date when resizing on the left in the week view', () => {
+		const o = origin()
+		const { start, end } = computeDraggedDates(o, o.x - 40, o.width + 40, WEEK_SCALE)
+		expect(start).toEqual(new Date(2026, 9, 28, 9, 30))
+		expect(end).toEqual(o.end)
+	})
+
+	it('moves by hours in the day view', () => {
+		const o = origin()
+		const { start, end } = computeDraggedDates(o, o.x + 5 * 38 / 12, o.width, DAY_SCALE)
+		expect(start).toEqual(new Date(2026, 9, 30, 14, 30))
+		expect(end).toEqual(new Date(2026, 10, 29, 22, 15))
+	})
+})