289 lines
12 KiB
HTML
289 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n static %}
|
|
|
|
{% load form_filters %}
|
|
|
|
{% block title %}{{ form.name }} - Submission Details{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* ================================================= */
|
|
/* THEME VARIABLES AND GLOBAL STYLES */
|
|
/* ================================================= */
|
|
:root {
|
|
--kaauh-teal: #00636e; /* Primary */
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #eaeff3;
|
|
--kaauh-primary-text: #343a40;
|
|
}
|
|
|
|
/* Primary Color Overrides */
|
|
.text-primary { color: var(--kaauh-teal) !important; }
|
|
.text-info { color: #17a2b8 !important; }
|
|
.text-success { color: #28a745 !important; }
|
|
.text-secondary { color: #6c757d !important; }
|
|
.bg-info { background-color: #17a2b8 !important; }
|
|
.bg-secondary { background-color: #6c757d !important; }
|
|
|
|
/* Card enhancements */
|
|
.card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
background-color: white;
|
|
}
|
|
|
|
.card-header {
|
|
font-weight: 600;
|
|
padding: 1rem 1.25rem;
|
|
background-color: #f8f9fa; /* Light background */
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
/* Main Action Button Style */
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
padding: 0.5rem 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Secondary outline button */
|
|
.btn-outline-secondary {
|
|
color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal);
|
|
font-weight: 500;
|
|
}
|
|
.btn-outline-secondary:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
border-color: var(--kaauh-teal-dark);
|
|
}
|
|
|
|
/* ================================================= */
|
|
/* RESPONSES TABLE SPECIFIC STYLES (Horizontal Layout) */
|
|
/* ================================================= */
|
|
|
|
/* Main table container */
|
|
.table-submission {
|
|
margin-bottom: 0;
|
|
border: none;
|
|
table-layout: auto; /* Allow columns to resize based on content */
|
|
}
|
|
|
|
/* Fixed first column (the row headers) */
|
|
.table-submission th:first-child,
|
|
.table-submission td:first-child {
|
|
background-color: #f0f4f7; /* Slightly darker than header */
|
|
font-weight: 600;
|
|
color: var(--kaauh-primary-text);
|
|
width: 150px;
|
|
min-width: 150px;
|
|
position: sticky; /* Keep it visible when scrolling right */
|
|
left: 0;
|
|
z-index: 2;
|
|
border-right: 1px solid var(--kaauh-border);
|
|
}
|
|
.table-submission th:first-child {
|
|
top: 0; /* Important for sticky header/row-header intersection */
|
|
}
|
|
|
|
/* Field Label Header Row (Top Row) */
|
|
.table-submission thead th {
|
|
font-weight: 600;
|
|
background-color: #e9ecef; /* Light gray for headers */
|
|
color: var(--kaauh-primary-text);
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
border: 1px solid var(--kaauh-border);
|
|
border-bottom: 2px solid var(--kaauh-teal); /* Highlight the bottom of the header */
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
.table-submission thead th:not(:first-child) {
|
|
min-width: 200px; /* Give response columns space */
|
|
max-width: 300px;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Data Cells */
|
|
.table-submission tbody td {
|
|
vertical-align: top;
|
|
padding: 0.75rem 0.75rem;
|
|
border: 1px solid var(--kaauh-border);
|
|
border-top: none;
|
|
}
|
|
|
|
/* Styling for multi-value responses */
|
|
.table-submission .badge {
|
|
font-weight: 500;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* File display */
|
|
.table-submission .fa-file {
|
|
color: var(--kaauh-teal);
|
|
}
|
|
.table-submission .btn-outline-primary {
|
|
color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
}
|
|
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="container-fluid py-4">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item text-decorat"><a href="{% url 'job_detail' submission.template.job.slug %}" class="text-secondary">Job Detail</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'form_builder' submission.template.pk%}" class="text-secondary">Form Template</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page" style="
|
|
color: #F43B5E; /* Rosy Accent Color */
|
|
font-weight: 600;
|
|
">Submission Details</li>
|
|
</ol>
|
|
</nav>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="text-primary fw-bold">{% trans "Submission Details" %}</h2>
|
|
<a href="{% url 'form_template_submissions_list' template.slug %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Submissions" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{% trans "Submission Metadata" %}</h5>
|
|
</div>
|
|
<div class="card-body small">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<i class="fas fa-fingerprint me-2 text-primary"></i>
|
|
<strong>{% trans "Submission ID:" %}</strong> <span class="text-secondary">{{ submission.id }}</span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<i class="fas fa-calendar-check me-2 text-primary"></i>
|
|
<strong>{% trans "Submitted:" %}</strong> <span class="text-secondary">{{ submission.submitted_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<i class="fas fa-file-alt me-2 text-primary"></i>
|
|
<strong>{% trans "Form:" %}</strong> <span class="text-secondary">{{ submission.template.name }}</span>
|
|
</div>
|
|
</div>
|
|
{% if submission.applicant_name or submission.applicant_email %}
|
|
<div class="row g-3 mt-1">
|
|
{% if submission.applicant_name %}
|
|
<div class="col-md-4">
|
|
<i class="fas fa-user me-2 text-primary"></i>
|
|
<strong>{% trans "Applicant Name:" %}</strong> <span class="text-secondary">{{ submission.applicant_name }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if submission.applicant_email %}
|
|
<div class="col-md-4">
|
|
<i class="fas fa-envelope me-2 text-primary"></i>
|
|
<strong>{% trans "Email:" %}</strong> <span class="text-secondary">{{ submission.applicant_email }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{% trans "Form Responses" %}</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% with submission=submission %}
|
|
{% get_all_responses_flat submission as flat_responses %}
|
|
|
|
{% if flat_responses %}
|
|
<div class="table-responsive">
|
|
<table class="table table-submission table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{% trans "Field Property" %}</th>
|
|
{% for response in flat_responses %}
|
|
<th scope="col">{{ response.field_label }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>{% trans "Response Value" %}</strong></td>
|
|
{% for response in flat_responses %}
|
|
<td>
|
|
{% if response.uploaded_file %}
|
|
<div>
|
|
<span class="d-block text-truncate" style="max-width: 180px;"><i class="fas fa-file me-1"></i> {{ response.uploaded_file.name }}</span>
|
|
<a href="{{ response.uploaded_file.url }}" class="btn btn-sm btn-outline-secondary mt-1" target="_blank" title="{% trans 'Download File' %}">
|
|
<i class="fas fa-download"></i> {% trans "Download" %}
|
|
</a>
|
|
</div>
|
|
{% elif response.value %}
|
|
{% if response.field_type == 'checkbox' and response.value|length > 0 %}
|
|
<div class="d-flex flex-wrap gap-1">
|
|
{% for val in response.value %}
|
|
<span class="badge bg-secondary">{{ val }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% elif response.field_type == 'radio' or response.field_type == 'select' %}
|
|
<span class="badge bg-info">{{ response.value }}</span>
|
|
{% else %}
|
|
<p class="mb-0 small text-wrap">{{ response.value|linebreaksbr }}</p>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted small">{% trans "Not provided" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
<tr>
|
|
<td><strong>{% trans "Associated Stage" %}</strong></td>
|
|
{% for response in flat_responses %}
|
|
<td>
|
|
<span class="small text-secondary">{{ response.stage_name|default:"N/A" }}</span>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
<tr>
|
|
<td><strong>{% trans "Field Required" %}</strong></td>
|
|
{% for response in flat_responses %}
|
|
<td>
|
|
{% if response.required %}
|
|
<span class="text-danger small"><i class="fas fa-asterisk"></i> {% trans "Yes" %}</span>
|
|
{% else %}
|
|
<span class="small text-success">{% trans "No" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-muted py-5 px-3">
|
|
<i class="fas fa-exclamation-circle fa-2x mb-3"></i>
|
|
<p class="lead">{% trans "No response fields were found for this submission." %}</p>
|
|
<p class="small">{% trans "This may occur if the form template was modified or responses were cleared." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |