yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-14 09:34:32 +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", "styled-components": "^3.2.6",
"whatwg-fetch": "^2.0.3" "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 = { state = {
isLoading: true, isLoading: true,
options: [], options: [],
toSkip: 0, start: 0,
}; };
componentDidMount() { componentDidMount() {
@ -34,8 +34,7 @@ class SelectMany extends React.PureComponent {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (isEmpty(prevProps.record) && !isEmpty(this.props.record)) { if (isEmpty(prevProps.record) && !isEmpty(this.props.record)) {
const values = (get(this.props.record, this.props.relation.alias) || []) const values = (get(this.props.record, this.props.relation.alias) || []).map(el => el.id || el._id);
.map(el => (el.id || el._id));
const options = this.state.options.filter(el => { const options = this.state.options.filter(el => {
return !values.includes(el.value.id || el.value._id); return !values.includes(el.value.id || el.value._id);
@ -44,7 +43,7 @@ class SelectMany extends React.PureComponent {
this.state.options = options; this.state.options = options;
} }
if (prevState.toSkip !== this.state.toSkip) { if (prevState.start !== this.state.start) {
this.getOptions(''); this.getOptions('');
} }
} }
@ -52,7 +51,7 @@ class SelectMany extends React.PureComponent {
getOptions = query => { getOptions = query => {
const params = { const params = {
_limit: 20, _limit: 20,
_start: this.state.toSkip, _start: this.state.start,
source: this.props.relation.plugin || 'content-manager', source: this.props.relation.plugin || 'content-manager',
}; };
@ -72,19 +71,19 @@ class SelectMany extends React.PureComponent {
params, params,
}) })
.then(response => { .then(response => {
/* eslint-disable indent */
const options = isArray(response) const options = isArray(response)
? response.map(item => ({ ? response.map(item => ({
value: item, value: item,
label: templateObject({ mainField: this.props.relation.displayedAttribute }, item) label: templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField,
.mainField, }))
}))
: [ : [
{ {
value: response, value: response,
label: response[this.props.relation.displayedAttribute], label: response[this.props.relation.displayedAttribute],
}, },
]; ];
/* eslint-enable 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
@ -103,19 +102,19 @@ class SelectMany extends React.PureComponent {
}); });
}; };
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);
} }
} };
handleChange = value => { handleChange = value => {
// Remove new added value from available option; // Remove new added value from available option;
this.state.options = this.state.options.filter(el => this.state.options = this.state.options.filter(
!((el.value._id || el.value.id) === (value.value.id || value.value._id)) el => !((el.value._id || el.value.id) === (value.value.id || value.value._id)),
); );
this.props.onAddRelationalItem({ this.props.onAddRelationalItem({
@ -127,12 +126,12 @@ class SelectMany extends React.PureComponent {
handleBottomScroll = () => { handleBottomScroll = () => {
this.setState(prevState => { this.setState(prevState => {
return { return {
toSkip: prevState.toSkip + 20, start: prevState.start + 1,
}; };
}); });
} };
handleRemove = (index) => { handleRemove = index => {
const values = get(this.props.record, this.props.relation.alias); const values = get(this.props.record, this.props.relation.alias);
// Add removed value from available option; // Add removed value from available option;
@ -149,7 +148,7 @@ class SelectMany extends React.PureComponent {
key: this.props.relation.alias, key: this.props.relation.alias,
index, index,
}); });
} };
// Redirect to the edit page // Redirect to the edit page
handleClick = (item = {}) => { handleClick = (item = {}) => {
@ -158,20 +157,18 @@ class SelectMany extends React.PureComponent {
id: item.value.id || item.value._id, id: item.value.id || item.value._id,
source: this.props.relation.plugin, source: this.props.relation.plugin,
}); });
} };
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) || [];
/* eslint-disable jsx-a11y/label-has-for */ /* eslint-disable jsx-a11y/label-has-for */
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}>{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} {description}
<Select <Select
className={`${styles.select}`} className={`${styles.select}`}
@ -180,27 +177,28 @@ class SelectMany extends React.PureComponent {
onChange={this.handleChange} onChange={this.handleChange}
onInputChange={this.handleInputChange} onInputChange={this.handleInputChange}
onMenuScrollToBottom={this.handleBottomScroll} onMenuScrollToBottom={this.handleBottomScroll}
options={this.state.options} options={this.state.options}
placeholder={<FormattedMessage id='content-manager.containers.Edit.addAnItem' />} placeholder={<FormattedMessage id="content-manager.containers.Edit.addAnItem" />}
/> />
<SortableList <SortableList
items={ items={
/* eslint-disable indent */
isNull(value) || isUndefined(value) || value.size === 0 isNull(value) || isUndefined(value) || value.size === 0
? null ? null
: value.map(item => { : value.map(item => {
if (item) {
if (item) { return {
return { value: get(item, 'value') || item,
value: get(item, 'value') || item, label:
label:
get(item, 'label') || get(item, 'label') ||
templateObject({ mainField: this.props.relation.displayedAttribute }, item) templateObject({ mainField: this.props.relation.displayedAttribute }, item)
.mainField || .mainField ||
item.id, item.id,
}; };
} }
}) })
} }
/* eslint-enable indent */
isDraggingSibling={this.props.isDraggingSibling} isDraggingSibling={this.props.isDraggingSibling}
keys={this.props.relation.alias} keys={this.props.relation.alias}
moveAttr={this.props.moveAttr} moveAttr={this.props.moveAttr}