Skip to content

Commit

Permalink
Merge pull request AOT-Technologies#2354 from Bonymol-aot/bugFix/FWF-…
Browse files Browse the repository at this point in the history 
…3945-pagination-issue

FWF-3945: [Bugfix] Resolved pagination issues in submission,draft,client tables
  • Loading branch information
@arun-s-aot
arun-s-aot authored Nov 18, 2024
2 parents c8cfa4a + 82fd311 commit d4b5f46
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 154 deletions.
60 changes: 15 additions & 45 deletions forms-flow-web/src/components/Application/ApplicationTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { CLIENT_EDIT_STATUS } from "../../constants/applicationConstants";
import { HelperServices } from "@formsflow/service";
import { Translation } from "react-i18next";
import ApplicationFilter from "./ApplicationFilter";
import { Dropdown } from "react-bootstrap";
import Pagination from "react-js-pagination";

import { useTranslation } from "react-i18next";
import userRoles from "../../constants/permissions";

Expand All @@ -22,13 +21,13 @@ import {
} from "../../actions/applicationActions";
import { push } from "connected-react-router";
import LoadingOverlay from "react-loading-overlay-ts";
import { TableFooter } from "@formsflow/components";

const ApplicationTable = () => {
const dispatch = useDispatch();
const [displayFilter, setDisplayFilter] = useState(false);
const searchParams = useSelector((state) => state.applications.searchParams);
const [filterParams, setFilterParams] = useState(searchParams);
const [pageLimit, setPageLimit] = useState(5);
const applications = useSelector(
(state) => state.applications.applicationsList
);
Expand Down Expand Up @@ -159,7 +158,6 @@ const ApplicationTable = () => {

const onSizePerPageChange = (limit) => {
dispatch(setApplicationLoading(true));
setPageLimit(limit);
dispatch(setCountPerpage(limit));
dispatch(setApplicationListActivePage(1));
};
Expand Down Expand Up @@ -314,47 +312,19 @@ const ApplicationTable = () => {
</table>

{applications.length ? (
<div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
<div className="d-flex align-items-center">
<span className="me-2"> {t("Rows per page")}</span>
<Dropdown size="sm">
<Dropdown.Toggle variant="light" id="dropdown-basic" data-testid="page-limit-dropdown-toggle">
{pageLimit}
</Dropdown.Toggle>
<Dropdown.Menu>
{pageOptions.map((option) => (
<Dropdown.Item
key={option.value}
type="button"
onClick={() => {
onSizePerPageChange(option.value);
}}
data-testid={`page-limit-dropdown-item-${option.value}`}
>
{option.text}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
<span className="ms-2">
{t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
{limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
{t("of")} {totalForms} {t("results")}
</span>
</div>
<div className="d-flex align-items-center">
<Pagination
activePage={pageNo}
itemsCountPerPage={limit}
totalItemsCount={totalForms}
pageRangeDisplayed={5}
itemClass="page-item"
linkClass="page-link"
onChange={handlePageChange}
/>
</div>
</div>
) : null}
<table className="table">
<tfoot>
<TableFooter
limit={limit}
activePage={pageNo}
totalCount={totalForms}
handlePageChange={handlePageChange}
onLimitChange={onSizePerPageChange}
pageOptions={pageOptions}
/>
</tfoot>
</table>
) : null}
</LoadingOverlay>
</>
);
Expand Down
66 changes: 17 additions & 49 deletions forms-flow-web/src/components/Draft/DraftTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { useDispatch, useSelector } from "react-redux";
import { MULTITENANCY_ENABLED } from "../../constants/constants";
import { HelperServices } from "@formsflow/service";
import { Translation } from "react-i18next";
import { Dropdown, DropdownButton } from "react-bootstrap";
import Pagination from "react-js-pagination";
import { push } from "connected-react-router";
import {
setCountPerpage,
Expand All @@ -19,17 +17,16 @@ import DraftOperations from "./DraftOperations";

import { useTranslation } from "react-i18next";
import LoadingOverlay from "react-loading-overlay-ts";
import { TableFooter } from "@formsflow/components";

const DraftTable = () => {
const dispatch = useDispatch();
const [displayFilter, setDisplayFilter] = useState(false);
const searchParams = useSelector((state) => state.draft.searchParams);
const [filterParams, setFilterParams] = useState(searchParams);
const [pageLimit, setPageLimit] = useState(5);
const drafts = useSelector((state) => state.draft.draftList);
const tenantKey = useSelector((state) => state.tenants?.tenantId);
const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
const userRoles = useSelector((state) => state.user.roles);
const pageNo = useSelector((state) => state.draft?.activePage);
const limit = useSelector((state) => state.draft?.countPerPage);
const totalForms = useSelector((state) => state.draft?.draftCount);
Expand Down Expand Up @@ -111,10 +108,9 @@ const DraftTable = () => {
dispatch(setDraftListActivePage(page));
};

const onSizePerPageChange = (limit) => {
const onLimitChange = (newLimit) => {
dispatch(setDraftListLoading(true));
setPageLimit(limit);
dispatch(setCountPerpage(limit));
dispatch(setCountPerpage(newLimit));
dispatch(setDraftListActivePage(1));
};

Expand Down Expand Up @@ -244,50 +240,22 @@ const DraftTable = () => {
</tr>}
</tbody>
</table>

</div>

{drafts.length ? <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
<div className="d-flex align-items-center">
<span className="me-2"> {t("Rows per page")}</span>
<Dropdown size="sm" data-testid="page-limit-dropdown">
<Dropdown.Toggle variant="light" id="dropdown-basic" data-testid="page-limit-dropdown-toggle">
{pageLimit}
</Dropdown.Toggle>
<Dropdown.Menu>
{pageOptions.map((option, index) => (
<Dropdown.Item
key={index}
type="button"
data-testid={`page-limit-dropdown-item-${option.value}`}
onClick={() => {
onSizePerPageChange(option.value);
}}
>
{option.text}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
<span className="ms-2">
{t("Showing")} {limit * pageNo - (limit - 1)} {t("to")}{" "}
{limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
{t("of")} {totalForms} {t("results")}
</span>
</div>

<div className="d-flex align-items-center">
<Pagination
activePage={pageNo}
itemsCountPerPage={limit}
totalItemsCount={totalForms}
pageRangeDisplayed={5}
itemClass="page-item"
linkClass="page-link"
onChange={handlePageChange}
/>
</div>
</div> : null}
{drafts.length ? (
<table className="table">
<tfoot>
<TableFooter
limit={limit}
activePage={pageNo}
totalCount={totalForms}
handlePageChange={handlePageChange}
onLimitChange={onLimitChange}
pageOptions={pageOptions}
/>
</tfoot>
</table>
) : null}
</LoadingOverlay>
</>
);
Expand Down
83 changes: 23 additions & 60 deletions forms-flow-web/src/components/Form/constants/ClientTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,44 @@ import React, { useState, useEffect } from "react";
import {
InputGroup,
FormControl,
Dropdown,
} from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { push } from "connected-react-router";
import Pagination from "react-js-pagination";
import LoadingOverlay from "react-loading-overlay-ts";
import {
setBPMFormLimit,
setBPMFormListPage,
setBPMFormListSort,
setBpmFormSearch,
} from "../../../actions/formActions";
import LoadingOverlay from "react-loading-overlay-ts";
import {
MULTITENANCY_ENABLED,
} from "../../../constants/constants";
import { useTranslation } from "react-i18next";
import { Translation } from "react-i18next";
import { sanitize } from "dompurify";
import userRoles from "../../../constants/permissions";
import userRoles from "../../../constants/permissions";
import { TableFooter } from "@formsflow/components";

function ClientTable() {
const { createDesigns } = userRoles();
const tenantKey = useSelector((state) => state.tenants?.tenantId);
const dispatch = useDispatch();
const { t } = useTranslation();
const bpmForms = useSelector((state) => state.bpmForms);
const formData = (() => bpmForms.forms)() || [];
const formData = bpmForms?.forms || [];
const pageNo = useSelector((state) => state.bpmForms.page);
const limit = useSelector((state) => state.bpmForms.limit);
const totalForms = useSelector((state) => state.bpmForms.totalForms);
const sortOrder = useSelector((state) => state.bpmForms.sortOrder);
const searchFormLoading = useSelector(
(state) => state.formCheckList.searchFormLoading
);
const [pageLimit, setPageLimit] = useState(5);
const [search, setSearch] = useState(useSelector((state) => state.bpmForms.searchText) || "");
const isAscending = sortOrder === "asc" ? true : false;

const searchText = useSelector((state) => state.bpmForms.searchText);
const [search, setSearch] = useState(searchText || "");

const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
const [openIndex, setOpenIndex] = useState(null);

Expand Down Expand Up @@ -74,7 +74,6 @@ function ClientTable() {
};

const submitNewForm = (formId) => {

dispatch(push(`${redirectUrl}form/${formId}`));
};

Expand All @@ -93,9 +92,8 @@ function ClientTable() {
dispatch(setBPMFormListPage(page));
};

const onSizePerPageChange = (limit) => {
setPageLimit(limit);
dispatch(setBPMFormLimit(limit));
const onSizePerPageChange = (newLimit) => {
dispatch(setBPMFormLimit(newLimit));
dispatch(setBPMFormListPage(1));
};

Expand All @@ -117,7 +115,6 @@ function ClientTable() {

const extractContent = (htmlContent) => {
const sanitizedHtml = sanitize(htmlContent);

const tempElement = document.createElement("div");
tempElement.innerHTML = sanitizedHtml;

Expand Down Expand Up @@ -289,54 +286,20 @@ function ClientTable() {
</LoadingOverlay>

{formData.length ? (
<div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
<div className="d-flex align-items-center">
<span className="me-2"> {t("Rows per page")}</span>
<Dropdown data-testid="page-limit-dropdown">
<Dropdown.Toggle
variant="light"
id="dropdown-basic"
data-testid="page-limit-dropdown-toggle"
>
{pageLimit}
</Dropdown.Toggle>

<Dropdown.Menu>
{pageOptions.map((option, index) => (
<Dropdown.Item
key={index}
type="button"
onClick={() => {
onSizePerPageChange(option.value);
}}
data-testid={`page-limit-dropdown-item-${option.value}`}
>
{option.text}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
<span className="ms-2">
{t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
{limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
{t("of")} {totalForms} {t("Results")}
</span>
</div>
<div className="d-flex align-items-center">
<Pagination
activePage={pageNo}
itemsCountPerPage={limit}
totalItemsCount={totalForms}
pageRangeDisplayed={5}
itemClass="page-item"
linkClass="page-link"
onChange={handlePageChange}
/>
</div>
</div>
) : (
""
)}
<table className="table">
<tfoot>
<TableFooter
limit={limit}
activePage={pageNo}
totalCount={totalForms}
handlePageChange={handlePageChange}
onLimitChange={onSizePerPageChange}
pageOptions={pageOptions}
/>
</tfoot>

</table>
) : null}
</>
);
}
Expand Down

0 comments on commit d4b5f46

Please sign in to comment.