nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update attendance report page, filter employee by ID or Name

Browse Source
This commit is contained in:
nngo
2025-12-31 15:38:50 -05:00
parent ca06908d14
commit 045272df70
3 changed files with 255 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+17 -2
View File
@@ -4706,6 +4706,18 @@ def attendance_report():
employee_filter = request.args.get('employee', '')
project_filter = request.args.get('project', '')
# Get employee display name for filter if employee ID is provided
employee_display_name = ''
if employee_filter:
try:
employee = Employee.query.filter_by(id=int(employee_filter)).first()
if employee:
employee_display_name = f"{employee.lastName}, {employee.firstName}"
else:
employee_display_name = f"ID: {employee_filter}"
except (ValueError, TypeError):
employee_display_name = employee_filter
# ============================================================
# PROJECT MANAGER ACCESS CONTROL
# ============================================================
@@ -4765,11 +4777,13 @@ def attendance_report():
date_to=date_to,
location_filter=location_filter,
employee_filter=employee_filter,
employee_display_name=employee_display_name,
project_filter=project_filter,
today_date=datetime.now().strftime('%Y-%m-%d'),
current_date_formatted=datetime.now().strftime('%B %d'),
has_location_accuracy_feature=has_location_accuracy,
user_role=user_role)
# ============================================================
# END: PROJECT MANAGER ACCESS CONTROL
# ============================================================
@@ -5123,9 +5137,10 @@ def attendance_report():
date_to=date_to,
location_filter=location_filter,
employee_filter=employee_filter,
employee_display_name=employee_display_name,
project_filter=project_filter,
today_date=today_date,
current_date_formatted=current_date_formatted,
today_date=datetime.now().strftime('%Y-%m-%d'),
current_date_formatted=datetime.now().strftime('%B %d'),
has_location_accuracy_feature=has_location_accuracy,
user_role=user_role)
static/css/attendance.css
+85
View File
@@ -1563,3 +1563,88 @@ tr.modified-record {
justify-content: center;
}
}
/* Employee Filter Autocomplete Styles */
.autocomplete-container-filter {
position: relative;
}
.autocomplete-results-filter {
position: fixed; /* CHANGED from absolute to fixed */
background: white;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 250px;
overflow-y: auto;
z-index: 9999; /* INCREASED z-index */
display: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
margin-top: 0;
}
.autocomplete-results-filter.show {
display: block;
}
.autocomplete-item-filter {
padding: 0.75rem;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s;
}
.autocomplete-item-filter:hover {
background-color: #f8f9fa;
}
.autocomplete-item-filter:last-child {
border-bottom: none;
}
.employee-info-filter {
display: flex;
justify-content: space-between;
align-items: center;
}
.employee-name-filter {
font-weight: 600;
color: #333;
}
.employee-id-filter {
color: #666;
font-size: 0.9rem;
}
.clear-employee-filter {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: #dc3545;
color: white;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
padding: 0;
}
.clear-employee-filter:hover {
background: #c82333;
}
.clear-employee-filter i {
font-size: 0.75rem;
}
.filter-input {
padding-right: 35px !important;
}
templates/attendance_report.html
+126 -5
View File
@@ -127,15 +127,31 @@
</div>
<div class="filter-group">
<label for="employee">
<i class="fas fa-id-badge"></i>
Employee ID
<label for="employee_search_filter">
<i class="fas fa-user-search"></i>
Employee
</label>
<div class="autocomplete-container-filter">
<input type="text"
id="employee_search_filter"
class="filter-input"
placeholder="Search by ID or Name..."
value="{{ employee_display_name }}"
autocomplete="off">
<input type="hidden"
id="employee"
name="employee"
value="{{ employee_filter }}"
placeholder="Enter Employee ID">
value="{{ employee_filter }}">
<div id="employee_autocomplete_results" class="autocomplete-results-filter"></div>
{% if employee_filter %}
<button type="button"
class="clear-employee-filter"
onclick="clearEmployeeFilter()"
title="Clear employee filter">
<i class="fas fa-times"></i>
</button>
{% endif %}
</div>
</div>
<div class="filter-actions">
@@ -737,4 +753,109 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
</script>
<script>
// Employee Filter Autocomplete
(function() {
const employeeSearchFilter = document.getElementById('employee_search_filter');
const employeeHiddenFilter = document.getElementById('employee');
const autocompleteResultsFilter = document.getElementById('employee_autocomplete_results');
let searchFilterTimeout;
if (employeeSearchFilter) {
employeeSearchFilter.addEventListener('input', function() {
const searchTerm = this.value.trim();
// Clear hidden field if input is cleared
if (searchTerm.length === 0) {
employeeHiddenFilter.value = '';
autocompleteResultsFilter.classList.remove('show');
return;
}
if (searchTerm.length < 2) {
autocompleteResultsFilter.classList.remove('show');
return;
}
// Debounce search
clearTimeout(searchFilterTimeout);
searchFilterTimeout = setTimeout(() => {
fetch(`/api/search_employees?q=${encodeURIComponent(searchTerm)}`)
.then(response => response.json())
.then(data => {
displayEmployeeAutocompleteResults(data.employees);
})
.catch(error => {
console.error('Error searching employees:', error);
});
}, 300);
});
// Close autocomplete when clicking outside
document.addEventListener('click', function(e) {
if (!e.target.closest('.autocomplete-container-filter')) {
autocompleteResultsFilter.classList.remove('show');
}
});
}
function displayEmployeeAutocompleteResults(employees) {
if (employees.length === 0) {
autocompleteResultsFilter.innerHTML = '<div class="autocomplete-item-filter" style="cursor: default; color: #999;">No employees found</div>';
positionDropdown();
autocompleteResultsFilter.classList.add('show');
return;
}
const html = employees.map(emp => `
<div class="autocomplete-item-filter" onclick="selectEmployeeFilter(${emp.id}, '${emp.lastName}, ${emp.firstName}')">
<div class="employee-info-filter">
<span class="employee-name-filter">${emp.lastName}, ${emp.firstName}</span>
<span class="employee-id-filter">ID: ${emp.id}</span>
</div>
</div>
`).join('');
autocompleteResultsFilter.innerHTML = html;
positionDropdown();
autocompleteResultsFilter.classList.add('show');
}
// Helper function to position the dropdown correctly
function positionDropdown() {
const inputRect = employeeSearchFilter.getBoundingClientRect();
autocompleteResultsFilter.style.top = (inputRect.bottom + window.scrollY) + 'px';
autocompleteResultsFilter.style.left = inputRect.left + 'px';
autocompleteResultsFilter.style.width = inputRect.width + 'px';
}
// Make this function globally accessible
window.selectEmployeeFilter = function(id, name) {
employeeHiddenFilter.value = id;
employeeSearchFilter.value = name;
autocompleteResultsFilter.classList.remove('show');
};
window.clearEmployeeFilter = function() {
employeeSearchFilter.value = '';
employeeHiddenFilter.value = '';
// Submit the form to refresh with cleared filter
employeeSearchFilter.closest('form').submit();
};
})();
// Reposition dropdown on scroll or resize
window.addEventListener('scroll', function() {
if (autocompleteResultsFilter.classList.contains('show')) {
positionDropdown();
}
}, true);
window.addEventListener('resize', function() {
if (autocompleteResultsFilter.classList.contains('show')) {
positionDropdown();
}
});
</script>
{% endblock %}