diff --git a/packages/vtable-gantt/__tests__/gantt-update-task-record.test.ts b/packages/vtable-gantt/__tests__/gantt-update-task-record.test.ts new file mode 100644 index 000000000..7504c4d2e --- /dev/null +++ b/packages/vtable-gantt/__tests__/gantt-update-task-record.test.ts @@ -0,0 +1,63 @@ +// @ts-nocheck + +global.__VERSION__ = 'none'; + +import { Gantt } from '../src'; +import { createDiv, removeDom } from './dom'; + +describe('gantt updateTaskRecord', () => { + test('updates the task bar position and width after changing task dates', () => { + const container = createDiv(); + container.style.width = '900px'; + container.style.height = '400px'; + + const records = [ + { id: 1, title: 'Task 1', startDate: '2024-07-01', endDate: '2024-07-03', progress: 10 }, + { id: 2, title: 'Task 2', startDate: '2024-07-05', endDate: '2024-07-07', progress: 20 }, + { id: 3, title: 'Task 3', startDate: '2024-07-09', endDate: '2024-07-11', progress: 30 } + ]; + + const gantt = new Gantt(container, { + records, + taskListTable: { + columns: [ + { field: 'title', title: 'title', width: 160 }, + { field: 'startDate', title: 'startDate', width: 120 }, + { field: 'endDate', title: 'endDate', width: 120 } + ], + tableWidth: 400 + }, + taskBar: { + startDateField: 'startDate', + endDateField: 'endDate', + progressField: 'progress' + }, + timelineHeader: { + colWidth: 40, + scales: [{ unit: 'day', step: 1 }] + }, + minDate: '2024-07-01', + maxDate: '2024-07-31' + }); + + try { + const originalTaskBar = gantt.scenegraph.taskBar.getTaskBarNodeByIndex(2); + expect(originalTaskBar.attribute.x).toBe(320); + expect(originalTaskBar.attribute.width).toBe(120); + + gantt.updateTaskRecord({ ...records[2], startDate: '2024-07-12', endDate: '2024-07-16' }, 2); + + const updatedTaskBar = gantt.scenegraph.taskBar.getTaskBarNodeByIndex(2); + expect(gantt.getRecordByIndex(2)).toMatchObject({ + startDate: '2024-07-12', + endDate: '2024-07-16' + }); + expect(updatedTaskBar).not.toBe(originalTaskBar); + expect(updatedTaskBar.attribute.x).toBe(440); + expect(updatedTaskBar.attribute.width).toBe(200); + } finally { + gantt.release?.(); + removeDom(container); + } + }); +}); diff --git a/packages/vtable-gantt/examples/gantt/gantt-issue-4534-update-task-record.ts b/packages/vtable-gantt/examples/gantt/gantt-issue-4534-update-task-record.ts new file mode 100644 index 000000000..55af9ccad --- /dev/null +++ b/packages/vtable-gantt/examples/gantt/gantt-issue-4534-update-task-record.ts @@ -0,0 +1,67 @@ +import { Gantt } from '../../src'; + +const CONTAINER_ID = 'vTable'; + +export function createTable() { + const container = document.getElementById(CONTAINER_ID); + if (!container) { + return; + } + + const records = [ + { id: 1, title: 'Requirement review', startDate: '2024-07-01', endDate: '2024-07-03', progress: 30 }, + { id: 2, title: 'Interaction design', startDate: '2024-07-05', endDate: '2024-07-07', progress: 50 }, + { id: 3, title: 'Integration testing', startDate: '2024-07-09', endDate: '2024-07-11', progress: 70 } + ]; + + const ganttInstance = new Gantt(container, { + records, + taskListTable: { + columns: [ + { field: 'title', title: 'Task', width: 180 }, + { field: 'startDate', title: 'Start', width: 110 }, + { field: 'endDate', title: 'End', width: 110 } + ], + tableWidth: 400 + }, + taskBar: { + startDateField: 'startDate', + endDateField: 'endDate', + progressField: 'progress' + }, + timelineHeader: { + colWidth: 40, + scales: [{ unit: 'day', step: 1, format: date => date.dateIndex.toString() }] + }, + minDate: '2024-07-01', + maxDate: '2024-07-31' + }); + + const button = document.createElement('button'); + button.textContent = 'Update last task dates'; + button.style.position = 'fixed'; + button.style.right = '16px'; + button.style.top = '16px'; + button.style.zIndex = '10'; + button.style.padding = '8px 12px'; + + const status = document.createElement('div'); + status.id = 'issue-4534-status'; + status.textContent = 'Before: Jul 9 - Jul 11'; + status.style.position = 'fixed'; + status.style.right = '16px'; + status.style.top = '56px'; + status.style.zIndex = '10'; + status.style.padding = '6px 10px'; + status.style.background = '#fff'; + + button.addEventListener('click', () => { + ganttInstance.updateTaskRecord({ ...records[2], startDate: '2024-07-12', endDate: '2024-07-16' }, 2); + const taskBar = ganttInstance.scenegraph.taskBar.getTaskBarNodeByIndex(2); + status.textContent = `After: Jul 12 - Jul 16; x=${taskBar.attribute.x}; width=${taskBar.attribute.width}`; + }); + + document.body.appendChild(button); + document.body.appendChild(status); + window.ganttInstance = ganttInstance; +} diff --git a/packages/vtable-gantt/examples/menu.ts b/packages/vtable-gantt/examples/menu.ts index 1bcfe17a9..b6691dfeb 100644 --- a/packages/vtable-gantt/examples/menu.ts +++ b/packages/vtable-gantt/examples/menu.ts @@ -179,6 +179,10 @@ export const menus = [ path: 'gantt', name: 'gantt-issue-5162-sort-drag' }, + { + path: 'gantt', + name: 'gantt-issue-4534-update-task-record' + }, { path: 'gantt', name: 'issue-4778-taskbar-relative-rect'