Task Hierarchy: drag-and-drop task from one part of the hierarchy to another

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "glamor": "^2.20.40",
+    "lodash": "^4.17.11",
     "prismjs": "^1.15.0",
     "react": "^15.6.1",
     "react-animated-number": "^0.4.3",

src/actions/index.js

@@ -24,6 +24,13 @@ import {
   deleteMembershipReq,
 } from '../api/memberships';
 
+export const moveTask = (oldParentGid, newParentGid, taskGid) => ({
+  type: 'MOVE_TASK',
+  oldParentGid,
+  newParentGid,
+  taskGid
+})
+
 export const updateFormField = (formId, fieldId, value) => ({
   type: 'TASK_FIELD_UPDATE',
   formId,

src/api/tasks.js

@@ -77,19 +77,22 @@ 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}` +
-            ` not found in taskMap`
+        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 MyTasksView from './views/MyTasksView';
@@ -50,7 +52,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

@@ -15,6 +15,10 @@
   border-color: #fff;
 }
 
+.highlight-task {
+  background-color: #50b3fe;
+}
+
 .toggle-ctn {
   padding-right: 6px;
 }

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

@@ -1,6 +1,9 @@
 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 _ from 'lodash';
 import generateId from '../../../../utils/generateId';
 import { showAssignee, isRootTaskInPursuance } from '../../../../utils/tasks';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
@@ -20,7 +23,8 @@ import {
   removeTaskFormFromHierarchy,
   startSuggestions,
   rpShowTaskDetailsOrCollapse,
-  patchTask
+  patchTask,
+  moveTask
 } from '../../../../actions';
 
 // task list uses the default vertical/wide spread confetti
@@ -32,6 +36,63 @@ const confettiConfig = {
   decay: 0.84
 };
 
+
+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: _.debounce((props, monitor) => {
+    const { taskMap, taskData } = props;
+    const source = monitor.getItem();
+
+    if (source) {
+      // recursively checks if the source is a descendant of the target
+      const isParent = (map, target, source) => {
+        if (!target || !target.parent_task_gid) return false;
+        return (target.gid === source.gid) || isParent(map, map[target.parent_task_gid], source);
+      }
+      return !isParent(taskMap, taskData, source);
+    }
+  }, 15),
+  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);
@@ -186,7 +247,7 @@ class RawTask extends Component {
   }
 
   render() {
-    const { pursuances, taskData, currentPursuanceId, rightPanel, isInTaskList } = this.props;
+    const { pursuances, taskData, currentPursuanceId, rightPanel, isInTaskList, connectDragSource, connectDropTarget, canDrop, isOver } = this.props;
     const { showChildren } = this.state;
     const task = taskData;
     if (!task) {
@@ -208,55 +269,57 @@ class RawTask extends Component {
               {this.getTaskIcon(task, showChildren)}
             </div>
           )}
-          <div className="task-row-ctn">
-            <div className="task-title" onClick={this.selectTaskInHierarchy}>
-              {this.showTitle(task)}
-            </div>
-            <div className="task-title-buffer" onClick={this.selectTaskInHierarchy}>
-            </div>
-            <div className={"task-icons-ctn " + (isInTaskList ? 'in-task-list-narrow' : '')}>
-              {!isInTaskList && (
+          {connectDropTarget(connectDragSource(
+            <div className={'task-row-ctn ' + (canDrop && isOver ? 'highlight-task' : '')}>
+              <div className="task-title" onClick={this.selectTaskInHierarchy}>
+                {this.showTitle(task)}
+              </div>
+              <div className="task-title-buffer" onClick={this.selectTaskInHierarchy}>
+              </div>
+              <div className={"task-icons-ctn " + (isInTaskList ? 'in-task-list-narrow' : '')}>
+                {!isInTaskList && (
+                  <OverlayTrigger
+                    placement="bottom"
+                    overlay={this.getTooltip('hands-down')}
+                  >
+                    <div id={'create-subtask-' + task.gid} className="icon-ctn create-subtask" onClick={this.toggleNewForm}>
+                      <TiFlowChildren size={20} />
+                    </div>
+                  </OverlayTrigger>
+                )}
                 <OverlayTrigger
                   placement="bottom"
-                  overlay={this.getTooltip('hands-down')}
+                  overlay={this.getTooltip('chat')}
                 >
-                  <div id={'create-subtask-' + task.gid} className="icon-ctn create-subtask" onClick={this.toggleNewForm}>
-                    <TiFlowChildren size={20} />
+                  <div id={'discuss-task-' + task.gid} className="icon-ctn discuss-task hide-small" onClick={this.redirectToDiscuss}>
+                    <FaCommentsO size={20} />
                   </div>
                 </OverlayTrigger>
+              </div>
+              {!isInTaskList && (
+                <TaskStatus
+                  gid={task.gid}
+                  status={task.status}
+                  patchTask={this.props.patchTask}
+                  showCelebration={task.celebration === 'show' && !rightPanel.show}
+                  confettiConfig={confettiConfig}
+                />
               )}
-              <OverlayTrigger
-                placement="bottom"
-                overlay={this.getTooltip('chat')}
-              >
-                <div id={'discuss-task-' + task.gid} className="icon-ctn discuss-task hide-small" onClick={this.redirectToDiscuss}>
-                  <FaCommentsO size={20} />
-                </div>
-              </OverlayTrigger>
-            </div>
-            {!isInTaskList && (
-              <TaskStatus
-                gid={task.gid}
-                status={task.status}
+              <div className="task-assigned-to hide-small">
+                <TaskAssigner
+                  taskGid={task.gid}
+                  placeholder={placeholder}
+                  assignedTo={assignedTo}
+                />
+              </div>
+              <TaskDueDate
+                id={task.gid}
+                taskData={task}
+                autoFocus={true}
                 patchTask={this.props.patchTask}
-                showCelebration={task.celebration === 'show' && !rightPanel.show}
-                confettiConfig={confettiConfig}
-              />
-            )}
-            <div className="task-assigned-to hide-small">
-              <TaskAssigner
-                taskGid={task.gid}
-                placeholder={placeholder}
-                assignedTo={assignedTo}
               />
             </div>
-            <TaskDueDate
-              id={task.gid}
-              taskData={task}
-              autoFocus={true}
-              patchTask={this.props.patchTask}
-             />
-          </div>
+          ))}
         </div>
         {
           task.subtask_gids && task.subtask_gids.length > 0 &&
@@ -272,15 +335,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

@@ -195,6 +195,45 @@ 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) {
+        newMap[gid1].created_parsed = newMap[gid1].created_parsed || new Date(newMap[gid1].created);
+        newMap[gid2].created_parsed = newMap[gid2].created_parsed || new Date(newMap[gid2].created); 
+        const t1Date = newMap[gid1].created_parsed;
+        const t2Date = newMap[gid2].created_parsed;
+
+        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;
   }