IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-01-26 08:16:44 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added field key - optionsReloadBasis to allow options to be re-loaded. Add formatters to select and input control.

Browse Source
This commit is contained in:
Aditya Toshniwal 2021-07-09 10:26:02 +05:30 committed by Akshay Joshi
parent de3f3e6e61
commit 79e1b0c5d8
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/pgadmin/static/js/SchemaView/MappedControl.jsx
View File

@ -158,7 +158,7 @@ MappedCellControlBase.propTypes = {
const ALLOWED_PROPS_FIELD_COMMON = [ const ALLOWED_PROPS_FIELD_COMMON = [
'mode', 'value', 'readonly', 'disabled', 'hasError', 'id', 'mode', 'value', 'readonly', 'disabled', 'hasError', 'id',
'label', 'options', 'optionsLoaded', 'controlProps', 'schema', 'inputRef', 'label', 'options', 'optionsLoaded', 'controlProps', 'schema', 'inputRef',
'visible', 'autoFocus', 'helpMessage', 'className' 'visible', 'autoFocus', 'helpMessage', 'className', 'optionsReloadBasis'
]; ];
const ALLOWED_PROPS_FIELD_FORM = [ const ALLOWED_PROPS_FIELD_FORM = [

29
web/pgadmin/static/js/components/FormComponents.jsx
View File

@ -181,6 +181,18 @@ export const InputText = forwardRef(({
const classes = useStyles(); const classes = useStyles();
let onChangeFinal = (changeVal)=>{
if(controlProps?.formatter) {
changeVal = controlProps.formatter.toRaw(changeVal);
}
onChange && onChange(changeVal);
}
let finalValue = (_.isNull(value) || _.isUndefined(value)) ? '' : value;
if(controlProps?.formatter) {
finalValue = controlProps.formatter.fromRaw(finalValue);
}
return( return(
<OutlinedInput <OutlinedInput
ref={ref} ref={ref}
@ -196,8 +208,8 @@ export const InputText = forwardRef(({
disabled={Boolean(disabled)} disabled={Boolean(disabled)}
rows={4} rows={4}
notched={false} notched={false}
value={(_.isNull(value) || _.isUndefined(value)) ? '' : value} value={(_.isNull(finalValue) || _.isUndefined(finalValue)) ? '' : finalValue}
onChange={onChange} onChange={onChangeFinal}
{...controlProps} {...controlProps}
{...props} {...props}
/> />
@ -536,7 +548,7 @@ function getRealValue(options, value, creatable, formatter) {
realValue = [...value]; realValue = [...value];
/* If multi select options need to be in some format by UI, use formatter */ /* If multi select options need to be in some format by UI, use formatter */
if(formatter) { if(formatter) {
realValue = formatter.toSelect(realValue); realValue = formatter.fromRaw(realValue);
} }
if(creatable) { if(creatable) {
realValue = realValue.map((val)=>({label:val, value: val})); realValue = realValue.map((val)=>({label:val, value: val}));
@ -550,10 +562,15 @@ function getRealValue(options, value, creatable, formatter) {
} }
export function InputSelect({ export function InputSelect({
cid, onChange, options, readonly=false, value, controlProps={}, optionsLoaded, disabled, ...props}) { cid, onChange, options, readonly=false, value, controlProps={}, optionsLoaded, optionsReloadBasis, disabled, ...props}) {
const [[finalOptions, isLoading], setFinalOptions] = useState([[], true]); const [[finalOptions, isLoading], setFinalOptions] = useState([[], true]);
const theme = useTheme(); const theme = useTheme();
/* React will always take options var as changed parameter. So,
We cannot run the below effect with options dependency as it will keep on
loading the options. optionsReloadBasis is helpful to avoid repeated
options load. If optionsReloadBasis value changes, then options will be loaded again.
*/
useEffect(()=>{ useEffect(()=>{
let optPromise = options, umounted=false; let optPromise = options, umounted=false;
if(typeof options === 'function') { if(typeof options === 'function') {
@ -568,14 +585,14 @@ export function InputSelect({
} }
}); });
return ()=>umounted=true; return ()=>umounted=true;
}, []); }, [optionsReloadBasis]);
const onChangeOption = useCallback((selectVal, action)=>{ const onChangeOption = useCallback((selectVal, action)=>{
if(_.isArray(selectVal)) { if(_.isArray(selectVal)) {
/* If multi select options need to be in some format by UI, use formatter */ /* If multi select options need to be in some format by UI, use formatter */
selectVal = selectVal.map((option)=>option.value); selectVal = selectVal.map((option)=>option.value);
if(controlProps.formatter) { if(controlProps.formatter) {
selectVal = controlProps.formatter.fromSelect(selectVal); selectVal = controlProps.formatter.toRaw(selectVal);
} }
onChange && onChange(selectVal, action.name); onChange && onChange(selectVal, action.name);
} else { } else {