Init edit layout

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

@@ -0,0 +1,79 @@
+import styled, { css } from 'styled-components';
+
+const Carret = styled.div`
+  position: absolute;
+  ${({ right }) => {
+    if (right) {
+      return css`
+        right: -4px;
+      `;
+    }
+
+    return css`
+      left: -1px;
+    `;
+  }}
+  height: 30px;
+  margin-right: 3px;
+  width: 2px;
+  border-radius: 2px;
+  background: #007eff;
+`;
+
+const FullWidthCarret = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 30px;
+  width: 100%;
+  padding: 0 10px;
+  margin-bottom: 6px;
+  border-radius: 2px;
+  > div {
+    background: #007eff;
+    height: 2px;
+    width: 100%;
+  }
+`;
+
+const NameWrapper = styled.div`
+  position: relative;
+  height: 30px;
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  padding-left: 10px;
+  justify-content: space-between;
+  ${({ isHidden }) => {
+    if (!isHidden) {
+      return css`
+        background: #fafafb;
+        line-height: 28px;
+        color: #333740;
+        border: 1px solid #e3e9f3;
+        border-radius: 2px;
+        &:hover {
+          cursor: move;
+        }
+        > img {
+          align-self: flex-start;
+          vertical-align: top;
+          max-width: 8px;
+          margin-right: 10px;
+          margin-top: 11px;
+        }
+      `;
+    }
+  }}
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  position: relative;
+  .sub_wrapper {
+    width: 100%;
+    padding: 0 10px;
+  }
+`;
+
+export { Carret, FullWidthCarret, NameWrapper, Wrapper };

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

@@ -0,0 +1,68 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+
+// import EditIcon from '../VariableEditIcon';
+import RemoveIcon from '../DraggedRemovedIcon';
+import { Carret, FullWidthCarret, NameWrapper, Wrapper } from './components';
+
+const FieldItem = ({
+  isDragging,
+  name,
+  showLeftCarret,
+  showRightCarret,
+  size,
+  type,
+}) => {
+  const isHidden = name === '_TEMP_';
+  const withLongerHeight = [
+    'json',
+    'text',
+    'file',
+    'group',
+    'WYSIWYG',
+  ].includes(type);
+  const style = withLongerHeight ? { height: '84px' } : {};
+
+  return (
+    <div style={{ width: `${(1 / 12) * size * 100}%` }}>
+      <Wrapper>
+        {isDragging && size === 12 ? (
+          <FullWidthCarret>
+            <div />
+          </FullWidthCarret>
+        ) : (
+          <>
+            {showLeftCarret && <Carret style={style} />}
+            <div className="sub_wrapper">
+              <NameWrapper style={style} isHidden={isHidden}>
+                <span>{!isHidden && name}</span>
+                {!isHidden && (
+                  <RemoveIcon withLongerHeight={withLongerHeight} />
+                )}
+              </NameWrapper>
+            </div>
+            {showRightCarret && <Carret right style={style} />}
+          </>
+        )}
+      </Wrapper>
+    </div>
+  );
+};
+
+FieldItem.defaultProps = {
+  isDragging: false,
+  showLeftCarret: false,
+  showRightCarret: false,
+  type: 'string',
+};
+
+FieldItem.propTypes = {
+  isDragging: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  showLeftCarret: PropTypes.bool,
+  showRightCarret: PropTypes.bool,
+  size: PropTypes.number.isRequired,
+  type: PropTypes.string,
+};
+
+export default memo(FieldItem);

packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import FieldItem from '../FieldItem';
+
+const Item = ({ name, size, type }) => {
+  return <FieldItem name={name} size={size} type={type} />;
+};
+
+Item.defaultProps = {
+  type: 'string',
+};
+
+Item.propTypes = {
+  name: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  type: PropTypes.string,
+};
+
+export default memo(Item);

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

@@ -0,0 +1 @@
+// import styled from 'styled-components';

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

@@ -0,0 +1,59 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+
+import SortWrapper from '../SortWrapper';
+import Item from './Item';
+
+const FieldsReorder = ({ attributes, layout }) => {
+  const getType = attributeName => {
+    const attribute = get(attributes, [attributeName], {});
+
+    if (attribute.plugin === 'upload') {
+      return 'file';
+    }
+
+    return attribute.type;
+  };
+
+  return (
+    <div className="col-8">
+      <SortWrapper>
+        {layout.map((row, rowIndex) => {
+          //
+          return (
+            <div key={row.rowId} style={{ display: 'flex' }}>
+              {row.rowContent.map((rowContent, index) => {
+                const { name, size } = rowContent;
+
+                return (
+                  <Item
+                    itemIndex={index}
+                    key={name}
+                    name={name}
+                    rowIndex={rowIndex}
+                    size={size}
+                    type={getType(name)}
+                    //
+                  />
+                );
+              })}
+            </div>
+          );
+        })}
+      </SortWrapper>
+    </div>
+  );
+};
+
+FieldsReorder.defaultProps = {
+  attributes: {},
+  layout: [],
+};
+
+FieldsReorder.propTypes = {
+  attributes: PropTypes.object,
+  layout: PropTypes.array,
+};
+
+export default memo(FieldsReorder);

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const SettingFormWrapper = styled.form`
+const SettingFormWrapper = styled.div`
   min-height: 246px;
   padding: 24px 30px 0px;
   background-color: #fafafb;

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const SortWrapper = styled.div`
+  margin-top: 7px;
+  margin-bottom: 10px;
+  padding-top: 10px;
+  border: 1px dashed #e3e9f3;
+  border-radius: 2px;
+  > div {
+    // padding: 0 10px;
+  }
+`;
+
+export default SortWrapper;

packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js

@@ -25,6 +25,7 @@ function ListLayout({
   onChange,
   onClick,
   onRemove,
+  onSubmit,
 }) {
   const ref = useRef(null);
   const handleRemove = index => {
@@ -116,7 +117,7 @@ function ListLayout({
         <Add data={availableData} onClick={addField} />
       </div>
       <div className="col-lg-7 col-md-12">
-        <FormWrapper>
+        <FormWrapper onSubmit={onSubmit}>
           {form.map(input => {
             return (
               <Input
@@ -142,6 +143,7 @@ ListLayout.defaultProps = {
   onChange: () => {},
   onClick: () => {},
   onRemove: () => {},
+  onSubmit: () => {},
 };
 
 ListLayout.propTypes = {
@@ -155,6 +157,7 @@ ListLayout.propTypes = {
   onChange: PropTypes.func,
   onClick: PropTypes.func,
   onRemove: PropTypes.func,
+  onSubmit: PropTypes.func,
 };
 
 export default DropTarget(ItemTypes.FIELD, {}, connect => ({

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

@@ -1,3 +1,4 @@
+import { set } from 'lodash';
 import {
   ADD_FIELD_TO_LIST,
   GET_DATA,
@@ -11,6 +12,7 @@ import {
   SET_LIST_FIELD_TO_EDIT_INDEX,
   SUBMIT_SUCCEEDED,
 } from './constants';
+import { formatLayout, createLayout } from '../../utils/layout';
 
 export function addFieldToList(field) {
   return {
@@ -27,6 +29,11 @@ export function getData(uid) {
 }
 
 export function getDataSucceeded(layout) {
+  set(
+    layout,
+    ['layouts', 'edit'],
+    formatLayout(createLayout(layout.layouts.edit))
+  );
   return {
     type: GET_DATA_SUCCEEDED,
     layout,

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

@@ -16,6 +16,7 @@ import pluginId from '../../pluginId';
 
 import Block from '../../components/Block';
 import Container from '../../components/Container';
+import FieldsReorder from '../../components/FieldsReorder';
 import FormTitle from '../../components/FormTitle';
 import SectionTitle from '../../components/SectionTitle';
 
@@ -83,12 +84,19 @@ function SettingViewModel({
     if (showWarningSubmit) {
       toggleWarningSubmit();
     }
-  }, [shouldToggleModalSubmit, showWarningSubmit]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldToggleModalSubmit]);
 
   if (isLoading) {
     return <LoadingIndicatorPage />;
   }
 
+  const handleSubmit = e => {
+    e.preventDefault();
+    toggleWarningSubmit();
+    emitEvent('willSaveContentTypeLayout');
+  };
+
   const getPluginHeaderActions = () => {
     if (isEqual(modifiedData, initialData)) {
       return [];
@@ -96,17 +104,16 @@ function SettingViewModel({
 
     return [
       {
-        label: 'content-manager.popUpWarning.button.cancel',
+        label: `${pluginId}.popUpWarning.button.cancel`,
         kind: 'secondary',
         onClick: toggleWarningCancel,
         type: 'button',
       },
       {
         kind: 'primary',
-        label: 'content-manager.containers.Edit.submit',
+        label: `${pluginId}.containers.Edit.submit`,
-        onClick: () => {
+        onClick: e => {
-          toggleWarningSubmit();
+          handleSubmit(e);
-          emitEvent('willSaveContentTypeLayout');
         },
         type: 'submit',
       },
@@ -128,6 +135,21 @@ function SettingViewModel({
       return getListDisplayedFields();
     }
 
+    if (input.name === 'settings.mainField') {
+      const attributes = get(modifiedData, ['schema', 'attributes'], {});
+      const options = Object.keys(attributes).filter(attr => {
+        const type = get(attributes, [attr, 'type'], '');
+
+        return (
+          !['json', 'text', 'relation', 'group', 'boolean', 'date'].includes(
+            type
+          ) && !!type
+        );
+      });
+
+      return ['id', ...options];
+    }
+
     return input.selectOptions;
   };
 
@@ -135,84 +157,96 @@ function SettingViewModel({
     <>
       <BackHeader onClick={() => goBack()} />
       <Container className="container-fluid">
-        <PluginHeader
+        <form onSubmit={handleSubmit}>
-          actions={getPluginHeaderActions()}
+          <PluginHeader
-          title={{
+            actions={getPluginHeaderActions()}
-            id: `${pluginId}.containers.SettingViewModel.pluginHeader.title`,
+            title={{
-            values: { name: upperFirst(name) },
+              id: `${pluginId}.containers.SettingViewModel.pluginHeader.title`,
-          }}
+              values: { name: upperFirst(name) },
-          description={{
-            id:
-              'content-manager.containers.SettingPage.pluginHeaderDescription',
-          }}
-        />
-        <HeaderNav
-          links={[
-            {
-              name: 'content-manager.containers.SettingPage.listSettings.title',
-              to: getUrl(name, 'list-settings'),
-            },
-            {
-              name: 'content-manager.containers.SettingPage.editSettings.title',
-              to: getUrl(name, 'edit-settings'),
-            },
-          ]}
-        />
-        <div className="row">
-          <Block
-            style={{
-              marginBottom: '13px',
-              paddingBottom: '30px',
-              paddingTop: '30px',
             }}
-          >
+            description={{
-            <SectionTitle isSettings />
+              id:
-            <div className="row">
+                'content-manager.containers.SettingPage.pluginHeaderDescription',
-              {forms[settingType].map(input => {
+            }}
-                return (
+          />
-                  <Input
+          <HeaderNav
-                    key={input.name}
+            links={[
-                    {...input}
+              {
-                    onChange={onChange}
+                name:
-                    selectOptions={getSelectOptions(input)}
+                  'content-manager.containers.SettingPage.listSettings.title',
-                    value={get(modifiedData, input.name)}
+                to: getUrl(name, 'list-settings'),
-                  />
+              },
-                );
+              {
-              })}
+                name:
-              <div className="col-12">
+                  'content-manager.containers.SettingPage.editSettings.title',
-                <Separator />
+                to: getUrl(name, 'edit-settings'),
+              },
+            ]}
+          />
+          <div className="row">
+            <Block
+              style={{
+                marginBottom: '13px',
+                paddingBottom: '30px',
+                paddingTop: '30px',
+              }}
+            >
+              <SectionTitle isSettings />
+              <div className="row">
+                {forms[settingType].map(input => {
+                  return (
+                    <Input
+                      key={input.name}
+                      {...input}
+                      onChange={onChange}
+                      selectOptions={getSelectOptions(input)}
+                      value={get(modifiedData, input.name)}
+                    />
+                  );
+                })}
+                <div className="col-12">
+                  <Separator />
+                </div>
               </div>
-            </div>
+              <SectionTitle />
-            <SectionTitle />
 
-            <div className="row">
+              <div className="row">
-              <LayoutTitle className="col-12">
+                <LayoutTitle className="col-12">
-                <FormTitle
+                  <FormTitle
-                  title={`${pluginId}.global.displayedFields`}
+                    title={`${pluginId}.global.displayedFields`}
-                  description={`${pluginId}.containers.SettingPage.${
+                    description={`${pluginId}.containers.SettingPage.${
-                    settingType === 'list-settings'
+                      settingType === 'list-settings'
-                      ? 'attributes'
+                        ? 'attributes'
-                      : 'editSettings'
+                        : 'editSettings'
-                  }.description`}
+                    }.description`}
-                />
+                  />
-              </LayoutTitle>
+                </LayoutTitle>
 
-              {settingType === 'list-settings' && (
+                {settingType === 'list-settings' && (
-                <ListLayout
+                  <ListLayout
-                  addField={addFieldToList}
+                    addField={addFieldToList}
-                  displayedData={getListDisplayedFields()}
+                    displayedData={getListDisplayedFields()}
-                  availableData={getListRemainingFields()}
+                    availableData={getListRemainingFields()}
-                  fieldToEditIndex={listFieldToEditIndex}
+                    fieldToEditIndex={listFieldToEditIndex}
-                  modifiedData={modifiedData}
+                    modifiedData={modifiedData}
-                  moveListField={moveListField}
+                    moveListField={moveListField}
-                  onClick={setListFieldToEditIndex}
+                    onClick={setListFieldToEditIndex}
-                  onChange={onChange}
+                    onChange={onChange}
-                  onRemove={onRemoveListField}
+                    onRemove={onRemoveListField}
-                />
+                    onSubmit={handleSubmit}
-              )}
+                  />
-            </div>
+                )}
-          </Block>
+
-        </div>
+                {settingType === 'edit-settings' && (
+                  <FieldsReorder
+                    attributes={get(modifiedData, ['schema', 'attributes'], {})}
+                    layout={get(modifiedData, ['layouts', 'edit'], [])}
+                  />
+                )}
+              </div>
+            </Block>
+          </div>
+        </form>
       </Container>
       <PopUpWarning
         isOpen={showWarningCancel}

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

@@ -4,6 +4,7 @@
  */
 
 import { fromJS } from 'immutable';
+
 import {
   ADD_FIELD_TO_LIST,
   GET_DATA_SUCCEEDED,

packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/saga.js

@@ -1,8 +1,10 @@
 import { all, fork, put, call, takeLatest, select } from 'redux-saga/effects';
+import { set } from 'lodash';
 import { request } from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
 import { deleteLayout } from '../Main/actions';
+import { unformatLayout } from '../../utils/layout';
 import { getDataSucceeded, submitSucceeded } from './actions';
 import { GET_DATA, ON_SUBMIT } from './constants';
 import { makeSelectModifiedData } from './selectors';
@@ -24,6 +26,8 @@ export function* getData({ uid }) {
 export function* submit({ emitEvent, uid }) {
   try {
     const body = yield select(makeSelectModifiedData());
+    // We need to send the unformated edit layout
+    set(body, 'layouts.edit', unformatLayout(body.layouts.edit));
 
     yield call(request, getRequestUrl(`layouts/${uid}`), {
       method: 'PUT',

packages/strapi-plugin-content-manager/admin/src/utils/layout.js

@@ -0,0 +1,73 @@
+const getSize = arr => arr.reduce((sum, value) => sum + value.size, 0);
+
+const createLayout = arr => {
+  return arr.reduce((acc, current, index) => {
+    const row = { rowId: index, rowContent: current };
+
+    return acc.concat(row);
+  }, []);
+};
+
+const formatLayout = arr => {
+  return arr
+    .reduce((acc, current) => {
+      let toPush = [];
+      const currentRow = current.rowContent.reduce((acc2, curr) => {
+        const acc2Size = getSize(acc2);
+
+        if (curr.name === '_TEMP_') {
+          return acc2;
+        }
+
+        if (acc2Size + curr.size <= 12) {
+          acc2.push(curr);
+        } else {
+          toPush.push(curr);
+        }
+
+        return acc2;
+      }, []);
+      const rowId =
+        acc.length === 0 ? 0 : Math.max.apply(Math, acc.map(o => o.rowId)) + 1;
+
+      const currentRowSize = getSize(currentRow);
+
+      if (currentRowSize < 12) {
+        currentRow.push({ name: '_TEMP_', size: 12 - currentRowSize });
+      }
+
+      acc.push({ rowId, rowContent: currentRow });
+
+      if (toPush.length > 0) {
+        const toPushSize = getSize(toPush);
+
+        if (toPushSize < 12) {
+          toPush.push({ name: '_TEMP_', size: 12 - toPushSize });
+        }
+
+        acc.push({ rowId: rowId + 1, rowContent: toPush });
+        toPush = [];
+      }
+
+      return acc;
+    }, [])
+    .filter(row => row.rowContent.length > 0)
+    .filter(row => {
+      if (row.rowContent.length === 1) {
+        return row.rowContent[0].name !== '_TEMP_';
+      }
+      return true;
+    });
+};
+
+const unformatLayout = arr => {
+  return arr.reduce((acc, current) => {
+    const currentRow = current.rowContent.filter(
+      content => content.name !== '_TEMP_'
+    );
+
+    return acc.concat([currentRow]);
+  }, []);
+};
+
+export { createLayout, formatLayout, unformatLayout };