fix(frontend): Correct time display and dragging behavior in Gantt view #2305

wake · 2024-04-26T19:03:32Z

wake commented

2024-04-26 19:03:32 +00:00

First-time contributor

Summary

This Pull Request addresses an issue in the Gantt view where task bars incorrectly displayed only the date with a forced time of 00:00. This misrepresented the actual duration and position of tasks, leading to potential misunderstandings.

Problem

In the current system, a task scheduled from 4/23 12:00 to 4/28 12:00 would only display from 4/23 00:00 to 4/28 00:00 in the Gantt view. Visually, this made the task bar appear as if it only extended to 4/27, not accurately reflecting the true end time.

Changes Made

Time Display: Updated the system to display the exact start and end times on the task bars within the Gantt view, ensuring that both date and time are correctly reflected.
Drag Behavior: Enhanced the functionality to ensure that when a task bar is dragged to update times, the new start and end times are correctly processed and displayed. This change ensures that the visual representation in the Gantt chart aligns with the actual schedule of the task.

Impact

These improvements will correct the cognitive errors previously experienced due to incorrect time truncation. Users will now see a precise representation of task schedules, and the drag-and-update functionality will behave as expected, enhancing the usability and accuracy of planning tools in the Gantt view.

Additional Notes

Closes #1997

## Summary This Pull Request addresses an issue in the Gantt view where task bars incorrectly displayed only the date with a forced time of 00:00. This misrepresented the actual duration and position of tasks, leading to potential misunderstandings. ## Problem In the current system, a task scheduled from `4/23 12:00` to `4/28 12:00` would only display from `4/23 00:00` to `4/28 00:00` in the Gantt view. Visually, this made the task bar appear as if it only extended to `4/27`, not accurately reflecting the true end time. <img src="https://dpr.wake.gs/i/UoE06P+.png" width="500" /> <img src="https://dpr.wake.gs/i/W2AIwS+.png" width="400" /> ## Changes Made 1. **Time Display:** Updated the system to display the exact start and end times on the task bars within the Gantt view, ensuring that both date and time are correctly reflected. 2. **Drag Behavior:** Enhanced the functionality to ensure that when a task bar is dragged to update times, the new start and end times are correctly processed and displayed. This change ensures that the visual representation in the Gantt chart aligns with the actual schedule of the task. ## Impact These improvements will correct the cognitive errors previously experienced due to incorrect time truncation. Users will now see a precise representation of task schedules, and the drag-and-update functionality will behave as expected, enhancing the usability and accuracy of planning tools in the Gantt view. <img src="https://dpr.wake.gs/i/p4E74D+.png" width="400" /> ## Additional Notes Closes #1997

wake added 6 commits 2024-04-26 19:03:36 +00:00

9e2a6d5575 feat: Add DatetimeKebab type

d183fafa1e feat: Add isoToKebabDatetime helper

2833f97c16 feat: Update date and time format handling

1. Changed the `DAYJS_ISO_DATE_FORMAT` constant to 'YYYY-MM-DD HH:mm'.

2. Updated the Gantt chart component's date-time parameters to `isoToKebabDatetime`.

3. Modified the date formatting in task data to `isoToKebabDatetime`.

878493f0ad feat: Add const DATEFNS_DATETIME_FORMAT_KEBAB

fe104334a1 feat: Add helper parseKebabDatetime

continuous-integration/drone/pr Build is failing Details

d8dcf65284 feat: Update date-time parser in update:task event

wake changed title from ~~WIP: fix(frontend): Correct time display and dragging behavior in Gantt view~~ to fix(frontend): Correct time display and dragging behavior in Gantt view

2024-04-27 01:04:57 +00:00

wake commented

2024-04-27 02:32:11 +00:00

First-time contributor

It appears that the build failed due to issues already present in the main branch. Could you please confirm if this is the case? Any suggestions on how we might address this, or steps I should take next would be greatly appreciated. Thank you! 🙏

wake requested review from konrad 2024-04-27 20:19:26 +00:00

konrad commented

2024-05-05 14:09:43 +00:00

It appears that the build failed due to issues already present in the main branch. Could you please confirm if this is the case? Any suggestions on how we might address this, or steps I should take next would be greatly appreciated. Thank you! 🙏

There are two errors which you seem to have introduced:

/go/src/code.vikunja.io/api/frontend/src/components/tasks/GanttChart.vue

  52:9  error  'isoToKebabDate' is defined but never used  @typescript-eslint/no-unused-vars

  54:9  error  'parseKebabDate' is defined but never used  @typescript-eslint/no-unused-vars

The warnings do not fail the build, errors do. The main branch does not have any errors.

> It appears that the build failed due to issues already present in the main branch. Could you please confirm if this is the case? Any suggestions on how we might address this, or steps I should take next would be greatly appreciated. Thank you! 🙏 There are two errors which you seem to have introduced: ``` /go/src/code.vikunja.io/api/frontend/src/components/tasks/GanttChart.vue 52:9 error 'isoToKebabDate' is defined but never used @typescript-eslint/no-unused-vars 54:9 error 'parseKebabDate' is defined but never used @typescript-eslint/no-unused-vars ``` The warnings do not fail the build, errors do. The `main` branch does not have any errors.

konrad reviewed 2024-05-05 14:14:17 +00:00

frontend/src/components/tasks/GanttChart.vue

						
				@ -13,2 +13,2 @@

							:chart-start="isoToKebabDate(filters.dateFrom)"

							:chart-end="isoToKebabDate(filters.dateTo)"

							:chart-start="isoToKebabDatetime(dateFromDate.toISOString())"

							:chart-end="isoToKebabDatetime(dateToDate.toISOString())"

konrad commented

2024-05-05 14:12:54 +00:00

Why not continue to use the dates from filters?

frontend/src/components/tasks/GanttChart.vue

						
				@ -84,3 +86,3 @@

				}>()

				const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'

				const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD HH:mm'

konrad commented

2024-05-05 14:10:45 +00:00

Can you rename the const to make it clear that it does not only contain a date but the time as well?

frontend/src/helpers/time/isoToKebabDatetime.ts

						
				@ -0,0 +1,19 @@

				import type {DateISO} from '@/types/DateISO'

				import type {DatetimeKebab} from '@/types/DatetimeKebab'

				// ✅ Format a date to YYYY-MM-DD HH:MM