Skip to content

Commit

Permalink
Merge pull request #344 from Bonymol-aot/FWF-3816-pgination-fixes
Browse files Browse the repository at this point in the history 
FWF-3816: [Bugfix] Added reusable pagination &  Removed react-bootstrap-table2-paginator
  • Loading branch information
@arun-s-aot
arun-s-aot authored Nov 20, 2024
2 parents 76cd527 + 3d9b6b0 commit 218597f
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 127 deletions.
21 changes: 2 additions & 19 deletions forms-flow-admin/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion forms-flow-admin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@
"i18next-browser-languagedetector": "^7.0.1",
"react-bootstrap": "^2.7.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-i18next": "^12.1.4",
"react-router-dom": "5.1.2",
"react-select": "^5.8.0",
Expand Down
65 changes: 18 additions & 47 deletions forms-flow-admin/src/components/dashboard/dashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import React from "react";
import { Button } from "react-bootstrap";
import BootstrapTable from "react-bootstrap-table-next";
import DropdownButton from "react-bootstrap/DropdownButton";
import Dropdown from "react-bootstrap/Dropdown";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import "react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css";
import paginationFactory from "react-bootstrap-table2-paginator";
import { toast } from "react-toastify";
import Loading from "../loading";
import { useParams } from "react-router-dom";
Expand All @@ -18,29 +14,9 @@ import {
fetchAuthorizations,
} from "../../services/dashboard";
import { Translation, useTranslation } from "react-i18next";
import { TableFooter } from "@formsflow/components";

const customDropUp = ({ options, currSizePerPage, onSizePerPageChange }) => {
return (
<DropdownButton
drop="up"
variant="secondary"
title={currSizePerPage}
style={{ display: "inline" }}
>
{options.map((option) => (
<Dropdown.Item
key={option.text}
type="button"
onClick={() => onSizePerPageChange(option.page)}
>
{option.text}
</Dropdown.Item>
))}
</DropdownButton>
);
};

export const InsightDashboard = React.memo((props: any) => {
const InsightDashboard = React.memo((props: any) => {
const { dashboards, groups, authorizations, setCount, authReceived } = props;

const isGroupUpdated = groups.length > 0;
Expand All @@ -55,6 +31,7 @@ export const InsightDashboard = React.memo((props: any) => {
const [show, setShow] = React.useState(false);
const [activePage, setActivePage] = React.useState(1);
const [err, setErr] = React.useState({});
const [limit, setLimit] = React.useState(5);
const [isLoading, setIsLoading] = React.useState(true);

React.useEffect(() => {
Expand Down Expand Up @@ -285,36 +262,17 @@ export const InsightDashboard = React.memo((props: any) => {
return list;
};

const customTotal = (from, to, size) => (
<span className="ms-2" role="main">
<Translation>{(t) => t("Showing")}</Translation> {from}{" "}
<Translation>{(t) => t("to")}</Translation> {to}{" "}
<Translation>{(t) => t("of")}</Translation> {size}{" "}
<Translation>{(t) => t("results")}</Translation>
</span>
);

const pagination = paginationFactory({
showTotal: true,
align: "center",
sizePerPageList: getpageList(),
page: activePage,
paginationTotalRenderer: customTotal,
onPageChange: (page) => setActivePage(page),
sizePerPageRenderer: customDropUp,
});

return (
<>
<div className="" role="definition">
<br />
<div>
{!isLoading ? (
<div>
<BootstrapTable
keyField="resourceId"
data={authDashBoardList}
columns={columns}
pagination={authDashBoardList.length > 0 ? pagination : false}
bordered={false}
wrapperClasses="table-container-admin mb-3 px-4"
rowStyle={{
Expand All @@ -324,6 +282,19 @@ export const InsightDashboard = React.memo((props: any) => {
noDataIndication={noData}
data-testid="admin-dashboard-table"
/>
<table className="table">
<tfoot>
<TableFooter
limit={limit}
activePage={activePage}
totalCount={authDashBoardList.length}
handlePageChange={(page) => setActivePage(page)}
onLimitChange={setLimit}
pageOptions={getpageList()}
/>
</tfoot>
</table>
</div>
) : (
<Loading />
)}
Expand All @@ -333,4 +304,4 @@ export const InsightDashboard = React.memo((props: any) => {
);
});

export default InsightDashboard;
export default InsightDashboard;
78 changes: 39 additions & 39 deletions forms-flow-admin/src/components/roles/roles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import BootstrapTable from "react-bootstrap-table-next";
import "./roles.scss";
import { useParams } from "react-router-dom";
import { Translation, useTranslation } from "react-i18next";
import paginationFactory from "react-bootstrap-table2-paginator";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import { fetchUsers } from "../../services/users";
Expand All @@ -27,6 +26,7 @@ import {
import { DEFAULT_ROLES } from "../../constants";

import {removingTenantId} from "../../utils/utils.js";
import { TableFooter } from "@formsflow/components";
const Roles = React.memo((props: any) => {
const { t } = useTranslation();
const { tenantId } = useParams();
Expand Down Expand Up @@ -593,31 +593,23 @@ const Roles = React.memo((props: any) => {
<Translation>{(t) => t("results")}</Translation>
</span>
);
const getpageList = () => {
const list = [
{
text: "5",
value: 5,
},
{
text: "25",
value: 25,
},
{
text: "50",
value: 50,
},
{
text: "100",
value: 100,
},
{
text: t("All"),
value: roles.length,
},
];
return list;
const getPageList = () => [
{ text: '5', value: 5 },
{ text: '25', value: 25 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
{ text: 'All', value: roles.length },
];
const paginatedRoles = roles.slice(
(activePage - 1) * sizePerPage,
activePage * sizePerPage
);

const handlePageChange = (page: number) => {
setActivePage(page);
};


const customDropUp = ({ options, currSizePerPage, onSizePerPageChange }) => {
return (
<DropdownButton
Expand All @@ -638,17 +630,11 @@ const Roles = React.memo((props: any) => {
</DropdownButton>
);
};
const pagination = paginationFactory({
showTotal: true,
align: "center",
className: "d-flex",
sizePerPageList: getpageList(),
page: activePage,
sizePerPage: sizePerPage,
paginationTotalRenderer: customTotal,
onPageChange: (page) => setActivePage(page),
sizePerPageRenderer: customDropUp,
});

const handleLimitChange = (newLimit: number) => {
setSizePerPage(newLimit);
setActivePage(1);
};

const columns = [
{
Expand Down Expand Up @@ -773,11 +759,11 @@ const Roles = React.memo((props: any) => {
</Button>
</div>
{!props?.loading ? (
<div>
<BootstrapTable
keyField="id"
data={roles}
data={paginatedRoles}
columns={columns}
pagination={pagination}
bordered={false}
wrapperClasses="table-container px-4"
rowStyle={{
Expand All @@ -787,6 +773,20 @@ const Roles = React.memo((props: any) => {
noDataIndication={noData}
data-testid="admin-roles-table"
/>

<table className="table">
<tfoot>
<TableFooter
limit={sizePerPage}
activePage={activePage}
totalCount={roles.length}
handlePageChange={handlePageChange}
onLimitChange={handleLimitChange}
pageOptions={getPageList()}
/>
</tfoot>
</table>
</div>
) : (
<Loading />
)}
Expand All @@ -798,4 +798,4 @@ const Roles = React.memo((props: any) => {
);
});

export default Roles;
export default Roles;
Loading

0 comments on commit 218597f

Please sign in to comment.