diff --git a/package-lock.json b/package-lock.json
index f76f2f6939..0a16779db4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
"vue3-smooth-dnd": "^1.0.0"
},
"devDependencies": {
+ "@jest/globals": "^29.7.0",
"@nextcloud/babel-config": "^1.3.0",
"@nextcloud/browserslist-config": "^3.1.2",
"@nextcloud/e2e-test-server": "^0.6.1",
@@ -2305,7 +2306,6 @@
"cpu": [
"ppc64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2322,7 +2322,6 @@
"cpu": [
"arm"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2339,7 +2338,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2356,7 +2354,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2373,7 +2370,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2390,7 +2386,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2407,7 +2402,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2424,7 +2418,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2441,7 +2434,6 @@
"cpu": [
"arm"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2458,7 +2450,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2475,7 +2466,6 @@
"cpu": [
"ia32"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2492,7 +2482,6 @@
"cpu": [
"loong64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2509,7 +2498,6 @@
"cpu": [
"mips64el"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2526,7 +2514,6 @@
"cpu": [
"ppc64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2543,7 +2530,6 @@
"cpu": [
"riscv64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2560,7 +2546,6 @@
"cpu": [
"s390x"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2577,7 +2562,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2594,7 +2578,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2611,7 +2594,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2628,7 +2610,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2645,7 +2626,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2662,7 +2642,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2679,7 +2658,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2696,7 +2674,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2713,7 +2690,6 @@
"cpu": [
"ia32"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2730,7 +2706,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
diff --git a/package.json b/package.json
index 4be8a9e42e..ca76dec72a 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
"npm": "^11.3.0"
},
"devDependencies": {
+ "@jest/globals": "^29.7.0",
"@nextcloud/babel-config": "^1.3.0",
"@nextcloud/browserslist-config": "^3.1.2",
"@nextcloud/e2e-test-server": "^0.6.1",
diff --git a/src/components/board/GanttView.vue b/src/components/board/GanttView.vue
index 012098ccf8..eb2fe038db 100644
--- a/src/components/board/GanttView.vue
+++ b/src/components/board/GanttView.vue
@@ -14,7 +14,11 @@
-
+
@@ -68,6 +72,7 @@ import { mapActions, mapState } from 'pinia'
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 { useBoardStore } from '../../stores/board.js'
import { useCardStore } from '../../stores/card.js'
@@ -88,18 +93,6 @@ const STACK_COLORS = [
'#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',
@@ -225,7 +218,7 @@ export default {
computed: {
...mapState(useBoardStore, ['canEdit']),
- ...mapState(useCardStore, ['cardsByStack']),
+ ...mapState(useCardStore, ['cardsByStack', 'cardById']),
partitionedCards() {
const undatedCards = []
const ganttTasks = []
@@ -304,9 +297,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')
@@ -405,26 +400,43 @@ 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
@@ -435,6 +447,20 @@ export default {
}
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))
+ })
+})