178 lines
12 KiB
HTML
178 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n form_filters %}
|
|
|
|
|
|
{% block title %}{% trans "All Submissions for" %} {{ template.name }} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
|
|
<!-- Desktop Header -->
|
|
<div class="hidden lg:block">
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'dashboard' %}" class="text-gray-500 hover:text-temple-red transition flex items-center gap-1">
|
|
<i data-lucide="home" class="w-4 h-4"></i> {% trans "Dashboard" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li><a href="{% url 'form_templates_list' %}" class="text-gray-500 hover:text-temple-red transition">{% trans "Form Templates" %}</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li><a href="{% url 'form_template_submissions_list' template.slug %}" class="text-gray-500 hover:text-temple-red transition">{% trans "Submissions" %}</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-temple-red font-semibold">{% trans "All Submissions Table" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="flex-1">
|
|
<h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
|
|
<div class="bg-temple-red/10 p-3 rounded-xl">
|
|
<i data-lucide="table" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
{% trans "All Submissions for" %}: {{ template.name }}
|
|
</h1>
|
|
<p class="text-sm text-gray-500 mt-2">Template ID: #{{ template.id }}</p>
|
|
</div>
|
|
<a href="{% url 'form_template_submissions_list' template.slug %}" class="inline-flex items-center gap-2 border border-gray-300 text-gray-600 hover:bg-gray-100 px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Submissions" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Header -->
|
|
<div class="lg:hidden mb-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h1 class="text-xl font-bold text-gray-900 flex items-center gap-2">
|
|
<div class="bg-temple-red/10 p-2 rounded-lg">
|
|
<i data-lucide="table" class="w-5 h-5 text-temple-red"></i>
|
|
</div>
|
|
{% trans "All Submissions" %}
|
|
</h1>
|
|
<a href="{% url 'form_template_submissions_list' template.slug %}" class="inline-flex items-center gap-2 border border-gray-300 text-gray-600 hover:bg-gray-100 px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% if page_obj.object_list %}
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white p-4">
|
|
<h5 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="list" class="w-5 h-5"></i>
|
|
{% trans "All Submissions Table" %}
|
|
</h5>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto max-h-[70vh]">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="sticky top-0 z-10">
|
|
<tr>
|
|
<th scope="col" class="px-4 py-2 text-left text-[10px] font-bold text-white bg-temple-dark tracking-wider whitespace-nowrap uppercase">{% trans "Submission ID" %}</th>
|
|
<th scope="col" class="px-4 py-2 text-left text-[10px] font-bold text-white bg-temple-dark tracking-wider whitespace-nowrap uppercase">{% trans "Applicant Name" %}</th>
|
|
<th scope="col" class="px-4 py-2 text-left text-[10px] font-bold text-white bg-temple-dark tracking-wider whitespace-nowrap uppercase">{% trans "Applicant Email" %}</th>
|
|
<th scope="col" class="px-4 py-2 text-left text-[10px] font-bold text-white bg-temple-dark tracking-wider whitespace-nowrap uppercase">{% trans "Submitted At" %}</th>
|
|
{% for field in fields %}
|
|
<th scope="col" class="px-4 py-2 text-left text-[10px] font-bold text-white bg-temple-dark tracking-wider whitespace-nowrap uppercase">{{ field.label }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-100 text-sm">
|
|
{% for submission in page_obj %}
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-4 py-2 font-semibold text-gray-900 whitespace-nowrap">{{ submission.id }}</td>
|
|
<td class="px-4 py-2 text-gray-700 whitespace-nowrap">{{ submission.applicant_name|default:"N/A" }}</td>
|
|
<td class="px-4 py-2 text-gray-700 whitespace-nowrap">{{ submission.applicant_email|default:"N/A" }}</td>
|
|
<td class="px-4 py-2 text-gray-700 whitespace-nowrap">{{ submission.submitted_at|date:"M d, Y H:i" }}</td>
|
|
{% for field in fields %}
|
|
{% get_field_response_for_submission submission field as response %}
|
|
<td class="px-4 py-2 max-w-[200px]">
|
|
{% if response %}
|
|
{% if response.uploaded_file %}
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ response.uploaded_file.url }}"
|
|
class="inline-flex items-center gap-1 bg-temple-red/10 hover:bg-temple-red/20 text-temple-red px-2 py-1 rounded text-xs transition"
|
|
target="_blank"
|
|
title="{% trans 'Download File' %}">
|
|
<i data-lucide="download" class="w-3 h-3"></i> {% trans "Download" %}
|
|
</a>
|
|
</div>
|
|
{% elif response.value %}
|
|
{% if response.field.field_type == 'checkbox' and response.value|length > 0 %}
|
|
<div class="flex flex-wrap gap-1">
|
|
{% for val in response.value|to_list %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-gray-200 text-gray-700">{{ val }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% elif response.field.field_type == 'radio' or response.field.field_type == 'select' %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-blue-100 text-blue-800">{{ response.value }}</span>
|
|
{% else %}
|
|
<p class="text-xs text-gray-700 line-clamp-2">{{ response.value|linebreaksbr|truncatewords:10 }}</p>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-xs text-gray-400">Not provided</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-xs text-gray-400">Not provided</span>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if page_obj.has_other_pages %}
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<div class="text-sm text-gray-600">
|
|
{% blocktrans with start=page_obj.start_index end=page_obj.end_index total=page_obj.paginator.count %}
|
|
Showing {{ start }} to {{ end }} of {{ total }} results.
|
|
{% endblocktrans %}
|
|
</div>
|
|
<nav aria-label="Page navigation" class="flex items-center gap-2">
|
|
{% if page_obj.has_previous %}
|
|
<a href="?page=1" class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition" aria-label="First">
|
|
<i data-lucide="chevrons-left" class="w-4 h-4"></i>
|
|
</a>
|
|
<a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition" aria-label="Previous">
|
|
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<span class="px-4 py-2 bg-temple-red text-white rounded-lg text-sm font-semibold">
|
|
{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
|
|
</span>
|
|
|
|
{% if page_obj.has_next %}
|
|
<a href="?page={{ page_obj.next_page_number }}" class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition" aria-label="Next">
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</a>
|
|
<a href="?page={{ page_obj.paginator.num_pages }}" class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition" aria-label="Last">
|
|
<i data-lucide="chevrons-right" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<!-- No Results -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
|
|
<i data-lucide="inbox" class="w-16 h-16 text-temple-red mx-auto mb-4"></i>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">{% trans "No Submissions Found" %}</h3>
|
|
<p class="text-gray-500 mb-6">{% trans "There are no submissions for this form template yet." %}</p>
|
|
<a href="{% url 'form_template_submissions_list' template.slug %}" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-6 py-3 rounded-xl transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i> {% trans "Back to Submissions" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %} |