From e4f1cf844db34b162f407acd29ebc27bce1d1f6f Mon Sep 17 00:00:00 2001
From: Daniel <daniel.werner@student.hpi.uni-potsdam.de>
Date: Mon, 16 Jul 2018 13:11:56 +0200
Subject: [PATCH] Redesign user task list (#2861)

* for user task list, show cards with full task type description instead of a table (#2817)

* sort user task list by ascending creation date (#2817)

* fix minute part of the displayed creation date, which was configured to show seconds

* add mailable description to changelog (#2861)

* minor design tweaks for user-task-list

* switch description and action pane in user-task-list
---
 CHANGELOG.md                                  |   5 +-
 .../admin/task/task_annotation_view.js        |   2 +-
 .../admin/tasktype/task_type_list_view.js     |   2 +-
 .../dashboard/dashboard_task_list_view.js     | 117 +++++++-----------
 app/assets/stylesheets/_dashboard.less        |   7 +-
 flow-typed/npm/antd_vx.x.x.js                 |   3 +-
 6 files changed, 59 insertions(+), 77 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1cf1df9dbb..6360b89e0b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,7 +23,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
   - Added the shortcut to copy the currently hovered cell id (CTRL + I) to non-volume-tracings, too. [#2726](https://github.com/scalableminds/webknossos/pull/2726)
   - Added permission for team managers to refresh datasets. [#2688](https://github.com/scalableminds/webknossos/pull/2688)
   - Added backend-unit-test setup and a first test for NML validation. [#2829](https://github.com/scalableminds/webknossos/pull/2829)
-  - Added displayName for organizations [#2869](https://github.com/scalableminds/webknossos/pull/2869)
+  - Added displayName for organizations. [#2869](https://github.com/scalableminds/webknossos/pull/2869)
   - Added onboarding flow for initial setup of WebKnossos. [#2859](https://github.com/scalableminds/webknossos/pull/2859)
   - Added the possibility to show the task in a random order. [#2860](https://github.com/scalableminds/webknossos/pull/2860)
 
@@ -42,6 +42,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
   - Streamlined the order in which initial buckets are loaded when viewing a dataset. [#2749](https://github.com/scalableminds/webknossos/pull/2749)
   - Reduced the number of scenarios in which segmentation-related warnings are shown (e.g, not for skeleton tracings when there are multiple resolutions for segmentations anyway). [#2715](https://github.com/scalableminds/webknossos/pull/2715)
   - Improved tracing view page load performance by decreasing WebGL shader compilation time. [#2709](https://github.com/scalableminds/webknossos/pull/2709)
+  - Redesigned the user task list to make it easier to read the whole task description. [#2861](https://github.com/scalableminds/webknossos/pull/2861)
 
 
 ### Fixed
@@ -57,7 +58,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
   - Fixed a bug where cell IDs in the segmentation tab were not shown for all zoomsteps. [#2726](https://github.com/scalableminds/webknossos/pull/2726)
   - Fixed the naming of the initial tree in tasks. [#2689](https://github.com/scalableminds/webknossos/pull/2689)
   - Fixed a regression affecting node selection, shortcuts and 3d viewport navigation. [#2673](https://github.com/scalableminds/webknossos/pull/2673)
-  - Fixed the dataset zip upload for dataSets, which only have one dataLayer and no config file. [#2840](https://github.com/scalableminds/webknossos/pull/2840)
+  - Fixed the dataset zip upload for datasets, which only have one data layer and no config file. [#2840](https://github.com/scalableminds/webknossos/pull/2840)
   - Fixed a bug where task deletion broke the task listing for users who had active annotations for the task [#2884](https://github.com/scalableminds/webknossos/pull/2884)
 
 
diff --git a/app/assets/javascripts/admin/task/task_annotation_view.js b/app/assets/javascripts/admin/task/task_annotation_view.js
index e9beb0e00b..11a30762f4 100644
--- a/app/assets/javascripts/admin/task/task_annotation_view.js
+++ b/app/assets/javascripts/admin/task/task_annotation_view.js
@@ -163,7 +163,7 @@ class TaskAnnotationView extends React.PureComponent<Props & StateProps, State>
               return (
                 <tr key={`${annotation.id}-tr`}>
                   <td>{userString}</td>
-                  <td>{moment(annotation.modified).format("YYYY-MM-DD HH:SS")}</td>
+                  <td>{moment(annotation.modified).format("YYYY-MM-DD HH:mm")}</td>
                   <td>
                     <span>
                       <Icon type="check-circle-o" />
diff --git a/app/assets/javascripts/admin/tasktype/task_type_list_view.js b/app/assets/javascripts/admin/tasktype/task_type_list_view.js
index 5311a58e89..4bc0b6b1bd 100644
--- a/app/assets/javascripts/admin/tasktype/task_type_list_view.js
+++ b/app/assets/javascripts/admin/tasktype/task_type_list_view.js
@@ -157,7 +157,7 @@ class TaskTypeListView extends React.PureComponent<Props, State> {
                 key="description"
                 sorter={Utils.localeCompareBy(typeHint, "description")}
                 render={description => (
-                  <div className="task-type-description">
+                  <div className="task-type-description short">
                     <Markdown
                       source={description}
                       options={{ html: false, breaks: true, linkify: true }}
diff --git a/app/assets/javascripts/dashboard/dashboard_task_list_view.js b/app/assets/javascripts/dashboard/dashboard_task_list_view.js
index e7ca5bbcb4..b937a3d260 100644
--- a/app/assets/javascripts/dashboard/dashboard_task_list_view.js
+++ b/app/assets/javascripts/dashboard/dashboard_task_list_view.js
@@ -6,7 +6,7 @@ import { connect } from "react-redux";
 import { Link, withRouter } from "react-router-dom";
 import Request from "libs/request";
 import { AsyncButton } from "components/async_clickables";
-import { Spin, Table, Button, Modal, Tag, Icon } from "antd";
+import { Button, Modal, Tag, Icon, Card, Row, Col, List } from "antd";
 import Markdown from "react-remarkable";
 import Utils from "libs/utils";
 import moment from "moment";
@@ -23,6 +23,8 @@ import {
 import { enforceActiveUser } from "oxalis/model/accessors/user_accessor";
 import Persistence from "libs/persistence";
 import { PropTypes } from "@scalableminds/prop-types";
+import { handleGenericError } from "libs/error_handling";
+import classNames from "classnames";
 import type {
   APITaskWithAnnotationType,
   APIUserType,
@@ -30,9 +32,6 @@ import type {
 } from "admin/api_flow_types";
 import type { OxalisState } from "oxalis/store";
 import type { RouterHistory } from "react-router-dom";
-import { handleGenericError } from "libs/error_handling";
-
-const { Column } = Table;
 
 const typeHint: APITaskWithAnnotationType[] = [];
 
@@ -315,73 +314,53 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
     return this.state.showFinishedTasks ? this.state.finishedTasks : this.state.unfinishedTasks;
   }
 
-  renderTable() {
-    return (
-      <Table
-        dataSource={this.getCurrentTasks().filter(task => {
-          if (this.state.showFinishedTasks) return task.annotation.state === "Finished";
-          else return task.annotation.state !== "Finished";
-        })}
-        rowKey="id"
-        pagination={{
-          defaultPageSize: 50,
-        }}
-        style={{ overflowX: "auto" }}
-      >
-        <Column
-          title="ID"
-          dataIndex="id"
-          width={100}
-          sorter={Utils.localeCompareBy(typeHint, "id")}
-          className="monospace-id"
-        />
-        <Column
-          title="Type"
-          dataIndex="type.summary"
-          width={150}
-          sorter={Utils.localeCompareBy(typeHint, t => t.type.summary)}
-        />
-        <Column
-          title="Project"
-          dataIndex="projectName"
-          width={150}
-          sorter={Utils.localeCompareBy(typeHint, "projectName")}
-        />
-        <Column
-          title="Description"
-          dataIndex="type.description"
-          sorter={Utils.localeCompareBy(typeHint, t => t.type.description)}
-          render={description => (
-            <div className="task-type-description">
+  renderTaskList() {
+    const tasks = this.getCurrentTasks().sort(Utils.localeCompareBy(typeHint, "created"));
+    const descriptionClassName = classNames("task-type-description", {
+      short: this.state.showFinishedTasks || this.props.isAdminView,
+    });
+
+    const TaskCardTitle = ({ task }) => (
+      <React.Fragment>
+        <span style={{ marginRight: 8 }}>{`${task.type.summary} (${moment(task.created).format(
+          "YYYY-MM-DD HH:mm",
+        )}) `}</span>
+        {task.type.settings.allowedModes.map(mode => <Tag key={mode}>{mode}</Tag>)}
+      </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={description}
+                source={task.type.description}
                 options={{ html: false, breaks: true, linkify: true }}
               />
             </div>
-          )}
-          width={550}
-        />
-        <Column
-          title="Modes"
-          dataIndex="type.settings.allowedModes"
-          width={150}
-          sorter={Utils.localeCompareBy(typeHint, t => t.type.settings.allowedModes.join("-"))}
-          render={modes => modes.map(mode => <Tag key={mode}>{mode}</Tag>)}
-        />
-        <Column
-          title="Creation Date"
-          dataIndex="created"
-          width={150}
-          sorter={Utils.localeCompareBy(typeHint, "created")}
-          render={created => moment(created).format("YYYY-MM-DD HH:SS")}
-        />
-        <Column
-          title="Actions"
-          className="nowrap"
-          width={150}
-          render={(__, task) => this.renderActions(task)}
-        />
-      </Table>
+          </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
+        dataSource={tasks}
+        pagination={{
+          defaultPageSize: 50,
+        }}
+        loading={this.state.isLoading}
+        renderItem={TaskCard}
+      />
     );
   }
 
@@ -405,9 +384,7 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
           Tasks
         </h3>
         <div className="clearfix" style={{ margin: "20px 0px" }} />
-
-        <Spin spinning={this.state.isLoading}>{this.renderTable()}</Spin>
-
+        {this.renderTaskList()}
         <TransferTaskModal
           visible={this.state.isTransferModalVisible}
           annotationId={this.state.currentAnnotationId}
diff --git a/app/assets/stylesheets/_dashboard.less b/app/assets/stylesheets/_dashboard.less
index db2aa319f2..c66af2f7e3 100644
--- a/app/assets/stylesheets/_dashboard.less
+++ b/app/assets/stylesheets/_dashboard.less
@@ -163,8 +163,11 @@
 
 .task-type-description {
   word-break: break-word;
-  max-height: 150px;
-  overflow-y: auto;
+
+  &.short {
+    max-height: 150px;
+    overflow-y: auto;
+  }
 
   ul {
     list-style: disc;
diff --git a/flow-typed/npm/antd_vx.x.x.js b/flow-typed/npm/antd_vx.x.x.js
index 141814b756..8a5b87b410 100644
--- a/flow-typed/npm/antd_vx.x.x.js
+++ b/flow-typed/npm/antd_vx.x.x.js
@@ -41,12 +41,13 @@ declare module "antd" {
     static Item: React$ComponentType<P>;
     static SubMenu: React$ComponentType<P>;
   }
+  declare var message: Object;
   declare class Modal<P> extends React$Component<P> {
     static confirm: Function;
     static info: Function;
   }
   declare var notification: Object;
-  declare var message: Object;
+  declare class Pagination<P> extends React$Component<P> {}
   declare class Popover<P> extends React$Component<P> {}
   declare class AutoComplete<P> extends React$Component<P> {
     static Option: React$ComponentType<*>;