From 370ee75775ce99430b7d7865fbdc56b89b7a49b7 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Thu, 15 Jun 2023 13:43:06 -0300
Subject: [PATCH] fix: re-added pagination to department's agents table
(#29523)
---
.changeset/nervous-bulldogs-fix.md | 5 +++++
.../GenericTable/hooks/usePagination.ts | 7 ++++++-
.../DepartmentAgentsTable.tsx | 19 +++++++++++++++++--
3 files changed, 28 insertions(+), 3 deletions(-)
create mode 100644 .changeset/nervous-bulldogs-fix.md
diff --git a/.changeset/nervous-bulldogs-fix.md b/.changeset/nervous-bulldogs-fix.md
new file mode 100644
index 00000000000..571184e4cec
--- /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 31276fd57ce..803752fda45 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 2f2f8d39e99..c4e4c7acb7c 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}
+ />
</>
);
}
--
GitLab