yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-13 09:03:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #3054

Browse Source
This commit is contained in:
soupette 2019-04-05 00:10:06 +02:00
parent f344a1082a
commit 0e3632b8b2
2 changed files with 39 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-helper-plugin/package.json
View File

@ -112,4 +112,4 @@
"styled-components": "^3.2.6",
"whatwg-fetch": "^2.0.3"
}
}
}

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

@ -25,7 +25,7 @@ class SelectMany extends React.PureComponent {
state = {
isLoading: true,
options: [],
toSkip: 0,
start: 0,
};
componentDidMount() {
@ -34,8 +34,7 @@ class SelectMany extends React.PureComponent {
componentDidUpdate(prevProps, prevState) {
if (isEmpty(prevProps.record) && !isEmpty(this.props.record)) {
const values = (get(this.props.record, this.props.relation.alias) || [])
.map(el => (el.id || el._id));
const values = (get(this.props.record, this.props.relation.alias) || []).map(el => el.id || el._id);
const options = this.state.options.filter(el => {
return !values.includes(el.value.id || el.value._id);
@ -44,7 +43,7 @@ class SelectMany extends React.PureComponent {
this.state.options = options;
}
if (prevState.toSkip !== this.state.toSkip) {
if (prevState.start !== this.state.start) {
this.getOptions('');
}
}
@ -52,7 +51,7 @@ class SelectMany extends React.PureComponent {
getOptions = query => {
const params = {
_limit: 20,
_start: this.state.toSkip,
_start: this.state.start,
source: this.props.relation.plugin || 'content-manager',
};
@ -72,19 +71,19 @@ class SelectMany extends React.PureComponent {
params,
})
.then(response => {
/* eslint-disable indent */
const options = isArray(response)
? response.map(item => ({
value: item,
label: templateObject({ mainField: this.props.relation.displayedAttribute }, item)
.mainField,
}))
value: item,
label: templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField,
}))
: [
{
value: response,
label: response[this.props.relation.displayedAttribute],
},
];
{
value: response,
label: response[this.props.relation.displayedAttribute],
},
];
/* eslint-enable indent */
const newOptions = cloneDeep(this.state.options);
options.map(option => {
// Don't add the values when searching
@ -103,19 +102,19 @@ class SelectMany extends React.PureComponent {
});
};
handleInputChange = (value) => {
handleInputChange = value => {
const clonedOptions = this.state.options;
const filteredValues = clonedOptions.filter(data => includes(data.label, value));
if (filteredValues.length === 0) {
return this.getOptions(value);
}
}
};
handleChange = value => {
// Remove new added value from available option;
this.state.options = this.state.options.filter(el =>
!((el.value._id || el.value.id) === (value.value.id || value.value._id))
this.state.options = this.state.options.filter(
el => !((el.value._id || el.value.id) === (value.value.id || value.value._id)),
);
this.props.onAddRelationalItem({
@ -127,12 +126,12 @@ class SelectMany extends React.PureComponent {
handleBottomScroll = () => {
this.setState(prevState => {
return {
toSkip: prevState.toSkip + 20,
start: prevState.start + 1,
};
});
}
};
handleRemove = (index) => {
handleRemove = index => {
const values = get(this.props.record, this.props.relation.alias);
// Add removed value from available option;
@ -149,7 +148,7 @@ class SelectMany extends React.PureComponent {
key: this.props.relation.alias,
index,
});
}
};
// Redirect to the edit page
handleClick = (item = {}) => {
@ -158,20 +157,18 @@ class SelectMany extends React.PureComponent {
id: item.value.id || item.value._id,
source: this.props.relation.plugin,
});
}
};
render() {
const description = this.props.relation.description ? (
<p>{this.props.relation.description}</p>
) : (
''
);
const description = this.props.relation.description ? <p>{this.props.relation.description}</p> : '';
const value = get(this.props.record, this.props.relation.alias) || [];
/* eslint-disable jsx-a11y/label-has-for */
return (
<div className={`form-group ${styles.selectMany} ${value.length > 4 && styles.selectManyUpdate}`}>
<label htmlFor={this.props.relation.alias}>{this.props.relation.alias} <span>({value.length})</span></label>
<label htmlFor={this.props.relation.alias}>
{this.props.relation.alias} <span>({value.length})</span>
</label>
{description}
<Select
className={`${styles.select}`}
@ -180,27 +177,28 @@ class SelectMany extends React.PureComponent {
onChange={this.handleChange}
onInputChange={this.handleInputChange}
onMenuScrollToBottom={this.handleBottomScroll}
options={this.state.options}
placeholder={<FormattedMessage id='content-manager.containers.Edit.addAnItem' />}
options={this.state.options}
placeholder={<FormattedMessage id="content-manager.containers.Edit.addAnItem" />}
/>
<SortableList
items={
/* eslint-disable indent */
isNull(value) || isUndefined(value) || value.size === 0
? null
: value.map(item => {
if (item) {
return {
value: get(item, 'value') || item,
label:
if (item) {
return {
value: get(item, 'value') || item,
label:
get(item, 'label') ||
templateObject({ mainField: this.props.relation.displayedAttribute }, item)
.mainField ||
item.id,
};
}
})
};
}
})
}
/* eslint-enable indent */
isDraggingSibling={this.props.isDraggingSibling}
keys={this.props.relation.alias}
moveAttr={this.props.moveAttr}