Merge pull request #1340 from BLSQ/POLIO-1556_sub_activities_front_end

Polio-1556 sub activities front end
BLSQ · Jun 3, 2024 · 3b7c90e · 3b7c90e
2 parents de2990a + 18e383a
commit 3b7c90e
Show file tree

Hide file tree

Showing 35 changed files with 1,092 additions and 75 deletions.
diff --git a/hat/assets/js/apps/Iaso/domains/app/types.ts b/hat/assets/js/apps/Iaso/domains/app/types.ts
@@ -44,3 +44,13 @@ export type Plugin = {
 export type Plugins = {
     plugins: Plugin[];
 };
+
+export type PaginatedResponse<T> = {
+    hasPrevious?: boolean;
+    hasNext?: boolean;
+    count?: number;
+    page?: number;
+    pages?: number;
+    limit?: number;
+    results?: T[];
+};
diff --git a/hat/assets/js/apps/Iaso/domains/instances/components/LinkToInstance.tsx b/hat/assets/js/apps/Iaso/domains/instances/components/LinkToInstance.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { userHasOneOfPermissions } from '../../users/utils';
 import { baseUrls } from '../../../constants/urls';
-import * as Permission from '../../../utils/permissions';
 import { useCurrentUser } from '../../../utils/usersUtils';
 import MESSAGES from '../../assignments/messages';
 import { SUBMISSIONS, SUBMISSIONS_UPDATE } from '../../../utils/permissions';
@@ -42,5 +41,4 @@ export const LinkToInstance: FunctionComponent<Props> = ({
             iconSize={iconSize}
         />
     );
-            color={color}
 };
diff --git a/hat/assets/js/apps/Iaso/hooks/useTabs.tsx b/hat/assets/js/apps/Iaso/hooks/useTabs.tsx
@@ -9,9 +9,9 @@ import { useRedirectToReplace } from 'bluesquare-components';
 import { Optional } from '../types/utils';
 
 type UseTabsParams<T> = {
-    params: Record<string, Optional<string>>;
+    params?: Record<string, Optional<string>>;
     defaultTab: T;
-    baseUrl: string;
+    baseUrl?: string;
 };
 
 // T should be a union type of the possible string values for the Tabs
@@ -32,11 +32,13 @@ export const useTabs = <T,>({
 
     const handleChangeTab = useCallback(
         (_event, newTab) => {
-            const newParams = {
-                ...params,
-                tab: newTab,
-            };
-            redirectToReplace(baseUrl, newParams);
+            if (baseUrl && params) {
+                const newParams = {
+                    ...params,
+                    tab: newTab,
+                };
+                redirectToReplace(baseUrl, newParams);
+            }
             setTab(newTab);
         },
         [params, redirectToReplace, baseUrl],

diff --git a/hat/assets/js/apps/Iaso/utils/table.ts b/hat/assets/js/apps/Iaso/utils/table.ts
@@ -4,6 +4,8 @@ import {
     setTableSelection,
 } from 'bluesquare-components';
 import { Selection } from '../domains/orgUnits/types/selection';
+import { useObjectState } from '../hooks/useObjectState';
+import { PaginationParams } from '../types/general';
 
 type UseTableSelection<T> = {
     selection: Selection<T>;
@@ -74,3 +76,29 @@ export const useTableSelection = <T>(count?: number): UseTableSelection<T> => {
         };
     }, [handleSelectAll, handleTableSelection, handleUnselectAll, selection]);
 };
+
+const defaultInitialState: PaginationParams = {
+    order: '-updated_at',
+    page: '1',
+    pageSize: '10',
+};
+
+type TableState = {
+    params: PaginationParams;
+    // eslint-disable-next-line no-unused-vars
+    onTableParamsChange: (newParams: PaginationParams) => void;
+};
+export const useTableState = (initialState?: PaginationParams): TableState => {
+    const [tableState, setTableState] = useObjectState(
+        initialState ?? defaultInitialState,
+    );
+
+    const onTableParamsChange = useCallback(
+        (newParams: PaginationParams) => setTableState(newParams),
+        [setTableState],
+    );
+
+    return useMemo(() => {
+        return { params: tableState, onTableParamsChange };
+    }, [onTableParamsChange, tableState]);
+};
diff --git a/plugins/polio/js/src/constants/messages.js b/plugins/polio/js/src/constants/messages.js
@@ -2392,6 +2392,10 @@ const MESSAGES = defineMessages({
         defaultMessage: 'Go to campaign',
         id: 'iaso.polio.lqas.goToCampaign',
     },
+    subActivities: {
+        defaultMessage: 'Sub-activities',
+        id: 'iaso.polio.subActivities',
+    },
 });
 
 export default MESSAGES;
diff --git a/plugins/polio/js/src/constants/translations/en.json b/plugins/polio/js/src/constants/translations/en.json
@@ -194,12 +194,16 @@
     "iaso.polio.form.label.who_sent_budget": "WHO CO sent budget",
     "iaso.polio.form.pleaseCreateVrf": "Create VRF to unlock this tab",
     "iaso.polio.form.validator.error.endDateAfterNextStartDate": "End date can't be after or equal next round start date",
+    "iaso.polio.form.validator.error.endDateAfterRoundDate": "End date can't be after round end date",
+    "iaso.polio.form.validator.error.endDateBeforeRoundStart": "End date can't be before round start date",
     "iaso.polio.form.validator.error.endDateBeforeStartDate": "End date can't be before start date",
     "iaso.polio.form.validator.error.positiveInteger": "Please use a positive integer",
     "iaso.polio.form.validator.error.positiveNumber": "Please use a positive number",
     "iaso.polio.form.validator.error.positiveRangeInteger": "Please use a positive integer between 0 and 100",
     "iaso.polio.form.validator.error.startDateAfterEndDate": "Start date can't be after end date",
+    "iaso.polio.form.validator.error.startDateAfterRoundEnd": "Start date can't be after round end date",
     "iaso.polio.form.validator.error.startDateBeforePreviousEndDate": "Start date can't be before or equal previous round end date",
+    "iaso.polio.form.validator.error.startDateBeforeRoundDate": "Start date can't be before round start date",
     "iaso.polio.forms.deleteRound": "Delete round",
     "iaso.polio.forms.emptyEndDate": "Round {roundNumber} has no end date",
     "iaso.polio.forms.emptyStartDate": "Round {roundNumber} has no start date",
@@ -222,6 +226,10 @@
     "iaso.polio.label.addVaccine": "Add vaccine",
     "iaso.polio.label.addVar": "Add VAR",
     "iaso.polio.label.afroMapfilterInfo": "The latest campaign is the campaign with the round that started the most recently within the chosen time frame",
+    "iaso.polio.label.ageGroup": "Age group",
+    "iaso.polio.label.ageMax": "Age max",
+    "iaso.polio.label.ageMin": "Age min",
+    "iaso.polio.label.ageUnit": "Enter age in",
     "iaso.polio.label.all": "All",
     "iaso.polio.label.amount": "Amount",
     "iaso.polio.label.approval_ongoing": "Approval ongoing",
@@ -283,6 +291,7 @@
     "iaso.polio.label.countryPassing": "80% or more districts passed",
     "iaso.polio.label.create": "Create",
     "iaso.polio.label.createReasonForDelay": "Create reason for delay",
+    "iaso.polio.label.createSubActivity": "Create sub-activity",
     "iaso.polio.label.createVrf": "Create VRF",
     "iaso.polio.label.creation_email_send_at": "Email creation date",
     "iaso.polio.label.csv": "CSV",
@@ -310,6 +319,7 @@
     "iaso.polio.label.deleteIncidentWarning": "Are you sure you want to delete this incident report ?",
     "iaso.polio.label.deleteNopv2Auth": "Delete authorisation",
     "iaso.polio.label.deleteStockWarning": "Are you sure you want to delete this vaccine stock",
+    "iaso.polio.label.deleteSubActivity": "Delete sub-activity?",
     "iaso.polio.label.deleteVRF": "Delete VRF?",
     "iaso.polio.label.deleteVRFWarning": "This will also delete all attached pre-alerts and VARs",
     "iaso.polio.label.deleteWarning": "Are you sure you want to delete this campaign?",
@@ -341,6 +351,7 @@
     "iaso.polio.label.editGroupedCampaign": "Edit grouped campaign",
     "iaso.polio.label.editReasonForDelay": "Edit reason for delay",
     "iaso.polio.label.editRoundDates": "Edit round dates",
+    "iaso.polio.label.editSubActivity": "Edit sub-activity",
     "iaso.polio.label.emailListEmpty": "No email configured for this country",
     "iaso.polio.label.emailListLabel": "Configured emails :",
     "iaso.polio.label.emailListTooltip": "Change email list via country configuration",
@@ -435,6 +446,7 @@
     "iaso.polio.label.modifiedBy": "Modified by",
     "iaso.polio.label.moh": "MOH",
     "iaso.polio.label.MOH_DECISION": "Decision from MOH",
+    "iaso.polio.label.months": "Months",
     "iaso.polio.label.name": "Name",
     "iaso.polio.label.name_en": "English text",
     "iaso.polio.label.name_fr": "French text",
@@ -619,6 +631,7 @@
     "iaso.polio.label.who": "WHO",
     "iaso.polio.label.whoCompletedRecruitement": "WHO Completed Recruitment",
     "iaso.polio.label.whoToRecruit": "WHO To Recruit",
+    "iaso.polio.label.years": "Years",
     "iaso.polio.label.yes": "Yes",
     "iaso.polio.lqas.goToCampaign": "Go to campaign",
     "iaso.polio.lqasim.penultimate": "Penultimate",
@@ -678,6 +691,7 @@
     "iaso.polio.sendEmail.error": "Error sending notification email",
     "iaso.polio.sendEmail.success": "Notification email sent",
     "iaso.polio.showDeletedCampaigns": "Show deleted campaigns",
+    "iaso.polio.subActivities": "Sub-activities",
     "iaso.polio.table.label.actions": "Actions",
     "iaso.polio.table.label.country": "Country",
     "iaso.polio.table.label.language": "Language",

diff --git a/plugins/polio/js/src/constants/translations/fr.json b/plugins/polio/js/src/constants/translations/fr.json
@@ -193,12 +193,16 @@
     "iaso.polio.form.label.who_sent_budget": "Budget envoyé par WHO CO",
     "iaso.polio.form.pleaseCreateVrf": "Veuillez créer un VRF pour débloquer ce tab",
     "iaso.polio.form.validator.error.endDateAfterNextStartDate": "La date de fin ne peut être après ou égal à la date de début du round suivant",
+    "iaso.polio.form.validator.error.endDateAfterRoundDate": "La date de fin ne peut être après celle du round",
+    "iaso.polio.form.validator.error.endDateBeforeRoundStart": "La date de fin ne peut être avant le début du round",
     "iaso.polio.form.validator.error.endDateBeforeStartDate": "La date de fin ne peut être avant la date de début",
     "iaso.polio.form.validator.error.positiveInteger": "Veuillez remplir avec un nombre entier positif",
     "iaso.polio.form.validator.error.positiveNumber": "Veuillez remplir avec un nombre positif",
     "iaso.polio.form.validator.error.positiveRangeInteger": "Veuillez remplir avec un nombre entier positif entre 0 et 100",
     "iaso.polio.form.validator.error.startDateAfterEndDate": "La date de début ne peut pas être après la date de fin",
+    "iaso.polio.form.validator.error.startDateAfterRoundEnd": "La date de début ne peut être après la fin du round",
     "iaso.polio.form.validator.error.startDateBeforePreviousEndDate": "La date de début ne peut être avant ou égal à la date de fin du round précédent",
+    "iaso.polio.form.validator.error.startDateBeforeRoundDate": "La date de début ne peut pas précéder celle du round",
     "iaso.polio.forms.deleteRound": "Effacer round",
     "iaso.polio.forms.emptyEndDate": "Le round {roundNumber} n'a pas de date de fin",
     "iaso.polio.forms.emptyStartDate": "Le round {roundNumber} n'a pas de date de début",
@@ -221,6 +225,10 @@
     "iaso.polio.label.addVaccine": "Ajouter un vaccin",
     "iaso.polio.label.addVar": "Ajouter VAR",
     "iaso.polio.label.afroMapfilterInfo": "La dernière campagne est celle ayant le round actif le plus récent pour la période sélectionnée",
+    "iaso.polio.label.ageGroup": "Groupe d'âge",
+    "iaso.polio.label.ageMax": "Âge max",
+    "iaso.polio.label.ageMin": "Âge min",
+    "iaso.polio.label.ageUnit": "Entrer l'âge en",
     "iaso.polio.label.all": "Tous",
     "iaso.polio.label.amount": "Montant",
     "iaso.polio.label.approval_ongoing": "Approbation en cours",
@@ -282,6 +290,7 @@
     "iaso.polio.label.countryPassing": "80% ou plus de districts ont réussi",
     "iaso.polio.label.create": "Créer",
     "iaso.polio.label.createReasonForDelay": "Ajouter un raison de retard",
+    "iaso.polio.label.createSubActivity": "Créer une sous-activité",
     "iaso.polio.label.createVrf": "Créer VRF",
     "iaso.polio.label.creation_email_send_at": "Date de création email",
     "iaso.polio.label.csv": "CSV",
@@ -309,6 +318,7 @@
     "iaso.polio.label.deleteIncidentWarning": "Etes-vous sûr(e) de vouloir effacer ce rapport d'incident ?",
     "iaso.polio.label.deleteNopv2Auth": "Effacer autorisation",
     "iaso.polio.label.deleteStockWarning": "Voulez-vous effacer ce stock de vaccins",
+    "iaso.polio.label.deleteSubActivity": "Effacer sous-activité?",
     "iaso.polio.label.deleteVRF": "Effacter VRF?",
     "iaso.polio.label.deleteVRFWarning": "Les pré-alertes et VARs liés seront aussi effacés",
     "iaso.polio.label.deleteWarning": "Etes-vous sûr(e) de vouloir effacer cette campagne?",
@@ -340,6 +350,7 @@
     "iaso.polio.label.editGroupedCampaign": "Editer campagne groupée",
     "iaso.polio.label.editReasonForDelay": "Modifier une raisond de retard",
     "iaso.polio.label.editRoundDates": "Modifier les dates de round",
+    "iaso.polio.label.editSubActivity": "Editer sous-activité",
     "iaso.polio.label.emailListEmpty": "Pas de destinataire configuré sur ce pays",
     "iaso.polio.label.emailListLabel": "Destinataires configurés:",
     "iaso.polio.label.emailListTooltip": "La liste d'email est configurable sur les pays",
@@ -434,6 +445,7 @@
     "iaso.polio.label.modifiedBy": "Modifié par",
     "iaso.polio.label.moh": "MOH",
     "iaso.polio.label.MOH_DECISION": "Décision du Ministère de la Santé",
+    "iaso.polio.label.months": "Mois",
     "iaso.polio.label.name": "Nom",
     "iaso.polio.label.name_en": "Texte anglais",
     "iaso.polio.label.name_fr": "Texte français",
@@ -618,6 +630,7 @@
     "iaso.polio.label.who": "WHO",
     "iaso.polio.label.whoCompletedRecruitement": "Recrutement WHO complet",
     "iaso.polio.label.whoToRecruit": "Recrutements à effecter WHO",
+    "iaso.polio.label.years": "Années",
     "iaso.polio.label.yes": "Oui",
     "iaso.polio.lqas.goToCampaign": "Voir la campagne",
     "iaso.polio.lqasim.penultimate": "Avant-dernier",
@@ -677,6 +690,7 @@
     "iaso.polio.sendEmail.error": "Erreur lors de l'envoi de l'email de notification",
     "iaso.polio.sendEmail.success": "Email de notification envoyé",
     "iaso.polio.showDeletedCampaigns": "Montrer les campagnes effacées",
+    "iaso.polio.subActivities": "Sous-activités",
     "iaso.polio.table.label.actions": "Actions",
     "iaso.polio.table.label.country": "Pays",
     "iaso.polio.table.label.language": "Langue",

diff --git a/plugins/polio/js/src/constants/virus.ts b/plugins/polio/js/src/constants/virus.ts
@@ -32,7 +32,7 @@ const polioViruses = [
     },
 ];
 
