yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-01 18:33:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable nature change

Browse Source
This commit is contained in:
soupette 2019-11-21 13:15:13 +01:00
parent 91401cc0b9
commit e4c70d7a45
12 changed files with 100 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/strapi-plugin-content-type-builder/admin/src/components/RelationForm/index.js
View File

@ -6,7 +6,13 @@ import RelationFormBox from '../RelationFormBox';
import RelationFormNaturePicker from '../RelationFormNaturePicker';
import Wrapper from './Wrapper';
const RelationForm = ({ errors, mainBoxHeader, modifiedData, onChange }) => {
const RelationForm = ({
errors,
mainBoxHeader,
modifiedData,
naturePickerType,
onChange,
}) => {
const { formatMessage } = useGlobalContext();
const getError = name => {
const errorId = get(errors, [name, 'id'], null);
@ -24,9 +30,15 @@ const RelationForm = ({ errors, mainBoxHeader, modifiedData, onChange }) => {
onChange={onChange}
value={get(modifiedData, 'name', '')}
/>
<RelationFormNaturePicker nature={modifiedData.nature} />
<RelationFormNaturePicker
oneThatIsCreatingARelationWithAnother={mainBoxHeader}
target={modifiedData.target}
nature={modifiedData.nature}
naturePickerType={naturePickerType}
onChange={onChange}
/>
<RelationFormBox
disabled={modifiedData.nature === 'oneWay'}
disabled={['oneWay', 'manyWay'].includes(modifiedData.nature)}
error={getError('targetAttribute')}
name="targetAttribute"
onChange={onChange}
@ -45,6 +57,7 @@ RelationForm.propTypes = {
errors: PropTypes.object,
mainBoxHeader: PropTypes.string.isRequired,
modifiedData: PropTypes.object,
naturePickerType: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
};

2
packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/Wrapper.js
View File

@ -43,7 +43,7 @@ const StyledRelationNaturePicker = styled.div`
}
}
}
img {
svg {
margin: 0 1.5rem;
cursor: pointer;
}

83
packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/index.js
View File

@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { truncate } from 'lodash';
import pluralize from 'pluralize';
import ManyToMany from '../../icons/ManyToMany';
import ManyToOne from '../../icons/ManyToOne';
import ManyWay from '../../icons/ManyWay';
@ -10,29 +12,76 @@ import OneWay from '../../icons/OneWay';
import getTrad from '../../utils/getTrad';
import Wrapper from './Wrapper';
const RelationFormNaturePicker = ({ nature }) => {
const relations = {
oneWay: OneWay,
oneToOne: OneToOne,
oneToMany: OneToMany,
manyToOne: ManyToOne,
manyToMany: ManyToMany,
manyWay: ManyWay,
};
const RelationFormNaturePicker = ({
nature,
naturePickerType,
onChange,
oneThatIsCreatingARelationWithAnother,
target,
}) => {
const relationsType =
naturePickerType === 'contentType'
? [
'oneWay',
'oneToOne',
'oneToMany',
'manyToOne',
'manyToMany',
'manyWay',
]
: ['oneWay', 'manyWay'];
const leftTarget =
nature === 'manyToOne' ? target : oneThatIsCreatingARelationWithAnother;
const rightTarget =
nature === 'manyToOne' ? oneThatIsCreatingARelationWithAnother : target;
const leftDisplayedValue = pluralize(
leftTarget,
nature === 'manyToMany' ? 2 : 1
);
const rightDisplayedValue = pluralize(
rightTarget,
['manyToMany', 'oneToMany', 'manyToOne', 'manyWay'].includes(nature) ? 2 : 1
);
return (
<Wrapper>
<div className="nature-container">
<div className="nature-buttons">
<ManyToOne />
<ManyToOne isSelected />
<ManyWay />
<ManyWay isSelected />
<ManyToMany />
<ManyToMany isSelected />
<OneToMany />
<OneToMany isSelected />
<OneToOne />
<OneToOne isSelected />
<OneWay />
<OneWay isSelected />
{relationsType.map(relationNature => {
const Asset = relations[relationNature];
return (
<Asset
key={relationNature}
isSelected={nature === relationNature}
onClick={() => {
onChange({
target: {
name: 'nature',
value: relationNature,
type: 'relation',
},
});
}}
/>
);
})}
</div>
<div className="nature-txt">
<span>left</span>
<span>{truncate(leftDisplayedValue, { length: 24 })}</span>
&nbsp; <FormattedMessage id={getTrad(`relation.${nature}`)} />
&nbsp;
<span>right</span>
<span>{truncate(rightDisplayedValue, { length: 24 })}</span>
</div>
</div>
</Wrapper>
@ -45,6 +94,10 @@ RelationFormNaturePicker.defaultProps = {
RelationFormNaturePicker.propTypes = {
nature: PropTypes.string,
naturePickerType: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
oneThatIsCreatingARelationWithAnother: PropTypes.string.isRequired,
target: PropTypes.string.isRequired,
};
export default RelationFormNaturePicker;

1
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
View File

@ -409,6 +409,7 @@ const FormModal = () => {
key="relation"
mainBoxHeader={name}
modifiedData={modifiedData}
naturePickerType={state.forTarget}
onChange={handleChange}
errors={formErrors}
/>

1
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
View File

@ -32,6 +32,7 @@ const reducer = (state, action) => {
type: 'relation',
nature: 'oneWay',
targetAttribute: '-',
target: 'address',
};
} else {
dataToSet = { type: attributeType, default: null };

2
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
View File

@ -141,7 +141,6 @@ const forms = {
...numberTypeShape,
});
case 'relation':
console.log('lll');
return yup.object().shape({
name: yup
.string()
@ -152,6 +151,7 @@ const forms = {
.unique(errorsTrads.unique, targetAttributeAllreadyTakenValue)
.required(errorsTrads.required),
type: yup.string().required(errorsTrads.required),
target: yup.string().required(errorsTrads.required),
nature: yup.string().required(),
dominant: yup.boolean(),
unique: yup.boolean().nullable(),

3
packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToMany.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
const ManyToMany = ({ isSelected }) => {
const ManyToMany = ({ isSelected, ...rest }) => {
const stroke = isSelected ? '#1C5DE7' : '#919BAE';
const rectProps = isSelected
? {
@ -14,6 +14,7 @@ const ManyToMany = ({ isSelected }) => {
return (
<svg
{...rest}
width="41"
height="41"
xmlns="http://www.w3.org/2000/svg"

3
packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToOne.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
const ManyToOne = ({ isSelected }) => {
const ManyToOne = ({ isSelected, ...rest }) => {
const stroke = isSelected ? '#1C5DE7' : '#919BAE';
const rectProps = isSelected
? {
@ -14,6 +14,7 @@ const ManyToOne = ({ isSelected }) => {
return (
<svg
{...rest}
width="41"
height="41"
xmlns="http://www.w3.org/2000/svg"

4
packages/strapi-plugin-content-type-builder/admin/src/icons/ManyWay.js
View File

@ -1,13 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
const ManyWay = ({ isSelected }) => {
const ManyWay = ({ isSelected, ...rest }) => {
const rectStroke = isSelected ? '#1C5DE7' : '#E3E9F3';
const stroke = isSelected ? '#1C5DE7' : '#ABB3C2';
const otherStroke = isSelected ? '#1C5DE7' : '#ABB3C4';
return (
<svg width="41" height="41" xmlns="http://www.w3.org/2000/svg">
<svg {...rest} width="41" height="41" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<rect width="41" height="41" rx="2" fill="#FFF" />
<rect stroke={rectStroke} x=".5" y=".5" width="40" height="40" rx="2" />

3
packages/strapi-plugin-content-type-builder/admin/src/icons/OneToMany.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
const OneToMany = ({ isSelected }) => {
const OneToMany = ({ isSelected, ...rest }) => {
const stroke = isSelected ? '#1C5DE7' : '#919BAE';
const rectProps = isSelected
? {
@ -14,6 +14,7 @@ const OneToMany = ({ isSelected }) => {
return (
<svg
{...rest}
width="41"
height="41"
xmlns="http://www.w3.org/2000/svg"

3
packages/strapi-plugin-content-type-builder/admin/src/icons/OneToOne.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
const OneToOne = ({ isSelected }) => {
const OneToOne = ({ isSelected, ...rest }) => {
const stroke = isSelected ? '#1C5DE7' : '#919BAE';
const rectProps = isSelected
? {
@ -14,6 +14,7 @@ const OneToOne = ({ isSelected }) => {
return (
<svg
{...rest}
width="41"
height="41"
xmlns="http://www.w3.org/2000/svg"

4
packages/strapi-plugin-content-type-builder/admin/src/icons/OneWay.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
const OneWay = ({ isSelected }) => {
const OneWay = ({ isSelected, ...rest }) => {
const stroke = isSelected ? '#1C5DE7' : '#919BAE';
const rectProps = isSelected
? {
@ -12,7 +12,7 @@ const OneWay = ({ isSelected }) => {
stroke: '#101622',
};
return (
<svg width="41" height="41" xmlns="http://www.w3.org/2000/svg">
<svg {...rest} width="41" height="41" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<rect width="41" height="41" rx="2" fill="#FFF" />
<rect {...rectProps} x=".5" y=".5" width="40" height="40" rx="2" />