X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/4a8d85d10073d2555253bdb631d293eaf7deccbf..119cee6f881abb202b9690217beba2e23d6959db:/src/store/data-explorer/data-explorer-reducer.ts diff --git a/src/store/data-explorer/data-explorer-reducer.ts b/src/store/data-explorer/data-explorer-reducer.ts index 01126170..1e5cd88f 100644 --- a/src/store/data-explorer/data-explorer-reducer.ts +++ b/src/store/data-explorer/data-explorer-reducer.ts @@ -2,38 +2,54 @@ // // SPDX-License-Identifier: AGPL-3.0 -import { DataColumn, toggleSortDirection, resetSortDirection } from "../../components/data-table/data-column"; -import actions, { DataExplorerAction } from "./data-explorer-action"; -import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters"; -import { DataColumns } from "../../components/data-table/data-table"; - -interface DataExplorer { +import { + DataColumn, + resetSortDirection, + SortDirection, + toggleSortDirection +} from "components/data-table/data-column"; +import { DataExplorerAction, dataExplorerActions, DataTableRequestState } from "./data-explorer-action"; +import { DataColumns, DataTableFetchMode } from "components/data-table/data-table"; +import { DataTableFilters } from "components/data-table-filters/data-table-filters-tree"; + +export interface DataExplorer { + fetchMode: DataTableFetchMode; columns: DataColumns; items: any[]; itemsAvailable: number; page: number; rowsPerPage: number; - rowsPerPageOptions?: number[]; + rowsPerPageOptions: number[]; searchValue: string; + working?: boolean; + requestState: DataTableRequestState; } export const initialDataExplorer: DataExplorer = { + fetchMode: DataTableFetchMode.PAGINATED, columns: [], items: [], itemsAvailable: 0, page: 0, - rowsPerPage: 10, - rowsPerPageOptions: [5, 10, 25, 50], - searchValue: "" + rowsPerPage: 50, + rowsPerPageOptions: [10, 20, 50, 100, 200, 500], + searchValue: "", + requestState: DataTableRequestState.IDLE }; -export type DataExplorerState = Record; +export type DataExplorerState = Record; + +export const dataExplorerReducer = (state: DataExplorerState = {}, action: DataExplorerAction) => + dataExplorerActions.match(action, { + CLEAR: ({ id }) => + update(state, id, explorer => ({ ...explorer, page: 0, itemsAvailable: 0, items: [] })), -const dataExplorerReducer = (state: DataExplorerState = {}, action: DataExplorerAction) => - actions.match(action, { RESET_PAGINATION: ({ id }) => update(state, id, explorer => ({ ...explorer, page: 0 })), + SET_FETCH_MODE: ({ id, fetchMode }) => + update(state, id, explorer => ({ ...explorer, fetchMode })), + SET_COLUMNS: ({ id, columns }) => update(state, id, setColumns(columns)), @@ -41,7 +57,16 @@ const dataExplorerReducer = (state: DataExplorerState = {}, action: DataExplorer update(state, id, mapColumns(setFilters(columnName, filters))), SET_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) => - update(state, id, explorer => ({ ...explorer, items, itemsAvailable, page, rowsPerPage })), + update(state, id, explorer => ({ ...explorer, items, itemsAvailable, page: page || 0, rowsPerPage })), + + APPEND_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) => + update(state, id, explorer => ({ + ...explorer, + items: state[id].items.concat(items), + itemsAvailable: state[id].itemsAvailable + itemsAvailable, + page, + rowsPerPage + })), SET_PAGE: ({ id, page }) => update(state, id, explorer => ({ ...explorer, page })), @@ -49,9 +74,12 @@ const dataExplorerReducer = (state: DataExplorerState = {}, action: DataExplorer SET_ROWS_PER_PAGE: ({ id, rowsPerPage }) => update(state, id, explorer => ({ ...explorer, rowsPerPage })), - SET_SEARCH_VALUE: ({ id, searchValue }) => + SET_EXPLORER_SEARCH_VALUE: ({ id, searchValue }) => update(state, id, explorer => ({ ...explorer, searchValue })), + SET_REQUEST_STATE: ({ id, requestState }) => + update(state, id, explorer => ({ ...explorer, requestState })), + TOGGLE_SORT: ({ id, columnName }) => update(state, id, mapColumns(toggleSort(columnName))), @@ -61,17 +89,32 @@ const dataExplorerReducer = (state: DataExplorerState = {}, action: DataExplorer default: () => state }); -export default dataExplorerReducer; - export const getDataExplorer = (state: DataExplorerState, id: string) => state[id] || initialDataExplorer; +export const getSortColumn = (dataExplorer: DataExplorer) => dataExplorer.columns.find((c: any) => + !!c.sortDirection && c.sortDirection !== SortDirection.NONE); + const update = (state: DataExplorerState, id: string, updateFn: (dataExplorer: DataExplorer) => DataExplorer) => ({ ...state, [id]: updateFn(getDataExplorer(state, id)) }); +const canUpdateColumns = (prevColumns: DataColumns, nextColumns: DataColumns) => { + if (prevColumns.length !== nextColumns.length) { + return true; + } + for (let i = 0; i < nextColumns.length; i++) { + const pc = prevColumns[i]; + const nc = nextColumns[i]; + if (pc.key !== nc.key || pc.name !== nc.name) { + return true; + } + } + return false; +}; + const setColumns = (columns: DataColumns) => (dataExplorer: DataExplorer) => - ({ ...dataExplorer, columns }); + ({ ...dataExplorer, columns: canUpdateColumns(dataExplorer.columns, columns) ? columns : dataExplorer.columns }); const mapColumns = (mapFn: (column: DataColumn) => DataColumn) => (dataExplorer: DataExplorer) => @@ -87,7 +130,7 @@ const toggleColumn = (columnName: string) => ? { ...column, selected: !column.selected } : column; -const setFilters = (columnName: string, filters: DataTableFilterItem[]) => +const setFilters = (columnName: string, filters: DataTableFilters) => (column: DataColumn) => column.name === columnName ? { ...column, filters } : column;