ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let a typed employee name find the employee

Browse Source 
Reported from the floor: somebody types the employee's whole name into the
notification or recognition picker and presses Enter instead of clicking the
suggestion, and the entry does not pull from the employee database.

Two causes, one symptom.

The search matched the WHOLE query against first name or last name, so "Dana
Reyes" found nobody - no single column holds that string. Typing a full name is
what a person does before pressing Enter, and it was the one thing guaranteed to
return an empty list. A multi-word query is now treated as a full name: every
word must appear somewhere in the name, in either column, so "Reyes Dana" works
too, and "Dana Reyes" does not also return Sam Reyes. A single word still
searches broadly, and an SSO still resolves. Both directory backends changed,
the self-hosted tables and the external HR database.

With no suggestion to click, the form then turned the typed text into
`NAME:<text>` - a label linked to nothing. On screen that chip is identical to a
real selection; the difference only shows up later as no photo, no directory
link, and a recognition the person it is about cannot be found by. Both pickers
(the notifications form and the shared EmployeeSearch component) now look a
typed name up before deciding it is free text, through one helper.

An exact full-name match wins over a longer partial one, because somebody typing
"Dana Reyes" means that person and not "Dana Reyes-Smith". A genuinely ambiguous
name is NOT guessed at - the candidates are shown and the operator picks, which
is exactly when picking wrong matters most. A directory that cannot be reached
reports failure rather than silently producing a label.

Eleven tests. The search rules verified by planting the single-term query back.

One note for whoever reads the spec: the failure-branch test uses a thenable
that rejects rather than a mock returning a rejected promise. The runner
collects such a promise as an unhandled error even when the code under test
catches it, and fails the very test that proves the catch works.

Scope: product
This commit is contained in:
cproudlock
2026-09-03 16:45:15 -04:00
parent cbdfcbabb7
commit 81ad221e6a
9 changed files with 676 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

523
frontend/src/components/EmployeeSearch.vue
View File

