695 lines
18 KiB
HTML
695 lines
18 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="page-container kanban-overview-container">
|
|
<div class="page-header overview-header">
|
|
<h2>Unified Kanban Boards</h2>
|
|
<p class="overview-description">Organize tasks from any project on shared company-wide boards</p>
|
|
</div>
|
|
|
|
{% 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="card board-card">
|
|
<div class="card-header 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 board.description %}
|
|
<p class="board-description">{{ board.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<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="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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Board Preview -->
|
|
<div class="board-preview">
|
|
{% if board.columns %}
|
|
<h5>Board Preview</h5>
|
|
<div class="preview-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">
|
|
<span class="preview-column-name">{{ column.name }}</span>
|
|
<span class="preview-card-count">{{ column.cards|selectattr('is_active')|list|length }}</span>
|
|
</div>
|
|
<div class="preview-cards">
|
|
{% set active_cards = column.cards|selectattr('is_active')|list %}
|
|
{% for card in active_cards %}
|
|
{% if loop.index <= 3 %}
|
|
<div class="preview-card" {% if card.color %}style="background-color: {{ card.color }};"{% endif %}>
|
|
<div class="preview-card-title">
|
|
{% 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 %}
|
|
</div>
|
|
{% if card.assigned_to %}
|
|
<div class="preview-card-assignee">{{ card.assigned_to.username }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if active_cards|length > 3 %}
|
|
<div class="preview-more">+{{ active_cards|length - 3 }} more</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if board.columns|length > 4 %}
|
|
<div class="preview-more-columns">
|
|
+{{ board.columns|length - 4 }} more columns
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="quick-stats">
|
|
<div class="stat-card">
|
|
<h3>{{ boards|length }}</h3>
|
|
<p>Company Boards</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
{% set total_cards = 0 %}
|
|
{% 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 %}
|
|
<!-- No Kanban Boards -->
|
|
<div class="no-kanban">
|
|
<div class="no-kanban-content">
|
|
<div class="no-kanban-icon">📋</div>
|
|
<h3>No Kanban Boards Yet</h3>
|
|
<p>Create unified boards to organize tasks from any project.</p>
|
|
<div class="getting-started">
|
|
<h4>Getting Started:</h4>
|
|
<ol>
|
|
<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'] %}
|
|
<button id="create-first-unified-board" class="btn btn-primary">Create First Board</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
/* Container and header styles now inherited from common styles.css */
|
|
.overview-header {
|
|
text-align: center;
|
|
}
|
|
|
|
.overview-description {
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
|
|
.boards-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.board-card {
|
|
/* Card styling now inherited from common .card class */
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.board-header {
|
|
padding: 1.5rem;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.board-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.board-name {
|
|
margin: 0 0 0.5rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.board-description {
|
|
color: #666;
|
|
margin: 0.5rem 0 0 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.board-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.boards-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.board-item {
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.board-item:hover {
|
|
background: #e7f3ff;
|
|
border-color: #007bff;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.board-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.board-name {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.default-badge {
|
|
background: #28a745;
|
|
color: white;
|
|
padding: 0.15rem 0.4rem;
|
|
border-radius: 12px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.board-description {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.board-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
text-align: right;
|
|
}
|
|
|
|
.board-preview {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.board-preview h5 {
|
|
margin: 0 0 1rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.preview-columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.preview-column {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-column-header {
|
|
padding: 0.75rem;
|
|
background: white;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-column-name {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.preview-card-count {
|
|
background: #e9ecef;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 8px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preview-cards {
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.preview-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.preview-card-title {
|
|
font-weight: 500;
|
|
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;
|
|
}
|
|
|
|
.preview-more {
|
|
color: #666;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.preview-more-columns {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.quick-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 2rem;
|
|
color: #007bff;
|
|
}
|
|
|
|
.stat-card p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.no-kanban {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.no-kanban-content {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.no-kanban-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.no-kanban h3 {
|
|
color: #666;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.no-kanban p {
|
|
color: #999;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.getting-started {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.getting-started h4 {
|
|
margin: 0 0 1rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.getting-started ol {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.getting-started li {
|
|
margin-bottom: 0.5rem;
|
|
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;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.board-header {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.board-actions {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.preview-columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.quick-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stat-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
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 %} |