454 lines
22 KiB
HTML
454 lines
22 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Survey Template Mappings" %} - 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="layers" class="w-7 h-7 text-blue"></i>
|
|
{% trans "Survey Template Mappings" %}
|
|
</h1>
|
|
<p class="text-slate mt-1">{% trans "Configure which survey templates are sent for each patient type at each hospital" %}</p>
|
|
</div>
|
|
<button id="addMappingBtn" 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 "Add Mapping" %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mappings List Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
{% if mappings %}
|
|
<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 "Hospital" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Patient Type" %}</th>
|
|
<th class="px-6 py-4 text-left">{% trans "Survey Template" %}</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 mapping in mappings %}
|
|
<tr class="hover:bg-light/30 transition">
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-navy">
|
|
{% if mapping.hospital %}
|
|
{{ mapping.hospital.name }}
|
|
{% else %}
|
|
<span class="text-slate italic">{% trans "All Hospitals" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</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">
|
|
{{ mapping.get_patient_type_display }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-navy">{{ mapping.survey_template.name }}</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
{% if mapping.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="flex gap-2">
|
|
<button class="edit-mapping px-3 py-2 text-navy bg-light rounded-lg hover:bg-light/80 transition font-medium text-sm flex items-center gap-1"
|
|
data-id="{{ mapping.id }}"
|
|
data-hospital="{{ mapping.hospital.id|default:'' }}"
|
|
data-patient-type="{{ mapping.patient_type }}"
|
|
data-survey-template="{{ mapping.survey_template.id }}"
|
|
data-active="{{ mapping.is_active }}">
|
|
<i data-lucide="pencil" 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.get_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 %}
|
|
<!-- 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="layers" class="w-10 h-10 text-slate-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-navy mb-2">{% trans "No Mappings Configured" %}</h3>
|
|
<p class="text-slate mb-6">{% trans "No survey template mappings configured yet. Click 'Add Mapping' to create your first mapping." %}</p>
|
|
<button id="addMappingBtnEmpty" 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 "Add Mapping" %}
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Add/Edit Mapping Modal -->
|
|
<div id="addMappingModal" 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-2xl w-full shadow-xl overflow-hidden">
|
|
<!-- Modal Header -->
|
|
<div class="bg-slate-50 border-b border-slate-100 px-6 py-4 flex justify-between items-center">
|
|
<h3 id="mappingModalTitle" class="text-xl font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="layers" class="w-6 h-6 text-blue"></i>
|
|
{% trans "Add Survey Template Mapping" %}
|
|
</h3>
|
|
<button id="closeAddModal" class="text-slate hover:text-navy transition p-1 hover:bg-light rounded-lg">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="p-6">
|
|
<form id="mappingForm" class="space-y-5">
|
|
<input type="hidden" id="mappingId" name="id">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<!-- Hospital -->
|
|
<div>
|
|
<label for="hospital" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Hospital" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="hospital" name="hospital" required
|
|
class="form-select w-full px-4 py-2.5 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white">
|
|
<option value="">{% trans "Select Hospital" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}">{{ hospital.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Survey Template -->
|
|
<div>
|
|
<label for="surveyTemplate" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Survey Template" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="surveyTemplate" name="survey_template" required
|
|
class="form-select w-full px-4 py-2.5 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white">
|
|
<option value="">{% trans "Select Survey Template" %}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<!-- Patient Type -->
|
|
<div>
|
|
<label for="patientType" class="block text-sm font-bold text-slate mb-2">
|
|
{% trans "Patient Type" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="patientType" name="patient_type" required
|
|
class="form-select w-full px-4 py-2.5 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white">
|
|
<option value="">{% trans "Select Patient Type" %}</option>
|
|
<option value="1">{% trans "Inpatient (Type 1)" %}</option>
|
|
<option value="2">{% trans "Outpatient (Type 2)" %}</option>
|
|
<option value="3">{% trans "Emergency (Type 3)" %}</option>
|
|
<option value="4">{% trans "Day Case (Type 4)" %}</option>
|
|
<option value="APPOINTMENT">{% trans "Appointment" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-slate mb-2">{% trans "Status" %}</label>
|
|
<label class="flex items-center gap-3 p-3 bg-light/50 rounded-xl border border-slate-100 cursor-pointer hover:bg-light transition">
|
|
<input type="checkbox" id="isActive" name="is_active" checked
|
|
class="w-5 h-5 text-navy border-2 border-slate-300 rounded focus:ring-navy focus:ring-offset-2">
|
|
<span class="text-navy font-medium">{% trans "Active" %}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="bg-slate-50 border-t border-slate-100 px-6 py-4 flex justify-end gap-3">
|
|
<button id="cancelAddModal" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-white hover:text-navy transition">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button id="saveMapping" class="px-4 py-2 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
|
|
<i data-lucide="save" class="w-4 h-4"></i> {% trans "Save Mapping" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 shadow-xl overflow-hidden">
|
|
<!-- Modal Header -->
|
|
<div class="bg-red-50 border-b border-red-100 px-6 py-4 flex justify-between items-center">
|
|
<h3 class="text-xl font-bold text-red-700 flex items-center gap-2">
|
|
<i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
|
|
{% trans "Confirm Delete" %}
|
|
</h3>
|
|
<button id="cancelDeleteModal" class="text-red-400 hover:text-red-700 transition p-1 hover:bg-red-100 rounded-lg">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="p-6">
|
|
<div class="text-center">
|
|
<p class="text-slate mb-4">{% trans "Are you sure you want to delete this mapping?" %}</p>
|
|
<p id="deleteMappingName" class="font-bold text-navy bg-light/50 p-3 rounded-xl inline-block"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="bg-slate-50 border-t border-slate-100 px-6 py-4 flex justify-end gap-3">
|
|
<button id="cancelDeleteBtn" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-white hover:text-navy transition">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button id="confirmDelete" class="px-4 py-2 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition flex items-center gap-2">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<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 addMappingBtnEmpty = document.getElementById('addMappingBtnEmpty');
|
|
const closeAddModal = document.getElementById('closeAddModal');
|
|
const cancelAddModal = document.getElementById('cancelAddModal');
|
|
const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
|
|
const cancelDeleteModal = document.getElementById('cancelDeleteModal');
|
|
|
|
// Show/Hide modal helper functions
|
|
function showModal(modal) {
|
|
modal.classList.remove('hidden');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function hideModal(modal) {
|
|
modal.classList.add('hidden');
|
|
}
|
|
|
|
// Event listeners for modal controls
|
|
if (addMappingBtn) addMappingBtn.addEventListener('click', () => showModal(addModal));
|
|
if (addMappingBtnEmpty) addMappingBtnEmpty.addEventListener('click', () => showModal(addModal));
|
|
closeAddModal.addEventListener('click', () => hideModal(addModal));
|
|
cancelAddModal.addEventListener('click', () => hideModal(addModal));
|
|
cancelDeleteBtn.addEventListener('click', () => hideModal(deleteModal));
|
|
cancelDeleteModal.addEventListener('click', () => hideModal(deleteModal));
|
|
|
|
// Close modal when clicking outside
|
|
addModal.addEventListener('click', (e) => {
|
|
if (e.target === addModal.querySelector('.modal-backdrop')) hideModal(addModal);
|
|
});
|
|
deleteModal.addEventListener('click', (e) => {
|
|
if (e.target === deleteModal.querySelector('.modal-backdrop')) hideModal(deleteModal);
|
|
});
|
|
|
|
// Load survey templates when hospital changes
|
|
document.getElementById('hospital').addEventListener('change', function() {
|
|
const hospitalId = this.value;
|
|
const surveyTemplateSelect = document.getElementById('surveyTemplate');
|
|
|
|
// Get any pending value BEFORE clearing options
|
|
const pendingValue = surveyTemplateSelect.dataset.pendingValue;
|
|
|
|
// Clear existing options
|
|
surveyTemplateSelect.innerHTML = '<option value="">{% trans "Select Survey Template" %}</option>';
|
|
|
|
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 pending value after loading (if it was set before the fetch)
|
|
if (pendingValue) {
|
|
surveyTemplateSelect.value = pendingValue;
|
|
surveyTemplateSelect.dataset.pendingValue = '';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading survey templates:', error);
|
|
});
|
|
}
|
|
});
|
|
|
|
// 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').innerHTML = `
|
|
<i data-lucide="layers" class="w-6 h-6 text-blue"></i> {% trans "Edit Survey Template Mapping" %}
|
|
`;
|
|
|
|
// Trigger hospital change to load survey templates
|
|
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) {
|
|
const csrfToken = getCookie('csrftoken');
|
|
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) {
|
|
event.preventDefault();
|
|
|
|
const form = document.getElementById('mappingForm');
|
|
|
|
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
|
|
};
|
|
|
|
const url = mappingId ? `${API_URL}${mappingId}/` : API_URL;
|
|
const method = mappingId ? 'PUT' : 'POST';
|
|
|
|
const saveButton = this;
|
|
const originalContent = saveButton.innerHTML;
|
|
saveButton.disabled = true;
|
|
saveButton.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> {% trans "Saving..." %}';
|
|
lucide.createIcons();
|
|
|
|
const csrfToken = getCookie('csrftoken');
|
|
if (!csrfToken) {
|
|
alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
|
|
saveButton.disabled = false;
|
|
saveButton.innerHTML = originalContent;
|
|
lucide.createIcons();
|
|
return;
|
|
}
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error(JSON.stringify(err));
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
hideModal(addModal);
|
|
location.reload();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error saving mapping:', error);
|
|
alert('{% trans "Error saving mapping" %}: ' + error.message);
|
|
saveButton.disabled = false;
|
|
saveButton.innerHTML = originalContent;
|
|
lucide.createIcons();
|
|
});
|
|
});
|
|
|
|
// Reset modal on close
|
|
addModal.addEventListener('hidden', function() {
|
|
document.getElementById('mappingForm').reset();
|
|
document.getElementById('mappingId').value = '';
|
|
document.getElementById('mappingModalTitle').innerHTML = `
|
|
<i data-lucide="layers" class="w-6 h-6 text-blue"></i> {% trans "Add Survey Template Mapping" %}
|
|
`;
|
|
lucide.createIcons();
|
|
});
|
|
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %}
|