Created Edit and EditRelations components

packages/strapi-plugin-content-manager/admin/src/components/Edit/index.js

@@ -0,0 +1,20 @@
+/**
+ *
+ * Edit
+ *
+ */
+
+import React from 'react';
+import styles from './styles.scss';
+
+function Edit() {
+  return (
+    <div className={styles.form}>
+      <div className="row">
+        init
+      </div>
+    </div>
+  );
+}
+
+export default Edit;

packages/strapi-plugin-content-manager/admin/src/components/Edit/styles.scss

@@ -0,0 +1,4 @@
+.form { /* stylelint-disable */
+  width: 100%;
+  padding: 0 15px;
+}

packages/strapi-plugin-content-manager/admin/src/components/EditRelations/index.js

@@ -0,0 +1,21 @@
+/**
+ *
+ * EditRelations
+ *
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import styles from './styles.scss';
+
+function EditRelations() {
+  return (
+    <div className={styles.editFormRelations}>
+      <FormattedMessage id="content-manager.EditRelations.title">
+        {(message) => <h3>{message}</h3>}
+      </FormattedMessage>
+    </div>
+  );
+}
+
+export default EditRelations;

packages/strapi-plugin-content-manager/admin/src/components/EditRelations/styles.scss

@@ -0,0 +1,13 @@
+.editFormRelations { /* stylelint-disable */
+  h3{
+    height: 41px;
+    margin: 0 -25px 14px;
+    padding: 0 25px;
+    background: #F3F3F3;
+    line-height: 41px;
+    border-radius: 2px 2px 0 0;
+    letter-spacing: 0.03rem;
+    font-size: 1.3rem;
+    font-weight: bold;
+  }
+}

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js

@@ -9,6 +9,7 @@ import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_MODEL_PROPS,
+  RESET_PROPS,
 } from './constants';
 
 export function changeData({ target }) {
@@ -49,3 +50,9 @@ export function initModelProps(modelName, isCreating, source, attributes) {
     form,
   };
 }
+
+export function resetProps() {
+  return {
+    type: RESET_PROPS,
+  };
+}

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/constants.js

@@ -8,3 +8,4 @@ export const CHANGE_DATA = 'ContentManager/EditPage/CHANGE_DATA';
 export const GET_DATA = 'ContentManager/EditPage/GET_DATA';
 export const GET_DATA_SUCCEEDED = 'ContentManager/EditPage/GET_DATA_SUCCEEDED';
 export const INIT_MODEL_PROPS = 'ContentManager/EditPage/INIT_MODEL_PROPS';
+export const RESET_PROPS = 'ContentManager/EditPage/RESET_PROPS';

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import PropTypes from 'prop-types';
-import { get, toNumber, toString } from 'lodash';
+import { get, toNumber, toString, size } from 'lodash';
 import cn from 'classnames';
 
 // You can find these components in either
@@ -19,6 +19,10 @@ import cn from 'classnames';
 import BackHeader from 'components/BackHeader';
 import PluginHeader from 'components/PluginHeader';
 
+// Plugin's components
+import Edit from 'components/Edit';
+import EditRelations from 'components/EditRelations';
+
 // App selectors
 import { makeSelectModels, makeSelectSchema } from 'containers/App/selectors';
 
@@ -35,6 +39,7 @@ import {
   changeData,
   getData,
   initModelProps,
+  resetProps,
 } from './actions';
 
 import reducer from './reducer';
