From 5fe7948be9d36e0831900518aca9b9222bd50b5e Mon Sep 17 00:00:00 2001 From: Keshav Gupta Date: Tue, 9 Jan 2024 13:26:44 +0530 Subject: [PATCH] feat: preserve the sorting searching and pagination in dashboard page (#4319) * feat: preserved the sorting searching and pagination * fix: filter in dashboard data --- .../ResizeTable/DynamicColumnTable.tsx | 2 +- .../ListOfDashboard/DashboardsList.tsx | 60 +++++++++++++------ .../src/container/ListOfDashboard/utils.ts | 20 +++++++ 3 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 frontend/src/container/ListOfDashboard/utils.ts diff --git a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx index 55af931d5c..c0d77c967b 100644 --- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx +++ b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx @@ -43,7 +43,7 @@ function DynamicColumnTable({ : undefined, ); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [columns]); + }, [columns, dynamicColumns]); const onToggleHandler = (index: number) => ( checked: boolean, diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx index 9b416c65f4..1851e1d71a 100644 --- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx +++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx @@ -24,10 +24,14 @@ import { Dashboard } from 'types/api/dashboard/getAll'; import AppReducer from 'types/reducer/app'; import DateComponent from '../../components/ResizeTable/TableComponent/DateComponent'; +import useSortableTable from '../../hooks/ResizeTable/useSortableTable'; +import useUrlQuery from '../../hooks/useUrlQuery'; +import { GettableAlert } from '../../types/api/alerts/get'; import ImportJSON from './ImportJSON'; import { ButtonContainer, NewDashboardButton, TableContainer } from './styles'; import DeleteButton from './TableComponents/DeleteButton'; import Name from './TableComponents/Name'; +import { filterDashboard } from './utils'; const { Search } = Input; @@ -55,8 +59,26 @@ function DashboardsList(): JSX.Element { const [uploadedGrafana, setUploadedGrafana] = useState(false); const [isFilteringDashboards, setIsFilteringDashboards] = useState(false); + const params = useUrlQuery(); + const orderColumnParam = params.get('columnKey'); + const orderQueryParam = params.get('order'); + const paginationParam = params.get('page'); + const searchParams = params.get('search'); + const [searchString, setSearchString] = useState(searchParams || ''); + const [dashboards, setDashboards] = useState(); + const sortingOrder: 'ascend' | 'descend' | null = + orderQueryParam === 'ascend' || orderQueryParam === 'descend' + ? orderQueryParam + : null; + + const { sortedInfo, handleChange } = useSortableTable( + sortingOrder, + orderColumnParam || '', + searchString, + ); + const sortDashboardsByCreatedAt = (dashboards: Dashboard[]): void => { const sortedDashboards = dashboards.sort( (a, b) => @@ -67,7 +89,12 @@ function DashboardsList(): JSX.Element { useEffect(() => { sortDashboardsByCreatedAt(dashboardListResponse); - }, [dashboardListResponse]); + const filteredDashboards = filterDashboard( + searchString, + dashboardListResponse, + ); + setDashboards(filteredDashboards || []); + }, [dashboardListResponse, searchString]); const [newDashboardState, setNewDashboardState] = useState({ loading: false, @@ -89,6 +116,10 @@ function DashboardsList(): JSX.Element { return prev - next; }, render: DateComponent, + sortOrder: + sortedInfo.columnKey === DynamicColumnsKey.CreatedAt + ? sortedInfo.order + : null, }, { title: 'Created By', @@ -108,6 +139,10 @@ function DashboardsList(): JSX.Element { return prev - next; }, render: DateComponent, + sortOrder: + sortedInfo.columnKey === DynamicColumnsKey.UpdatedAt + ? sortedInfo.order + : null, }, { title: 'Last Updated By', @@ -249,28 +284,13 @@ function DashboardsList(): JSX.Element { return menuItems; }, [createNewDashboard, isDashboardListLoading, onNewDashboardHandler, t]); - const searchArrayOfObjects = (searchValue: string): any[] => { - // Convert the searchValue to lowercase for case-insensitive search - const searchValueLowerCase = searchValue.toLowerCase(); - - // Use the filter method to find matching objects - return dashboardListResponse.filter((item: any) => { - // Convert each property value to lowercase for case-insensitive search - const itemValues = Object.values(item?.data).map((value: any) => - value.toString().toLowerCase(), - ); - - // Check if any property value contains the searchValue - return itemValues.some((value) => value.includes(searchValueLowerCase)); - }); - }; - const handleSearch = useDebouncedFn((event: unknown): void => { setIsFilteringDashboards(true); const searchText = (event as React.BaseSyntheticEvent)?.target?.value || ''; - const filteredDashboards = searchArrayOfObjects(searchText); + const filteredDashboards = filterDashboard(searchText, dashboardListResponse); setDashboards(filteredDashboards); setIsFilteringDashboards(false); + setSearchString(searchText); }, 500); const GetHeader = useMemo( @@ -283,6 +303,7 @@ function DashboardsList(): JSX.Element { onChange={handleSearch} loading={isFilteringDashboards} style={{ marginBottom: 16, marginTop: 16 }} + defaultValue={searchString} /> @@ -328,6 +349,7 @@ function DashboardsList(): JSX.Element { newDashboardState.loading, newDashboardState.error, getText, + searchString, ], ); @@ -349,12 +371,14 @@ function DashboardsList(): JSX.Element { pageSize: 10, defaultPageSize: 10, total: data?.length || 0, + defaultCurrent: Number(paginationParam) || 1, }} showHeader bordered sticky loading={isDashboardListLoading} dataSource={data} + onChange={handleChange} showSorterTooltip /> diff --git a/frontend/src/container/ListOfDashboard/utils.ts b/frontend/src/container/ListOfDashboard/utils.ts new file mode 100644 index 0000000000..199b356581 --- /dev/null +++ b/frontend/src/container/ListOfDashboard/utils.ts @@ -0,0 +1,20 @@ +import { Dashboard } from 'types/api/dashboard/getAll'; + +export const filterDashboard = ( + searchValue: string, + dashboardList: Dashboard[], +): any[] => { + // Convert the searchValue to lowercase for case-insensitive search + const searchValueLowerCase = searchValue.toLowerCase(); + + // Use the filter method to find matching objects + return dashboardList.filter((item: Dashboard) => { + // Convert each property value to lowercase for case-insensitive search + const itemValues = Object.values(item?.data).map((value) => + value.toString().toLowerCase(), + ); + + // Check if any property value contains the searchValue + return itemValues.some((value) => value.includes(searchValueLowerCase)); + }); +};