566 lines
26 KiB
HTML
566 lines
26 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{% if form.instance.id %}Edit Problem: {{ form.instance.problem_name }}{% else %}New Problem{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.form-floating > .form-control:focus ~ label,
|
|
.form-floating > .form-control:not(:placeholder-shown) ~ label,
|
|
.form-floating > .form-select ~ label {
|
|
opacity: .65;
|
|
transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
|
|
}
|
|
.form-floating > label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
padding: 1rem 0.75rem;
|
|
pointer-events: none;
|
|
border: 1px solid transparent;
|
|
transform-origin: 0 0;
|
|
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
|
|
}
|
|
.form-section {
|
|
padding: 1.5rem;
|
|
border-radius: 0.5rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.form-section-title {
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--bs-gray-300);
|
|
}
|
|
.required-field label::after {
|
|
content: " *";
|
|
color: var(--bs-danger);
|
|
}
|
|
.help-sidebar {
|
|
position: sticky;
|
|
top: 1rem;
|
|
}
|
|
.help-card {
|
|
transition: all 0.2s;
|
|
}
|
|
.help-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
</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"><a href="{% url 'emr:problem_list' %}">Problems</a></li>
|
|
<li class="breadcrumb-item active">
|
|
{% if form.instance.id %}Edit Problem{% else %}New Problem{% endif %}
|
|
</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">
|
|
{% if form.instance.id %}
|
|
Edit Problem <small>Update problem information</small>
|
|
{% else %}
|
|
New Problem <small>Create a new patient problem</small>
|
|
{% endif %}
|
|
</h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-9 -->
|
|
<div class="col-xl-9">
|
|
<!-- begin panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
{% if form.instance.id %}
|
|
Edit Problem: {{ form.instance.problem_name }}
|
|
{% else %}
|
|
Problem Information
|
|
{% endif %}
|
|
</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">
|
|
<form method="post" id="problemForm">
|
|
{% csrf_token %}
|
|
|
|
{% if form.errors %}
|
|
<div class="alert alert-danger">
|
|
<strong>Error!</strong> Please correct the errors below.
|
|
{% if form.non_field_errors %}
|
|
<ul>
|
|
{% for error in form.non_field_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Basic Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Basic Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.patient }}
|
|
<label for="{{ form.patient.id_for_label }}">Patient</label>
|
|
</div>
|
|
{% if form.patient.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.problem_name }}
|
|
<label for="{{ form.problem_name.id_for_label }}">Problem Name</label>
|
|
</div>
|
|
{% if form.problem_name.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.problem_name.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.problem_type }}
|
|
<label for="{{ form.problem_type.id_for_label }}">Problem Type</label>
|
|
</div>
|
|
{% if form.problem_type.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.problem_type.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.related_encounter }}
|
|
<label for="{{ form.related_encounter.id_for_label }}">Related Encounter</label>
|
|
</div>
|
|
{% if form.related_encounter.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.related_encounter.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coding Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Coding Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.problem_code }}
|
|
<label for="{{ form.problem_code.id_for_label }}">Problem Code</label>
|
|
</div>
|
|
{% if form.problem_code.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.problem_code.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.coding_system }}
|
|
<label for="{{ form.coding_system.id_for_label }}">Coding System</label>
|
|
</div>
|
|
{% if form.coding_system.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.coding_system.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clinical Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Clinical Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.severity }}
|
|
<label for="{{ form.severity.id_for_label }}">Severity</label>
|
|
</div>
|
|
{% if form.severity.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.severity.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.priority }}
|
|
<label for="{{ form.priority.id_for_label }}">Priority</label>
|
|
</div>
|
|
{% if form.priority.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.priority.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.status }}
|
|
<label for="{{ form.status.id_for_label }}">Status</label>
|
|
</div>
|
|
{% if form.status.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.status.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.onset_date }}
|
|
<label for="{{ form.onset_date.id_for_label }}">Onset Date</label>
|
|
</div>
|
|
{% if form.onset_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.onset_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.onset_description }}
|
|
<label for="{{ form.onset_description.id_for_label }}">Onset Description</label>
|
|
</div>
|
|
{% if form.onset_description.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.onset_description.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.body_site }}
|
|
<label for="{{ form.body_site.id_for_label }}">Body Site</label>
|
|
</div>
|
|
{% if form.body_site.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.body_site.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.laterality }}
|
|
<label for="{{ form.laterality.id_for_label }}">Laterality</label>
|
|
</div>
|
|
{% if form.laterality.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.laterality.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row status-resolved-fields" style="display: none;">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.resolution_date }}
|
|
<label for="{{ form.resolution_date.id_for_label }}">Resolution Date</label>
|
|
</div>
|
|
{% if form.resolution_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.resolution_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.resolution_notes }}
|
|
<label for="{{ form.resolution_notes.id_for_label }}">Resolution Notes</label>
|
|
</div>
|
|
{% if form.resolution_notes.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.resolution_notes.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Provider Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Provider Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.diagnosing_provider }}
|
|
<label for="{{ form.diagnosing_provider.id_for_label }}">Diagnosing Provider</label>
|
|
</div>
|
|
{% if form.diagnosing_provider.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.diagnosing_provider.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.managing_provider }}
|
|
<label for="{{ form.managing_provider.id_for_label }}">Managing Provider</label>
|
|
</div>
|
|
{% if form.managing_provider.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.managing_provider.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Notes & Documentation</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.clinical_notes.id_for_label }}">Clinical Notes</label>
|
|
{{ form.clinical_notes }}
|
|
{% if form.clinical_notes.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.clinical_notes.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.patient_concerns.id_for_label }}">Patient Concerns</label>
|
|
{{ form.patient_concerns }}
|
|
{% if form.patient_concerns.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_concerns.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Goals & Outcomes Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Goals & Outcomes</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.treatment_goals.id_for_label }}">Treatment Goals</label>
|
|
{{ form.treatment_goals }}
|
|
{% if form.treatment_goals.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.treatment_goals.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.outcome_measures.id_for_label }}">Outcome Measures</label>
|
|
{{ form.outcome_measures }}
|
|
{% if form.outcome_measures.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.outcome_measures.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verification Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Verification</h5>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-check form-switch">
|
|
{{ form.verified }}
|
|
<label class="form-check-label" for="{{ form.verified.id_for_label }}">Verified</label>
|
|
</div>
|
|
{% if form.verified.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.verified.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-8 mb-3 verified-fields" style="display: none;">
|
|
<div class="form-floating">
|
|
{{ form.verified_by }}
|
|
<label for="{{ form.verified_by.id_for_label }}">Verified By</label>
|
|
</div>
|
|
{% if form.verified_by.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.verified_by.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<a href="{% url 'emr:problem_list' %}" class="btn btn-secondary">
|
|
<i class="fa fa-arrow-left me-1"></i> Cancel
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fa fa-save me-1"></i>
|
|
{% if form.instance.id %}Update Problem{% else %}Create Problem{% endif %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- end panel -->
|
|
</div>
|
|
<!-- end col-9 -->
|
|
|
|
<!-- begin col-3 -->
|
|
<div class="col-xl-3">
|
|
<!-- begin help sidebar -->
|
|
<div class="help-sidebar">
|
|
<!-- Quick Tips Card -->
|
|
<div class="card mb-3 help-card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fa fa-lightbulb me-1"></i> Quick Tips
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="ps-3">
|
|
<li class="mb-2">Fields marked with <span class="text-danger">*</span> are required.</li>
|
|
<li class="mb-2">Use ICD-10 codes when available for standardized documentation.</li>
|
|
<li class="mb-2">Set appropriate priority to ensure proper attention to critical problems.</li>
|
|
<li class="mb-2">Include specific body site and laterality for physical conditions.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Problem Types Card -->
|
|
<div class="card mb-3 help-card">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fa fa-info-circle me-1"></i> Problem Types
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<dl>
|
|
<dt>Diagnosis</dt>
|
|
<dd>Confirmed medical condition</dd>
|
|
|
|
<dt>Finding</dt>
|
|
<dd>Clinical observation without definitive diagnosis</dd>
|
|
|
|
<dt>Symptom</dt>
|
|
<dd>Patient-reported subjective experience</dd>
|
|
|
|
<dt>Complaint</dt>
|
|
<dd>Patient concern or issue</dd>
|
|
|
|
<dt>Condition</dt>
|
|
<dd>Health state requiring attention</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Information Card -->
|
|
<div class="card help-card">
|
|
<div class="card-header bg-success text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fa fa-check-circle me-1"></i> Status Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<dl>
|
|
<dt>Active</dt>
|
|
<dd>Current problem requiring attention</dd>
|
|
|
|
<dt>Resolved</dt>
|
|
<dd>Problem no longer present</dd>
|
|
|
|
<dt>Remission</dt>
|
|
<dd>Problem temporarily subsided</dd>
|
|
|
|
<dt>Recurrence</dt>
|
|
<dd>Problem has returned after resolution</dd>
|
|
|
|
<dt>Inactive</dt>
|
|
<dd>Problem still exists but not currently active</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end help sidebar -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize select2
|
|
$('.form-select').select2({
|
|
theme: 'bootstrap',
|
|
width: '100%'
|
|
});
|
|
|
|
// Initialize datepicker
|
|
$('.datepicker').datepicker({
|
|
format: 'yyyy-mm-dd',
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
});
|
|
|
|
// Show/hide resolution fields based on status
|
|
function toggleResolutionFields() {
|
|
var status = $('#{{ form.status.id_for_label }}').val();
|
|
if (status === 'RESOLVED' || status === 'REMISSION') {
|
|
$('.status-resolved-fields').show();
|
|
} else {
|
|
$('.status-resolved-fields').hide();
|
|
}
|
|
}
|
|
|
|
// Show/hide verified by field based on verified checkbox
|
|
function toggleVerifiedFields() {
|
|
if ($('#{{ form.verified.id_for_label }}').is(':checked')) {
|
|
$('.verified-fields').show();
|
|
} else {
|
|
$('.verified-fields').hide();
|
|
}
|
|
}
|
|
|
|
// Initial toggle
|
|
toggleResolutionFields();
|
|
toggleVerifiedFields();
|
|
|
|
// Toggle on change
|
|
$('#{{ form.status.id_for_label }}').change(toggleResolutionFields);
|
|
$('#{{ form.verified.id_for_label }}').change(toggleVerifiedFields);
|
|
|
|
// Form validation
|
|
$('#problemForm').submit(function(e) {
|
|
var isValid = true;
|
|
|
|
// Check required fields
|
|
$('.required-field select, .required-field input, .required-field textarea').each(function() {
|
|
if (!$(this).val()) {
|
|
$(this).addClass('is-invalid');
|
|
isValid = false;
|
|
} else {
|
|
$(this).removeClass('is-invalid');
|
|
}
|
|
});
|
|
|
|
// Check resolution date if status is resolved
|
|
var status = $('#{{ form.status.id_for_label }}').val();
|
|
if ((status === 'RESOLVED' || status === 'REMISSION') && !$('#{{ form.resolution_date.id_for_label }}').val()) {
|
|
$('#{{ form.resolution_date.id_for_label }}').addClass('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
// Check verified by if verified is checked
|
|
if ($('#{{ form.verified.id_for_label }}').is(':checked') && !$('#{{ form.verified_by.id_for_label }}').val()) {
|
|
$('#{{ form.verified_by.id_for_label }}').addClass('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
$('html, body').animate({
|
|
scrollTop: $('.is-invalid').first().offset().top - 100
|
|
}, 200);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|