Add sortfield logic in editPage

This commit is contained in:
soupette 2018-07-23 17:46:05 +02:00
parent 4916f9277b
commit 02acfefd01
7 changed files with 27 additions and 41 deletions

View File

@ -43,6 +43,7 @@ class InputAddon extends React.Component {
tabIndex, tabIndex,
value, value,
} = this.props; } = this.props;
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
return ( return (
<div className={cn(styles.inputAddon, 'input-group', !isEmpty(className) && className)} style={style}> <div className={cn(styles.inputAddon, 'input-group', !isEmpty(className) && className)} style={style}>
@ -60,7 +61,7 @@ class InputAddon extends React.Component {
</span> </span>
)} )}
</FormattedMessage> </FormattedMessage>
<FormattedMessage id={placeholder} defaultMessage={placeholder}> <FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
{(message) => ( {(message) => (
<input <input
autoFocus={autoFocus} autoFocus={autoFocus}

View File

@ -18,9 +18,10 @@ import styles from './styles.scss';
/* eslint-disable react/jsx-boolean-value */ /* eslint-disable react/jsx-boolean-value */
function InputDate(props) { function InputDate(props) {
const value = isObject(props.value) && props.value._isAMomentObject === true ? props.value : moment(props.value); const value = isObject(props.value) && props.value._isAMomentObject === true ? props.value : moment(props.value);
const formattedPlaceholder = props.placeholder === '' ? 'app.utils.placeholder.defaultMessage' : props.placeholder;
return ( return (
<FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}> <FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
{(placeholder) => ( {(placeholder) => (
<DateTime <DateTime
dateFormat='YYYY-MM-DD' dateFormat='YYYY-MM-DD'

View File

@ -39,6 +39,7 @@ class InputEmail extends React.Component {
tabIndex, tabIndex,
value, value,
} = this.props; } = this.props;
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
return ( return (
<div className={cn(styles.inputEmail, 'input-group', !isEmpty(className) && className)} style={style}> <div className={cn(styles.inputEmail, 'input-group', !isEmpty(className) && className)} style={style}>
@ -50,7 +51,7 @@ class InputEmail extends React.Component {
!deactivateErrorHighlight && error && styles.errorAddon, !deactivateErrorHighlight && error && styles.errorAddon,
)} )}
/> />
<FormattedMessage id={placeholder} defaultMessage={placeholder}> <FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
{(message) => ( {(message) => (
<input <input
autoFocus={autoFocus} autoFocus={autoFocus}

View File

@ -8,8 +8,10 @@ import styles from './styles.scss';
/* eslint-disable jsx-a11y/no-autofocus */ /* eslint-disable jsx-a11y/no-autofocus */
function InputNumber(props) { function InputNumber(props) {
const formattedPlaceholder = props.placeholder === '' ? 'app.utils.placeholder.defaultMessage' : props.placeholder;
return ( return (
<FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}> <FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
{(message) => ( {(message) => (
<input <input
autoFocus={props.autoFocus} autoFocus={props.autoFocus}

View File

@ -34,12 +34,12 @@ class InputPassword extends React.Component {
tabIndex, tabIndex,
value, value,
} = this.props; } = this.props;
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
const eyeColor = this.state.showPassword ? { color: 'black' } : { color: '#9EA7B8' }; const eyeColor = this.state.showPassword ? { color: 'black' } : { color: '#9EA7B8' };
return ( return (
<Fragment> <Fragment>
<FormattedMessage id={placeholder} defaultMessage={placeholder}> <FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
{(message) => ( {(message) => (
<input <input
autoComplete="new-password" autoComplete="new-password"

View File

@ -40,6 +40,7 @@ class InputSearch extends React.Component {
tabIndex, tabIndex,
value, value,
} = this.props; } = this.props;
const formattedPlaceholder = placeholder === '' ? 'app.utils.placeholder.defaultMessage' : placeholder;
return ( return (
<div className={cn(styles.inputSearch, 'input-group', !isEmpty(className) && className)} style={style}> <div className={cn(styles.inputSearch, 'input-group', !isEmpty(className) && className)} style={style}>
@ -51,7 +52,7 @@ class InputSearch extends React.Component {
!deactivateErrorHighlight && error && styles.errorAddon, !deactivateErrorHighlight && error && styles.errorAddon,
)} )}
/> />
<FormattedMessage id={placeholder} defaultMessage={placeholder}> <FormattedMessage id={formattedPlaceholder} defaultMessage={formattedPlaceholder}>
{(message) => ( {(message) => (
<input <input
autoFocus={autoFocus} autoFocus={autoFocus}

View File

@ -12,8 +12,6 @@ import {
has, has,
isEmpty, isEmpty,
isFunction, isFunction,
merge,
omit,
upperFirst, upperFirst,
} from 'lodash'; } from 'lodash';
@ -60,26 +58,6 @@ const getInputType = (type = '') => {
}; };
class Edit extends React.PureComponent { class Edit extends React.PureComponent {
state = { currentLayout: {}, displayedFields: {} };
componentDidMount() {
this.setLayout(this.props);
}
componentWillReceiveProps(nextProps) {
if (isEmpty(this.props.layout) && !isEmpty(nextProps.layout)) {
this.setLayout(nextProps);
}
}
setLayout = (props) => {
// const currentLayout = get(props.layout, [props.modelName, 'attributes']);
const currentLayout = get(props.layout, ['attributes']);
const displayedFields = merge(this.getUploadRelations(props), get(currentLayout), omit(props.schema.fields, 'id'));
this.setState({ currentLayout, displayedFields });
}
getInputErrors = (attr) => { getInputErrors = (attr) => {
const index = findIndex(this.props.formErrors, ['name', attr]); const index = findIndex(this.props.formErrors, ['name', attr]);
return index !== -1 ? this.props.formErrors[index].errors : []; return index !== -1 ? this.props.formErrors[index].errors : [];
@ -90,14 +68,17 @@ class Edit extends React.PureComponent {
* @param {String} attr [description] * @param {String} attr [description]
* @return {Object} Object containing the Input's label customBootstrapClass, ... * @return {Object} Object containing the Input's label customBootstrapClass, ...
*/ */
getInputLayout = (attr) => ( getInputLayout = (attr) => {
Object.keys(get(this.state.currentLayout, attr, {})).reduce((acc, current) => { const { layout } = this.props;
acc[current] = isFunction(this.state.currentLayout[attr][current]) ?
this.state.currentLayout[attr][current](this) : return Object.keys(get(layout, ['attributes', attr], {})).reduce((acc, current) => {
this.state.currentLayout[attr][current]; acc[current] = isFunction(layout.attributes[attr][current]) ?
layout.attributes[attr][current](this) :
layout.attributes[attr][current];
return acc; return acc;
}, {}) }, {});
) };
/** /**
* Retrieve the input's validations * Retrieve the input's validations
@ -132,15 +113,14 @@ class Edit extends React.PureComponent {
fileRelationAllowMultipleUpload = (relationName) => has(this.props.schema, ['relations', relationName, 'collection']); fileRelationAllowMultipleUpload = (relationName) => has(this.props.schema, ['relations', relationName, 'collection']);
// orderAttributes = (displayedFields) => Object.keys(displayedFields).sort(name => Object.keys(this.getUploadRelations(this.props)).includes(name)); orderAttributes = () => get(this.props.schema, ['editDisplay', 'fields'], []);
orderAttributes = (displayedFields) => Object.keys(displayedFields);
render(){ render(){
return ( return (
<div className={styles.form}> <div className={styles.form}>
<div className="row"> <div className="row">
{this.orderAttributes(this.state.displayedFields).map((attr, key) => { {this.orderAttributes().map((attr, key) => {
const details = this.state.displayedFields[attr]; const details = get(this.props.schema, ['editDisplay', 'availableFields', attr]);
// Retrieve the input's bootstrapClass from the layout // Retrieve the input's bootstrapClass from the layout
const layout = this.getInputLayout(attr); const layout = this.getInputLayout(attr);
const appearance = get(layout, 'appearance'); const appearance = get(layout, 'appearance');
@ -159,7 +139,7 @@ class Edit extends React.PureComponent {
name={attr} name={attr}
onBlur={this.props.onBlur} onBlur={this.props.onBlur}
onChange={this.props.onChange} onChange={this.props.onChange}
placeholder={get(layout, 'placeholder') || details.placeholder} placeholder={get(layout, 'placeholder') || details.placeholder || ''}
resetProps={this.props.resetProps} resetProps={this.props.resetProps}
selectOptions={get(this.props.attributes, [attr, 'enum'])} selectOptions={get(this.props.attributes, [attr, 'enum'])}
type={type} type={type}