WIP: add a warning to inform the user that if a project is added or d…

…eleted the reference forms selected will be erased
BLSQ · Nov 27, 2024 · 5776449 · 5776449
1 parent 6fa88bf
commit 5776449
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 95 deletions.
diff --git a/hat/assets/js/apps/Iaso/domains/app/translations/en.json b/hat/assets/js/apps/Iaso/domains/app/translations/en.json
@@ -916,6 +916,7 @@
     "iaso.orgUnitsTypes.create": "Create org unit type",
     "iaso.orgUnitsTypes.dialog.delete": "Are you sure you want to delete this org Unit type?",
     "iaso.orgUnitsTypes.dialog.deleteText": "This operation cannot be undone.",
+    "iaso.orgUnitsTypes.dialog.eraseReferenceFormsWarning": "Watch out! Adding an extra project to this list will erase all the currently selected reference forms for the project(s), and you will need to select them again in the list (to avoid inconsistencies, as reference forms must be included in all selected projects). Are you sure you want to proceed?",
     "iaso.orgUnitsTypes.projects": "Projects",
     "iaso.orgUnitsTypes.subTypesErrors": "A sub org unit type cannot be a parent too ({typeName})",
     "iaso.orgUnitsTypes.update": "Update org unit type",

diff --git a/hat/assets/js/apps/Iaso/domains/app/translations/fr.json b/hat/assets/js/apps/Iaso/domains/app/translations/fr.json
@@ -916,6 +916,7 @@
     "iaso.orgUnitsTypes.create": "Créer un type d'unité d'organisation",
     "iaso.orgUnitsTypes.dialog.delete": "Etes-vous certain de vouloir effacer ce type d'unité d'organisation ?",
     "iaso.orgUnitsTypes.dialog.deleteText": "Cette opération est définitive.",
+    "iaso.orgUnitsTypes.dialog.eraseReferenceFormsWarning": "Attention ! Ajouter un projet supplémentaire à cette liste effacera tous les formulaires de référence actuellement sélectionnés pour le(s) projet(s), et vous devrez les sélectionner à nouveau dans la liste (pour éviter les incohérences, car les formulaires de référence doivent être inclus dans tous les projets sélectionnés). Êtes-vous sûr de vouloir continuer ?",
     "iaso.orgUnitsTypes.projects": "Projets",
     "iaso.orgUnitsTypes.subTypesErrors": "Un sous type d'unité d'organisation ne peut pas aussi être parent ({typeName})",
     "iaso.orgUnitsTypes.update": "Mettre à jour le type d'unité d'organisation",

