Skip to content

Commit

Permalink
pagination + ui fix + RestController hot
Browse files Browse the repository at this point in the history
  • Loading branch information
@adityadeshlahre
adityadeshlahre committed Jun 13, 2024
1 parent 8b17536 commit 739ca49
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 82 deletions.
8 changes: 4 additions & 4 deletions frontend/src/components/admin/OrganizationManagament/AddOrganization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import PageBreadCrumb from "../../common/PageBreadCrumb.js";

let breadcrumbs = [
{ label: "home.label", link: "/" },
// { label: "breadcrums.admin.managment", link: "/MasterListsPage" },
{ label: "breadcrums.admin.managment", link: "/MasterListsPage" },
];

function AddOrganization() {
Expand Down Expand Up @@ -170,9 +170,9 @@ function AddOrganization() {
}),
kind: NotificationKinds.success,
});
// setTimeout(() => {
// window.location.reload();
// }, 2000);
setTimeout(() => {
window.location.reload();
}, 2000);
}

const renderCell = (cell, row) => {
Expand Down
47 changes: 32 additions & 15 deletions frontend/src/components/admin/OrganizationManagament/ModifyOrganization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ import {
} from "@carbon/react";
import {
getFromOpenElisServer,
postToOpenElisServer,
postToOpenElisServerFormData,
postToOpenElisServerFullResponse,
postToOpenElisServerJsonResponse,
} from "../../utils/Utils.js";
import { NotificationContext } from "../../layout/Layout.js";
Expand All @@ -37,7 +40,7 @@ import PageBreadCrumb from "../../common/PageBreadCrumb.js";

let breadcrumbs = [
{ label: "home.label", link: "/" },
// { label: "breadcrums.admin.managment", link: "/MasterListsPage" },
{ label: "breadcrums.admin.managment", link: "/MasterListsPage" },
];

function ModifyOrganization() {
Expand Down Expand Up @@ -148,9 +151,9 @@ function ModifyOrganization() {
}),
kind: NotificationKinds.success,
});
// setTimeout(() => {
// window.location.reload();
// }, 2000);
setTimeout(() => {
window.location.reload();
}, 2000);
}

