From 341fce5d9925fdaeefc5ab3f6783c65dd3e0caf7 Mon Sep 17 00:00:00 2001 From: Maciej Szewczyk Date: Tue, 27 Aug 2024 23:06:47 +0200 Subject: [PATCH 1/7] add permissions for PDU module frontend --- .../PeriodicDataUpdates.tsx | 18 +++++-- .../PeriodicDataUpdatesTemplatesList.tsx | 24 ++++++--- .../PeriodicDataUpdatesUploadDialog.tsx | 15 ++++-- frontend/src/config/permissions.ts | 6 +++ .../pages/population/HouseholdMembersPage.tsx | 49 +++++++++---------- 5 files changed, 73 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx index c66ff57650..87c9d85662 100644 --- a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx +++ b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx @@ -8,11 +8,20 @@ import { PeriodicDataUpdatesUpdatesList } from './PeriodicDataUpdatesUpdatesList import { useBaseUrl } from '@hooks/useBaseUrl'; import { PeriodDataUpdatesUploadDialog } from './PeriodicDataUpdatesUploadDialog'; import { useProgramContext } from 'src/programContext'; +import { usePermissions } from '@hooks/usePermissions'; +import { hasPermissions, PERMISSIONS } from 'src/config/permissions'; +import { ButtonTooltip } from '@components/core/ButtonTooltip'; export const PeriodicDataUpdates = (): React.ReactElement => { const [value, setValue] = useState(0); const { baseUrl } = useBaseUrl(); const { isSocialDctType } = useProgramContext(); + const permissions = usePermissions(); + + const canCreatePDUTemplate = hasPermissions( + PERMISSIONS.PDU_TEMPLATE_CREATE, + permissions, + ); const handleChange = ( _event: React.ChangeEvent, @@ -35,24 +44,25 @@ export const PeriodicDataUpdates = (): React.ReactElement => { onChange={handleChange} aria-label="periodic data updates tabs" > - - + + } buttons={ - + diff --git a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesTemplatesList.tsx b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesTemplatesList.tsx index 9266fbbd83..545a929c34 100644 --- a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesTemplatesList.tsx +++ b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesTemplatesList.tsx @@ -7,7 +7,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl'; import GetAppIcon from '@mui/icons-material/GetApp'; import UploadIcon from '@mui/icons-material/Upload'; import VisibilityIcon from '@mui/icons-material/Visibility'; -import { Button, IconButton, TableCell, Tooltip } from '@mui/material'; +import { IconButton, TableCell, Tooltip } from '@mui/material'; import { useQuery } from '@tanstack/react-query'; import { ReactElement, useEffect, useState } from 'react'; import { PeriodicDataUpdatesTemplateDetailsDialog } from './PeriodicDataUpdatesTemplateDetailsDialog'; @@ -19,6 +19,9 @@ import { StatusBox } from '@core/StatusBox'; import { periodicDataUpdateTemplateStatusToColor } from '@utils/utils'; import { useSnackbar } from '@hooks/useSnackBar'; import { useTranslation } from 'react-i18next'; +import { ButtonTooltip } from '@components/core/ButtonTooltip'; +import { usePermissions } from '@hooks/usePermissions'; +import { hasPermissions, PERMISSIONS } from 'src/config/permissions'; export interface Template { id: number; @@ -87,6 +90,7 @@ export const PeriodicDataUpdatesTemplatesList = (): ReactElement => { const { t } = useTranslation(); const { businessArea: businessAreaSlug, programId } = useBaseUrl(); const [isDialogOpen, setIsDialogOpen] = useState(false); + const permissions = usePermissions(); const [selectedTemplateId, setSelectedTemplateId] = useState( null, ); @@ -161,6 +165,11 @@ export const PeriodicDataUpdatesTemplatesList = (): ReactElement => { (template) => template.id === selectedTemplateId, ); + const canExportOrDownloadTemplate = hasPermissions( + PERMISSIONS.PDU_TEMPLATE_DOWNLOAD, + permissions, + ); + const renderTemplateRow = (row: Template): ReactElement => ( {row.id} @@ -194,28 +203,31 @@ export const PeriodicDataUpdatesTemplatesList = (): ReactElement => { } > - + ) : row.can_export ? ( - + ) : null} diff --git a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx index 5faf1769a5..8f8a57e013 100644 --- a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx +++ b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx @@ -14,6 +14,9 @@ import { LoadingButton } from '@core/LoadingButton'; import { useProgramContext } from 'src/programContext'; import { useUploadPeriodicDataUpdateTemplate } from './PeriodicDataUpdatesTemplatesListActions'; import { useBaseUrl } from '@hooks/useBaseUrl'; +import { usePermissions } from '@hooks/usePermissions'; +import { hasPermissions, PERMISSIONS } from 'src/config/permissions'; +import { ButtonTooltip } from '@components/core/ButtonTooltip'; const Error = styled.div` color: ${({ theme }) => theme.palette.error.dark}; @@ -31,12 +34,14 @@ const DisabledUploadIcon = styled(Publish)` export const PeriodDataUpdatesUploadDialog = (): React.ReactElement => { const { showMessage } = useSnackbar(); const { businessArea, programId } = useBaseUrl(); + const permissions = usePermissions(); const [open, setOpenImport] = useState(false); const [isLoading, setIsLoading] = useState(false); const [fileToImport, setFileToImport] = useState(null); const { isActiveProgram } = useProgramContext(); const { t } = useTranslation(); const { mutate, error } = useUploadPeriodicDataUpdateTemplate(); + const canPDUUpload = hasPermissions(PERMISSIONS.PDU_UPLOAD, permissions); const handleFileUpload = (): void => { if (fileToImport) { @@ -68,7 +73,9 @@ export const PeriodDataUpdatesUploadDialog = (): React.ReactElement => { // @ts-ignore if (error && error?.data?.error) { // @ts-ignore - errorMessage = {error?.data?.error}; + errorMessage = ( + {error?.data?.error} + ); } else if (error) { errorMessage = ( @@ -80,15 +87,15 @@ export const PeriodDataUpdatesUploadDialog = (): React.ReactElement => { return ( <> - + { isNewTemplateJustCreated ? 1 : 0, ); + const canViewPDUListAndDetails = hasPermissions( + PERMISSIONS.PDU_VIEW_LIST_AND_DETAILS, + permissions, + ); + + const canViewHouseholdMembersPage = + (PERMISSIONS.POPULATION_VIEW_INDIVIDUALS_LIST, permissions); + if (householdChoicesLoading || individualChoicesLoading) return ; if (!individualChoicesData || !householdChoicesData || permissions === null) return null; - if ( - !hasPermissions(PERMISSIONS.POPULATION_VIEW_INDIVIDUALS_LIST, permissions) - ) - return ; + if (!canViewHouseholdMembersPage) return ; return ( <> @@ -84,27 +89,21 @@ export const HouseholdMembersPage = (): React.ReactElement => { }} > - {!programHasPdu ? ( - - - - - - ) : ( - - )} + + + + + } /> From 1c7edd0e8f12855b91037f8e0a3e05aae754d9dc Mon Sep 17 00:00:00 2001 From: Maciej Szewczyk Date: Tue, 27 Aug 2024 23:13:19 +0200 Subject: [PATCH 2/7] display permission denied --- .../periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx | 2 -- .../src/containers/pages/population/HouseholdMembersPage.tsx | 4 +++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx index 8f8a57e013..15b6d1107f 100644 --- a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx +++ b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx @@ -5,8 +5,6 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import { DialogTitleWrapper } from '@containers/dialogs/DialogTitleWrapper'; -//TODO MS: display errors -// import { ImportErrors } from '@containers/tables/payments/VerificationRecordsTable/errors/ImportErrors'; import { useSnackbar } from '@hooks/useSnackBar'; import { DropzoneField } from '@core/DropzoneField'; diff --git a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx index c348ca5f18..758a8bef3f 100644 --- a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx +++ b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx @@ -135,8 +135,10 @@ export const HouseholdMembersPage = (): React.ReactElement => { /> - ) : ( + ) : canViewPDUListAndDetails ? ( + ) : ( + )} From fef8290f3e357adce3d6b489459305b3a1f1369a Mon Sep 17 00:00:00 2001 From: Maciej Szewczyk Date: Wed, 28 Aug 2024 12:35:37 +0200 Subject: [PATCH 3/7] fix build --- .../PeriodicDataUpdatesUploadDialog.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx index 15b6d1107f..374c00b4b7 100644 --- a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx +++ b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdatesUploadDialog.tsx @@ -68,13 +68,7 @@ export const PeriodDataUpdatesUploadDialog = (): React.ReactElement => { } }; let errorMessage = null; - // @ts-ignore - if (error && error?.data?.error) { - // @ts-ignore - errorMessage = ( - {error?.data?.error} - ); - } else if (error) { + if (error) { errorMessage = ( {t('Error uploading file:')} {error.message} From 882e1151124be40625c1ae59e3627377969db0ff Mon Sep 17 00:00:00 2001 From: Maciej Szewczyk Date: Wed, 28 Aug 2024 17:31:58 +0200 Subject: [PATCH 4/7] fix tooltip display if disabled --- .../pages/population/HouseholdMembersPage.tsx | 43 +++++++++++-------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx index 758a8bef3f..24c54f8744 100644 --- a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx +++ b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx @@ -66,8 +66,10 @@ export const HouseholdMembersPage = (): React.ReactElement => { permissions, ); - const canViewHouseholdMembersPage = - (PERMISSIONS.POPULATION_VIEW_INDIVIDUALS_LIST, permissions); + const canViewHouseholdMembersPage = hasPermissions( + PERMISSIONS.POPULATION_VIEW_INDIVIDUALS_LIST, + permissions, + ); if (householdChoicesLoading || individualChoicesLoading) return ; @@ -89,21 +91,28 @@ export const HouseholdMembersPage = (): React.ReactElement => { }} > - - - - - + {!programHasPdu || !canViewPDUListAndDetails ? ( + + + + + + ) : ( + + )} } /> From 9b5b2ab968fad373d5ffe864425dcef7647fbc48 Mon Sep 17 00:00:00 2001 From: Maciej Szewczyk Date: Wed, 28 Aug 2024 17:38:28 +0200 Subject: [PATCH 5/7] fix condition for tooltip --- .../src/containers/pages/population/HouseholdMembersPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx index 24c54f8744..e19bf4d3a9 100644 --- a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx +++ b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx @@ -94,7 +94,7 @@ export const HouseholdMembersPage = (): React.ReactElement => { {!programHasPdu || !canViewPDUListAndDetails ? ( Date: Wed, 28 Aug 2024 20:13:28 +0200 Subject: [PATCH 6/7] remove unused import --- .../src/components/periodicDataUpdates/PeriodicDataUpdates.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx index 87c9d85662..37c3d5a41d 100644 --- a/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx +++ b/frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx @@ -1,5 +1,5 @@ import { BaseSection } from '@components/core/BaseSection'; -import { Box, Tab, Tabs, Button, Fade } from '@mui/material'; +import { Box, Tab, Tabs, Fade } from '@mui/material'; import { useState } from 'react'; import { Link } from 'react-router-dom'; import AddIcon from '@mui/icons-material/Add'; From a1134cfb6ba5904c8f9734e6dad4dd7eb2f5da7e Mon Sep 17 00:00:00 2001 From: Maciej Szewczyk Date: Fri, 30 Aug 2024 13:15:42 +0200 Subject: [PATCH 7/7] update permission condition --- .../pages/population/HouseholdMembersPage.tsx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx index e19bf4d3a9..55502618bb 100644 --- a/frontend/src/containers/pages/population/HouseholdMembersPage.tsx +++ b/frontend/src/containers/pages/population/HouseholdMembersPage.tsx @@ -91,12 +91,27 @@ export const HouseholdMembersPage = (): React.ReactElement => { }} > - {!programHasPdu || !canViewPDUListAndDetails ? ( + {programHasPdu ? ( + canViewPDUListAndDetails ? ( + + ) : ( + + + + + + ) + ) : ( @@ -107,11 +122,6 @@ export const HouseholdMembersPage = (): React.ReactElement => { /> - ) : ( - )} }