merging with child sort panel

Author: tolgamizrakci

src/actions/components.js

@@ -40,15 +40,9 @@ export const loadInitData = () => dispatch => {
     dispatch({
       type: LOAD_INIT_DATA,
       payload: {
-<<<<<<< HEAD
-        data: data ? data.workspace : {},
-      },
-    }),
-=======
         data: data ? data.workspace : {}
       }
     })
->>>>>>> fcd32cb... finished ts changes to util files
   );
 };
 
@@ -83,14 +77,10 @@ export const deleteChild = ({}) => dispatch => {
   dispatch({ type: DELETE_CHILD, payload: {} });
 };
 
-<<<<<<< HEAD
-export const deleteComponent = ({ componentId, stateComponents }) => dispatch => {
-=======
 export const deleteComponent = ({
   componentId,
   stateComponents
 }) => dispatch => {
->>>>>>> fcd32cb... finished ts changes to util files
   // find all places where the "to be delted" is a child and do what u gotta do
   stateComponents.forEach(parent => {
     parent.childrenArray
@@ -325,9 +315,16 @@ export const updateHtmlAttr = ({ attr, value }) => dispatch => {
   });
 };
 
+<<<<<<< HEAD
 export const updateChildrenSort = ({ newChildrenArray }) => dispatch => {
   dispatch({
     type: UPDATE_CHILDREN_SORT,
     payload: { newChildrenArray }
+=======
+export const updateChildrenSort = ({ newSortValues }) => (dispatch) => {
+  dispatch({
+    type: UPDATE_CHILDREN_SORT,
+    payload: { newSortValues },
+>>>>>>> 29b23c438a735dda0a220e39c9795d2ca252eb6d
   });
 };

src/components/SortChildren.jsx

@@ -1,72 +1,88 @@
 
+"use strict" ; 
+
 import React, { Component} from "react";
 import { connect } from "react-redux";
 import { updateChildrenSort } from "../actions/components";
+import { width } from "window-size";
+import cloneDeep from "../utils/cloneDeep"; 
 
 const mapStateToProps = store => ({
   focusComponent: store.workspace.focusComponent,
 });
 
 const mapDispatchToProps = dispatch => ({
-  updateChildrenSort: ({ newChildrenArray }) => dispatch(updateChildrenSort({ newChildrenArray }))
+  updateChildrenSort: ({ newSortValues }) => dispatch(updateChildrenSort({ newSortValues }))
 });
 
 class SortChildren extends Component {
   constructor(props) {
     super(props);
 
    this.state =  {
-    localChildrenArray: this.setLocalArray()
-    //localChildrenArray: this.props.focusComponent.childrenArray,
-    //shortArray: this.setLocalArray()
-  };
-   
-  }
-
+    draggedIndex: null,
+    draggedOverIndex: null 
+    };
+  } // end constrcutor 
+ 
   setLocalArray = () =>{
     const localArray = this.props.focusComponent.childrenArray.map((child,idx) => {
-      return {Childid: child.childId, childSort: child.childSort}
+      return {childId: child.childId, childSort: child.childSort}
     } )
     return localArray ; 
   }
 
+
   onDragStart = (e,idx) => {
-    console.log('dragging index: ',idx)
-    this.draggedIndex = idx;
+
+    this.setState({draggedIndex:idx})
+
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/html", e.target.parentNode);
     e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
   };
 
 
-  onDragOver = (draggedOverIndex) => {
-    //const draggedOverIndex = idx;
+  onDragOver = (idx) => {
+    
+    this.setState({draggedOverIndex:idx})
+   // console.log(`onDragOver idx=${idx}  this.state.draggedOverIndex:${this.state.draggedOverIndex}`)
+  };
 
-    // if the item is dragged over itself, ignore
-    if (this.draggedIndex === draggedOverIndex) {
+  onDragEnd(e) {
+    console.log(`dragEnd this
+      state.draggedIndex: ${this.state.draggedIndex}
+      this.state.draggedOverIndex: ${this.state.draggedOverIndex}`
+    )
+    //const {draggedIndex, draggedOverIndex } = this.state; 
+    if (this.state.draggedIndex === this.state.draggedOverIndex 
+        // ||  !this.state.draggedIndex || this.state.draggedOverIndex 
+      ) {
       return;
     }
 
-    //console.log(`OnDrageOver: draggedOverIndex: ${draggedOverIndex} this.draggedIndex:${this.draggedIndex}`)
-    // filter out the currently dragged item
-    let draggedChild = this.state.localChildrenArray[this.draggedIndex] ; 
-    //console.log(`dragged item:`,draggedChild)
+    let  currentSortValues = this.setLocalArray(); 
+   // console.log(`currentSortValues`,JSON.stringify((currentSortValues)))
 
-    let localChildrenArray = [...this.state.localChildrenArray]
-    //console.log('localChildrenArray BEFORE removing ',JSON.stringify(localChildrenArray))
+    // remove the dragged Item and save it, we will use add it back in a moment. 
+    const draggedBaby = currentSortValues[this.state.draggedIndex] ; 
+    currentSortValues.splice(this.state.draggedIndex,1) ; 
+  
+    // put back the dragge item after the dragged Over 
+    currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby)
+    //console.log(`currentSortValues after reAdding the dragged baby `,JSON.stringify(currentSortValues))
 
+    currentSortValues = currentSortValues.map((child,idx) => {
+      return {childId:child.childId, childSort: idx+1}
+    })
 
-    localChildrenArray.splice(this.draggedIndex,1)
-    //console.log('localChildrenArray after removing ',JSON.stringify(localChildrenArray))
+    console.log(`currentSortValues after updating the sort  `,JSON.stringify(currentSortValues))
 
-    //add the dragged item after the dragged over item
-    localChildrenArray.splice(draggedOverIndex, 0, draggedChild);
-    //console.log('localChildrenArray final:  ',JSON.stringify(localChildrenArray))
-    this.setState({localChildrenArray });
+    this.props.updateChildrenSort({newSortValues: currentSortValues});
 
-   this.props.updateChildrenSort({newChildrenArray: localChildrenArray});
- 
-  };
+    this.setState({draggedIndex: 0, draggedOverIndex: 0 }) 
+
+  }
 
 render() {
   const ulStyle =  {
@@ -84,46 +100,66 @@ render() {
     lineHeight: 1,
     cursor: "move",
   }
-  const children = this.props.focusComponent.childrenArray; 
-  const List = children
+  //const children = this.props.focusComponent.childrenArray; 
+ // const List = children
+  const List = cloneDeep(this.props.focusComponent.childrenArray)
     .sort( (a,b) => a.childSort - b.childSort )
     .map( (child,idx) => {
-    //console.log(`mappping...... ${idx}   ${child.componentName + child.childId} childSort ${child.childSort}`)
       return (
         <li 
           style={liStyle}
-          id={child.Childid}
+          id={child.childId}
           key={idx}
         >
         <div className="drag" draggable  
           onDragStart={e => this.onDragStart(e,idx) }
           onDragOver ={e => this.onDragOver(idx)}
+          onDragEnd ={e => this.onDragEnd() }
         >
          {child.componentName + child.childId}
         </div>
 
         </li>
     )})
-    console.log('children')
-        console.log(children)
-        console.log('List')
-        console.log(List)
   return (
-    <div     style={{
+    <div   
+      style={{
+      minWidth: '200px',
       position: 'relative',
-      float: 'right',
+      float: 'left',
       marginTop: '20px',
       marginRIght: '20px',
-    }}  >
+    }}  
+    >
       <h3>Childrens List</h3>
       <ul style={ulStyle}>
-       {List}
+
+        {cloneDeep(this.props.focusComponent.childrenArray)
+    .sort( (a,b) => a.childSort - b.childSort )
+    .map( (child,idx) => {
+      return (
+        <li 
+          style={liStyle}
+          id={child.childId}
+          key={idx}
+        >
+        <div className="drag" draggable  
+          onDragStart={e => this.onDragStart(e,idx) }
+          onDragOver ={e => this.onDragOver(idx)}
+          onDragEnd ={e => this.onDragEnd() }
+        >
+         {child.componentName + child.childId}
+        </div>
+     
+        </li>
+    )})}
+
+
+       {/* {List} */}
       </ul> 
     </div>
-  )
- 
-}
-
+    )
+  }
 } 
 
 export default connect(

src/components/SortableComponent.jsx renamed to src/components/xxxSortableComponent.jsx

@@ -548,5 +548,7 @@ export const updateChildrenSort = (
   // console.log('modifiedCHildArrrrrr',modifiedChldrenArray)
   return {
     ...state,
+    components: modifiedComponentsArray,
+    focusComponent: modifiedComponent,
   };
 };

src/utils/componentReducer.util.ts

@@ -1,3 +1,5 @@
+import cloneDeep from './cloneDeep';
+
 const componentRender = (component, data) => {
   const { stateful, id, position, childrenArray, title, props } = component;
 
@@ -122,7 +124,8 @@ const componentRender = (component, data) => {
       
       return (
         <div>
-          ${childrenArray
+          ${cloneDeep(childrenArray)
+            .sort((a, b) => a.childSort - b.childSort)
             .map(child => `<${componentNameGenerator(child)} ${propDrillTextGenerator(child)}/>`)
             .join('\n')}
         </div>