696 lines
37 KiB
HTML
696 lines
37 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{% if form.instance.pk %}Edit Incident{% else %}Report New Incident{% endif %} - Quality Management
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'quality:dashboard' %}">Quality</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'quality:incident_list' %}">Incidents</a></li>
|
|
<li class="breadcrumb-item active">
|
|
{% if form.instance.pk %}Edit{% else %}Report New{% endif %}
|
|
</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">
|
|
{% if form.instance.pk %}
|
|
Edit Incident
|
|
<small>{{ form.instance.incident_number }} - {{ form.instance.title }}</small>
|
|
{% else %}
|
|
Report New Incident
|
|
<small>Quality and Safety Incident Reporting</small>
|
|
{% endif %}
|
|
</h1>
|
|
<!-- END page-header -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-9">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<i class="fa fa-exclamation-triangle me-2"></i>
|
|
Incident Information
|
|
</h4>
|
|
<div class="panel-heading-btn">
|
|
<button type="button" class="btn btn-xs btn-info me-2" onclick="saveDraft()">
|
|
<i class="fa fa-save"></i> Save Draft
|
|
</button>
|
|
<button type="button" class="btn btn-xs btn-success me-2" onclick="previewIncident()">
|
|
<i class="fa fa-eye"></i> Preview
|
|
</button>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<!-- Safety Notice -->
|
|
<div class="alert alert-info">
|
|
<h5 class="alert-heading">
|
|
<i class="fa fa-shield-alt me-2"></i>
|
|
Patient Safety Notice
|
|
</h5>
|
|
<p class="mb-0">
|
|
This form is for reporting quality and safety incidents. All information will be treated confidentially
|
|
and used for quality improvement purposes. If this is a medical emergency, please call 911 immediately.
|
|
</p>
|
|
</div>
|
|
|
|
<form method="post" enctype="multipart/form-data" id="incidentForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- Basic Information -->
|
|
<div class="card border-primary mb-4">
|
|
<div class="card-header bg-primary text-white">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-info-circle me-2"></i>Basic Information
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.title }}
|
|
<label for="{{ form.title.id_for_label }}">Incident Title *</label>
|
|
{% if form.title.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.title.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Brief, descriptive title of the incident</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.category }}
|
|
<label for="{{ form.category.id_for_label }}">Category *</label>
|
|
{% if form.category.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.category.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Type of incident category</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.incident_type }}
|
|
<label for="{{ form.incident_type.id_for_label }}">Incident Type *</label>
|
|
{% if form.incident_type.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.incident_type.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Specific type of incident</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.occurred_at }}
|
|
<label for="{{ form.occurred_at.id_for_label }}">Date & Time Occurred *</label>
|
|
{% if form.occurred_at.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.occurred_at.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">When did the incident occur?</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-floating mb-3">
|
|
{{ form.severity }}
|
|
<label for="{{ form.severity.id_for_label }}">Severity *</label>
|
|
{% if form.severity.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.severity.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Impact severity level</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-floating mb-3">
|
|
{{ form.priority }}
|
|
<label for="{{ form.priority.id_for_label }}">Priority *</label>
|
|
{% if form.priority.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.priority.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Response priority level</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-floating mb-3">
|
|
{{ form.status }}
|
|
<label for="{{ form.status.id_for_label }}">Status</label>
|
|
{% if form.status.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.status.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Current incident status</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location and Assignment -->
|
|
<div class="card border-info mb-4">
|
|
<div class="card-header bg-info text-white">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-map-marker-alt me-2"></i>Location & Assignment
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.department }}
|
|
<label for="{{ form.department.id_for_label }}">Department</label>
|
|
{% if form.department.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.department.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Department where incident occurred</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.location }}
|
|
<label for="{{ form.location.id_for_label }}">Specific Location</label>
|
|
{% if form.location.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.location.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Room number, area, or specific location</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.reported_by }}
|
|
<label for="{{ form.reported_by.id_for_label }}">Reported By</label>
|
|
{% if form.reported_by.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.reported_by.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Person reporting the incident</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.assigned_to }}
|
|
<label for="{{ form.assigned_to.id_for_label }}">Assigned To</label>
|
|
{% if form.assigned_to.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.assigned_to.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Person responsible for investigation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="card border-warning mb-4">
|
|
<div class="card-header bg-warning text-dark">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-file-text me-2"></i>Incident Description
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-floating mb-3">
|
|
{{ form.description }}
|
|
<label for="{{ form.description.id_for_label }}">Detailed Description *</label>
|
|
{% if form.description.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.description.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Provide a detailed description of what happened. Include who, what, when, where, and how.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-floating mb-3">
|
|
{{ form.immediate_action_taken }}
|
|
<label for="{{ form.immediate_action_taken.id_for_label }}">Immediate Action Taken</label>
|
|
{% if form.immediate_action_taken.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.immediate_action_taken.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Describe any immediate actions taken to address the incident
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Involvement -->
|
|
<div class="card border-danger mb-4">
|
|
<div class="card-header bg-danger text-white">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-user-injured me-2"></i>Patient Involvement
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
{{ form.patient_involved }}
|
|
<label class="form-check-label" for="{{ form.patient_involved.id_for_label }}">
|
|
Patient Involved in Incident
|
|
</label>
|
|
{% if form.patient_involved.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_involved.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
{{ form.patient_harm }}
|
|
<label class="form-check-label" for="{{ form.patient_harm.id_for_label }}">
|
|
Patient Harm Occurred
|
|
</label>
|
|
{% if form.patient_harm.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_harm.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="patientDetails" style="display: none;">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.patient }}
|
|
<label for="{{ form.patient.id_for_label }}">Patient</label>
|
|
{% if form.patient.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Select the patient involved</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.harm_level }}
|
|
<label for="{{ form.harm_level.id_for_label }}">Harm Level</label>
|
|
{% if form.harm_level.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.harm_level.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Level of harm to patient</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
{{ form.patient_notified }}
|
|
<label class="form-check-label" for="{{ form.patient_notified.id_for_label }}">
|
|
Patient/Family Notified
|
|
</label>
|
|
{% if form.patient_notified.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_notified.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
{{ form.external_reporting_required }}
|
|
<label class="form-check-label" for="{{ form.external_reporting_required.id_for_label }}">
|
|
External Reporting Required
|
|
</label>
|
|
{% if form.external_reporting_required.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.external_reporting_required.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-floating mb-3">
|
|
{{ form.patient_impact_description }}
|
|
<label for="{{ form.patient_impact_description.id_for_label }}">Patient Impact Description</label>
|
|
{% if form.patient_impact_description.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_impact_description.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Describe the impact on the patient
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Investigation Details -->
|
|
{% if form.instance.pk and form.instance.status != 'open' %}
|
|
<div class="card border-success mb-4">
|
|
<div class="card-header bg-success text-white">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-search me-2"></i>Investigation Details
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-3">
|
|
{{ form.investigator }}
|
|
<label for="{{ form.investigator.id_for_label }}">Investigator</label>
|
|
{% if form.investigator.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.investigator.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Person conducting investigation</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3 mt-3">
|
|
{{ form.root_cause_analysis }}
|
|
<label class="form-check-label" for="{{ form.root_cause_analysis.id_for_label }}">
|
|
Root Cause Analysis Performed
|
|
</label>
|
|
{% if form.root_cause_analysis.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.root_cause_analysis.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-floating mb-3">
|
|
{{ form.investigation_findings }}
|
|
<label for="{{ form.investigation_findings.id_for_label }}">Investigation Findings</label>
|
|
{% if form.investigation_findings.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.investigation_findings.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Summary of investigation findings
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-floating mb-3">
|
|
{{ form.root_cause }}
|
|
<label for="{{ form.root_cause.id_for_label }}">Root Cause</label>
|
|
{% if form.root_cause.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.root_cause.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Identified root cause of the incident
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-floating mb-3">
|
|
{{ form.contributing_factors }}
|
|
<label for="{{ form.contributing_factors.id_for_label }}">Contributing Factors</label>
|
|
{% if form.contributing_factors.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.contributing_factors.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Factors that contributed to the incident
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Resolution -->
|
|
{% if form.instance.pk and form.instance.status in 'resolved,closed' %}
|
|
<div class="card border-primary mb-4">
|
|
<div class="card-header bg-primary text-white">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-check-circle me-2"></i>Resolution
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-floating mb-3">
|
|
{{ form.resolution_summary }}
|
|
<label for="{{ form.resolution_summary.id_for_label }}">Resolution Summary</label>
|
|
{% if form.resolution_summary.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.resolution_summary.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Summary of how the incident was resolved
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-floating mb-3">
|
|
{{ form.lessons_learned }}
|
|
<label for="{{ form.lessons_learned.id_for_label }}">Lessons Learned</label>
|
|
{% if form.lessons_learned.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.lessons_learned.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">
|
|
Key lessons learned from this incident
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Attachments -->
|
|
<div class="card border-secondary mb-4">
|
|
<div class="card-header bg-secondary text-white">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-paperclip me-2"></i>Attachments
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="attachments" class="form-label">Upload Files</label>
|
|
<input type="file" class="form-control" id="attachments" name="attachments" multiple>
|
|
<div class="form-text">
|
|
Upload photos, documents, or other relevant files. Maximum 10MB per file.
|
|
</div>
|
|
</div>
|
|
|
|
{% if form.instance.pk and form.instance.attachments.exists %}
|
|
<div class="mt-3">
|
|
<h6>Existing Attachments:</h6>
|
|
<div class="row">
|
|
{% for attachment in form.instance.attachments.all %}
|
|
<div class="col-md-6 mb-2">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fa fa-file me-2"></i>
|
|
<a href="{{ attachment.file.url }}" target="_blank" class="text-decoration-none">
|
|
{{ attachment.filename }}
|
|
</a>
|
|
<span class="badge bg-light text-dark ms-2">{{ attachment.file_size|filesizeformat }}</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<a href="{% url 'quality:incident_list' %}" class="btn btn-secondary">
|
|
<i class="fa fa-times me-2"></i>Cancel
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-info me-2" onclick="saveDraft()">
|
|
<i class="fa fa-save me-2"></i>Save Draft
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fa fa-check me-2"></i>
|
|
{% if form.instance.pk %}Update Incident{% else %}Report Incident{% endif %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
|
|
<div class="col-xl-3">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Reporting Guidelines</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="small">
|
|
<h6 class="text-primary">What to Report:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fa fa-check text-success me-1"></i> Patient safety events</li>
|
|
<li><i class="fa fa-check text-success me-1"></i> Medication errors</li>
|
|
<li><i class="fa fa-check text-success me-1"></i> Falls and injuries</li>
|
|
<li><i class="fa fa-check text-success me-1"></i> Equipment failures</li>
|
|
<li><i class="fa fa-check text-success me-1"></i> Near misses</li>
|
|
<li><i class="fa fa-check text-success me-1"></i> Security incidents</li>
|
|
</ul>
|
|
|
|
<h6 class="text-warning mt-3">Severity Levels:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><span class="badge bg-danger me-2">Critical</span> Death or severe harm</li>
|
|
<li><span class="badge bg-warning text-dark me-2">High</span> Moderate harm</li>
|
|
<li><span class="badge bg-info me-2">Medium</span> Minor harm</li>
|
|
<li><span class="badge bg-success me-2">Low</span> No harm</li>
|
|
</ul>
|
|
|
|
<h6 class="text-info mt-3">Priority Levels:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><span class="badge bg-danger me-2">Urgent</span> Immediate action</li>
|
|
<li><span class="badge bg-warning text-dark me-2">High</span> Within 24 hours</li>
|
|
<li><span class="badge bg-info me-2">Medium</span> Within 72 hours</li>
|
|
<li><span class="badge bg-success me-2">Low</span> Within 1 week</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Help & Support</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="small">
|
|
<div class="mb-2">
|
|
<strong>Quality Department:</strong><br>
|
|
<i class="fa fa-phone me-1"></i> (555) 123-4567<br>
|
|
<i class="fa fa-envelope me-1"></i> quality@hospital.com
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Patient Safety:</strong><br>
|
|
<i class="fa fa-phone me-1"></i> (555) 123-4569<br>
|
|
<i class="fa fa-envelope me-1"></i> safety@hospital.com
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Emergency:</strong><br>
|
|
<i class="fa fa-phone me-1"></i> 911 or (555) 123-4911
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Form Tips</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="small">
|
|
<ul class="list-unstyled">
|
|
<li><i class="fa fa-lightbulb text-warning me-1"></i> Be specific and factual</li>
|
|
<li><i class="fa fa-lightbulb text-warning me-1"></i> Include all relevant details</li>
|
|
<li><i class="fa fa-lightbulb text-warning me-1"></i> Attach supporting documents</li>
|
|
<li><i class="fa fa-lightbulb text-warning me-1"></i> Use objective language</li>
|
|
<li><i class="fa fa-lightbulb text-warning me-1"></i> Save drafts frequently</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize datetime picker
|
|
$('#{{ form.occurred_at.id_for_label }}').datetimepicker({
|
|
format: 'YYYY-MM-DD HH:mm',
|
|
defaultDate: moment()
|
|
});
|
|
|
|
// Show/hide patient details based on patient involvement
|
|
function togglePatientDetails() {
|
|
if ($('#{{ form.patient_involved.id_for_label }}').is(':checked')) {
|
|
$('#patientDetails').show();
|
|
} else {
|
|
$('#patientDetails').hide();
|
|
}
|
|
}
|
|
|
|
$('#{{ form.patient_involved.id_for_label }}').change(togglePatientDetails);
|
|
togglePatientDetails(); // Initial check
|
|
|
|
// Auto-save functionality
|
|
let autoSaveTimer;
|
|
$('#incidentForm input, #incidentForm textarea, #incidentForm select').on('input change', function() {
|
|
clearTimeout(autoSaveTimer);
|
|
autoSaveTimer = setTimeout(function() {
|
|
saveDraft(true); // Silent save
|
|
}, 30000); // Auto-save every 30 seconds
|
|
});
|
|
|
|
// Form validation
|
|
$('#incidentForm').on('submit', function(e) {
|
|
let isValid = true;
|
|
|
|
// Check required fields
|
|
$(this).find('[required]').each(function() {
|
|
if (!$(this).val()) {
|
|
isValid = false;
|
|
$(this).addClass('is-invalid');
|
|
} else {
|
|
$(this).removeClass('is-invalid');
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
toastr.error('Please fill in all required fields');
|
|
return false;
|
|
}
|
|
|
|
// Show loading state
|
|
$(this).find('button[type="submit"]').prop('disabled', true).html(
|
|
'<i class="fa fa-spinner fa-spin me-2"></i>Saving...'
|
|
);
|
|
});
|
|
|
|
// Character count for text areas
|
|
$('textarea').each(function() {
|
|
const maxLength = $(this).attr('maxlength');
|
|
if (maxLength) {
|
|
const $counter = $('<div class="form-text text-end"></div>');
|
|
$(this).after($counter);
|
|
|
|
$(this).on('input', function() {
|
|
const remaining = maxLength - $(this).val().length;
|
|
$counter.text(remaining + ' characters remaining');
|
|
|
|
if (remaining < 50) {
|
|
$counter.addClass('text-warning');
|
|
} else {
|
|
$counter.removeClass('text-warning');
|
|
}
|
|
}).trigger('input');
|
|
}
|
|
});
|
|
});
|
|
|
|
function saveDraft(silent = false) {
|
|
const formData = new FormData($('#incidentForm')[0]);
|
|
formData.append('save_draft', 'true');
|
|
|
|
$.ajax({
|
|
url: window.location.href,
|
|
method: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
if (!silent) {
|
|
toastr.success('Draft saved successfully');
|
|
}
|
|
},
|
|
error: function() {
|
|
if (!silent) {
|
|
toastr.error('Failed to save draft');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function previewIncident() {
|
|
// Implementation for previewing incident
|
|
toastr.info('Preview functionality coming soon');
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|