X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/4fd42aef3c07c9e4c43bf873afe45e0043755ba0..0ee5873d56416cf0c102f9e8930322fa80762f41:/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 4ae01adf..e93d291d 100644 --- a/src/store/data-explorer/data-explorer-reducer.ts +++ b/src/store/data-explorer/data-explorer-reducer.ts @@ -3,170 +3,174 @@ // SPDX-License-Identifier: AGPL-3.0 import { - DataColumn, - resetSortDirection, - SortDirection, - toggleSortDirection, + DataColumn, + resetSortDirection, + SortDirection, + toggleSortDirection, } from 'components/data-table/data-column'; import { - DataExplorerAction, - dataExplorerActions, - DataTableRequestState, + DataExplorerAction, + dataExplorerActions, + DataTableRequestState, } from './data-explorer-action'; import { - DataColumns, - DataTableFetchMode, + 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[]; - searchValue: string; - working?: boolean; - requestState: DataTableRequestState; + fetchMode: DataTableFetchMode; + columns: DataColumns; + items: any[]; + itemsAvailable: number; + page: number; + rowsPerPage: number; + rowsPerPageOptions: number[]; + searchValue: string; + working?: boolean; + requestState: DataTableRequestState; } export const initialDataExplorer: DataExplorer = { - fetchMode: DataTableFetchMode.PAGINATED, - columns: [], - items: [], - itemsAvailable: 0, - page: 0, - rowsPerPage: 50, - rowsPerPageOptions: [10, 20, 50, 100, 200, 500], - searchValue: '', - requestState: DataTableRequestState.IDLE, + fetchMode: DataTableFetchMode.PAGINATED, + columns: [], + items: [], + itemsAvailable: 0, + page: 0, + rowsPerPage: 50, + rowsPerPageOptions: [10, 20, 50, 100, 200, 500], + searchValue: '', + requestState: DataTableRequestState.IDLE, }; export type DataExplorerState = Record; export const dataExplorerReducer = ( - state: DataExplorerState = {}, - action: DataExplorerAction + state: DataExplorerState = {}, + action: DataExplorerAction ) => { - // console.log('DATA_EXPLORERE_REDUCER, satate:', state); - return dataExplorerActions.match(action, { - CLEAR: ({ id }) => - update(state, id, (explorer) => ({ - ...explorer, - page: 0, - itemsAvailable: 0, - items: [], - })), - - 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)), - - SET_FILTERS: ({ id, columnName, filters }) => - update(state, id, mapColumns(setFilters(columnName, filters))), - - SET_ITEMS: ({ id, 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 })), - - SET_ROWS_PER_PAGE: ({ id, rowsPerPage }) => - update(state, id, (explorer) => ({ ...explorer, rowsPerPage })), - - 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))), - - TOGGLE_COLUMN: ({ id, columnName }) => - update(state, id, mapColumns(toggleColumn(columnName))), - - default: () => state, - }); + return dataExplorerActions.match(action, { + CLEAR: ({ id }) => + update(state, id, (explorer) => ({ + ...explorer, + page: 0, + itemsAvailable: 0, + items: [], + })), + + 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)), + + SET_FILTERS: ({ id, columnName, filters }) => + update(state, id, mapColumns(setFilters(columnName, filters))), + + SET_ITEMS: ({ id, 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 })), + + SET_ROWS_PER_PAGE: ({ id, rowsPerPage }) => + update(state, id, (explorer) => ({ ...explorer, rowsPerPage })), + + SET_EXPLORER_SEARCH_VALUE: ({ id, searchValue }) => + update(state, id, (explorer) => ({ ...explorer, searchValue })), + + RESET_EXPLORER_SEARCH_VALUE: ({ id }) => + 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))), + + TOGGLE_COLUMN: ({ id, columnName }) => + update(state, id, mapColumns(toggleColumn(columnName))), + + default: () => state, + }); +}; +export const getDataExplorer = (state: DataExplorerState, id: string) => { + const returnValue = state[id] || initialDataExplorer; + return returnValue; }; -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 - ); +export const getSortColumn = (dataExplorer: DataExplorer): DataColumn | undefined => + dataExplorer.columns.find( + (c: DataColumn) => !!c.sort && c.sort.direction !== SortDirection.NONE + ); const update = ( - state: DataExplorerState, - id: string, - updateFn: (dataExplorer: DataExplorer) => DataExplorer + state: DataExplorerState, + id: string, + updateFn: (dataExplorer: DataExplorer) => DataExplorer ) => ({ ...state, [id]: updateFn(getDataExplorer(state, id)) }); const canUpdateColumns = ( - prevColumns: DataColumns, - nextColumns: DataColumns + 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; + 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; + return false; }; const setColumns = - (columns: DataColumns) => (dataExplorer: DataExplorer) => ({ - ...dataExplorer, - columns: canUpdateColumns(dataExplorer.columns, columns) - ? columns - : dataExplorer.columns, - }); + (columns: DataColumns) => (dataExplorer: DataExplorer) => ({ + ...dataExplorer, + columns: canUpdateColumns(dataExplorer.columns, columns) + ? columns + : dataExplorer.columns, + }); const mapColumns = - (mapFn: (column: DataColumn) => DataColumn) => - (dataExplorer: DataExplorer) => ({ - ...dataExplorer, - columns: dataExplorer.columns.map(mapFn), - }); - -const toggleSort = (columnName: string) => (column: DataColumn) => - column.name === columnName - ? toggleSortDirection(column) - : resetSortDirection(column); - -const toggleColumn = (columnName: string) => (column: DataColumn) => - column.name === columnName - ? { ...column, selected: !column.selected } - : column; + (mapFn: (column: DataColumn) => DataColumn) => + (dataExplorer: DataExplorer) => ({ + ...dataExplorer, + columns: dataExplorer.columns.map(mapFn), + }); + +const toggleSort = (columnName: string) => (column: DataColumn) => + column.name === columnName + ? toggleSortDirection(column) + : resetSortDirection(column); + +const toggleColumn = (columnName: string) => (column: DataColumn) => + column.name === columnName + ? { ...column, selected: !column.selected } + : column; const setFilters = - (columnName: string, filters: DataTableFilters) => - (column: DataColumn) => - column.name === columnName ? { ...column, filters } : column; + (columnName: string, filters: DataTableFilters) => + (column: DataColumn) => + column.name === columnName ? { ...column, filters } : column;