vikunja/vikunja
5
48
Fork 86
Code Issues 150 Pull Requests 37 Packages Releases 37 Activity

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

Open
wake wants to merge 6 commits from wake/vikunja:main into main
pull from: wake/vikunja:main
merge into: vikunja:main
Conversation 2 Commits 6 Files Changed 5 +40 -7
wake commented 2024-04-26 19:03:32 +00:00
First-time contributor
Copy Link

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

  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.

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 
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`.
feat: Update date-time parser in update:task event
Some checks failed
continuous-integration/drone/pr Build is failing
Details
d8dcf65284
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
Author
First-time contributor
Copy Link

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! 🙏

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
Owner
Copy Link

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
Owner
Copy Link

Why not continue to use the dates from filters?

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
Owner
Copy Link

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

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
konrad commented 2024-05-05 14:13:48 +00:00
Owner
Copy Link

The comment seems wrong here

The comment seems wrong here
👍 1
Some checks failed
continuous-integration/drone/pr Build is failing
Required
Details
This pull request has changes conflicting with the target branch.
  • frontend/src/constants/date.ts
View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u main:wake-main
git checkout wake-main
Sign in to join this conversation.
Reviewers
No Reviewers
konrad
Labels
Clear labels
dependencies
duplicate
This issue or pull request already exists
help wanted
Need some help
invalid
Something is wrong
kind/bug
Something is not working
kind/feature
New feature
needs reproduction
question
More information is needed
security
wontfix
This won't be fixed
No Label
Milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: vikunja/vikunja#2305
No description provided.
Delete Branch "wake/vikunja:main"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?