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;
  }