539 lines
29 KiB
HTML
539 lines
29 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Acknowledgement Checklist Items" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
|
|
<i data-lucide="list-checks" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-navy mb-1">
|
|
{% trans "Checklist Items" %}
|
|
</h2>
|
|
<p class="text-slate">{% trans "Manage acknowledgement checklist items" %}</p>
|
|
</div>
|
|
</div>
|
|
<button type="button" onclick="document.getElementById('createChecklistItemModal').classList.remove('hidden')"
|
|
class="bg-gradient-to-r from-blue to-navy text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 flex items-center gap-2">
|
|
<i data-lucide="plus" class="w-5 h-5"></i>
|
|
{% trans "Add Checklist Item" %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Checklist Items List -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
|
|
<div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<h3 class="font-bold text-navy flex items-center gap-2 text-lg">
|
|
<i data-lucide="clipboard-list" class="w-5 h-5 text-blue"></i>
|
|
{% trans "All Items" %}
|
|
</h3>
|
|
<div class="flex items-center gap-2 w-full md:w-auto">
|
|
<div class="relative flex-1 md:w-64">
|
|
<input type="text" id="searchInput" placeholder="{% trans 'Search items...' %}"
|
|
class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
value="{{ search_query|default:'' }}">
|
|
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full" id="itemsTable">
|
|
<thead class="bg-blue-50">
|
|
<tr>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Item Text" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Role" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Linked Content" %}</th>
|
|
<th class="px-6 py-4 text-center text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Required" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Order" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Status" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Created" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-blue-50">
|
|
{% for item in checklist_items %}
|
|
<tr class="hover:bg-blue-50/50 transition">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-start gap-2">
|
|
<div>
|
|
<strong class="text-navy font-bold">{{ item.text_en }}</strong>
|
|
{% if item.code %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-blue-100 text-blue-700 ml-2">{{ item.code }}</span>
|
|
{% endif %}
|
|
{% if item.description_en %}
|
|
<p class="text-sm text-slate mt-1">{{ item.description_en|truncatewords:15 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
{% if item.role %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
|
|
{{ item.get_role_display }}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{% trans "All Roles" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
{% if item.content %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-700">
|
|
{{ item.content.title_en|truncatechars:25 }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-slate">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
{% if item.is_required %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
|
|
<i data-lucide="alert-circle" class="w-3 h-3 mr-1"></i>
|
|
{% trans "Yes" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{% trans "No" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 text-navy font-semibold">{{ item.order }}</td>
|
|
<td class="px-6 py-4">
|
|
{% if item.is_active %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
|
|
<i data-lucide="check" class="w-3 h-3 mr-1"></i>
|
|
{% trans "Active" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
|
|
<i data-lucide="x" class="w-3 h-3 mr-1"></i>
|
|
{% trans "Inactive" %}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 text-slate text-sm">
|
|
{{ item.created_at|date:"M d, Y" }}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex gap-2">
|
|
<button type="button" onclick="editChecklistItem('{{ item.pk }}')" class="px-3 py-2 text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition font-medium text-sm" title="{% trans 'Edit' %}">
|
|
<i data-lucide="pencil" class="w-4 h-4"></i>
|
|
</button>
|
|
<button type="button" onclick="deleteChecklistItem('{{ item.pk }}')" class="px-3 py-2 text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition font-medium text-sm" title="{% trans 'Delete' %}">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="8" class="text-center py-12">
|
|
<div class="flex flex-col items-center">
|
|
<i data-lucide="clipboard-data" class="w-16 h-16 text-blue-200 mx-auto mb-4"></i>
|
|
<p class="text-slate font-medium">{% trans "No checklist items found" %}</p>
|
|
<button type="button" onclick="document.getElementById('createChecklistItemModal').classList.remove('hidden')"
|
|
class="mt-4 text-blue font-semibold hover:underline">
|
|
{% trans "Add your first checklist item" %}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Checklist Item Modal -->
|
|
<div id="createChecklistItemModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto m-4">
|
|
<div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex justify-between items-center sticky top-0 rounded-t-2xl">
|
|
<h3 class="font-bold text-navy flex items-center gap-2 text-lg">
|
|
<i data-lucide="plus-circle" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Add New Checklist Item" %}
|
|
</h3>
|
|
<button type="button" onclick="document.getElementById('createChecklistItemModal').classList.add('hidden')" class="text-slate hover:text-navy transition">
|
|
<i data-lucide="x" class="w-6 h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<form id="createChecklistItemForm">
|
|
{% csrf_token %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Code -->
|
|
<div>
|
|
<label for="code" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="tag" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Code" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" id="code" name="code" required
|
|
class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
placeholder="{% trans 'CLINIC_P1' %}">
|
|
</div>
|
|
|
|
<!-- Role -->
|
|
<div>
|
|
<label for="role" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="user-cog" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Role" %}
|
|
</label>
|
|
<select id="role" name="role" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
|
|
<option value="">{% trans "All Roles" %}</option>
|
|
<option value="px_admin">{% trans "PX Admin" %}</option>
|
|
<option value="hospital_admin">{% trans "Hospital Admin" %}</option>
|
|
<option value="department_manager">{% trans "Department Manager" %}</option>
|
|
<option value="px_coordinator">{% trans "PX Coordinator" %}</option>
|
|
<option value="physician">{% trans "Physician" %}</option>
|
|
<option value="nurse">{% trans "Nurse" %}</option>
|
|
<option value="staff">{% trans "Staff" %}</option>
|
|
<option value="viewer">{% trans "Viewer" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Linked Content -->
|
|
<div>
|
|
<label for="content" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="link" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Linked Content" %}
|
|
</label>
|
|
<select id="content" name="content" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
|
|
<option value="">{% trans "No linked content" %}</option>
|
|
{% for content_item in content_list %}
|
|
<option value="{{ content_item.id }}">{{ content_item.title_en }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Order -->
|
|
<div>
|
|
<label for="order" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="arrow-down-1-0" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Display Order" %}
|
|
</label>
|
|
<input type="number" id="order" name="order" value="0" min="0"
|
|
class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
|
|
</div>
|
|
|
|
<!-- Text (English) -->
|
|
<div class="md:col-span-2">
|
|
<label for="text_en" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="type" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Text (English)" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" id="text_en" name="text_en" required
|
|
class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
placeholder="{% trans 'Main text for the checklist item' %}">
|
|
</div>
|
|
|
|
<!-- Text (Arabic) -->
|
|
<div class="md:col-span-2">
|
|
<label for="text_ar" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="type" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Text (Arabic)" %}
|
|
</label>
|
|
<input type="text" id="text_ar" name="text_ar" dir="rtl"
|
|
class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
placeholder="{% trans 'Arabic translation' %}">
|
|
</div>
|
|
|
|
<!-- Description (English) -->
|
|
<div class="md:col-span-2">
|
|
<label for="description_en" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="file-text" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Description (English)" %}
|
|
</label>
|
|
<textarea id="description_en" name="description_en" rows="3"
|
|
class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
placeholder="{% trans 'Additional details' %}"></textarea>
|
|
</div>
|
|
|
|
<!-- Description (Arabic) -->
|
|
<div class="md:col-span-2">
|
|
<label for="description_ar" class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="file-text" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Description (Arabic)" %}
|
|
</label>
|
|
<textarea id="description_ar" name="description_ar" rows="3" dir="rtl"
|
|
class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
|
|
placeholder="{% trans 'Arabic translation' %}"></textarea>
|
|
</div>
|
|
|
|
<!-- Configuration -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-navy mb-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 inline mr-1 text-blue"></i>
|
|
{% trans "Configuration" %}
|
|
</label>
|
|
<div class="space-y-3">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" id="is_required" name="is_required" checked
|
|
class="w-5 h-5 text-blue border-blue-200 rounded focus:ring-2 focus:ring-blue">
|
|
<span class="text-navy font-medium">{% trans "Item must be acknowledged" %}</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" id="is_active" name="is_active" checked
|
|
class="w-5 h-5 text-blue border-blue-200 rounded focus:ring-2 focus:ring-blue">
|
|
<span class="text-navy font-medium">{% trans "Item is visible" %}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Alert -->
|
|
<div class="bg-red-50 border border-red-200 rounded-xl p-4 mt-6 hidden" id="formError">
|
|
<div class="flex items-center gap-2 text-red-700">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5"></i>
|
|
<span id="formErrorMessage"></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="px-6 py-4 border-t border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex justify-end gap-3 sticky bottom-0 rounded-b-2xl">
|
|
<button type="button" onclick="document.getElementById('createChecklistItemModal').classList.add('hidden')"
|
|
class="px-6 py-2.5 border-2 border-slate-200 text-slate-700 rounded-xl font-bold hover:bg-slate-50 transition flex items-center gap-2">
|
|
<i data-lucide="x-circle" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="button" onclick="saveChecklistItem()" id="saveChecklistItemBtn"
|
|
class="bg-gradient-to-r from-blue to-navy text-white px-6 py-2.5 rounded-xl font-bold hover:from-navy hover:to-blue transition flex items-center gap-2 shadow-lg shadow-blue-200">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
<span id="saveBtnText">{% trans "Save Item" %}</span>
|
|
<span class="animate-spin hidden" id="saveBtnSpinner">
|
|
<i data-lucide="loader-2" class="w-4 h-4"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
|
|
// Search functionality with debounce
|
|
let searchTimeout;
|
|
document.getElementById('searchInput').addEventListener('keyup', function() {
|
|
clearTimeout(searchTimeout);
|
|
const searchValue = this.value.toLowerCase();
|
|
searchTimeout = setTimeout(() => {
|
|
const table = document.getElementById('itemsTable');
|
|
const rows = table.getElementsByTagName('tr');
|
|
|
|
for (let i = 1; i < rows.length; i++) {
|
|
const row = rows[i];
|
|
const cells = row.getElementsByTagName('td');
|
|
let found = false;
|
|
|
|
for (let j = 0; j < cells.length; j++) {
|
|
const cellText = cells[j].textContent.toLowerCase();
|
|
if (cellText.includes(searchValue)) {
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
row.style.display = found ? '' : 'none';
|
|
}
|
|
}, 300);
|
|
});
|
|
});
|
|
|
|
// Save checklist item (create or update)
|
|
async function saveChecklistItem() {
|
|
const form = document.getElementById('createChecklistItemForm');
|
|
const saveBtn = document.getElementById('saveChecklistItemBtn');
|
|
const saveBtnText = document.getElementById('saveBtnText');
|
|
const saveBtnSpinner = document.getElementById('saveBtnSpinner');
|
|
const errorAlert = document.getElementById('formError');
|
|
const errorMessage = document.getElementById('formErrorMessage');
|
|
|
|
// Hide previous errors
|
|
errorAlert.classList.add('hidden');
|
|
|
|
// Validate form
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
// Check if we're editing an existing item
|
|
const editItemId = form.dataset.editItemId;
|
|
const isEditing = !!editItemId;
|
|
|
|
// Prepare form data
|
|
const formData = new FormData(form);
|
|
const data = {
|
|
code: formData.get('code'),
|
|
role: formData.get('role') || null,
|
|
content: formData.get('content') || null,
|
|
text_en: formData.get('text_en'),
|
|
text_ar: formData.get('text_ar'),
|
|
description_en: formData.get('description_en'),
|
|
description_ar: formData.get('description_ar'),
|
|
is_required: formData.get('is_required') === 'on',
|
|
is_active: formData.get('is_active') === 'on',
|
|
order: parseInt(formData.get('order')) || 0
|
|
};
|
|
|
|
// Show loading state
|
|
saveBtn.disabled = true;
|
|
saveBtnText.textContent = '{% trans "Saving..." %}';
|
|
saveBtnSpinner.classList.remove('hidden');
|
|
|
|
try {
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
|
|
|
// Use PUT for update, POST for create
|
|
const url = isEditing
|
|
? `/api/accounts/onboarding/checklist/${editItemId}/`
|
|
: '/api/accounts/onboarding/checklist/';
|
|
const method = isEditing ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const responseData = await response.json();
|
|
|
|
if (response.ok) {
|
|
document.getElementById('createChecklistItemModal').classList.add('hidden');
|
|
showAlert(isEditing
|
|
? '{% trans "Checklist item updated successfully!" %}'
|
|
: '{% trans "Checklist item created successfully!" %}', 'success');
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1000);
|
|
} else {
|
|
errorMessage.textContent = responseData.error || responseData.detail || '{% trans "Failed to save checklist item" %}';
|
|
errorAlert.classList.remove('hidden');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
errorMessage.textContent = '{% trans "An error occurred. Please try again." %}';
|
|
errorAlert.classList.remove('hidden');
|
|
} finally {
|
|
saveBtn.disabled = false;
|
|
saveBtnText.textContent = '{% trans "Save Item" %}';
|
|
saveBtnSpinner.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Show alert message
|
|
function showAlert(message, type = 'info') {
|
|
const alert = document.createElement('div');
|
|
const bgColor = type === 'success' ? 'bg-gradient-to-r from-emerald-500 to-emerald-600' : 'bg-gradient-to-r from-blue-500 to-blue-600';
|
|
alert.className = `${bgColor} text-white px-6 py-4 rounded-xl shadow-xl z-50 flex items-center gap-3 fixed top-4 right-4`;
|
|
alert.innerHTML = `
|
|
<i data-lucide="${type === 'success' ? 'check-circle' : 'info'}" class="w-5 h-5"></i>
|
|
<span class="font-semibold">${message}</span>
|
|
<button type="button" onclick="this.parentElement.remove()" class="text-white/80 hover:text-white">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
`;
|
|
|
|
document.body.appendChild(alert);
|
|
lucide.createIcons();
|
|
|
|
setTimeout(() => {
|
|
alert.remove();
|
|
}, 3000);
|
|
}
|
|
|
|
// Reset form when modal is hidden
|
|
document.getElementById('createChecklistItemModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
this.classList.add('hidden');
|
|
document.getElementById('createChecklistItemForm').reset();
|
|
document.getElementById('formError').classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Edit checklist item - fetch item data and populate modal
|
|
async function editChecklistItem(itemId) {
|
|
try {
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
|
|
|
const response = await fetch(`/api/accounts/onboarding/checklist/${itemId}/`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const item = await response.json();
|
|
|
|
// Populate form with existing data
|
|
document.getElementById('code').value = item.code || '';
|
|
document.getElementById('role').value = item.role || '';
|
|
document.getElementById('content').value = item.content || '';
|
|
document.getElementById('order').value = item.order || 0;
|
|
document.getElementById('text_en').value = item.text_en || '';
|
|
document.getElementById('text_ar').value = item.text_ar || '';
|
|
document.getElementById('description_en').value = item.description_en || '';
|
|
document.getElementById('description_ar').value = item.description_ar || '';
|
|
document.getElementById('is_required').checked = item.is_required !== false;
|
|
document.getElementById('is_active').checked = item.is_active !== false;
|
|
|
|
// Store item ID for update
|
|
document.getElementById('createChecklistItemForm').dataset.editItemId = itemId;
|
|
|
|
// Update modal title
|
|
document.querySelector('#createChecklistItemModal h3').innerHTML = '<i data-lucide="pencil" class="w-5 h-5 text-blue"></i> {% trans "Edit Checklist Item" %}';
|
|
|
|
// Show modal
|
|
document.getElementById('createChecklistItemModal').classList.remove('hidden');
|
|
lucide.createIcons();
|
|
} else {
|
|
showAlert('{% trans "Failed to load checklist item" %}', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
showAlert('{% trans "An error occurred loading the item" %}', 'error');
|
|
}
|
|
}
|
|
|
|
// Delete checklist item
|
|
async function deleteChecklistItem(itemId) {
|
|
if (!confirm('{% trans "Are you sure you want to delete this checklist item?" %}')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
|
|
|
const response = await fetch(`/api/accounts/onboarding/checklist/${itemId}/`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
}
|
|
});
|
|
|
|
if (response.ok || response.status === 204) {
|
|
showAlert('{% trans "Checklist item deleted successfully!" %}', 'success');
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1000);
|
|
} else {
|
|
const responseData = await response.json().catch(() => ({}));
|
|
showAlert(responseData.error || responseData.detail || '{% trans "Failed to delete checklist item" %}', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
showAlert('{% trans "An error occurred. Please try again." %}', 'error');
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|