From 2767521c504e5a43cfdcf86781f94ce2bcfc81e4 Mon Sep 17 00:00:00 2001 From: Michal Klobukowski Date: Wed, 4 Jul 2018 12:23:23 +0200 Subject: [PATCH] Improve pagination actions in data explorer Feature #13703 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- .../data-explorer/data-explorer-action.ts | 20 ++++++++++--------- .../data-explorer/data-explorer-reducer.ts | 9 +++++++-- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/store/data-explorer/data-explorer-action.ts b/src/store/data-explorer/data-explorer-action.ts index fd3a7afe..2c161c2c 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 }>(), - 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 }>(), + 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; diff --git a/src/store/data-explorer/data-explorer-reducer.ts b/src/store/data-explorer/data-explorer-reducer.ts index efb45da8..0622f0ff 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; 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; 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 })), -- 2.30.2