diff --git a/frontend/src/components/admin/OrganizationManagement/OrganizationManagement.js b/frontend/src/components/admin/OrganizationManagement/OrganizationManagement.js index 6ab8500426..78e1882ae3 100644 --- a/frontend/src/components/admin/OrganizationManagement/OrganizationManagement.js +++ b/frontend/src/components/admin/OrganizationManagement/OrganizationManagement.js @@ -1,6 +1,5 @@ import React, { useContext, useState, useEffect, useRef } from "react"; import { - Form, Heading, Button, Loading, @@ -35,6 +34,7 @@ import { import { FormattedMessage, injectIntl, useIntl } from "react-intl"; import PageBreadCrumb from "../../common/PageBreadCrumb.js"; import { ArrowLeft, ArrowRight } from "@carbon/icons-react"; +import ActionPaginationButtonType from "../../common/ActionPaginationButtonType.js"; let breadcrumbs = [ { label: "home.label", link: "/" }, @@ -171,17 +171,6 @@ function OrganizationManagament() { useEffect(() => { if (organizationsManagmentList) { - const pagination = { - totalRecordCount: - organizationsManagmentList.modelMap.form.totalRecordCount, - fromRecordCount: - organizationsManagmentList.modelMap.form.fromRecordCount, - toRecordCount: organizationsManagmentList.modelMap.form.toRecordCount, - }; - setFromRecordCount(pagination.fromRecordCount); - setToRecordCount(pagination.toRecordCount); - setTotalRecordCount(pagination.totalRecordCount); - const newOrganizationsManagementList = organizationsManagmentList.modelMap.form.menuList.map((item) => { return { @@ -200,6 +189,15 @@ function OrganizationManagament() { const newOrganizationsManagementListArray = Object.values( newOrganizationsManagementList, ); + setFromRecordCount( + organizationsManagmentList.modelMap.form.totalRecordCount, + ); + setToRecordCount( + organizationsManagmentList.modelMap.form.fromRecordCount, + ); + setTotalRecordCount( + organizationsManagmentList.modelMap.form.toRecordCount, + ); setOrganizationsManagmentListShow(newOrganizationsManagementListArray); } }, [organizationsManagmentList]); @@ -259,6 +257,8 @@ function OrganizationManagament() { useEffect(() => { if (selectedRowIds.length === 0) { setDeactivateButton(true); + } else { + setDeactivateButton(false); } }, [selectedRowIds]); @@ -311,65 +311,22 @@ function OrganizationManagament() {
- - -
- {" "} - {" "} - -
-
-
-

- {fromRecordCount} -{" "} - {toRecordCount} {totalRecordCount}{" "} -

-
- - + +
diff --git a/frontend/src/components/admin/ProviderMenu/ProviderMenu.js b/frontend/src/components/admin/ProviderMenu/ProviderMenu.js index 3f9ac8a85f..3244dd7879 100644 --- a/frontend/src/components/admin/ProviderMenu/ProviderMenu.js +++ b/frontend/src/components/admin/ProviderMenu/ProviderMenu.js @@ -1,6 +1,5 @@ import React, { useContext, useState, useEffect, useRef } from "react"; import { - Form, Heading, Button, Loading, @@ -37,10 +36,16 @@ import { } from "../../common/CustomNotification.js"; import { FormattedMessage, injectIntl, useIntl } from "react-intl"; import PageBreadCrumb from "../../common/PageBreadCrumb.js"; +import { ArrowLeft, ArrowRight } from "@carbon/icons-react"; +import ActionPaginationButtonType from "../../common/ActionPaginationButtonType.js"; let breadcrumbs = [ { label: "home.label", link: "/" }, - // { label: "breadcrums.admin.managment", link: "/MasterListsPage" }, + { label: "breadcrums.admin.managment", link: "/MasterListsPage" }, + { + label: "provider.browse.title", + link: "/MasterListsPage#providerMenu", + }, ]; function ProviderMenu() { const { notificationVisible, setNotificationVisible, addNotification } = @@ -51,21 +56,23 @@ function ProviderMenu() { const componentMounted = useRef(false); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(5); + const [pageSize, setPageSize] = useState(10); const [modifyButton, setModifyButton] = useState(true); + const [deactivateButton, setDeactivateButton] = useState(true); const [selectedRowIds, setSelectedRowIds] = 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 [searchedProviderMenuList, setSearchedProviderMenuList] = useState([]); const [serachedProviderMenuListShow, setSearchedProviderMenuListShow] = useState([]); - // const [startingRecNo, setStartingRecNo] = useState(1); - const [providerMenuList, setProviderMenuList] = useState([]); + const [startingRecNo, setStartingRecNo] = useState(21); + const [providerMenuList, setProviderMenuList] = useState({}); const [providerMenuListShow, setProviderMenuListShow] = useState([]); - + const [fromRecordCount, setFromRecordCount] = useState(""); + const [toRecordCount, setToRecordCount] = useState(""); + const [totalRecordCount, setTotalRecordCount] = useState(""); + const [paging, setPaging] = useState(1); const [isAddModalOpen, setIsAddModalOpen] = useState(false); const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false); const [currentProvider, setCurrentProvider] = useState(null); @@ -81,43 +88,6 @@ function ProviderMenu() { { id: "no", value: "No" }, ]; - async function displayStatus(res) { - setNotificationVisible(true); - if (res.status == "201" || res.status == "200") { - addNotification({ - kind: NotificationKinds.success, - title: intl.formatMessage({ id: "notification.title" }), - message: intl.formatMessage({ id: "save.config.success.msg" }), - }); - } else { - addNotification({ - kind: NotificationKinds.error, - title: intl.formatMessage({ id: "notification.title" }), - message: intl.formatMessage({ id: "server.error.msg" }), - }); - } - reloadConfiguration(); - } - - function deleteDeactivateProvider(event) { - event.preventDefault(); - setLoading(true); - postToOpenElisServerFullResponse( - `/DeleteProvider?ID=${selectedRowIds.join(",")}&startingRecNo=1`, - serachedProviderMenuListShow || providerMenuListShow, // need to check against the form of restController [mentor] - setLoading(false), - setTimeout(() => { - window.location.reload(); - }, 1000), - ); - } - - const handlePageChange = ({ page, pageSize }) => { - setPage(page); - setPageSize(pageSize); - setSelectedRowIds([]); - }; - const handleMenuItems = (res) => { if (!res) { setLoading(true); @@ -129,12 +99,15 @@ function ProviderMenu() { useEffect(() => { componentMounted.current = true; setLoading(true); - getFromOpenElisServer(`/rest/ProviderMenu`, handleMenuItems); + getFromOpenElisServer( + `/rest/ProviderMenu?paging=${paging}&startingRecNo=${startingRecNo}`, + handleMenuItems, + ); return () => { componentMounted.current = false; setLoading(false); }; - }, []); + }, [paging, startingRecNo]); const handleSearchedProviderMenuList = (res) => { if (res) { @@ -144,14 +117,14 @@ function ProviderMenu() { useEffect(() => { getFromOpenElisServer( - `/rest/SearchProviderMenu?search=Y&startingRecNo=1&searchString=${panelSearchTerm}`, + `/rest/SearchProviderMenu?search=Y&startingRecNo=${startingRecNo}&searchString=${panelSearchTerm}`, handleSearchedProviderMenuList, ); }, [panelSearchTerm]); useEffect(() => { - if (providerMenuList) { - const newProviderMenuList = providerMenuList.map((item) => { + if (providerMenuList.providers) { + const newProviderMenuList = providerMenuList.providers.map((item) => { return { id: item.id, fhirUuid: item.fhirUuid, @@ -162,90 +135,109 @@ function ProviderMenu() { fax: item.person.fax, }; }); + setFromRecordCount(providerMenuList.fromRecordCount); + setToRecordCount(providerMenuList.toRecordCount); + setTotalRecordCount(providerMenuList.totalRecordCount); setProviderMenuListShow(newProviderMenuList); } }, [providerMenuList]); useEffect(() => { - if (searchedProviderMenuList) { - const newProviderMenuList = searchedProviderMenuList.map((item) => { - return { - id: item.id, - lastName: item.person.lastName, - firstName: item.person.firstName, - active: item.active, - telephone: item.person.telephone, - fax: item.person.fax, - }; - }); + if (searchedProviderMenuList.providers) { + const newProviderMenuList = searchedProviderMenuList.providers.map( + (item) => { + return { + id: item.id, + lastName: item.person.lastName, + firstName: item.person.firstName, + active: item.active, + telephone: item.person.telephone, + fax: item.person.fax, + }; + }, + ); setSearchedProviderMenuListShow(newProviderMenuList); } }, [searchedProviderMenuList]); useEffect(() => { - let currentPageIds; - if (searchedProviderMenuList) { - currentPageIds = searchedProviderMenuList - .slice((page - 1) * pageSize, page * pageSize) - .filter((row) => !row.disabled) - .map((row) => row.id); + if (selectedRowIds.length === 1) { + setModifyButton(false); } else { - currentPageIds = providerMenuListShow - .slice((page - 1) * pageSize, page * pageSize) - .filter((row) => !row.disabled) - .map((row) => row.id); + setModifyButton(true); } + }, [selectedRowIds]); - const currentPageSelectedIds = selectedRowIds.filter((id) => - currentPageIds.includes(id), - ); - - setIsEveryRowIsChecked( - currentPageSelectedIds.length === currentPageIds.length, - ); + useEffect(() => { + if (isSearching && panelSearchTerm === "") { + setIsSearching(false); + setPaging(1); + setStartingRecNo(1); + } + }, [isSearching, panelSearchTerm]); - setRowsIsPartiallyChecked( - currentPageSelectedIds.length > 0 && - currentPageSelectedIds.length < currentPageIds.length, - ); - }, [ - selectedRowIds, - page, - pageSize, - providerMenuListShow, - serachedProviderMenuListShow, - ]); + useEffect(() => { + if (selectedRowIds.length === 0) { + setDeactivateButton(true); + } else { + setDeactivateButton(false); + } + }, [selectedRowIds]); - const renderCell = (cell, row) => { - if (cell.info.header === "select") { - return ( - { - setModifyButton(false); - if (selectedRowIds.includes(row.id)) { - setSelectedRowIds(selectedRowIds.filter((id) => id !== row.id)); - } else { - setSelectedRowIds([...selectedRowIds, row.id]); - } - }} - /> - ); - } else if (cell.info.header === "active") { - return {cell.value.toString()}; + async function displayStatus(res) { + setNotificationVisible(true); + if (res.status == "201" || res.status == "200") { + addNotification({ + kind: NotificationKinds.success, + title: intl.formatMessage({ id: "notification.title" }), + message: intl.formatMessage({ id: "save.config.success.msg" }), + }); } else { - return {cell.value}; + addNotification({ + kind: NotificationKinds.error, + title: intl.formatMessage({ id: "notification.title" }), + message: intl.formatMessage({ id: "server.error.msg" }), + }); } + reloadConfiguration(); + } + + function deleteDeactivateProvider(event) { + event.preventDefault(); + setLoading(true); + postToOpenElisServerFullResponse( + `/DeleteProvider?ID=${selectedRowIds.join(",")}&${startingRecNo}=1`, + serachedProviderMenuListShow || providerMenuListShow, + setLoading(false), + setTimeout(() => { + window.location.reload(); + }, 1000), + ); + } + + const handlePageChange = ({ page, pageSize }) => { + setPage(page); + setPageSize(pageSize); + setSelectedRowIds([]); + }; + + const handleNextPage = () => { + setPaging((pager) => Math.max(pager, 2)); + setStartingRecNo(fromRecordCount); + }; + + const handlePreviousPage = () => { + setPaging((pager) => Math.max(pager - 1, 1)); + setStartingRecNo(Math.max(fromRecordCount, 1)); }; const handlePanelSearchChange = (event) => { setIsSearching(true); + setPaging(1); + setStartingRecNo(1); const query = event.target.value.toLowerCase(); setPanelSearchTerm(query); + setSelectedRowIds([]); }; const openAddModal = () => { @@ -310,7 +302,7 @@ function ProviderMenu() { active: isActive.id === "yes", }; postToOpenElisServerFullResponse( - "/rest/Provider/FhirUuid?fhirUuid="+currentProvider.fhirUuid, + "/rest/Provider/FhirUuid?fhirUuid=" + currentProvider.fhirUuid, JSON.stringify(updatedProvider), displayStatus, ); @@ -319,6 +311,32 @@ function ProviderMenu() { window.location.reload(); }; + const renderCell = (cell, row) => { + if (cell.info.header === "select") { + return ( + { + setDeactivateButton(false); + if (selectedRowIds.includes(row.id)) { + setSelectedRowIds(selectedRowIds.filter((id) => id !== row.id)); + } else { + setSelectedRowIds([...selectedRowIds, row.id]); + } + }} + /> + ); + } else if (cell.info.header === "active") { + return {cell.value.toString()}; + } else { + return {cell.value}; + } + }; + if (!loading) { return ( <> @@ -332,37 +350,31 @@ function ProviderMenu() { {notificationVisible === true ? : ""}
- +
-
-
-
- - {" "} - {" "} - - -
-
- +
+ +
- // !row.disabled && - // selectedRowIds.includes(row.id), - // ).length === pageSize - // } - checked={isEveryRowIsChecked} - // indeterminate={ - // selectedRowIds.length > 0 && - // selectedRowIds.length < - // serachedProviderMenuListShow - // .slice((page - 1) * pageSize, page * pageSize) - // .filter((row) => !row.disabled).length - // } - indeterminate={rowsIsPartiallyChecked} + checked={ + selectedRowIds.length === pageSize && + serachedProviderMenuListShow + .slice( + (page - 1) * pageSize, + page * pageSize, + ) + .filter( + (row) => + !row.disabled && + selectedRowIds.includes(row.id), + ).length === pageSize + } + indeterminate={ + selectedRowIds.length > 0 && + selectedRowIds.length < + serachedProviderMenuListShow + .slice( + (page - 1) * pageSize, + page * pageSize, + ) + .filter((row) => !row.disabled).length + } onSelect={() => { - setModifyButton(false); + setDeactivateButton(false); const currentPageIds = serachedProviderMenuListShow .slice( @@ -635,7 +651,7 @@ function ProviderMenu() { onChange={handlePageChange} page={page} pageSize={pageSize} - pageSizes={[5, 10, 15, 20, 25, 30]} + pageSizes={[10, 20]} totalItems={serachedProviderMenuListShow.length} forwardText={intl.formatMessage({ id: "pagination.forward", @@ -740,27 +756,31 @@ function ProviderMenu() { - // !row.disabled && - // selectedRowIds.includes(row.id), - // ).length === pageSize - // } - checked={isEveryRowIsChecked} - // indeterminate={ - // selectedRowIds.length > 0 && - // selectedRowIds.length < - // providerMenuListShow - // .slice((page - 1) * pageSize, page * pageSize) - // .filter((row) => !row.disabled).length - // } - indeterminate={rowsIsPartiallyChecked} + checked={ + selectedRowIds.length === pageSize && + providerMenuListShow + .slice( + (page - 1) * pageSize, + page * pageSize, + ) + .filter( + (row) => + !row.disabled && + selectedRowIds.includes(row.id), + ).length === pageSize + } + indeterminate={ + selectedRowIds.length > 0 && + selectedRowIds.length < + providerMenuListShow + .slice( + (page - 1) * pageSize, + page * pageSize, + ) + .filter((row) => !row.disabled).length + } onSelect={() => { - setModifyButton(false); + setDeactivateButton(false); const currentPageIds = providerMenuListShow .slice( (page - 1) * pageSize, @@ -835,7 +855,7 @@ function ProviderMenu() { onChange={handlePageChange} page={page} pageSize={pageSize} - pageSizes={[5, 10, 15, 20, 25, 30]} + pageSizes={[10, 20]} totalItems={providerMenuListShow.length} forwardText={intl.formatMessage({ id: "pagination.forward", diff --git a/frontend/src/components/common/ActionPaginationButtonType.js b/frontend/src/components/common/ActionPaginationButtonType.js new file mode 100644 index 0000000000..9ee11d3f01 --- /dev/null +++ b/frontend/src/components/common/ActionPaginationButtonType.js @@ -0,0 +1,140 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { Button, Grid, Column, Section } from "@carbon/react"; +import { FormattedMessage, injectIntl, useIntl } from "react-intl"; +import { ArrowLeft, ArrowRight } from "@carbon/icons-react"; + +const ActionPaginationButtonType = ({ + selectedRowIds, + modifyButton, + deactivateButton, + deleteDeactivate, + openUpdateModal, + openAddModal, + handlePreviousPage, + handleNextPage, + fromRecordCount, + toRecordCount, + totalRecordCount, + addButtonRedirectLink, + modifyButtonRedirectLink, + id, + type, +}) => { + const intl = useIntl(); + + return ( + + +
+
+ {type === "type1" ? ( + <> + {" "} + {" "} + + + ) : ( + <> + {" "} + {" "} + + + )} +
+
+

+ {fromRecordCount} -{" "} + {toRecordCount} {totalRecordCount}{" "} +

+
+
+ + + ); +}; + +ActionPaginationButtonType.propTypes = { + selectedRowIds: PropTypes.array.isRequired, + modifyButton: PropTypes.bool.isRequired, + deactivateButton: PropTypes.bool.isRequired, + deleteDeactivate: PropTypes.func.isRequired, + handlePreviousPage: PropTypes.func.isRequired, + handleNextPage: PropTypes.func.isRequired, + fromRecordCount: PropTypes.string.isRequired, + toRecordCount: PropTypes.string.isRequired, + totalRecordCount: PropTypes.string.isRequired, + addButtonRedirectLink: PropTypes.string, + modifyButtonRedirectLink: PropTypes.string, + openUpdateModal: PropTypes.func, + openAddModal: PropTypes.func, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + type: PropTypes.oneOf(["type1", "type2"]).isRequired, +}; + +export default injectIntl(ActionPaginationButtonType); diff --git a/src/main/java/org/openelisglobal/provider/controller/rest/ProviderMenuRestController.java b/src/main/java/org/openelisglobal/provider/controller/rest/ProviderMenuRestController.java index 0af7f9c561..a223d2b0a0 100644 --- a/src/main/java/org/openelisglobal/provider/controller/rest/ProviderMenuRestController.java +++ b/src/main/java/org/openelisglobal/provider/controller/rest/ProviderMenuRestController.java @@ -26,8 +26,6 @@ import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; -// import org.springframework.web.servlet.ModelAndView; -// import org.springframework.web.servlet.mvc.support.RedirectAttributes; @RestController @RequestMapping("/rest") @@ -56,7 +54,7 @@ public void initBinder(WebDataBinder binder) { } @GetMapping(value = {"/ProviderMenu", "/SearchProviderMenu"}) - public ResponseEntity showProviderMenu(HttpServletRequest request) + public ResponseEntity showProviderMenu(HttpServletRequest request) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException { ProviderMenuForm form = new ProviderMenuForm(); @@ -67,13 +65,15 @@ public ResponseEntity showProviderMenu(HttpServletRequest request) // errors.reject("error.generic"); // redirectAttributes.addFlashAttribute(Constants.REQUEST_ERRORS, errors); // return findForward(forward, form); - return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(ERRORS); + return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } else { // request.setAttribute("menuDefinition", "ProviderMenuDefinition"); addFlashMsgsToRequest(request); // return findForward(forward, form); List providers = createMenuList(form, request); - return ResponseEntity.ok(providers); + // return ResponseEntity.ok(providers); + form.setProviders(providers); + return ResponseEntity.ok(form); } } diff --git a/src/main/java/org/openelisglobal/provider/form/ProviderMenuForm.java b/src/main/java/org/openelisglobal/provider/form/ProviderMenuForm.java index e2ef34de7a..c261b5819a 100644 --- a/src/main/java/org/openelisglobal/provider/form/ProviderMenuForm.java +++ b/src/main/java/org/openelisglobal/provider/form/ProviderMenuForm.java @@ -48,4 +48,14 @@ public String getSearchString() { public void setSearchString(String searchString) { this.searchString = searchString; } + + private List providers; + + public List getProviders() { + return providers; + } + + public void setProviders(List providers) { + this.providers = providers; + } }