IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added support for grouping in input select boxes and allow setting default selected options.

Browse Source
This commit is contained in:
Aditya Toshniwal 2022-01-18 18:44:55 +05:30 committed by Akshay Joshi
parent 6adc1bfd42
commit fbc3b1a318
1 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -618,6 +618,12 @@ const customReactSelectStyles = (theme, readonly)=>({
...provided, ...provided,
padding: theme.otherVars.reactSelect.padding, padding: theme.otherVars.reactSelect.padding,
}), }),
groupHeading: (provided)=>({
...provided,
color: 'inherit',
fontSize: '0.85em',
textTransform: 'none',
}),
menu: (provided)=>({ menu: (provided)=>({
...provided, ...provided,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
@ -701,6 +707,16 @@ CustomSelectSingleValue.propTypes = {
data: PropTypes.object, data: PropTypes.object,
}; };
export function flattenSelectOptions(options) {
return _.flatMap(options, (option)=>{
if(option.options) {
return option.options;
} else {
return option;
}
});
}
function getRealValue(options, value, creatable, formatter) { function getRealValue(options, value, creatable, formatter) {
let realValue = null; let realValue = null;
if(_.isArray(value)) { if(_.isArray(value)) {
@ -716,7 +732,8 @@ function getRealValue(options, value, creatable, formatter) {
} }
} }
} else { } else {
realValue = _.find(options, (option)=>option.value==value) || let flatOptions = flattenSelectOptions(options);
realValue = _.find(flatOptions, (option)=>option.value==value) ||
(creatable && !_.isUndefined(value) && !_.isNull(value) ? {label:value, value: value} : null); (creatable && !_.isUndefined(value) && !_.isNull(value) ? {label:value, value: value} : null);
} }
return realValue; return realValue;
@ -742,6 +759,17 @@ export function InputSelect({
/* If component unmounted, dont update state */ /* If component unmounted, dont update state */
if(!umounted) { if(!umounted) {
optionsLoaded && optionsLoaded(res, value); optionsLoaded && optionsLoaded(res, value);
/* Auto select if any option has key as selected */
const flatRes = flattenSelectOptions(res || []);
let selectedVal;
if(controlProps.multiple) {
selectedVal = _.filter(flatRes, (o)=>o.selected)?.map((o)=>o.value);
} else {
selectedVal = _.find(flatRes, (o)=>o.selected)?.value;
}
if(!_.isUndefined(selectedVal)) {
onChange && onChange(selectedVal);
}
setFinalOptions([res || [], false]); setFinalOptions([res || [], false]);
} }
}); });
@ -751,7 +779,8 @@ export function InputSelect({
/* Apply filter if any */ /* Apply filter if any */
const filteredOptions = (controlProps.filter && controlProps.filter(finalOptions)) || finalOptions; const filteredOptions = (controlProps.filter && controlProps.filter(finalOptions)) || finalOptions;
let realValue = getRealValue(filteredOptions, value, controlProps.creatable, controlProps.formatter); const flatFiltered = flattenSelectOptions(filteredOptions);
let realValue = getRealValue(flatFiltered, value, controlProps.creatable, controlProps.formatter);
if(realValue && _.isPlainObject(realValue) && _.isUndefined(realValue.value)) { if(realValue && _.isPlainObject(realValue) && _.isUndefined(realValue.value)) {
console.error('Undefined option value not allowed', realValue, filteredOptions); console.error('Undefined option value not allowed', realValue, filteredOptions);
} }
@ -763,7 +792,7 @@ export function InputSelect({
const styles = customReactSelectStyles(theme, readonly || disabled); const styles = customReactSelectStyles(theme, readonly || disabled);
const onChangeOption = useCallback((selectVal, action)=>{ const onChangeOption = useCallback((selectVal)=>{
if(_.isArray(selectVal)) { if(_.isArray(selectVal)) {
// Check if select all option is selected // Check if select all option is selected
if (!_.isUndefined(selectVal.find(x => x.label === 'Select All'))) { if (!_.isUndefined(selectVal.find(x => x.label === 'Select All'))) {
@ -775,9 +804,9 @@ export function InputSelect({
} else { } else {
selectVal = selectVal.map((option)=>option.value); selectVal = selectVal.map((option)=>option.value);
} }
onChange && onChange(selectVal, action.name); onChange && onChange(selectVal);
} else { } else {
onChange && onChange(selectVal ? selectVal.value : null, action.name); onChange && onChange(selectVal ? selectVal.value : null);
} }
}, [onChange, filteredOptions]); }, [onChange, filteredOptions]);
@ -797,7 +826,7 @@ export function InputSelect({
inputId: cid, inputId: cid,
placeholder: (readonly || disabled) ? '' : controlProps.placeholder || gettext('Select an item...'), placeholder: (readonly || disabled) ? '' : controlProps.placeholder || gettext('Select an item...'),
...otherProps, ...otherProps,
...props ...props,
}; };
if(!controlProps.creatable) { if(!controlProps.creatable) {
return ( return (
@ -856,9 +885,9 @@ export function InputColor({value, controlProps, disabled, onChange, currObj}) {
const pickrObj = useRef(); const pickrObj = useRef();
const classes = useStyles(); const classes = useStyles();
const setColor = (value)=>{ const setColor = (newVal)=>{
pickrObj.current && pickrObj.current &&
pickrObj.current.setColor((_.isUndefined(value) || value == '') ? pickrOptions.defaultColor : value); pickrObj.current.setColor((_.isUndefined(newVal) || newVal == '') ? pickrOptions.defaultColor : newVal);
}; };
const destroyPickr = ()=>{ const destroyPickr = ()=>{