jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sub-tasks feature.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-06 15:53:06 +02:00
parent 9b2f457f0b
commit 19314bd532
5 changed files with 666 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
templates/task_modal.html
View File

@@ -30,7 +30,7 @@
<div class="form-group">
<label for="task-description">Description</label>
<textarea id="task-description" rows="3"></textarea>
<textarea id="task-description" rows="2"></textarea>
</div>
<div class="form-group">
@@ -210,21 +210,30 @@ document.addEventListener('DOMContentLoaded', function() {
<!-- Task Modal Styles -->
<style>
/* Task Modal Specific Styles */
/* Task Modal Specific Styles - Compact Design */
.task-modal .modal-content {
width: 95%;
max-width: 1000px;
max-height: 95vh;
max-width: 900px;
max-height: 90vh;
overflow-y: auto;
}
.task-modal .modal-header {
padding: 0.75rem 1rem;
}
.task-modal .modal-header h2 {
font-size: 1.25rem;
margin: 0;
}
.task-modal-content .modal-body {
padding: 1.5rem;
padding: 1rem;
}
.form-section {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e9ecef;
}
@@ -234,57 +243,57 @@ document.addEventListener('DOMContentLoaded', function() {
}
.form-section h3 {
margin: 0 0 1rem 0;
margin: 0 0 0.75rem 0;
color: #495057;
font-size: 1.1rem;
font-size: 1rem;
font-weight: 600;
padding-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 2px solid #f8f9fa;
}
/* Dependencies Grid */
/* Dependencies Grid - Compact */
.dependencies-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
gap: 1rem;
}
.dependency-column {
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
}
.dependency-column h4 {
margin: 0 0 0.5rem 0;
margin: 0 0 0.25rem 0;
color: #495057;
font-size: 0.95rem;
font-size: 0.9rem;
font-weight: 600;
}
.dependency-help {
font-size: 0.8rem;
font-size: 0.75rem;
color: #6c757d;
margin: 0 0 1rem 0;
line-height: 1.4;
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
.dependency-list {
min-height: 60px;
margin-bottom: 1rem;
min-height: 40px;
margin-bottom: 0.5rem;
}
.dependency-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem;
padding: 0.4rem 0.5rem;
background: white;
border: 1px solid #ddd;
border-radius: 6px;
margin-bottom: 0.5rem;
font-size: 0.9rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: 1px solid #dee2e6;
border-radius: 4px;
margin-bottom: 0.3rem;
font-size: 0.85rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.dependency-task-info {
@@ -332,15 +341,15 @@ document.addEventListener('DOMContentLoaded', function() {
.add-dependency-form {
display: flex;
gap: 0.5rem;
gap: 0.3rem;
}
.dependency-input {
flex: 1;
padding: 0.5rem;
padding: 0.3rem 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.9rem;
font-size: 0.8rem;
font-family: 'Courier New', monospace;
background: white;
}
@@ -356,13 +365,13 @@ document.addEventListener('DOMContentLoaded', function() {
font-style: italic;
}
/* Subtasks Section */
/* Subtasks Section - Compact */
.subtask-item {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.5rem;
gap: 0.3rem;
margin-bottom: 0.3rem;
padding: 0.3rem 0.5rem;
background: #f8f9fa;
border-radius: 4px;
}
@@ -370,11 +379,13 @@ document.addEventListener('DOMContentLoaded', function() {
.subtask-item input[type="text"] {
flex: 1;
margin: 0;
padding: 0.3rem 0.5rem;
font-size: 0.85rem;
}
.subtask-item button {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
padding: 0.2rem 0.4rem;
font-size: 0.7rem;
}
/* Hybrid Date Input Styles */
@@ -424,6 +435,70 @@ document.addEventListener('DOMContentLoaded', function() {
background: #e9ecef;
}
/* Compact Form Styles */
.form-group {
margin-bottom: 0.75rem;
}
.form-group label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.85rem;
font-weight: 500;
color: #495057;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.4rem 0.6rem;
font-size: 0.85rem;
border: 1px solid #ced4da;
border-radius: 4px;
transition: border-color 0.15s ease-in-out;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #80bdff;
box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}
.form-group textarea {
resize: vertical;
min-height: 50px;
}
.form-row {
display: flex;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
/* Compact button styles */
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
}
.modal-footer {
padding: 0.75rem 1rem;
gap: 0.5rem;
}
.modal-footer .btn {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.task-modal .modal-content {

103
templates/unified_task_management.html
View File

@@ -246,6 +246,39 @@
flex-shrink: 0;
}
/* Subtask progress styles */
.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;
}
@media (max-width: 768px) {
.task-controls {
flex-direction: column;
@@ -1538,6 +1571,7 @@ class UnifiedTaskManager {
<span class="task-assignee">${task.assigned_to_name || 'Unassigned'}</span>
${dueDate ? `<span class="task-due-date ${isOverdue ? 'overdue' : ''}">${formatUserDate(task.due_date)}</span>` : ''}
</div>
${task.subtasks && task.subtasks.length > 0 ? this.renderSubtaskProgress(task.subtasks) : ''}
${task.status === 'COMPLETED' ? `<div class="task-completed-date">Completed: ${formatUserDate(task.completed_date)}</div>` : ''}
${task.status === 'ARCHIVED' ? `<div class="task-archived-date">Archived: ${formatUserDate(task.archived_date)}</div>` : ''}
${actionButtons}
@@ -1546,6 +1580,25 @@ class UnifiedTaskManager {
return card;
}
renderSubtaskProgress(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>
`;
}
applyFilters() {
this.renderTasks();
}
@@ -1634,6 +1687,31 @@ class UnifiedTaskManager {
}
}
async refreshTaskCard(taskId) {
// Fetch updated task data
try {
const response = await fetch(`/api/tasks/${taskId}`);
const task = await response.json();
if (task) {
// Find and replace the task card
const oldCard = document.querySelector(`[data-task-id="${taskId}"]`);
if (oldCard) {
const newCard = this.createTaskCard(task);
oldCard.replaceWith(newCard);
}
// Update task in local array
const index = this.tasks.findIndex(t => t.id == taskId);
if (index !== -1) {
this.tasks[index] = task;
}
}
} catch (error) {
console.error('Error refreshing task card:', error);
}
}
async handleTaskMove(evt) {
const taskId = evt.item.dataset.taskId;
const newStatus = evt.to.id.replace('column-', '');
@@ -1688,6 +1766,9 @@ class UnifiedTaskManager {
// Load dependencies
await this.loadDependencies(task.id);
// Initialize subtasks
initializeSubtasks(task.id);
} else {
document.getElementById('modal-title').textContent = 'Add New Task';
document.getElementById('task-form').reset();
@@ -1696,6 +1777,9 @@ class UnifiedTaskManager {
// Clear dependencies
this.clearDependencies();
// Initialize empty subtasks
initializeSubtasks(null);
}
modal.style.display = 'block';
@@ -1737,6 +1821,12 @@ class UnifiedTaskManager {
const data = await response.json();
if (data.success) {
// Save subtasks if we have a task ID
const savedTaskId = isEdit ? taskId : data.task.id;
if (savedTaskId) {
await saveSubtasks(savedTaskId);
}
closeTaskModal();
await this.loadTasks();
} else {
@@ -1948,5 +2038,18 @@ window.onclick = function(event) {
closeTaskModal();
}
};
// Make team members available globally for subtasks
window.teamMembers = {{ team_members | tojson }};
// Make refreshTaskCard available globally
window.refreshTaskCard = function(taskId) {
if (window.taskManager) {
window.taskManager.refreshTaskCard(taskId);
}
};
</script>
<!-- Include subtasks functionality -->
<script src="{{ url_for('static', filename='js/subtasks.js') }}"></script>
{% endblock %}