items: ProjectExplorerItem[];
onRowClick: (item: ProjectExplorerItem) => void;
onToggleSort: (toggledColumn: DataColumn<ProjectExplorerItem>) => void;
+ onChangeFilters: (filters: DataTableFilterItem[]) => void;
}
interface ProjectExplorerState {
}, {
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),
: column
)
});
+ this.props.onChangeFilters(filters);
}
executeAction = (action: ContextMenuAction, item: ProjectExplorerItem) => {
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;
columnName: string;
direction: SortDirection;
};
+ filters: string[];
}
class ProjectPanel extends React.Component<ProjectPanelProps & WithStyles<CssRules>, ProjectPanelState> {
sort: {
columnName: "Name",
direction: "desc"
- }
+ },
+ filters: ['collection', 'project']
};
render() {
this.props.collections
);
const [goBackItem, ...otherItems] = items;
- const sortedItems = sortItems(this.state.sort, otherItems);
+ const filteredItems = otherItems.filter(i => this.state.filters.some(f => f === i.kind));
+ const sortedItems = sortItems(this.state.sort, filteredItems);
return (
<div>
<div className={this.props.classes.toolbar}>
</Button>
</div>
<ProjectExplorer
- items={goBackItem ? [goBackItem, ...sortedItems] : sortedItems }
+ items={goBackItem ? [goBackItem, ...sortedItems] : sortedItems}
onRowClick={this.goToItem}
onToggleSort={this.toggleSort}
+ onChangeFilters={this.changeFilters}
/>
</div>
);
}
toggleSort = (column: DataColumn<ProjectExplorerItem>) => {
- this.setState({sort: {
- columnName: column.name,
- direction: column.sortDirection || "none"
- }});
+ 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()) });
}
}
-const sortItems = (sort: {columnName: string, direction: SortDirection}, items: ProjectExplorerItem[]) => {
+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") {
+ 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;