389 lines
18 KiB
HTML
389 lines
18 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Survey Template Mappings" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h4 class="mb-0">{% trans "Survey Template Mappings" %}</h4>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addMappingModal">
|
|
<i class="fas fa-plus me-2"></i>{% trans "Add Mapping" %}
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted">
|
|
{% trans "Configure which survey templates are sent for each patient type at each hospital." %}
|
|
</p>
|
|
|
|
{% if mappings %}
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Hospital" %}</th>
|
|
<th>{% trans "Patient Type" %}</th>
|
|
<th>{% trans "Survey Template" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for mapping in mappings %}
|
|
<tr>
|
|
<td>{{ mapping.hospital.name }}</td>
|
|
<td>
|
|
<span class="badge bg-info">
|
|
{{ mapping.patient_type_display }}
|
|
</span>
|
|
<small class="text-muted d-block">({{ mapping.patient_type }})</small>
|
|
</td>
|
|
<td>{{ mapping.survey_template.name }}</td>
|
|
<td>
|
|
{% if mapping.is_active %}
|
|
<span class="badge bg-success">{% trans "Active" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{% trans "Inactive" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary edit-mapping"
|
|
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 class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger delete-mapping"
|
|
data-id="{{ mapping.id }}"
|
|
data-name="{{ mapping.patient_type_display }} - {{ mapping.survey_template.name }}">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
{% trans "No survey template mappings configured yet. Click 'Add Mapping' to create your first mapping." %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add/Edit Mapping Modal -->
|
|
<div class="modal fade" id="addMappingModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="mappingModalTitle">{% trans "Add Survey Template Mapping" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% csrf_token %}
|
|
<form id="mappingForm">
|
|
<input type="hidden" id="mappingId" name="id">
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="hospital" class="form-label">{% trans "Hospital" %} <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="hospital" name="hospital" required>
|
|
<option value="">{% trans "Select Hospital" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}">{{ hospital.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="surveyTemplate" class="form-label">{% trans "Survey Template" %} <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="surveyTemplate" name="survey_template" required>
|
|
<option value="">{% trans "Select Survey Template" %}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="patientType" class="form-label">{% trans "Patient Type" %} <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="patientType" name="patient_type" required>
|
|
<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 class="col-md-6">
|
|
<label for="isActive" class="form-label">{% trans "Status" %}</label>
|
|
<div class="form-check mt-2">
|
|
<input class="form-check-input" type="checkbox" id="isActive" name="is_active" checked>
|
|
<label class="form-check-label" for="isActive">{% trans "Active" %}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<button type="button" class="btn btn-primary" id="saveMapping">{% trans "Save Mapping" %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans "Confirm Delete" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>{% trans "Are you sure you want to delete this mapping?" %}</p>
|
|
<p class="fw-bold" id="deleteMappingName"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDelete">{% 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;
|
|
|
|
// 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 the 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 the 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() {
|
|
const modal = new bootstrap.Modal(document.getElementById('addMappingModal'));
|
|
|
|
// 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'));
|
|
|
|
modal.show();
|
|
});
|
|
});
|
|
|
|
// Delete mapping button
|
|
document.querySelectorAll('.delete-mapping').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
deleteMappingId = this.dataset.id;
|
|
document.getElementById('deleteMappingName').textContent = this.dataset.name;
|
|
new bootstrap.Modal(document.getElementById('deleteModal')).show();
|
|
});
|
|
});
|
|
|
|
// 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 me-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 = '{% 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
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('addMappingModal'));
|
|
modal.hide();
|
|
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 = '{% trans "Save Mapping" %}';
|
|
});
|
|
});
|
|
|
|
// Reset modal on close
|
|
document.getElementById('addMappingModal').addEventListener('hidden.bs.modal', 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;
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |