Add sub-tasks feature.
This commit is contained in:
363
static/js/subtasks.js
Normal file
363
static/js/subtasks.js
Normal file
@@ -0,0 +1,363 @@
|
||||
// Sub-task Management Functions
|
||||
|
||||
// Global variable to track subtasks
|
||||
let currentSubtasks = [];
|
||||
|
||||
// Initialize subtasks when loading a task
|
||||
function initializeSubtasks(taskId) {
|
||||
currentSubtasks = [];
|
||||
const subtasksContainer = document.getElementById('subtasks-container');
|
||||
if (!subtasksContainer) return;
|
||||
|
||||
subtasksContainer.innerHTML = '<div class="loading">Loading subtasks...</div>';
|
||||
|
||||
if (taskId) {
|
||||
// Fetch existing subtasks
|
||||
fetch(`/api/tasks/${taskId}`)
|
||||
.then(response => response.json())
|
||||
.then(task => {
|
||||
if (task.subtasks) {
|
||||
currentSubtasks = task.subtasks;
|
||||
renderSubtasks();
|
||||
} else {
|
||||
subtasksContainer.innerHTML = '<p class="no-subtasks">No subtasks yet</p>';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading subtasks:', error);
|
||||
subtasksContainer.innerHTML = '<p class="error">Error loading subtasks</p>';
|
||||
});
|
||||
} else {
|
||||
renderSubtasks();
|
||||
}
|
||||
}
|
||||
|
||||
// Render subtasks in the modal
|
||||
function renderSubtasks() {
|
||||
const container = document.getElementById('subtasks-container');
|
||||
if (!container) return;
|
||||
|
||||
if (currentSubtasks.length === 0) {
|
||||
container.innerHTML = '<p class="no-subtasks">No subtasks yet</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = currentSubtasks.map((subtask, index) => `
|
||||
<div class="subtask-item" data-subtask-id="${subtask.id || ''}" data-index="${index}">
|
||||
<input type="checkbox"
|
||||
class="subtask-checkbox"
|
||||
${subtask.status === 'COMPLETED' ? 'checked' : ''}
|
||||
onchange="toggleSubtaskStatus(${index})"
|
||||
${subtask.id ? '' : 'disabled'}>
|
||||
<input type="text"
|
||||
class="subtask-name"
|
||||
value="${escapeHtml(subtask.name)}"
|
||||
placeholder="Subtask name"
|
||||
onchange="updateSubtaskName(${index}, this.value)">
|
||||
<select class="subtask-priority" onchange="updateSubtaskPriority(${index}, this.value)">
|
||||
<option value="LOW" ${subtask.priority === 'LOW' ? 'selected' : ''}>Low</option>
|
||||
<option value="MEDIUM" ${subtask.priority === 'MEDIUM' ? 'selected' : ''}>Medium</option>
|
||||
<option value="HIGH" ${subtask.priority === 'HIGH' ? 'selected' : ''}>High</option>
|
||||
<option value="URGENT" ${subtask.priority === 'URGENT' ? 'selected' : ''}>Urgent</option>
|
||||
</select>
|
||||
<select class="subtask-assignee" onchange="updateSubtaskAssignee(${index}, this.value)">
|
||||
<option value="">Unassigned</option>
|
||||
${renderAssigneeOptions(subtask.assigned_to_id)}
|
||||
</select>
|
||||
<button type="button" class="btn btn-danger btn-xs" onclick="removeSubtask(${index})">Remove</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Add a new subtask
|
||||
function addSubtask() {
|
||||
const newSubtask = {
|
||||
name: '',
|
||||
status: 'NOT_STARTED',
|
||||
priority: 'MEDIUM',
|
||||
assigned_to_id: null,
|
||||
isNew: true
|
||||
};
|
||||
|
||||
currentSubtasks.push(newSubtask);
|
||||
renderSubtasks();
|
||||
|
||||
// Focus on the new subtask input
|
||||
setTimeout(() => {
|
||||
const inputs = document.querySelectorAll('.subtask-name');
|
||||
if (inputs.length > 0) {
|
||||
inputs[inputs.length - 1].focus();
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// Remove a subtask
|
||||
function removeSubtask(index) {
|
||||
const subtask = currentSubtasks[index];
|
||||
|
||||
if (subtask.id) {
|
||||
// If it has an ID, it exists in the database
|
||||
if (confirm('Are you sure you want to delete this subtask?')) {
|
||||
fetch(`/api/subtasks/${subtask.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
currentSubtasks.splice(index, 1);
|
||||
renderSubtasks();
|
||||
showNotification('Subtask deleted successfully', 'success');
|
||||
} else {
|
||||
throw new Error('Failed to delete subtask');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error deleting subtask:', error);
|
||||
showNotification('Error deleting subtask', 'error');
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Just remove from array if not saved yet
|
||||
currentSubtasks.splice(index, 1);
|
||||
renderSubtasks();
|
||||
}
|
||||
}
|
||||
|
||||
// Update subtask name
|
||||
function updateSubtaskName(index, name) {
|
||||
currentSubtasks[index].name = name;
|
||||
}
|
||||
|
||||
// Update subtask priority
|
||||
function updateSubtaskPriority(index, priority) {
|
||||
currentSubtasks[index].priority = priority;
|
||||
}
|
||||
|
||||
// Update subtask assignee
|
||||
function updateSubtaskAssignee(index, assigneeId) {
|
||||
currentSubtasks[index].assigned_to_id = assigneeId || null;
|
||||
}
|
||||
|
||||
// Toggle subtask status
|
||||
function toggleSubtaskStatus(index) {
|
||||
const subtask = currentSubtasks[index];
|
||||
const newStatus = subtask.status === 'COMPLETED' ? 'NOT_STARTED' : 'COMPLETED';
|
||||
|
||||
if (subtask.id) {
|
||||
// Update in database
|
||||
fetch(`/api/subtasks/${subtask.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ status: newStatus })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(updatedSubtask => {
|
||||
currentSubtasks[index] = updatedSubtask;
|
||||
renderSubtasks();
|
||||
updateTaskProgress();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating subtask status:', error);
|
||||
showNotification('Error updating subtask status', 'error');
|
||||
renderSubtasks(); // Re-render to revert checkbox
|
||||
});
|
||||
} else {
|
||||
currentSubtasks[index].status = newStatus;
|
||||
}
|
||||
}
|
||||
|
||||
// Save all subtasks for a task
|
||||
function saveSubtasks(taskId) {
|
||||
const promises = [];
|
||||
|
||||
currentSubtasks.forEach(subtask => {
|
||||
if (subtask.isNew && subtask.name.trim()) {
|
||||
// Create new subtask
|
||||
promises.push(
|
||||
fetch('/api/subtasks', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
task_id: taskId,
|
||||
name: subtask.name,
|
||||
priority: subtask.priority,
|
||||
assigned_to_id: subtask.assigned_to_id,
|
||||
status: subtask.status
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
);
|
||||
} else if (subtask.id && !subtask.isNew) {
|
||||
// Update existing subtask
|
||||
promises.push(
|
||||
fetch(`/api/subtasks/${subtask.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: subtask.name,
|
||||
priority: subtask.priority,
|
||||
assigned_to_id: subtask.assigned_to_id,
|
||||
status: subtask.status
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
// Update task progress based on subtasks
|
||||
function updateTaskProgress() {
|
||||
const taskId = document.getElementById('task-id').value;
|
||||
if (!taskId) return;
|
||||
|
||||
// Refresh the task card in the board
|
||||
if (typeof refreshTaskCard === 'function') {
|
||||
refreshTaskCard(taskId);
|
||||
}
|
||||
}
|
||||
|
||||
// Render assignee options
|
||||
function renderAssigneeOptions(selectedId) {
|
||||
// This should be populated from the global team members list
|
||||
const teamMembers = window.teamMembers || [];
|
||||
return teamMembers.map(member =>
|
||||
`<option value="${member.id}" ${member.id == selectedId ? 'selected' : ''}>${escapeHtml(member.username)}</option>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
// Helper function to escape HTML
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// Display subtasks in task cards
|
||||
function renderSubtasksInCard(subtasks) {
|
||||
if (!subtasks || subtasks.length === 0) return '';
|
||||
|
||||
const completedCount = subtasks.filter(s => s.status === 'COMPLETED').length;
|
||||
const totalCount = subtasks.length;
|
||||
const percentage = Math.round((completedCount / totalCount) * 100);
|
||||
|
||||
return `
|
||||
<div class="task-subtasks">
|
||||
<div class="subtask-progress">
|
||||
<div class="subtask-progress-bar">
|
||||
<div class="subtask-progress-fill" style="width: ${percentage}%"></div>
|
||||
</div>
|
||||
<span class="subtask-count">${completedCount}/${totalCount} subtasks</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add subtask styles
|
||||
const subtaskStyles = `
|
||||
<style>
|
||||
/* Subtask Styles - Compact */
|
||||
.subtask-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.4rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.subtask-checkbox {
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.subtask-name {
|
||||
flex: 2;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.subtask-priority {
|
||||
flex: 0.8;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.subtask-assignee {
|
||||
flex: 1.2;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.no-subtasks {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Subtask progress in task cards */
|
||||
.task-subtasks {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.subtask-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.subtask-progress-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: #e9ecef;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.subtask-progress-fill {
|
||||
height: 100%;
|
||||
background: #28a745;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.subtask-count {
|
||||
font-size: 0.75rem;
|
||||
color: #6c757d;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
// Inject styles when document is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.head.insertAdjacentHTML('beforeend', subtaskStyles);
|
||||
});
|
||||
} else {
|
||||
document.head.insertAdjacentHTML('beforeend', subtaskStyles);
|
||||
}
|
||||
Reference in New Issue
Block a user