Extend DataColumn and DataTable to handle sorting

[arvados.git] / src / components / data-explorer / data-explorer.tsx

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 20727a703fa0faacb1a5c7bc843e18f8fdd88d7c..ded1b5e39cfdfa2c5e0651f6cc6677a8ee7ca492 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -3,18 +3,29 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { DataTable, DataColumn, ColumnSelector } from "../../components/data-table";
+import { DataTable, DataColumn, ColumnSelector, toggleSortDirection, SortDirection, resetSortDirection } from "../../components/data-table";
 import { Typography, Grid, Paper, Toolbar } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from "@material-ui/icons/MoreVert";
+import TableSortLabel from '@material-ui/core/TableSortLabel';
 import { formatFileSize, formatDate } from '../../common/formatters';
 import { DataItem } from './data-item';
 import { mockAnchorFromMouseEvent } from '../popover/helpers';
-import { ContextMenu } from './context-menu';
-
+import ContextMenu from '../context-menu/context-menu';
+
+export interface DataExplorerContextActions {
+    onAddToFavourite: (dataIitem: DataItem) => void;
+    onCopy: (dataIitem: DataItem) => void;
+    onDownload: (dataIitem: DataItem) => void;
+    onMoveTo: (dataIitem: DataItem) => void;
+    onRemove: (dataIitem: DataItem) => void;
+    onRename: (dataIitem: DataItem) => void;
+    onShare: (dataIitem: DataItem) => void;
+}
 interface DataExplorerProps {
     items: DataItem[];
     onItemClick: (item: DataItem) => void;
+    contextActions: DataExplorerContextActions;
 }
 
 interface DataExplorerState {
@@ -28,50 +39,79 @@ interface DataExplorerState {
 class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
     state: DataExplorerState = {
         contextMenu: {},
-        columns: [
-            {
-                name: "Name",
-                selected: true,
-                render: item => this.renderName(item)
-            },
-            {
-                name: "Status",
-                selected: true,
-                render: item => renderStatus(item.status)
-            },
-            {
-                name: "Type",
-                selected: true,
-                render: item => renderType(item.type)
-            },
-            {
-                name: "Owner",
-                selected: true,
-                render: item => renderOwner(item.owner)
-            },
-            {
-                name: "File size",
-                selected: true,
-                render: item => renderFileSize(item.fileSize)
-            },
-            {
-                name: "Last modified",
-                selected: true,
-                render: item => renderDate(item.lastModified)
-            },
-            {
-                name: "Actions",
-                selected: true,
-                configurable: false,
-                renderHeader: () => null,
-                render: item => this.renderActions(item)
-            }
-        ]
+        columns: [{
+            name: "Name",
+            selected: true,
+            sortDirection: "asc",
+            onSortToggle: () => this.toggleSort("Name"),
+            render: item => this.renderName(item)
+        }, {
+            name: "Status",
+            selected: true,
+            render: item => renderStatus(item.status)
+        }, {
+            name: "Type",
+            selected: true,
+            render: item => renderType(item.type)
+        }, {
+            name: "Owner",
+            selected: true,
+            render: item => renderOwner(item.owner)
+        }, {
+            name: "File size",
+            selected: true,
+            render: item => renderFileSize(item.fileSize)
+        }, {
+            name: "Last modified",
+            selected: true,
+            onSortToggle: () => this.toggleSort("Last modified"),
+            render: item => renderDate(item.lastModified)
+        }, {
+            name: "Actions",
+            selected: true,
+            configurable: false,
+            renderHeader: () => null,
+            render: item => this.renderActions(item)
+        }]
     };
 
+    contextMenuActions = [[{
+        icon: "fas fa-users fa-fw",
+        name: "Share",
+        onClick: this.handleContextAction("onShare")
+    }, {
+        icon: "fas fa-sign-out-alt fa-fw",
+        name: "Move to",
+        onClick: this.handleContextAction("onMoveTo")
+    }, {
+        icon: "fas fa-star fa-fw",
+        name: "Add to favourite",
+        onClick: this.handleContextAction("onAddToFavourite")
+    }, {
+        icon: "fas fa-edit fa-fw",
+        name: "Rename",
+        onClick: this.handleContextAction("onRename")
+    }, {
+        icon: "fas fa-copy fa-fw",
+        name: "Make a copy",
+        onClick: this.handleContextAction("onCopy")
+    }, {
+        icon: "fas fa-download fa-fw",
+        name: "Download",
+        onClick: this.handleContextAction("onDownload")
+    }], [{
+        icon: "fas fa-trash-alt fa-fw",
+        name: "Remove",
+        onClick: this.handleContextAction("onRemove")
+    }
+    ]];
+
     render() {
         return <Paper>
-            <ContextMenu {...this.state.contextMenu} onClose={this.closeContextMenu} />
+            <ContextMenu
+                {...this.state.contextMenu}
+                actions={this.contextMenuActions}
+                onClose={this.closeContextMenu} />
             <Toolbar>
                 <Grid container justify="flex-end">
                     <ColumnSelector
@@ -141,6 +181,20 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
         this.setState({ contextMenu: {} });
     }
 
+    handleContextAction(action: keyof DataExplorerContextActions) {
+        return (item: DataItem) => {
+            this.closeContextMenu();
+            this.props.contextActions[action](item);
+        };
+    }
+
+    toggleSort = (columnName: string) => {
+        this.setState({
+            columns: this.state.columns.map((column, index) =>
+                column.name === columnName ? toggleSortDirection(column) : resetSortDirection(column))
+        });
+    }
+
 }
 
 const renderIcon = (dataItem: DataItem) => {