Add new key in schema to display the editView fields

Design the relation drag & sort

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

@@ -9,9 +9,9 @@ import { FormattedMessage } from 'react-intl';
 
 import styles from './styles.scss';
 
-const Block = ({ children, description, title }) => (
+const Block = ({ children, description, style, title }) => (
   <div className="col-md-12">
-    <div className={styles.ctmBlock}>
+    <div className={styles.ctmBlock} style={style}>
       <div className={styles.ctmBlockTitle}>
         <FormattedMessage id={title} />
         <FormattedMessage id={description}>
@@ -27,12 +27,14 @@ const Block = ({ children, description, title }) => (
 Block.defaultProps = {
   children: null,
   description: 'app.utils.defaultMessage',
+  style: {},
   title: 'app.utils.defaultMessage',
 };
 
 Block.propTypes = {
   children: PropTypes.any,
   description: PropTypes.string,
+  style: PropTypes.object,
   title: PropTypes.string,
 };
 

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

@@ -88,6 +88,14 @@ class SettingPage extends React.PureComponent {
       });
   }
 
+  getEditPageDisplaySettings = () => {
+    return get(this.props.schema, 'models.'.concat(this.getPath().concat('.editDisplay')), { fields: [], relations: [] });
+  }
+  
+  getEditPageFields = () => get(this.getEditPageDisplaySettings(), ['fields'], []);
+  
+  getEditPageRelations = () => get(this.getEditPageDisplaySettings(), ['relations'], []);
+
   getListDisplay = () => (
     get(this.props.schema, `models.${this.getPath()}.listDisplay`, [])
   );
@@ -207,6 +215,19 @@ class SettingPage extends React.PureComponent {
     return index === -1 ? 0 : index;
   }
 
+  hasRelations = () => {
+    const relations = get(this.props.schema, 'models.'.concat(this.getPath()).concat('.relations'), {});
+    
+    return Object.keys(relations)
+      .filter(relation => {
+        const isUploadRelation = get(relations, [relation, 'plugin'], '') === 'upload';
+        const isMorphSide = get(relations, [relation, 'nature'], '').toLowerCase().includes('morph') && get(relations, [relation, relation]) !== undefined;
+
+        return !isUploadRelation && !isMorphSide;
+      })
+      .length > 0;
+  }
+
   // We need to remove the Over state on the DraggableAttr component
   updateSiblingHoverState = () => {
     this.setState(prevState => ({ isDraggingSibling: !prevState.isDraggingSibling }));
@@ -234,7 +255,7 @@ class SettingPage extends React.PureComponent {
     const namePath = this.getPath();
 
     return (
-      <React.Fragment>
+      <form onSubmit={this.handleSubmit}>
         <BackHeader onClick={() => this.props.history.goBack()} />
         <div className={cn('container-fluid', styles.containerFluid)}>
           <PluginHeader
@@ -271,13 +292,16 @@ class SettingPage extends React.PureComponent {
               this.toggleWarningCancel();
             }}
           />
+
           <div className={cn('row', styles.container)}>
             <Block
               description="content-manager.containers.SettingPage.listSettings.description"
               title="content-manager.containers.SettingPage.listSettings.title"
+              style={{ marginBottom: '25px' }}
             >
-              <form onSubmit={this.handleSubmit} className={styles.ctmForm}>
+              <div className={styles.ctmForm}>
                 <div className="row">
+
                   <div className="col-md-12">
                     <div className="row">
                       {forms.inputs.map(input => {
@@ -296,22 +320,26 @@ class SettingPage extends React.PureComponent {
                       })}
                     </div>
                   </div>
+
                   <div className="col-md-12">
                     <div className={styles.separator} />
                   </div>
                 </div>
+
                 <div className={styles.listDisplayWrapper}>
                   <div className="row">
+
                     <div className={cn('col-md-12', styles.draggedDescription)}>
                       <FormattedMessage id="content-manager.containers.SettingPage.attributes" />
                       <p>
                         <FormattedMessage id="content-manager.containers.SettingPage.attributes.description" />
                       </p>
                     </div>
+
                     <div className="col-md-5">
                       {this.getListDisplay().map((attr, index) => (
                         <div key={attr.name} className={styles.draggedWrapper}>
-                          <div>{index}.</div>
+                          <div>{index + 1}.</div>
                           <DraggableAttr
                             index={index}
                             isDraggingSibling={isDraggingSibling}
@@ -360,6 +388,7 @@ class SettingPage extends React.PureComponent {
                         </ButtonDropdown>
                       </div>
                     </div>
+
                     <div className="col-md-7">
                       <div className={styles.editWrapper}>
                         <div className="row">
@@ -391,13 +420,59 @@ class SettingPage extends React.PureComponent {
                         </div>
                       </div>
                     </div>
+
                   </div>
                 </div>
-              </form>
+              </div>
+            </Block>
+
+            <Block
+              description="content-manager.containers.SettingPage.editSettings.description"
+              title="content-manager.containers.SettingPage.editSettings.title"
+            >
+              <div className="row">
+
+                <div className={cn('col-md-8', styles.draggedDescription, styles.edit_settings)}>
+                  <FormattedMessage id="content-manager.containers.SettingPage.attributes" />
+                  <div className={cn(styles.sort_wrapper, 'col-md-12')}>
+                    <div className="row">
+                      {/* GRID SORT */}
+                    </div>
+                  </div>
+                </div>
+
+                {this.hasRelations() && (
+                  <div className={cn('col-md-4', styles.draggedDescription, styles.edit_settings)}>
+                    <FormattedMessage id="content-manager.containers.SettingPage.relations" />
+                    <div className={cn(styles.sort_wrapper, 'col-md-12')}>
+                      <div className="row">
+                        {this.getEditPageRelations().map((attr, index) => {
+                          return (
+                            <DraggableAttr
+                              index={index}
+                              isDraggingSibling={false}
+                              isEditing={false}
+                              key={attr}
+                              keys=""
+                              name={attr}
+                              label={attr}
+                              moveAttr={() => {}}
+                              onClickEditListItem={() => {}}
+                              onRemove={() => {}}
+                              updateSiblingHoverState={() => {}}
+                            />
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+              </div>
             </Block>
           </div>
         </div>
-      </React.Fragment>
+      </form>
     );
   }
 }

packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/styles.scss

@@ -126,3 +126,16 @@
     }
   }
 }
+
+.edit_settings {
+  padding-top: 25px;
+}
+
+.sort_wrapper {
+  margin-top: 7px;
+  padding-top: 10px;
+  border: 1px dashed #E3E9F3;
+  > div {
+    padding: 0 10px;
+  }
+}

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

@@ -18,6 +18,10 @@
   "containers.SettingPage.addField": "Add new field",
   "containers.SettingPage.attributes": "Attributes fields",
   "containers.SettingPage.attributes.description": "Define the order of the attributes",
+  "containers.SettingPage.relations": "Relational fields",
+
+  "containers.SettingPage.editSettings.description": "Drag & drop the fields to build the layout",
+  "containers.SettingPage.editSettings.title": "Edit - Settings",
 
   "containers.SettingPage.listSettings.title": "List — Settings",
   "containers.SettingPage.listSettings.description": "Configure the options for this content type",

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

@@ -18,7 +18,13 @@
   "containers.SettingPage.addField": "Ajouter un nouveau champs",
   "containers.SettingPage.attributes": "Attributs",
   "containers.SettingPage.attributes.description": "Organiser les attributs du modèle",
+  "containers.SettingPage.relations": "Champs relationnels",
+
   "containers.SettingPage.pluginHeaderDescription": "Configurez les paramètres de ce modèle",
+
+  "containers.SettingPage.editSettings.description": "Glissez & déposez les champs pour construire le layout",
+  "containers.SettingPage.editSettings.title": "Edit - Paramètres",
+
   "containers.SettingPage.listSettings.title": "Liste — Paramètres",
   "containers.SettingPage.listSettings.description": "Configurez les options de ce modèle",
 

packages/strapi-plugin-content-manager/config/functions/bootstrap.js

@@ -51,10 +51,14 @@ module.exports = async cb => {
       pageEntries: 10,
       defaultSort: model.primaryKey,
       sort: 'ASC',
+      editDisplay: {
+        fields: [],
+        relations: [],
+      },
     }, model);
   
     // Fields (non relation)
-    schemaModel.fields = _.mapValues(_.pickBy(model.attributes, attribute =>
+    const fields = _.mapValues(_.pickBy(model.attributes, attribute =>
       !attribute.model && !attribute.collection
     ), (value, attribute) => ({
       label: _.upperFirst(attribute),
@@ -62,8 +66,11 @@ module.exports = async cb => {
       type: value.type || 'string',
     }));
 
+    schemaModel.fields = fields;
+    schemaModel.editDisplay.fields = Object.keys(fields);
+    
+  
     // Select fields displayed in list view
-    // schemaModel.list = _.slice(_.keys(schemaModel.fields), 0, 4);
     schemaModel.listDisplay = Object.keys(schemaModel.fields)
       // Construct Array of attr ex { type: 'string', label: 'Foo', name: 'Foo', description: '' }
       // NOTE: Do we allow sort on boolean?
@@ -103,6 +110,15 @@ module.exports = async cb => {
   
         return acc;
       }, {});
+      const relationsArray = Object.keys(schemaModel.relations).filter(relation => {
+        const isUploadRelation = _.get(schemaModel, ['relations', relation, 'plugin'], '') === 'upload';
+        const isMorphSide = _.get(schemaModel, ['relations', relation, 'nature'], '').toLowerCase().includes('morp') &&  _.get(schemaModel, ['relations', relation, relation]) !== undefined;
+
+        return !isUploadRelation && !isMorphSide;
+      });
+
+      schemaModel.editDisplay.relations = relationsArray;
+
     }
   
     if (plugin) {

packages/strapi-plugin-content-manager/config/layout.json

@@ -1 +1,25 @@
-{}
+{
+  "product": {
+    "attributes": {
+      "name": {
+        "appearance": ""
+      },
+      "price": {
+        "appearance": ""
+      },
+      "description": {
+        "appearance": ""
+      },
+      "description_long": {
+        "appearance": "WYSIWYG"
+      }
+    }
+  },
+  "tag": {
+    "attributes": {
+      "name": {
+        "appearance": ""
+      }
+    }
+  }
+}

packages/strapi-plugin-users-permissions/models/User.settings.json

@@ -38,6 +38,10 @@
       "via": "users",
       "plugin": "users-permissions",
       "configurable": false
+    },
+    "products": {
+      "collection": "product",
+      "via": "users"
     }
   }
 }