Upload workflow working, added task update tests

app/static/app/js/components/EditTaskPanel.jsx

@@ -120,15 +120,16 @@ class EditTaskPanel extends React.Component {
 
   save(e){
     e.preventDefault();
-    // console.log(this.getOptions());
-    // console.log(this.state.selectedNode);
-    // console.log(this.state.name || this.namePlaceholder);
     this.setState({editing: false});
-    this.props.onSave({
+    if (this.props.onSave) this.props.onSave(this.getTaskInfo());
+  }
+
+  getTaskInfo(){
+    return {
       name: this.state.name !== "" ? this.state.name : this.namePlaceholder,
       selectedNode: this.state.selectedNode,
       options: this.getOptions()
-    });
+    };
   }
 
   edit(e){
@@ -179,7 +180,7 @@ class EditTaskPanel extends React.Component {
       }
 
       return (
-        <div className={"edit-task-panel " + (!this.props.show ? "hide" : "")}>
+        <div className="edit-task-panel">
           <form className="form-horizontal">
             <p>{this.props.uploading ? 
               "Your images are being uploaded. In the meanwhile, check these additional options:"
@@ -200,8 +201,9 @@ class EditTaskPanel extends React.Component {
         </div>
       );
     }else if (this.props.uploading){
+      // Done editing, but still uploading
       return (
-          <div className={"edit-task-panel " + (!this.props.show ? "hide" : "")}>
+          <div className="edit-task-panel">
             <div className="pull-right">
               <button type="submit" className="btn btn-primary btn-sm glyphicon glyphicon-pencil" onClick={this.edit}></button>
             </div>
@@ -209,7 +211,7 @@ class EditTaskPanel extends React.Component {
           </div>
         );
     }else{
-      return (<div></div>);
+      return (<div><i className="fa fa-refresh fa-spin fa-fw"></i></div>);
     }
   }
 }

app/static/app/js/components/ProjectListItem.jsx

@@ -14,6 +14,7 @@ class ProjectListItem extends React.Component {
 
     this.state = {
       showPanel: false,
+      updatingTask: false,
       upload: this.getDefaultUploadState()
     };
 
@@ -24,6 +25,10 @@ class ProjectListItem extends React.Component {
     this.handleTaskSaved = this.handleTaskSaved.bind(this);
   }
 
+  componentWillUnmount(){
+    if (this.updateTaskRequest) this.updateTaskRequest.abort();
+  }
+
   getDefaultUploadState(){
     return {
       uploading: false,
@@ -33,7 +38,7 @@ class ProjectListItem extends React.Component {
       totalCount: 0,
       totalBytes: 0,
       totalBytesSent: 0,
-      taskInfo: null,
+      savedTaskInfo: false,
       taskId: null
     };
   }
@@ -100,8 +105,8 @@ class ProjectListItem extends React.Component {
             this.setUploadState({taskId});
 
             // Update task information (if the user has completed this step)
-            if (this.state.upload.taskInfo !== null){
-              this.updateTaskInfo();
+            if (this.state.upload.savedTaskInfo){
+              this.updateTaskInfo(taskId, this.editTaskPanel.getTaskInfo());
             }else{
               // Need to wait for user to confirm task options
             }
@@ -121,17 +126,34 @@ class ProjectListItem extends React.Component {
       });
   }
 
-  updateTaskInfo(){
-    if (this.state.upload.taskId === null) throw new Error("taskId is null");
-    if (this.state.upload.taskInfo === null) throw new Error("taskInfo is null");
+  updateTaskInfo(taskId, taskInfo){
+    if (!taskId) throw new Error("taskId is not set");
+    if (!taskInfo) throw new Error("taskId is not set");
+    
+    this.setUploadState({showEditTask: false});
+    this.setState({updatingTask: true});
 
-    // TODO: update task via API call
-    // if (this.state.showPanel){
-    //   this.projectListItemPanel.refresh();
-    // }else{
-    //   this.setState({showPanel: true});
-    // }
-    // this.setState({showEditTask: false});
+    this.updateTaskRequest = $.ajax({
+        url: `/api/projects/${this.props.data.id}/tasks/${this.state.upload.taskId}/`,
+        contentType: 'application/json',
+        data: JSON.stringify({
+          name: taskInfo.name,
+          options: taskInfo.options,
+          processing_node: taskInfo.selectedNode.id
+        }),
+        dataType: 'json',
+        type: 'PATCH'
+      }).done(() => {
+        if (this.state.showPanel){
+          this.projectListItemPanel.refresh();
+        }else{
+          this.setState({showPanel: true});
+        }
+      }).fail(() => {
+        this.setUploadState({error: "Could not update task information. Plese try again."});
+      }).always(() => {
+        this.setState({updatingTask: false});
+      });
   }
 
   setRef(prop){
@@ -159,11 +181,11 @@ class ProjectListItem extends React.Component {
   }
 
   handleTaskSaved(taskInfo){
-    this.setUploadState({taskInfo});
+    this.setUploadState({savedTaskInfo: true});
 
     // Has the upload finished?
     if (!this.state.upload.uploading && this.state.upload.taskId !== null){
-      this.updateTaskInfo();
+      this.updateTaskInfo(this.state.upload.taskId, taskInfo);
     }
   }
 
@@ -222,11 +244,17 @@ class ProjectListItem extends React.Component {
             </div>
             : ""}
 
-          <EditTaskPanel 
-            uploading={this.state.upload.uploading} 
-            show={this.state.upload.showEditTask} 
-            onSave={this.handleTaskSaved}
+          {this.state.upload.showEditTask ? 
+            <EditTaskPanel 
+              uploading={this.state.upload.uploading} 
+              onSave={this.handleTaskSaved}
+              ref={this.setRef("editTaskPanel")}
             />
+          : ""}
+
+          {this.state.updatingTask ? 
+            <span>Updating task information... <i className="fa fa-refresh fa-spin fa-fw"></i></span>
+          : ""}
 
         </div>
       </li>

app/tests/test_api.py

@@ -13,7 +13,7 @@ class TestApi(BootTestCase):
     def tearDown(self):
         pass
 
-    def test_projects(self):
+    def test_projects_and_tasks(self):
         client = APIClient()
 
         user = User.objects.get(username="testuser")
@@ -101,6 +101,18 @@ class TestApi(BootTestCase):
         res = client.get('/api/projects/{}/tasks/999/'.format(project.id, other_task.id))
         self.assertEqual(res.status_code, status.HTTP_404_NOT_FOUND)
 
+        # Can update a task
+        res = client.patch('/api/projects/{}/tasks/{}/'.format(project.id, task.id), {'name': 'updated!'}, format='json')
+        self.assertEqual(res.status_code, status.HTTP_200_OK)
+
+        # Verify the task has been updated
+        res = client.get('/api/projects/{}/tasks/{}/'.format(project.id, task.id))
+        self.assertTrue(res.data["name"] == "updated!")
+
+        # Cannot update a task we have no access to
+        res = client.patch('/api/projects/{}/tasks/{}/'.format(other_project.id, other_task.id), {'name': 'updated!'}, format='json')
+        self.assertEqual(res.status_code, status.HTTP_404_NOT_FOUND)
+
 
     def test_processingnodes(self):
         client = APIClient()
@@ -154,5 +166,3 @@ class TestApi(BootTestCase):
         self.assertTrue(len(res.data) == 1)
         self.assertTrue(res.data[0]["port"] == 1000)
 
-        # TODO: test PATCH operation on tasks
-