301 lines
13 KiB
HTML
301 lines
13 KiB
HTML
{% load static %}
|
|
|
|
<div class="problem-list-container">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0">Problem List</h5>
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
<button type="button" class="btn btn-outline-primary active" data-filter="all">All</button>
|
|
<button type="button" class="btn btn-outline-primary" data-filter="active">Active</button>
|
|
<button type="button" class="btn btn-outline-primary" data-filter="resolved">Resolved</button>
|
|
<button type="button" class="btn btn-outline-primary" data-filter="inactive">Inactive</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="fa fa-search"></i></span>
|
|
<input type="text" class="form-control" id="problemSearch" placeholder="Search problems...">
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-bordered table-hover" id="problemListTable">
|
|
<thead>
|
|
<tr>
|
|
<th width="5%">#</th>
|
|
<th width="30%">Problem</th>
|
|
<th width="15%">Status</th>
|
|
<th width="15%">Onset Date</th>
|
|
<th width="15%">Resolution Date</th>
|
|
<th width="20%">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for problem in problems %}
|
|
<tr class="problem-row" data-status="{{ problem.status|lower }}">
|
|
<td>{{ forloop.counter }}</td>
|
|
<td>
|
|
<strong>{{ problem.problem_name }}</strong>
|
|
{% if problem.icd_code %}
|
|
<br><small class="text-muted">ICD: {{ problem.icd_code }}</small>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if problem.status == 'ACTIVE' %}
|
|
<span class="badge bg-success">Active</span>
|
|
{% elif problem.status == 'RESOLVED' %}
|
|
<span class="badge bg-primary">Resolved</span>
|
|
{% elif problem.status == 'INACTIVE' %}
|
|
<span class="badge bg-warning">Inactive</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ problem.onset_date|date:"M d, Y" }}</td>
|
|
<td>
|
|
{% if problem.resolution_date %}
|
|
{{ problem.resolution_date|date:"M d, Y" }}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="{% url 'emr:problem_detail' problem.id %}" class="btn btn-primary" data-bs-toggle="tooltip" title="View">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a href="{% url 'emr:problem_update' problem.id %}" class="btn btn-info" data-bs-toggle="tooltip" title="Edit">
|
|
<i class="fa fa-edit"></i>
|
|
</a>
|
|
{% if problem.status == 'ACTIVE' %}
|
|
<button type="button" class="btn btn-success resolve-problem-btn" data-problem-id="{{ problem.id }}" data-bs-toggle="tooltip" title="Resolve">
|
|
<i class="fa fa-check"></i>
|
|
</button>
|
|
{% endif %}
|
|
<button type="button" class="btn btn-secondary add-note-btn" data-problem-id="{{ problem.id }}" data-bs-toggle="tooltip" title="Add Note">
|
|
<i class="fa fa-file-alt"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="6" class="text-center">No problems recorded</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div>
|
|
<span class="badge bg-success me-1">Active: {{ active_count }}</span>
|
|
<span class="badge bg-primary me-1">Resolved: {{ resolved_count }}</span>
|
|
<span class="badge bg-warning me-1">Inactive: {{ inactive_count }}</span>
|
|
</div>
|
|
<a href="{% url 'emr:problem_create' %}?patient_id={{ patient.id }}" class="btn btn-sm btn-success">
|
|
<i class="fa fa-plus me-1"></i> Add Problem
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resolve Problem Modal -->
|
|
<div class="modal fade" id="resolveProblemModal" tabindex="-1" aria-labelledby="resolveProblemModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="resolveProblemModalLabel">Resolve Problem</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="resolveProblemForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="problemId" name="problem_id">
|
|
|
|
<div class="mb-3">
|
|
<label for="resolutionDate" class="form-label">Resolution Date</label>
|
|
<input type="date" class="form-control" id="resolutionDate" name="resolution_date" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="resolutionNotes" class="form-label">Resolution Notes</label>
|
|
<textarea class="form-control" id="resolutionNotes" name="resolution_notes" rows="3"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" id="confirmResolveBtn">Resolve Problem</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Note Modal -->
|
|
<div class="modal fade" id="addNoteModal" tabindex="-1" aria-labelledby="addNoteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addNoteModalLabel">Add Note to Problem</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addNoteForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="noteProblemId" name="problem_id">
|
|
|
|
<div class="mb-3">
|
|
<label for="noteText" class="form-label">Note</label>
|
|
<textarea class="form-control" id="noteText" name="note_text" rows="5" required></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirmAddNoteBtn">Add Note</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize tooltips
|
|
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// Filter buttons
|
|
document.querySelectorAll('[data-filter]').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// Remove active class from all buttons
|
|
document.querySelectorAll('[data-filter]').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
|
|
// Add active class to clicked button
|
|
this.classList.add('active');
|
|
|
|
const filter = this.dataset.filter;
|
|
filterProblems(filter);
|
|
});
|
|
});
|
|
|
|
// Search functionality
|
|
document.getElementById('problemSearch').addEventListener('keyup', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
const rows = document.querySelectorAll('#problemListTable tbody tr.problem-row');
|
|
|
|
rows.forEach(row => {
|
|
const problemName = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
|
|
if (problemName.includes(searchTerm)) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Resolve problem button
|
|
document.querySelectorAll('.resolve-problem-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const problemId = this.dataset.problemId;
|
|
document.getElementById('problemId').value = problemId;
|
|
|
|
// Set default resolution date to today
|
|
const today = new Date().toISOString().split('T')[0];
|
|
document.getElementById('resolutionDate').value = today;
|
|
|
|
// Show modal
|
|
const resolveProblemModal = new bootstrap.Modal(document.getElementById('resolveProblemModal'));
|
|
resolveProblemModal.show();
|
|
});
|
|
});
|
|
|
|
// Add note button
|
|
document.querySelectorAll('.add-note-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const problemId = this.dataset.problemId;
|
|
document.getElementById('noteProblemId').value = problemId;
|
|
|
|
// Show modal
|
|
const addNoteModal = new bootstrap.Modal(document.getElementById('addNoteModal'));
|
|
addNoteModal.show();
|
|
});
|
|
});
|
|
|
|
// Confirm resolve button
|
|
document.getElementById('confirmResolveBtn').addEventListener('click', function() {
|
|
const form = document.getElementById('resolveProblemForm');
|
|
const formData = new FormData(form);
|
|
|
|
// AJAX request to resolve problem
|
|
fetch('{% url "emr:problem_resolve" %}', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Close modal
|
|
bootstrap.Modal.getInstance(document.getElementById('resolveProblemModal')).hide();
|
|
|
|
// Refresh problem list
|
|
window.location.reload();
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred while resolving the problem.');
|
|
});
|
|
});
|
|
|
|
// Confirm add note button
|
|
document.getElementById('confirmAddNoteBtn').addEventListener('click', function() {
|
|
const form = document.getElementById('addNoteForm');
|
|
const formData = new FormData(form);
|
|
|
|
// AJAX request to add note
|
|
fetch('{% url "emr:problem_add_note" %}', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Close modal
|
|
bootstrap.Modal.getInstance(document.getElementById('addNoteModal')).hide();
|
|
|
|
// Show success message
|
|
alert('Note added successfully!');
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred while adding the note.');
|
|
});
|
|
});
|
|
|
|
// Function to filter problems by status
|
|
function filterProblems(filter) {
|
|
const rows = document.querySelectorAll('#problemListTable tbody tr.problem-row');
|
|
|
|
rows.forEach(row => {
|
|
if (filter === 'all' || row.dataset.status === filter) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|