first commit

views/admin/department/edit.ejs

@@ -0,0 +1,100 @@
+<!-- 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">&times;</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>