454 lines
22 KiB
HTML
454 lines
22 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Survey Template Mappings" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
|
|
<i data-lucide="layers" class="w-8 h-8 text-navy"></i>
|
|
{% trans "Survey Template Mappings" %}
|
|
</h2>
|
|
<p class="text-gray-500">
|
|
{% trans "Configure which survey templates are sent for each patient type at each hospital." %}
|
|
</p>
|
|
</div>
|
|
<button id="addMappingBtn" class="bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2 shadow-lg shadow-blue-200 hover:shadow-xl hover:-translate-y-0.5">
|
|
<i data-lucide="plus" class="w-5 h-5"></i> {% trans "Add Mapping" %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mappings List -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
|
|
{% if mappings %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Hospital" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Patient Type" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Survey Template" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
{% for mapping in mappings %}
|
|
<tr class="hover:bg-gray-50 transition">
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-gray-800">{{ mapping.hospital.name }}</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
|
|
{{ mapping.patient_type_display }}
|
|
</span>
|
|
<div class="text-xs text-gray-400 mt-1">({{ mapping.patient_type }})</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-gray-800">{{ mapping.survey_template.name }}</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
{% if mapping.is_active %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">
|
|
{% trans "Active" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
|
|
{% trans "Inactive" %}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex gap-2">
|
|
<button class="edit-mapping px-3 py-2 text-navy bg-light rounded-lg hover:bg-light transition font-medium text-sm flex items-center gap-1"
|
|
data-id="{{ mapping.id }}"
|
|
data-hospital="{{ mapping.hospital.id }}"
|
|
data-patient-type="{{ mapping.patient_type }}"
|
|
data-survey-template="{{ mapping.survey_template.id }}"
|
|
data-active="{{ mapping.is_active }}">
|
|
<i data-lucide="edit" class="w-4 h-4"></i> {% trans "Edit" %}
|
|
</button>
|
|
<button class="delete-mapping px-3 py-2 text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition font-medium text-sm flex items-center gap-1"
|
|
data-id="{{ mapping.id }}"
|
|
data-name="{{ mapping.patient_type_display }} - {{ mapping.survey_template.name }}">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="p-12 text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-blue-100 rounded-full mb-4">
|
|
<i data-lucide="layers" class="w-10 h-10 text-blue-500"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">{% trans "No Mappings Configured" %}</h3>
|
|
<p class="text-gray-500 mb-4">{% trans "No survey template mappings configured yet. Click 'Add Mapping' to create your first mapping." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add/Edit Mapping Modal -->
|
|
<div id="addMappingModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div class="sticky top-0 bg-white border-b border-gray-200 px-8 py-6 flex justify-between items-center">
|
|
<h3 id="mappingModalTitle" class="text-2xl font-bold text-gray-800">{% trans "Add Survey Template Mapping" %}</h3>
|
|
<button id="closeAddModal" class="text-gray-400 hover:text-gray-600 transition">
|
|
<i data-lucide="x" class="w-6 h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-8">
|
|
{% csrf_token %}
|
|
<form id="mappingForm" class="space-y-6">
|
|
<input type="hidden" id="mappingId" name="id">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="hospital" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Hospital" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="hospital" name="hospital" required
|
|
class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition">
|
|
<option value="">{% trans "Select Hospital" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}">{{ hospital.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="surveyTemplate" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Survey Template" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="surveyTemplate" name="survey_template" required
|
|
class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition">
|
|
<option value="">{% trans "Select Survey Template" %}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="patientType" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Patient Type" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="patientType" name="patient_type" required
|
|
class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition">
|
|
<option value="">{% trans "Select Patient Type" %}</option>
|
|
<option value="1">1 - {% trans "Inpatient (Type 1)" %}</option>
|
|
<option value="2">2 - {% trans "Outpatient (Type 2)" %}</option>
|
|
<option value="3">3 - {% trans "Emergency (Type 3)" %}</option>
|
|
<option value="4">4 - {% trans "Day Case (Type 4)" %}</option>
|
|
<option value="APPOINTMENT">APPOINTMENT - {% trans "Appointment" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="isActive" class="block text-sm font-bold text-gray-700 mb-2">{% trans "Status" %}</label>
|
|
<div class="flex items-center gap-3 pt-3">
|
|
<input type="checkbox" id="isActive" name="is_active" checked
|
|
class="w-5 h-5 text-navy border-2 border-gray-300 rounded focus:ring-navy focus:ring-offset-2">
|
|
<label for="isActive" class="text-gray-700 font-medium">{% trans "Active" %}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-8 py-6 flex justify-end gap-3">
|
|
<button id="cancelAddModal" class="border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-xl font-bold hover:bg-gray-100 transition flex items-center gap-2">
|
|
<i data-lucide="x" class="w-5 h-5"></i> {% trans "Cancel" %}
|
|
</button>
|
|
<button id="saveMapping" class="bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2 shadow-lg shadow-blue-200">
|
|
<i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Mapping" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4">
|
|
<div class="p-8">
|
|
<div class="text-center mb-6">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
|
|
<i data-lucide="alert-triangle" class="w-8 h-8 text-red-500"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">{% trans "Confirm Delete" %}</h3>
|
|
<p class="text-gray-500">{% trans "Are you sure you want to delete this mapping?" %}</p>
|
|
<p id="deleteMappingName" class="font-bold text-gray-800 mt-2"></p>
|
|
</div>
|
|
<div class="flex justify-center gap-3">
|
|
<button id="cancelDeleteModal" class="border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-xl font-bold hover:bg-gray-100 transition flex items-center gap-2">
|
|
<i data-lucide="x" class="w-5 h-5"></i> {% trans "Cancel" %}
|
|
</button>
|
|
<button id="confirmDelete" class="bg-red-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-red-700 transition flex items-center gap-2 shadow-lg shadow-red-200">
|
|
<i data-lucide="trash-2" class="w-5 h-5"></i> {% trans "Delete" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const API_URL = '/api/integrations/survey-template-mappings/';
|
|
let deleteMappingId = null;
|
|
|
|
// Modal elements
|
|
const addModal = document.getElementById('addMappingModal');
|
|
const deleteModal = document.getElementById('deleteModal');
|
|
const addMappingBtn = document.getElementById('addMappingBtn');
|
|
const closeAddModal = document.getElementById('closeAddModal');
|
|
const cancelAddModal = document.getElementById('cancelAddModal');
|
|
const closeDeleteModal = document.getElementById('cancelDeleteModal');
|
|
|
|
// Show/Hide modal helper functions
|
|
function showModal(modal) {
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
}
|
|
|
|
function hideModal(modal) {
|
|
modal.classList.add('hidden');
|
|
modal.classList.remove('flex');
|
|
}
|
|
|
|
// Event listeners for modal controls
|
|
addMappingBtn.addEventListener('click', () => showModal(addModal));
|
|
closeAddModal.addEventListener('click', () => hideModal(addModal));
|
|
cancelAddModal.addEventListener('click', () => hideModal(addModal));
|
|
closeDeleteModal.addEventListener('click', () => hideModal(deleteModal));
|
|
|
|
// Close modal when clicking outside
|
|
addModal.addEventListener('click', (e) => {
|
|
if (e.target === addModal) hideModal(addModal);
|
|
});
|
|
deleteModal.addEventListener('click', (e) => {
|
|
if (e.target === deleteModal) hideModal(deleteModal);
|
|
});
|
|
|
|
// Load survey templates when hospital changes
|
|
document.getElementById('hospital').addEventListener('change', function() {
|
|
const hospitalId = this.value;
|
|
const surveyTemplateSelect = document.getElementById('surveyTemplate');
|
|
|
|
// Clear existing options
|
|
surveyTemplateSelect.innerHTML = '<option value="">{% trans "Select Survey Template" %}</option>';
|
|
|
|
// Store of pending survey template ID to set after loading
|
|
surveyTemplateSelect.dataset.pendingValue = '';
|
|
|
|
if (hospitalId) {
|
|
// Fetch survey templates for this hospital
|
|
fetch(`/surveys/api/templates/?hospital=${hospitalId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Handle both array and paginated response formats
|
|
const templates = Array.isArray(data) ? data : (data.results || []);
|
|
|
|
templates.forEach(template => {
|
|
const option = document.createElement('option');
|
|
option.value = template.id;
|
|
option.textContent = template.name;
|
|
surveyTemplateSelect.appendChild(option);
|
|
});
|
|
|
|
// Set of pending value after loading
|
|
if (surveyTemplateSelect.dataset.pendingValue) {
|
|
surveyTemplateSelect.value = surveyTemplateSelect.dataset.pendingValue;
|
|
surveyTemplateSelect.dataset.pendingValue = '';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading survey templates:', error);
|
|
console.error('Response data:', error.message);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Edit mapping button
|
|
document.querySelectorAll('.edit-mapping').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// Populate form
|
|
document.getElementById('mappingId').value = this.dataset.id;
|
|
document.getElementById('hospital').value = this.dataset.hospital;
|
|
document.getElementById('patientType').value = this.dataset.patientType;
|
|
document.getElementById('isActive').checked = this.dataset.active === 'true';
|
|
|
|
// Store survey template ID to set after hospital change loads templates
|
|
const surveyTemplateId = this.dataset.surveyTemplate;
|
|
const surveyTemplateSelect = document.getElementById('surveyTemplate');
|
|
surveyTemplateSelect.dataset.pendingValue = surveyTemplateId;
|
|
|
|
// Update modal title
|
|
document.getElementById('mappingModalTitle').textContent = '{% trans "Edit Survey Template Mapping" %}';
|
|
|
|
// Trigger hospital change to load survey templates
|
|
// The survey template value will be set after loading completes
|
|
document.getElementById('hospital').dispatchEvent(new Event('change'));
|
|
|
|
showModal(addModal);
|
|
});
|
|
});
|
|
|
|
// Delete mapping button
|
|
document.querySelectorAll('.delete-mapping').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
deleteMappingId = this.dataset.id;
|
|
document.getElementById('deleteMappingName').textContent = this.dataset.name;
|
|
showModal(deleteModal);
|
|
});
|
|
});
|
|
|
|
// Confirm delete
|
|
document.getElementById('confirmDelete').addEventListener('click', function() {
|
|
if (deleteMappingId) {
|
|
// Get CSRF token
|
|
const csrfToken = getCSRFToken();
|
|
if (!csrfToken) {
|
|
alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
|
|
return;
|
|
}
|
|
|
|
fetch(`${API_URL}${deleteMappingId}/`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRFToken': csrfToken
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
location.reload();
|
|
} else {
|
|
alert('{% trans "Error deleting mapping" %}');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('{% trans "Error deleting mapping" %}');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Save mapping
|
|
document.getElementById('saveMapping').addEventListener('click', function(event) {
|
|
// Prevent form submission
|
|
event.preventDefault();
|
|
|
|
const form = document.getElementById('mappingForm');
|
|
|
|
// Validate required fields
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
const mappingId = document.getElementById('mappingId').value;
|
|
|
|
const data = {
|
|
hospital: document.getElementById('hospital').value,
|
|
patient_type: document.getElementById('patientType').value,
|
|
survey_template: document.getElementById('surveyTemplate').value,
|
|
is_active: document.getElementById('isActive').checked
|
|
};
|
|
|
|
console.log('Saving mapping:', data);
|
|
|
|
const url = mappingId ? `${API_URL}${mappingId}/` : API_URL;
|
|
const method = mappingId ? 'PUT' : 'POST';
|
|
|
|
// Disable button to prevent double submission
|
|
const saveButton = this;
|
|
saveButton.disabled = true;
|
|
saveButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>{% trans "Saving..." %}';
|
|
|
|
// Get CSRF token
|
|
const csrfToken = getCSRFToken();
|
|
if (!csrfToken) {
|
|
alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
|
|
saveButton.disabled = false;
|
|
saveButton.innerHTML = '<i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Mapping" %}';
|
|
return;
|
|
}
|
|
|
|
console.log('CSRF Token:', csrfToken.substring(0, 20) + '...');
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => {
|
|
console.log('Response status:', response.status);
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error(JSON.stringify(err));
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
// Hide modal and reload page
|
|
hideModal(addModal);
|
|
location.reload();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error saving mapping:', error);
|
|
alert('{% trans "Error saving mapping" %}: ' + error.message);
|
|
// Re-enable button
|
|
saveButton.disabled = false;
|
|
saveButton.innerHTML = '<i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Mapping" %}';
|
|
});
|
|
});
|
|
|
|
// Reset modal on close
|
|
addModal.addEventListener('hidden', function() {
|
|
document.getElementById('mappingForm').reset();
|
|
document.getElementById('mappingId').value = '';
|
|
document.getElementById('mappingModalTitle').textContent = '{% trans "Add Survey Template Mapping" %}';
|
|
});
|
|
|
|
// CSRF token helper - multiple methods for reliability
|
|
function getCSRFToken() {
|
|
// Method 1: Try to get from hidden input (most reliable)
|
|
const csrfInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
|
|
if (csrfInput) {
|
|
return csrfInput.value;
|
|
}
|
|
|
|
// Method 2: Try to get from cookie (case-insensitive)
|
|
const cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i].trim();
|
|
// Check both 'csrftoken' and 'csrfToken' (case-insensitive)
|
|
if (cookie.toLowerCase().startsWith('csrftoken=')) {
|
|
return decodeURIComponent(cookie.substring(10));
|
|
}
|
|
}
|
|
|
|
// Method 3: Check for Django's meta tag
|
|
const metaTag = document.querySelector('meta[name="csrf-token"]');
|
|
if (metaTag) {
|
|
return metaTag.getAttribute('content');
|
|
}
|
|
|
|
console.error('Unable to find CSRF token');
|
|
return null;
|
|
}
|
|
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |