620 lines
29 KiB
HTML
620 lines
29 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{% if object %}Edit Patient - {{ object.get_full_name }}{% else %}Register New Patient{% endif %} - {{ block.super }}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1">
|
|
<i class="fas fa-user-plus me-2"></i>
|
|
{% if object %}Edit Patient{% else %}Register New Patient{% endif %}
|
|
</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'patients:patient_list' %}">Patients</a></li>
|
|
{% if object %}
|
|
<li class="breadcrumb-item"><a href="{% url 'patients:patient_detail' object.pk %}">{{ object.get_full_name }}</a></li>
|
|
<li class="breadcrumb-item active">Edit</li>
|
|
{% else %}
|
|
<li class="breadcrumb-item active">Register</li>
|
|
{% endif %}
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a href="{% url 'patients:patient_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to List
|
|
</a>
|
|
{% if object %}
|
|
<a href="{% url 'patients:patient_detail' object.pk %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-eye me-2"></i>View Patient
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" enctype="multipart/form-data" id="patientForm" novalidate>
|
|
{% csrf_token %}
|
|
|
|
<div class="row">
|
|
<!-- Main Form -->
|
|
<div class="col-lg-8">
|
|
<!-- Basic Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-user me-2"></i>Basic Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.first_name.id_for_label }}" class="form-label">
|
|
First Name <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.first_name }}
|
|
{% if form.first_name.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.first_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.middle_name.id_for_label }}" class="form-label">Middle Name</label>
|
|
{{ form.middle_name }}
|
|
{% if form.middle_name.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.middle_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.last_name.id_for_label }}" class="form-label">
|
|
Last Name <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.last_name }}
|
|
{% if form.last_name.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.last_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.preferred_name.id_for_label }}" class="form-label">Preferred Name</label>
|
|
{{ form.preferred_name }}
|
|
{% if form.preferred_name.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.preferred_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.suffix.id_for_label }}" class="form-label">Suffix</label>
|
|
{{ form.suffix }}
|
|
{% if form.suffix.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.suffix.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.mrn.id_for_label }}" class="form-label">
|
|
Medical Record Number <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.mrn }}
|
|
{% if form.mrn.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.mrn.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Demographics -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-id-card me-2"></i>Demographics
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.date_of_birth.id_for_label }}" class="form-label">
|
|
Date of Birth <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.date_of_birth }}
|
|
{% if form.date_of_birth.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.date_of_birth.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.gender.id_for_label }}" class="form-label">
|
|
Gender <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.gender }}
|
|
{% if form.gender.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.gender.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.sex_assigned_at_birth.id_for_label }}" class="form-label">Sex Assigned at Birth</label>
|
|
{{ form.sex_assigned_at_birth }}
|
|
{% if form.sex_assigned_at_birth.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.sex_assigned_at_birth.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.race.id_for_label }}" class="form-label">Race</label>
|
|
{{ form.race }}
|
|
{% if form.race.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.race.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.ethnicity.id_for_label }}" class="form-label">Ethnicity</label>
|
|
{{ form.ethnicity }}
|
|
{% if form.ethnicity.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.ethnicity.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.marital_status.id_for_label }}" class="form-label">Marital Status</label>
|
|
{{ form.marital_status }}
|
|
{% if form.marital_status.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.marital_status.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-phone me-2"></i>Contact Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.email.id_for_label }}" class="form-label">Email Address</label>
|
|
{{ form.email }}
|
|
{% if form.email.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.email.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="{{ form.phone_number.id_for_label }}" class="form-label">Phone Number</label>
|
|
{{ form.phone_number }}
|
|
{% if form.phone_number.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.phone_number.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="{{ form.mobile_number.id_for_label }}" class="form-label">Mobile Number</label>
|
|
{{ form.mobile_number }}
|
|
{% if form.mobile_number.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.mobile_number.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.address_line_1.id_for_label }}" class="form-label">Address Line 1</label>
|
|
{{ form.address_line_1 }}
|
|
{% if form.address_line_1.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.address_line_1.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.address_line_2.id_for_label }}" class="form-label">Address Line 2</label>
|
|
{{ form.address_line_2 }}
|
|
{% if form.address_line_2.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.address_line_2.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.city.id_for_label }}" class="form-label">City</label>
|
|
{{ form.city }}
|
|
{% if form.city.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.city.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.state.id_for_label }}" class="form-label">State</label>
|
|
{{ form.state }}
|
|
{% if form.state.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.state.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.zip_code.id_for_label }}" class="form-label">ZIP Code</label>
|
|
{{ form.zip_code }}
|
|
{% if form.zip_code.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.zip_code.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Medical Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-stethoscope me-2"></i>Medical Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.primary_care_physician.id_for_label }}" class="form-label">Primary Care Physician</label>
|
|
{{ form.primary_care_physician }}
|
|
{% if form.primary_care_physician.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.primary_care_physician.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.referring_physician.id_for_label }}" class="form-label">Referring Physician</label>
|
|
{{ form.referring_physician }}
|
|
{% if form.referring_physician.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.referring_physician.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.allergies.id_for_label }}" class="form-label">Known Allergies</label>
|
|
{{ form.allergies }}
|
|
{% if form.allergies.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.allergies.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="form-text">List any known allergies, medications, or substances</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.medical_alerts.id_for_label }}" class="form-label">Medical Alerts</label>
|
|
{{ form.medical_alerts }}
|
|
{% if form.medical_alerts.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.medical_alerts.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="form-text">Important medical warnings or alerts</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Photo Upload -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-camera me-2"></i>Patient Photo
|
|
</h5>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
{% if object and object.photo %}
|
|
<img src="{{ object.photo.url }}" alt="Patient Photo" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
|
|
{% else %}
|
|
<div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 150px; height: 150px;">
|
|
<i class="fas fa-user fa-4x text-muted"></i>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-3">
|
|
{{ form.photo }}
|
|
{% if form.photo.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.photo.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="form-text">
|
|
Upload a patient photo (optional)<br>
|
|
Recommended: 300x300px, JPG/PNG format
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Language & Communication -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-language me-2"></i>Language & Communication
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="{{ form.primary_language.id_for_label }}" class="form-label">Primary Language</label>
|
|
{{ form.primary_language }}
|
|
{% if form.primary_language.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.primary_language.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.communication_preference.id_for_label }}" class="form-label">Communication Preference</label>
|
|
{{ form.communication_preference }}
|
|
{% if form.communication_preference.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.communication_preference.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
{{ form.interpreter_needed }}
|
|
<label class="form-check-label" for="{{ form.interpreter_needed.id_for_label }}">
|
|
Interpreter services needed
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Special Flags -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-flag me-2"></i>Special Flags
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-check mb-2">
|
|
{{ form.is_vip }}
|
|
<label class="form-check-label" for="{{ form.is_vip.id_for_label }}">
|
|
VIP Patient
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check mb-2">
|
|
{{ form.confidential_patient }}
|
|
<label class="form-check-label" for="{{ form.confidential_patient.id_for_label }}">
|
|
Confidential Patient
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check mb-2">
|
|
{{ form.has_advance_directive }}
|
|
<label class="form-check-label" for="{{ form.has_advance_directive.id_for_label }}">
|
|
Has Advance Directive
|
|
</label>
|
|
</div>
|
|
|
|
{% if form.advance_directive_type %}
|
|
<div class="mb-3" id="advanceDirectiveType" style="display: none;">
|
|
<label for="{{ form.advance_directive_type.id_for_label }}" class="form-label">Advance Directive Type</label>
|
|
{{ form.advance_directive_type }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-2"></i>
|
|
{% if object %}Update Patient{% else %}Register Patient{% endif %}
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
|
|
<i class="fas fa-undo me-2"></i>Reset Form
|
|
</button>
|
|
|
|
<a href="{% url 'patients:patient_list' %}" class="btn btn-outline-danger">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</a>
|
|
</div>
|
|
|
|
{% if object %}
|
|
<hr>
|
|
<div class="text-center">
|
|
<small class="text-muted">
|
|
Created: {{ object.created_at|date:"M d, Y H:i" }}<br>
|
|
Last Updated: {{ object.updated_at|date:"M d, Y H:i" }}
|
|
</small>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
// Form validation and interactions
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Show/hide advance directive type based on checkbox
|
|
const hasAdvanceDirective = document.getElementById('{{ form.has_advance_directive.id_for_label }}');
|
|
const advanceDirectiveType = document.getElementById('advanceDirectiveType');
|
|
|
|
if (hasAdvanceDirective && advanceDirectiveType) {
|
|
function toggleAdvanceDirectiveType() {
|
|
if (hasAdvanceDirective.checked) {
|
|
advanceDirectiveType.style.display = 'block';
|
|
} else {
|
|
advanceDirectiveType.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
hasAdvanceDirective.addEventListener('change', toggleAdvanceDirectiveType);
|
|
toggleAdvanceDirectiveType(); // Initial state
|
|
}
|
|
|
|
// Form validation
|
|
const form = document.getElementById('patientForm');
|
|
form.addEventListener('submit', function(event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
});
|
|
|
|
// Auto-format phone numbers
|
|
const phoneInputs = document.querySelectorAll('input[type="tel"]');
|
|
phoneInputs.forEach(function(input) {
|
|
input.addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
if (value.length >= 6) {
|
|
value = value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
} else if (value.length >= 3) {
|
|
value = value.replace(/(\d{3})(\d{3})/, '($1) $2');
|
|
}
|
|
e.target.value = value;
|
|
});
|
|
});
|
|
|
|
// Auto-format SSN
|
|
const ssnInput = document.querySelector('input[name="ssn"]');
|
|
if (ssnInput) {
|
|
ssnInput.addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
if (value.length >= 5) {
|
|
value = value.replace(/(\d{3})(\d{2})(\d{4})/, '$1-$2-$3');
|
|
} else if (value.length >= 3) {
|
|
value = value.replace(/(\d{3})(\d{2})/, '$1-$2');
|
|
}
|
|
e.target.value = value;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Reset form function
|
|
function resetForm() {
|
|
if (confirm('Are you sure you want to reset the form? All unsaved changes will be lost.')) {
|
|
document.getElementById('patientForm').reset();
|
|
document.getElementById('patientForm').classList.remove('was-validated');
|
|
}
|
|
}
|
|
|
|
// Auto-save functionality (optional)
|
|
let autoSaveTimer;
|
|
function autoSave() {
|
|
clearTimeout(autoSaveTimer);
|
|
autoSaveTimer = setTimeout(function() {
|
|
// Implement auto-save logic here if needed
|
|
console.log('Auto-saving form...');
|
|
}, 30000); // Auto-save every 30 seconds
|
|
}
|
|
|
|
// Trigger auto-save on form changes
|
|
document.getElementById('patientForm').addEventListener('input', autoSave);
|
|
</script>
|
|
|
|
<style>
|
|
.form-control, .form-select {
|
|
border-radius: 0.375rem;
|
|
border: 1px solid #ced4da;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: #86b7fe;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 0.375rem;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.invalid-feedback {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-text {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|