@@ -1,251 +1,272 @@
<template>
<div class="employee-search">
<div class="employee-search-container">
<input
v-model="searchQuery"
type="text"
class="form-control"
:placeholder="placeholder"
:disabled="disabled"
@input="onSearch"
@keydown.enter.prevent="addCustom"
/>
<div v-if="results.length" class="employee-dropdown">
<div
v-for="emp in results"
:key="emp.SSO"
class="employee-option"
@click="selectEmployee(emp)"
>
<span class="emp-name">{{ emp.First_Name }} {{ emp.Last_Name }}</span>
<span class="emp-sso">{{ emp.SSO }}</span>
</div>
</div>
</div>
<small v-if="allowCustom" class="form-hint">Search for employees or press Enter to add a custom name</small>
<!-- Selected employee(s) display -->
<div v-if="multiple && selectedList.length" class="selected-employees">
<div
v-for="(emp, idx) in selectedList"
:key="idx"
class="selected-employee"
>
<span>{{ emp.name }}</span>
<span v-if="emp.sso && !emp.sso.startsWith('NAME:')" class="emp-sso-tag">{{ emp.sso }}</span>
<button v-if="!disabled" type="button" class="btn-remove" @click="removeEmployee(idx)">&times;</button>
</div>
</div>
<div v-else-if="!multiple && selected" class="selected-employee-display">
<span>{{ selected.name }}</span>
<span v-if="selected.sso" class="emp-sso-tag">{{ selected.sso }}</span>
<button v-if="!disabled" type="button" class="btn-remove" @click="clearSelection">&times;</button>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { employeesApi } from '../api'
const props = defineProps({
modelValue: { type: [Object, Array], default: null },
multiple: { type: Boolean, default: false },
allowCustom: { type: Boolean, default: false },
placeholder: { type: String, default: 'Search by name...' },
disabled: { type: Boolean, default: false }
})
const emit = defineEmits(['update:modelValue'])
const searchQuery = ref('')
const results = ref([])
const selected = ref(null)
const selectedList = ref([])
let searchTimeout = null
// Initialize from modelValue
watch(() => props.modelValue, (val) => {
if (props.multiple) {
selectedList.value = val || []
} else {
selected.value = val
}
}, { immediate: true })
async function onSearch() {
if (searchTimeout) clearTimeout(searchTimeout)
const query = searchQuery.value.trim()
if (query.length < 2) {
results.value = []
return
}
searchTimeout = setTimeout(async () => {
try {
const response = await employeesApi.search(query)
results.value = response.data.data || []
} catch (err) {
console.error('Employee search error:', err)
results.value = []
}
}, 300)
}
function selectEmployee(emp) {
const employee = {
sso: String(emp.SSO),
name: `${emp.First_Name} ${emp.Last_Name}`.trim()
}
if (props.multiple) {
// Check if already selected
if (selectedList.value.some(e => e.sso === employee.sso)) {
return
}
selectedList.value.push(employee)
emit('update:modelValue', selectedList.value)
} else {
selected.value = employee
emit('update:modelValue', employee)
}
searchQuery.value = ''
results.value = []
}
function addCustom() {
if (!props.allowCustom) return
const name = searchQuery.value.trim()
if (!name) return
const employee = {
sso: `NAME:${name}`,
name: name
}
if (props.multiple) {
selectedList.value.push(employee)
emit('update:modelValue', selectedList.value)
} else {
selected.value = employee
emit('update:modelValue', employee)
}
searchQuery.value = ''
results.value = []
}
function removeEmployee(idx) {
selectedList.value.splice(idx, 1)
emit('update:modelValue', selectedList.value)
}
function clearSelection() {
selected.value = null
emit('update:modelValue', null)
}
</script>
<style scoped>
.employee-search-container {
position: relative;
}
.employee-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-card-solid, #1a1a1a);
border: 1px solid var(--border);
border-radius: 0.25rem;
max-height: 200px;
overflow-y: auto;
z-index: 100;
}
.employee-option {
padding: 0.5rem 0.75rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.employee-option:hover {
background: rgba(255, 255, 255, 0.1);
}
.emp-name {
font-weight: 500;
}
.emp-sso {
font-size: 0.85rem;
color: var(--text-light);
}
.form-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-light);
}
/* Multiple selection */
.selected-employees {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.selected-employee {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--primary);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.9rem;
}
/* Single selection */
.selected-employee-display {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--primary);
color: white;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
margin-top: 0.5rem;
}
.emp-sso-tag {
font-size: 0.8rem;
opacity: 0.8;
}
.btn-remove {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0;
font-size: 1.2rem;
line-height: 1;
opacity: 0.7;
margin-left: auto;
}
.btn-remove:hover {
opacity: 1;
}
</style>
<template>
<div class="employee-search">
<div class="employee-search-container">
<input
v-model="searchQuery"
type="text"
class="form-control"
:placeholder="placeholder"
:disabled="disabled"
@input="onSearch"
@keydown.enter.prevent="addCustom"
/>
<div v-if="results.length" class="employee-dropdown">
<div
v-for="emp in results"
:key="emp.SSO"
class="employee-option"
@click="selectEmployee(emp)"
>
<span class="emp-name">{{ emp.First_Name }} {{ emp.Last_Name }}</span>
<span class="emp-sso">{{ emp.SSO }}</span>
</div>
</div>
</div>
<small v-if="allowCustom" class="form-hint">Search for employees or press Enter to add a custom name</small>
<!-- Selected employee(s) display -->
<div v-if="multiple && selectedList.length" class="selected-employees">
<div
v-for="(emp, idx) in selectedList"
:key="idx"
class="selected-employee"
>
<span>{{ emp.name }}</span>
<span v-if="emp.sso && !emp.sso.startsWith('NAME:')" class="emp-sso-tag">{{ emp.sso }}</span>
<button v-if="!disabled" type="button" class="btn-remove" @click="removeEmployee(idx)">&times;</button>
</div>
</div>
<div v-else-if="!multiple && selected" class="selected-employee-display">
<span>{{ selected.name }}</span>
<span v-if="selected.sso" class="emp-sso-tag">{{ selected.sso }}</span>
<button v-if="!disabled" type="button" class="btn-remove" @click="clearSelection">&times;</button>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { employeesApi } from '../api'
import { resolveEmployeeName } from '../composables/employeeResolve'
const props = defineProps({
modelValue: { type: [Object, Array], default: null },
multiple: { type: Boolean, default: false },
allowCustom: { type: Boolean, default: false },
placeholder: { type: String, default: 'Search by name...' },
disabled: { type: Boolean, default: false }
})
const emit = defineEmits(['update:modelValue'])
const searchQuery = ref('')
const results = ref([])
const selected = ref(null)
const selectedList = ref([])
let searchTimeout = null
// Initialize from modelValue
watch(() => props.modelValue, (val) => {
if (props.multiple) {
selectedList.value = val || []
} else {
selected.value = val
}
}, { immediate: true })
async function onSearch() {
if (searchTimeout) clearTimeout(searchTimeout)
const query = searchQuery.value.trim()
if (query.length < 2) {
results.value = []
return
}
searchTimeout = setTimeout(async () => {
try {
const response = await employeesApi.search(query)
results.value = response.data.data || []
} catch (err) {
console.error('Employee search error:', err)
results.value = []
}
}, 300)
}
function selectEmployee(emp) {
const employee = {
sso: String(emp.SSO),
name: `${emp.First_Name} ${emp.Last_Name}`.trim()
}
if (props.multiple) {
// Check if already selected
if (selectedList.value.some(e => e.sso === employee.sso)) {
return
}
selectedList.value.push(employee)
emit('update:modelValue', selectedList.value)
} else {
selected.value = employee
emit('update:modelValue', employee)
}
searchQuery.value = ''
results.value = []
}
async function addCustom() {
const name = searchQuery.value.trim()
if (!name) return
// Look it up before deciding it is free text. Picking a suggestion gave a
// real SSO; typing the same name in full and pressing Enter gave
// `NAME:<text>`, linked to nothing - and the chip looked the same either
// way. Nobody types a name in full expecting a different record.
const { match, matches, failed } = await resolveEmployeeName(name)
if (match) {
selectEmployee(match)
return
}
if (matches && matches.length) {
// Ambiguous: show the candidates rather than guessing, which is exactly
// when guessing wrong matters.
results.value = matches
return
}
if (failed) {
// The directory is unreachable. Falling through to a custom label here
// would quietly turn a real employee into free text.
return
}
if (!props.allowCustom) return
const employee = {
sso: `NAME:${name}`,
name: name
}
if (props.multiple) {
selectedList.value.push(employee)
emit('update:modelValue', selectedList.value)
} else {
selected.value = employee
emit('update:modelValue', employee)
}
searchQuery.value = ''
results.value = []
}
function removeEmployee(idx) {
selectedList.value.splice(idx, 1)
emit('update:modelValue', selectedList.value)
}
function clearSelection() {
selected.value = null
emit('update:modelValue', null)
}
</script>
<style scoped>
.employee-search-container {
position: relative;
}
.employee-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-card-solid, #1a1a1a);
border: 1px solid var(--border);
border-radius: 0.25rem;
max-height: 200px;
overflow-y: auto;
z-index: 100;
}
.employee-option {
padding: 0.5rem 0.75rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.employee-option:hover {
background: rgba(255, 255, 255, 0.1);
}
.emp-name {
font-weight: 500;
}
.emp-sso {
font-size: 0.85rem;
color: var(--text-light);
}
.form-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-light);
}
/* Multiple selection */
.selected-employees {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.selected-employee {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--primary);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.9rem;
}
/* Single selection */
.selected-employee-display {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--primary);
color: white;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
margin-top: 0.5rem;
}
.emp-sso-tag {
font-size: 0.8rem;
opacity: 0.8;
}
.btn-remove {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0;
font-size: 1.2rem;
line-height: 1;
opacity: 0.7;
margin-left: auto;
}
.btn-remove:hover {
opacity: 1;
}
</style>

