From f4e67726fd0df52eaed1801099dc9518b75e73fc Mon Sep 17 00:00:00 2001 From: NguyenND Date: Fri, 6 Mar 2026 17:59:37 -0500 Subject: [PATCH] Mar 06 2026: fixed time attendance records page, update search by id 3 --- templates/time_attendance_records.html | 414 ++++++++++++++++--------- 1 file changed, 272 insertions(+), 142 deletions(-) diff --git a/templates/time_attendance_records.html b/templates/time_attendance_records.html index d751c14..d360a1f 100644 --- a/templates/time_attendance_records.html +++ b/templates/time_attendance_records.html @@ -4,51 +4,154 @@ {% block extra_head %} {% endblock %} @@ -92,87 +195,112 @@ -
-
-

- - Filter Records -

-
-
-
-
- -
- - -
- {% if employee_filter %} - - {% endif %} -
-
+
+
+
+

+ + Filter Records +

+
+
+ +
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - - - Clear - -
- +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+ {% if employee_filter %} + + {% endif %} +
+
+ +
+ + +
+ +
+ +
@@ -466,18 +594,13 @@ document.addEventListener('keydown', function(event) { } }); -// Initialize filters state - Always visible -document.addEventListener('DOMContentLoaded', function() { - const filterBody = document.getElementById('filterBody'); - // Always ensure the filter section is visible - filterBody.style.display = 'block'; -}); +// Filters are always visible — no toggle needed // ── Employee autocomplete ────────────────────────────────────────────────── (function () { - const searchInput = document.getElementById('ta_employee_search'); - const hiddenInput = document.getElementById('employee_id'); - const dropdown = document.getElementById('ta_autocomplete_results'); + const searchInput = document.getElementById('ta_employee_search'); + const hiddenInput = document.getElementById('employee_id'); + const dropdown = document.getElementById('ta_autocomplete_results'); let debounceTimer; if (!searchInput) return; @@ -514,19 +637,18 @@ document.addEventListener('DOMContentLoaded', function() { }); document.addEventListener('click', function (e) { - if (!e.target.closest('.ta-autocomplete-container')) { + if (!e.target.closest('.autocomplete-container-filter')) { dropdown.classList.remove('show'); } }); function renderDropdown(employees) { - // Clear and rebuild — use createElement + addEventListener to avoid - // any quoting/escaping issues with names that contain apostrophes. + // Use createElement + addEventListener — safe with apostrophes in names dropdown.innerHTML = ''; if (employees.length === 0) { const noResult = document.createElement('div'); - noResult.className = 'ta-autocomplete-item'; + noResult.className = 'autocomplete-item-filter'; noResult.style.cssText = 'cursor:default;color:#999;'; noResult.textContent = 'No employees found'; dropdown.appendChild(noResult); @@ -538,10 +660,13 @@ document.addEventListener('DOMContentLoaded', function() { : emp.lastName + ', ' + emp.firstName; const item = document.createElement('div'); - item.className = 'ta-autocomplete-item'; + item.className = 'autocomplete-item-filter'; + + const info = document.createElement('div'); + info.className = 'employee-info-filter'; const nameSpan = document.createElement('span'); - nameSpan.className = 'ta-emp-name'; + nameSpan.className = 'employee-name-filter'; if (isUnregistered) { nameSpan.textContent = 'ID: ' + emp.id + ' '; const em = document.createElement('em'); @@ -553,13 +678,14 @@ document.addEventListener('DOMContentLoaded', function() { } const idSpan = document.createElement('span'); - idSpan.className = 'ta-emp-id'; + idSpan.className = 'employee-id-filter'; idSpan.textContent = 'ID: ' + emp.id; - item.appendChild(nameSpan); - item.appendChild(idSpan); + info.appendChild(nameSpan); + info.appendChild(idSpan); + item.appendChild(info); - // Capture values in closure — safe regardless of special characters + // Closure captures values safely regardless of special characters item.addEventListener('click', (function (id, name) { return function () { taSelectEmployee(id, name); }; }(String(emp.id), displayName))); @@ -579,8 +705,8 @@ document.addEventListener('DOMContentLoaded', function() { } window.taSelectEmployee = function (id, displayName) { - hiddenInput.value = id; - searchInput.value = displayName; + hiddenInput.value = id; + searchInput.value = displayName; dropdown.classList.remove('show'); }; @@ -590,6 +716,10 @@ document.addEventListener('DOMContentLoaded', function() { searchInput.closest('form').submit(); }; + window.taClearAllFilters = function () { + window.location.href = '{{ url_for("time_attendance_records") }}'; + }; + window.addEventListener('scroll', function () { if (dropdown.classList.contains('show')) positionDropdown(); }, true);