Add employee search autocomplete and photo display for Recognition
- Add apiemployeesearch.asp for searching employees by name with Team info - Update addnotification.asp with autocomplete dropdown showing photo, name, team, SSO - Support custom names for non-system employees using NAME: prefix in employeesso field - Add theme-aware CSS for selected employee chips (light/dark themes) - Update apishopfloor.asp to detect NAME: prefix and extract custom names - Update shopfloor-dashboard to display employee photos (140px) with GE logo fallback Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
@@ -3,6 +3,141 @@
|
||||
<head>
|
||||
<!--#include file="./includes/header.asp"-->
|
||||
<!--#include file="./includes/sql.asp"-->
|
||||
<style>
|
||||
.employee-search-container {
|
||||
position: relative;
|
||||
}
|
||||
.employee-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #ced4da;
|
||||
border-top: none;
|
||||
border-radius: 0 0 .25rem .25rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
.employee-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.employee-option:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.employee-option:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.employee-option img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-right: 12px;
|
||||
border: 2px solid #007bff;
|
||||
}
|
||||
.employee-option .ge-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
background: #007bff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.employee-option .ge-logo img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.employee-option-info {
|
||||
flex: 1;
|
||||
}
|
||||
.employee-option-name {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.employee-option-sso {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.employee-option-custom {
|
||||
color: #28a745;
|
||||
font-style: italic;
|
||||
}
|
||||
.selected-employees {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.selected-employee {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px 5px 5px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
/* Dark theme support */
|
||||
.bg-theme4 .selected-employee,
|
||||
.bg-theme5 .selected-employee,
|
||||
.bg-theme6 .selected-employee,
|
||||
.bg-dark .selected-employee {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
.selected-employee img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.selected-employee .ge-logo-small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
background: #007bff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.selected-employee .ge-logo-small img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.selected-employee-name {
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
color: #333;
|
||||
}
|
||||
/* Dark theme text */
|
||||
.bg-theme4 .selected-employee-name,
|
||||
.bg-theme5 .selected-employee-name,
|
||||
.bg-theme6 .selected-employee-name,
|
||||
.bg-dark .selected-employee-name {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.selected-employee-remove {
|
||||
cursor: pointer;
|
||||
color: #dc3545;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.selected-employee-remove:hover {
|
||||
color: #a71d2a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<%
|
||||
@@ -120,13 +255,19 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="employeessoGroup" style="display:none;">
|
||||
<label for="employeesso">Employee SSO(s) <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="employeesso" name="employeesso"
|
||||
maxlength="100" placeholder="123456789 or 123456789, 987654321">
|
||||
<small class="form-text text-muted">Enter one or more SSOs separated by commas</small>
|
||||
<div id="employeePreview" class="mt-2" style="display:none;">
|
||||
<span class="badge badge-info" id="employeeNames"></span>
|
||||
<label for="employeeSearch">Employee(s) <span class="text-danger">*</span></label>
|
||||
<div class="employee-search-container">
|
||||
<input type="text" class="form-control" id="employeeSearch"
|
||||
placeholder="Search by name or type a custom name..."
|
||||
autocomplete="off">
|
||||
<div id="employeeDropdown" class="employee-dropdown" style="display:none;"></div>
|
||||
</div>
|
||||
<small class="form-text text-muted">Search for employees or type a name for non-system users. Press Enter to add custom names.</small>
|
||||
|
||||
<div id="selectedEmployees" class="selected-employees mt-2"></div>
|
||||
|
||||
<!-- Hidden field for form submission (stores SSO or NAME:customname) -->
|
||||
<input type="hidden" id="employeesso" name="employeesso" value="">
|
||||
</div>
|
||||
|
||||
<div class="form-row" id="timeFieldsRow">
|
||||
@@ -288,44 +429,184 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Lookup employee names by SSO
|
||||
var lookupTimeout = null;
|
||||
// Employee autocomplete functionality
|
||||
var searchTimeout = null;
|
||||
var selectedEmployees = []; // Array of {sso, name, picture, isCustom}
|
||||
var EMPLOYEE_PHOTO_BASE = 'https://tsgwp00525.rd.ds.ge.com/EmployeeDBAPP/images/';
|
||||
var GE_LOGO_URL = './shopfloor-dashboard/ge-aerospace-logo.svg';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var ssoInput = document.getElementById('employeesso');
|
||||
ssoInput.addEventListener('input', function() {
|
||||
clearTimeout(lookupTimeout);
|
||||
lookupTimeout = setTimeout(lookupEmployees, 500);
|
||||
var searchInput = document.getElementById('employeeSearch');
|
||||
var dropdown = document.getElementById('employeeDropdown');
|
||||
|
||||
// Search on input
|
||||
searchInput.addEventListener('input', function() {
|
||||
clearTimeout(searchTimeout);
|
||||
var query = this.value.trim();
|
||||
|
||||
if (query.length < 2) {
|
||||
dropdown.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
searchTimeout = setTimeout(function() {
|
||||
searchEmployees(query);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Handle Enter key for custom names
|
||||
searchInput.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
var customName = this.value.trim();
|
||||
if (customName.length > 0) {
|
||||
addEmployee(null, customName, null, true);
|
||||
this.value = '';
|
||||
dropdown.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.employee-search-container')) {
|
||||
dropdown.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function lookupEmployees() {
|
||||
var ssoInput = document.getElementById('employeesso');
|
||||
var ssos = ssoInput.value.trim();
|
||||
var previewDiv = document.getElementById('employeePreview');
|
||||
var namesSpan = document.getElementById('employeeNames');
|
||||
function searchEmployees(query) {
|
||||
var dropdown = document.getElementById('employeeDropdown');
|
||||
|
||||
if (!ssos) {
|
||||
previewDiv.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Call AJAX endpoint to lookup names
|
||||
fetch('./lookupemployee.asp?sso=' + encodeURIComponent(ssos))
|
||||
fetch('./apiemployeesearch.asp?q=' + encodeURIComponent(query) + '&limit=8')
|
||||
.then(function(response) { return response.json(); })
|
||||
.then(function(data) {
|
||||
if (data.success && data.names) {
|
||||
namesSpan.textContent = data.names;
|
||||
previewDiv.style.display = 'block';
|
||||
if (data.success && data.results) {
|
||||
renderDropdown(data.results, query);
|
||||
} else {
|
||||
namesSpan.textContent = data.error || 'Employee not found';
|
||||
namesSpan.className = 'badge badge-warning';
|
||||
previewDiv.style.display = 'block';
|
||||
renderDropdown([], query);
|
||||
}
|
||||
})
|
||||
.catch(function(err) {
|
||||
previewDiv.style.display = 'none';
|
||||
renderDropdown([], query);
|
||||
});
|
||||
}
|
||||
|
||||
function renderDropdown(results, query) {
|
||||
var dropdown = document.getElementById('employeeDropdown');
|
||||
var html = '';
|
||||
|
||||
// Show matching employees
|
||||
results.forEach(function(emp) {
|
||||
// Check if already selected
|
||||
var isSelected = selectedEmployees.some(function(s) { return s.sso === emp.sso; });
|
||||
if (isSelected) return;
|
||||
|
||||
var photoHtml;
|
||||
if (emp.picture) {
|
||||
photoHtml = '<img src="' + EMPLOYEE_PHOTO_BASE + emp.picture + '" onerror="this.parentNode.innerHTML=\'<div class=ge-logo><img src=' + GE_LOGO_URL + '></div>\'">';
|
||||
} else {
|
||||
photoHtml = '<div class="ge-logo"><img src="' + GE_LOGO_URL + '"></div>';
|
||||
}
|
||||
|
||||
html += '<div class="employee-option" onclick="selectEmployee(\'' + emp.sso + '\', \'' + escapeHtml(emp.fullName) + '\', \'' + (emp.picture || '') + '\')">';
|
||||
html += photoHtml;
|
||||
html += '<div class="employee-option-info">';
|
||||
html += '<div class="employee-option-name">' + escapeHtml(emp.fullName) + (emp.team ? ' - ' + escapeHtml(emp.team) : '') + '</div>';
|
||||
html += '<div class="employee-option-sso">SSO: ' + emp.sso + '</div>';
|
||||
html += '</div></div>';
|
||||
});
|
||||
|
||||
// Always show option to add as custom name
|
||||
if (query.length > 0) {
|
||||
html += '<div class="employee-option" onclick="addCustomEmployee(\'' + escapeHtml(query) + '\')">';
|
||||
html += '<div class="ge-logo"><img src="' + GE_LOGO_URL + '"></div>';
|
||||
html += '<div class="employee-option-info">';
|
||||
html += '<div class="employee-option-name employee-option-custom">Add "' + escapeHtml(query) + '" (not in system)</div>';
|
||||
html += '</div></div>';
|
||||
}
|
||||
|
||||
dropdown.innerHTML = html;
|
||||
dropdown.style.display = html ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function selectEmployee(sso, name, picture) {
|
||||
addEmployee(sso, name, picture, false);
|
||||
document.getElementById('employeeSearch').value = '';
|
||||
document.getElementById('employeeDropdown').style.display = 'none';
|
||||
}
|
||||
|
||||
function addCustomEmployee(name) {
|
||||
addEmployee(null, name, null, true);
|
||||
document.getElementById('employeeSearch').value = '';
|
||||
document.getElementById('employeeDropdown').style.display = 'none';
|
||||
}
|
||||
|
||||
function addEmployee(sso, name, picture, isCustom) {
|
||||
// Check for duplicates
|
||||
var isDuplicate = selectedEmployees.some(function(s) {
|
||||
if (sso && s.sso === sso) return true;
|
||||
if (isCustom && s.isCustom && s.name === name) return true;
|
||||
return false;
|
||||
});
|
||||
if (isDuplicate) return;
|
||||
|
||||
selectedEmployees.push({ sso: sso, name: name, picture: picture, isCustom: isCustom });
|
||||
updateSelectedDisplay();
|
||||
updateHiddenFields();
|
||||
}
|
||||
|
||||
function removeEmployee(index) {
|
||||
selectedEmployees.splice(index, 1);
|
||||
updateSelectedDisplay();
|
||||
updateHiddenFields();
|
||||
}
|
||||
|
||||
function updateSelectedDisplay() {
|
||||
var container = document.getElementById('selectedEmployees');
|
||||
var html = '';
|
||||
|
||||
selectedEmployees.forEach(function(emp, index) {
|
||||
var photoHtml;
|
||||
if (emp.picture) {
|
||||
photoHtml = '<img src="' + EMPLOYEE_PHOTO_BASE + emp.picture + '" onerror="this.parentNode.innerHTML=\'<div class=ge-logo-small><img src=' + GE_LOGO_URL + '></div>\'">';
|
||||
} else {
|
||||
photoHtml = '<div class="ge-logo-small"><img src="' + GE_LOGO_URL + '"></div>';
|
||||
}
|
||||
|
||||
html += '<div class="selected-employee">';
|
||||
html += photoHtml;
|
||||
html += '<span class="selected-employee-name">' + escapeHtml(emp.name);
|
||||
if (emp.isCustom) html += ' <small>(custom)</small>';
|
||||
html += '</span>';
|
||||
html += '<span class="selected-employee-remove" onclick="removeEmployee(' + index + ')">x</span>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function updateHiddenFields() {
|
||||
var values = [];
|
||||
|
||||
selectedEmployees.forEach(function(emp) {
|
||||
if (emp.sso) {
|
||||
// System employee - use SSO
|
||||
values.push(emp.sso);
|
||||
} else if (emp.isCustom) {
|
||||
// Custom name - use NAME: prefix
|
||||
values.push('NAME:' + emp.name);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('employeesso').value = values.join(',');
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
var div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user