55
frontend/src/composables/employeeResolve.js Normal file
View File

@@ -0,0 +1,55 @@
// Turning what somebody typed into an employee, before giving up on it.
//
// Both employee pickers had the same shape: click a suggestion and you get the
// person, with their SSO; type the whole name and press Enter and you get a
// free-text label (`NAME:Jane Smith`) that is linked to nothing. It looks
// identical on screen - the chip says "Jane Smith" either way - and the
// consequences only show up later: no photo, no directory link, and a
// recognition that cannot be found by the person it is about.
//
// Nobody types a name in full expecting a different outcome from picking it
// off the list. So a typed name is looked up first, and only becomes a custom
// label when the directory genuinely does not have it.
//
// An ambiguous name is NOT guessed at. Two people called J Smith is exactly
// when picking the wrong one matters most, so the caller is told to choose.
import { employeesApi } from '../api'
function fullname(employee) {
return `${employee.First_Name || ''} ${employee.Last_Name || ''}`.trim()
}
// { match } when one employee is clearly meant, { matches } when several are
// possible, {} when the directory has nobody by that name.
export async function resolveEmployeeName(name) {
const query = (name || '').trim()
if (!query) return {}
let rows = []
try {
const response = await employeesApi.search(query)
rows = response?.data?.data || []
} catch (err) {
// A directory that cannot be reached must not silently turn a real
// employee into a custom label - the caller decides what to do about it.
// The MESSAGE, not the error object: a rejected mock handed to
// console.error is re-surfaced by the test runner as an unhandled error,
// which fails the very test that proves this branch works.
console.warn('Employee lookup failed:', err && err.message)
return { failed: true }
}
if (!rows.length) return {}
// An exact full-name match wins over a partial one: searching "Dana Reyes"
// can also return "Dana Reyes-Smith", and the person typing the shorter name
// meant the shorter name.
const exact = rows.filter(
(row) => fullname(row).toLowerCase() === query.toLowerCase())
if (exact.length === 1) return { match: exact[0] }
if (exact.length > 1) return { matches: exact }
if (rows.length === 1) return { match: rows[0] }
return { matches: rows }
}
export { fullname }

