235 lines
12 KiB
HTML
235 lines
12 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Survey Templates" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="clipboard-list" class="w-7 h-7 text-blue"></i>
|
|
{% trans "Survey Templates" %}
|
|
</h1>
|
|
<p class="text-slate mt-1">{% trans "Manage survey templates and questions" %}</p>
|
|
</div>
|
|
<a href="{% url 'surveys:template_create' %}" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
|
|
<i data-lucide="plus" class="w-5 h-5"></i> {% trans "Create Survey Template" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Templates List Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
{% if templates %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-slate-50 border-b border-slate-100">
|
|
<tr class="text-xs font-bold text-slate uppercase tracking-wider">
|
|
<th class="px-6 py-4 text-left">{% trans "Name" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Survey Type" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Hospital" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Questions" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Scoring" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Status" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for template in templates %}
|
|
<tr class="hover:bg-light/30 transition">
|
|
<td class="px-6 py-4">
|
|
<span class="font-semibold text-navy">{{ template.name }}</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-700">{{ template.get_survey_type_display }}</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-sm text-slate">{{ template.hospital.name_en }}</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-700">{{ template.questions.count }} {% trans "questions" %}</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-sm text-slate">{{ template.get_scoring_method_display }}</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
{% if template.is_active %}
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700">{% trans "Active" %}</span>
|
|
{% else %}
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-600">{% trans "Inactive" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="relative">
|
|
<button type="button" class="dropdown-toggle p-2 text-slate hover:text-navy hover:bg-light rounded-lg transition" data-dropdown="dropdown-{{ template.pk }}">
|
|
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
|
|
</button>
|
|
<div id="dropdown-{{ template.pk }}" class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-100 py-2 z-10">
|
|
<a href="{% url 'surveys:template_detail' template.pk %}" class="flex items-center gap-2 px-4 py-2 text-sm text-slate hover:bg-light hover:text-navy transition">
|
|
<i data-lucide="eye" class="w-4 h-4"></i> {% trans "View" %}
|
|
</a>
|
|
<a href="{% url 'surveys:template_edit' template.pk %}" class="flex items-center gap-2 px-4 py-2 text-sm text-slate hover:bg-light hover:text-navy transition">
|
|
<i data-lucide="pencil" class="w-4 h-4"></i> {% trans "Edit" %}
|
|
</a>
|
|
<a href="{% url 'surveys:instance_list' %}?survey_type={{ template.survey_type }}" class="flex items-center gap-2 px-4 py-2 text-sm text-slate hover:bg-light hover:text-navy transition">
|
|
<i data-lucide="list-checks" class="w-4 h-4"></i> {% trans "View Instances" %}
|
|
</a>
|
|
<hr class="my-2 border-slate-100">
|
|
<button type="button" class="delete-btn w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition" data-template-id="{{ template.pk }}" data-template-name="{{ template.name }}">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if page_obj.has_other_pages %}
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 border-t border-slate-100">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-sm text-slate">
|
|
{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
|
|
</div>
|
|
<nav class="flex gap-2">
|
|
{% if page_obj.has_previous %}
|
|
<a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 text-slate hover:text-navy hover:bg-light rounded-lg transition">
|
|
<i data-lucide="chevron-left" class="w-5 h-5"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% for num in page_obj.paginator.page_range %}
|
|
{% if page_obj.number == num %}
|
|
<span class="px-4 py-2 bg-light text-navy rounded-lg font-medium">{{ num }}</span>
|
|
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
|
|
<a href="?page={{ num }}" class="px-4 py-2 text-slate hover:text-navy hover:bg-light rounded-lg transition">{{ num }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if page_obj.has_next %}
|
|
<a href="?page={{ page_obj.next_page_number }}" class="px-3 py-2 text-slate hover:text-navy hover:bg-light rounded-lg transition">
|
|
<i data-lucide="chevron-right" class="w-5 h-5"></i>
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<!-- Empty State -->
|
|
<div class="text-center py-16">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-slate-100 rounded-full mb-4">
|
|
<i data-lucide="clipboard-list" class="w-10 h-10 text-slate-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-navy mb-2">{% trans "No Templates Found" %}</h3>
|
|
<p class="text-slate mb-6">{% trans "Get started by creating your first survey template." %}</p>
|
|
<a href="{% url 'surveys:template_create' %}" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition inline-flex items-center gap-2">
|
|
<i data-lucide="plus" class="w-5 h-5"></i> {% trans "Create Survey Template" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div id="deleteModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black/50 modal-backdrop"></div>
|
|
<div class="relative bg-white rounded-2xl max-w-md w-full p-6 shadow-xl">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
|
|
<i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-navy">{% trans "Confirm Delete" %}</h3>
|
|
<p class="text-sm text-slate">{% trans "This action cannot be undone" %}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-slate mb-6">
|
|
{% trans "Are you sure you want to delete the survey template" %} "<strong id="deleteTemplateName" class="text-navy"></strong>"?
|
|
</p>
|
|
<p class="text-sm text-slate mb-6">
|
|
{% trans "This will also delete all associated questions and instances." %}
|
|
</p>
|
|
<div class="flex justify-end gap-3">
|
|
<button type="button" id="cancelDelete" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<form id="deleteForm" method="post" class="inline">
|
|
{% csrf_token %}
|
|
<button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition">
|
|
{% trans "Delete" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
|
|
// Dropdown toggle functionality
|
|
document.querySelectorAll('.dropdown-toggle').forEach(function(button) {
|
|
button.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
var dropdownId = this.getAttribute('data-dropdown');
|
|
var dropdown = document.getElementById(dropdownId);
|
|
|
|
// Close all other dropdowns
|
|
document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
|
|
if (menu.id !== dropdownId) {
|
|
menu.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Toggle current dropdown
|
|
dropdown.classList.toggle('hidden');
|
|
});
|
|
});
|
|
|
|
// Close dropdowns when clicking outside
|
|
document.addEventListener('click', function() {
|
|
document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
|
|
menu.classList.add('hidden');
|
|
});
|
|
});
|
|
|
|
// Delete modal functionality
|
|
var deleteModal = document.getElementById('deleteModal');
|
|
var deleteForm = document.getElementById('deleteForm');
|
|
var deleteTemplateName = document.getElementById('deleteTemplateName');
|
|
var cancelDelete = document.getElementById('cancelDelete');
|
|
|
|
document.querySelectorAll('.delete-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var templateId = this.getAttribute('data-template-id');
|
|
var templateName = this.getAttribute('data-template-name');
|
|
|
|
deleteTemplateName.textContent = templateName;
|
|
deleteForm.action = '/surveys/templates/' + templateId + '/delete/';
|
|
deleteModal.classList.remove('hidden');
|
|
|
|
// Close the dropdown
|
|
this.closest('.dropdown-menu').classList.add('hidden');
|
|
});
|
|
});
|
|
|
|
cancelDelete.addEventListener('click', function() {
|
|
deleteModal.classList.add('hidden');
|
|
});
|
|
|
|
deleteModal.querySelector('.modal-backdrop').addEventListener('click', function() {
|
|
deleteModal.classList.add('hidden');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|