Fix duplicate key bug

packages/strapi-helper-plugin/lib/src/utils/Manager.js

@@ -52,8 +52,9 @@ class Manager {
       default:
         ret = ['__col-md-3__'];
     }
-    const random = Math.floor(Math.random() * 1000);
-    const random1 = Math.floor(Math.random() * 1000);
+
+    const random = Math.random().toString(36).substring(7);
+    const random1 = Math.random().toString(36).substring(8);
 
     return ret.map((v, i) => {
 

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

@@ -104,6 +104,10 @@ class DraggableAttr extends React.Component {
     if (isDraggingSibling !== prevProps.isDraggingSibling && isDraggingSibling) {
       this.handleMouseLeave();
     }
+
+    if (prevProps.isDragging !== this.props.isDragging && this.props.isDragging) {
+      this.props.onClickEdit(this.props.index);
+    }
   }
 
   handleClickEdit = (e) => {

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

@@ -156,6 +156,10 @@ class VariableDraggableAttr extends React.Component {
     if (prevProps.isDragging !== this.props.isDragging) {
       this.handleDragEffect();
     }
+
+    if (prevProps.isDragging !== this.props.isDragging && this.props.isDragging) {
+      this.handleClickEdit();
+    }
   }
 
   handleClickEdit = () => {
@@ -179,20 +183,43 @@ class VariableDraggableAttr extends React.Component {
 
   renderContent = () => {
     let { classNames, isOver, style, dragStart } = this.state;
-    const { data, hoverIndex, index, isEditing, name } = this.props;
+    const { data, draggedItemName, grid, hoverIndex, index, initDragLine, isEditing, name } = this.props;
     const isFullSize = classNames.bootstrap === 'col-md-12';
-    const showCarret = hoverIndex === index;
+    let itemLine = -1;
+    let itemLineEls = [];
+    grid.forEach((line, index) => {
+      if (line.indexOf(name) !== -1) {
+        itemLine = index;
+        itemLineEls = line;
+      }
+    });
+    const itemPosition = get(grid, itemLine, []).indexOf(name);
+    const draggedItemLineIndex = get(grid, itemLine, []).indexOf(draggedItemName);
+    let showLeftCarret = hoverIndex === index && initDragLine !== itemLine;
+    let showRightCarret = hoverIndex === index && initDragLine === itemLine;
+
+    if (hoverIndex === index && initDragLine === itemLine && (itemPosition === 0 || itemPosition === 1 && itemLineEls.length > 2)) {
+      if (itemLineEls.length < 3 || itemPosition === 0 || draggedItemLineIndex > itemPosition) {
+        showLeftCarret = true;
+        showRightCarret = false;
+      }
+    }
+  
     const carretStyle = (() => {
-      let style = { height: '30px' };
+      let style = { height: '30px', marginRight: '3px' };
 
       if (classNames.withLongerHeight) {
-        style = { height: '84px' };
+        style = { height: '84px', marginRight: '3px' };
       }
 
       if (isFullSize) {
         style = { width: '100%', height: '10px', marginBottom: '6px' };
       }
 
+      if (showRightCarret) {
+        style = { height: '30px', marginLeft: '3px' };
+      }
+
       return style;
     })();
 
@@ -202,7 +229,7 @@ class VariableDraggableAttr extends React.Component {
     
     return (
       <div style={{ display: 'flex' }}>
-        { showCarret && <Carret style={carretStyle} />}
+        { showLeftCarret && <Carret style={carretStyle} />}
         <div className={cn(classNames.wrapper, isEditing && styles.editingVariableAttr)} style={style}>
           <i className="fa fa-th" />
           <span className={styles.truncated}>
@@ -220,6 +247,7 @@ class VariableDraggableAttr extends React.Component {
             <DraggedRemovedIcon withLongerHeight={classNames.withLongerHeight} onRemove={this.handleRemove} />
           )}
         </div>
+        { showRightCarret && <Carret style={carretStyle} />}
       </div>
     );
   }
@@ -252,8 +280,11 @@ VariableDraggableAttr.defaultProps = {
   data: {
     type: 'text',
   },
+  draggedItemName: null,
+  grid: [],
   hoverIndex: -1,
   index: 0,
+  initDragLine: -1,
   isDragging: false,
   isEditing: false,
   keys: '',
@@ -268,8 +299,11 @@ VariableDraggableAttr.propTypes = {
   connectDragSource: PropTypes.func.isRequired,
   connectDropTarget: PropTypes.func.isRequired,
   data: PropTypes.object,
+  draggedItemName: PropTypes.string,
+  grid: PropTypes.array,
   hoverIndex: PropTypes.number,
   index: PropTypes.number,
+  initDragLine: PropTypes.number,
   isDragging: PropTypes.bool,
   isEditing: PropTypes.bool,
   keys: PropTypes.string,

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

@@ -57,8 +57,20 @@ const reorderList = (manager, list) => {
       return acc.concat(line);
     }, [])
     .filter(a => a !== undefined);
+  
+  const uniqueIdList = reordered.reduce((acc, current, index) => {
+    if (reordered.indexOf(current) === index) {
+      acc.push(current);
+    } else {
+      const bootstrapCol =  parseInt(current.split('__')[1].split('-')[2], 10);
+      const random = Math.random().toString(36).substring(7);
+      acc.push(`__col-md-${bootstrapCol}__${random}`);
+    }
 
-  return List(flattenDeep(reordered));
+    return acc;
+  }, []);
+
+  return List(flattenDeep(uniqueIdList));
 };
 const getLines = (manager, list) => {
   const array = createArrayOfLastEls(manager, list);

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

@@ -29,6 +29,10 @@ const makeSelectAddedField = () =>
   createSelector(selectGlobalDomain(), globalState =>
     globalState.get('addedField')
   );
+const makeSelectDraggedItemName = () =>
+  createSelector(selectGlobalDomain(), globalState =>
+    globalState.get('draggedItemName')
+  );
 const makeSelectHoverIndex = () =>
   createSelector(selectGlobalDomain(), globalState =>
     globalState.get('hoverIndex')
@@ -39,6 +43,8 @@ const makeSelectModelEntries = () =>
   );
 const makeSelectGrid = () =>
   createSelector(selectGlobalDomain(), substate => substate.get('grid').toJS());
+const makeSelectInitDragLine = () =>
+  createSelector(selectGlobalDomain(), substate => substate.get('initDragLine'));
 const makeSelectLoading = () =>
   createSelector(selectGlobalDomain(), substate => substate.get('loading'));
 const makeSelectSchema = () =>
@@ -54,8 +60,10 @@ export {
   selectGlobalDomain,
   selectLocationState,
   makeSelectAddedField,
+  makeSelectDraggedItemName,
   makeSelectHoverIndex,
   makeSelectGrid,
+  makeSelectInitDragLine,
   makeSelectLoading,
   makeSelectModelEntries,
   makeSelectModifiedSchema,

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

@@ -32,8 +32,10 @@ import {
 } from 'containers/App/actions';
 import {
   makeSelectAddedField,
+  makeSelectDraggedItemName,
   makeSelectGrid,
   makeSelectHoverIndex,
+  makeSelectInitDragLine,
   makeSelectModifiedSchema,
   makeSelectShouldResetGrid,
   makeSelectSubmitSuccess,
@@ -443,10 +445,13 @@ class SettingPage extends React.PureComponent {
       <VariableDraggableAttr
         beginMove={this.props.beginMove}
         data={this.getAttrData(attr)}
+        draggedItemName={this.props.draggedItemName}
         endMove={this.props.endMove}
+        grid={this.props.grid}
         hoverIndex={this.props.hoverIndex}
         id={attr}
         index={index}
+        initDragLine={this.props.initDragLine}
         isEditing={index === this.findIndexFieldToEdit()}
         key={attr}
         keys={`${this.getPath()}.editDisplay`}
@@ -805,16 +810,19 @@ class SettingPage extends React.PureComponent {
 }
 
 SettingPage.defaultProps = {
+  draggedItemName: null,
   grid: [],
 };
 
 SettingPage.propTypes = {
   addedField: PropTypes.bool.isRequired,
   beginMove: PropTypes.func.isRequired,
+  draggedItemName: PropTypes.string,
   endMove: PropTypes.func.isRequired,
   grid: PropTypes.array,
   history: PropTypes.object.isRequired,
   hoverIndex: PropTypes.number.isRequired,
+  initDragLine: PropTypes.number.isRequired,
   match: PropTypes.object.isRequired,
   moveAttr: PropTypes.func.isRequired,
   moveAttrEditView: PropTypes.func.isRequired,
@@ -863,8 +871,10 @@ const mapDispatchToProps = (dispatch) => (
 );
 const mapStateToProps = createStructuredSelector({
   addedField: makeSelectAddedField(),
+  draggedItemName: makeSelectDraggedItemName(),
   grid: makeSelectGrid(),
   hoverIndex: makeSelectHoverIndex(),
+  initDragLine: makeSelectInitDragLine(),
   schema: makeSelectModifiedSchema(),
   settingPage: makeSelectSettingPage(),
   shouldResetGrid: makeSelectShouldResetGrid(),