`;
});
board.appendChild(column);
});
addDragDropListeners();
}
function renderItemsTable() {
const table = document.getElementById('items-table');
const headers = ['ID', 'Description', 'Assignee', 'Status', 'Start Date', 'Done Date'];
table.innerHTML = `
${headers.map(h=>`| ${h} | `).join('')}Actions |
${workItemsData.map(item => `
|
|
|
|
|
|
|
`).join('')}
`;
}
function addDragDropListeners() {
document.querySelectorAll('.psd-task-card').forEach(card => {
card.addEventListener('dragstart', e => e.dataTransfer.setData('text/plain', e.target.dataset.id));
});
document.querySelectorAll('.psd-board-column').forEach(col => {
col.addEventListener('dragover', e => e.preventDefault());
col.addEventListener('drop', e => {
e.preventDefault();
const id = parseInt(e.dataTransfer.getData('text/plain'));
const newStatus = e.currentTarget.dataset.status;
const item = workItemsData.find(i => i.id === id);
if (item && item.Status !== newStatus) {
item.Status = newStatus;
const todayStr = new Date().toISOString().split('T')[0];
if (newStatus === 'In Progress' && !item.StartDate) item.StartDate = todayStr;
if (newStatus === 'Done') item.DoneDate = todayStr;
renderAll();
}
});
});
}
function handleTableEvents(e) {
const target = e.target;
if (!target) return;
const id = parseInt(target.closest('tr')?.dataset.id);
if (!id) return;
if (target.classList.contains('remove-item-btn')) {
workItemsData = workItemsData.filter(i => i.id !== id);
} else if (target.tagName === 'INPUT' || target.tagName === 'SELECT') {
const key = target.dataset.key;
const item = workItemsData.find(i => i.id === id);
if (item) item[key] = target.value;
}
renderAll();
}
function initialize() {
workItemsData = [
{ id: 1, ID: 'TASK-101', Description: 'Develop user login feature', Assignee: 'Team Alpha', Status: 'Done', StartDate: '2025-06-15', DoneDate: '2025-06-25' },
{ id: 2, ID: 'TASK-102', Description: 'Set up new database schema', Assignee: 'Team Bravo', Status: 'In Progress', StartDate: '2025-06-26', DoneDate: null },
{ id: 3, ID: 'TASK-103', Description: 'Design marketing assets for launch', Assignee: 'Team Charlie', Status: 'In Progress', StartDate: '2025-06-28', DoneDate: null },
{ id: 4, ID: 'TASK-104', Description: 'Fix API authentication bug', Assignee: 'Team Alpha', Status: 'To Do', StartDate: null, DoneDate: null },
{ id: 5, ID: 'TASK-105', Description: 'Write user documentation', Assignee: 'Team Charlie', Status: 'To Do', StartDate: null, DoneDate: null },
{ id: 6, ID: 'TASK-106', Description: 'Plan Q4 feature roadmap', Assignee: 'Team Bravo', Status: 'Backlog', StartDate: null, DoneDate: null },
];
wipLimitInput.addEventListener('change', renderAll);
document.getElementById('psd-add-item-btn').addEventListener('click', () => {
workItemsData.push({ id: Date.now(), ID: `TASK-${Math.floor(100 + Math.random()*900)}`, Description: 'New Work Item', Assignee: ASSIGNEES[0], Status: 'Backlog' });
renderAll();
});
const table = document.getElementById('items-table');
table.addEventListener('change', handleTableEvents);
table.addEventListener('click', handleTableEvents);
renderAll();
}
initialize();
});
