516 lines
25 KiB
HTML
516 lines
25 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Note Templates{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.template-badge {
|
|
font-size: 0.85rem;
|
|
padding: 0.35em 0.65em;
|
|
}
|
|
.template-type-progress {
|
|
background-color: var(--bs-primary);
|
|
color: white;
|
|
}
|
|
.template-type-admission {
|
|
background-color: var(--bs-danger);
|
|
color: white;
|
|
}
|
|
.template-type-discharge {
|
|
background-color: var(--bs-success);
|
|
color: white;
|
|
}
|
|
.template-type-procedure {
|
|
background-color: var(--bs-warning);
|
|
color: white;
|
|
}
|
|
.template-type-consultation {
|
|
background-color: var(--bs-info);
|
|
color: white;
|
|
}
|
|
.template-card {
|
|
transition: all 0.2s;
|
|
height: 100%;
|
|
}
|
|
.template-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.template-card .card-footer {
|
|
background-color: transparent;
|
|
border-top: 1px solid var(--bs-gray-200);
|
|
}
|
|
.template-card .card-body {
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.template-actions {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
display: none;
|
|
}
|
|
.template-card:hover .template-actions {
|
|
display: block;
|
|
}
|
|
.view-toggle-btn.active {
|
|
background-color: var(--bs-light);
|
|
border-color: var(--bs-gray-400);
|
|
}
|
|
.filter-section {
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--bs-gray-300);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- begin breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
|
|
<li class="breadcrumb-item active">Note Templates</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">Note Templates <small>Standardized clinical documentation templates</small></h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-12 -->
|
|
<div class="col-xl-12">
|
|
<!-- begin panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Template Management</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<!-- begin filter section -->
|
|
<div class="filter-section">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-search"></i></span>
|
|
<input type="text" class="form-control" id="templateSearch" placeholder="Search templates by title, description, or content...">
|
|
<button class="btn btn-primary" type="button" id="searchBtn">Search</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-secondary view-toggle-btn active" data-view="grid">
|
|
<i class="fa fa-th-large"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary view-toggle-btn" data-view="list">
|
|
<i class="fa fa-list"></i>
|
|
</button>
|
|
</div>
|
|
<a href="{% url 'emr:note_template_create' %}" class="btn btn-success ms-2">
|
|
<i class="fa fa-plus me-1"></i> New Template
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="filterType">
|
|
<option value="">All Note Types</option>
|
|
<option value="PROGRESS">Progress Note</option>
|
|
<option value="ADMISSION">Admission Note</option>
|
|
<option value="DISCHARGE">Discharge Summary</option>
|
|
<option value="PROCEDURE">Procedure Note</option>
|
|
<option value="CONSULTATION">Consultation Note</option>
|
|
<option value="OTHER">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="filterDepartment">
|
|
<option value="">All Departments</option>
|
|
{% for department in departments %}
|
|
<option value="{{ department.id }}">{{ department.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="filterSpecialty">
|
|
<option value="">All Specialties</option>
|
|
{% for specialty in specialties %}
|
|
<option value="{{ specialty.id }}">{{ specialty.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="sortBy">
|
|
<option value="title">Sort by Title</option>
|
|
<option value="created_at">Sort by Date Created</option>
|
|
<option value="updated_at">Sort by Last Updated</option>
|
|
<option value="usage_count">Sort by Usage Count</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end filter section -->
|
|
|
|
<!-- begin stats section -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats bg-blue">
|
|
<div class="stats-icon"><i class="fa fa-file-alt"></i></div>
|
|
<div class="stats-info">
|
|
<h4>Total Templates</h4>
|
|
<p>{{ templates.count }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="javascript:;">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats bg-info">
|
|
<div class="stats-icon"><i class="fa fa-star"></i></div>
|
|
<div class="stats-info">
|
|
<h4>Most Used Template</h4>
|
|
<p>{{ most_used_template.title|default:"None" }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="javascript:;">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats bg-orange">
|
|
<div class="stats-icon"><i class="fa fa-clock"></i></div>
|
|
<div class="stats-info">
|
|
<h4>Recently Updated</h4>
|
|
<p>{{ recently_updated_count }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="javascript:;">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats bg-red">
|
|
<div class="stats-icon"><i class="fa fa-exclamation-triangle"></i></div>
|
|
<div class="stats-info">
|
|
<h4>Outdated Templates</h4>
|
|
<p>{{ outdated_templates_count }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="javascript:;">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end stats section -->
|
|
|
|
<!-- begin grid view -->
|
|
<div id="gridView">
|
|
<div class="row" id="templateGrid">
|
|
{% for template in templates %}
|
|
<div class="col-md-4 mb-4 template-item"
|
|
data-type="{{ template.note_type }}"
|
|
data-department="{{ template.department.id|default:'' }}"
|
|
data-specialty="{{ template.specialty.id|default:'' }}">
|
|
<div class="card template-card">
|
|
<div class="card-body">
|
|
<div class="template-actions">
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-default dropdown-toggle" type="button" id="dropdownMenuButton{{ template.id }}" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="fa fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ template.id }}">
|
|
<li><a class="dropdown-item" href="{% url 'emr:note_template_detail' template.id %}"><i class="fa fa-eye me-2"></i> View</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'emr:note_template_update' template.id %}"><i class="fa fa-edit me-2"></i> Edit</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'emr:note_template_duplicate' template.id %}"><i class="fa fa-copy me-2"></i> Duplicate</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'emr:note_template_delete' template.id %}"><i class="fa fa-trash me-2"></i> Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="card-title mb-2">{{ template.title }}</h5>
|
|
<span class="badge template-type-{{ template.note_type|lower }} mb-2">{{ template.get_note_type_display }}</span>
|
|
<p class="card-text text-muted mb-2">{{ template.description|truncatechars:100 }}</p>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<small class="text-muted">v{{ template.version }}</small>
|
|
<small class="text-muted">Used {{ template.usage_count }} times</small>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">Updated {{ template.updated_at|date:"M d, Y" }}</small>
|
|
<a href="{% url 'emr:note_template_detail' template.id %}" class="btn btn-sm btn-primary">
|
|
<i class="fa fa-eye me-1"></i> View
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-12">
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No note templates found. <a href="{% url 'emr:note_template_create' %}">Create your first template</a>.
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- end grid view -->
|
|
|
|
<!-- begin list view -->
|
|
<div id="listView" style="display: none;">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered" id="templateTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Type</th>
|
|
<th>Department</th>
|
|
<th>Specialty</th>
|
|
<th>Version</th>
|
|
<th>Last Updated</th>
|
|
<th>Usage Count</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for template in templates %}
|
|
<tr class="template-item"
|
|
data-type="{{ template.note_type }}"
|
|
data-department="{{ template.department.id|default:'' }}"
|
|
data-specialty="{{ template.specialty.id|default:'' }}">
|
|
<td>{{ template.title }}</td>
|
|
<td>
|
|
<span class="badge template-type-{{ template.note_type|lower }}">{{ template.get_note_type_display }}</span>
|
|
</td>
|
|
<td>{{ template.department.name|default:"All Departments" }}</td>
|
|
<td>{{ template.specialty.name|default:"All Specialties" }}</td>
|
|
<td>v{{ template.version }}</td>
|
|
<td>{{ template.updated_at|date:"M d, Y" }}</td>
|
|
<td>{{ template.usage_count }}</td>
|
|
<td>
|
|
<a href="{% url 'emr:note_template_detail' template.id %}" class="btn btn-sm btn-primary" data-bs-toggle="tooltip" title="View">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a href="{% url 'emr:note_template_update' template.id %}" class="btn btn-sm btn-info" data-bs-toggle="tooltip" title="Edit">
|
|
<i class="fa fa-edit"></i>
|
|
</a>
|
|
<a href="{% url 'emr:note_template_duplicate' template.id %}" class="btn btn-sm btn-success" data-bs-toggle="tooltip" title="Duplicate">
|
|
<i class="fa fa-copy"></i>
|
|
</a>
|
|
<a href="{% url 'emr:note_template_delete' template.id %}" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" title="Delete">
|
|
<i class="fa fa-trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="8" class="text-center">No note templates found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- end list view -->
|
|
|
|
<!-- begin pagination -->
|
|
<div class="d-flex justify-content-between align-items-center mt-4">
|
|
<div>
|
|
Showing <span id="visibleCount">{{ templates.count }}</span> of {{ templates.count }} templates
|
|
</div>
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<!-- end pagination -->
|
|
</div>
|
|
</div>
|
|
<!-- end panel -->
|
|
</div>
|
|
<!-- end col-12 -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<!-- begin template preview modal -->
|
|
<div class="modal fade" id="templatePreviewModal" tabindex="-1" aria-labelledby="templatePreviewModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="templatePreviewModalLabel">Template Preview</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="templatePreviewContent"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<a href="#" id="useTemplateBtn" class="btn btn-primary">Use Template</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end template preview modal -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize tooltips
|
|
$('[data-bs-toggle="tooltip"]').tooltip();
|
|
|
|
// View toggle
|
|
$('.view-toggle-btn').click(function() {
|
|
$('.view-toggle-btn').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
const view = $(this).data('view');
|
|
if (view === 'grid') {
|
|
$('#gridView').show();
|
|
$('#listView').hide();
|
|
} else {
|
|
$('#gridView').hide();
|
|
$('#listView').show();
|
|
}
|
|
});
|
|
|
|
// Filter function
|
|
function filterTemplates() {
|
|
const searchTerm = $('#templateSearch').val().toLowerCase();
|
|
const filterType = $('#filterType').val();
|
|
const filterDepartment = $('#filterDepartment').val();
|
|
const filterSpecialty = $('#filterSpecialty').val();
|
|
|
|
let visibleCount = 0;
|
|
|
|
$('.template-item').each(function() {
|
|
const title = $(this).find('.card-title, td:first-child').text().toLowerCase();
|
|
const description = $(this).find('.card-text').text().toLowerCase();
|
|
const type = $(this).data('type');
|
|
const department = $(this).data('department').toString();
|
|
const specialty = $(this).data('specialty').toString();
|
|
|
|
const matchesSearch = title.includes(searchTerm) || description.includes(searchTerm);
|
|
const matchesType = filterType === '' || type === filterType;
|
|
const matchesDepartment = filterDepartment === '' || department === filterDepartment;
|
|
const matchesSpecialty = filterSpecialty === '' || specialty === filterSpecialty;
|
|
|
|
if (matchesSearch && matchesType && matchesDepartment && matchesSpecialty) {
|
|
$(this).show();
|
|
visibleCount++;
|
|
} else {
|
|
$(this).hide();
|
|
}
|
|
});
|
|
|
|
$('#visibleCount').text(visibleCount);
|
|
}
|
|
|
|
// Sort function
|
|
function sortTemplates() {
|
|
const sortBy = $('#sortBy').val();
|
|
const gridItems = $('#templateGrid .template-item').get();
|
|
const listItems = $('#templateTable tbody tr').get();
|
|
|
|
// Sort grid items
|
|
gridItems.sort(function(a, b) {
|
|
let valueA, valueB;
|
|
|
|
if (sortBy === 'title') {
|
|
valueA = $(a).find('.card-title').text().toLowerCase();
|
|
valueB = $(b).find('.card-title').text().toLowerCase();
|
|
return valueA.localeCompare(valueB);
|
|
} else if (sortBy === 'created_at' || sortBy === 'updated_at') {
|
|
valueA = new Date($(a).find('small.text-muted:contains("Updated")').text().replace('Updated ', ''));
|
|
valueB = new Date($(b).find('small.text-muted:contains("Updated")').text().replace('Updated ', ''));
|
|
return valueB - valueA; // Descending order for dates
|
|
} else if (sortBy === 'usage_count') {
|
|
valueA = parseInt($(a).find('small.text-muted:contains("Used")').text().replace('Used ', '').replace(' times', ''));
|
|
valueB = parseInt($(b).find('small.text-muted:contains("Used")').text().replace('Used ', '').replace(' times', ''));
|
|
return valueB - valueA; // Descending order for usage count
|
|
}
|
|
|
|
return 0;
|
|
});
|
|
|
|
// Sort list items
|
|
listItems.sort(function(a, b) {
|
|
let valueA, valueB;
|
|
|
|
if (sortBy === 'title') {
|
|
valueA = $(a).find('td:first-child').text().toLowerCase();
|
|
valueB = $(b).find('td:first-child').text().toLowerCase();
|
|
return valueA.localeCompare(valueB);
|
|
} else if (sortBy === 'created_at' || sortBy === 'updated_at') {
|
|
valueA = new Date($(a).find('td:nth-child(6)').text());
|
|
valueB = new Date($(b).find('td:nth-child(6)').text());
|
|
return valueB - valueA; // Descending order for dates
|
|
} else if (sortBy === 'usage_count') {
|
|
valueA = parseInt($(a).find('td:nth-child(7)').text());
|
|
valueB = parseInt($(b).find('td:nth-child(7)').text());
|
|
return valueB - valueA; // Descending order for usage count
|
|
}
|
|
|
|
return 0;
|
|
});
|
|
|
|
// Reappend sorted items
|
|
$('#templateGrid').append(gridItems);
|
|
$('#templateTable tbody').append(listItems);
|
|
}
|
|
|
|
// Event listeners
|
|
$('#templateSearch, #filterType, #filterDepartment, #filterSpecialty').on('change keyup', filterTemplates);
|
|
$('#searchBtn').click(filterTemplates);
|
|
$('#sortBy').change(sortTemplates);
|
|
|
|
// Template preview
|
|
$('.template-preview-btn').click(function() {
|
|
const templateId = $(this).data('template-id');
|
|
|
|
// AJAX call to get template content
|
|
$.ajax({
|
|
url: `/emr/note-templates/${templateId}/preview/`,
|
|
type: 'GET',
|
|
success: function(data) {
|
|
$('#templatePreviewContent').html(data.content);
|
|
$('#templatePreviewModalLabel').text(data.title);
|
|
$('#useTemplateBtn').attr('href', `/emr/clinical-notes/create/?template=${templateId}`);
|
|
$('#templatePreviewModal').modal('show');
|
|
},
|
|
error: function() {
|
|
alert('Error loading template preview');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|