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

Add Kanban feature.

Browse Source 
ADD: Kanban Boards.
FIX: Fix user deletion.
This commit is contained in:
Jens Luedicke
2025-07-04 17:10:33 +02:00
committed by Jens Luedicke
parent 336d998a8a
commit e4cc154f92
5 changed files with 1305 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
templates/confirm_company_deletion.html Normal file
View File

@@ -0,0 +1,269 @@
{% extends "layout.html" %}
{% block content %}
<div class="admin-container">
<div class="header-section">
<h1>⚠️ Confirm Company Deletion</h1>
<p class="subtitle">Critical Action Required - Review All Data Before Proceeding</p>
<a href="{{ url_for('admin_users') if g.user.role != Role.SYSTEM_ADMIN else url_for('system_admin_users') }}"
class="btn btn-secondary">← Back to User Management</a>
</div>
<div class="alert alert-danger">
<h3>Critical Warning!</h3>
<p>You are about to delete user <strong>{{ user.username }}</strong> who is the last administrator/supervisor in company <strong>{{ company.name }}</strong>.</p>
<p><strong>This action will permanently delete the entire company and ALL associated data.</strong></p>
<p>This action cannot be undone!</p>
</div>
<div class="content-section">
<h2>The following data will be permanently deleted:</h2>
<!-- Company Information -->
<div class="table-section">
<h3>🏢 Company Information</h3>
<table class="data-table">
<tr>
<th>Company Name:</th>
<td>{{ company.name }}</td>
</tr>
<tr>
<th>Company Slug:</th>
<td>{{ company.slug }}</td>
</tr>
<tr>
<th>Created:</th>
<td>{{ company.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
</tr>
<tr>
<th>Description:</th>
<td>{{ company.description or 'None' }}</td>
</tr>
</table>
</div>
<!-- Users -->
{% if users %}
<div class="table-section">
<h3>👥 Users ({{ users|length }})</h3>
<table class="data-table">
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Role</th>
<th>Team</th>
<th>Joined</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr {% if u.id == user.id %}class="highlight-row"{% endif %}>
<td>
{{ u.username }}
{% if u.id == user.id %}<span class="status-badge status-warning">Target User</span>{% endif %}
</td>
<td>{{ u.email }}</td>
<td>{{ u.role.value }}</td>
<td>{{ u.team.name if u.team else 'None' }}</td>
<td>{{ u.created_at.strftime('%Y-%m-%d') }}</td>
<td>
<span class="status-badge {% if u.is_blocked %}status-blocked{% else %}status-active{% endif %}">
{% if u.is_blocked %}Blocked{% else %}Active{% endif %}
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!-- Teams -->
{% if teams %}
<div class="table-section">
<h3>🏭 Teams ({{ teams|length }})</h3>
<table class="data-table">
<thead>
<tr>
<th>Team Name</th>
<th>Description</th>
<th>Members</th>
<th>Created</th>
</tr>
</thead>
<tbody>
{% for team in teams %}
<tr>
<td>{{ team.name }}</td>
<td>{{ team.description or 'None' }}</td>
<td>{{ team.users|length }}</td>
<td>{{ team.created_at.strftime('%Y-%m-%d') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!-- Projects -->
{% if projects %}
<div class="table-section">
<h3>📝 Projects ({{ projects|length }})</h3>
<table class="data-table">
<thead>
<tr>
<th>Project Code</th>
<th>Project Name</th>
<th>Team</th>
<th>Tasks</th>
<th>Time Entries</th>
<th>Created By</th>
</tr>
</thead>
<tbody>
{% for project in projects %}
<tr>
<td>{{ project.code }}</td>
<td>{{ project.name }}</td>
<td>{{ project.team.name if project.team else 'None' }}</td>
<td>{{ project.tasks|length }}</td>
<td>{{ project.time_entries|length }}</td>
<td>{{ project.created_by.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!-- Tasks -->
{% if tasks %}
<div class="table-section">
<h3>✅ Tasks ({{ tasks|length }})</h3>
<table class="data-table">
<thead>
<tr>
<th>Task Name</th>
<th>Project</th>
<th>Status</th>
<th>Priority</th>
<th>Assigned To</th>
<th>Subtasks</th>
</tr>
</thead>
<tbody>
{% for task in tasks %}
<tr>
<td>{{ task.name }}</td>
<td>{{ task.project.code }}</td>
<td>{{ task.status.value }}</td>
<td>{{ task.priority.value }}</td>
<td>{{ task.assigned_to.username if task.assigned_to else 'None' }}</td>
<td>{{ task.subtasks|length }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!-- Kanban Boards -->
{% if kanban_boards %}
<div class="table-section">
<h3>📋 Kanban Boards ({{ kanban_boards|length }})</h3>
<table class="data-table">
<thead>
<tr>
<th>Board Name</th>
<th>Columns</th>
<th>Cards</th>
<th>Created By</th>
</tr>
</thead>
<tbody>
{% for board in kanban_boards %}
<tr>
<td>{{ board.name }}</td>
<td>{{ board.columns|length }}</td>
<td>{{ board.columns|map(attribute='cards')|map('length')|sum }}</td>
<td>{{ board.created_by.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!-- Time Entries -->
{% if time_entries_count > 0 %}
<div class="table-section">
<h3>⏱️ Time Entries ({{ time_entries_count }})</h3>
<div class="info-card">
<p>{{ time_entries_count }} time tracking entries will be permanently deleted.</p>
<p><strong>Total Hours Tracked:</strong> {{ total_hours_tracked }} hours</p>
</div>
</div>
{% endif %}
<!-- Categories -->
{% if categories %}
<div class="table-section">
<h3>🏷️ Project Categories ({{ categories|length }})</h3>
<table class="data-table">
<thead>
<tr>
<th>Category Name</th>
<th>Projects</th>
<th>Created By</th>
</tr>
</thead>
<tbody>
{% for category in categories %}
<tr>
<td>{{ category.name }}</td>
<td>{{ category.projects|length }}</td>
<td>{{ category.created_by.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</div>
<!-- Confirmation Form -->
<div class="form-section">
<div class="alert alert-danger">
<h3>Final Confirmation Required</h3>
</div>
<form method="POST" action="{{ url_for('confirm_company_deletion', user_id=user.id) }}" class="user-form">
<div class="form-group">
<label for="company_name_confirm">
To confirm deletion, please type the company name: <strong>{{ company.name }}</strong>
</label>
<input type="text" class="form-control" id="company_name_confirm"
name="company_name_confirm" required
placeholder="Enter company name exactly as shown above">
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="understand_deletion" name="understand_deletion" required>
I understand that this action will permanently delete the company and ALL associated data, and this cannot be undone.
</label>
</div>
<div class="form-group">
<a href="{{ url_for('admin_users') if g.user.role != Role.SYSTEM_ADMIN else url_for('system_admin_users') }}"
class="btn btn-secondary">Cancel</a>
<button type="submit" class="btn btn-danger">
Delete Company and All Data
</button>
</div>
</form>
</div>
</div>
{% endblock %}

395
templates/kanban_overview.html
View File

@@ -3,76 +3,98 @@
{% block content %}
<div class="kanban-overview-container">
<div class="overview-header">
<h2>Kanban Board Overview</h2>
<p class="overview-description">Manage your tasks visually across all projects</p>
<h2>Unified Kanban Boards</h2>
<p class="overview-description">Organize tasks from any project on shared company-wide boards</p>
</div>
{% if project_boards %}
<div class="projects-grid">
{% for project, boards in project_boards.items() %}
<div class="project-card">
<div class="project-header">
<div class="project-info">
<h3 class="project-name">
<span class="project-code">{{ project.code }}</span>
{{ project.name }}
{% if create_board %}
<!-- Create Board Form -->
<div class="create-board-form">
<div class="form-header">
<h3>Create New Kanban Board</h3>
<button type="button" id="cancel-create-board" class="btn btn-secondary">Cancel</button>
</div>
<form id="create-board-form" class="board-form">
<div class="form-group">
<label for="board-name">Board Name <span class="required">*</span></label>
<input type="text" id="board-name" name="name" required placeholder="Enter board name">
</div>
<div class="form-group">
<label for="board-description">Description</label>
<textarea id="board-description" name="description" placeholder="Optional description"></textarea>
</div>
<div class="form-group">
<label>
<input type="checkbox" id="board-is-default" name="is_default">
Set as default board
</label>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Create Board</button>
</div>
</form>
</div>
{% endif %}
{% if boards %}
<div class="boards-grid">
{% for board in boards %}
<div class="board-card">
<div class="board-header">
<div class="board-info">
<h3 class="board-name">
{{ board.name }}
{% if board.is_default %}
<span class="default-badge">Default</span>
{% endif %}
</h3>
{% if project.category %}
<span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
{{ project.category.icon or '📁' }} {{ project.category.name }}
</span>
{% endif %}
{% if project.description %}
<p class="project-description">{{ project.description }}</p>
{% if board.description %}
<p class="board-description">{{ board.description }}</p>
{% endif %}
</div>
<div class="project-actions">
<a href="{{ url_for('project_kanban', project_id=project.id) }}" class="btn btn-primary">Open Kanban</a>
<a href="{{ url_for('manage_project_tasks', project_id=project.id) }}" class="btn btn-secondary">Task List</a>
<div class="board-actions">
<a href="{{ url_for('kanban_overview') }}?board={{ board.id }}" class="btn btn-primary">Open Board</a>
{% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
<button class="btn btn-secondary" onclick="editBoard({{ board.id }})">Edit</button>
{% endif %}
</div>
</div>
<div class="boards-section">
<h4>Kanban Boards ({{ boards|length }})</h4>
<div class="boards-list">
{% for board in boards %}
<div class="board-item" onclick="openBoard({{ project.id }}, {{ board.id }})">
<div class="board-info">
<div class="board-name">
{{ board.name }}
{% if board.is_default %}
<span class="default-badge">Default</span>
{% endif %}
</div>
{% if board.description %}
<div class="board-description">{{ board.description }}</div>
{% endif %}
</div>
<div class="board-stats">
<span class="column-count">{{ board.columns|length }} columns</span>
<span class="card-count">
{% set board_cards = 0 %}
{% for column in board.columns %}
{% set board_cards = board_cards + column.cards|selectattr('is_active')|list|length %}
{% endfor %}
{{ board_cards }} cards
</span>
</div>
<div class="board-stats-section">
<div class="stat-grid">
<div class="stat-item">
<span class="stat-number">{{ board.columns|length }}</span>
<span class="stat-label">Columns</span>
</div>
<div class="stat-item">
{% set board_cards = 0 %}
{% for column in board.columns %}
{% set board_cards = board_cards + column.cards|selectattr('is_active')|list|length %}
{% endfor %}
<span class="stat-number">{{ board_cards }}</span>
<span class="stat-label">Cards</span>
</div>
<div class="stat-item">
{% set project_contexts = [] %}
{% for column in board.columns %}
{% for card in column.cards %}
{% if card.is_active and card.project_id and card.project_id not in project_contexts %}
{% set _ = project_contexts.append(card.project_id) %}
{% endif %}
{% endfor %}
{% endfor %}
<span class="stat-number">{{ project_contexts|length }}</span>
<span class="stat-label">Projects</span>
</div>
{% endfor %}
</div>
</div>
<!-- Quick Board Preview -->
<div class="board-preview">
{% set default_board = boards|selectattr('is_default')|first %}
{% if not default_board %}
{% set default_board = boards|first %}
{% endif %}
{% if default_board and default_board.columns %}
<h5>{{ default_board.name }} Preview</h5>
{% if board.columns %}
<h5>Board Preview</h5>
<div class="preview-columns">
{% for column in default_board.columns %}
{% for column in board.columns %}
{% if loop.index <= 4 %}
<div class="preview-column" style="border-top: 3px solid {{ column.color }};">
<div class="preview-column-header">
@@ -85,8 +107,11 @@
{% if loop.index <= 3 %}
<div class="preview-card" {% if card.color %}style="background-color: {{ card.color }};"{% endif %}>
<div class="preview-card-title">
{% if card.title|length > 30 %}
{{ card.title|truncate(30, True) }}
{% if card.project %}
<span class="preview-card-project">[{{ card.project.code }}]</span>
{% endif %}
{% if card.title|length > 25 %}
{{ card.title|truncate(25, True) }}
{% else %}
{{ card.title }}
{% endif %}
@@ -104,9 +129,9 @@
</div>
{% endif %}
{% endfor %}
{% if default_board.columns|length > 4 %}
{% if board.columns|length > 4 %}
<div class="preview-more-columns">
+{{ default_board.columns|length - 4 }} more columns
+{{ board.columns|length - 4 }} more columns
</div>
{% endif %}
</div>
@@ -119,29 +144,33 @@
<!-- Quick Stats -->
<div class="quick-stats">
<div class="stat-card">
<h3>{{ project_boards.keys()|list|length }}</h3>
<p>Projects with Kanban</p>
</div>
<div class="stat-card">
{% set total_boards = 0 %}
{% for project, boards in project_boards.items() %}
{% set total_boards = total_boards + boards|length %}
{% endfor %}
<h3>{{ total_boards }}</h3>
<p>Total Boards</p>
<h3>{{ boards|length }}</h3>
<p>Company Boards</p>
</div>
<div class="stat-card">
{% set total_cards = 0 %}
{% for project, boards in project_boards.items() %}
{% for board in boards %}
{% for column in board.columns %}
{% set total_cards = total_cards + column.cards|selectattr('is_active')|list|length %}
{% endfor %}
{% for board in boards %}
{% for column in board.columns %}
{% set total_cards = total_cards + column.cards|selectattr('is_active')|list|length %}
{% endfor %}
{% endfor %}
<h3>{{ total_cards }}</h3>
<p>Total Cards</p>
</div>
<div class="stat-card">
{% set total_projects = [] %}
{% for board in boards %}
{% for column in board.columns %}
{% for card in column.cards %}
{% if card.is_active and card.project_id and card.project_id not in total_projects %}
{% set _ = total_projects.append(card.project_id) %}
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
<h3>{{ total_projects|length }}</h3>
<p>Active Projects</p>
</div>
</div>
{% else %}
@@ -150,17 +179,17 @@
<div class="no-kanban-content">
<div class="no-kanban-icon">📋</div>
<h3>No Kanban Boards Yet</h3>
<p>Start organizing your projects with visual Kanban boards.</p>
<p>Create unified boards to organize tasks from any project.</p>
<div class="getting-started">
<h4>Getting Started:</h4>
<ol>
<li>Go to a project from <a href="{{ url_for('admin_projects') }}">Project Management</a></li>
<li>Click the <strong>"Kanban"</strong> button</li>
<li>Create your first board and start organizing tasks</li>
<li>Click the <strong>"Create Board"</strong> button</li>
<li>Set up columns for your workflow (To Do, In Progress, Done)</li>
<li>Add cards from any project to organize your work</li>
</ol>
</div>
{% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
<a href="{{ url_for('admin_projects') }}" class="btn btn-primary">Go to Projects</a>
<button id="create-first-unified-board" class="btn btn-primary">Create First Board</button>
{% endif %}
</div>
</div>
@@ -187,13 +216,13 @@
margin: 0;
}
.projects-grid {
.boards-grid {
display: grid;
gap: 2rem;
margin-bottom: 2rem;
}
.project-card {
.board-card {
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
@@ -202,11 +231,11 @@
transition: box-shadow 0.2s ease;
}
.project-card:hover {
.board-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.project-header {
.board-header {
padding: 1.5rem;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
@@ -215,43 +244,65 @@
align-items: flex-start;
}
.project-info {
.board-info {
flex: 1;
}
.project-name {
.board-name {
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.project-code {
background: #007bff;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-size: 1.2rem;
font-weight: 600;
color: #333;
}
.project-description {
.board-description {
color: #666;
margin: 0.5rem 0 0 0;
font-size: 0.9rem;
}
.project-actions {
.board-actions {
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.boards-section {
.board-stats-section {
padding: 1.5rem;
border-bottom: 1px solid #dee2e6;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 1rem;
}
.stat-item {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.stat-number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: #007bff;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.8rem;
color: #666;
font-weight: 500;
}
.boards-section h4 {
margin: 0 0 1rem 0;
color: #333;
@@ -380,6 +431,16 @@
margin-bottom: 0.25rem;
}
.preview-card-project {
background: #f3e8ff;
color: #7c3aed;
padding: 0.1rem 0.3rem;
border-radius: 3px;
font-size: 0.6rem;
font-weight: 600;
margin-right: 0.25rem;
}
.preview-card-assignee {
color: #666;
font-size: 0.7rem;
@@ -480,6 +541,76 @@
color: #666;
}
.create-board-form {
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.form-header h3 {
margin: 0;
color: #333;
}
.board-form {
max-width: 600px;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #dee2e6;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.2s ease;
}
.form-group input[type="text"]:focus,
.form-group textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}
.form-group textarea {
height: 80px;
resize: vertical;
}
.form-group input[type="checkbox"] {
margin-right: 0.5rem;
}
.form-actions {
margin-top: 1.5rem;
}
.required {
color: #dc3545;
}
.category-badge {
padding: 0.25rem 0.5rem;
border-radius: 4px;
@@ -488,12 +619,12 @@
}
@media (max-width: 768px) {
.project-header {
.board-header {
flex-direction: column;
gap: 1rem;
}
.project-actions {
.board-actions {
width: 100%;
justify-content: flex-start;
}
@@ -505,13 +636,77 @@
.quick-stats {
grid-template-columns: 1fr;
}
.stat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<script>
function openBoard(projectId, boardId) {
window.location.href = `/admin/projects/${projectId}/kanban?board=${boardId}`;
function openBoard(boardId) {
window.location.href = `/kanban?board=${boardId}`;
}
function editBoard(boardId) {
// Implement board editing functionality
alert('Board editing functionality to be implemented');
}
// Handle create first board button
document.addEventListener('DOMContentLoaded', function() {
const createFirstBoardBtn = document.getElementById('create-first-unified-board');
if (createFirstBoardBtn) {
createFirstBoardBtn.addEventListener('click', function() {
// Redirect to a page where they can create a board
window.location.href = '/kanban?create=true';
});
}
// Handle cancel create board
const cancelCreateBoardBtn = document.getElementById('cancel-create-board');
if (cancelCreateBoardBtn) {
cancelCreateBoardBtn.addEventListener('click', function() {
window.location.href = '/kanban';
});
}
// Handle create board form submission
const createBoardForm = document.getElementById('create-board-form');
if (createBoardForm) {
createBoardForm.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(createBoardForm);
const data = {
name: formData.get('name'),
description: formData.get('description'),
is_default: formData.get('is_default') === 'on'
};
fetch('/api/kanban/boards', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Redirect to the kanban overview page
window.location.href = '/kanban';
} else {
alert('Error creating board: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Error creating board. Please try again.');
});
});
}
});
</script>
{% endblock %}

413
templates/project_kanban.html
View File

@@ -4,12 +4,19 @@
<div class="kanban-container">
<div class="kanban-header">
<div class="project-info">
<h2>Kanban Board: {{ project.code }} - {{ project.name }}</h2>
<p class="project-description">{{ project.description or 'No description available' }}</p>
{% if project.category %}
<span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
{{ project.category.icon or '📁' }} {{ project.category.name }}
</span>
<h2>Unified Kanban Board</h2>
<p class="project-description">Organize tasks from any project on shared boards</p>
{% if project %}
<div class="project-context">
<span class="context-label">Project Context:</span>
<span class="project-code">{{ project.code }}</span>
<span class="project-name">{{ project.name }}</span>
{% if project.category %}
<span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
{{ project.category.icon or '📁' }} {{ project.category.name }}
</span>
{% endif %}
</div>
{% endif %}
</div>
<div class="kanban-actions">
@@ -17,8 +24,12 @@
<button id="create-board-btn" class="btn btn-md btn-success">Create Board</button>
<button id="manage-columns-btn" class="btn btn-md btn-warning" style="display: none;">Manage Columns</button>
{% endif %}
{% if project %}
<a href="{{ url_for('admin_projects') }}" class="btn btn-md btn-secondary">Back to Projects</a>
<a href="{{ url_for('manage_project_tasks', project_id=project.id) }}" class="btn btn-md btn-info">Task View</a>
{% else %}
<a href="{{ url_for('kanban_overview') }}" class="btn btn-md btn-secondary">Back to Kanban Overview</a>
{% endif %}
</div>
</div>
@@ -29,7 +40,7 @@
<select id="board-select" class="form-control">
<option value="">Choose a board...</option>
{% for board in boards %}
<option value="{{ board.id }}" {% if board.is_default %}selected{% endif %}>
<option value="{{ board.id }}" {% if selected_board_id and board.id == selected_board_id %}selected{% elif not selected_board_id and board.is_default %}selected{% endif %}>
{{ board.name }} {% if board.is_default %}(Default){% endif %}
</option>
{% endfor %}
@@ -64,7 +75,9 @@
<span class="close">&times;</span>
<h3>Create Kanban Board</h3>
<form id="board-form">
<input type="hidden" name="project_id" value="{{ project.id }}">
{% if project %}
<input type="hidden" name="project_context" value="{{ project.id }}">
{% endif %}
<div class="form-group">
<label for="board-name">Board Name *</label>
@@ -79,7 +92,7 @@
<div class="form-group">
<label>
<input type="checkbox" id="board-is-default" name="is_default">
Set as default board for this project
Set as default board for your company
</label>
</div>
@@ -122,22 +135,38 @@
</div>
<div class="form-group">
<label for="card-task">Link to Task</label>
<select id="card-task" name="task_id">
<option value="">No task linked</option>
{% for task in tasks %}
<option value="{{ task.id }}">{{ task.name }}</option>
<label for="card-project">Project Context</label>
<select id="card-project" name="project_id">
<option value="">No project context</option>
{% for project_option in available_projects %}
<option value="{{ project_option.id }}" {% if project and project_option.id == project.id %}selected{% endif %}>
[{{ project_option.code }}] {{ project_option.name }}
</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="card-task">Link to Task</label>
<select id="card-task" name="task_id">
<option value="">No task linked</option>
{% for task in tasks %}
<option value="{{ task.id }}" data-project-id="{{ task.project_id }}">
[{{ task.project.code }}] {{ task.name }}
</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="card-due-date">Due Date</label>
<input type="date" id="card-due-date" name="due_date">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="card-color">Card Color</label>
<input type="color" id="card-color" name="color" value="#ffffff">
@@ -231,6 +260,36 @@
margin: 0 0 0.5rem 0;
}
.project-context {
margin-top: 1rem;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 6px;
border-left: 4px solid #007bff;
}
.context-label {
font-weight: 600;
color: #333;
margin-right: 0.5rem;
}
.project-code {
background: #007bff;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
margin-right: 0.5rem;
}
.project-name {
font-weight: 500;
color: #333;
margin-right: 0.5rem;
}
.kanban-actions {
display: flex;
gap: 0.75rem;
@@ -238,91 +297,7 @@
flex-wrap: wrap;
}
/* Consistent button sizing */
.btn-md {
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.5;
border-radius: 6px;
border: 1px solid transparent;
text-decoration: none;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-md:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-md:active {
transform: translateY(0);
}
/* Button colors */
.btn-primary {
background-color: #007bff;
border-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #004085;
color: white;
}
.btn-success {
background-color: #28a745;
border-color: #28a745;
color: white;
}
.btn-success:hover {
background-color: #1e7e34;
border-color: #1c7430;
color: white;
}
.btn-warning {
background-color: #ffc107;
border-color: #ffc107;
color: #212529;
}
.btn-warning:hover {
background-color: #e0a800;
border-color: #d39e00;
color: #212529;
}
.btn-info {
background-color: #17a2b8;
border-color: #17a2b8;
color: white;
}
.btn-info:hover {
background-color: #117a8b;
border-color: #10707f;
color: white;
}
.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #545b62;
border-color: #4e555b;
color: white;
}
/* Button styles now centralized in main style.css */
.board-selection {
margin-bottom: 2rem;
@@ -438,6 +413,14 @@
font-size: 0.8rem;
}
.card-project {
background: #f3e8ff;
color: #7c3aed;
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-weight: 600;
}
.card-assignee {
background: #e7f3ff;
color: #0066cc;
@@ -716,11 +699,12 @@
<script>
let currentBoard = null;
let sortableInstances = [];
const userRole = '{{ g.user.role.value }}';
const canManageColumns = ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'].includes(userRole);
document.addEventListener('DOMContentLoaded', function() {
const boardSelect = document.getElementById('board-select');
const kanbanBoard = document.getElementById('kanban-board');
const addCardBtn = document.getElementById('add-card-btn');
// Board selection handler
if (boardSelect) {
@@ -728,39 +712,37 @@ document.addEventListener('DOMContentLoaded', function() {
const boardId = this.value;
if (boardId) {
loadKanbanBoard(boardId);
addCardBtn.style.display = 'inline-block';
{% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
document.getElementById('manage-columns-btn').style.display = 'inline-block';
{% endif %}
if (canManageColumns) {
const manageBoardBtn = document.getElementById('manage-columns-btn');
if (manageBoardBtn) manageBoardBtn.style.display = 'inline-block';
}
} else {
kanbanBoard.style.display = 'none';
addCardBtn.style.display = 'none';
{% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
document.getElementById('manage-columns-btn').style.display = 'none';
{% endif %}
if (canManageColumns) {
const manageBoardBtn = document.getElementById('manage-columns-btn');
if (manageBoardBtn) manageBoardBtn.style.display = 'none';
}
}
});
// Check URL for board parameter
// Check URL for board parameter or if a board is pre-selected
const urlParams = new URLSearchParams(window.location.search);
const boardFromUrl = urlParams.get('board');
const selectedOption = boardSelect.querySelector('option[selected]');
if (boardFromUrl) {
boardSelect.value = boardFromUrl;
loadKanbanBoard(boardFromUrl);
addCardBtn.style.display = 'inline-block';
{% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
document.getElementById('manage-columns-btn').style.display = 'inline-block';
{% endif %}
} else {
// Load default board if exists
const defaultOption = boardSelect.querySelector('option[selected]');
if (defaultOption && defaultOption.value) {
loadKanbanBoard(defaultOption.value);
addCardBtn.style.display = 'inline-block';
{% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
document.getElementById('manage-columns-btn').style.display = 'inline-block';
{% endif %}
if (canManageColumns) {
const manageBoardBtn = document.getElementById('manage-columns-btn');
if (manageBoardBtn) manageBoardBtn.style.display = 'inline-block';
}
} else if (selectedOption && selectedOption.value) {
// Load pre-selected board (either from selected_board_id or default)
loadKanbanBoard(selectedOption.value);
if (canManageColumns) {
const manageBoardBtn = document.getElementById('manage-columns-btn');
if (manageBoardBtn) manageBoardBtn.style.display = 'inline-block';
}
}
}
@@ -770,14 +752,18 @@ document.addEventListener('DOMContentLoaded', function() {
});
function loadKanbanBoard(boardId) {
console.log('Loading board:', boardId);
fetch(`/api/kanban/boards/${boardId}`)
.then(response => response.json())
.then(data => {
console.log('Board data received:', data);
if (data.success) {
currentBoard = data.board;
console.log('Current board set to:', currentBoard);
renderKanbanBoard(data.board);
document.getElementById('kanban-board').style.display = 'block';
} else {
console.error('Error loading board:', data.message);
alert('Error loading board: ' + data.message);
}
})
@@ -855,6 +841,7 @@ function createCardHTML(card) {
<div class="card-title">${card.title}</div>
${card.description ? `<div class="card-description">${card.description}</div>` : ''}
<div class="card-meta">
${card.project_code ? `<span class="card-project">[${card.project_code}]</span>` : ''}
${card.assigned_to ? `<span class="card-assignee">${card.assigned_to.username}</span>` : ''}
${card.task_name ? `<span class="card-task-link">${card.task_name}</span>` : ''}
${card.due_date ? `<span class="card-due-date ${dueDateClass}">${formatDate(card.due_date)}</span>` : ''}
@@ -869,6 +856,16 @@ function setupModals() {
const boardForm = document.getElementById('board-form');
const cardForm = document.getElementById('card-form');
// Check if required elements exist
if (!cardModal) {
console.error('Card modal not found');
return;
}
if (!boardModal) {
console.error('Board modal not found');
return;
}
// Board modal
document.getElementById('create-board-btn')?.addEventListener('click', () => {
boardModal.style.display = 'block';
@@ -891,66 +888,93 @@ function setupModals() {
});
// Form submissions
boardForm.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const data = Object.fromEntries(formData);
if (boardForm) {
boardForm.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// Convert checkbox to boolean
data.is_default = document.getElementById('board-is-default').checked;
// Convert checkbox to boolean
const isDefaultCheckbox = document.getElementById('board-is-default');
data.is_default = isDefaultCheckbox ? isDefaultCheckbox.checked : false;
fetch('/api/kanban/boards', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
boardModal.style.display = 'none';
location.reload();
} else {
alert('Error: ' + data.message);
}
});
});
cardForm.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const cardId = formData.get('card_id');
const isEdit = cardId !== '';
const url = isEdit ? `/api/kanban/cards/${cardId}` : '/api/kanban/cards';
const method = isEdit ? 'PUT' : 'POST';
fetch(url, {
method: method,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(Object.fromEntries(formData))
})
.then(response => response.json())
.then(data => {
if (data.success) {
cardModal.style.display = 'none';
if (isEdit) {
// For edits, just reload the board to be safe
loadKanbanBoard(currentBoard.id);
fetch('/api/kanban/boards', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
boardModal.style.display = 'none';
location.reload();
} else {
// For new cards, update the count immediately
const columnId = formData.get('column_id');
updateColumnCardCountAfterAdd(columnId);
loadKanbanBoard(currentBoard.id); // Still reload for the new card content
alert('Error: ' + data.message);
}
} else {
alert('Error: ' + data.message);
}
});
});
});
}
if (cardForm) {
cardForm.addEventListener('submit', function(e){
e.preventDefault();
const formData = new FormData(this);
const cardId = formData.get('card_id');
const isEdit = cardId !== '';
const url = isEdit ? `/api/kanban/cards/${cardId}` : '/api/kanban/cards';
const method = isEdit ? 'PUT' : 'POST';
fetch(url, {
method: method,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(Object.fromEntries(formData))
})
.then(response => response.json())
.then(data => {
console.log('Card creation response:', data);
console.log('Current board at card creation:', currentBoard);
if (data.success) {
cardModal.style.display = 'none';
if (isEdit) {
// For edits, just reload the board to be safe
if (currentBoard && currentBoard.id) {
console.log('Reloading board after edit:', currentBoard.id);
loadKanbanBoard(currentBoard.id);
} else {
// Fallback: reload the currently selected board
const boardSelect = document.getElementById('board-select');
if (boardSelect && boardSelect.value) {
console.log('Fallback: reloading selected board after edit:', boardSelect.value);
loadKanbanBoard(boardSelect.value);
}
}
} else {
// For new cards, update the count immediately
const columnId = formData.get('column_id');
updateColumnCardCountAfterAdd(columnId);
if (currentBoard && currentBoard.id) {
console.log('Reloading board after new card:', currentBoard.id);
loadKanbanBoard(currentBoard.id);
} else {
// Fallback: reload the currently selected board
const boardSelect = document.getElementById('board-select');
if (boardSelect && boardSelect.value) {
console.log('Fallback: reloading selected board after new card:', boardSelect.value);
loadKanbanBoard(boardSelect.value);
}
}
}
} else {
alert('Error: ' + data.message);
}
});
});
}
// Column form submission
const columnForm = document.getElementById('column-form');
@@ -997,17 +1021,26 @@ function setupModals() {
// Close buttons
document.querySelectorAll('.close').forEach(btn => {
btn.addEventListener('click', function() {
this.closest('.modal').style.display = 'none';
const modal = this.closest('.modal');
if (modal) {
modal.style.display = 'none';
}
});
});
document.getElementById('cancel-board').addEventListener('click', () => {
boardModal.style.display = 'none';
});
const cancelBoardBtn = document.getElementById('cancel-board');
if (cancelBoardBtn) {
cancelBoardBtn.addEventListener('click', () => {
boardModal.style.display = 'none';
});
}
document.getElementById('cancel-card').addEventListener('click', () => {
cardModal.style.display = 'none';
});
const cancelCardBtn = document.getElementById('cancel-card');
if (cancelCardBtn) {
cancelCardBtn.addEventListener('click', () => {
cardModal.style.display = 'none';
});
}
// Close modals when clicking outside
const columnModal = document.getElementById('column-modal');
@@ -1099,7 +1132,7 @@ function moveCard(cardId, columnId, position) {
// Find the card in the current board data
let movedCard = null;
let oldColumnId = null;
currentBoard.columns.forEach(column => {
const cardIndex = column.cards.findIndex(c => c.id == cardId);
if (cardIndex !== -1) {
@@ -1140,7 +1173,7 @@ function updateColumnCardCounts(oldColumnId, newColumnId) {
const oldCount = parseInt(oldCountElement.textContent.split('/')[0]);
const wipLimit = oldCountElement.textContent.includes('/') ? '/' + oldCountElement.textContent.split('/')[1] : '';
oldCountElement.textContent = (oldCount - 1) + wipLimit;
// Update the current board data
const oldColumn = currentBoard.columns.find(c => c.id == oldColumnId);
if (oldColumn) {
@@ -1153,7 +1186,7 @@ function updateColumnCardCounts(oldColumnId, newColumnId) {
}
}
}
// Update the new column count (increase by 1)
const newColumnElement = document.querySelector(`[data-column-id="${newColumnId}"]`);
if (newColumnElement) {
@@ -1162,7 +1195,7 @@ function updateColumnCardCounts(oldColumnId, newColumnId) {
const newCount = parseInt(newCountElement.textContent.split('/')[0]);
const wipLimit = newCountElement.textContent.includes('/') ? '/' + newCountElement.textContent.split('/')[1] : '';
newCountElement.textContent = (newCount + 1) + wipLimit;
// Update the current board data
const newColumn = currentBoard.columns.find(c => c.id == newColumnId);
if (newColumn) {
@@ -1184,7 +1217,7 @@ function updateColumnCardCountAfterAdd(columnId) {
const currentCount = parseInt(countElement.textContent.split('/')[0]);
const wipLimit = countElement.textContent.includes('/') ? '/' + countElement.textContent.split('/')[1] : '';
countElement.textContent = (currentCount + 1) + wipLimit;
// Update the current board data
const column = currentBoard.columns.find(c => c.id == columnId);
if (column) {
@@ -1206,7 +1239,7 @@ function updateColumnCardCountAfterDelete(columnId) {
const currentCount = parseInt(countElement.textContent.split('/')[0]);
const wipLimit = countElement.textContent.includes('/') ? '/' + countElement.textContent.split('/')[1] : '';
countElement.textContent = (currentCount - 1) + wipLimit;
// Update the current board data
const column = currentBoard.columns.find(c => c.id == columnId);
if (column) {