interface ProjectExplorerProps {
items: ProjectExplorerItem[];
onRowClick: (item: ProjectExplorerItem) => void;
+ onToggleSort: (toggledColumn: DataColumn<ProjectExplorerItem>) => void;
+ onChangeFilters: (filters: DataTableFilterItem[]) => void;
}
interface ProjectExplorerState {
columns: [{
name: "Name",
selected: true,
- sortDirection: "asc",
+ sortDirection: "desc",
render: renderName,
width: "450px"
}, {
name: "Status",
selected: true,
- filters: [{
- name: "In progress",
- selected: true
- }, {
- name: "Complete",
- selected: true
- }],
render: renderStatus,
width: "75px"
}, {
name: "Collection",
selected: true
}, {
- name: "Group",
+ name: "Project",
selected: true
}],
render: item => renderType(item.kind),
}, {
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"
}]
});
}
- 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>) => {
: column
)
});
+ this.props.onChangeFilters(filters);
}
executeAction = (action: ContextMenuAction, 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 />;
}
import ProjectExplorer from "../../views-components/project-explorer/project-explorer";
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';
+import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
interface ProjectPanelDataProps {
projects: ProjectState;
type ProjectPanelProps = ProjectPanelDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
-class ProjectPanel extends React.Component<ProjectPanelProps> {
+interface ProjectPanelState {
+ sort: {
+ columnName: string;
+ direction: SortDirection;
+ };
+ filters: string[];
+}
+
+class ProjectPanel extends React.Component<ProjectPanelProps & WithStyles<CssRules>, ProjectPanelState> {
+ state: ProjectPanelState = {
+ sort: {
+ columnName: "Name",
+ direction: "desc"
+ },
+ filters: ['collection', 'project']
+ };
+
render() {
const items = projectExplorerItems(
this.props.projects.items,
this.props.projects.currentItemId,
this.props.collections
);
+ const [goBackItem, ...otherItems] = items;
+ const filteredItems = otherItems.filter(i => this.state.filters.some(f => f === i.kind));
+ const sortedItems = sortItems(this.state.sort, filteredItems);
return (
- <ProjectExplorer
- items={items}
- onRowClick={this.goToItem}
- />
+ <div>
+ <div className={this.props.classes.toolbar}>
+ <Button color="primary" variant="raised" className={this.props.classes.button}>
+ Create a collection
+ </Button>
+ <Button color="primary" variant="raised" className={this.props.classes.button}>
+ Run a process
+ </Button>
+ <Button color="primary" variant="raised" className={this.props.classes.button}>
+ Create a project
+ </Button>
+ </div>
+ <ProjectExplorer
+ items={goBackItem ? [goBackItem, ...sortedItems] : sortedItems}
+ onRowClick={this.goToItem}
+ onToggleSort={this.toggleSort}
+ onChangeFilters={this.changeFilters}
+ />
+ </div>
);
}
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"
+ }
+ });
+ }
+
+ changeFilters = (filters: DataTableFilterItem[]) => {
+ this.setState({ filters: filters.filter(f => f.selected).map(f => f.name.toLowerCase()) });
+ }
}
-export default connect(
- (state: RootState) => ({
- projects: state.projects,
- collections: state.collections
- })
-)(ProjectPanel);
+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 => ({
+ toolbar: {
+ marginBottom: theme.spacing.unit * 3,
+ display: "flex",
+ justifyContent: "flex-end"
+ },
+ button: {
+ marginLeft: theme.spacing.unit
+ }
+});
+
+export default withStyles(styles)(
+ connect(
+ (state: RootState) => ({
+ projects: state.projects,
+ collections: state.collections
+ })
+ )(ProjectPanel));
projects / arvados-workbench2.git / commitdiff