HH/templates/dashboard/partials/tasks_table.html

152 lines
7.6 KiB
HTML

{% load i18n %}
<div class="card table-card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="bi bi-list-task me-2"></i>{% trans "Tasks" %}</h5>
<div>
<button type="button" class="btn btn-sm btn-outline-secondary bulk-action-btn" data-tab="tasks" disabled>
<i class="bi bi-check2-square"></i> Bulk Action
</button>
<a href="{% url 'projects:project_list' %}" class="btn btn-sm btn-primary">
<i class="bi bi-list"></i> View All
</a>
</div>
</div>
<div class="card-body p-0">
{% if data %}
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th width="40"><input type="checkbox" class="form-check-input select-all"></th>
<th>ID</th>
<th>Title</th>
<th>Project</th>
<th>Assigned To</th>
<th>Priority</th>
<th>Status</th>
<th>Due Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for task in data %}
<tr class="{% if task.is_overdue %}table-danger{% endif %}">
<td>
<input type="checkbox" class="form-check-input bulk-checkbox" value="{{ task.id }}">
</td>
<td><code>{{ task.id }}</code></td>
<td>
<a href="{% url 'projects:project_detail' task.id %}" class="text-decoration-none">
{{ task.title|truncatewords:8 }}
</a>
{% if task.is_overdue %}
<span class="badge bg-danger ms-1">OVERDUE</span>
{% endif %}
</td>
<td>
{% if task.project %}
<a href="{% url 'projects:project_detail' task.project.id %}" class="text-decoration-none">
{{ task.project.name|truncatewords:3 }}
</a>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>
{% if task.assigned_to %}
{{ task.assigned_to.get_full_name }}
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>
<span class="badge bg-{{ task.get_priority_color }}">{{ task.get_priority_display }}</span>
</td>
<td>
<span class="badge bg-{{ task.get_status_color }}">{{ task.get_status_display }}</span>
</td>
<td>
{% if task.due_date %}
{{ task.due_date|date:"M d, Y" }}
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>
<div class="btn-group btn-group-sm">
<a href="{% url 'projects:project_detail' task.id %}" class="btn btn-outline-primary">
<i class="bi bi-eye"></i>
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Pagination -->
{% if data.has_other_pages %}
<div class="card-footer">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
Showing {{ data.start_index }} to {{ data.end_index }} of {{ data.paginator.count }}
</small>
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm mb-0">
{% if data.has_previous %}
<li class="page-item">
<a class="page-link" href="?page_tasks=1&tab=tasks&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
<i class="bi bi-chevron-double-left"></i>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page_tasks={{ data.previous_page_number }}&tab=tasks&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
<i class="bi bi-chevron-left"></i>
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link"><i class="bi bi-chevron-double-left"></i></span>
</li>
<li class="page-item disabled">
<span class="page-link"><i class="bi bi-chevron-left"></i></span>
</li>
{% endif %}
<li class="page-item active">
<span class="page-link">{{ data.number }}</span>
</li>
{% if data.has_next %}
<li class="page-item">
<a class="page-link" href="?page_tasks={{ data.next_page_number }}&tab=tasks&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
<i class="bi bi-chevron-right"></i>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page_tasks={{ data.paginator.num_pages }}&tab=tasks&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
<i class="bi bi-chevron-double-right"></i>
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link"><i class="bi bi-chevron-right"></i></span>
</li>
<li class="page-item disabled">
<span class="page-link"><i class="bi bi-chevron-double-right"></i></span>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
{% endif %}
{% else %}
<div class="p-4 text-center text-muted">
<i class="bi bi-inbox fs-1"></i>
<p class="mt-2">No tasks found</p>
</div>
{% endif %}
</div>
</div>