Skip to content

Commit 532c0bc

Browse files
coder-dcxcoder-dcx
committed
feat: Replace FormControl with Autocomplete for Param ID, UOM, and Operation fields to enhance user experience with searchable options
1 parent c8c9d9b commit 532c0bc

File tree

1 file changed

+115
-76
lines changed

1 file changed

+115
-76
lines changed

‎src/components/FeaturesV1.js‎

Lines changed: 115 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
Tooltip,
1515
Divider
1616
} from '@material-ui/core';
17-
import { Alert } from '@material-ui/lab';
17+
import { Alert, Autocomplete } from '@material-ui/lab';
1818
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
1919
import DoneIcon from '@material-ui/icons/Done';
2020
import ClearIcon from '@material-ui/icons/Clear';
@@ -598,24 +598,37 @@ function FeaturesV1({
598598
switch (typeValue) {
599599
case 'PARAM ID':
600600
return (
601-
<FormControl
602-
variant="outlined"
601+
<Autocomplete
602+
value={finalParamOptions.find(option => option.value === currentValue) || null}
603+
onChange={(event, newValue) => {
604+
updateRow(row.id, valueField, newValue ? newValue.value : '');
605+
}}
606+
options={finalParamOptions}
607+
getOptionLabel={(option) => option.label || ''}
608+
getOptionSelected={(option, value) => option.value === value.value}
603609
size="small"
604-
error={hasError}
605-
>
606-
<Select
607-
value={currentValue}
608-
onChange={(e) => updateRow(row.id, valueField, e.target.value)}
609-
error={hasError}
610-
>
611-
<MenuItem value=""><em>None</em></MenuItem>
612-
{finalParamOptions.map(option => (
613-
<MenuItem key={option.value} value={option.value}>
614-
{option.label}
615-
</MenuItem>
616-
))}
617-
</Select>
618-
</FormControl>
610+
renderInput={(params) => (
611+
<TextField
612+
{...params}
613+
variant="outlined"
614+
error={hasError}
615+
placeholder="Search Param ID..."
616+
/>
617+
)}
618+
renderOption={(option) => (
619+
<div>
620+
<strong>{option.label}</strong>
621+
{option.description && (
622+
<div style={{ fontSize: '0.8em', color: '#666' }}>
623+
{option.description}
624+
</div>
625+
)}
626+
</div>
627+
)}
628+
noOptionsText="No matching Param ID found"
629+
clearOnEscape
630+
openOnFocus
631+
/>
619632
);
620633
case 'NUMBER':
621634
return (
@@ -920,28 +933,40 @@ function FeaturesV1({
920933
</div>
921934
)}
922935

923-
{/* Param ID */}
936+
{/* Param ID - Searchable */}
924937
<div className='col-block'>
925-
<FormControl
926-
variant="outlined"
938+
<Autocomplete
939+
value={finalParamOptions.find(option => option.value === row.paramId) || null}
940+
onChange={(event, newValue) => {
941+
updateRow(row.id, 'paramId', newValue ? newValue.value : '');
942+
}}
943+
options={finalParamOptions}
944+
getOptionLabel={(option) => option.label || ''}
945+
getOptionSelected={(option, value) => option.value === value.value}
927946
size="small"
928-
error={hasFieldError(row, 'paramId')}
929-
>
930-
<InputLabel error={hasFieldError(row, 'paramId')}>Param ID</InputLabel>
931-
<Select
932-
value={row.paramId}
933-
onChange={(e) => updateRow(row.id, 'paramId', e.target.value)}
934-
label="Param ID"
935-
error={hasFieldError(row, 'paramId')}
936-
>
937-
<MenuItem value=""><em>None</em></MenuItem>
938-
{finalParamOptions.map(option => (
939-
<MenuItem key={option.value} value={option.value}>
940-
{option.label}
941-
</MenuItem>
942-
))}
943-
</Select>
944-
</FormControl>
947+
renderInput={(params) => (
948+
<TextField
949+
{...params}
950+
label="Param ID"
951+
variant="outlined"
952+
error={hasFieldError(row, 'paramId')}
953+
placeholder="Search Param ID..."
954+
/>
955+
)}
956+
renderOption={(option) => (
957+
<div>
958+
<strong>{option.label}</strong>
959+
{option.description && (
960+
<div style={{ fontSize: '0.8em', color: '#666' }}>
961+
{option.description}
962+
</div>
963+
)}
964+
</div>
965+
)}
966+
noOptionsText="No matching Param ID found"
967+
clearOnEscape
968+
openOnFocus
969+
/>
945970
</div>
946971

947972
{/* Param Description */}
@@ -955,50 +980,64 @@ function FeaturesV1({
955980
/>
956981
</div>
957982

958-
{/* UOM - Disabled when IF checked */}
983+
{/* UOM - Searchable, Disabled when IF checked */}
959984
<div className='col-block'>
960-
<FormControl
961-
variant="outlined"
985+
<Autocomplete
986+
value={finalUomOptions.find(option => option.value === row.uom) || null}
987+
onChange={(event, newValue) => {
988+
updateRow(row.id, 'uom', newValue ? newValue.value : '');
989+
}}
990+
options={finalUomOptions}
991+
getOptionLabel={(option) => option.label || ''}
992+
getOptionSelected={(option, value) => option.value === value.value}
962993
size="small"
963-
error={hasFieldError(row, 'uom')}
964-
>
965-
<InputLabel error={hasFieldError(row, 'uom')}>UOM</InputLabel>
966-
<Select
967-
value={row.uom}
968-
onChange={(e) => updateRow(row.id, 'uom', e.target.value)}
969-
label="UOM"
970-
disabled={row.conditionType !== 'None'}
971-
error={hasFieldError(row, 'uom')}
972-
>
973-
{finalUomOptions.map(option => (
974-
<MenuItem key={option.value} value={option.value}>
975-
{option.label}
976-
</MenuItem>
977-
))}
978-
</Select>
979-
</FormControl>
994+
disabled={row.conditionType !== 'None'}
995+
renderInput={(params) => (
996+
<TextField
997+
{...params}
998+
label="UOM"
999+
variant="outlined"
1000+
error={hasFieldError(row, 'uom')}
1001+
placeholder="Search UOM..."
1002+
/>
1003+
)}
1004+
noOptionsText="No matching UOM found"
1005+
clearOnEscape
1006+
openOnFocus
1007+
/>
9801008
</div>
9811009

982-
{/* Operation - Disabled when IF checked */}
1010+
{/* Operation - Searchable, Disabled when IF checked */}
9831011
<div className='col-block'>
984-
<FormControl
985-
variant="outlined"
1012+
<Autocomplete
1013+
value={operationOptions.find(op => op === row.operation) || null}
1014+
onChange={(event, newValue) => {
1015+
updateRow(row.id, 'operation', newValue || '');
1016+
}}
1017+
options={operationOptions}
1018+
getOptionLabel={(option) => option}
9861019
size="small"
987-
error={hasFieldError(row, 'operation')}
988-
>
989-
<InputLabel error={hasFieldError(row, 'operation')}>Operation</InputLabel>
990-
<Select
991-
value={row.operation}
992-
onChange={(e) => updateRow(row.id, 'operation', e.target.value)}
993-
label="Operation"
994-
disabled={row.conditionType !== 'None'}
995-
error={hasFieldError(row, 'operation')}
996-
>
997-
{operationOptions.map(op => (
998-
<MenuItem key={op} value={op}>{op}</MenuItem>
999-
))}
1000-
</Select>
1001-
</FormControl>
1020+
disabled={row.conditionType !== 'None'}
1021+
renderInput={(params) => (
1022+
<TextField
1023+
{...params}
1024+
label="Operation"
1025+
variant="outlined"
1026+
error={hasFieldError(row, 'operation')}
1027+
placeholder="Search Operation..."
1028+
/>
1029+
)}
1030+
renderOption={(option) => (
1031+
<div style={{ display: 'flex', alignItems: 'center' }}>
1032+
<span style={{ fontWeight: 'bold', marginRight: '8px' }}>{option}</span>
1033+
{option === 'Number' && <span style={{ color: '#666', fontSize: '0.8em' }}>(Numeric values)</span>}
1034+
{option === 'String' && <span style={{ color: '#666', fontSize: '0.8em' }}>(Text values)</span>}
1035+
</div>
1036+
)}
1037+
noOptionsText="No matching operation found"
1038+
clearOnEscape
1039+
openOnFocus
1040+
/>
10021041
</div>
10031042

10041043
{/* Standard MH/UOM - Dynamic validation based on operation */}

0 commit comments

Comments
 (0)