yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-03 02:23:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle add relation in dropdown

Browse Source
This commit is contained in:
soupette 2018-07-16 16:11:16 +02:00
parent 2a753fbb92
commit 8c31a060f7
5 changed files with 83 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/strapi-plugin-content-manager/admin/src/containers/App/actions.js
View File

@ -17,6 +17,7 @@ import {
ON_CHANGE_SETTINGS,
ON_CLICK_ADD_ATTR,
ON_REMOVE,
ON_REMOVE_EDIT_VIEW_ATTR,
ON_RESET,
ON_SUBMIT,
SUBMIT_SUCCEEDED,
@ -110,6 +111,14 @@ export function onRemove(index, keys) {
};
}
export function onRemoveEditViewAttr(index, keys) {
return {
type: ON_REMOVE_EDIT_VIEW_ATTR,
index,
keys,
};
}
export function onReset() {
return {
type: ON_RESET,

1
packages/strapi-plugin-content-manager/admin/src/containers/App/constants.js
View File

@ -15,6 +15,7 @@ export const ON_CHANGE = 'contentManager/App/ON_CHANGE';
export const ON_CHANGE_SETTINGS = 'contentManager/App/ON_CHANGE_SETTINGS';
export const ON_CLICK_ADD_ATTR = 'contentManager/App/ON_CLICK_ADD_ATTR';
export const ON_REMOVE = 'contentManager/App/ON_REMOVE';
export const ON_REMOVE_EDIT_VIEW_ATTR = 'contentManager/App/ON_REMOVE_EDIT_VIEW_ATTR';
export const ON_RESET = 'contentManager/App/ON_RESET';
export const ON_SUBMIT = 'contentManager/App/ON_SUBMIT';
export const SUBMIT_SUCCEEDED = 'contentManager/App/SUBMIT_SUCCEEDED';

7
packages/strapi-plugin-content-manager/admin/src/containers/App/reducer.js
View File

@ -16,6 +16,7 @@ import {
ON_CHANGE_SETTINGS,
ON_CLICK_ADD_ATTR,
ON_REMOVE,
ON_REMOVE_EDIT_VIEW_ATTR,
ON_RESET,
SUBMIT_SUCCEEDED,
} from './constants';
@ -87,7 +88,7 @@ function appReducer(state = initialState, action) {
.updateIn(['modifiedSchema', 'models'].concat(action.keys), () => action.value);
case ON_CLICK_ADD_ATTR:
return state
.updateIn(['modifiedSchema', 'models'].concat(action.keys.split('.')).concat(['listDisplay']), list => list.push(fromJS(action.data)));
.updateIn(['modifiedSchema', 'models'].concat(action.keys.split('.')), list => list.push(fromJS(action.data)));
case ON_REMOVE:
return state.updateIn(['modifiedSchema', 'models'].concat(action.keys.split('.')).concat(['listDisplay']), list => {
@ -105,6 +106,10 @@ function appReducer(state = initialState, action) {
.push(attrToAdd.get('0'));
}
return list.delete(action.index);
});
case ON_REMOVE_EDIT_VIEW_ATTR:
return state.updateIn(['modifiedSchema', 'models'].concat(action.keys.split('.')), list => {
return list.delete(action.index);
});
case ON_RESET:

87
packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js
View File

@ -22,6 +22,7 @@ import {
onChangeSettings,
onClickAddAttr,
onRemove,
onRemoveEditViewAttr,
onReset,
onSubmit,
} from 'containers/App/actions';
@ -50,6 +51,7 @@ class SettingPage extends React.PureComponent {
state = {
isDraggingSibling: false,
isOpen: false,
isOpenRelation: false,
showWarning: false,
showWarningCancel: false,
};
@ -89,13 +91,22 @@ class SettingPage extends React.PureComponent {
});
}
getDropDownRelationsItems = () => {
const currentDisplayedRelations = this.getEditPageDisplayedRelations();
return this.getRelations()
.filter(relation => {
return currentDisplayedRelations.indexOf(relation) === -1;
});
}
getEditPageDisplaySettings = () => {
return get(this.props.schema, 'models.'.concat(this.getPath().concat('.editDisplay')), { fields: [], relations: [] });
}
getEditPageFields = () => get(this.getEditPageDisplaySettings(), ['fields'], []);
getEditPageRelations = () => get(this.getEditPageDisplaySettings(), ['relations'], []);
getEditPageDisplayedRelations = () => get(this.getEditPageDisplaySettings(), ['relations'], []);
getListDisplay = () => (
get(this.props.schema, `models.${this.getPath()}.listDisplay`, [])
@ -115,6 +126,18 @@ class SettingPage extends React.PureComponent {
.join('.');
}
getRelations = () => {
const relations = get(this.props.schema, 'models.'.concat(this.getPath()).concat('.relations'), {});
return Object.keys(relations)
.filter(relation => {
const isUploadRelation = get(relations, [relation, 'plugin'], '') === 'upload';
const isMorphSide = get(relations, [relation, 'nature'], '').toLowerCase().includes('morph') && get(relations, [relation, relation]) !== undefined;
return !isUploadRelation && !isMorphSide;
});
}
getSelectOptions = (input) => {
const selectOptions = this.getListDisplay().reduce((acc, curr) => {
@ -217,16 +240,7 @@ class SettingPage extends React.PureComponent {
}
hasRelations = () => {
const relations = get(this.props.schema, 'models.'.concat(this.getPath()).concat('.relations'), {});
return Object.keys(relations)
.filter(relation => {
const isUploadRelation = get(relations, [relation, 'plugin'], '') === 'upload';
const isMorphSide = get(relations, [relation, 'nature'], '').toLowerCase().includes('morph') && get(relations, [relation, relation]) !== undefined;
return !isUploadRelation && !isMorphSide;
})
.length > 0;
return this.getRelations().length > 0;
}
// We need to remove the Over state on the DraggableAttr component
@ -244,13 +258,20 @@ class SettingPage extends React.PureComponent {
}
}
toggleDropdownRelations = () => {
if (this.getDropDownRelationsItems().length > 0) {
this.setState(prevState => ({ isOpenRelation: !prevState.isOpenRelation }));
}
}
render() {
const { isDraggingSibling, isOpen, showWarning, showWarningCancel } = this.state;
const { isDraggingSibling, isOpen, isOpenRelation, showWarning, showWarningCancel } = this.state;
const {
moveAttr,
moveAttrEditView,
onChangeSettings,
onClickAddAttr,
onRemoveEditViewAttr,
onReset,
onSubmit,
} = this.props;
@ -365,22 +386,12 @@ class SettingPage extends React.PureComponent {
</FormattedMessage>
</DropdownToggle>
<DropdownMenu>
{this.getDropDownItems().map((item, i) => {
if (i !== this.getDropDownItems().length - 1 && this.getDropDownItems().length > 0) {
return (
<React.Fragment key={item.name}>
<DropdownItem onClick={() => onClickAddAttr(item, namePath)}>
{item.label}
</DropdownItem>
<DropdownItem divider />
</React.Fragment>
);
}
{this.getDropDownItems().map((item) => {
return (
<DropdownItem
key={item.name}
onClick={() => onClickAddAttr(item, namePath)}
onClick={() => onClickAddAttr(item, `${namePath}.listDisplay`)}
>
{item.label}
</DropdownItem>
@ -448,7 +459,7 @@ class SettingPage extends React.PureComponent {
<FormattedMessage id="content-manager.containers.SettingPage.relations" />
<div className={cn(styles.sort_wrapper, 'col-md-12')}>
<div className="row">
{this.getEditPageRelations().map((attr, index) => {
{this.getEditPageDisplayedRelations().map((attr, index) => {
return (
<DraggableAttr
index={index}
@ -460,11 +471,33 @@ class SettingPage extends React.PureComponent {
label={attr}
moveAttr={moveAttrEditView}
onClickEditListItem={() => {}}
onRemove={() => {}}
onRemove={onRemoveEditViewAttr}
updateSiblingHoverState={() => {}}
/>
);
})}
<div className={cn(styles.dropdownRelations, styles.dropdownWrapper)}>
<ButtonDropdown isOpen={isOpenRelation} toggle={this.toggleDropdownRelations}>
<DropdownToggle>
<FormattedMessage id="content-manager.containers.SettingPage.addField">
{msg => <p>{msg}</p>}
</FormattedMessage>
</DropdownToggle>
<DropdownMenu>
{this.getDropDownRelationsItems().map((item) => {
return (
<DropdownItem
key={item}
onClick={() => onClickAddAttr(item, `${namePath}.editDisplay.relations`)}
>
{item}
</DropdownItem>
);
})}
</DropdownMenu>
</ButtonDropdown>
</div>
</div>
</div>
</div>
@ -490,6 +523,7 @@ SettingPage.propTypes = {
onClickAddAttr: PropTypes.func.isRequired,
onClickEditListItem: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
onRemoveEditViewAttr: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
schema: PropTypes.object.isRequired,
@ -506,6 +540,7 @@ const mapDispatchToProps = (dispatch) => (
onClickAddAttr,
onClickEditListItem,
onRemove,
onRemoveEditViewAttr,
onReset,
onSubmit,
},

6
packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/styles.scss
View File

@ -138,4 +138,10 @@
> div {
padding: 0 10px;
}
}
.dropdownRelations {
width: 100%;
margin-left: 0 !important;
margin-bottom: 10px;
}