Skip to content

Remote Regulating for non-existed equipement #2629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 11 commits into from
Closed

Remote Regulating for non-existed equipement #2629

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
143fade
Enable equipment selection combobox when voltage level field is fille…
basseche Feb 18, 2025
232193b
Merge branch 'main' into fix_Selection_Forms
basseche Feb 18, 2025
415d0ce
Merge branch 'main' into fix_Selection_Forms
basseche Feb 20, 2025
13f4dae
Merge branch 'main' into fix_Selection_Forms
basseche Feb 24, 2025
f30182a
Remote regulating terminal with creating voltage level on the fly
thangqp Feb 25, 2025
f3562b1
Merge branch 'main' into fix_Selection_Forms
basseche Feb 26, 2025
20d186f
fix second combobox behavior
basseche Feb 26, 2025
e96f334
Merge branch 'main' into fix_Selection_Forms
basseche Feb 26, 2025
0e99c05
Merge branch 'main' into fix_Selection_Forms
thangqp Feb 26, 2025
54dcbb2
Merge remote-tracking branch 'origin/fix_Selection_Forms' into fix_Se…
thangqp Feb 26, 2025
bcbe9fb
rectification
thangqp Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 100 additions & 92 deletions src/components/dialogs/regulating-terminal/regulating-terminal-form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

import { Grid, Popper } from '@mui/material';
import { Box, Grid, Popper } from '@mui/material';
import { createFilterOptions } from '@mui/material/useAutocomplete';
import { EQUIPMENT, ID, TYPE, VOLTAGE_LEVEL } from 'components/utils/field-constants';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -48,7 +48,11 @@ const RegulatingTerminalForm = ({
});

