Merge pull request #87 from ShlomoPorges/development

added sort to state & type , and  sorChildren component

Author: ShlomoPorges

src/actionTypes/index.js

@@ -26,3 +26,4 @@ export const ADD_PROP = 'ADD_PROP';
 export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
 export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
 export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';
+export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT'

src/actions/components.js

@@ -27,6 +27,7 @@ import {
   DELETE_ALL_DATA,
   CHANGE_IMAGE_PATH,
   UPDATE_HTML_ATTR,
+  UPDATE_CHILDREN_SORT,
 } from '../actionTypes/index';
 
 import { loadState } from '../localStorage';
@@ -259,3 +260,10 @@ export const updateHtmlAttr = ({ attr, value }) => dispatch => {
     payload: { attr, value },
   });
 };
+
+export const updateChildrenSort = ({ newChildrenArray }) => (dispatch) => {
+  dispatch({
+    type: UPDATE_CHILDREN_SORT,
+    payload: { newChildrenArray },
+  });
+};

src/components/CodePreview.tsx

@@ -16,6 +16,8 @@ class CodePreview extends Component<Props> {
    const components : ComponentsInt  = this.props.components;
 
    return (
+     <Fragment>
+       <SortChildren/>
       <div
         style={{
           width: '500px',
@@ -37,6 +39,7 @@ class CodePreview extends Component<Props> {
           })}
         </pre>
       </div>
+      </Fragment>
     );
   }
 }

src/components/SortChildren.jsx

@@ -1,42 +1,124 @@
 
 import React, { Component} from "react";
 import { connect } from "react-redux";
+import { updateChildrenSort } from "../actions/components";
 
 const mapStateToProps = store => ({
   focusComponent: store.workspace.focusComponent,
 });
 
