feat: add Gantt chart view for boards#7812
Conversation
aparcar
requested review from
elzody,
grnd-alt and
luka-nextcloud
as code owners
grnd-alt
left a comment
grnd-alt
left a comment
There was a problem hiding this comment.
works thanks a lot for this contribution. But there is some room for improvement. also darkmode looks like this:
| ...mapState({ | ||
| filter: state => state.filter, | ||
| }), | ||
| ganttViewModes() { |
There was a problem hiding this comment.
why have this as a computed does not seem to depend on anything?
| deep: true, | ||
| handler() { | ||
| if (!this.isDragging) { | ||
| this.$nextTick(() => this.renderGantt()) |
There was a problem hiding this comment.
we can also update the chart with refresh() no need to render every time
| // Inject dynamic stack colors as CSS | ||
| this.injectStackStyles() | ||
|
|
||
| this.ganttInstance = new Gantt(this.$refs.ganttContainer, this.ganttTasks, { |
There was a problem hiding this comment.
parsing this.ganttTasks causes infinite rerenders and tab crash as the gantt library can update the param itself, we should pass a copy and also not rerender if this.ganttTasks changes
| this.ganttInstance = null | ||
| }, | ||
| methods: { | ||
| formatDate(date) { |
There was a problem hiding this comment.
not needed library can handle date object
| this.ganttInstance.change_view_mode(mode) | ||
| this.$nextTick(() => this.fitColumnsToWidth()) | ||
| } else { | ||
| this.$nextTick(() => this.renderGantt()) |
There was a problem hiding this comment.
why try rendering again? if ganttInstance is null that means there are no tasks to render why would that change if the user changes viewmode?
| end = new Date(start) | ||
| end.setDate(end.getDate() + 1) | ||
| } | ||
| if (!start && !end) { |
There was a problem hiding this comment.
unreachable case because of the filter L189?
| const styleId = 'gantt-stack-styles' | ||
| let styleEl = document.getElementById(styleId) | ||
| if (!styleEl) { | ||
| styleEl = document.createElement('style') |
There was a problem hiding this comment.
not a fan of creating a style element at document root here, we can also achieve generated classes by using scss and set the custom-class param to classname-${stackId % x)
Add a timeline/Gantt view as an alternative to the kanban board view, allowing users to visualize card schedules across time using frappe-gantt. - Add GanttView component with Day/Week/Month view modes - Add Kanban/Gantt view toggle in board controls - Store view mode preference in localStorage via Vuex - Stack-based color coding with legend and undated cards section - Drag-and-drop support for rescheduling cards - Auto-fit column width to fill container on wider views - Add frappe-gantt dependency and webpack resolve alias for its CSS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Paul Spooren <mail@aparcar.org>
|
@grnd-alt I ran Claude again and worked on the fixes. Since this is mostly AI generating (somewhat usable) things, I understand that this quickly starts to waste your time. In other words, please feel free to close this PR until someone comes along with actual web dev knowledge to create a proper implementation. |
|
Hello there, We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process. Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6 Thank you for contributing to Nextcloud and we hope to hear from you soon! (If you believe you should not receive this message, you can add yourself to the blocklist.) |
2 participants
Summary
Add a timeline/Gantt view as an alternative to the kanban board view, allowing users to visualize card schedules across time using frappe-gantt.
This is inspired by https://github.com/nextcloud-community/ncgantt
TODO
Checklist