703 lines
36 KiB
HTML
703 lines
36 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{% if form.instance.id %}Edit{% else %}Create{% endif %} Training Record | HR Management
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<!-- Select2 CSS -->
|
|
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<!-- DateRangePicker CSS -->
|
|
<link href="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.css' %}" rel="stylesheet" />
|
|
<!-- Summernote CSS -->
|
|
<link href="{% static 'plugins/summernote/dist/summernote-lite.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.form-section {
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.form-section-title {
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.help-sidebar {
|
|
position: sticky;
|
|
top: 20px;
|
|
}
|
|
.help-card {
|
|
border-left: 4px solid #2d62ed;
|
|
}
|
|
.select2-container--default .select2-selection--single {
|
|
height: 38px;
|
|
border: 1px solid #ced4da;
|
|
}
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
line-height: 38px;
|
|
}
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
height: 36px;
|
|
}
|
|
.objective-row {
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.remove-objective {
|
|
color: #dc3545;
|
|
cursor: pointer;
|
|
}
|
|
.certificate-row {
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.remove-certificate {
|
|
color: #dc3545;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- begin breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'hr:training_record_list' %}">Training Records</a></li>
|
|
<li class="breadcrumb-item active">
|
|
{% if form.instance.id %}Edit{% else %}Create{% endif %} Training Record
|
|
</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">
|
|
{% if form.instance.id %}Edit{% else %}Create{% endif %} Training Record
|
|
</h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-9 -->
|
|
<div class="col-xl-9">
|
|
<!-- begin panel -->
|
|
<div class="panel panel-inverse">
|
|
<!-- begin panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
{% if form.instance.id %}Edit{% else %}Create{% endif %} Training Record
|
|
</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>
|
|
<!-- end panel-heading -->
|
|
|
|
<!-- begin panel-body -->
|
|
<div class="panel-body">
|
|
<!-- Form Errors -->
|
|
{% if form.errors %}
|
|
<div class="alert alert-danger">
|
|
<h5><i class="fas fa-exclamation-circle"></i> Please correct the errors below:</h5>
|
|
<ul class="mb-0">
|
|
{% for field in form %}
|
|
{% for error in field.errors %}
|
|
<li>{{ field.label }}: {{ error }}</li>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% for error in form.non_field_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" id="trainingForm" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
|
|
<!-- 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">
|
|
<label for="{{ form.employee.id_for_label }}" class="form-label">Employee <span class="text-danger">*</span></label>
|
|
{{ form.employee }}
|
|
{% if form.employee.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.employee.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.title.id_for_label }}" class="form-label">Training Title <span class="text-danger">*</span></label>
|
|
{{ form.title }}
|
|
{% if form.title.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.title.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.training_type.id_for_label }}" class="form-label">Training Type <span class="text-danger">*</span></label>
|
|
{{ form.training_type }}
|
|
{% if form.training_type.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.training_type.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.provider.id_for_label }}" class="form-label">Provider <span class="text-danger">*</span></label>
|
|
{{ form.provider }}
|
|
{% if form.provider.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.provider.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.start_date.id_for_label }}" class="form-label">Start Date <span class="text-danger">*</span></label>
|
|
{{ form.start_date }}
|
|
{% if form.start_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.start_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.end_date.id_for_label }}" class="form-label">End Date <span class="text-danger">*</span></label>
|
|
{{ form.end_date }}
|
|
{% if form.end_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.end_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.status.id_for_label }}" class="form-label">Status <span class="text-danger">*</span></label>
|
|
{{ form.status }}
|
|
{% if form.status.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.status.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-check form-switch mt-4">
|
|
{{ form.is_mandatory }}
|
|
<label class="form-check-label" for="{{ form.is_mandatory.id_for_label }}">
|
|
Mandatory Training
|
|
</label>
|
|
</div>
|
|
{% if form.is_mandatory.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.is_mandatory.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Description</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.description.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<h6 class="mt-3">Learning Objectives</h6>
|
|
<div id="objectives-container">
|
|
<!-- Objectives will be added here dynamically -->
|
|
{% if objectives %}
|
|
{% for objective in objectives %}
|
|
<div class="objective-row" data-objective-id="{{ objective.id }}">
|
|
<div class="row">
|
|
<div class="col-md-10 mb-2">
|
|
<input type="text" class="form-control objective-text" name="objective_text[]" value="{{ objective.text }}" placeholder="Enter learning objective">
|
|
<input type="hidden" class="objective-id" name="objective_id[]" value="{{ objective.id }}">
|
|
</div>
|
|
<div class="col-md-2 mb-2 text-end">
|
|
<button type="button" class="btn btn-sm btn-danger remove-objective">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="text-center mt-3">
|
|
<button type="button" class="btn btn-sm btn-success" id="add-objective">
|
|
<i class="fas fa-plus"></i> Add Learning Objective
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completion Details Section -->
|
|
<div class="form-section" id="completion-section">
|
|
<h5 class="form-section-title">Completion Details</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.completion_date.id_for_label }}" class="form-label">Completion Date</label>
|
|
{{ form.completion_date }}
|
|
{% if form.completion_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.completion_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.score_grade.id_for_label }}" class="form-label">Score/Grade</label>
|
|
{{ form.score_grade }}
|
|
{% if form.score_grade.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.score_grade.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.hours_completed.id_for_label }}" class="form-label">Hours Completed</label>
|
|
{{ form.hours_completed }}
|
|
{% if form.hours_completed.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.hours_completed.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3" id="completion-percentage-container">
|
|
<label for="{{ form.completion_percentage.id_for_label }}" class="form-label">Completion Percentage</label>
|
|
<div class="input-group">
|
|
{{ form.completion_percentage }}
|
|
<span class="input-group-text">%</span>
|
|
</div>
|
|
{% if form.completion_percentage.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.completion_percentage.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.completion_notes.id_for_label }}" class="form-label">Completion Notes</label>
|
|
{{ form.completion_notes }}
|
|
{% if form.completion_notes.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.completion_notes.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Certification Section -->
|
|
<div class="form-section" id="certification-section">
|
|
<h5 class="form-section-title">Certification</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-check form-switch">
|
|
{{ form.is_certified }}
|
|
<label class="form-check-label" for="{{ form.is_certified.id_for_label }}">
|
|
This training provides certification
|
|
</label>
|
|
</div>
|
|
{% if form.is_certified.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.is_certified.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="certification-details" class="{% if not form.instance.is_certified %}d-none{% endif %}">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.certificate_number.id_for_label }}" class="form-label">Certificate Number</label>
|
|
{{ form.certificate_number }}
|
|
{% if form.certificate_number.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.certificate_number.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.expiration_date.id_for_label }}" class="form-label">Expiration Date</label>
|
|
{{ form.expiration_date }}
|
|
{% if form.expiration_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.expiration_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<h6 class="mt-3">Certificate Files</h6>
|
|
<div id="certificates-container">
|
|
<!-- Certificates will be added here dynamically -->
|
|
{% if certificates %}
|
|
{% for certificate in certificates %}
|
|
<div class="certificate-row" data-certificate-id="{{ certificate.id }}">
|
|
<div class="row">
|
|
<div class="col-md-5 mb-2">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" class="form-control certificate-title" name="certificate_title[]" value="{{ certificate.title }}">
|
|
<input type="hidden" class="certificate-id" name="certificate_id[]" value="{{ certificate.id }}">
|
|
</div>
|
|
<div class="col-md-5 mb-2">
|
|
<label class="form-label">File</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" value="{{ certificate.file.name|split:'//'|last }}" readonly>
|
|
<a href="{{ certificate.file.url }}" class="btn btn-outline-secondary" target="_blank">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 mb-2 text-end">
|
|
<label class="form-label"> </label>
|
|
<div>
|
|
<button type="button" class="btn btn-sm btn-danger remove-certificate">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-5 mb-3">
|
|
<label for="new_certificate_title" class="form-label">Certificate Title</label>
|
|
<input type="text" class="form-control" id="new_certificate_title" name="new_certificate_title">
|
|
</div>
|
|
<div class="col-md-5 mb-3">
|
|
<label for="new_certificate_file" class="form-label">Certificate File</label>
|
|
<input type="file" class="form-control" id="new_certificate_file" name="new_certificate_file">
|
|
</div>
|
|
<div class="col-md-2 mb-3 d-flex align-items-end">
|
|
<button type="button" class="btn btn-sm btn-success" id="add-certificate">
|
|
<i class="fas fa-plus"></i> Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attachments Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Attachments</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.attachments.id_for_label }}" class="form-label">Attachments</label>
|
|
{{ form.attachments }}
|
|
<div class="form-text">You can upload multiple files (PDF, Word, Excel, etc.)</div>
|
|
{% if form.attachments.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.attachments.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if existing_attachments %}
|
|
<div class="mt-3">
|
|
<h6>Existing Attachments</h6>
|
|
<div class="list-group">
|
|
{% for attachment in existing_attachments %}
|
|
<div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fas fa-file me-2"></i>
|
|
<a href="{{ attachment.file.url }}" target="_blank">{{ attachment.title }}</a>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="delete_attachment_{{ attachment.id }}" id="delete_attachment_{{ attachment.id }}">
|
|
<label class="form-check-label" for="delete_attachment_{{ attachment.id }}">
|
|
Delete
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Additional Notes Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Additional Notes</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
|
|
{{ form.notes }}
|
|
{% if form.notes.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.notes.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'hr:training_record_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-times"></i> Cancel
|
|
</a>
|
|
<div>
|
|
<button type="submit" name="save_draft" class="btn btn-info">
|
|
<i class="fas fa-save"></i> Save as Draft
|
|
</button>
|
|
<button type="submit" name="save" class="btn btn-primary">
|
|
<i class="fas fa-check"></i> Save Record
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- end panel-body -->
|
|
</div>
|
|
<!-- end panel -->
|
|
</div>
|
|
<!-- end col-9 -->
|
|
|
|
<!-- begin col-3 -->
|
|
<div class="col-xl-3">
|
|
<div class="help-sidebar">
|
|
<!-- Help Card -->
|
|
<div class="card help-card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Help & Guidelines</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Training Record Guidelines</h6>
|
|
<p>Follow these steps to create a comprehensive training record:</p>
|
|
<ol>
|
|
<li>Fill in the basic information about the training</li>
|
|
<li>Add a detailed description and learning objectives</li>
|
|
<li>If the training is completed, add completion details</li>
|
|
<li>For certifications, add certificate information and files</li>
|
|
<li>Attach any relevant documents</li>
|
|
<li>Add any additional notes</li>
|
|
</ol>
|
|
|
|
<h6>Training Types</h6>
|
|
<ul>
|
|
<li><strong>Certification:</strong> Formal qualification with certificate</li>
|
|
<li><strong>Course:</strong> Structured learning program</li>
|
|
<li><strong>Workshop:</strong> Hands-on practical training</li>
|
|
<li><strong>Seminar:</strong> Educational presentation</li>
|
|
<li><strong>Conference:</strong> Industry event with multiple sessions</li>
|
|
<li><strong>Mandatory:</strong> Required by regulation or policy</li>
|
|
</ul>
|
|
|
|
<h6>Status Definitions</h6>
|
|
<ul>
|
|
<li><strong>Scheduled:</strong> Planned but not yet started</li>
|
|
<li><strong>In Progress:</strong> Currently underway</li>
|
|
<li><strong>Completed:</strong> Successfully finished</li>
|
|
<li><strong>Expired:</strong> Certification has expired</li>
|
|
<li><strong>Upcoming:</strong> Scheduled to start soon</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tips Card -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Tips</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul>
|
|
<li>For mandatory trainings, be sure to include expiration dates if applicable</li>
|
|
<li>Learning objectives should be specific and measurable</li>
|
|
<li>Upload certificates as soon as they are available</li>
|
|
<li>For in-progress trainings, update the completion percentage regularly</li>
|
|
<li>Use the notes section for any special considerations or follow-up requirements</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<!-- Select2 JS -->
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
<!-- DateRangePicker JS -->
|
|
<script src="{% static 'plugins/moment/min/moment.min.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.js' %}"></script>
|
|
<!-- Summernote JS -->
|
|
<script src="{% static 'plugins/summernote/dist/summernote-lite.min.js' %}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2
|
|
$('#{{ form.employee.id_for_label }}, #{{ form.training_type.id_for_label }}, #{{ form.status.id_for_label }}').select2({
|
|
placeholder: "Select an option",
|
|
allowClear: true,
|
|
width: '100%'
|
|
});
|
|
|
|
// Initialize DatePickers
|
|
$('#{{ form.start_date.id_for_label }}, #{{ form.end_date.id_for_label }}, #{{ form.completion_date.id_for_label }}, #{{ form.expiration_date.id_for_label }}').daterangepicker({
|
|
singleDatePicker: true,
|
|
showDropdowns: true,
|
|
autoUpdateInput: false,
|
|
locale: {
|
|
format: 'YYYY-MM-DD'
|
|
}
|
|
});
|
|
|
|
// Set initial values for date pickers if they exist
|
|
var startDate = $('#{{ form.start_date.id_for_label }}').val();
|
|
if (startDate) {
|
|
$('#{{ form.start_date.id_for_label }}').val(moment(startDate).format('YYYY-MM-DD'));
|
|
}
|
|
|
|
var endDate = $('#{{ form.end_date.id_for_label }}').val();
|
|
if (endDate) {
|
|
$('#{{ form.end_date.id_for_label }}').val(moment(endDate).format('YYYY-MM-DD'));
|
|
}
|
|
|
|
var completionDate = $('#{{ form.completion_date.id_for_label }}').val();
|
|
if (completionDate) {
|
|
$('#{{ form.completion_date.id_for_label }}').val(moment(completionDate).format('YYYY-MM-DD'));
|
|
}
|
|
|
|
var expirationDate = $('#{{ form.expiration_date.id_for_label }}').val();
|
|
if (expirationDate) {
|
|
$('#{{ form.expiration_date.id_for_label }}').val(moment(expirationDate).format('YYYY-MM-DD'));
|
|
}
|
|
|
|
// Handle date picker apply event
|
|
$('#{{ form.start_date.id_for_label }}, #{{ form.end_date.id_for_label }}, #{{ form.completion_date.id_for_label }}, #{{ form.expiration_date.id_for_label }}').on('apply.daterangepicker', function(ev, picker) {
|
|
$(this).val(picker.startDate.format('YYYY-MM-DD'));
|
|
});
|
|
|
|
// Initialize Summernote for rich text editors
|
|
$('#{{ form.description.id_for_label }}, #{{ form.completion_notes.id_for_label }}, #{{ form.notes.id_for_label }}').summernote({
|
|
height: 150,
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['bold', 'underline', 'clear']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['insert', ['link']],
|
|
['view', ['fullscreen', 'codeview', 'help']]
|
|
]
|
|
});
|
|
|
|
// Show/hide completion percentage based on status
|
|
$('#{{ form.status.id_for_label }}').change(function() {
|
|
var status = $(this).val();
|
|
if (status === 'IN_PROGRESS') {
|
|
$('#completion-percentage-container').show();
|
|
} else {
|
|
$('#completion-percentage-container').hide();
|
|
}
|
|
});
|
|
|
|
// Trigger status change event on page load
|
|
$('#{{ form.status.id_for_label }}').trigger('change');
|
|
|
|
// Show/hide certification details based on is_certified checkbox
|
|
$('#{{ form.is_certified.id_for_label }}').change(function() {
|
|
if ($(this).is(':checked')) {
|
|
$('#certification-details').removeClass('d-none');
|
|
} else {
|
|
$('#certification-details').addClass('d-none');
|
|
}
|
|
});
|
|
|
|
// Add new learning objective
|
|
$('#add-objective').click(function() {
|
|
var objectiveId = 'new_' + new Date().getTime();
|
|
var objectiveHtml = `
|
|
<div class="objective-row" data-objective-id="${objectiveId}">
|
|
<div class="row">
|
|
<div class="col-md-10 mb-2">
|
|
<input type="text" class="form-control objective-text" name="objective_text[]" placeholder="Enter learning objective">
|
|
<input type="hidden" class="objective-id" name="objective_id[]" value="${objectiveId}">
|
|
</div>
|
|
<div class="col-md-2 mb-2 text-end">
|
|
<button type="button" class="btn btn-sm btn-danger remove-objective">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$('#objectives-container').append(objectiveHtml);
|
|
});
|
|
|
|
// Remove learning objective
|
|
$(document).on('click', '.remove-objective', function() {
|
|
$(this).closest('.objective-row').remove();
|
|
});
|
|
|
|
// Add certificate to list
|
|
$('#add-certificate').click(function() {
|
|
var title = $('#new_certificate_title').val();
|
|
var file = $('#new_certificate_file').val();
|
|
|
|
if (!title || !file) {
|
|
alert('Please enter both title and select a file.');
|
|
return;
|
|
}
|
|
|
|
var fileName = file.split('\\').pop();
|
|
var certificateId = 'new_' + new Date().getTime();
|
|
var certificateHtml = `
|
|
<div class="certificate-row" data-certificate-id="${certificateId}">
|
|
<div class="row">
|
|
<div class="col-md-5 mb-2">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" class="form-control certificate-title" name="new_certificate_titles[]" value="${title}">
|
|
</div>
|
|
<div class="col-md-5 mb-2">
|
|
<label class="form-label">File</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" value="${fileName}" readonly>
|
|
</div>
|
|
<input type="hidden" name="new_certificate_files_index[]" value="${$('#certificates-container .certificate-row').length}">
|
|
</div>
|
|
<div class="col-md-2 mb-2 text-end">
|
|
<label class="form-label"> </label>
|
|
<div>
|
|
<button type="button" class="btn btn-sm btn-danger remove-certificate">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$('#certificates-container').append(certificateHtml);
|
|
|
|
// Clear the inputs
|
|
$('#new_certificate_title').val('');
|
|
$('#new_certificate_file').val('');
|
|
});
|
|
|
|
// Remove certificate
|
|
$(document).on('click', '.remove-certificate', function() {
|
|
$(this).closest('.certificate-row').remove();
|
|
});
|
|
|
|
// Form validation
|
|
$('#trainingForm').submit(function(e) {
|
|
var isValid = true;
|
|
|
|
// Check if end date is after start date
|
|
var startDate = $('#{{ form.start_date.id_for_label }}').val();
|
|
var endDate = $('#{{ form.end_date.id_for_label }}').val();
|
|
|
|
if (startDate && endDate && moment(endDate).isBefore(moment(startDate))) {
|
|
alert('End date must be after start date.');
|
|
isValid = false;
|
|
}
|
|
|
|
// Check if completion date is between start and end date
|
|
var completionDate = $('#{{ form.completion_date.id_for_label }}').val();
|
|
if (completionDate && startDate && moment(completionDate).isBefore(moment(startDate))) {
|
|
alert('Completion date must be after start date.');
|
|
isValid = false;
|
|
}
|
|
|
|
// Check if expiration date is after completion date
|
|
var expirationDate = $('#{{ form.expiration_date.id_for_label }}').val();
|
|
if (expirationDate && completionDate && moment(expirationDate).isBefore(moment(completionDate))) {
|
|
alert('Expiration date must be after completion date.');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|