@@ -56,6 +61,10 @@ export class EditPage extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    this.props.resetProps();
+  }
+
   /**
    * Retrive the model
    * @type {Object}
@@ -116,6 +125,8 @@ export class EditPage extends React.Component {
 
   isCreating = () => this.props.match.params.id === 'create';
 
+  isRelationComponentNull = () => size(get(this.getSchema(), 'relations')) === 0;
+
   pluginHeaderActions = [
     {
       label: 'content-manager.containers.Edit.reset',
@@ -136,13 +147,27 @@ export class EditPage extends React.Component {
 
     return (
       <div>
-        <BackHeader onClick={() => this.props.history.goBack()} />
+        <form onSubmit={(e) => { e.preventDefault(); }}>
-        <div className={cn('container-fluid', styles.containerFluid)}>
+          <BackHeader onClick={() => this.props.history.goBack()} />
-          <PluginHeader
+          <div className={cn('container-fluid', styles.containerFluid)}>
-            actions={this.pluginHeaderActions}
+            <PluginHeader
-            title={{ id: toString(editPage.pluginHeaderTitle) }}
+              actions={this.pluginHeaderActions}
-          />
+              title={{ id: toString(editPage.pluginHeaderTitle) }}
-        </div>
+            />
+            <div className="row">
+              <div className={this.isRelationComponentNull() ? 'col-lg-12' : 'col-lg-9'}>
+                <div className={styles.main_wrapper}>
+                  <Edit />
+                </div>
+              </div>
+              <div className={cn('col-lg-3', this.isRelationComponentNull() ? 'hidden-xl-down' : '')}>
+                <div className={styles.sub_wrapper}>
+                  <EditRelations />
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
       </div>
     );
   }
@@ -165,6 +190,7 @@ EditPage.propTypes = {
   location: PropTypes.object.isRequired,
   match: PropTypes.object.isRequired,
   models: PropTypes.object,
+  resetProps: PropTypes.func.isRequired,
   schema: PropTypes.object.isRequired,
 };
 
@@ -174,6 +200,7 @@ function mapDispatchToProps(dispatch) {
       changeData,
       getData,
       initModelProps,
+      resetProps,
     },
     dispatch,
   );

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/reducer.js

@@ -9,6 +9,7 @@ import {
   CHANGE_DATA,
   GET_DATA_SUCCEEDED,
   INIT_MODEL_PROPS,
+  RESET_PROPS,
 } from './constants';
 
 const initialState = fromJS({
@@ -36,6 +37,8 @@ function editPageReducer(state = initialState, action) {
         .update('isCreating', () => action.isCreating)
         .update('modelName', () => action.modelName)
         .update('source', () => action.source);
+    case RESET_PROPS:
+      return initialState;
     default:
       return state;
   }

packages/strapi-plugin-content-manager/admin/src/translations/de.json

@@ -15,6 +15,8 @@
   "components.LimitSelect.itemsPerPage": "Einträge pro Seite",
   "containers.List.errorFetchRecords": "Fehler",
 
+  "EditRelations.title": "Relational data",
+  
   "emptyAttributes.title": "Es gibt noch keine Felder",
   "emptyAttributes.description": "Füge deinem Content-Typen das erste Feld hinzu",
   "emptyAttributes.button": "Den Content-Typ-Generator öffnen",

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

@@ -15,6 +15,8 @@
   "components.LimitSelect.itemsPerPage": "Items per page",
   "containers.List.errorFetchRecords": "Error",
 
+  "EditRelations.title": "Relational data",
+  
   "emptyAttributes.title": "There are no fields yet",
   "emptyAttributes.description": "Add your first field to your Content Type",
   "emptyAttributes.button": "Go to content type builder",

packages/strapi-plugin-content-manager/admin/src/translations/fr.json

@@ -16,6 +16,8 @@
   "components.LimitSelect.itemsPerPage": "Éléments par page",
   "containers.List.errorFetchRecords": "Erreur",
 
+  "EditRelations.title": "Donées associées",
+
   "emptyAttributes.title": "Il n'y a pas encore de champs",
   "emptyAttributes.description": "Ajoutez votre premier champ a votre modèle",
   "emptyAttributes.button": "Ouvrir le Content Type Builder",

packages/strapi-plugin-content-manager/admin/src/translations/pl.json

@@ -15,6 +15,8 @@
   "components.LimitSelect.itemsPerPage": "Wpisów na stronę",
   "containers.List.errorFetchRecords": "Błąd",
 
+  "EditRelations.title": "Relational data",
+
   "emptyAttributes.title": "Nie ma jeszcze żadnych atrybutów",
   "emptyAttributes.description": "Dodaj swoje pierwszy atrybut do modelu",
   "emptyAttributes.button": "Przejdź do konstruktora modeli",