diff --git a/.changeset/nervous-bulldogs-fix.md b/.changeset/nervous-bulldogs-fix.md new file mode 100644 index 0000000000000000000000000000000000000000..571184e4cecf147391c104063249123c9dd32ff5 --- /dev/null +++ b/.changeset/nervous-bulldogs-fix.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Re-added pagination to Department's agents list diff --git a/apps/meteor/client/components/GenericTable/hooks/usePagination.ts b/apps/meteor/client/components/GenericTable/hooks/usePagination.ts index 31276fd57ce262ad8d79abdd181d0462eb0e1bf0..803752fda45efd94ebb1123c78c16ba86e9b0286 100644 --- a/apps/meteor/client/components/GenericTable/hooks/usePagination.ts +++ b/apps/meteor/client/components/GenericTable/hooks/usePagination.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { useCurrent } from './useCurrent'; import { useItemsPerPage } from './useItemsPerPage'; @@ -18,6 +18,11 @@ export const usePagination = (): { const itemsPerPageLabel = useItemsPerPageLabel(); const showingResultsLabel = useShowingResultsLabel(); + // Reset to first page when itemsPerPage changes + useEffect(() => { + setCurrent(0); + }, [itemsPerPage, setCurrent]); + return useMemo( () => ({ itemsPerPage, diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx index 2f2f8d39e99502c0c77da5793a6faa41ac165f28..c4e4c7acb7c662e6c93f5e18d5d0f2b3e6313169 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx @@ -1,9 +1,11 @@ +import { Pagination } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import React from 'react'; +import React, { useMemo } from 'react'; import type { Control, UseFormRegister } from 'react-hook-form'; import { useWatch, useFieldArray } from 'react-hook-form'; import { GenericTable, GenericTableBody, GenericTableHeader, GenericTableHeaderCell } from '../../../../components/GenericTable'; +import { usePagination } from '../../../../components/GenericTable/hooks/usePagination'; import type { FormValues } from '../EditDepartment'; import AddAgent from './AddAgent'; import AgentRow from './AgentRow'; @@ -18,6 +20,9 @@ function DepartmentAgentsTable({ control, register }: DepartmentAgentsTableProps const { fields, append, remove } = useFieldArray({ control, name: 'agentList' }); const agentList = useWatch({ control, name: 'agentList' }); + const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination(); + const page = useMemo(() => fields.slice(current, current + itemsPerPage), [current, fields, itemsPerPage]); + return ( <> <AddAgent agentList={agentList} data-qa='DepartmentSelect-AgentsTable' onAdd={append} /> @@ -31,11 +36,21 @@ function DepartmentAgentsTable({ control, register }: DepartmentAgentsTableProps </GenericTableHeader> <GenericTableBody> - {fields.map((agent, index) => ( + {page.map((agent, index) => ( <AgentRow key={agent.id} index={index} agent={agent} register={register} onRemove={() => remove(index)} /> ))} </GenericTableBody> </GenericTable> + + <Pagination + divider + current={current} + itemsPerPage={itemsPerPage} + count={fields.length} + onSetItemsPerPage={onSetItemsPerPage} + onSetCurrent={onSetCurrent} + {...paginationProps} + /> </> ); }