Fix relation display

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-09-17 16:04:44 +02:00 committed by Pierre Noël
parent 7221412d68
commit b6e6f7cbbd
9 changed files with 105 additions and 23 deletions

View File

@ -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>
);
}

View File

@ -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' }}>&nbsp; (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' }}>
&nbsp; (from: {plugin})
</span>
)}
</p>
</DropdownItem>
);

View File

@ -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,

View File

@ -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,
},
],

View File

@ -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

View File

@ -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'))
);
})

View File

@ -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);

View File

@ -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}&nbsp;
<span style={{ fontStyle: 'italic', textTransform: 'none' }}>
({formatMessage({ id: getTrad('from') })}): : {obj.plugin})
</span>
</p>
),
};
}
return obj;
});
}, [sortedContentTypesList, formatMessage]);
const data = [
{

View File

@ -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;
};