jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add searchable dropdowns for Granite Loader columns

Browse Source 
RESPONSIBLE_TEAM, EQUIP_STATUS, and EQUIPMENT_CLASS now show searchable
dropdown selectors in both the Bulk Defaults section and per-row inline
editing. Type to filter options, use arrow keys to navigate, Enter to select.

Picklist values extracted from docs/Team_Device Loader.xlsx reference sheets.
Per-row cells remain click-to-edit for all columns — picklist columns show
the SearchableSelect, free-text columns show a plain input.
This commit is contained in:
Jordan Ramos
2026-06-10 09:47:25 -06:00
parent 1dbde36b53
commit 56ceb81ea5
3 changed files with 255 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/LoaderModal.js
View File

@@ -15,6 +15,8 @@ import {
getColumnsByGroup,
} from '../utils/graniteLoaderConfig';
import { generateLoaderXlsx, generateFilename } from '../utils/graniteLoaderExport';
import { COLUMN_PICKLISTS } from '../utils/graniteLoaderPicklists';
import SearchableSelect from './SearchableSelect';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -477,12 +479,22 @@ export default function LoaderModal({ isOpen, onClose, initialDevices }) {
<label style={{ fontSize: '0.6rem', color: '#64748B', display: 'block', marginBottom: '0.15rem' }}>
{col.id}
</label>
<input
style={INPUT}
value={bulkDefaults[col.id] || ''}
onChange={e => setBulkDefault(col.id, e.target.value)}
placeholder={`Default for all rows`}
/>
{COLUMN_PICKLISTS[col.id] ? (
<SearchableSelect
value={bulkDefaults[col.id] || ''}
options={COLUMN_PICKLISTS[col.id]}
onChange={(val) => setBulkDefault(col.id, val)}
placeholder={`Default for all rows`}
autoFocus={false}
/>
) : (
<input
style={INPUT}
value={bulkDefaults[col.id] || ''}
onChange={e => setBulkDefault(col.id, e.target.value)}
placeholder={`Default for all rows`}
/>
)}
</div>
))}
</div>
@@ -527,14 +539,30 @@ export default function LoaderModal({ isOpen, onClose, initialDevices }) {
onClick={() => !isEditing && startEdit(rowIdx, col.id)}
>
{isEditing ? (
<input
style={{ ...INPUT, padding: '0.2rem 0.4rem', fontSize: '0.7rem' }}
value={editValue}
onChange={e => setEditValue(e.target.value)}
onBlur={commitEdit}
onKeyDown={e => { if (e.key === 'Enter') commitEdit(); if (e.key === 'Escape') setEditingCell(null); }}
autoFocus
/>
COLUMN_PICKLISTS[col.id] ? (
<SearchableSelect
value={editValue}
options={COLUMN_PICKLISTS[col.id]}
onChange={(val) => {
setOverrides(prev => ({
...prev,
[rowIdx]: { ...(prev[rowIdx] || {}), [col.id]: val },
}));
setEditingCell(null);
}}
onClose={() => setEditingCell(null)}
autoFocus
/>
) : (
<input
style={{ ...INPUT, padding: '0.2rem 0.4rem', fontSize: '0.7rem' }}
value={editValue}
onChange={e => setEditValue(e.target.value)}
onBlur={commitEdit}
onKeyDown={e => { if (e.key === 'Enter') commitEdit(); if (e.key === 'Escape') setEditingCell(null); }}
autoFocus
/>
)
) : (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.2rem' }}>
{hasOverride && <span style={{ color: '#F59E0B', fontSize: '0.5rem' }}>●</span>}