diff --git a/hat/assets/js/apps/Iaso/domains/orgUnits/orgUnitTypes/components/OrgUnitsTypesDialog.tsx b/hat/assets/js/apps/Iaso/domains/orgUnits/orgUnitTypes/components/OrgUnitsTypesDialog.tsx
@@ -1,4 +1,5 @@
 import {
+    ConfirmCancelModal,
     IntlMessage,
     useSafeIntl,
     useSkipEffectOnMount,
@@ -16,6 +17,8 @@ import React, {
     useState,
 } from 'react';
 
+import { Stack, Typography } from '@mui/material';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import ConfirmCancelDialogComponent from '../../../../components/dialogs/ConfirmCancelDialogComponent';
 import InputComponent from '../../../../components/forms/InputComponent';
 import { InputWithInfos } from '../../../../components/InputWithInfos';
@@ -41,6 +44,12 @@ import { useGetOrgUnitTypesDropdownOptions } from '../hooks/useGetOrgUnitTypesDr
 import { useSaveOrgUnitType } from '../hooks/useSaveOrgUnitType';
 import MESSAGES from '../messages';
 
+const styles = {
+    warningMessage: theme => ({
+        padding: '5px',
+        color: theme.palette.warning.main,
+    }),
+};
 const mapOrgUnitType = orgUnitType => {
     return {
         id: orgUnitType.id,
@@ -177,6 +186,10 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({
             ) {
                 setFieldValue(keyValue, commaSeparatedIdsToArray(value));
                 if (keyValue === 'project_ids') {
+                    if (formState.reference_forms_ids.value.length > 0) {
+                        setConfirmCancelDialogOpen(true);
+                    }
+
                     const projectIds = value
                         ?.split(',')
                         .map((val: string) => parseInt(val, 10));
@@ -192,7 +205,13 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({
                 ]);
             }
         },
-        [setFieldValue, setFieldErrors, formatMessage, getFormPerProjects],
+        [
+            setFieldValue,
+            formState.reference_forms_ids.value.length,
+            getFormPerProjects,
+            setFieldErrors,
+            formatMessage,
+        ],
     );
 
     const onConfirm = useCallback(
@@ -257,115 +276,160 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({
 
         return allProjects?.concat(orgUnitypeProjects) ?? [];
     }, [allProjects, orgUnitType.projects]);
+    const [confirmCancelDialogOpen, setConfirmCancelDialogOpen] =
+        useState(false);
+    const handleCustomDialogConfirm = () => {
+        setConfirmCancelDialogOpen(false);
+    };
+
+    const handleCustomDialogCancel = () => {
+        setConfirmCancelDialogOpen(false);
+    };
     return (
         //  @ts-ignore
-        <ConfirmCancelDialogComponent
-            id="OuTypes-modal"
-            titleMessage={titleMessage}
-            onConfirm={closeDialog => onConfirm(closeDialog)}
-            onCancel={closeDialog => {
-                closeDialog();
-                resetForm();
-            }}
-            cancelMessage={MESSAGES.cancel}
-            confirmMessage={MESSAGES.save}
-            allowConfirm={isFormValid(requiredFields, formState)}
-            maxWidth="sm"
-            renderTrigger={renderTrigger}
-            dataTestId="OuTypes-modal"
-        >
-            <InputComponent
-                keyValue="name"
-                onChange={onChange}
-                value={formState.name.value}
-                errors={formState.name.errors}
-                type="text"
-                label={MESSAGES.name}
-                required
-            />
-
-            <InputComponent
-                keyValue="short_name"
-                onChange={onChange}
-                value={formState.short_name.value}
-                errors={formState.short_name.errors}
-                type="text"
-                label={MESSAGES.shortName}
-                required
-            />
+        <>
+            <ConfirmCancelDialogComponent
+                id="OuTypes-modal"
+                titleMessage={titleMessage}
+                onConfirm={closeDialog => onConfirm(closeDialog)}
+                onCancel={closeDialog => {
+                    closeDialog();
+                    resetForm();
+                }}
+                cancelMessage={MESSAGES.cancel}
+                confirmMessage={MESSAGES.save}
+                allowConfirm={isFormValid(requiredFields, formState)}
+                maxWidth="sm"
+                renderTrigger={renderTrigger}
+                dataTestId="OuTypes-modal"
+                additionalButton={undefined}
+                additionalMessage={undefined}
+                onAdditionalButtonClick={undefined}
+                allowConfimAdditionalButton={undefined}
+            >
+                <InputComponent
+                    keyValue="name"
+                    onChange={onChange}
+                    value={formState.name.value}
+                    errors={formState.name.errors}
+                    type="text"
+                    label={MESSAGES.name}
+                    required
+                />
 
-            <InputComponent
-                multi
-                clearable
-                keyValue="project_ids"
-                onChange={onChange}
-                value={formState.project_ids.value}
-                errors={formState.project_ids.errors}
-                type="select"
-                options={allProjectWithInvalids}
-                label={MESSAGES.projects}
-                required
-            />
+                <InputComponent
+                    keyValue="short_name"
+                    onChange={onChange}
+                    value={formState.short_name.value}
+                    errors={formState.short_name.errors}
+                    type="text"
+                    label={MESSAGES.shortName}
+                    required
+                />
 
-            <InputComponent
-                keyValue="depth"
-                onChange={onChange}
-                value={formState.depth.value}
-                errors={formState.depth.errors}
-                type="number"
-                label={MESSAGES.depth}
-            />
-            <InputComponent
-                multi
-                clearable
-                keyValue="sub_unit_type_ids"
-                onChange={onChange}
-                loading={isLoadingOrgUitTypes}
-                value={allOrgUnitTypes && formState.sub_unit_type_ids.value}
-                errors={formState.sub_unit_type_ids.errors}
-                type="select"
-                options={subUnitTypes}
-                label={MESSAGES.subUnitTypes}
-            />
-            <InputWithInfos
-                infos={formatMessage(MESSAGES.createSubUnitTypesInfos)}
-            >
                 <InputComponent
                     multi
                     clearable
-                    keyValue="allow_creating_sub_unit_type_ids"
+                    keyValue="project_ids"
                     onChange={onChange}
-                    loading={isLoadingOrgUitTypes}
-                    value={
-                        allOrgUnitTypes &&
-                        formState.allow_creating_sub_unit_type_ids.value
-                    }
-                    errors={formState.allow_creating_sub_unit_type_ids.errors}
+                    value={formState.project_ids.value}
+                    errors={formState.project_ids.errors}
                     type="select"
-                    options={subUnitTypes}
-                    label={MESSAGES.createSubUnitTypes}
+                    options={allProjectWithInvalids}
+                    label={MESSAGES.projects}
+                    required
+                />
+
+                <InputComponent
+                    keyValue="depth"
+                    onChange={onChange}
+                    value={formState.depth.value}
+                    errors={formState.depth.errors}
+                    type="number"
+                    label={MESSAGES.depth}
                 />
-            </InputWithInfos>
-            {hasPermission && (
                 <InputComponent
                     multi
                     clearable
-                    keyValue="reference_forms_ids"
+                    keyValue="sub_unit_type_ids"
                     onChange={onChange}
-                    value={formState.reference_forms_ids.value}
-                    errors={formState.reference_forms_ids.errors}
+                    loading={isLoadingOrgUitTypes}
+                    value={allOrgUnitTypes && formState.sub_unit_type_ids.value}
+                    errors={formState.sub_unit_type_ids.errors}
                     type="select"
-                    disabled={projectsEmpty}
-                    options={
-                        allForms &&
-                        allForms.map(form => ({
-                            value: form.id,
-                            label: form.name,
-                        }))
-                    }
-                    label={referenceFormsMessage}
+                    options={subUnitTypes}
+                    label={MESSAGES.subUnitTypes}
                 />
-            )}
-        </ConfirmCancelDialogComponent>
+                <InputWithInfos
+                    infos={formatMessage(MESSAGES.createSubUnitTypesInfos)}
+                >
+                    <InputComponent
+                        multi
+                        clearable
+                        keyValue="allow_creating_sub_unit_type_ids"
+                        onChange={onChange}
+                        loading={isLoadingOrgUitTypes}
+                        value={
+                            allOrgUnitTypes &&
+                            formState.allow_creating_sub_unit_type_ids.value
+                        }
+                        errors={
+                            formState.allow_creating_sub_unit_type_ids.errors
+                        }
+                        type="select"
+                        options={subUnitTypes}
+                        label={MESSAGES.createSubUnitTypes}
+                    />
+                </InputWithInfos>
+                {hasPermission && (
+                    <InputComponent
+                        multi
+                        clearable
+                        keyValue="reference_forms_ids"
+                        onChange={onChange}
+                        value={formState.reference_forms_ids.value}
+                        errors={formState.reference_forms_ids.errors}
+                        type="select"
+                        disabled={projectsEmpty}
+                        options={
+                            allForms &&
+                            allForms.map(form => ({
+                                value: form.id,
+                                label: form.name,
+                            }))
+                        }
+                        label={referenceFormsMessage}
+                    />
+                )}
+            </ConfirmCancelDialogComponent>
+
+            {/* @ts-ignore */}
+            <ConfirmCancelModal
+                onConfirm={() => handleCustomDialogConfirm()}
+                cancelMessage={MESSAGES.cancel}
+                confirmMessage={MESSAGES.confirm}
+                maxWidth="md"
+                open={confirmCancelDialogOpen}
+                closeDialog={() => null}
+                onClose={() => handleCustomDialogCancel()}
+                onCancel={() => {
+                    handleCustomDialogCancel();
+                }}
+                id="confirm-cancel-dialog"
+                dataTestId="confirm-cancel-dialog"
+            >
+                <Stack
+                    direction="row"
+                    spacing={1}
+                    alignItems="center"
+                    sx={styles.warningMessage}
+                >
+                    <WarningAmberIcon />
+                    <Typography>
+                        {formatMessage(MESSAGES.eraseReferenceFormsWarning)}
+                    </Typography>
+                </Stack>
+            </ConfirmCancelModal>
+        </>
     );
 };
diff --git a/hat/assets/js/apps/Iaso/domains/orgUnits/orgUnitTypes/messages.ts b/hat/assets/js/apps/Iaso/domains/orgUnits/orgUnitTypes/messages.ts
@@ -111,6 +111,17 @@ const MESSAGES = defineMessages({
         defaultMessage:
             'A sub org unit type cannot be a parent too ({typeName})',
     },
+    confirm: {
+        id: 'iaso.label.confirm',
+        defaultMessage: 'Confirm',
+    },
+    eraseReferenceFormsWarning: {
+        id: 'iaso.orgUnitsTypes.dialog.eraseReferenceFormsWarning',
+        defaultMessage:
+            'Watch out! Adding an extra project to this list will erase all the currently selected reference forms ' +
+            'for the project(s), and you will need to select them again in the list (to avoid inconsistencies, ' +
+            'as reference forms must be included in all selected projects). Are you sure you want to proceed?',
+    },
 });
 
 export default MESSAGES;