[stable35] fix(gantt): keep exact dates when dragging or clicking bars

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",

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() {