379 lines
20 KiB
HTML
379 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{% if department.id %}Edit Department: {{ department.name }}{% else %}Create New Department{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<!-- Select2 CSS -->
|
|
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/select2-bootstrap5-theme/select2-bootstrap5.min.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.form-floating > .form-control:focus ~ label,
|
|
.form-floating > .form-control:not(:placeholder-shown) ~ label {
|
|
opacity: .65;
|
|
transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
|
|
}
|
|
.form-floating > label {
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
.form-check-input:checked {
|
|
background-color: #2d62ed;
|
|
border-color: #2d62ed;
|
|
}
|
|
.help-text {
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
}
|
|
.required-field label::after {
|
|
content: " *";
|
|
color: #dc3545;
|
|
}
|
|
.accordion-button:not(.collapsed) {
|
|
background-color: rgba(45, 98, 237, 0.1);
|
|
color: #2d62ed;
|
|
}
|
|
</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:department_list' %}">Departments</a></li>
|
|
<li class="breadcrumb-item active">
|
|
{% if department.id %}Edit Department{% else %}Create Department{% endif %}
|
|
</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">
|
|
{% if department.id %}Edit Department: {{ department.name }}{% else %}Create New Department{% endif %}
|
|
</h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-12 -->
|
|
<div class="col-xl-12">
|
|
<!-- begin panel -->
|
|
<div class="panel panel-inverse">
|
|
<!-- begin panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
{% if department.id %}Edit Department Information{% else %}Department 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>
|
|
<!-- end panel-heading -->
|
|
|
|
<!-- begin panel-body -->
|
|
<div class="panel-body">
|
|
<form method="post" id="departmentForm">
|
|
{% 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 %}
|
|
|
|
<div class="row">
|
|
<!-- Basic Information -->
|
|
<div class="col-md-6">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Basic Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Department Name -->
|
|
<div class="form-floating mb-3 required-field">
|
|
{{ form.name }}
|
|
<label for="{{ form.name.id_for_label }}">Department Name</label>
|
|
{% if form.name.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.name.errors }}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.name.help_text %}
|
|
<div class="help-text mt-1">{{ form.name.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Department Code -->
|
|
<div class="form-floating mb-3 required-field">
|
|
{{ form.department_code }}
|
|
<label for="{{ form.department_code.id_for_label }}">Department Code</label>
|
|
{% if form.department_code.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.department_code.errors }}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.department_code.help_text %}
|
|
<div class="help-text mt-1">{{ form.department_code.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Department Type -->
|
|
<div class="form-floating mb-3 required-field">
|
|
{{ form.department_type }}
|
|
<label for="{{ form.department_type.id_for_label }}">Department Type</label>
|
|
{% if form.department_type.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.department_type.errors }}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.department_type.help_text %}
|
|
<div class="help-text mt-1">{{ form.department_type.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Parent Department -->
|
|
<div class="mb-3">
|
|
<label for="{{ form.parent_department.id_for_label }}" class="form-label">Parent Department</label>
|
|
{{ form.parent_department }}
|
|
{% if form.parent_department.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.parent_department.errors }}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.parent_department.help_text %}
|
|
<div class="help-text mt-1">{{ form.parent_department.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Department Head -->
|
|
<div class="mb-3">
|
|
<label for="{{ form.department_head.id_for_label }}" class="form-label">Department Head</label>
|
|
{{ form.department_head }}
|
|
{% if form.department_head.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.department_head.errors }}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.department_head.help_text %}
|
|
<div class="help-text mt-1">{{ form.department_head.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Is Active -->
|
|
<div class="form-check form-switch mb-3">
|
|
{{ form.is_active }}
|
|
<label class="form-check-label" for="{{ form.is_active.id_for_label }}">
|
|
Department is active
|
|
</label>
|
|
{% if form.is_active.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.is_active.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div class="col-md-6">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Additional Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Location -->
|
|
<div class="form-floating mb-3">
|
|
{{ form.location }}
|
|
<label for="{{ form.location.id_for_label }}">Location</label>
|
|
{% if form.location.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.location.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Cost Center -->
|
|
<div class="form-floating mb-3">
|
|
{{ form.cost_center }}
|
|
<label for="{{ form.cost_center.id_for_label }}">Cost Center</label>
|
|
{% if form.cost_center.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.cost_center.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Annual Budget -->
|
|
<div class="form-floating mb-3">
|
|
{{ form.annual_budget }}
|
|
<label for="{{ form.annual_budget.id_for_label }}">Annual Budget</label>
|
|
{% if form.annual_budget.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.annual_budget.errors }}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.annual_budget.help_text %}
|
|
<div class="help-text mt-1">{{ form.annual_budget.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="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>
|
|
|
|
<!-- Notes -->
|
|
<div class="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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Accordion -->
|
|
<div class="accordion mb-4" id="helpAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="helpHeading">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#helpCollapse" aria-expanded="false" aria-controls="helpCollapse">
|
|
<i class="fas fa-question-circle me-2"></i> Help & Guidelines
|
|
</button>
|
|
</h2>
|
|
<div id="helpCollapse" class="accordion-collapse collapse" aria-labelledby="helpHeading" data-bs-parent="#helpAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Department Information Guidelines</h6>
|
|
<ul>
|
|
<li><strong>Department Name:</strong> Use a clear, descriptive name that reflects the department's function.</li>
|
|
<li><strong>Department Code:</strong> Use a unique, short code (typically 2-6 characters) for system identification.</li>
|
|
<li><strong>Department Type:</strong> Select the appropriate classification for the department.</li>
|
|
<li><strong>Parent Department:</strong> If this is a sub-department, select its parent department.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Best Practices</h6>
|
|
<ul>
|
|
<li>Ensure department codes are unique across the organization.</li>
|
|
<li>Assign a department head to improve accountability and communication.</li>
|
|
<li>Provide a detailed description to clarify the department's purpose and responsibilities.</li>
|
|
<li>Use the notes field for any temporary or additional information.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'hr:department_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back to Departments
|
|
</a>
|
|
<div>
|
|
<button type="reset" class="btn btn-default me-2">
|
|
<i class="fas fa-undo"></i> Reset
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i>
|
|
{% if department.id %}Update Department{% else %}Create Department{% endif %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- end panel-body -->
|
|
</div>
|
|
<!-- end panel -->
|
|
</div>
|
|
<!-- end col-12 -->
|
|
</div>
|
|
<!-- end row -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<!-- Select2 JS -->
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2
|
|
$('#{{ form.parent_department.id_for_label }}').select2({
|
|
theme: 'bootstrap-5',
|
|
placeholder: 'Select a parent department (optional)',
|
|
allowClear: true
|
|
});
|
|
|
|
$('#{{ form.department_head.id_for_label }}').select2({
|
|
theme: 'bootstrap-5',
|
|
placeholder: 'Select a department head (optional)',
|
|
allowClear: true
|
|
});
|
|
|
|
// Form validation
|
|
$('#departmentForm').on('submit', function(e) {
|
|
let isValid = true;
|
|
|
|
// Check required fields
|
|
if ($('#{{ form.name.id_for_label }}').val() === '') {
|
|
$('#{{ form.name.id_for_label }}').addClass('is-invalid');
|
|
isValid = false;
|
|
} else {
|
|
$('#{{ form.name.id_for_label }}').removeClass('is-invalid');
|
|
}
|
|
|
|
if ($('#{{ form.department_code.id_for_label }}').val() === '') {
|
|
$('#{{ form.department_code.id_for_label }}').addClass('is-invalid');
|
|
isValid = false;
|
|
} else {
|
|
$('#{{ form.department_code.id_for_label }}').removeClass('is-invalid');
|
|
}
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
|
|
// Show alert
|
|
$('html, body').animate({
|
|
scrollTop: 0
|
|
}, 200);
|
|
|
|
// Add alert if not exists
|
|
if ($('.alert-danger').length === 0) {
|
|
$('.panel-body').prepend(
|
|
'<div class="alert alert-danger">' +
|
|
'<strong>Error!</strong> Please fill in all required fields.' +
|
|
'</div>'
|
|
);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|