Implement sorting in projet-panel

Feature #13683

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/project-explorer/project-explorer.tsx b/src/views-components/project-explorer/project-explorer.tsx
index 94ae438986eeb3145ba02a1dfc872966de18c91f..e982553ceee7dba0f922cbf51614c51965b523cb 100644 (file)
--- a/src/views-components/project-explorer/project-explorer.tsx
+++ b/src/views-components/project-explorer/project-explorer.tsx
@@ -25,6 +25,7 @@ export interface ProjectExplorerContextActions {
 interface ProjectExplorerProps {
     items: ProjectExplorerItem[];
     onRowClick: (item: ProjectExplorerItem) => void;
+    onToggleSort: (toggledColumn: DataColumn<ProjectExplorerItem>) => void;
 }
 
 interface ProjectExplorerState {
@@ -42,7 +43,7 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
         columns: [{
             name: "Name",
             selected: true,
-            sortDirection: "asc",
+            sortDirection: "desc",
             render: renderName,
             width: "450px"
         }, {
@@ -77,12 +78,12 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
         }, {
             name: "File size",
             selected: true,
-            sortDirection: "none",
             render: item => renderFileSize(item.fileSize),
             width: "50px"
         }, {
             name: "Last modified",
             selected: true,
+            sortDirection: "none",
             render: item => renderDate(item.lastModified),
             width: "150px"
         }]
@@ -140,14 +141,17 @@ class ProjectExplorer extends React.Component<ProjectExplorerProps, ProjectExplo
         });
     }
 
-    toggleSort = (toggledColumn: DataColumn<ProjectExplorerItem>) => {
-        this.setState({
-            columns: this.state.columns.map(column =>
-                column.name === toggledColumn.name
-                    ? toggleSortDirection(column)
-                    : resetSortDirection(column)
-            )
-        });
+    toggleSort = (column: DataColumn<ProjectExplorerItem>) => {
+        const columns = this.state.columns.map(c =>
+            c.name === column.name
+                ? toggleSortDirection(c)
+                : resetSortDirection(c)
+        );
+        this.setState({ columns });
+        const toggledColumn = columns.find(c => c.name === column.name);
+        if (toggledColumn) {
+            this.props.onToggleSort(toggledColumn);
+        }
     }
 
     changeFilters = (filters: DataTableFilterItem[], updatedColumn: DataColumn<ProjectExplorerItem>) => {
@@ -197,11 +201,11 @@ const renderName = (item: ProjectExplorerItem) =>
 const renderIcon = (item: ProjectExplorerItem) => {
     switch (item.kind) {
         case ResourceKind.LEVEL_UP:
-            return <i className="icon-level-up" style={{fontSize: "1rem"}}/>;
+            return <i className="icon-level-up" style={{ fontSize: "1rem" }} />;
         case ResourceKind.PROJECT:
-            return <i className="fas fa-folder fa-lg"/>;
+            return <i className="fas fa-folder fa-lg" />;
         case ResourceKind.COLLECTION:
-            return <i className="fas fa-th fa-lg"/>;
+            return <i className="fas fa-th fa-lg" />;
         default:
             return <i />;
     }

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index a9fd378cffe01da62de8bade3a2b519ffca3fdf8..d44053dabd1e657a7c45589dda0c172726997f5d 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -13,6 +13,7 @@ import ProjectExplorer from "../../views-components/project-explorer/project-exp
 import { projectExplorerItems } from "./project-panel-selectors";
 import { ProjectExplorerItem } from "../../views-components/project-explorer/project-explorer-item";
 import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { DataColumn, SortDirection } from '../../components/data-table/data-column';
 
 interface ProjectPanelDataProps {
     projects: ProjectState;
@@ -21,13 +22,29 @@ interface ProjectPanelDataProps {
 
 type ProjectPanelProps = ProjectPanelDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
 
-class ProjectPanel extends React.Component<ProjectPanelProps & WithStyles<CssRules>> {
+interface ProjectPanelState {
+    sort: {
+        columnName: string;
+        direction: SortDirection;
+    };
+}
+
+class ProjectPanel extends React.Component<ProjectPanelProps & WithStyles<CssRules>, ProjectPanelState> {
+    state: ProjectPanelState = {
+        sort: {
+            columnName: "Name",
+            direction: "desc"
+        }
+    };
+
     render() {
         const items = projectExplorerItems(
             this.props.projects.items,
             this.props.projects.currentItemId,
             this.props.collections
         );
+        const [goBackItem, ...otherItems] = items;
+        const sortedItems = sortItems(this.state.sort, otherItems);
         return (
             <div>
                 <div className={this.props.classes.toolbar}>
@@ -42,8 +59,9 @@ class ProjectPanel extends React.Component<ProjectPanelProps & WithStyles<CssRul
                     </Button>
                 </div>
                 <ProjectExplorer
-                    items={items}
+                    items={goBackItem ? [goBackItem, ...sortedItems] : sortedItems }
                     onRowClick={this.goToItem}
+                    onToggleSort={this.toggleSort}
                 />
             </div>
         );
@@ -52,8 +70,28 @@ class ProjectPanel extends React.Component<ProjectPanelProps & WithStyles<CssRul
     goToItem = (item: ProjectExplorerItem) => {
         this.props.dispatch<any>(setProjectItem(this.props.projects.items, item.uuid, item.kind, ItemMode.BOTH));
     }
+
+    toggleSort = (column: DataColumn<ProjectExplorerItem>) => {
+        this.setState({sort: {
+            columnName: column.name,
+            direction: column.sortDirection || "none"
+        }});
+    }
 }
 
+const sortItems = (sort: {columnName: string, direction: SortDirection}, items: ProjectExplorerItem[]) => {
+    const sortedItems = items.slice(0);
+    const direction = sort.direction === "asc" ? -1 : 1;
+    sortedItems.sort((a, b) => {
+        if(sort.columnName === "Last modified") {
+            return ((new Date(a.lastModified)).getTime() - (new Date(b.lastModified)).getTime()) * direction;
+        } else {
+            return a.name.localeCompare(b.name) * direction;
+        }
+    });
+    return sortedItems;
+};
+
 type CssRules = "toolbar" | "button";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({