+const mapDispatchToProps = dispatch => ({
+  updateChildrenSort: ({ newChildrenArray }) => dispatch(updateChildrenSort({ newChildrenArray }))
+});
 
 class SortChildren extends Component {
-  // constructor(props) {
-  //   super(props);
-   state = {test: 'myTestValue'};
-  //}
+  constructor(props) {
+    super(props);
+
+   this.state =  {
+    localChildrenArray: this.setLocalArray()
+    //localChildrenArray: this.props.focusComponent.childrenArray,
+    //shortArray: this.setLocalArray()
+  };
+   
+  }
 
+  setLocalArray = () =>{
+    const localArray = this.props.focusComponent.childrenArray.map((child,idx) => {
+      return {Childid: child.childId, childSort: child.childSort}
+    } )
+    return localArray ; 
+  }
+
+  onDragStart = (e,idx) => {
+    console.log('dragging index: ',idx)
+    this.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;
+
+    // if the item is dragged over itself, ignore
+    if (this.draggedIndex === 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 localChildrenArray = [...this.state.localChildrenArray]
+    //console.log('localChildrenArray BEFORE removing ',JSON.stringify(localChildrenArray))
+
+
+    localChildrenArray.splice(this.draggedIndex,1)
+    //console.log('localChildrenArray after removing ',JSON.stringify(localChildrenArray))
+
+    //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({newChildrenArray: localChildrenArray});
+ 
+  };
+
 render() {
+  const ulStyle =  {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+  }
+
+  const liStyle = {
+    backgroundColor: "#383838",
+    padding: "10px 20px",
+    position: "relative",
+    display: "flex",
+    alignItems: "flex-start",
+    lineHeight: 1,
+    cursor: "move",
+  }
   const children = this.props.focusComponent.childrenArray; 
-  const List = children.map( (child,idx) => {
-    console.log(`mappping...... ${idx}   ${child.componentName + child.childId}`)
+  const List = children
+    .sort( (a,b) => a.childSort - b.childSort )
+    .map( (child,idx) => {
+    //console.log(`mappping...... ${idx}   ${child.componentName + child.childId} childSort ${child.childSort}`)
       return (
         <li 
-          Childid={child.Childid}
+          style={liStyle}
+          id={child.Childid}
           key={idx}
-          draggable='true'
-          // onDragEnd={this.dragEnd.bind(this)}
-          // onDragStart={this.dragStart.bind(this)}>{item}
         >
-        {child.componentName + child.childId}
+        <div className="drag" draggable  
+          onDragStart={e => this.onDragStart(e,idx) }
+          onDragOver ={e => this.onDragOver(idx)}
+        >
+         {child.componentName + child.childId}
+        </div>
+     
         </li>
     )})
     console.log('children')
         console.log(children)
         console.log('List')
         console.log(List)
   return (
-    <div>
-      <p>Childrens List</p>
-      {/* <List/> */}
+    <div     style={{
+      position: 'relative',
+      float: 'right',
+      marginTop: '20px',
+      marginRIght: '20px',
+    }}  >
+      <h3>Childrens List</h3>
+      <ul style={ulStyle}>
+       {List}
+      </ul> 
     </div>
   )
 
@@ -45,5 +127,6 @@ render() {
 } 
 
 export default connect(
-  mapStateToProps
+  mapStateToProps,
+  mapDispatchToProps
 )(SortChildren);

src/reducers/componentReducer.ts

@@ -21,6 +21,7 @@ import {
   ADD_PROP,
   DELETE_PROP,
   UPDATE_HTML_ATTR,
+  UPDATE_CHILDREN_SORT,
 } from '../actionTypes';
 
 import {
@@ -41,6 +42,7 @@ import {
   addProp,
   deleteProp,
   updateHtmlAttr,
+  updateChildrenSort,
 } from '../utils/componentReducer.util.ts';
 import cloneDeep from '../utils/cloneDeep.ts';
 
@@ -147,6 +149,8 @@ const componentReducer = (state = initialApplicationState, action) => {
       return deleteProp(state, action.payload);
     case UPDATE_HTML_ATTR:
       return updateHtmlAttr(state, action.payload);
+    case UPDATE_CHILDREN_SORT:
+      return updateChildrenSort(state, action.payload);
     default:
       return state;
   }

src/utils/Interfaces.ts

@@ -15,6 +15,7 @@ interface Position {
 
 export interface ChildInt {
   childId: number;
+  childSort: number;
   childType: string;
   childComponentId: number;
   componentName: string;
@@ -31,7 +32,6 @@ export interface ComponentInt {
   stateful: boolean;
   title: string;
   color: string;
-  // draggable: boolean;
   props: PropInt[];
   nextPropId: number;
   position: Position;

src/utils/componentReducer.util.ts

@@ -157,6 +157,7 @@ export const addChild = (
 
   const newChild: ChildInt = {
     childId: view.nextChildId,
+    childSort: view.nextChildId,
     childType,
     childComponentId: childType === "COMP" ? parentComponent.id : null, // only relevant fot children of type COMPONENT
     componentName: strippedTitle,
@@ -610,3 +611,19 @@ export const updateHtmlAttr = (state: ApplicationStateInt, { attr, value }: {att
     focusChild: modifiedChild
   };
 };
+
+
+export const updateChildrenSort = (state: ApplicationStateInt, { newChildrenArray }: {newChildrenArray: ChildrenInt }) => {
+  console.log('hello from updateChildrenSort. newChildrenArray: ',newChildrenArray )
+// the new Array has the same data exactly. the array index is the new sort...
+  // const modifiedChldrenArray = cloneDeep(state.focusComponent.childrenArray)
+  // modifiedChldrenArray.forEach( (child: ChildInt, idx:number, arr:any ) => {
+  //   console.log(`chidl id:${child.childId} currSort:${child.childSort}`)
+  //  const newSort = newChildrenArray.findIndex( (newChild:ChildInt) => newChild.childId === child.childId) + 1 ;
+  //   console.log(`new sort: ${newSort}`)
+  // })
+  //console.log('modifiedCHildArrrrrr',modifiedChldrenArray)
+  return {
+    ...state,
+  };
+};