Implement sorting in projet-panel

[arvados-workbench2.git] / src / views-components / project-explorer / project-explorer.tsx

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 />;
     }