yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-08 14:19:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #2490

Browse Source
This commit is contained in:
soupette 2019-04-05 00:35:12 +02:00
parent 0e3632b8b2
commit 04e7ff65c0
2 changed files with 60 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
View File

@ -167,7 +167,7 @@ class SelectMany extends React.PureComponent {
return ( return (
<div className={`form-group ${styles.selectMany} ${value.length > 4 && styles.selectManyUpdate}`}> <div className={`form-group ${styles.selectMany} ${value.length > 4 && styles.selectManyUpdate}`}>
<label htmlFor={this.props.relation.alias}> <label htmlFor={this.props.relation.alias}>
{this.props.relation.alias} <span>({value.length})</span> {get(this.props.relation, 'label', this.props.relation.alias)} <span>({value.length})</span>
</label> </label>
{description} {description}
<Select <Select

100
packages/strapi-plugin-content-manager/admin/src/components/SelectOne/index.js
View File

@ -16,7 +16,8 @@ import templateObject from 'utils/templateObject';
import styles from './styles.scss'; import styles from './styles.scss';
class SelectOne extends React.Component { // eslint-disable-line react/prefer-stateless-function class SelectOne extends React.Component {
// eslint-disable-line react/prefer-stateless-function
constructor(props) { constructor(props) {
super(props); super(props);
@ -37,7 +38,7 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
} }
} }
getOptions = (query) => { getOptions = query => {
const params = { const params = {
_limit: 20, _limit: 20,
_start: this.state.toSkip, _start: this.state.toSkip,
@ -52,8 +53,12 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
} }
// Request URL // Request URL
const requestUrlSuffix = query && get(this.props.record, [this.props.relation.alias]) ? get(this.props.record, [this.props.relation.alias]) : ''; const requestUrlSuffix =
const requestUrl = `/content-manager/explorer/${this.props.relation.model || this.props.relation.collection}/${requestUrlSuffix}`; query && get(this.props.record, [this.props.relation.alias])
? get(this.props.record, [this.props.relation.alias])
: '';
const requestUrl = `/content-manager/explorer/${this.props.relation.model ||
this.props.relation.collection}/${requestUrlSuffix}`;
// Call our request helper (see 'utils/request') // Call our request helper (see 'utils/request')
return request(requestUrl, { return request(requestUrl, {
@ -61,16 +66,20 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
params, params,
}) })
.then(response => { .then(response => {
const options = isArray(response) ? /* eslint-disable indent */
map(response, item => ({ const options = isArray(response)
value: item, ? map(response, item => ({
label: templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField, value: item,
})) : label: templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField,
[{ }))
value: response, : [
label: templateObject({ mainField: this.props.relation.displayedAttribute }, response).mainField, {
}]; value: response,
label: templateObject({ mainField: this.props.relation.displayedAttribute }, response)
.mainField,
},
];
/* eslint-disable indent */
const newOptions = cloneDeep(this.state.options); const newOptions = cloneDeep(this.state.options);
options.map(option => { options.map(option => {
// Don't add the values when searching // Don't add the values when searching
@ -87,9 +96,9 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
.catch(() => { .catch(() => {
strapi.notification.error('content-manager.notification.error.relationship.fetch'); strapi.notification.error('content-manager.notification.error.relationship.fetch');
}); });
} };
handleChange = (value) => { handleChange = value => {
const target = { const target = {
name: `record.${this.props.relation.alias}`, name: `record.${this.props.relation.alias}`,
value, value,
@ -97,7 +106,7 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
}; };
this.props.setRecordAttribute({ target }); this.props.setRecordAttribute({ target });
} };
handleBottomScroll = () => { handleBottomScroll = () => {
this.setState(prevState => { this.setState(prevState => {
@ -105,7 +114,7 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
toSkip: prevState.toSkip + 20, toSkip: prevState.toSkip + 20,
}; };
}); });
} };
// Redirect to the edit page // Redirect to the edit page
handleClick = (item = {}) => { handleClick = (item = {}) => {
@ -114,40 +123,44 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
id: item.value.id || item.value._id, id: item.value.id || item.value._id,
source: this.props.relation.plugin, source: this.props.relation.plugin,
}); });
} };
handleInputChange = (value) => { handleInputChange = value => {
const clonedOptions = this.state.options; const clonedOptions = this.state.options;
const filteredValues = clonedOptions.filter(data => includes(data.label, value)); const filteredValues = clonedOptions.filter(data => includes(data.label, value));
if (filteredValues.length === 0) { if (filteredValues.length === 0) {
return this.getOptions(value); return this.getOptions(value);
} }
} };
render() { render() {
const description = this.props.relation.description const description = this.props.relation.description ? <p>{this.props.relation.description}</p> : '';
? <p>{this.props.relation.description}</p>
: '';
const value = get(this.props.record, this.props.relation.alias); const value = get(this.props.record, this.props.relation.alias);
const excludeModel = ['role', 'permission', 'file'].includes(this.props.relation.model || this.props.relation.collection); // Temporary. const excludeModel = ['role', 'permission', 'file'].includes(
const entryLink = (isNull(value) || isUndefined(value) || excludeModel ? this.props.relation.model || this.props.relation.collection,
'' : ); // Temporary.
( const entryLink =
<FormattedMessage id='content-manager.containers.Edit.clickToJump'> isNull(value) || isUndefined(value) || excludeModel ? (
''
) : (
<FormattedMessage id="content-manager.containers.Edit.clickToJump">
{title => ( {title => (
<a onClick={() => this.handleClick({value})} title={title}><FormattedMessage id='content-manager.containers.Edit.seeDetails' /></a> <a onClick={() => this.handleClick({ value })} title={title}>
<FormattedMessage id="content-manager.containers.Edit.seeDetails" />
</a>
)} )}
</FormattedMessage> </FormattedMessage>
) );
);
/* eslint-disable jsx-a11y/label-has-for */ /* eslint-disable jsx-a11y/label-has-for */
return ( return (
<div className={`form-group ${styles.selectOne}`}> <div className={`form-group ${styles.selectOne}`}>
<nav className={styles.headline}> <nav className={styles.headline}>
<label htmlFor={this.props.relation.alias}>{this.props.relation.alias}</label> <label htmlFor={this.props.relation.alias}>
{get(this.props.relation, 'label', this.props.relation.alias)} <span>({value.length})</span>
</label>
{entryLink} {entryLink}
</nav> </nav>
{description} {description}
@ -160,10 +173,18 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
onInputChange={this.handleInputChange} onInputChange={this.handleInputChange}
onSelectResetsInput={false} onSelectResetsInput={false}
simpleValue simpleValue
value={isNull(value) || isUndefined(value) ? null : { value={
value: isFunction(value.toJS) ? value.toJS() : value, isNull(value) || isUndefined(value)
label: templateObject({ mainField: this.props.relation.displayedAttribute }, isFunction(value.toJS) ? value.toJS() : value).mainField || (isFunction(value.toJS) ? get(value.toJS(), 'id') : get(value, 'id')), ? null
}} : {
value: isFunction(value.toJS) ? value.toJS() : value,
label:
templateObject(
{ mainField: this.props.relation.displayedAttribute },
isFunction(value.toJS) ? value.toJS() : value,
).mainField || (isFunction(value.toJS) ? get(value.toJS(), 'id') : get(value, 'id')),
}
}
/> />
</div> </div>
); );
@ -173,10 +194,7 @@ class SelectOne extends React.Component { // eslint-disable-line react/prefer-st
SelectOne.propTypes = { SelectOne.propTypes = {
onRedirect: PropTypes.func.isRequired, onRedirect: PropTypes.func.isRequired,
record: PropTypes.oneOfType([ record: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).isRequired,
PropTypes.object,
PropTypes.bool,
]).isRequired,
relation: PropTypes.object.isRequired, relation: PropTypes.object.isRequired,
setRecordAttribute: PropTypes.func.isRequired, setRecordAttribute: PropTypes.func.isRequired,
}; };