@@ -3,6 +3,7 @@ import { debounce, TextField } from '@mui/material';
33import Autocomplete from '@mui/material/Autocomplete' ;
44import { ParameterSelectProps } from './ParameterSelect' ;
55import { RenderSubValue } from '../../../report/ReportRecordProcessing' ;
6+ import { SelectionConfirmationButton } from './SelectionConfirmationButton' ;
67
78const NodePropertyParameterSelectComponent = ( props : ParameterSelectProps ) => {
89 const suggestionsUpdateTimeout =
@@ -20,14 +21,17 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
2021 }
2122 return multi ? [ ] : value ;
2223 } ;
23- const { multiSelector } = props ;
24+ const { multiSelector, manualParameterSave } = props ;
2425 const allParameters = props . allParameters ? props . allParameters : { } ;
2526 const [ extraRecords , setExtraRecords ] = React . useState ( [ ] ) ;
2627 const [ inputDisplayText , setInputDisplayText ] = React . useState (
2728 props . parameterDisplayValue && multiSelector ? '' : props . parameterDisplayValue
2829 ) ;
2930 const [ inputValue , setInputValue ] = React . useState ( getInitialValue ( props . parameterDisplayValue , multiSelector ) ) ;
3031
32+ const [ paramValueLocal , setParamValueLocal ] = React . useState ( props . parameterValue ) ;
33+ const [ paramValueDisplayLocal , setParamValueDisplayLocal ] = React . useState ( props . parameterDisplayValue ) ;
34+
3135 const debouncedQueryCallback = useCallback ( debounce ( props . queryCallback , suggestionsUpdateTimeout ) , [ ] ) ;
3236 const label = props . settings && props . settings . entityType ? props . settings . entityType : '' ;
3337 const propertyType = props . settings && props . settings . propertyType ? props . settings . propertyType : '' ;
@@ -42,92 +46,119 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
4246
4347 const realValueRowIndex = props . compatibilityMode ? 0 : 1 - displayValueRowIndex ;
4448
49+ const manualHandleParametersUpdate = ( ) => {
50+ handleParametersUpdate ( paramValueLocal , paramValueDisplayLocal , false ) ;
51+ } ;
52+ const handleParametersUpdate = ( value , displayValue , manual = false ) => {
53+ setParamValueLocal ( value ) ;
54+ setParamValueDisplayLocal ( displayValue ) ;
55+
56+ if ( manual ) {
57+ return ;
58+ }
59+
60+ props . setParameterValue ( value ) ;
61+ props . setParameterDisplayValue ( displayValue ) ;
62+ } ;
4563 const handleCrossClick = ( isMulti , value ) => {
4664 if ( isMulti ) {
4765 if ( value . length == 0 && clearParameterOnFieldClear ) {
4866 setInputValue ( [ ] ) ;
49- props . setParameterValue ( undefined ) ;
50- props . setParameterDisplayValue ( undefined ) ;
51- return ;
67+ handleParametersUpdate ( undefined , undefined , manualParameterSave ) ;
68+ return true ;
5269 }
5370 if ( value . length == 0 ) {
5471 setInputValue ( [ ] ) ;
55- props . setParameterValue ( [ ] ) ;
56- props . setParameterDisplayValue ( [ ] ) ;
72+ handleParametersUpdate ( [ ] , [ ] , manualParameterSave ) ;
73+ return true ;
5774 }
5875 } else {
5976 if ( value && clearParameterOnFieldClear ) {
6077 setInputValue ( null ) ;
61- props . setParameterValue ( undefined ) ;
62- props . setParameterDisplayValue ( undefined ) ;
63- return ;
78+ handleParametersUpdate ( undefined , undefined , manualParameterSave ) ;
79+ return true ;
6480 }
6581 if ( value == null ) {
6682 setInputValue ( null ) ;
67- props . setParameterValue ( defaultValue ) ;
68- props . setParameterDisplayValue ( defaultValue ) ;
83+ handleParametersUpdate ( defaultValue , defaultValue , manualParameterSave ) ;
84+ return true ;
6985 }
86+ return false ;
7087 }
7188 } ;
7289 const propagateSelection = ( event , newDisplay ) => {
7390 const isMulti = Array . isArray ( newDisplay ) ;
74- handleCrossClick ( isMulti , newDisplay ) ;
91+ if ( handleCrossClick ( isMulti , newDisplay ) ) {
92+ return ;
93+ }
7594 let newValue ;
95+ let valReference = manualParameterSave ? paramValueLocal : props . parameterValue ;
96+ let valDisplayReference = manualParameterSave ? paramValueDisplayLocal : props . parameterDisplayValue ;
7697 // Multiple and new entry
7798 if ( isMulti && inputValue . length < newDisplay . length ) {
78- newValue = Array . isArray ( props . parameterValue ) ? [ ...props . parameterValue ] : [ props . parameterValue ] ;
99+ newValue = Array . isArray ( valReference ) ? [ ...valReference ] : [ valReference ] ;
79100 const newDisplayValue = [ ...newDisplay ] . slice ( - 1 ) [ 0 ] ;
80101
81102 let val = extraRecords . filter ( ( r ) => r . _fields [ displayValueRowIndex ] . toString ( ) == newDisplayValue ) [ 0 ] . _fields [
82103 realValueRowIndex
83104 ] ;
84105
85- newValue . push ( val ?. low ?? val ) ;
106+ newValue . push ( RenderSubValue ( val ) ) ;
86107 } else if ( ! isMulti ) {
87- newValue = extraRecords . filter ( ( r ) => r . _fields [ displayValueRowIndex ] . toString ( ) == newDisplay ) [ 0 ] . _fields [
88- realValueRowIndex
89- ] ;
108+ newValue = extraRecords . filter ( ( r ) => ( r ?. _fields ?. [ displayValueRowIndex ] ?. toString ( ) || null ) == newDisplay ) [ 0 ]
109+ . _fields [ realValueRowIndex ] ;
90110
91- newValue = newValue ?. low || newValue ;
111+ newValue = RenderSubValue ( newValue ) ;
92112 } else {
93- let ele = props . parameterDisplayValue . filter ( ( x ) => ! newDisplay . includes ( x ) ) [ 0 ] ;
94- newValue = [ ...props . parameterValue ] ;
95- newValue . splice ( props . parameterDisplayValue . indexOf ( ele ) , 1 ) ;
113+ let ele = valDisplayReference . filter ( ( x ) => ! newDisplay . includes ( x ) ) [ 0 ] ;
114+ newValue = [ ...valReference ] ;
115+ newValue . splice ( valDisplayReference . indexOf ( ele ) , 1 ) ;
96116 }
97117
98118 setInputDisplayText ( isMulti ? '' : newDisplay ) ;
99119 setInputValue ( newDisplay ) ;
100120
101- props . setParameterValue ( newValue ) ;
102- props . setParameterDisplayValue ( newDisplay ) ;
121+ handleParametersUpdate ( newValue , newDisplay , manualParameterSave ) ;
103122 } ;
104123 return (
105- < Autocomplete
106- id = 'autocomplete'
107- multiple = { multiSelector }
108- options = { extraRecords . map ( ( r ) => r ?. _fields ?. [ displayValueRowIndex ] || '(no data)' ) . sort ( ) }
109- style = { { maxWidth : 'calc(100% - 30px)' , marginLeft : '15px' , marginTop : '5px' } }
110- inputValue = { inputDisplayText }
111- onInputChange = { ( event , value ) => {
112- setInputDisplayText ( value ) ;
113- debouncedQueryCallback ( props . query , { input : `${ value } , ...allParameters } , setExtraRecords ) ;
114- } }
115- isOptionEqualToValue = { ( option , value ) => {
116- return ( option && option . toString ( ) ) === ( value && value . toString ( ) ) ;
117- } }
118- value = { inputValue }
119- onChange = { propagateSelection }
120- renderInput = { ( params ) => (
121- < TextField
122- { ...params }
123- InputLabelProps = { { shrink : true } }
124- placeholder = 'Start typing...'
125- label = { helperText ? helperText : `${ label } ${ propertyType } }
126- variant = 'outlined'
127- />
124+ < div className = { 'n-flex n-flex-row n-flex-wrap n-items-center' } >
125+ < Autocomplete
126+ id = 'autocomplete'
127+ multiple = { multiSelector }
128+ options = { extraRecords . map ( ( r ) => r ?. _fields ?. [ displayValueRowIndex ] || '(no data)' ) . sort ( ) }
129+ style = { {
130+ maxWidth : 'calc(100% - 30px)' ,
131+ minWidth : `calc(100% - ${ manualParameterSave ? '80' : '30' } ,
132+ marginLeft : '15px' ,
133+ marginTop : '5px' ,
134+ } }
135+ inputValue = { inputDisplayText || '' }
136+ onInputChange = { ( event , value ) => {
137+ setInputDisplayText ( value ) ;
138+ debouncedQueryCallback ( props . query , { input : `${ value } , ...allParameters } , setExtraRecords ) ;
139+ } }
140+ isOptionEqualToValue = { ( option , value ) => {
141+ return ( option && option . toString ( ) ) === ( value && value . toString ( ) ) ;
142+ } }
143+ value = { inputValue }
144+ onChange = { propagateSelection }
145+ renderInput = { ( params ) => (
146+ < TextField
147+ { ...params }
148+ InputLabelProps = { { shrink : true } }
149+ placeholder = 'Start typing...'
150+ label = { helperText ? helperText : `${ label } ${ propertyType } }
151+ variant = 'outlined'
152+ />
153+ ) }
154+ getOptionLabel = { ( option ) => RenderSubValue ( option ) }
155+ />
156+ { manualParameterSave ? (
157+ < SelectionConfirmationButton onClick = { ( ) => manualHandleParametersUpdate ( ) } key = { `selectionConfirmation` } />
158+ ) : (
159+ < > </ >
128160 ) }
129- getOptionLabel = { ( option ) => RenderSubValue ( option ) }
130- />
161+ </ div >
131162 ) ;
132163} ;
133164
0 commit comments