mirror of
https://github.com/strapi/strapi.git
synced 2025-09-25 08:19:07 +00:00
Fix relation display
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
parent
7221412d68
commit
b6e6f7cbbd
@ -4,11 +4,11 @@ import { NavLink } from 'react-router-dom';
|
||||
|
||||
import Icon from './Icon';
|
||||
|
||||
function LeftMenuLink({ children, to }) {
|
||||
function LeftMenuLink({ children, to, Component }) {
|
||||
return (
|
||||
<NavLink to={to}>
|
||||
<Icon />
|
||||
<p>{children}</p>
|
||||
{Component ? <Component /> : <p>{children}</p>}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
@ -22,7 +22,23 @@ const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother,
|
||||
[sortedContentTypesList]
|
||||
);
|
||||
|
||||
const targetFriendlyName = get(contentTypes, [target, 'schema', 'name'], 'error');
|
||||
const pluginInfo = useMemo(() => {
|
||||
const plugin = get(contentTypes, [target, 'plugin'], null);
|
||||
|
||||
if (plugin) {
|
||||
return (
|
||||
<span style={{ fontStyle: 'italic', textTransform: 'none' }}> (from: {plugin})</span>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [contentTypes, target]);
|
||||
|
||||
const targetFriendlyName = useMemo(() => {
|
||||
const name = get(contentTypes, [target, 'schema', 'name'], 'error');
|
||||
|
||||
return name;
|
||||
}, [contentTypes, target]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
@ -39,22 +55,25 @@ const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother,
|
||||
style={{ fontSize: 12, marginTop: '-3px' }}
|
||||
/>
|
||||
{targetFriendlyName}
|
||||
{pluginInfo}
|
||||
</p>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu style={{ paddingTop: '3px' }}>
|
||||
{allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo }) => {
|
||||
{allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => {
|
||||
return (
|
||||
<DropdownItem
|
||||
key={uid}
|
||||
onClick={() => {
|
||||
// Change the target
|
||||
const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
|
||||
|
||||
onChange({
|
||||
target: {
|
||||
name: 'target',
|
||||
value: uid,
|
||||
type: 'relation',
|
||||
oneThatIsCreatingARelationWithAnother,
|
||||
selectedContentTypeFriendlyName: title,
|
||||
selectedContentTypeFriendlyName,
|
||||
targetContentTypeAllowedRelations: restrictRelationsTo,
|
||||
},
|
||||
});
|
||||
@ -66,6 +85,11 @@ const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother,
|
||||
style={{ fontSize: 12, marginTop: '-3px' }}
|
||||
/>
|
||||
{title}
|
||||
{plugin && (
|
||||
<span style={{ fontStyle: 'italic', textTransform: 'none' }}>
|
||||
(from: {plugin})
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</DropdownItem>
|
||||
);
|
||||
|
@ -148,6 +148,7 @@ const sortContentType = types =>
|
||||
editable: types[uid].schema.editable,
|
||||
name: uid,
|
||||
title: types[uid].schema.name,
|
||||
plugin: types[uid].plugin || null,
|
||||
uid,
|
||||
to: `/plugins/${pluginId}/content-types/${uid}`,
|
||||
kind: types[uid].schema.kind,
|
||||
|
@ -100,6 +100,8 @@ const expectedData = {
|
||||
to: '/plugins/content-type-builder/content-types/plugins::myplugins.atest',
|
||||
kind: 'collectionType',
|
||||
editable: true,
|
||||
plugin: null,
|
||||
restrictRelationsTo: [],
|
||||
},
|
||||
{
|
||||
uid: 'plugins::myplugins.btest',
|
||||
@ -108,6 +110,8 @@ const expectedData = {
|
||||
to: '/plugins/content-type-builder/content-types/plugins::myplugins.btest',
|
||||
kind: 'collectionType',
|
||||
editable: true,
|
||||
plugin: null,
|
||||
restrictRelationsTo: null,
|
||||
},
|
||||
{
|
||||
uid: 'plugins::myplugins.ctest',
|
||||
@ -116,6 +120,8 @@ const expectedData = {
|
||||
to: '/plugins/content-type-builder/content-types/plugins::myplugins.ctest',
|
||||
kind: 'collectionType',
|
||||
editable: true,
|
||||
plugin: null,
|
||||
restrictRelationsTo: ['oneWay'],
|
||||
},
|
||||
{
|
||||
uid: 'plugins::myplugins.test',
|
||||
@ -124,6 +130,8 @@ const expectedData = {
|
||||
to: '/plugins/content-type-builder/content-types/plugins::myplugins.test',
|
||||
kind: 'singleType',
|
||||
editable: true,
|
||||
plugin: null,
|
||||
restrictRelationsTo: null,
|
||||
},
|
||||
],
|
||||
|
||||
|
@ -150,19 +150,39 @@ const data = {
|
||||
contentTypesToSort: {
|
||||
'plugins::myplugins.test': {
|
||||
uid: 'plugins::myplugins.test',
|
||||
schema: { name: 'plugins::myplugins.test', kind: 'singleType', editable: true },
|
||||
schema: {
|
||||
name: 'plugins::myplugins.test',
|
||||
kind: 'singleType',
|
||||
editable: true,
|
||||
restrictRelationsTo: null,
|
||||
},
|
||||
},
|
||||
'plugins::myplugins.btest': {
|
||||
uid: 'plugins::myplugins.btest',
|
||||
schema: { name: 'plugins::myplugins.btest', kind: 'collectionType', editable: true },
|
||||
schema: {
|
||||
name: 'plugins::myplugins.btest',
|
||||
kind: 'collectionType',
|
||||
editable: true,
|
||||
restrictRelationsTo: null,
|
||||
},
|
||||
},
|
||||
'plugins::myplugins.atest': {
|
||||
uid: 'plugins::myplugins.atest',
|
||||
schema: { name: 'plugins::myplugins.atest', kind: 'collectionType', editable: true },
|
||||
schema: {
|
||||
name: 'plugins::myplugins.atest',
|
||||
kind: 'collectionType',
|
||||
editable: true,
|
||||
restrictRelationsTo: [],
|
||||
},
|
||||
},
|
||||
'plugins::myplugins.ctest': {
|
||||
uid: 'plugins::myplugins.ctest',
|
||||
schema: { name: 'plugins::myplugins.ctest', kind: 'collectionType', editable: true },
|
||||
schema: {
|
||||
name: 'plugins::myplugins.ctest',
|
||||
kind: 'collectionType',
|
||||
editable: true,
|
||||
restrictRelationsTo: ['oneWay'],
|
||||
},
|
||||
},
|
||||
},
|
||||
// TODO add test for component
|
||||
|
@ -84,24 +84,35 @@ const reducer = (state, action) => {
|
||||
}
|
||||
|
||||
if (keys.length === 1 && keys.includes('target')) {
|
||||
const { targetContentTypeAllowedRelations } = action;
|
||||
let didChangeNatureBecauseOfRestrictedRelation = false;
|
||||
|
||||
return obj
|
||||
.update('target', () => value)
|
||||
.update('nature', currentNature => {
|
||||
const { targetContentTypeAllowedRelations } = action;
|
||||
|
||||
if (targetContentTypeAllowedRelations === null) {
|
||||
return currentNature;
|
||||
}
|
||||
|
||||
if (!targetContentTypeAllowedRelations.includes(currentNature)) {
|
||||
didChangeNatureBecauseOfRestrictedRelation = true;
|
||||
|
||||
return targetContentTypeAllowedRelations[0];
|
||||
}
|
||||
|
||||
return currentNature;
|
||||
})
|
||||
.update('name', () => {
|
||||
if (didChangeNatureBecauseOfRestrictedRelation) {
|
||||
return pluralize(
|
||||
snakeCase(selectedContentTypeFriendlyName),
|
||||
shouldPluralizeName(targetContentTypeAllowedRelations[0])
|
||||
);
|
||||
}
|
||||
|
||||
return pluralize(
|
||||
snakeCase(selectedContentTypeFriendlyName),
|
||||
|
||||
shouldPluralizeName(obj.get('nature'))
|
||||
);
|
||||
})
|
||||
|
@ -244,7 +244,7 @@ describe('CTB | containers | FormModal | reducer | actions', () => {
|
||||
};
|
||||
const expected = state
|
||||
.setIn(['modifiedData', 'target'], 'application::country.country')
|
||||
.setIn(['modifiedData', 'name'], 'countries')
|
||||
.setIn(['modifiedData', 'name'], 'country')
|
||||
.setIn(['modifiedData', 'nature'], 'oneWay');
|
||||
|
||||
expect(reducer(state, action)).toEqual(expected);
|
||||
|
@ -107,9 +107,27 @@ function LeftMenu({ wait }) {
|
||||
}
|
||||
};
|
||||
|
||||
const displayedContentTypes = useMemo(() => sortedContentTypesList.filter(obj => obj.editable), [
|
||||
sortedContentTypesList,
|
||||
]);
|
||||
const displayedContentTypes = useMemo(() => {
|
||||
return sortedContentTypesList
|
||||
.filter(obj => obj.editable)
|
||||
.map(obj => {
|
||||
if (obj.plugin) {
|
||||
return {
|
||||
...obj,
|
||||
Component: () => (
|
||||
<p style={{ justifyContent: 'normal' }}>
|
||||
{obj.title}
|
||||
<span style={{ fontStyle: 'italic', textTransform: 'none' }}>
|
||||
({formatMessage({ id: getTrad('from') })}): : {obj.plugin})
|
||||
</span>
|
||||
</p>
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
return obj;
|
||||
});
|
||||
}, [sortedContentTypesList, formatMessage]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
|
@ -29,17 +29,17 @@ const getRestrictRelationsTo = (contentType = {}) => {
|
||||
};
|
||||
|
||||
const getformattedName = (contentType = {}) => {
|
||||
const { uid, info, plugin } = contentType;
|
||||
const { uid, info } = contentType;
|
||||
const name = _.get(info, 'name') || _.upperFirst(pluralize(uid));
|
||||
const isUser = name.toLowerCase() === 'user';
|
||||
// const isUser = name.toLowerCase() === 'user';
|
||||
|
||||
if (isUser && plugin === 'admin') {
|
||||
return 'User (Admin panel)';
|
||||
}
|
||||
// if (isUser && plugin === 'admin') {
|
||||
// return 'User (Admin panel)';
|
||||
// }
|
||||
|
||||
if (isUser && plugin === 'users-permissions') {
|
||||
return 'User (Permissions plugin)';
|
||||
}
|
||||
// if (isUser && plugin === 'users-permissions') {
|
||||
// return 'User (Permissions plugin)';
|
||||
// }
|
||||
|
||||
return name;
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user