[ARVADOS-WORKBENCH2] updated: 1.1.4-184-g2767521
Git user
git at public.curoverse.com
Wed Jul 4 06:23:39 EDT 2018
Summary of changes:
src/components/data-explorer/data-explorer.tsx | 7 ++++---
src/components/data-table/data-table.tsx | 10 ++++++----
src/store/data-explorer/data-explorer-action.ts | 20 +++++++++++---------
src/store/data-explorer/data-explorer-reducer.ts | 9 +++++++--
4 files changed, 28 insertions(+), 18 deletions(-)
via 2767521c504e5a43cfdcf86781f94ce2bcfc81e4 (commit)
via 3f60fa9f43e8f5bd9891b1687830ec7ef120236e (commit)
via 4433dd83d5967d35cde06f4ed5185c2b20ec0c0b (commit)
from 137f7f8bbfb118af318cea460df8bd6e717fcf82 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 2767521c504e5a43cfdcf86781f94ce2bcfc81e4
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Wed Jul 4 12:23:23 2018 +0200
Improve pagination actions in data explorer
Feature #13703
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/store/data-explorer/data-explorer-action.ts b/src/store/data-explorer/data-explorer-action.ts
index fd3a7af..2c161c2 100644
--- a/src/store/data-explorer/data-explorer-action.ts
+++ b/src/store/data-explorer/data-explorer-action.ts
@@ -4,17 +4,19 @@
import { default as unionize, ofType, UnionOf } from "unionize";
import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters";
-import { DataColumns } from "../../components/data-table/data-table";
+import { DataColumns, DataItem } from "../../components/data-table/data-table";
const actions = unionize({
- SET_COLUMNS: ofType<{id: string, columns: DataColumns<any> }>(),
- SET_FILTERS: ofType<{id: string,columnName: string, filters: DataTableFilterItem[]}>(),
- SET_ITEMS: ofType<{id: string,items: any[]}>(),
- SET_PAGE: ofType<{id: string,page: number}>(),
- SET_ROWS_PER_PAGE: ofType<{id: string,rowsPerPage: number}>(),
- TOGGLE_COLUMN: ofType<{id: string, columnName: string }>(),
- TOGGLE_SORT: ofType<{id: string, columnName: string }>(),
- SET_SEARCH_VALUE: ofType<{id: string,searchValue: string}>()
+ RESET_PAGINATION: ofType<{ id: string }>(),
+ REQUEST_ITEMS: ofType<{ id: string }>(),
+ SET_COLUMNS: ofType<{ id: string, columns: DataColumns<any> }>(),
+ SET_FILTERS: ofType<{ id: string, columnName: string, filters: DataTableFilterItem[] }>(),
+ SET_ITEMS: ofType<{ id: string, items: DataItem[], page: number, rowsPerPage: number, itemsAvailable: number }>(),
+ SET_PAGE: ofType<{ id: string, page: number }>(),
+ SET_ROWS_PER_PAGE: ofType<{ id: string, rowsPerPage: number }>(),
+ TOGGLE_COLUMN: ofType<{ id: string, columnName: string }>(),
+ TOGGLE_SORT: ofType<{ id: string, columnName: string }>(),
+ SET_SEARCH_VALUE: ofType<{ id: string, searchValue: string }>(),
}, { tag: "type", value: "payload" });
export type DataExplorerAction = UnionOf<typeof actions>;
diff --git a/src/store/data-explorer/data-explorer-reducer.ts b/src/store/data-explorer/data-explorer-reducer.ts
index efb45da..0622f0f 100644
--- a/src/store/data-explorer/data-explorer-reducer.ts
+++ b/src/store/data-explorer/data-explorer-reducer.ts
@@ -10,6 +10,7 @@ import { DataColumns } from "../../components/data-table/data-table";
interface DataExplorer {
columns: DataColumns<any>;
items: any[];
+ itemsAvailable: number;
page: number;
rowsPerPage: number;
rowsPerPageOptions?: number[];
@@ -19,6 +20,7 @@ interface DataExplorer {
export const initialDataExplorer: DataExplorer = {
columns: [],
items: [],
+ itemsAvailable: 0,
page: 0,
rowsPerPage: 10,
rowsPerPageOptions: [5, 10, 25, 50],
@@ -29,14 +31,17 @@ export type DataExplorerState = Record<string, DataExplorer | undefined>;
const dataExplorerReducer = (state: DataExplorerState = {}, action: DataExplorerAction) =>
actions.match(action, {
+ RESET_PAGINATION: ({ id }) =>
+ update(state, id, explorer => ({ ...explorer, page: 0 })),
+
SET_COLUMNS: ({ id, columns }) =>
update(state, id, setColumns(columns)),
SET_FILTERS: ({ id, columnName, filters }) =>
update(state, id, mapColumns(setFilters(columnName, filters))),
- SET_ITEMS: ({ id, items }) =>
- update(state, id, explorer => ({ ...explorer, items })),
+ SET_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) =>
+ update(state, id, explorer => ({ ...explorer, items, itemsAvailable, page, rowsPerPage })),
SET_PAGE: ({ id, page }) =>
update(state, id, explorer => ({ ...explorer, page })),
commit 3f60fa9f43e8f5bd9891b1687830ec7ef120236e
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Wed Jul 4 12:21:54 2018 +0200
Add prop to pass available items amount to pagination
Feature #13703
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index ff51c71..a0ddc28 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -7,7 +7,7 @@ import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, Theme, WithStyles
import MoreVertIcon from "@material-ui/icons/MoreVert";
import ContextMenu, { ContextMenuActionGroup, ContextMenuAction } from "../../components/context-menu/context-menu";
import ColumnSelector from "../../components/column-selector/column-selector";
-import DataTable, { DataColumns } from "../../components/data-table/data-table";
+import DataTable, { DataColumns, DataItem } from "../../components/data-table/data-table";
import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
import { DataColumn } from "../../components/data-table/data-column";
import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
@@ -15,6 +15,7 @@ import SearchInput from '../search-input/search-input';
interface DataExplorerProps<T> {
items: T[];
+ itemsAvailable: number;
columns: DataColumns<T>;
contextActions: ContextMenuActionGroup[];
searchValue: string;
@@ -38,7 +39,7 @@ interface DataExplorerState<T> {
};
}
-class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<CssRules>, DataExplorerState<T>> {
+class DataExplorer<T extends DataItem> extends React.Component<DataExplorerProps<T> & WithStyles<CssRules>, DataExplorerState<T>> {
state: DataExplorerState<T> = {
contextMenu: {}
};
@@ -73,7 +74,7 @@ class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<
{this.props.items.length > 0 &&
<Grid container justify="flex-end">
<TablePagination
- count={this.props.items.length}
+ count={this.props.itemsAvailable}
rowsPerPage={this.props.rowsPerPage}
rowsPerPageOptions={this.props.rowsPerPageOptions}
page={this.props.page}
commit 4433dd83d5967d35cde06f4ed5185c2b20ec0c0b
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Wed Jul 4 12:20:45 2018 +0200
Create DataItem type to ensure table rows use key attr to properly rerender
Feature #13703
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e8a5b24..e96839e 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -8,7 +8,9 @@ import { DataColumn, SortDirection } from './data-column';
import DataTableFilters, { DataTableFilterItem } from "../data-table-filters/data-table-filters";
export type DataColumns<T> = Array<DataColumn<T>>;
-
+export interface DataItem {
+ key: React.Key;
+}
export interface DataTableProps<T> {
items: T[];
columns: DataColumns<T>;
@@ -18,7 +20,7 @@ export interface DataTableProps<T> {
onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
}
-class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
+class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
const { items, classes } = this.props;
return <div className={classes.tableContainer}>
@@ -66,10 +68,10 @@ class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRul
}
renderBodyRow = (item: T, index: number) => {
- const { columns, onRowClick, onRowContextMenu } = this.props;
+ const { onRowClick, onRowContextMenu } = this.props;
return <TableRow
hover
- key={index}
+ key={item.key}
onClick={event => onRowClick && onRowClick(event, item)}
onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
{this.mapVisibleColumns((column, index) => (
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list