Design RelationBox

packages/strapi-plugin-content-type-builder/admin/src/components/PopUpRelations/index.js

@@ -5,10 +5,11 @@
 */
 
 import React from 'react';
-import { map } from 'lodash';
+import { get, map } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import PopUpHeaderNavLink from 'components/PopUpHeaderNavLink';
+import RelationBox from 'components/RelationBox';
 import styles from './styles.scss';
 
 class PopUpRelations extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -34,10 +35,33 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
     </div>
   )
 
+  renderModalBodyRelations = () => {
+    console.log('ok');
+    return (
+      <ModalBody className={`${styles.modalBody} ${styles.flex}`}>
+        <RelationBox
+          header={this.props.contentType}
+          input={get(this.props.form, ['items', '0'])}
+          value={get(this.props.values, 'name')}
+          handleChange={this.props.handleChange}
+        />
+        <div></div>
+        <RelationBox
+          header={this.props.contentType}
+          input={get(this.props.form, ['items', '0'])}
+          value={get(this.props.values, 'name')}
+          handleChange={this.props.handleChange}
+        />
+      </ModalBody>
+    )
+  }
+
   render() {
     const loader = this.props.showLoader ?
       <Button onClick={this.props.handleSubmit} type="submit" className={styles.primary} disabled={this.props.showLoader}><p className={styles.saving}><span>.</span><span>.</span><span>.</span></p></Button>
         : <Button type="submit" onClick={this.props.handleSubmit} className={styles.primary}><FormattedMessage id="form.button.continue" /></Button>;
+
+    const modalBody = this.props.showRelation ? this.renderModalBodyRelations(): <div />;
     return (
       <div className={styles.popUpRelations}>
         <Modal isOpen={this.props.isOpen} toggle={this.props.toggle} className={`${styles.modalPosition}`}>
@@ -53,13 +77,9 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
 
             {this.renderNavContainer()}
           </div>
-          <ModalBody className={styles.modalBody}>
-            <div className="container-fluid">
-              <div className="row">
 
-              </div>
+          {modalBody}
-            </div>
+
-          </ModalBody>
           <ModalFooter className={styles.modalFooter}>
             <Button onClick={this.props.toggle} className={styles.secondary}><FormattedMessage id="form.button.cancel" /></Button>
             {loader}{' '}
@@ -71,12 +91,20 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
 }
 
 PopUpRelations.propTypes = {
+  contentType: React.PropTypes.object,
+  form: React.PropTypes.oneOfType([
+    React.PropTypes.array.isRequired,
+    React.PropTypes.object.isRequired,
+  ]),
+  handleChange: React.PropTypes.func,
   handleSubmit: React.PropTypes.func,
   isOpen: React.PropTypes.bool,
   popUpTitle: React.PropTypes.string.isRequired,
   routePath: React.PropTypes.string.isRequired,
   showLoader: React.PropTypes.bool,
+  showRelation: React.PropTypes.bool,
   toggle: React.PropTypes.func,
+  values: React.PropTypes.object,
 }
 
 export default PopUpRelations;

packages/strapi-plugin-content-type-builder/admin/src/components/PopUpRelations/styles.scss

@@ -8,11 +8,12 @@
  }
 
  .modalBody {
-   padding: 2.2rem 1.4rem 0 1.4rem;
+   display: flex;
+   padding: 4.8rem 2.9rem 0 2.9rem;
  }
 
  .modalFooter {
-   padding: 1rem 1rem 2.8rem 1rem;
+   padding: 4.4rem 1rem 2.8rem 1rem;
    border: none;
    > button {
      height: 3rem;

packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/index.js

@@ -5,16 +5,44 @@
 */
 
 import React from 'react';
-
+import { get, startCase } from 'lodash';
+import Input from 'components/Input';
 import styles from './styles.scss';
 
 class RelationBox extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
       <div className={styles.relationBox}>
+        <div className={styles.headerContainer}>
+          <i className={`fa ${get(this.props.header, 'icon')}`} />
+          {startCase(get(this.props.header, 'name'))}
+        </div>
+        <div className={styles.inputContainer}>
+          <div className="container-fluid">
+            <div className={`row ${styles.input}`}>
+              <Input
+                type={this.props.input.type}
+                handleChange={this.props.handleChange}
+                name={this.props.input.name}
+                target={this.props.input.target}
+                value={this.props.value}
+                placeholder={this.props.input.placeholder}
+                customBootstrapClass="col-md-12"
+                validations={this.props.input.validations}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 }
 
+RelationBox.propTypes = {
+  handleChange: React.PropTypes.func,
+  header: React.PropTypes.object,
+  input: React.PropTypes.object,
+  value: React.PropTypes.string,
+}
+
 export default RelationBox;

packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/styles.scss

@@ -1,3 +1,36 @@
 .relationBox { /* stylelint-disable */
-
+  height: 13.8rem;
+  width: 21.5rem;
+  background-color: #FCFCFC;
+  box-shadow: 0 1px 2px #CAD2DF;
+}
+
+.headerContainer {
+  height: 3.6rem;
+  width: 100%;
+  background-color: rgba(16, 22, 34, 0.04);
+  line-height: 3.6rem;
+  text-align: center;
+  font-size: 1.4rem;
+  font-weight: bold;
+  text-transform: capitalize;
+  > i {
+    margin-right: 8px;
+    color: rgba(50, 55, 64, 0.75);
+    font-size: 1.3rem;
+    font-weight: 100;
+  }
+}
+
+
+.inputContainer {
+  padding-top: 1rem;
+}
+
+.input {
+  > div {
+    > label {
+      font-weight: 600;
+    }
+  }
 }

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/actions.js

@@ -6,7 +6,7 @@
 
  /* eslint-disable new-cap */
 
-import { map , forEach, replace } from 'lodash';
+import { includes, map , forEach, replace } from 'lodash';
 import { Map, List } from 'immutable';
 import { getValidationsFromForm } from '../../utils/formValidations';
 import { storeData } from '../../utils/storeData';
@@ -140,11 +140,24 @@ export function resetIsFormSet() {
 
 export function setAttributeForm(hash) {
   const data = setAttributeFormData(hash);
+  const attributeRelation = Map({
+    name: '',
+    params: Map({
+      columnName: '',
+      target: '',
+      targetColumnName: "",
+      key: '',
+      nature: '',
+      required: false,
+      unique: false,
+    }),
+  });
+  const attribute = includes(hash, 'defineRelation') ? attributeRelation : data.attribute;
   const formValidations = getValidationsFromForm(data.form, []);
   return {
     type: SET_ATTRIBUTE_FORM,
     form: data.form,
-    attribute: data.attribute,
+    attribute,
     formValidations,
   }
 }

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/forms.json

@@ -83,7 +83,7 @@
           {
             "name": "form.attribute.item.textarea.name",
             "target": "name",
-            "type": "textarea",
+            "type": "string",
             "value": "",
             "validations": {
               "required": true
@@ -366,7 +366,20 @@
       }
     },
     "relation": {
-      "defineRelation": {},
+      "defineRelation": {
+        "items": [
+          {
+            "name": "form.attribute.item.defineRelation.fieldName",
+            "target": "name",
+            "type": "string",
+            "value": "",
+            "placeholder": "relation.attributeName.placeholder",
+            "validations": {
+              "required": true
+            }
+          }
+        ]
+      },
       "advancedSettings": {}
     }
   }

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/index.js

@@ -496,6 +496,11 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
           renderCustomPopUpHeader={renderCustomPopUpHeader}
           popUpTitle={popUpTitle}
           routePath={`${this.props.routePath}/${this.props.hash}`}
+          contentType={get(this.props.menuData[0], ['items', findIndex(get(this.props.menuData[0], 'items'), ['name', this.props.modelName])])}
+          form={this.props.form}
+          showRelation={includes(this.props.hash, 'defineRelation')}
+          handleChange={this.handleChange}
+          values={this.props.modifiedDataAttribute}
         />
       );
     }

packages/strapi-plugin-content-type-builder/admin/src/translations/en.json

@@ -33,6 +33,7 @@
   "form.attribute.item.maximumLength": "Maximum length",
   "form.attribute.item.requiredField.description": "You won't be able to create an entry if this field is empty",
   "form.attribute.item.uniqueField.description": "You won't be able to create an entry if there is an existing entry with identical content",
+  "form.attribute.item.defineRelation.fieldName": "Field name",
 
   "form.button.cancel": "Cancel",
   "form.button.continue": "Continue",