-type PolioVaccine = {
+export type PolioVaccine = {
     value: Vaccine;
     label: string;
     color: string;

diff --git a/...mains/Campaigns/Rounds/EvaluationForm.tsx → .../Campaigns/Evaluations/EvaluationForm.tsx b/...mains/Campaigns/Rounds/EvaluationForm.tsx → .../Campaigns/Evaluations/EvaluationForm.tsx
diff --git a/plugins/polio/js/src/domains/Campaigns/Evaluations/EvaluationsForms.tsx b/plugins/polio/js/src/domains/Campaigns/Evaluations/EvaluationsForms.tsx
@@ -8,7 +8,7 @@ import React, { FunctionComponent, useState } from 'react';
 import MESSAGES from '../../../constants/messages';
 
 import { Campaign, Round } from '../../../constants/types';
-import { EvaluationForm } from '../Rounds/EvaluationForm';
+import { EvaluationForm } from './EvaluationForm';
 
 export const scopeFormFields = ['separate_scopes_per_round', 'scopes'];
 

diff --git a/...asDistrictsPassed/LqasDistrictsPassed.tsx → ...asDistrictsPassed/LqasDistrictsPassed.tsx b/...asDistrictsPassed/LqasDistrictsPassed.tsx → ...asDistrictsPassed/LqasDistrictsPassed.tsx
diff --git a/plugins/polio/js/src/domains/Campaigns/MainDialog/CreateEditDialog.tsx b/plugins/polio/js/src/domains/Campaigns/MainDialog/CreateEditDialog.tsx
@@ -21,7 +21,7 @@ import { merge } from 'lodash';
 
 import {
     BackdropClickModal,
-    IconButton as IconButtonComponent,
+    IconButton,
     LoadingSpinner,
     useSafeIntl,
 } from 'bluesquare-components';
@@ -137,8 +137,11 @@ const CreateEditDialog: FunctionComponent<Props> = ({
     const CurrentForm = tabs[selectedTab].form;
 
     // default to tab 0 when opening
+    // This seems necessary regardless of state default value, the cause should be investigated
     useEffect(() => {
-        setSelectedTab(0);
+        setSelectedTab(value => {
+            return value || 0;
+        });
     }, [isOpen]);
 
     const isFormChanged = !isEqual(formik.values, formik.initialValues);
@@ -191,7 +194,7 @@ const CreateEditDialog: FunctionComponent<Props> = ({
                             className={classes.historyLink}
                         >
                             <Box pr={4} alignItems="center">
-                                <IconButtonComponent
+                                <IconButton
                                     url={`/${baseUrls.campaignHistory}/campaignId/${selectedCampaign?.id}`}
                                     icon="history"
                                     tooltipMessage={MESSAGES.campaignHistory}

diff --git a/plugins/polio/js/src/domains/Campaigns/MainDialog/usePolioDialogTabs.tsx b/plugins/polio/js/src/domains/Campaigns/MainDialog/usePolioDialogTabs.tsx
@@ -18,6 +18,7 @@ import { RoundsForm, roundFormFields } from '../Rounds/RoundsForm';
 import { ScopeForm, scopeFormFields } from '../Scope/ScopeForm';
 import { useIsPolioCampaign } from '../hooks/useIsPolioCampaignCheck';
 import { Tab } from './PolioDialogTabs';
+import { SubActivitiesForm } from '../SubActivities/SubActivitiesForm';
 
 export const usePolioDialogTabs = (
     formik: FormikProps<CampaignFormValues>,
@@ -41,13 +42,22 @@ export const usePolioDialogTabs = (
                 title: formatMessage(MESSAGES.rounds),
                 form: RoundsForm,
                 key: 'rounds',
-                diabled: !formik.values.initial_org_unit,
+                disabled: !formik.values.initial_org_unit,
                 hasTabError:
                     compareArraysValues(
                         roundFormFields(selectedCampaign?.rounds ?? []),
                         formik.errors,
                     ) || compareArraysValues(scopeFormFields, formik.errors),
             },
+            {
+                title: formatMessage(MESSAGES.subActivities),
+                form: SubActivitiesForm,
+                key: 'subActivities',
+                disabled:
+                    !formik.values.initial_org_unit ||
+                    formik.values.rounds.length === 0,
+                hasTabError: false,
+            },
             {
                 title: formatMessage(MESSAGES.scope),
                 form: ScopeForm,

diff --git a/plugins/polio/js/src/domains/Campaigns/Rounds/RoundDates/RoundDates.tsx b/plugins/polio/js/src/domains/Campaigns/Rounds/RoundDates/RoundDates.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { Box, Divider, Grid, Typography } from '@mui/material';
-import { useSafeIntl } from 'bluesquare-components';
+import { textPlaceholder, useSafeIntl } from 'bluesquare-components';
 import { Field, FormikProvider, useFormik, useFormikContext } from 'formik';
 import { isEqual } from 'lodash';
 import moment from 'moment';
@@ -136,7 +136,7 @@ export const RoundDates: FunctionComponent<Props> = ({
                                                         ? moment(
                                                               currentStartDate,
                                                           ).format(dateFormat)
-                                                        : '--'
+                                                        : textPlaceholder
                                                 }`}
                                             </Typography>
                                         </Grid>

diff --git a/plugins/polio/js/src/domains/Campaigns/Scope/ScopeField.tsx b/plugins/polio/js/src/domains/Campaigns/Scope/ScopeField.tsx
@@ -4,6 +4,8 @@ import { ScopeSearch } from './Scopes/ScopeSearch';
 import { ScopeInput } from './ScopeInput';
 import { FilteredDistricts } from './Scopes/types';
 import { OrgUnit } from '../../../../../../../hat/assets/js/apps/Iaso/domains/orgUnits/types/orgUnit';
+import { CampaignFormValues } from '../../../constants/types';
+import { PolioVaccine } from '../../../constants/virus';
 
 type Props = {
     name: string;
@@ -21,6 +23,9 @@ type Props = {
     page: number;
     // eslint-disable-next-line no-unused-vars
     setPage: (page: number) => void;
+    campaign: CampaignFormValues; // See ScopeField props for explanation
+    availableVaccines?: PolioVaccine[];
+    searchInputWithMargin?: boolean;
 };
 
 export const ScopeField: FunctionComponent<Props> = ({
@@ -36,6 +41,9 @@ export const ScopeField: FunctionComponent<Props> = ({
     setSearch,
     page,
     setPage,
+    campaign,
+    availableVaccines,
+    searchInputWithMargin = true,
 }) => (
     <Field
         name={name}
@@ -50,5 +58,8 @@ export const ScopeField: FunctionComponent<Props> = ({
         searchComponent={<ScopeSearch search={search} setSearch={setSearch} />}
         page={page}
         setPage={setPage}
+        campaign={campaign}
+        availableVaccines={availableVaccines}
+        searchInputWithMargin={searchInputWithMargin}
     />
 );