81
frontend/src/composables/employeeResolve.spec.js Normal file
View File

@@ -0,0 +1,81 @@
// Typing a name in full must reach the same employee as picking it off the list.
//
// Both pickers turned a typed name straight into `NAME:<text>` - a free-text
// label linked to nothing. On screen the chip is identical to a real
// selection, so the difference only shows up later: no photo, no directory
// record, and a recognition that cannot be found by the person it is about.
import { describe, it, expect, vi, beforeEach } from 'vitest'
vi.mock('../api', () => ({
employeesApi: { search: vi.fn() }
}))
import { employeesApi } from '../api'
import { resolveEmployeeName } from './employeeResolve'
const DANA = { SSO: 270015376, First_Name: 'Dana', Last_Name: 'Reyes' }
const DANA_HYPHEN = { SSO: 270099999, First_Name: 'Dana', Last_Name: 'Reyes-Smith' }
const SAM = { SSO: 270000001, First_Name: 'Sam', Last_Name: 'Reyes' }
function found(rows) {
employeesApi.search.mockResolvedValue({ data: { data: rows } })
}
describe('resolveEmployeeName', () => {
beforeEach(() => employeesApi.search.mockReset())
it('resolves a full name to the employee', async () => {
found([DANA])
const { match } = await resolveEmployeeName('Dana Reyes')
expect(match.SSO).toBe(270015376)
})
it('prefers an exact full-name match over a longer partial one', async () => {
// Searching "Dana Reyes" also returns "Dana Reyes-Smith"; the person who
// typed the shorter name meant the shorter name.
found([DANA, DANA_HYPHEN])
const { match, matches } = await resolveEmployeeName('Dana Reyes')
expect(matches).toBeUndefined()
expect(match.SSO).toBe(270015376)
})
it('refuses to guess between genuinely ambiguous matches', async () => {
found([DANA, SAM])
const { match, matches } = await resolveEmployeeName('Reyes')
expect(match).toBeUndefined()
expect(matches).toHaveLength(2)
})
it('reports nothing found, so the caller may fall back to a label', async () => {
found([])
const result = await resolveEmployeeName('Somebody External')
expect(result.match).toBeUndefined()
expect(result.matches).toBeUndefined()
expect(result.failed).toBeUndefined()
})
it('says the lookup FAILED rather than reporting nobody', async () => {
// The difference matters: "not in the directory" may become a custom
// label, "could not ask" must not.
// A THENABLE that calls its reject callback, rather than a mock returning
// a rejected promise. The await sees the same failure, but no rejected
// promise object exists for the runner to collect as an unhandled error -
// which it does even when the code under test catches it, failing the very
// test that proves the catch works.
employeesApi.search.mockImplementationOnce(() => {
const failure = new Error('network down')
return { then: (_ok, fail) => fail(failure) }
})
// resolves.toEqual, so the runner sees the rejection consumed by an
// assertion rather than as an unhandled error of its own.
await expect(resolveEmployeeName('Dana Reyes')).resolves.toEqual({
failed: true
})
})
it('does not call the directory for an empty box', async () => {
const result = await resolveEmployeeName(' ')
expect(employeesApi.search).not.toHaveBeenCalled()
expect(result).toEqual({})
})
})