Fix bugs and refactored code

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

@@ -6,7 +6,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-
 import styles from './styles.scss';
 
 function ClickOverHint({ show }) {

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

@@ -14,7 +14,6 @@ import { getEmptyImage } from 'react-dnd-html5-backend';
 import { flow } from 'lodash';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-
 import ClickOverHint from 'components/ClickOverHint';
 import DraggedRemovedIcon from 'components/DraggedRemovedIcon';
 import VariableEditIcon from 'components/VariableEditIcon';

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

@@ -7,7 +7,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-
 import styles from './styles.scss';
 
 function DraggedRemovedIcon({ isDragging, onRemove, withLongerHeight, ...rest }) {

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

@@ -6,7 +6,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-
 import styles from './styles.scss';
 
 function VariableEditIcon({ onClick, withLongerHeight, ...rest }) {

packages/strapi-plugin-content-manager/admin/src/containers/App/helpers.js

@@ -0,0 +1,70 @@
+import { List } from 'immutable';
+import { flattenDeep, get, range } from 'lodash';
+import Manager from 'utils/Manager';
+
+const stateUpdater = (obj, array, keys) => obj.updateIn(['modifiedSchema', 'models', ...keys.split('.'), 'fields'], () => array);
+const createManager = (obj, array, keys, dropIndex, layout) => new Manager(stateUpdater(obj, array, keys), array, keys, dropIndex, layout);
+const getElementsOnALine = (manager, line, list) => {
+  const firstElIndex = line === 0 ? 0 : manager.arrayOfEndLineElements[line - 1].index + 1;
+  const lastElIndex = get(manager.arrayOfEndLineElements[line], 'index', list.size -1) + 1;
+  const elements = manager.getElementsOnALine(range(firstElIndex, lastElIndex));
+
+  return { elements, lastElIndex };
+};
+const createArrayOfLastEls = (manager, list) => {
+  const { name, index, bootstrapCol } = manager.getAttrInfos(list.size - 1);
+  const isFullSize = bootstrapCol === 12;
+
+  return manager.arrayOfEndLineElements.concat({ name, index, isFullSize });
+};
+const removeColsLine = (manager, list) => {
+  let addedElsToRemove = [];
+  const arrayOfEndLineElements = createArrayOfLastEls(manager, list);
+
+  arrayOfEndLineElements.forEach((item, i) => {
+    if (i < arrayOfEndLineElements.length) {
+      const firstElementOnLine = i === 0 ? 0 : arrayOfEndLineElements[i - 1].index + 1;
+      const lastElementOnLine = arrayOfEndLineElements[i].index;
+      const rangeIndex = range(firstElementOnLine, lastElementOnLine + 1);
+      const elementsOnLine = manager.getElementsOnALine(rangeIndex)
+        .filter(name => !name.includes('__col'));
+
+      if (elementsOnLine.length === 0) {
+        addedElsToRemove = addedElsToRemove.concat(rangeIndex);
+      }
+    }
+  });
+
+  return list.filter((item, index) => {
+    const indexToKeep = addedElsToRemove.indexOf(index) === -1;
+
+    return indexToKeep;
+  });
+};
+const reorderList = (manager, list) => {
+  const array = createArrayOfLastEls(manager, list);
+  const lines = [];
+  
+  array.forEach((item, i) => {
+    const { elements } = getElementsOnALine(manager, i, list);
+    lines.push(elements);
+  });
+
+  const reordered = lines
+    .reduce((acc, curr) => {
+      const line = curr.sort((a) => a.includes('__col-md'));
+
+      return acc.concat(line);
+    }, [])
+    .filter(a => a !== undefined);
+
+  return List(flattenDeep(reordered));
+};
+
+export {
+  createArrayOfLastEls,
+  createManager,
+  getElementsOnALine,
+  removeColsLine,
+  reorderList,
+};

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

@@ -5,7 +5,7 @@
  */
 
 import { fromJS, List } from 'immutable';
-import { difference, findIndex, flattenDeep, get, range, upperFirst } from 'lodash';
+import { difference, findIndex, get, range, upperFirst } from 'lodash';
 import Manager from 'utils/Manager';
 import {
   BEGIN_MOVE,
@@ -28,6 +28,12 @@ import {
   SET_LAYOUT,
   SUBMIT_SUCCEEDED,
 } from './constants';
+import {
+  createManager,
+  getElementsOnALine,
+  removeColsLine,
+  reorderList,
+} from './helpers';
 
 const initialState = fromJS({
   addedElementName: null,
@@ -44,21 +50,7 @@ const initialState = fromJS({
   shouldUpdateListOnDrop: true,
   submitSuccess: false,
 });
-const stateUpdater = (obj, array, keys) => obj.updateIn(['modifiedSchema', 'models', ...keys.split('.'), 'fields'], () => array);
-const createManager = (obj, array, keys, dropIndex, layout) => new Manager(stateUpdater(obj, array, keys), array, keys, dropIndex, layout);
-const getElementsOnALine = (manager, line, list) => {
-  const firstElIndex = line === 0 ? 0 : manager.arrayOfEndLineElements[line - 1].index + 1;
-  const lastElIndex = get(manager.arrayOfEndLineElements[line], 'index', list.size -1) + 1;
-  const elements = manager.getElementsOnALine(range(firstElIndex, lastElIndex));
 
-  return { elements, lastElIndex };
-};
-const createArrayOfLastEls = (manager, list) => {
-  const { name, index, bootstrapCol } = manager.getAttrInfos(list.size - 1);
-  const isFullSize = bootstrapCol === 12;
-
-  return manager.arrayOfEndLineElements.concat({ name, index, isFullSize });
-};
 
 function appReducer(state = initialState, action) {
   switch (action.type) {
@@ -117,47 +109,12 @@ function appReducer(state = initialState, action) {
               });
             }
             const nextManager = createManager(state, newList, action.keys, dropIndex, layout);
-            const newArrayOfLastLineElements = createArrayOfLastEls(nextManager, newList);
-            // Array of element's index to remove from the new list
-            let addedElementsToRemove = [];
-
-            newArrayOfLastLineElements.forEach((item, i) => { // Should be a function in the manager
-              if (i < newArrayOfLastLineElements.length) {
-                const firstElementOnLine = i === 0 ? 0 : newArrayOfLastLineElements[i - 1].index + 1;
-                const lastElementOnLine = newArrayOfLastLineElements[i].index;
-                const rangeIndex = range(firstElementOnLine, lastElementOnLine + 1);
-                const elementsOnLine = nextManager.getElementsOnALine(rangeIndex)
-                  .filter(name => !name.includes('__col'));
-
-                if (elementsOnLine.length === 0) {
-                  addedElementsToRemove = addedElementsToRemove.concat(rangeIndex);
-                }
-              }
-            });
-            newList = newList.filter((item, index) => { // Remove the unnecessary divs
-              const indexToKeep = addedElementsToRemove.indexOf(index) === -1;
-
-              return indexToKeep;
-            });
+            newList = removeColsLine(nextManager, newList);
             const lastManager = createManager(state, newList, action.keys, dropIndex, layout);
-            const lastArrayOfLastLineElements = createArrayOfLastEls(lastManager, newList);
-            const lines = [];
-
-            lastArrayOfLastLineElements.forEach((item, i) => {
-              const { elements } = getElementsOnALine(lastManager, i, newList);
-              lines.push(elements);
-            });
-
-            //Layout reorder
-            const reordered = lines.reduce((acc, curr) => {
-              const line = curr.sort((a) => a.includes('__col-md'));
-
-              return acc.concat(line);
-            }, []);
-            // // Make sure all the lines are full
-            // // This step is needed when we create a line before a full size element like
-            // // The JSON input or the WYSIWYG
-            newList = createManager(state, List(flattenDeep(reordered)), action.keys, dropIndex, layout).getLayout();
+            // Make sure all the lines are full
+            // This step is needed when we create a line before a full size element like
+            // The JSON input or the WYSIWYG
+            newList = createManager(state, reorderList(lastManager, newList), action.keys, dropIndex, layout).getLayout();
           }
 
           return newList;
@@ -373,39 +330,10 @@ function appReducer(state = initialState, action) {
           }
         }
         // This part is needed to remove the add __col-md-${something}__ that keeps the layout when removing an item
-        // It may happen that a line is composed by these divs therefore we need to remove then
-        // It's the same logic than above so we're using the manager
-        // NewState is the updated state
-        const newState = state.updateIn(['modifiedSchema', 'models', ...action.keys.split('.'), 'fields'], () => newList);
-        const newManager = new Manager(newState, newList, action.keys, action.index, layout);
-        const lastListItem = newManager.getAttrInfos(newList.size - 1);
-        const isLastItemFullSize = lastListItem.bootstrapCol === 12;
-        const newArrayOfLastLineElements = newManager.arrayOfEndLineElements
-          .concat({ name: lastListItem.name, index: lastListItem.index, isFullSize: isLastItemFullSize });
-        // Array of element's index to remove from the new list
-        let addedElementsToRemove = [];
+        // It may happen that a line is composed by these divs therefore we need to remove them
+        const newManager = createManager(state, newList, action.keys, action.index, layout);
 
-        newArrayOfLastLineElements.forEach((item, i) => {
-          if (i < newArrayOfLastLineElements.length) {
-            const firstElementOnLine = i === 0 ? 0 : newArrayOfLastLineElements[i - 1].index + 1;
-            const lastElementOnLine = newArrayOfLastLineElements[i].index;
-            const rangeIndex = range(firstElementOnLine, lastElementOnLine + 1);
-            const elementsOnLine = newManager.getElementsOnALine(rangeIndex)
-              .filter(name => !name.includes('__col'));
-
-            if (elementsOnLine.length === 0) {
-              addedElementsToRemove = addedElementsToRemove.concat(rangeIndex);
-            }
-          }
-        });
-
-        newList = newList.filter((item, index) => { // Remove the unnecessary divs
-          const indexToKeep = addedElementsToRemove.indexOf(index) === -1;
-
-          return indexToKeep;
-        });
-        
-        return newList;
+        return removeColsLine(newManager, newList);
       });
     case ON_REMOVE_EDIT_VIEW_RELATION_ATTR: {
       const relationName = state.getIn(['modifiedSchema', 'models', ...action.keys.split('.'), action.index]);
@@ -432,7 +360,7 @@ function appReducer(state = initialState, action) {
         const modelName = path.length > 2 ? path[2] : path[0];
         const layout = state.getIn(['modifiedSchema', 'layout', modelName, 'attributes']);
         const manager = new Manager(state, list, action.keys, 0, layout);
-        const newList = manager.getLayout();
+        const newList = reorderList(manager, manager.getLayout());
 
         return newList;
       });

packages/strapi-plugin-content-type-builder/services/ContentTypeBuilder.js

@@ -6,6 +6,11 @@ const _ = require('lodash');
 const generator = require('strapi-generate');
 const { fromJS } = require('immutable');
 const Manager = require('../utils/Manager.js');
+const {
+  createManager,
+  removeColsLine,
+  reorderList,
+} = require('../utils/helpers.js');
 
 module.exports = {
   appearance: async (attributes, model, plugin) => {
@@ -16,7 +21,6 @@ module.exports = {
     });
 
     const schema = await pluginStore.get({ key: 'schema' });
-
     const layout = _.get(schema.layout, model, {});
 
     // If updating a content-type
@@ -87,35 +91,12 @@ module.exports = {
           }
         }
 
-        const newState = state.updateIn(['schema', 'models', ...keys.split('.'), 'fields'], () => newList);
-        const newManager = new Manager(newState, newList, keys, index, fromJS(layout));
-        const lastListItem = newManager.getAttrInfos(newList.size - 1);
-        const isLastItemFullSize = lastListItem.bootstrapCol === 12;
-        const newArrayOfLastLineElements = newManager.arrayOfEndLineElements
-          .concat({ name: lastListItem.name, index: lastListItem.index, isFullSize: isLastItemFullSize });
-        // Array of element's index to remove from the new list
-        let addedElementsToRemove = [];
-
-        newArrayOfLastLineElements.forEach((item, i) => {
-          if (i < newArrayOfLastLineElements.length) {
-            const firstElementOnLine = i === 0 ? 0 : newArrayOfLastLineElements[i - 1].index + 1;
-            const lastElementOnLine = newArrayOfLastLineElements[i].index;
-            const rangeIndex = _.range(firstElementOnLine, lastElementOnLine + 1);
-            const elementsOnLine = newManager.getElementsOnALine(rangeIndex)
-              .filter(name => !name.includes('__col'));
-
-            if (elementsOnLine.length === 0) {
-              addedElementsToRemove = addedElementsToRemove.concat(rangeIndex);
-            }
-          }
-        });
-
-        newList = newList.filter((item, index) => { // Remove the unnecessary divs
-          const indexToKeep = addedElementsToRemove.indexOf(index) === -1;
-
-          return indexToKeep;
-        });
+        const newManager = createManager(state, newList, keys, 0, fromJS(layout.attributes));
+        newList = removeColsLine(newManager, newList);
+        const lastManager = createManager(state, newList, keys, 0, fromJS(layout.attributes));
+        newList = reorderList(lastManager, lastManager.getLayout());
       });
