206 lines
11 KiB
HTML
206 lines
11 KiB
HTML
{% load i18n %}
|
|
{% comment %}
|
|
Unified Send Modal - Works for Complaints, Inquiries, and Observations
|
|
Usage: Include this in any detail page and call showSendModal() via JavaScript
|
|
|
|
Required context variables:
|
|
- item_id: The ID of the complaint/inquiry/observation
|
|
- item_type: 'complaint', 'inquiry', or 'observation'
|
|
- departments: QuerySet of available departments
|
|
- users: QuerySet of available users
|
|
{% endcomment %}
|
|
|
|
<div id="sendToModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg animate-in">
|
|
<div class="p-6 border-b border-slate-200">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-xl font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="send" class="w-5 h-5"></i>
|
|
{% trans "Send To" %}
|
|
</h3>
|
|
<button type="button" onclick="closeSendModal()" class="text-slate-400 hover:text-slate-600 transition">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-slate mt-2">{% trans "Select a person or department to send this item to for response." %}</p>
|
|
</div>
|
|
|
|
<form id="sendToForm" onsubmit="handleSendToSubmit(event)">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="sendItemId" name="item_id" value="">
|
|
<input type="hidden" id="sendItemType" name="item_type" value="">
|
|
|
|
<div class="p-6">
|
|
<!-- Recipient Type Tabs -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-navy mb-2">{% trans "Send To" %}</label>
|
|
<div class="flex gap-2">
|
|
<label class="flex-1 flex items-center gap-2 px-4 py-3 border-2 rounded-xl cursor-pointer transition-all border-navy bg-navy/5 text-navy font-semibold text-sm" id="recipientLabelPerson" onclick="switchRecipientType('person')">
|
|
<input type="radio" name="recipient_type" value="person" checked class="accent-navy" onchange="switchRecipientType('person')">
|
|
<i data-lucide="user" class="w-4 h-4"></i>
|
|
{% trans "Person" %}
|
|
</label>
|
|
<label class="flex-1 flex items-center gap-2 px-4 py-3 border-2 rounded-xl cursor-pointer transition-all border-slate-200 text-slate-500 text-sm" id="recipientLabelDepartment" onclick="switchRecipientType('department')">
|
|
<input type="radio" name="recipient_type" value="department" class="accent-navy" onchange="switchRecipientType('department')">
|
|
<i data-lucide="building-2" class="w-4 h-4"></i>
|
|
{% trans "Department" %}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Person Selection -->
|
|
<div id="personSection" class="mb-4">
|
|
<label class="block text-sm font-semibold text-navy mb-2">{% trans "Select Person" %} <span class="text-red-500">*</span></label>
|
|
<select name="person_id" id="personSelect" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 text-sm">
|
|
<option value="">{% trans "Select Person" %}</option>
|
|
{% for user in users %}
|
|
<option value="{{ user.id }}">{{ user.get_full_name|default:user.email }} {% if user.department %}({{ user.department.name }}){% endif %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Department Selection -->
|
|
<div id="departmentSection" class="mb-4 hidden">
|
|
<label class="block text-sm font-semibold text-navy mb-2">{% trans "Select Department" %} <span class="text-red-500">*</span></label>
|
|
<select name="department_id" id="departmentSelect" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 text-sm">
|
|
<option value="">{% trans "Select Department" %}</option>
|
|
{% for dept in departments %}
|
|
<option value="{{ dept.id }}">{{ dept.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-navy mb-2">{% trans "Note (Optional)" %}</label>
|
|
<textarea name="note" id="sendNote" rows="3"
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 resize-none text-sm"
|
|
placeholder="{% trans 'Add context or instructions...' %}"></textarea>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div id="sendError" class="hidden text-sm text-red-600 bg-red-50 border border-red-200 p-3 rounded-lg"></div>
|
|
<div id="sendSuccess" class="hidden text-sm text-green-600 bg-green-50 border border-green-200 p-3 rounded-lg"></div>
|
|
</div>
|
|
|
|
<div class="p-6 border-t border-slate-200 flex gap-3">
|
|
<button type="submit" id="sendSubmitBtn" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-navy/90 transition text-sm inline-flex items-center justify-center gap-2 flex-1 justify-center">
|
|
<i data-lucide="send" class="w-4 h-4"></i>
|
|
{% trans "Send" %}
|
|
</button>
|
|
<button type="button" onclick="closeSendModal()" class="px-4 py-2.5 bg-white border-2 border-slate-200 rounded-xl font-semibold text-slate-600 hover:bg-slate-50 transition text-sm">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Unified Send Modal Functions
|
|
function showSendModal(itemId, itemType) {
|
|
document.getElementById('sendItemId').value = itemId;
|
|
document.getElementById('sendItemType').value = itemType;
|
|
document.getElementById('sendToModal').classList.remove('hidden');
|
|
document.getElementById('sendError').classList.add('hidden');
|
|
document.getElementById('sendSuccess').classList.add('hidden');
|
|
document.getElementById('sendToForm').reset();
|
|
switchRecipientType('person');
|
|
}
|
|
|
|
function closeSendModal() {
|
|
document.getElementById('sendToModal').classList.add('hidden');
|
|
}
|
|
|
|
function switchRecipientType(type) {
|
|
const personSection = document.getElementById('personSection');
|
|
const departmentSection = document.getElementById('departmentSection');
|
|
const personLabel = document.getElementById('recipientLabelPerson');
|
|
const deptLabel = document.getElementById('recipientLabelDepartment');
|
|
|
|
if (type === 'person') {
|
|
personSection.classList.remove('hidden');
|
|
departmentSection.classList.add('hidden');
|
|
personLabel.classList.add('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
|
|
personLabel.classList.remove('border-slate-200', 'text-slate-500');
|
|
deptLabel.classList.add('border-slate-200', 'text-slate-500');
|
|
deptLabel.classList.remove('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
|
|
} else {
|
|
personSection.classList.add('hidden');
|
|
departmentSection.classList.remove('hidden');
|
|
deptLabel.classList.add('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
|
|
deptLabel.classList.remove('border-slate-200', 'text-slate-500');
|
|
personLabel.classList.add('border-slate-200', 'text-slate-500');
|
|
personLabel.classList.remove('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
|
|
}
|
|
}
|
|
|
|
function handleSendToSubmit(event) {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
const formData = new FormData(form);
|
|
const itemType = document.getElementById('sendItemType').value;
|
|
const errorDiv = document.getElementById('sendError');
|
|
const successDiv = document.getElementById('sendSuccess');
|
|
const submitBtn = document.getElementById('sendSubmitBtn');
|
|
|
|
// Validate
|
|
const recipientType = formData.get('recipient_type');
|
|
if (recipientType === 'person' && !formData.get('person_id')) {
|
|
errorDiv.textContent = '{% trans "Please select a person." %}';
|
|
errorDiv.classList.remove('hidden');
|
|
return;
|
|
}
|
|
if (recipientType === 'department' && !formData.get('department_id')) {
|
|
errorDiv.textContent = '{% trans "Please select a department." %}';
|
|
errorDiv.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
errorDiv.classList.add('hidden');
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>{% trans "Sending..." %}';
|
|
|
|
// Determine endpoint based on item type
|
|
let endpoint = '';
|
|
if (itemType === 'complaint') {
|
|
endpoint = '/complaints/' + formData.get('item_id') + '/send-to/';
|
|
} else if (itemType === 'inquiry') {
|
|
endpoint = '/inquiries/' + formData.get('item_id') + '/send-to/';
|
|
} else if (itemType === 'observation') {
|
|
endpoint = '/observations/' + formData.get('item_id') + '/send-to/';
|
|
}
|
|
|
|
fetch(endpoint, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
successDiv.textContent = data.message || '{% trans "Sent successfully!" %}';
|
|
successDiv.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
closeSendModal();
|
|
window.location.reload();
|
|
}, 1500);
|
|
} else {
|
|
throw new Error(data.error || '{% trans "Failed to send." %}');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
errorDiv.textContent = error.message;
|
|
errorDiv.classList.remove('hidden');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i>{% trans "Send" %}';
|
|
});
|
|
}
|
|
</script>
|