Finished Tasks sorting and UI rework (#3202)

* reduced details in finished tasks list and sorted it by last modification * added changelog entry * applied pr feedback
scalableminds · Sep 13, 2018 · 2e08469 · 2e08469
1 parent 0e29527
commit 2e08469
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Renamed "Soma Clicking" to "Single-Node-Tree Mode". [#3141](https://github.com/scalableminds/webknossos/pull/3141/files)
 - The fallback segmentation layer attribute of volume tracings is now persisted to NML/ZIP files. Upon re-upload, only volume tracings with this attribute will show a fallback layer. Use `tools/volumeAddFallbackLayer.py` to add this attribute to existing volume tracings. [#3088](https://github.com/scalableminds/webknossos/pull/3088)
 - When splitting a tree, the split part that contains the initial node will now keep the original tree name and id. [#3145](https://github.com/scalableminds/webknossos/pull/3145)
+- Finished tasks will be displayed with less details and sorted by their finishing date in the dashboard. [#3202](https://github.com/scalableminds/webknossos/pull/3202)
 - The welcome header will now also show on the default page if there are no existing organisations. [#3133](https://github.com/scalableminds/webknossos/pull/3133)
 - Simplified the sharing of tracings. Users can simply copy the active URL from the browser's URL bar to share a tracing (assuming the tracing is public). [#3176](https://github.com/scalableminds/webknossos/pull/3176)
 - Improved general performance of the tracing view by leveraging web workers. [#3162](https://github.com/scalableminds/webknossos/pull/3162)

diff --git a/app/assets/javascripts/dashboard/dashboard_task_list_view.js b/app/assets/javascripts/dashboard/dashboard_task_list_view.js
@@ -340,7 +340,11 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
 
   renderTaskList() {
     const tasks = this.getCurrentTasks().sort(
-      Utils.compareBy(typeHint, task => task.created, false),
+      Utils.compareBy(
+        typeHint,
+        task => (this.state.showFinishedTasks ? task.annotation.modified : task.created),
+        false,
+      ),
     );
     const descriptionClassName = classNames("task-type-description", {
       short: this.state.showFinishedTasks || this.props.isAdminView,
@@ -355,28 +359,44 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
       </React.Fragment>
     );
 
-    const TaskCard = task => (
-      <Card key={task.id} title={<TaskCardTitle task={task} />} style={{ margin: "10px" }}>
-        <Row gutter={16}>
-          <Col span={16}>
-            <div className={descriptionClassName}>
-              <Markdown
-                source={task.type.description}
-                options={{ html: false, breaks: true, linkify: true }}
-              />
-            </div>
-          </Col>
-          <Col span={8}>
-            <p style={{ marginBottom: 14 }}>
+    const TaskCard = task =>
+      this.state.showFinishedTasks ? (
+        <Card key={task.id} style={{ margin: "10px" }}>
+          <Row gutter={16}>
+            <Col span={7}>
               <b>Task ID:</b> {task.id}
-              <br />
+            </Col>
+            <Col span={7}>
               <b>Project:</b> {task.projectName}
-            </p>
-            {this.renderActions(task)}
-          </Col>
-        </Row>
-      </Card>
-    );
+            </Col>
+            <Col span={7}>
+              <b>Finished:</b> <FormattedDate timestamp={task.annotation.modified} />
+            </Col>
+            <Col span={3}>{this.renderActions(task)}</Col>
+          </Row>
+        </Card>
+      ) : (
+        <Card key={task.id} title={<TaskCardTitle task={task} />} style={{ margin: "10px" }}>
+          <Row gutter={16}>
+            <Col span={16}>
+              <div className={descriptionClassName}>
+                <Markdown
+                  source={task.type.description}
+                  options={{ html: false, breaks: true, linkify: true }}
+                />
+              </div>
+            </Col>
+            <Col span={8}>
+              <p style={{ marginBottom: 14 }}>
+                <b>Task ID:</b> {task.id}
+                <br />
+                <b>Project:</b> {task.projectName}
+              </p>
+              {this.renderActions(task)}
+            </Col>
+          </Row>
+        </Card>
+      );
 
     return (
       <List
@@ -408,7 +428,7 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
           </Button>
         </div>
         <h3 id="tasksHeadline" className="TestTasksHeadline">
-          Tasks
+          {this.state.showFinishedTasks ? "Finished" : null} Tasks
         </h3>
         <div className="clearfix" style={{ margin: "20px 0px" }} />
         {this.renderTaskList()}