+      
 
       // Delete them from the available fields
       fieldsToRemove.forEach(field => {

packages/strapi-plugin-content-type-builder/utils/helpers.js

@@ -0,0 +1,70 @@
+const { List } = require('immutable');
+const { flattenDeep, get, range } = require('lodash');
+const Manager = require('./Manager');
+
+const stateUpdater = (obj, array, keys) => obj.updateIn(['modifiedSchema', 'models', ...keys.split('.'), 'fields'], () => array);
+const createManager = (obj, array, keys, dropIndex, layout) => new Manager(stateUpdater(obj, array, keys), array, keys, dropIndex, layout);
+const getElementsOnALine = (manager, line, list) => {
+  const firstElIndex = line === 0 ? 0 : manager.arrayOfEndLineElements[line - 1].index + 1;
+  const lastElIndex = get(manager.arrayOfEndLineElements[line], 'index', list.size -1) + 1;
+  const elements = manager.getElementsOnALine(range(firstElIndex, lastElIndex));
+
+  return { elements, lastElIndex };
+};
+const createArrayOfLastEls = (manager, list) => {
+  const { name, index, bootstrapCol } = manager.getAttrInfos(list.size - 1);
+  const isFullSize = bootstrapCol === 12;
+
+  return manager.arrayOfEndLineElements.concat({ name, index, isFullSize });
+};
+const removeColsLine = (manager, list) => {
+  let addedElsToRemove = [];
+  const arrayOfEndLineElements = createArrayOfLastEls(manager, list);
+
+  arrayOfEndLineElements.forEach((item, i) => {
+    if (i < arrayOfEndLineElements.length) {
+      const firstElementOnLine = i === 0 ? 0 : arrayOfEndLineElements[i - 1].index + 1;
+      const lastElementOnLine = arrayOfEndLineElements[i].index;
+      const rangeIndex = range(firstElementOnLine, lastElementOnLine + 1);
+      const elementsOnLine = manager.getElementsOnALine(rangeIndex)
+        .filter(name => !name.includes('__col'));
+
+      if (elementsOnLine.length === 0) {
+        addedElsToRemove = addedElsToRemove.concat(rangeIndex);
+      }
+    }
+  });
+
+  return list.filter((item, index) => {
+    const indexToKeep = addedElsToRemove.indexOf(index) === -1;
+
+    return indexToKeep;
+  });
+};
+const reorderList = (manager, list) => {
+  const array = createArrayOfLastEls(manager, list);
+  const lines = [];
+  
+  array.forEach((item, i) => {
+    const { elements } = getElementsOnALine(manager, i, list);
+    lines.push(elements);
+  });
+
+  const reordered = lines
+    .reduce((acc, curr) => {
+      const line = curr.sort((a) => a.includes('__col-md'));
+
+      return acc.concat(line);
+    }, [])
+    .filter(a => a !== undefined);
+  
+  return List(flattenDeep(reordered));
+};
+
+module.exports = {
+  createArrayOfLastEls,
+  createManager,
+  getElementsOnALine,
+  removeColsLine,
+  reorderList,
+};