forked from UKSOURCE/cms.hailearning.edu.vn
101 lines
3.3 KiB
Plaintext
101 lines
3.3 KiB
Plaintext
<!-- Header section -->
|
|
<div class="container">
|
|
<div class="d-flex justify-content-between align-items-center mt-4 mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-0" style="color: var(--primary-dark);">Edit Department</h1>
|
|
<p class="text-muted mb-0">
|
|
Editing department: <span class="badge bg-primary"><%= department.name %></span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<a href="/admin/department" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i>Back to Department Management
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body p-4">
|
|
<form action="/admin/department/edit/<%= department._id %>" method="POST" id="editForm">
|
|
<div class="mb-4">
|
|
<label for="name" class="form-label fw-medium">Department Name</label>
|
|
<input type="text" class="form-control" id="name" name="name" required
|
|
value="<%= department.name %>" placeholder="Enter department name">
|
|
<div class="form-text">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Enter the full name of the department (e.g. Business, Engineering)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-lightbulb me-2"></i>
|
|
<strong>Tips:</strong>
|
|
<ul class="mb-0 mt-2">
|
|
<li>Department name should be clear and descriptive</li>
|
|
<li>Use proper capitalization</li>
|
|
<li>Avoid abbreviations unless commonly known</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 mt-4">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-1"></i>Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Modal -->
|
|
<div id="customModal" class="custom-modal">
|
|
<div class="custom-modal-content">
|
|
<div class="custom-modal-header">
|
|
<h5 class="custom-modal-title">Notification</h5>
|
|
<button type="button" class="custom-modal-close">×</button>
|
|
</div>
|
|
<div class="custom-modal-body">
|
|
<p id="modalMessage">Content of the notification will appear here.</p>
|
|
</div>
|
|
<div class="custom-modal-footer">
|
|
<button type="button" class="btn btn-primary custom-modal-ok">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import custom modal CSS -->
|
|
<link rel="stylesheet" href="/css/custom-modal.css">
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize custom modal
|
|
CustomModal.init('customModal', {
|
|
closeOnOutsideClick: true,
|
|
animationDuration: 300
|
|
});
|
|
|
|
const form = document.getElementById('editForm');
|
|
const nameInput = document.getElementById('name');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
// Validate department name
|
|
if (!nameInput.value.trim()) {
|
|
e.preventDefault();
|
|
CustomModal.alert('Please enter a department name.');
|
|
return;
|
|
}
|
|
|
|
// Check for special characters
|
|
if (/[^a-zA-Z0-9\s-]/.test(nameInput.value.trim())) {
|
|
e.preventDefault();
|
|
CustomModal.alert('Department name can only contain letters, numbers, spaces and hyphens.');
|
|
return;
|
|
}
|
|
});
|
|
});
|
|
</script>
|