From e4c70d7a455fe6e852ca4babd263027df62eeba3 Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Thu, 21 Nov 2019 13:15:13 +0100
Subject: [PATCH] Enable nature change

---
 .../src/components/RelationForm/index.js      | 19 ++++-
 .../RelationFormNaturePicker/Wrapper.js       |  2 +-
 .../RelationFormNaturePicker/index.js         | 83 +++++++++++++++----
 .../admin/src/containers/FormModal/index.js   |  1 +
 .../admin/src/containers/FormModal/reducer.js |  1 +
 .../src/containers/FormModal/utils/forms.js   |  2 +-
 .../admin/src/icons/ManyToMany.js             |  3 +-
 .../admin/src/icons/ManyToOne.js              |  3 +-
 .../admin/src/icons/ManyWay.js                |  4 +-
 .../admin/src/icons/OneToMany.js              |  3 +-
 .../admin/src/icons/OneToOne.js               |  3 +-
 .../admin/src/icons/OneWay.js                 |  4 +-
 12 files changed, 100 insertions(+), 28 deletions(-)

diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationForm/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationForm/index.js
index 69759feaef..f07868d648 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationForm/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationForm/index.js
@@ -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,
 };
 
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/Wrapper.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/Wrapper.js
index b0d431854e..b9c1fffa41 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/Wrapper.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/Wrapper.js
@@ -43,7 +43,7 @@ const StyledRelationNaturePicker = styled.div`
         }
       }
     }
-    img {
+    svg {
       margin: 0 1.5rem;
       cursor: pointer;
     }
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/index.js
index 76816c9b0e..6f53de8bc6 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormNaturePicker/index.js
@@ -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;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
index 8d884d279a..0718bff3f5 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
@@ -409,6 +409,7 @@ const FormModal = () => {
                                   key="relation"
                                   mainBoxHeader={name}
                                   modifiedData={modifiedData}
+                                  naturePickerType={state.forTarget}
                                   onChange={handleChange}
                                   errors={formErrors}
                                 />
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
index 4811f654a1..e6947db2c9 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
@@ -32,6 +32,7 @@ const reducer = (state, action) => {
           type: 'relation',
           nature: 'oneWay',
           targetAttribute: '-',
+          target: 'address',
         };
       } else {
         dataToSet = { type: attributeType, default: null };
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
index d38b96d872..5df2cc742f 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
@@ -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(),
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToMany.js b/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToMany.js
index 113cabf76a..aaa8c16326 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToMany.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToMany.js
@@ -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"
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToOne.js b/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToOne.js
index beeba4589c..1a02aa3ab3 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToOne.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyToOne.js
@@ -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"
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyWay.js b/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyWay.js
index 0e615fbfdb..5ea56f7d13 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyWay.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/icons/ManyWay.js
@@ -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" />
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToMany.js b/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToMany.js
index 8446a1bfd7..5da78815fe 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToMany.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToMany.js
@@ -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"
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToOne.js b/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToOne.js
index c599d75cbf..2dedb1eabe 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToOne.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/icons/OneToOne.js
@@ -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"
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/icons/OneWay.js b/packages/strapi-plugin-content-type-builder/admin/src/icons/OneWay.js
index 07251f3baa..c7b3180df1 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/icons/OneWay.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/icons/OneWay.js
@@ -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" />