Task sort working

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

@@ -7,7 +7,7 @@ import ImportTaskPanel from './ImportTaskPanel';
 import UploadProgressBar from './UploadProgressBar';
 import ErrorMessage from './ErrorMessage';
 import EditProjectDialog from './EditProjectDialog';
-import SortItems from './SortItems';
+import SortPanel from './SortPanel';
 import Dropzone from '../vendor/dropzone';
 import csrf from '../django/csrf';
 import HistoryNav from '../classes/HistoryNav';
@@ -38,9 +38,19 @@ class ProjectListItem extends React.Component {
       data: props.data,
       refreshing: false,
       importing: false,
-      buttons: []
+      buttons: [],
+      sortKey: "-created_at"
     };
 
+    this.sortItems = [{
+        key: "created_at",
+        label: _("Created on"),
+        selected: "desc"
+      },{
+        key: "name",
+        label: _("Name")
+      }];
+
     this.toggleTaskList = this.toggleTaskList.bind(this);
     this.closeUploadError = this.closeUploadError.bind(this);
     this.cancelUpload = this.cancelUpload.bind(this);
@@ -468,17 +478,20 @@ class ProjectListItem extends React.Component {
       });
   }
 
+  sortChanged = key => {
+    if (this.taskList){
+      this.setState({sortKey: key});
+      setTimeout(() => {
+        this.taskList.refresh();
+      }, 0);
+    }
+  }
+
   render() {
     const { refreshing, data } = this.state;
     const numTasks = data.tasks.length;
     const canEdit = this.hasPermission("change");
-    const sortItems = [{
-                        key: "created_at",
-                        label: _("Created on")
-                      },{
-                        key: "name",
-                        label: _("Name")
-                      }];
+    
 
     return (
       <li className={"project-list-item list-group-item " + (refreshing ? "refreshing" : "")}
@@ -563,9 +576,9 @@ class ProjectListItem extends React.Component {
                 <div className="btn-group">
                   <i className='fa fa-sort-alpha-down'></i>
                   <a href="javascript:void(0);" className="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    {_("Sort")} <i className={'fa fa-caret-' + (this.state.showTaskList ? 'down' : 'right')}></i>
+                    {_("Sort")}
                   </a>
-                  <SortItems items={sortItems} />
+                  <SortPanel items={this.sortItems} onChange={this.sortChanged} />
                 </div>
               </div> : ""}
 
@@ -609,7 +622,7 @@ class ProjectListItem extends React.Component {
           {this.state.showTaskList ? 
             <TaskList 
                 ref={this.setRef("taskList")} 
-                source={`/api/projects/${data.id}/tasks/?ordering=-created_at`}
+                source={`/api/projects/${data.id}/tasks/?ordering=${this.state.sortKey}`}
                 onDelete={this.taskDeleted}
                 onTaskMoved={this.taskMoved}
                 hasPermission={this.hasPermission}

app/static/app/js/components/SortItems.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import '../css/SortItems.scss';
-import PropTypes from 'prop-types';
-import { _ } from '../classes/gettext';
-
-class SortItems extends React.Component {
-  static defaultProps = {
-    items: []
-  };
-
-  static propTypes = {
-    items: PropTypes.arrayOf(PropTypes.object)
-  };
-
-  constructor(props){
-    super(props);
-
-  }
-
-  handleClick = (key, order) => {
-    return () => {
-      console.log(key, order);
-    }
-  }
-
-  render() {
-    return (<ul className="dropdown-menu dropdown-menu-right sort-items">
-      <li className="sort-order-label">{_("Descending")}</li>
-      {this.props.items.map(i => 
-        <li key={i.key}><a onClick={this.handleClick(i.key, "desc")} className="sort-item">
-          { i.label }
-        </a></li>
-      )}
-      <li className="sort-order-label">{_("Ascending")}</li>
-      {this.props.items.map(i => 
-        <li key={i.key}><a onClick={this.handleClick(i.key, "asc")} className="sort-item">
-          { i.label }
-        </a></li>
-      )}
-    </ul>);
-  }
-}
-
-export default SortItems;

app/static/app/js/components/TaskList.jsx

@@ -42,6 +42,8 @@ class TaskList extends React.Component {
   }
 
   loadTaskList(){
+    this.setState({loading: true});
+
     this.taskListRequest = 
       $.getJSON(this.props.source, json => {
           this.setState({

app/static/app/js/components/TaskListItem.jsx

@@ -403,7 +403,7 @@ class TaskListItem extends React.Component {
 
   render() {
     const task = this.state.task;
-    const name = task.name !== null ? task.name : interpolate(_("Task #%(number)s"), { number: task.id });
+    const name = task.name !== null ? task.name : _("(unnamed)");
     const imported = task.import_url !== "";
 
     let status = statusCodes.description(task.status);

app/static/app/js/css/SortItems.scss

@@ -1,15 +0,0 @@
-.sort-items{
-    .sort-order-label{
-        opacity: 0.7;
-        padding-left: 12px;
-    }
-
-    a{
-        margin-right: 0 !important;
-        padding-left: 24px !important;
-    }
-
-    a:hover{
-        cursor: pointer;
-    }
-}