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

Port pgAgent and it's child nodes to react. Fixes #6645

Browse Source
This commit is contained in:
Akshay Joshi
2021-08-10 17:21:09 +05:30
parent 1ce6c2aee1
commit 1b7a77f5cb
17 changed files with 1366 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/pgadmin/static/js/SchemaView/FormView.jsx
View File

@@ -259,6 +259,9 @@ export default function FormView({
tabsClassname[group] = classes.fullSpace;
fullTabs.push(group);
}
const id = field.id || `control${tabs[group].length}`;
tabs[group].push(
useMemo(()=><MappedFormControl
inputRef={(ele)=>{
@@ -267,11 +270,12 @@ export default function FormView({
}
}}
state={value}
key={field.id}
key={id}
viewHelperProps={viewHelperProps}
name={field.id}
value={value[field.id]}
name={id}
value={value[id]}
{...field}
id={id}
readonly={readonly}
disabled={disabled}
visible={visible}
@@ -279,7 +283,7 @@ export default function FormView({
/* Get the changes on dependent fields as well */
dataDispatch({
type: SCHEMA_STATE_ACTIONS.SET_VALUE,
path: accessPath.concat(field.id),
path: accessPath.concat(id),
value: value,
});
}}
@@ -287,7 +291,7 @@ export default function FormView({
className={classes.controlRow}
noLabel={field.isFullTab}
/>, [
value[field.id],
value[id],
readonly,
disabled,
visible,

8
web/pgadmin/static/js/SchemaView/index.jsx
View File

@@ -225,7 +225,11 @@ function validateSchema(schema, sessData, setError) {
if(dupInd > 0) {
let uniqueColNames = _.filter(field.schema.fields, (uf)=>field.uniqueCol.indexOf(uf.id) > -1)
.map((uf)=>uf.label).join(', ');
setError(field.uniqueCol[0], gettext('%s in %s must be unique.', uniqueColNames, field.label));
if (_.isUndefined(field.label) || _.isNull(field.label)) {
setError(field.uniqueCol[0], gettext('%s must be unique.', uniqueColNames));
} else {
setError(field.uniqueCol[0], gettext('%s in %s must be unique.', uniqueColNames, field.label));
}
return true;
}
/* Loop through data */
@@ -587,6 +591,8 @@ function SchemaDialogView({
if(viewHelperProps.mode !== 'edit') {
/* If new then merge the changed data with origData */
changeData = _.assign({}, schema.origData, changeData);
} else {
changeData[schema.idAttribute] = schema.origData[schema.idAttribute];
}
/* Call the passed incoming getSQLValue func to get the SQL
return of getSQLValue should be a promise.

4
web/pgadmin/static/js/Theme/index.jsx
View File

@@ -157,6 +157,10 @@ basicSettings = createMuiTheme(basicSettings, {
MuiFormHelperText: {
root: {
fontSize: '1em',
},
contained: {
marginLeft: 0,
marginRight: 0,
}
},
MuiTypography: {

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

@@ -28,6 +28,7 @@ import PropTypes from 'prop-types';
import HTMLReactParse from 'html-react-parser';
import { KeyboardDateTimePicker, KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';
import moment from 'moment';
import CodeMirror from './CodeMirror';
import gettext from 'sources/gettext';
@@ -121,7 +122,7 @@ export function FormInput({children, error, className, label, helpMessage, requi
<FormControl error={Boolean(error)} fullWidth>
{React.cloneElement(children, {cid, helpid})}
</FormControl>
<FormHelperText id={helpid} variant="outlined">{helpMessage}</FormHelperText>
<FormHelperText id={helpid} variant="outlined">{HTMLReactParse(helpMessage || '')}</FormHelperText>
</Grid>
</Grid>
);
@@ -202,22 +203,30 @@ export function InputDateTimePicker({value, onChange, readonly, controlProps, ..
onChange(momentVal ? momentVal.format(controlProps.format || 'HH:mm') : null);
};
if (readonly) {
return (<InputText value={value} {...props}/>);
}
if (controlProps && controlProps.pickerType === 'Date') {
return (
<MuiPickersUtilsProvider utils={MomentUtils}>
<KeyboardDatePicker value={value} onChange={onDateChange} readOnly={Boolean(readonly)}
format={controlProps.format || 'YYYY-MM-DD'}
placeholder={controlProps.placeholder || 'YYYY-MM-DD'}
{...props}/>
autoOk={controlProps.autoOk || false}
{...props} label={''}/>
</MuiPickersUtilsProvider>
);
} else if (controlProps && controlProps.pickerType === 'Time') {
let newValue = (!_.isNull(value) && !_.isUndefined(value)) ? moment(value, 'HH:mm').toDate() : value;
return (
<MuiPickersUtilsProvider utils={MomentUtils}>
<KeyboardTimePicker value={value} onChange={onTimeChange} readOnly={Boolean(readonly)}
<KeyboardTimePicker value={newValue} onChange={onTimeChange} readOnly={Boolean(readonly)}
format={controlProps.format || 'HH:mm'}
placeholder={controlProps.placeholder || 'HH:mm'}
{...props}/>
autoOk={controlProps.autoOk || false}
ampm={controlProps.ampm || false}
{...props} label={''}/>
</MuiPickersUtilsProvider>
);
}
@@ -229,13 +238,15 @@ export function InputDateTimePicker({value, onChange, readonly, controlProps, ..
ampm={controlProps.ampm || false}
format={controlProps.format || 'YYYY-MM-DD HH:mm:ss Z'}
placeholder={controlProps.placeholder || 'YYYY-MM-DD HH:mm:ss Z'}
autoOk={controlProps.autoOk || true}
autoOk={controlProps.autoOk || false}
disablePast={controlProps.disablePast || false}
value={value}
invalidDateMessage=""
maxDateMessage=""
minDateMessage=""
onChange={onDateTimeChange}
readOnly={Boolean(readonly)}
{...props}
{...props} label={''}
/>
</MuiPickersUtilsProvider>
);
@@ -636,12 +647,13 @@ function getRealValue(options, value, creatable, formatter) {
realValue = [...value];
/* If multi select options need to be in some format by UI, use formatter */
if(formatter) {
realValue = formatter.fromRaw(realValue);
}
if(creatable) {
realValue = realValue.map((val)=>({label:val, value: val}));
realValue = formatter.fromRaw(realValue, options);
} else {
realValue = realValue.map((val)=>(_.find(options, (option)=>option.value==val)));
if(creatable) {
realValue = realValue.map((val)=>({label:val, value: val}));
} else {
realValue = realValue.map((val)=>(_.find(options, (option)=>_.isEqual(option.value, val))));
}
}
} else {
realValue = _.find(options, (option)=>option.value==value) ||
@@ -676,18 +688,6 @@ export function InputSelect({
return ()=>umounted=true;
}, [optionsReloadBasis]);
const onChangeOption = useCallback((selectVal, action)=>{
if(_.isArray(selectVal)) {
/* If multi select options need to be in some format by UI, use formatter */
selectVal = selectVal.map((option)=>option.value);
if(controlProps.formatter) {
selectVal = controlProps.formatter.toRaw(selectVal);
}
onChange && onChange(selectVal, action.name);
} else {
onChange && onChange(selectVal ? selectVal.value : null, action.name);
}
}, [onChange]);
/* Apply filter if any */
const filteredOptions = (controlProps.filter && controlProps.filter(finalOptions)) || finalOptions;
@@ -700,6 +700,24 @@ export function InputSelect({
const styles = customReactSelectStyles(theme, readonly || disabled);
const onChangeOption = useCallback((selectVal, action)=>{
if(_.isArray(selectVal)) {
// Check if select all option is selected
if (!_.isUndefined(selectVal.find(x => x.label === 'Select All'))) {
selectVal = filteredOptions;
}
/* If multi select options need to be in some format by UI, use formatter */
if(controlProps.formatter) {
selectVal = controlProps.formatter.toRaw(selectVal, filteredOptions);
} else {
selectVal = selectVal.map((option)=>option.value);
}
onChange && onChange(selectVal, action.name);
} else {
onChange && onChange(selectVal ? selectVal.value : null, action.name);
}
}, [onChange, filteredOptions]);
const commonProps = {
components: {
Option: CustomSelectOption,
@@ -709,7 +727,7 @@ export function InputSelect({
openMenuOnClick: !readonly,
onChange: onChangeOption,
isLoading: isLoading,
options: filteredOptions,
options: controlProps.allowSelectAll ? [{ label: 'Select All', value: '*' }, ...filteredOptions] : filteredOptions,
value: realValue,
menuPortalTarget: document.body,
styles: styles,