useEffect(() => {
if (watchVoltageLevelId) {
if (
watchVoltageLevelId &&
/* avoid fetch non existing vl id */
voltageLevelOptions.find((vlOption) => vlOption.id === watchVoltageLevelId)
) {
fetchVoltageLevelEquipments(
studyUuid,
currentNodeUuid,
Expand All @@ -62,107 +66,111 @@ const RegulatingTerminalForm = ({
} else {
setEquipmentsOptions([]);
}
}, [watchVoltageLevelId, id, studyUuid, currentNodeUuid, currentRootNetworkUuid]);
}, [watchVoltageLevelId, voltageLevelOptions, id, studyUuid, currentNodeUuid, currentRootNetworkUuid]);

const resetEquipment = useCallback(() => {
setValue(`${id}.${EQUIPMENT}`, null);
}, [id, setValue]);

return (
<>
<Grid container direction={direction || 'row'} spacing={2}>
<Grid
item
xs={direction && (direction === 'column' || direction === 'column-reverse') ? 12 : 6}
align="start"
>
{
<AutocompleteInput
name={`${id}.${VOLTAGE_LEVEL}`}
label="VOLTAGE_LEVEL"
size="small"
freeSolo
forcePopupIcon
autoHighlight
selectOnFocus
disabled={disabled}
id="voltage-level"
options={voltageLevelOptions}
getOptionLabel={(vl) => (vl?.[ID] ? vl?.[ID] : '')}
onChangeCallback={resetEquipment}
previousValue={previousRegulatingTerminalValue}
/* Modifies the filter option method so that when a value is directly entered in the text field, a new option
<Grid container direction={direction || 'row'} spacing={2}>
<Grid
item
xs={direction && (direction === 'column' || direction === 'column-reverse') ? 12 : 6}
align="start"
>
{
<AutocompleteInput
name={`${id}.${VOLTAGE_LEVEL}`}
label="VOLTAGE_LEVEL"
size="small"
// particular outputTransform case for string type when a user typing whatever in the input (onInputChange)
// but not click on an option (onChange)
outputTransform={(value) => {
return typeof value === 'string' ? { id: value, label: value } : value;
}}
forcePopupIcon
autoHighlight
selectOnFocus
disabled={disabled}
id="voltage-level"
options={voltageLevelOptions}
getOptionLabel={(vl) => (vl?.id ? vl?.id : '')}
onChangeCallback={resetEquipment}
previousValue={previousRegulatingTerminalValue}
/* Modifies the filter option method so that when a value is directly entered in the text field, a new option
is created in the options list with a value equal to the input value
*/
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (
params.inputValue !== '' &&
!options.find((opt) => opt?.[ID] === params.inputValue)
) {
filtered.push({
inputValue: params.inputValue,
[ID]: params.inputValue,
});
}
return filtered;
}}
PopperComponent={FittingPopper}
/>
}
</Grid>
<Grid
item
xs={direction && (direction === 'column' || direction === 'column-reverse') ? 12 : 6}
align="start"
>
{/* TODO: autoComplete prop is not working properly with material-ui v4,
it clears the field when blur event is raised, which actually forces the user to validate free input
with enter key for it to be validated.
check if autoComplete prop is fixed in v5 */}
{
<AutocompleteInput
name={`${id}.${EQUIPMENT}`}
//hack to work with freesolo autocomplete
//setting null programatically when freesolo is enable wont empty the field
inputTransform={(value) => (value === null ? '' : value)}
outputTransform={(value) => (value === '' ? null : value)}
label="Equipment"
size="small"
freeSolo
forcePopupIcon
autoHighlight
selectOnFocus
id="equipment"
disabled={!watchVoltageLevelId || disabled}
previousValue={previousEquipmentSectionTypeValue}
options={equipmentsOptions}
getOptionLabel={(equipment) => {
return equipment === ''
? '' // to clear field
: (equipment?.[TYPE] ?? equipmentSectionTypeDefaultValue) +
' : ' +
equipment?.[ID] || '';
}}
/* Modifies the filter option method so that when a value is directly entered in the text field, a new option
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue !== '' && !options.find((opt) => opt?.id === params.inputValue)) {
filtered.push({
id: params.inputValue,
label: params.inputValue,
});
}
return filtered;
}}
PopperComponent={FittingPopper}
allowNewValue
/>
}
</Grid>
<Grid
item
xs={direction && (direction === 'column' || direction === 'column-reverse') ? 12 : 6}
align="start"
>
{
<AutocompleteInput
name={`${id}.${EQUIPMENT}`}
outputTransform={(value) => {
return typeof value === 'string'
? value === ''
? null
: { id: value, type: equipmentSectionTypeDefaultValue }
: value;
}}
inputTransform={(value) => (value === null ? '' : value)}
label="Equipment"
size="small"
forcePopupIcon
autoHighlight
selectOnFocus
id="equipment"
disabled={!watchVoltageLevelId || disabled}
previousValue={previousEquipmentSectionTypeValue}
options={equipmentsOptions}
getOptionLabel={(equipment) => {
return equipment === '' ? '' : equipment?.[ID] || '';
}}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<Box key={key} component="li" {...optionProps}>
{option?.[TYPE] ? `${option?.[TYPE]} : ${option?.[ID]}` : option?.[ID]}
</Box>
);
}}
/* Modifies the filter option method so that when a value is directly entered in the text field, a new option
is created in the options list with a value equal to the input value
*/
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue !== '' && !options.find((opt) => opt?.id === params.inputValue)) {
filtered.push({
[TYPE]: equipmentSectionTypeDefaultValue,
[ID]: params.inputValue,
});
}
return filtered;
}}
PopperComponent={FittingPopper}
/>
}
</Grid>
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue !== '' && !options.find((opt) => opt?.id === params.inputValue)) {
filtered.push({
[TYPE]: equipmentSectionTypeDefaultValue,
[ID]: params.inputValue,
});
}
return filtered;
}}
allowNewValue
PopperComponent={FittingPopper}
/>
}
</Grid>
</>
</Grid>
);
};

Expand Down
Loading