From 76deae2f3cc6c67df42ed18e552bb0aa246ffbb6 Mon Sep 17 00:00:00 2001 From: Gavsto Date: Sat, 29 Jan 2022 16:11:54 +0000 Subject: [PATCH 1/5] NEW FEATURE: Added default page size for tables Needs reviewing by an adult lol --- src/components/tables/CippTable.js | 5 +-- src/components/utilities/CippProfile.js | 5 ++- src/components/utilities/PageSizeSwitcher.js | 33 ++++++++++++++++++++ src/components/utilities/index.js | 2 ++ src/store/features/app.js | 6 ++++ 5 files changed, 48 insertions(+), 3 deletions(-) create mode 100644 src/components/utilities/PageSizeSwitcher.js diff --git a/src/components/tables/CippTable.js b/src/components/tables/CippTable.js index cbd703ecb435..85bdd0c8847b 100644 --- a/src/components/tables/CippTable.js +++ b/src/components/tables/CippTable.js @@ -1,4 +1,5 @@ import React from 'react' +import { useSelector } from 'react-redux' import { ExportCsvButton, ExportPDFButton } from 'src/components/buttons' import { CSpinner, CFormInput } from '@coreui/react' import DataTable, { createTheme } from 'react-data-table-component' @@ -180,7 +181,7 @@ export default function CippTable({ disableCSVExport, actions, ]) - + const tablePageSize = useSelector((state) => state.app.tablePageSize) return (
{!isFetching && error && Error loading data} @@ -209,7 +210,7 @@ export default function CippTable({ defaultSortAsc defaultSortFieldId={1} sortFunction={customSort} - paginationPerPage={25} + paginationPerPage={tablePageSize} progressPending={isFetching} progressComponent={} paginationRowsPerPageOptions={[25, 50, 100, 200, 500]} diff --git a/src/components/utilities/CippProfile.js b/src/components/utilities/CippProfile.js index 5d13d36deeab..93e777561359 100644 --- a/src/components/utilities/CippProfile.js +++ b/src/components/utilities/CippProfile.js @@ -12,7 +12,7 @@ import { } from '@coreui/react' import avatar0 from 'src/assets/images/avatars/0.jpg' import { useLoadClientPrincipalQuery } from 'src/store/api/auth' -import { ThemeSwitcher, UsageLocation } from 'src/components/utilities' +import { ThemeSwitcher, UsageLocation, PageSizeSwitcher } from 'src/components/utilities' const CippProfile = () => { const { data: profile, isFetching, isLoading } = useLoadClientPrincipalQuery() @@ -50,6 +50,9 @@ const CippProfile = () => { + + +

diff --git a/src/components/utilities/PageSizeSwitcher.js b/src/components/utilities/PageSizeSwitcher.js new file mode 100644 index 000000000000..f6060b19b9a5 --- /dev/null +++ b/src/components/utilities/PageSizeSwitcher.js @@ -0,0 +1,33 @@ +import React from 'react' +import { CButtonGroup, CButton, CCard, CCardHeader } from '@coreui/react' +import { useDispatch, useSelector } from 'react-redux' +import { setCurrentPageSize } from 'src/store/features/app' + +const PageSizeSwitcher = () => { + const dispatch = useDispatch() + const pageSizes = useSelector((state) => state.app.pageSizes) + const currentTablePageSize = useSelector((state) => state.app.tablePageSize) + + const SwitchPageSize = (t) => { + dispatch(setCurrentPageSize({ pageSize: t })) + } + + return ( + + Select Default Page Size + + {pageSizes.map((t, index) => ( + SwitchPageSize(t)} + color={t === currentTablePageSize ? 'primary' : 'secondary'} + key={index} + > + {t} + + ))} + + + ) +} + +export default PageSizeSwitcher diff --git a/src/components/utilities/index.js b/src/components/utilities/index.js index 37e4948d05cf..c56c4bac84e0 100644 --- a/src/components/utilities/index.js +++ b/src/components/utilities/index.js @@ -12,6 +12,7 @@ import StatusIcon from 'src/components/utilities/StatusIcon' import TenantSelector from 'src/components/utilities/TenantSelector' import TenantSelectorMultiple from 'src/components/utilities/TenantSelectorMultiple' import ThemeSwitcher from 'src/components/utilities/ThemeSwitcher' +import PageSizeSwitcher from 'src/components/utilities/PageSizeSwitcher' import Toasts from 'src/components/utilities/Toasts' import UsageLocation from 'src/components/utilities/UsageLocation' @@ -33,6 +34,7 @@ export { TenantSelector, TenantSelectorMultiple, ThemeSwitcher, + PageSizeSwitcher, Toasts, UsageLocation, } diff --git a/src/store/features/app.js b/src/store/features/app.js index 8b437c41816f..a9c3ba068ce8 100644 --- a/src/store/features/app.js +++ b/src/store/features/app.js @@ -8,6 +8,8 @@ const initialState = { currentTenant: {}, themes: ['default', 'cyberdrain', 'impact'], currentTheme: 'default', + tablePageSize: 25, + pageSizes: [25, 50, 100, 200, 500], } export const appSlice = createSlice({ @@ -26,6 +28,9 @@ export const appSlice = createSlice({ setCurrentTheme: (state, action) => { state.currentTheme = action.payload?.theme }, + setCurrentPageSize: (state, action) => { + state.tablePageSize = action.payload?.pageSize + }, setSidebarVisible: (state, action) => { state.sidebarShow = action.payload?.visible }, @@ -39,6 +44,7 @@ export const { toggleSidebarShow, toggleSidebarUnfoldable, setCurrentTenant, + setCurrentPageSize, setCurrentTheme, setSidebarVisible, setDefaultusageLocation, From c1976e515d64d24dc7d496bf4ea41caa1fe8836e Mon Sep 17 00:00:00 2001 From: Gavin Stone Date: Sat, 29 Jan 2022 16:17:32 +0000 Subject: [PATCH 2/5] Update src/components/utilities/PageSizeSwitcher.js Co-authored-by: Mikey O'Toole --- src/components/utilities/PageSizeSwitcher.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/utilities/PageSizeSwitcher.js b/src/components/utilities/PageSizeSwitcher.js index f6060b19b9a5..623a7504226b 100644 --- a/src/components/utilities/PageSizeSwitcher.js +++ b/src/components/utilities/PageSizeSwitcher.js @@ -8,8 +8,8 @@ const PageSizeSwitcher = () => { const pageSizes = useSelector((state) => state.app.pageSizes) const currentTablePageSize = useSelector((state) => state.app.tablePageSize) - const SwitchPageSize = (t) => { - dispatch(setCurrentPageSize({ pageSize: t })) + const SwitchPageSize = (targetTablePageSize) => { + dispatch(setCurrentPageSize({ pageSize: targetTablePageSize})) } return ( From 0c11a183fe1a75b93c21c709eab77f22c9b865f7 Mon Sep 17 00:00:00 2001 From: Gavin Stone Date: Sat, 29 Jan 2022 16:18:07 +0000 Subject: [PATCH 3/5] Update src/components/utilities/PageSizeSwitcher.js Co-authored-by: Mikey O'Toole --- src/components/utilities/PageSizeSwitcher.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/utilities/PageSizeSwitcher.js b/src/components/utilities/PageSizeSwitcher.js index 623a7504226b..47260869ff1b 100644 --- a/src/components/utilities/PageSizeSwitcher.js +++ b/src/components/utilities/PageSizeSwitcher.js @@ -16,10 +16,11 @@ const PageSizeSwitcher = () => { Select Default Page Size - {pageSizes.map((t, index) => ( + {pageSizes.map((tablePageSize, index) => ( SwitchPageSize(t)} - color={t === currentTablePageSize ? 'primary' : 'secondary'} + onClick={() => SwitchPageSize(tablePageSize)} + active={tablePageSize === currentTablePageSize ? true : false} + color="secondary" key={index} > {t} From b8c7e6d034b3aaead3fd7239b9d82e5c68e0788f Mon Sep 17 00:00:00 2001 From: Gavin Stone Date: Sat, 29 Jan 2022 16:25:05 +0000 Subject: [PATCH 4/5] Update src/components/utilities/PageSizeSwitcher.js Co-authored-by: Mikey O'Toole --- src/components/utilities/PageSizeSwitcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/utilities/PageSizeSwitcher.js b/src/components/utilities/PageSizeSwitcher.js index 47260869ff1b..6e587ab5a686 100644 --- a/src/components/utilities/PageSizeSwitcher.js +++ b/src/components/utilities/PageSizeSwitcher.js @@ -23,7 +23,7 @@ const PageSizeSwitcher = () => { color="secondary" key={index} > - {t} + {tablePageSize} ))} From 1fc4b5a2f74fe4268900cefe7123808b47189757 Mon Sep 17 00:00:00 2001 From: Gavin Stone Date: Sat, 29 Jan 2022 16:25:11 +0000 Subject: [PATCH 5/5] Update src/components/utilities/PageSizeSwitcher.js Co-authored-by: Mikey O'Toole --- src/components/utilities/PageSizeSwitcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/utilities/PageSizeSwitcher.js b/src/components/utilities/PageSizeSwitcher.js index 6e587ab5a686..f3d10641e81b 100644 --- a/src/components/utilities/PageSizeSwitcher.js +++ b/src/components/utilities/PageSizeSwitcher.js @@ -9,7 +9,7 @@ const PageSizeSwitcher = () => { const currentTablePageSize = useSelector((state) => state.app.tablePageSize) const SwitchPageSize = (targetTablePageSize) => { - dispatch(setCurrentPageSize({ pageSize: targetTablePageSize})) + dispatch(setCurrentPageSize({ pageSize: targetTablePageSize })) } return (