@@ -3,6 +3,7 @@ import { debounce, TextField } from '@mui/material';
3
3
import Autocomplete from '@mui/material/Autocomplete' ;
4
4
import { ParameterSelectProps } from './ParameterSelect' ;
5
5
import { RenderSubValue } from '../../../report/ReportRecordProcessing' ;
6
+ import { SelectionConfirmationButton } from './SelectionConfirmationButton' ;
6
7
7
8
const NodePropertyParameterSelectComponent = ( props : ParameterSelectProps ) => {
8
9
const suggestionsUpdateTimeout =
@@ -20,14 +21,17 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
20
21
}
21
22
return multi ? [ ] : value ;
22
23
} ;
23
- const { multiSelector } = props ;
24
+ const { multiSelector, manualParameterSave } = props ;
24
25
const allParameters = props . allParameters ? props . allParameters : { } ;
25
26
const [ extraRecords , setExtraRecords ] = React . useState ( [ ] ) ;
26
27
const [ inputDisplayText , setInputDisplayText ] = React . useState (
27
28
props . parameterDisplayValue && multiSelector ? '' : props . parameterDisplayValue
28
29
) ;
29
30
const [ inputValue , setInputValue ] = React . useState ( getInitialValue ( props . parameterDisplayValue , multiSelector ) ) ;
30
31
32
+ const [ paramValueLocal , setParamValueLocal ] = React . useState ( props . parameterValue ) ;
33
+ const [ paramValueDisplayLocal , setParamValueDisplayLocal ] = React . useState ( props . parameterDisplayValue ) ;
34
+
31
35
const debouncedQueryCallback = useCallback ( debounce ( props . queryCallback , suggestionsUpdateTimeout ) , [ ] ) ;
32
36
const label = props . settings && props . settings . entityType ? props . settings . entityType : '' ;
33
37
const propertyType = props . settings && props . settings . propertyType ? props . settings . propertyType : '' ;
@@ -42,94 +46,119 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
42
46
43
47
const realValueRowIndex = props . compatibilityMode ? 0 : 1 - displayValueRowIndex ;
44
48
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
+ } ;
45
63
const handleCrossClick = ( isMulti , value ) => {
46
64
if ( isMulti ) {
47
65
if ( value . length == 0 && clearParameterOnFieldClear ) {
48
66
setInputValue ( [ ] ) ;
49
- props . setParameterValue ( undefined ) ;
50
- props . setParameterDisplayValue ( undefined ) ;
51
- return ;
67
+ handleParametersUpdate ( undefined , undefined , manualParameterSave ) ;
68
+ return true ;
52
69
}
53
70
if ( value . length == 0 ) {
54
71
setInputValue ( [ ] ) ;
55
- props . setParameterValue ( [ ] ) ;
56
- props . setParameterDisplayValue ( [ ] ) ;
57
-
72
+ handleParametersUpdate ( [ ] , [ ] , manualParameterSave ) ;
73
+ return true ;
58
74
}
59
75
} else {
60
76
if ( value && clearParameterOnFieldClear ) {
61
77
setInputValue ( null ) ;
62
- props . setParameterValue ( undefined ) ;
63
- props . setParameterDisplayValue ( undefined ) ;
64
- return ;
78
+ handleParametersUpdate ( undefined , undefined , manualParameterSave ) ;
79
+ return true ;
65
80
}
66
81
if ( value == null ) {
67
82
setInputValue ( null ) ;
68
- props . setParameterValue ( defaultValue ) ;
69
- props . setParameterDisplayValue ( defaultValue ) ;
70
-
83
+ handleParametersUpdate ( defaultValue , defaultValue , manualParameterSave ) ;
84
+ return true ;
71
85
}
86
+ return false ;
72
87
}
73
88
} ;
74
89
const propagateSelection = ( event , newDisplay ) => {
75
90
const isMulti = Array . isArray ( newDisplay ) ;
76
- handleCrossClick ( isMulti , newDisplay ) ;
91
+ if ( handleCrossClick ( isMulti , newDisplay ) ) {
92
+ return ;
93
+ }
77
94
let newValue ;
95
+ let valReference = manualParameterSave ? paramValueLocal : props . parameterValue ;
96
+ let valDisplayReference = manualParameterSave ? paramValueDisplayLocal : props . parameterDisplayValue ;
78
97
// Multiple and new entry
79
98
if ( isMulti && inputValue . length < newDisplay . length ) {
80
- newValue = Array . isArray ( props . parameterValue ) ? [ ...props . parameterValue ] : [ props . parameterValue ] ;
99
+ newValue = Array . isArray ( valReference ) ? [ ...valReference ] : [ valReference ] ;
81
100
const newDisplayValue = [ ...newDisplay ] . slice ( - 1 ) [ 0 ] ;
82
101
83
102
let val = extraRecords . filter ( ( r ) => r . _fields [ displayValueRowIndex ] . toString ( ) == newDisplayValue ) [ 0 ] . _fields [
84
103
realValueRowIndex
85
104
] ;
86
105
87
- newValue . push ( val ?. low ?? val ) ;
106
+ newValue . push ( RenderSubValue ( val ) ) ;
88
107
} else if ( ! isMulti ) {
89
- newValue = extraRecords . filter ( ( r ) => r . _fields [ displayValueRowIndex ] . toString ( ) == newDisplay ) [ 0 ] . _fields [
90
- realValueRowIndex
91
- ] ;
108
+ newValue = extraRecords . filter ( ( r ) => ( r ?. _fields ?. [ displayValueRowIndex ] ?. toString ( ) || null ) == newDisplay ) [ 0 ]
109
+ . _fields [ realValueRowIndex ] ;
92
110
93
- newValue = newValue ?. low || newValue ;
111
+ newValue = RenderSubValue ( newValue ) ;
94
112
} else {
95
- let ele = props . parameterDisplayValue . filter ( ( x ) => ! newDisplay . includes ( x ) ) [ 0 ] ;
96
- newValue = [ ...props . parameterValue ] ;
97
- 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 ) ;
98
116
}
99
117
100
118
setInputDisplayText ( isMulti ? '' : newDisplay ) ;
101
119
setInputValue ( newDisplay ) ;
102
120
103
- props . setParameterValue ( newValue ) ;
104
- props . setParameterDisplayValue ( newDisplay ) ;
121
+ handleParametersUpdate ( newValue , newDisplay , manualParameterSave ) ;
105
122
} ;
106
123
return (
107
- < Autocomplete
108
- id = 'autocomplete'
109
- multiple = { multiSelector }
110
- options = { extraRecords . map ( ( r ) => r ?. _fields ?. [ displayValueRowIndex ] || '(no data)' ) . sort ( ) }
111
- style = { { maxWidth : 'calc(100% - 30px)' , marginLeft : '15px' , marginTop : '5px' } }
112
- inputValue = { inputDisplayText }
113
- onInputChange = { ( event , value ) => {
114
- setInputDisplayText ( value ) ;
115
- debouncedQueryCallback ( props . query , { input : `${ value } ` , ...allParameters } , setExtraRecords ) ;
116
- } }
117
- isOptionEqualToValue = { ( option , value ) => {
118
- return ( option && option . toString ( ) ) === ( value && value . toString ( ) ) ;
119
- } }
120
- value = { inputValue }
121
- onChange = { propagateSelection }
122
- renderInput = { ( params ) => (
123
- < TextField
124
- { ...params }
125
- InputLabelProps = { { shrink : true } }
126
- placeholder = 'Start typing...'
127
- label = { helperText ? helperText : `${ label } ${ propertyType } ` }
128
- variant = 'outlined'
129
- />
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' } px)` ,
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
+ < > </ >
130
160
) }
131
- getOptionLabel = { ( option ) => RenderSubValue ( option ) }
132
- />
161
+ </ div >
133
162
) ;
134
163
} ;
135
164
0 commit comments