466 lines
21 KiB
HTML
466 lines
21 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Acknowledgement Checklist Items" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<!-- Page Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="h3 mb-2">
|
|
<i class="bi bi-list-check me-2"></i>
|
|
{% trans "Checklist Items Management" %}
|
|
</h1>
|
|
<p class="text-muted mb-0">
|
|
{% trans "Manage acknowledgement checklist items" %}
|
|
</p>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createChecklistItemModal">
|
|
<i class="bi bi-plus me-2"></i>
|
|
{% trans "Add Checklist Item" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checklist Items List -->
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-white py-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">
|
|
<i class="bi bi-list me-2"></i>
|
|
{% trans "Checklist Items" %}
|
|
</h5>
|
|
<div class="input-group" style="max-width: 300px;">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="{% trans 'Search items...' %}">
|
|
<button class="btn btn-outline-secondary" type="button">
|
|
<i class="bi bi-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0 align-middle" id="itemsTable">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>{% trans "Item Text" %}</th>
|
|
<th>{% trans "Role" %}</th>
|
|
<th>{% trans "Linked Content" %}</th>
|
|
<th>{% trans "Required" %}</th>
|
|
<th>{% trans "Order" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "Created" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in checklist_items %}
|
|
<tr>
|
|
<td>
|
|
<strong>{{ item.text_en }}</strong>
|
|
{% if item.code %}
|
|
<span class="badge bg-light text-muted ms-2">{{ item.code }}</span>
|
|
{% endif %}
|
|
{% if item.description_en %}
|
|
<p class="small text-muted mb-0 mt-1">{{ item.description_en }}</p>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if item.role %}
|
|
<span class="badge bg-info text-dark">
|
|
{{ item.get_role_display }}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{% trans "All Roles" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if item.content %}
|
|
<span class="badge bg-light text-dark">
|
|
{{ item.content.title_en }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-center">
|
|
{% if item.is_required %}
|
|
<span class="badge bg-danger">
|
|
<i class="bi bi-exclamation-circle me-1"></i>
|
|
{% trans "Yes" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{% trans "No" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ item.order }}</td>
|
|
<td>
|
|
{% if item.is_active %}
|
|
<span class="badge bg-success">
|
|
<i class="bi bi-check me-1"></i>
|
|
{% trans "Active" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">
|
|
<i class="bi bi-x me-1"></i>
|
|
{% trans "Inactive" %}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<small>{{ item.created_at|date:"M d, Y" }}</small>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-sm btn-outline-primary" title="{% trans 'Edit' %}">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" title="{% trans 'Delete' %}">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="8" class="text-center py-5">
|
|
<i class="bi bi-clipboard-data fa-3x text-muted mb-3"></i>
|
|
<p class="text-muted mb-0">
|
|
{% trans "No checklist items found" %}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Search functionality
|
|
document.getElementById('searchInput').addEventListener('keyup', function() {
|
|
const searchValue = this.value.toLowerCase();
|
|
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';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- Create Checklist Item Modal -->
|
|
<div class="modal fade" id="createChecklistItemModal" tabindex="-1" aria-labelledby="createChecklistItemModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createChecklistItemModalLabel">
|
|
<i class="bi bi-plus-circle me-2"></i>
|
|
{% trans "Add New Checklist Item" %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="createChecklistItemForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- Code -->
|
|
<div class="mb-3">
|
|
<label for="code" class="form-label">
|
|
<i class="bi bi-tag me-1"></i>
|
|
{% trans "Code" %} <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="code" name="code" required>
|
|
<div class="form-text">{% trans "Unique identifier for this item (e.g., CLINIC_P1)" %}</div>
|
|
</div>
|
|
|
|
<!-- Role -->
|
|
<div class="mb-3">
|
|
<label for="role" class="form-label">
|
|
<i class="bi bi-person-badge me-1"></i>
|
|
{% trans "Role" %}
|
|
</label>
|
|
<select class="form-select" id="role" name="role">
|
|
<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 class="form-text">{% trans "Leave empty to apply to all roles" %}</div>
|
|
</div>
|
|
|
|
<!-- Linked Content -->
|
|
<div class="mb-3">
|
|
<label for="content" class="form-label">
|
|
<i class="bi bi-file-text me-1"></i>
|
|
{% trans "Linked Content" %}
|
|
</label>
|
|
<select class="form-select" id="content" name="content">
|
|
<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 class="form-text">{% trans "Optional content section to link with this item" %}</div>
|
|
</div>
|
|
|
|
<!-- Text (English) -->
|
|
<div class="mb-3">
|
|
<label for="text_en" class="form-label">
|
|
<i class="bi bi-fonts me-1"></i>
|
|
{% trans "Text (English)" %} <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="text_en" name="text_en" required>
|
|
<div class="form-text">{% trans "Main text for the checklist item" %}</div>
|
|
</div>
|
|
|
|
<!-- Text (Arabic) -->
|
|
<div class="mb-3">
|
|
<label for="text_ar" class="form-label">
|
|
<i class="bi bi-fonts me-1"></i>
|
|
{% trans "Text (Arabic)" %}
|
|
</label>
|
|
<input type="text" class="form-control" id="text_ar" name="text_ar" dir="rtl">
|
|
<div class="form-text">{% trans "Arabic translation (optional)" %}</div>
|
|
</div>
|
|
|
|
<!-- Description (English) -->
|
|
<div class="mb-3">
|
|
<label for="description_en" class="form-label">
|
|
<i class="bi bi-card-text me-1"></i>
|
|
{% trans "Description (English)" %}
|
|
</label>
|
|
<textarea class="form-control" id="description_en" name="description_en" rows="3"></textarea>
|
|
<div class="form-text">{% trans "Additional details (optional)" %}</div>
|
|
</div>
|
|
|
|
<!-- Description (Arabic) -->
|
|
<div class="mb-3">
|
|
<label for="description_ar" class="form-label">
|
|
<i class="bi bi-card-text me-1"></i>
|
|
{% trans "Description (Arabic)" %}
|
|
</label>
|
|
<textarea class="form-control" id="description_ar" name="description_ar" rows="3" dir="rtl"></textarea>
|
|
<div class="form-text">{% trans "Arabic translation (optional)" %}</div>
|
|
</div>
|
|
|
|
<!-- Configuration -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="is_required" class="form-label">
|
|
<i class="bi bi-check-circle me-1"></i>
|
|
{% trans "Required" %}
|
|
</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="is_required" name="is_required" checked>
|
|
<label class="form-check-label" for="is_required">
|
|
{% trans "Item must be acknowledged" %}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="is_active" class="form-label">
|
|
<i class="bi bi-toggle-on me-1"></i>
|
|
{% trans "Active" %}
|
|
</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
|
|
<label class="form-check-label" for="is_active">
|
|
{% trans "Item is visible" %}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order -->
|
|
<div class="mb-3">
|
|
<label for="order" class="form-label">
|
|
<i class="bi bi-sort-numeric-down me-1"></i>
|
|
{% trans "Display Order" %}
|
|
</label>
|
|
<input type="number" class="form-control" id="order" name="order" value="0" min="0">
|
|
<div class="form-text">{% trans "Order in which this item appears (lower = first)" %}</div>
|
|
</div>
|
|
|
|
<!-- Error Alert -->
|
|
<div class="alert alert-danger d-none" id="formError" role="alert">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
<span id="formErrorMessage"></span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-circle me-2"></i>
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="saveChecklistItemBtn" onclick="saveChecklistItem()">
|
|
<i class="bi bi-save me-2"></i>
|
|
<span id="saveBtnText">{% trans "Save Item" %}</span>
|
|
<span class="spinner-border spinner-border-sm d-none" id="saveBtnSpinner" role="status"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Search functionality
|
|
document.getElementById('searchInput').addEventListener('keyup', function() {
|
|
const searchValue = this.value.toLowerCase();
|
|
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';
|
|
}
|
|
});
|
|
|
|
// Save checklist item
|
|
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('d-none');
|
|
|
|
// Validate form
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
// 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('d-none');
|
|
|
|
try {
|
|
// Get CSRF token
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
|
|
|
// Send API request
|
|
const response = await fetch('/api/accounts/onboarding/checklist/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const responseData = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Close modal
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('createChecklistItemModal'));
|
|
modal.hide();
|
|
|
|
// Show success message
|
|
showAlert('{% trans "Checklist item created successfully!" %}', 'success');
|
|
|
|
// Reload page to show new item
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1000);
|
|
} else {
|
|
// Show error
|
|
errorMessage.textContent = responseData.error || responseData.detail || '{% trans "Failed to create checklist item" %}';
|
|
errorAlert.classList.remove('d-none');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
errorMessage.textContent = '{% trans "An error occurred. Please try again." %}';
|
|
errorAlert.classList.remove('d-none');
|
|
} finally {
|
|
// Reset button state
|
|
saveBtn.disabled = false;
|
|
saveBtnText.textContent = '{% trans "Save Item" %}';
|
|
saveBtnSpinner.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
// Show alert message
|
|
function showAlert(message, type = 'info') {
|
|
// Create alert element
|
|
const alert = document.createElement('div');
|
|
alert.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3`;
|
|
alert.style.zIndex = '9999';
|
|
alert.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
// Add to body
|
|
document.body.appendChild(alert);
|
|
|
|
// Auto dismiss after 3 seconds
|
|
setTimeout(() => {
|
|
alert.classList.remove('show');
|
|
setTimeout(() => alert.remove(), 150);
|
|
}, 3000);
|
|
}
|
|
|
|
// Reset form when modal is hidden
|
|
document.getElementById('createChecklistItemModal').addEventListener('hidden.bs.modal', function() {
|
|
const form = document.getElementById('createChecklistItemForm');
|
|
form.reset();
|
|
document.getElementById('formError').classList.add('d-none');
|
|
});
|
|
</script>
|
|
{% endblock %}
|