Sort/filter/search mockup

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

@@ -7,6 +7,7 @@ import ImportTaskPanel from './ImportTaskPanel';
 import UploadProgressBar from './UploadProgressBar';
 import ErrorMessage from './ErrorMessage';
 import EditProjectDialog from './EditProjectDialog';
+import SortItems from './SortItems';
 import Dropzone from '../vendor/dropzone';
 import csrf from '../django/csrf';
 import HistoryNav from '../classes/HistoryNav';
@@ -471,6 +472,13 @@ class ProjectListItem extends React.Component {
     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" : "")}
@@ -540,11 +548,26 @@ class ProjectListItem extends React.Component {
             {numTasks > 0 ? 
               <span>
                 <i className='fa fa-tasks'></i>
-                 <a href="javascript:void(0);" onClick={this.toggleTaskList}>
+                <a href="javascript:void(0);" onClick={this.toggleTaskList}>
                   {interpolate(_("%(count)s Tasks"), { count: numTasks})} <i className={'fa fa-caret-' + (this.state.showTaskList ? 'down' : 'right')}></i>
                 </a>
               </span>
               : ""}
+            
+            {this.state.showTaskList && numTasks > 1 ? 
+              <div className="task-filters">
+                <i className='fa fa-filter'></i>
+                <a href="javascript:void(0);" onClick={this.toggleTaskList}>
+                  {_("Filter")}
+                </a>
+                <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>
+                  </a>
+                  <SortItems items={sortItems} />
+                </div>
+              </div> : ""}
 
             {canEdit ? 
                 [<i key="edit-icon" className='far fa-edit'></i>

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

@@ -0,0 +1,44 @@
+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/css/ProjectListItem.scss

@@ -12,6 +12,10 @@
         } 
     }
 
+    .project-description{
+        min-height: 12px;
+    }
+
     .drag-drop-icon{
         display: none;
         position: absolute;
@@ -97,4 +101,8 @@
             }
         }
     }
+
+    .task-filters{
+        float: right;
+    }
 }

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

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

app/static/app/js/css/TaskList.scss

@@ -1,2 +1,5 @@
 .task-list{
+    .task-bar{
+        text-align: right;
+    }
 }