add fetch all button

uhh-lt · Oct 18, 2024 · ea9e47c · ea9e47c
1 parent 0e9f112
commit ea9e47c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/frontend/src/components/tableSlice.ts b/frontend/src/components/tableSlice.ts
@@ -2,7 +2,6 @@ import { Draft, PayloadAction, createSelector } from "@reduxjs/toolkit";
 import {
   MRT_ColumnSizingState,
   MRT_DensityState,
-  MRT_PaginationState,
   MRT_RowSelectionState,
   MRT_SortingState,
   MRT_VisibilityState,
@@ -11,24 +10,21 @@ import {
 export interface TableState {
   searchQuery?: string;
   rowSelectionModel: MRT_RowSelectionState;
-  paginationModel: MRT_PaginationState;
   sortingModel: MRT_SortingState;
   columnVisibilityModel: MRT_VisibilityState;
   columnSizingModel: MRT_ColumnSizingState;
   gridDensityModel: MRT_DensityState;
+  fetchSize: number;
 }
 
 export const initialTableState: TableState = {
   // project state:
   searchQuery: "",
   rowSelectionModel: {},
-  paginationModel: {
-    pageIndex: 0,
-    pageSize: 10,
-  },
   sortingModel: [],
   columnVisibilityModel: {},
   columnSizingModel: {},
+  fetchSize: 20,
   // app state:
   gridDensityModel: "comfortable",
 };
@@ -37,6 +33,7 @@ export const tableReducer = {
   // query
   onSearchQueryChange: (state: Draft<TableState>, action: PayloadAction<string | undefined>) => {
     state.searchQuery = action.payload;
+    state.fetchSize = initialTableState.fetchSize;
   },
   // selection
   onRowSelectionChange: (state: Draft<TableState>, action: PayloadAction<MRT_RowSelectionState>) => {
@@ -45,10 +42,6 @@ export const tableReducer = {
   onClearRowSelection: (state: Draft<TableState>) => {
     state.rowSelectionModel = {};
   },
-  // pagination
-  onPaginationChange: (state: Draft<TableState>, action: PayloadAction<MRT_PaginationState>) => {
-    state.paginationModel = action.payload;
-  },
   // sorting
   onSortChange: (state: Draft<TableState>, action: PayloadAction<MRT_SortingState>) => {
     state.sortingModel = action.payload;
@@ -65,16 +58,20 @@ export const tableReducer = {
   onGridDensityChange: (state: Draft<TableState>, action: PayloadAction<MRT_DensityState>) => {
     state.gridDensityModel = action.payload;
   },
+  // fetch sizse
+  onFetchSizeChange: (state: Draft<TableState>, action: PayloadAction<number>) => {
+    state.fetchSize = action.payload;
+  },
 };
 
 // reset table state
 export const resetProjectTableState = (state: Draft<TableState>) => {
   state.searchQuery = initialTableState.searchQuery;
   state.rowSelectionModel = initialTableState.rowSelectionModel;
-  state.paginationModel = initialTableState.paginationModel;
   state.sortingModel = initialTableState.sortingModel;
   state.columnVisibilityModel = initialTableState.columnVisibilityModel;
   state.columnSizingModel = initialTableState.columnSizingModel;
+  state.fetchSize = initialTableState.fetchSize;
 };
 
 // selectors

diff --git a/frontend/src/views/search/DocumentSearch/SearchDocumentTable.tsx b/frontend/src/views/search/DocumentSearch/SearchDocumentTable.tsx
@@ -1,4 +1,4 @@
-import { Box, Card, Toolbar, Typography } from "@mui/material";
+import { Box, Button, Card, Divider, Stack, Toolbar, Typography } from "@mui/material";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import parse from "html-react-parser";
 import {
@@ -42,7 +42,6 @@ import { SearchActions } from "./searchSlice.ts";
 // this has to match Search.tsx!
 const filterStateSelector = (state: RootState) => state.searchFilter;
 const filterName = "root";
-const fetchSize = 20;
 
 const flatMapData = (page: PaginatedElasticSearchDocumentHits) => page.hits;
 
@@ -152,6 +151,7 @@ function SearchDocumentTable({ projectId }: DocumentTableProps) {
   }, [tableInfo, user]);
 
   // search
+  const fetchSize = useAppSelector((state) => state.search.fetchSize);
   const filter = useAppSelector((state) => state.searchFilter.filter[filterName]);
   const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery<PaginatedElasticSearchDocumentHits>({
     queryKey: [
@@ -160,6 +160,7 @@ function SearchDocumentTable({ projectId }: DocumentTableProps) {
       searchQuery, // refetch when searchQuery changes
       filter, // refetch when columnFilters changes
       sortingModel, // refetch when sorting changes
+      fetchSize,
     ],
     queryFn: ({ pageParam }) =>
       SearchService.searchSdocs({
@@ -335,6 +336,17 @@ function SearchDocumentTable({ projectId }: DocumentTableProps) {
           style={{ flexGrow: 1 }}
           onScroll={(event) => fetchMoreOnScroll(event.target as HTMLDivElement)}
         />
+        <Box sx={{ p: 1 }}>
+          <Divider />
+          <Stack direction="row" alignItems="top" pt={0.5}>
+            <Typography variant="body2" color="textSecondary" pt={0.5} mr={1}>
+              Fetched {totalFetched} of {totalResults} documents
+            </Typography>
+            <Button size="small" onClick={() => dispatch(SearchActions.onFetchSizeChange(totalResults))}>
+              Fetch All
+            </Button>
+          </Stack>
+        </Box>
       </Card>
     </>
   );

diff --git a/frontend/src/views/search/DocumentSearch/searchSlice.ts b/frontend/src/views/search/DocumentSearch/searchSlice.ts
@@ -84,7 +84,14 @@ export const searchSlice = createSlice({
             };
           }
         }, {});
-      });
+      })
+      .addMatcher(
+        (action) => action.type.startsWith("searchFilter"),
+        (state) => {
+          console.log("SearchFilterActions dispatched! Resetting fetchSize.");
+          state.fetchSize = initialTableState.fetchSize;
+        },
+      );
   },
 });