add task reassignment functionality

package.json

@@ -9,6 +9,8 @@
     "react-big-calendar": "^0.19.0",
     "react-bootstrap": "^0.31.3",
     "react-datepicker": "^0.56.0",
+    "react-dnd": "^3.0.2",
+    "react-dnd-html5-backend": "^3.0.2",
     "react-dom": "^15.6.1",
     "react-icons": "^2.2.7",
     "react-markdown": "^2.5.0",

src/actions/index.js

@@ -25,6 +25,13 @@ export const setTaskFormParentGid = (formId, newParentGid, oldParentGid) => ({
   oldParentGid
 });
 
+export const moveTask = (oldParentGid, newParentGid, taskGid) => ({
+  type: 'MOVE_TASK',
+  oldParentGid,
+  newParentGid,
+  taskGid
+})
+
 export const getUsers = () => ({ type: 'GET_USERS', payload: getUsersReq() });
 
 export const getPursuancesByIds = pursuanceIds => ({

src/api/tasks.js

@@ -43,17 +43,20 @@ const buildTaskHierarchy = (tasks, pursuanceId) => {
   const taskMap = {};
   const rootTaskGids = [];
   for (let i = 0; i < tasks.length; i++) {
-    const t = tasks[i];
-    taskMap[t.gid] = Object.assign(t, { subtask_gids: [] });
+    const t1 = tasks[i];
+    taskMap[t1.gid] = Object.assign(t1, { subtask_gids: [] });
+  }
+  for (let i = 0; i < tasks.length; i++) {
+    const t2 = tasks[i];
 
-    if (isRootTaskInPursuance(t, pursuanceId)) {
-      rootTaskGids.push(t.gid);
+    if (isRootTaskInPursuance(t2, pursuanceId)) {
+      rootTaskGids.push(t2.gid);
     } else {
       // Add t to its parent's subtasks (if its parent is in taskMap)
-      if (taskMap[t.parent_task_gid]) {
-        taskMap[t.parent_task_gid].subtask_gids.push(t.gid);
+      if (taskMap[t2.parent_task_gid]) {
+        taskMap[t2.parent_task_gid].subtask_gids.push(t2.gid);
       } else {
-        console.log(`Task ${t.gid} ("${t.title}")'s parent ${t.parent_task_gid}` +
+        console.log(`Task ${t2.gid} ("${t2.title}")'s parent ${t2.parent_task_gid}` +
                     ` not found in taskMap`);
       }
     }

src/components/Content/Pursuance/PursuancePage.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 import { setCurrentPursuance } from '../../../actions';
 import PursuanceMenu from './PursuanceMenu';
 import TaskListView from './views/TaskListView';
@@ -41,7 +43,7 @@ class PursuancePage extends Component {
   }
 }
 
-export default connect(({currentPursuanceId}) =>
+export default DragDropContext(HTML5Backend)(connect(({currentPursuanceId}) =>
   ({ currentPursuanceId }), {
    setCurrentPursuance
-})(PursuancePage);
+})(PursuancePage));

src/components/Content/TaskHierarchy/Task/Task.css

@@ -159,6 +159,10 @@
   border-color: #fff;
 }
 
+.highlight-task {
+  background-color: #50b3fe;
+}
+
 @media (max-width: 1279px) {
   #task-hierarchy .task-row-ctn {
     padding: 0;

src/components/Content/TaskHierarchy/Task/Task.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
+import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import { DragSource, DropTarget } from 'react-dnd';
 import generateId from '../../../../utils/generateId';
 import { showAssignee, isRootTaskInPursuance } from '../../../../utils/tasks';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
@@ -19,9 +21,65 @@ import {
   removeTaskFormFromHierarchy,
   startSuggestions,
   rpShowTaskDetailsOrCollapse,
-  patchTask
+  patchTask,
+  moveTask
 } from '../../../../actions';
 
+const taskSource = {
+  beginDrag(props, monitor, component) {
+    const { taskData } = props;
+    return taskData;
+  },
+  canDrag(props, monitor) {
+    const { taskData } = props;
+    return !!taskData.parent_task_gid;
+  }
+};
+
+const taskTarget = {
+  canDrop(props, monitor) {
+    const { taskMap, taskData } = props;
+    const source = monitor.getItem();
+    // recursively checks if the source is a descendant of the target
+    const isParent = (map, target, source) => {
+      if (!target.parent_task_gid) {
+        return false;
+      }
+      return (target.gid === source.gid) || isParent(map, map[target.parent_task_gid], source);
+    }
+    return !isParent(taskMap, taskData, source);
+  },
+  drop(props, monitor, component) {
+    const { taskData, patchTask, moveTask } = props;
+    const { gid, parent_task_gid } = monitor.getItem();
+    const oldParent = parent_task_gid;
+    moveTask(oldParent, taskData.gid, gid)
+    patchTask({
+      gid: gid,
+      parent_task_gid: taskData.gid
+    }).catch(res => {
+      const { action: { type } } = res;
+      if ( type !== 'PATCH_TASK_FULFILLED') {
+        moveTask(taskData.gid, oldParent, gid);
+      }
+    });
+  }
+}
+
+function collectTarget(connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    canDrop: monitor.canDrop(),
+    isOver: monitor.isOver()
+  }
+}
+
+function collect(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource()
+  };
+}
+
 class RawTask extends Component {
   constructor(props) {
     super(props);
@@ -155,7 +213,7 @@ class RawTask extends Component {
   }
 
   render() {
-    const { pursuances, taskData, currentPursuanceId } = this.props;
+    const { pursuances, taskData, currentPursuanceId, connectDragSource, connectDropTarget, canDrop, isOver } = this.props;
     const { showChildren } = this.state;
     const task = taskData;
     const { placeholder, assignedTo } =
@@ -167,7 +225,8 @@ class RawTask extends Component {
           <div className="toggle-ctn">
             {this.getTaskIcon(task, showChildren)}
           </div>
-          <div className="task-row-ctn">
+          {connectDropTarget(connectDragSource(
+          <div className={'task-row-ctn ' + (canDrop && isOver ? 'highlight-task' : '')}>
             <div className="task-title" onClick={this.selectTaskInHierarchy}>
               {this.showTitle(task)}
             </div>
@@ -208,6 +267,7 @@ class RawTask extends Component {
               patchTask={this.props.patchTask}
              />
           </div>
+        ))}
         </div>
         {
           task.subtask_gids && task.subtask_gids.length > 0 &&
@@ -223,15 +283,23 @@ class RawTask extends Component {
   }
 }
 
-const Task = withRouter(connect(
-  ({ pursuances, user, users, currentPursuanceId, autoComplete, rightPanel }) =>
-   ({ pursuances, user, users, currentPursuanceId, autoComplete, rightPanel }), {
-  addTaskFormToHierarchy,
-  removeTaskFormFromHierarchy,
-  startSuggestions,
-  rpShowTaskDetailsOrCollapse,
-  patchTask
-})(RawTask));
+const enhance = compose(
+  withRouter,
+  connect(
+    ({ pursuances, user, users, currentPursuanceId, autoComplete, rightPanel }) =>
+    ({ pursuances, user, users, currentPursuanceId, autoComplete, rightPanel }), {
+    addTaskFormToHierarchy,
+    removeTaskFormFromHierarchy,
+    startSuggestions,
+    rpShowTaskDetailsOrCollapse,
+    patchTask,
+    moveTask
+  }),
+  // placed after connect to make dispatch available.
+  DragSource('TASK', taskSource, collect),
+  DropTarget('TASK', taskTarget, collectTarget),
+)
+const Task = enhance(RawTask);
 
 // Why RawTask _and_ Task? Because Task.mapSubTasks() recursively
 // renders Task components which weren't wrapped in a Redux connect()

src/reducers/tasksReducer.js

@@ -88,6 +88,7 @@ export default function(state = initialState, action) {
       const patchedTask = action.payload;
       patchedTask.subtask_gids =
         state.taskMap[patchedTask.gid].subtask_gids || [];
+
       return Object.assign({}, state, {
         taskMap: Object.assign({}, state.taskMap, {
           [patchedTask.gid]: patchedTask
@@ -163,6 +164,42 @@ export default function(state = initialState, action) {
       });
     }
 
+    case 'MOVE_TASK':
+      const { oldParentGid, newParentGid, taskGid } = action;
+      const newMap = Object.assign({}, state.taskMap);
+      const newParentTask = newMap[newParentGid];
+      const oldParentTask = newMap[oldParentGid];
+      const oldParentSubtaskGids = oldParentTask.subtask_gids.filter(
+        gid => gid !== taskGid
+      );
+      const newSubtaskGids = [...newParentTask.subtask_gids, taskGid];
+      const newSubtasks = newSubtaskGids.filter(
+        (gid, idx) => newSubtaskGids.indexOf(gid) === idx
+      );
+
+      newSubtasks.sort(function(gid1, gid2) {
+        const t1Date = new Date(newMap[gid1].created);
+        const t2Date = new Date(newMap[gid2].created);
+        if (t1Date === t2Date) {
+          return ( gid1 < gid2) ? -1 : ( gid1 > gid2 ) ? 1 : 0;
+        } else {
+          return (t1Date > t2Date) ? 1 : -1;
+        }
+      });
+
+      return Object.assign({}, state, {
+        taskMap: Object.assign(newMap, {
+          [oldParentGid]: {
+            ...oldParentTask,
+            subtask_gids: oldParentSubtaskGids
+          },
+          [newParentGid]: {
+            ...newParentTask,
+            subtask_gids: newSubtasks
+          }
+        })
+      });
+
     default:
       return state;
   }