Ross
a573ed78a4
- Redesigned the supervisor overview page to include a header card with supervisor details and trainee statistics. - Implemented a tabbed interface for viewing trainees and their recent attempts. - Improved the trainee detail page with a profile card and a table for displaying attempt history. - Added a new view for supervisors to provide feedback on case collections, including outstanding feedback items and previous conversations. - Updated URL routing to support new feedback functionality. - Enhanced backend logic to ensure proper sharing permissions for exam attempts and case collections. - Added comprehensive tests for supervisor access to trainee data and feedback functionalities.
204 lines
12 KiB
HTML
204 lines
12 KiB
HTML
{% extends 'generic/base_supervisor.html' %}
|
|
|
|
{% load crispy_forms_tags %}
|
|
|
|
{% block content %}
|
|
<div class="container py-4">
|
|
<!-- Header Card -->
|
|
<div class="card bg-dark bg-opacity-50 border-secondary mb-4">
|
|
<div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-3">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="bg-info bg-opacity-10 border border-info border-opacity-25 rounded-circle p-3 d-flex align-items-center justify-content-center text-info" style="width: 56px; height: 56px;">
|
|
<i class="bi bi-person-workspace fs-3"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="h4 mb-0 text-light">Supervisor: {{ supervisor.name }}</h2>
|
|
<p class="text-muted mb-0 small"><i class="bi bi-envelope me-1"></i>{{ supervisor.email }} · <i class="bi bi-geo-alt me-1"></i>{{ supervisor.site|default:"No site linked" }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-3 text-center">
|
|
<div class="border-start border-secondary ps-3">
|
|
<div class="text-muted small">Trainees</div>
|
|
<div class="fs-4 fw-semibold text-info">{{ trainees.count }}</div>
|
|
</div>
|
|
<div class="border-start border-secondary ps-3">
|
|
<div class="text-muted small">Total Attempts</div>
|
|
<div class="fs-4 fw-semibold text-light">{{ attempts|length }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Info -->
|
|
<div class="alert alert-secondary border-secondary bg-dark bg-opacity-25 mb-4">
|
|
<div class="d-flex gap-2">
|
|
<i class="bi bi-info-circle text-info fs-5"></i>
|
|
<div>
|
|
<span class="fw-semibold text-light">Supervisor Dashboard Guide:</span>
|
|
<p class="mb-1 text-muted small">This hub allows you to monitor and review your trainees' progress on exams and case collections.</p>
|
|
<p class="mb-0 text-muted small">Trainees have option to choose which attempts to share. Shared attempts are fully viewable (score and answers link). Private attempts show the completion date only, keeping results confidential.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Tabs -->
|
|
<ul class="nav nav-tabs border-secondary mb-4" id="supervisorTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active text-light border-secondary bg-transparent" id="trainees-tab" data-bs-toggle="tab" data-bs-target="#trainees" type="button" role="tab" aria-controls="trainees" aria-selected="true">
|
|
<i class="bi bi-people-fill me-1"></i>Trainees List
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link text-muted border-transparent bg-transparent" id="attempts-tab" data-bs-toggle="tab" data-bs-target="#attempts" type="button" role="tab" aria-controls="attempts" aria-selected="false">
|
|
<i class="bi bi-clock-history me-1"></i>Recent Trainee Attempts
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="supervisorTabContent">
|
|
<!-- Trainees Tab -->
|
|
<div class="tab-pane fade show active" id="trainees" role="tablist" aria-labelledby="trainees-tab">
|
|
<div class="card bg-dark bg-opacity-25 border-secondary">
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped table-hover align-middle mb-0">
|
|
<thead>
|
|
<tr class="text-muted border-secondary">
|
|
<th class="ps-4">Trainee Name</th>
|
|
<th>Email</th>
|
|
<th>Grade</th>
|
|
<th>Site</th>
|
|
<th class="text-center">Shared / Private Attempts</th>
|
|
<th>Last Activity</th>
|
|
<th class="text-end pe-4">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for stat in trainee_stats %}
|
|
<tr class="border-secondary">
|
|
<td class="ps-4 fw-semibold">
|
|
<i class="bi bi-person-fill text-muted me-2"></i>{{ stat.trainee.first_name }} {{ stat.trainee.last_name }}
|
|
</td>
|
|
<td>{{ stat.trainee.email }}</td>
|
|
<td><span class="badge bg-secondary">{{ stat.trainee.userprofile.grade|default:"N/A" }}</span></td>
|
|
<td>{{ stat.trainee.userprofile.site|default:"N/A" }}</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-success" title="Shared attempts">{{ stat.shared_count }}</span>
|
|
<span class="badge bg-secondary" title="Private attempts">{{ stat.private_count }}</span>
|
|
</td>
|
|
<td class="text-muted small">
|
|
{% if stat.last_active %}
|
|
{{ stat.last_active|date:"d M Y H:i" }}
|
|
{% else %}
|
|
No activity
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-end pe-4">
|
|
<a href='{% url "generic:supervisor_trainee" supervisor.pk stat.trainee.pk %}' class="btn btn-sm btn-outline-info">
|
|
<i class="bi bi-speedometer2 me-1"></i>View Progress
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="text-center py-4 text-muted">
|
|
<i class="bi bi-people display-6 mb-2 d-block"></i>
|
|
You currently have no associated trainees.
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attempts Tab -->
|
|
<div class="tab-pane fade" id="attempts" role="tabpanel" aria-labelledby="attempts-tab">
|
|
<div class="card bg-dark bg-opacity-25 border-secondary">
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped table-hover align-middle mb-0">
|
|
<thead>
|
|
<tr class="text-muted border-secondary">
|
|
<th class="ps-4">Trainee</th>
|
|
<th>Attempt Item</th>
|
|
<th>Type</th>
|
|
<th>Date Completed</th>
|
|
<th>Sharing</th>
|
|
<th>Score / Progress</th>
|
|
<th class="text-end pe-4">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in attempts %}
|
|
<tr class="border-secondary">
|
|
<td class="ps-4 fw-semibold">
|
|
{{ item.trainee.first_name }} {{ item.trainee.last_name }}
|
|
</td>
|
|
<td>{{ item.exam }}</td>
|
|
<td>
|
|
<span class="badge {% if item.type == 'casecollection' %}bg-primary{% else %}bg-secondary{% endif %}">
|
|
{{ item.type_display }}
|
|
</span>
|
|
</td>
|
|
<td class="text-muted small">{{ item.date|date:"d M Y H:i" }}</td>
|
|
<td>
|
|
{% if item.is_shared %}
|
|
<span class="badge bg-success"><i class="bi bi-eye-fill me-1"></i>Shared</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary"><i class="bi bi-lock-fill me-1"></i>Private</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if item.is_shared %}
|
|
<span class="text-light fw-medium">{{ item.score_str }}</span>
|
|
{% else %}
|
|
<span class="text-muted small">Locked</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-end pe-4">
|
|
{% if item.is_shared and item.detail_url %}
|
|
<a href="{{ item.detail_url }}" class="btn btn-sm btn-outline-info">
|
|
<i class="bi bi-arrow-right-short me-1"></i>View Details
|
|
</a>
|
|
{% else %}
|
|
<button class="btn btn-sm btn-outline-secondary" disabled>
|
|
<i class="bi bi-lock-fill"></i> Private
|
|
</button>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="text-center py-4 text-muted">
|
|
<i class="bi bi-clock-history display-6 mb-2 d-block"></i>
|
|
No trainee attempts recorded.
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.nav-tabs .nav-link.active {
|
|
border-color: var(--bs-secondary) var(--bs-secondary) var(--bs-body-bg) !important;
|
|
border-bottom-width: 2px !important;
|
|
}
|
|
.nav-tabs .nav-link:hover:not(.active) {
|
|
border-color: transparent !important;
|
|
color: var(--bs-light) !important;
|
|
}
|
|
</style>
|
|
{% endblock css %}
|