useEffect(() => {
Expand All @@ -166,8 +169,8 @@ function ModifyOrganization() {
(item) => {
return {
id: item.id,
name: item.name || "",
description: item.description || "",
name: item.name,
description: item.description,
};
},
);
Expand All @@ -178,19 +181,33 @@ function ModifyOrganization() {

const organizationsManagementIdInfo = {
id: typeOfActivity.id,
organizationName: typeOfActivity.organizationName || "",
shortName: typeOfActivity.shortName || "",
isActive: typeOfActivity.isActive || "",
internetAddress: typeOfActivity.internetAddress || "",
selectedTypes: typeOfActivity.selectedTypes || [],
organizationName: typeOfActivity.organizationName,
shortName: typeOfActivity.shortName,
isActive: typeOfActivity.isActive,
internetAddress: typeOfActivity.internetAddress,
selectedTypes: typeOfActivity.selectedTypes,
};

const organizationsManagementIdInfoPost = {
departmentList: typeOfActivity.departmentList,
orgTypes: typeOfActivity.orgTypes,
id: typeOfActivity.id,
organizationName: typeOfActivity.organizationName || "",
shortName: typeOfActivity.shortName || "",
isActive: typeOfActivity.isActive || "",
internetAddress: typeOfActivity.internetAddress || "",
organizationName: typeOfActivity.organizationName,
shortName: typeOfActivity.shortName,
isActive: typeOfActivity.isActive,
lastupdated: typeOfActivity.lastupdated,
commune: typeOfActivity.commune,
village: typeOfActivity.village,
department: typeOfActivity.department,
formName: typeOfActivity.formName,
formMethod: typeOfActivity.formMethod,
cancelAction: typeOfActivity.cancelAction,
submitOnCancel: typeOfActivity.submitOnCancel,
cancelMethod: typeOfActivity.cancelMethod,
mlsSentinelLabFlag: typeOfActivity.mlsSentinelLabFlag,
parentOrgName: typeOfActivity.parentOrgName,
state: typeOfActivity.state,
internetAddress: typeOfActivity.internetAddress,
};
setOrgInfo(organizationsManagementIdInfo);
setOrgInfoPost(organizationsManagementIdInfoPost);
Expand Down
146 changes: 102 additions & 44 deletions frontend/src/components/admin/OrganizationManagament/OrganizationManagament.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,11 @@ import {
} from "../../common/CustomNotification.js";
import { FormattedMessage, injectIntl, useIntl } from "react-intl";
import PageBreadCrumb from "../../common/PageBreadCrumb.js";
import AddOrganization from "./AddOrganization.js";
import ModifyOrganization from "./ModifyOrganization.js";
import { ArrowLeft, ArrowRight } from "@carbon/icons-react";

let breadcrumbs = [
{ label: "home.label", link: "/" },
// { label: "breadcrums.admin.managment", link: "/MasterListsPage" },
{ label: "breadcrums.admin.managment", link: "/MasterListsPage" },
];

function OrganizationManagament() {
Expand All @@ -50,17 +49,21 @@ function OrganizationManagament() {

const componentMounted = useRef(false);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(5);
const [pageSize, setPageSize] = useState(10);
const [deactivateButton, setDeactivateButton] = useState(true);
const [modifyButton, setModifyButton] = useState(true);
const [selectedRowIds, setSelectedRowIds] = useState([]);
const [selectedRowIdsPost, setSelectedRowIdsPost] = useState();
const [selectedRowIdsPost, setSelectedRowIdsPost] = useState([]);
const [isEveryRowIsChecked, setIsEveryRowIsChecked] = useState(false);
const [rowsIsPartiallyChecked, setRowsIsPartiallyChecked] = useState(false);
const [loading, setLoading] = useState(true);
const [isSearching, setIsSearching] = useState(false);
const [panelSearchTerm, setPanelSearchTerm] = useState("");
const [startingRecNo, setStartingRecNo] = useState(21);
const [pagination, setPagination] = useState(null);
const [totalRecordCount, setTotalRecordCount] = useState("");
const [startingRecNo, setStartingRecNo] = useState(20);
const [fromRecordCount, setFromRecordCount] = useState("");
const [toRecordCount, setToRecordCount] = useState("");
const [paging, setPaging] = useState(1);
const [
searchedOrganizationManagamentList,
Expand All @@ -78,13 +81,23 @@ function OrganizationManagament() {
function deleteDeactivateOrganizationManagament(event) {
event.preventDefault();
setLoading(true);
postToOpenElisServerJsonResponse(
postToOpenElisServer(
`/rest/DeleteOrganization?ID=${selectedRowIds.join(",")}&startingRecNo=1`,
JSON.stringify(selectedRowIdsPost),
deleteDeactivateOrganizationManagamentCallback(),
);
}

const handleNextPage = () => {
setPaging((pager) => Math.max(pager, 2));
setStartingRecNo(fromRecordCount);
};

const handlePreviousPage = () => {
setPaging((pager) => Math.max(pager - 1, 1));
setStartingRecNo(Math.max(fromRecordCount, 1));
};

useEffect(() => {
const selectedIDsObject = {
selectedIDs: selectedRowIds,
Expand All @@ -105,9 +118,9 @@ function OrganizationManagament() {
}),
kind: NotificationKinds.success,
});
// setTimeout(() => {
// window.location.reload();
// }, 2000);
setTimeout(() => {
window.location.reload();
}, 2000);
}

const handlePageChange = ({ page, pageSize }) => {
Expand Down Expand Up @@ -135,7 +148,7 @@ function OrganizationManagament() {
componentMounted.current = false;
setLoading(false);
};
}, []);
}, [paging, startingRecNo]);

const handleSearchedProviderMenuList = (res) => {
if (!res) {
Expand All @@ -147,13 +160,25 @@ function OrganizationManagament() {

useEffect(() => {
getFromOpenElisServer(
`/rest/SearchOrganizationMenu?search=Y&startingRecNo=1&searchString=${panelSearchTerm}`,
`/rest/SearchOrganizationMenu?search=Y&startingRecNo=${startingRecNo}&searchString=${panelSearchTerm}`,
handleSearchedProviderMenuList,
);
}, [panelSearchTerm]);

useEffect(() => {
if (organizationsManagmentList) {
const pagination = {
totalRecordCount:
organizationsManagmentList.modelMap.form.totalRecordCount,
fromRecordCount:
organizationsManagmentList.modelMap.form.fromRecordCount,
toRecordCount: organizationsManagmentList.modelMap.form.toRecordCount,
};
setPagination(pagination);
setFromRecordCount(pagination.fromRecordCount);
setToRecordCount(pagination.toRecordCount);
setTotalRecordCount(pagination.totalRecordCount);

const newOrganizationsManagementList =
organizationsManagmentList.modelMap.form.menuList.map((item) => {
return {
Expand Down Expand Up @@ -303,44 +328,70 @@ function OrganizationManagament() {
{notificationVisible === true ? <AlertDialog /> : ""}
<div className="adminPageContent">
<PageBreadCrumb breadcrumbs={breadcrumbs} />
<Grid>
<Grid fullWidth={true}>
<Column lg={16} md={8} sm={4}>
<Section>
<Heading>
<FormattedMessage id="organization.main.title" />
</Heading>
</Section>
</Column>
</Grid>
<br />
<Grid fullWidth={true}>
<Column lg={16} md={8} sm={4}>
<Section>
<Button
onClick={() => {
if (selectedRowIds.length === 1) {
const url = `/ModifyOrganization?ID=${selectedRowIds[0]}`;
window.location.href = url;
}
}}
disabled={modifyButton}
type="button"
>
<FormattedMessage id="admin.page.configuration.formEntryConfigMenu.button.modify" />
</Button>{" "}
<Button
onClick={deleteDeactivateOrganizationManagament}
disabled={deactivateButton}
type="button"
>
<FormattedMessage id="admin.page.configuration.formEntryConfigMenu.button.deactivate" />
</Button>{" "}
<Button
onClick={() => {
window.location.href = "/AddOrganization";
}}
type="button"
>
<FormattedMessage id="admin.page.configuration.formEntryConfigMenu.button.add" />
</Button>
</Section>
<br />
<Section>
<Column lg={16} md={8} sm={4}>
<Button
onClick={() => {
if (selectedRowIds.length === 1) {
const url = `/ModifyOrganization?ID=${selectedRowIds[0]}`;
window.location.href = url;
}
}}
disabled={modifyButton}
type="button"
>
<FormattedMessage id="admin.page.configuration.formEntryConfigMenu.button.modify" />
</Button>{" "}
<Button
onClick={deleteDeactivateOrganizationManagament}
disabled={deactivateButton}
type="button"
>
<FormattedMessage id="admin.page.configuration.formEntryConfigMenu.button.deactivate" />
</Button>{" "}
<Button
onClick={() => {
window.location.href = "/AddOrganization";
}}
type="button"
>
<FormattedMessage id="admin.page.configuration.formEntryConfigMenu.button.add" />
</Button>
</Column>
<h4>
<FormattedMessage id="showing" /> {fromRecordCount} -{" "}
{toRecordCount} <FormattedMessage id="of" /> {totalRecordCount}{" "}
</h4>
<Button
hasIconOnly={true}
disabled={paging === 1 && startingRecNo <= 21}
onClick={handlePreviousPage}
renderIcon={ArrowLeft}
iconDescription={intl.formatMessage({
id: "organization.previous",
})}
/>{" "}
<Button
hasIconOnly={true}
renderIcon={ArrowRight}
onClick={handleNextPage}
iconDescription={intl.formatMessage({
id: "organization.next",
})}
/>
</Section>
</Column>
</Grid>
Expand Down Expand Up @@ -548,7 +599,7 @@ function OrganizationManagament() {
onChange={handlePageChange}
page={page}
pageSize={pageSize}
pageSizes={[5, 10, 15, 20]}
pageSizes={[10, 20]}
totalItems={searchedOrganizationManagamentListShow.length}
forwardText={intl.formatMessage({
id: "pagination.forward",
Expand Down Expand Up @@ -769,7 +820,7 @@ function OrganizationManagament() {
onChange={handlePageChange}
page={page}
pageSize={pageSize}
pageSizes={[5, 10, 15, 20]}
pageSizes={[10, 20]}
totalItems={organizationsManagmentListShow.length}
forwardText={intl.formatMessage({
id: "pagination.forward",
Expand Down Expand Up @@ -836,6 +887,13 @@ function OrganizationManagament() {
>
selectedRowIdsPost
</button>
<button
onClick={() => {
console.error(pagination);
}}
>
pagination
</button>
</div>
</>
);
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/languages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1047,5 +1047,9 @@
"organization.streetAddress": "Street Address",
"organization.internetaddress": "Internet Address",
"organization.city": "City",
"organization.clia.number": "CLIA Number"
"organization.clia.number": "CLIA Number",
"organization.previous": "Previous Page",
"organization.next": "Next Page",
"showing": "Showing",
"of": "of"
}
6 changes: 5 additions & 1 deletion frontend/src/languages/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -957,5 +957,9 @@
"organization.streetAddress": "Adresse",
"organization.internetaddress": "Adresse Internet",
"organization.city": "Ville",
"organization.clia.number": "Numéro de CLIA"
"organization.clia.number": "Numéro de CLIA",
"organization.previous": "Page précédente",
"organization.next": "Page suivante",
"showing": "Affichage",
"of": "de"
}
Loading

0 comments on commit 739ca49

Please sign in to comment.