Skip to content

Commit

Permalink
Merge pull request #1834 from BLSQ/IA-3564-Adding-Deleting-a-project-…
Browse files Browse the repository at this point in the history
…on-OUT-automaticaly-delete-all-reference-form-assigned

IA-3564: Adding/Deleting a project on OUT, automaticaly delete all reference form assigned(add a warning)
  • Loading branch information
hakifran authored Dec 2, 2024
2 parents 501a168 + 3320f39 commit 4920ef0
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 97 deletions.
1 change: 1 addition & 0 deletions hat/assets/js/apps/Iaso/domains/app/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -918,6 +918,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",
Expand Down
1 change: 1 addition & 0 deletions hat/assets/js/apps/Iaso/domains/app/translations/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -918,6 +918,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",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
ConfirmCancelModal,
IntlMessage,
useSafeIntl,
useSkipEffectOnMount,
Expand All @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -90,6 +99,8 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({

const formStateUpdated = useRef(null);
const projectsEmptyUpdated = useRef(null);
const prevProjectIds = useRef(formState.project_ids.value);

const { formatMessage } = useSafeIntl();

const [referenceFormsMessage, setReferenceFormsMessage] = useState(
Expand All @@ -101,6 +112,7 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({
const [projectsEmpty, setProjectsEmpty] = useState(
!!isEmpty(formState.project_ids.value),
);
const [selectedProjectIds, setSelectedProjectIds] = useState(null);

const { data: allProjects } = useGetProjectsDropdownOptions();
const { data: allOrgUnitTypes, isLoading: isLoadingOrgUitTypes } =
Expand Down Expand Up @@ -167,6 +179,30 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({

const currentUser = useCurrentUser();

const handleOpenConfirmModal = useCallback(
newProjectIds => {
prevProjectIds.current = formState.project_ids.value;
setSelectedProjectIds(newProjectIds);
setConfirmCancelDialogOpen(true);
},
[formState.project_ids.value],
);

const handleDialogConfirm = useCallback(() => {
if (selectedProjectIds) {
setAllForms(getFormPerProjects(selectedProjectIds));
setFieldValue('project_ids', selectedProjectIds);
}
setSelectedProjectIds(null);
setConfirmCancelDialogOpen(false);
}, [getFormPerProjects, selectedProjectIds, setFieldValue]);

const handleDialogCancel = useCallback(() => {
setFieldValue('project_ids', prevProjectIds.current);
setSelectedProjectIds(null);
setConfirmCancelDialogOpen(false);
}, [setFieldValue]);

const onChange = useCallback(
(keyValue, value) => {
if (
Expand All @@ -179,8 +215,12 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({
if (keyValue === 'project_ids') {
const projectIds = value
?.split(',')
.map((val: string) => parseInt(val, 10));
setAllForms(getFormPerProjects(projectIds));
.map(val => parseInt(val, 10));
if (formState.reference_forms_ids.value.length > 0) {
handleOpenConfirmModal(projectIds);
} else {
setAllForms(getFormPerProjects(projectIds));
}
}
} else {
setFieldValue(keyValue, value);
Expand All @@ -192,7 +232,14 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({
]);
}
},
[setFieldValue, setFieldErrors, formatMessage, getFormPerProjects],
[
setFieldValue,
formState.reference_forms_ids.value.length,
handleOpenConfirmModal,
getFormPerProjects,
setFieldErrors,
formatMessage,
],
);

const onConfirm = useCallback(
Expand Down Expand Up @@ -257,115 +304,154 @@ export const OrgUnitsTypesDialog: FunctionComponent<Props> = ({

return allProjects?.concat(orgUnitypeProjects) ?? [];
}, [allProjects, orgUnitType.projects]);
const [confirmCancelDialogOpen, setConfirmCancelDialogOpen] =
useState(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={() => handleDialogConfirm()}
cancelMessage={MESSAGES.cancel}
confirmMessage={MESSAGES.confirm}
maxWidth="md"
open={confirmCancelDialogOpen}
closeDialog={() => null}
onClose={() => handleDialogCancel()}
onCancel={() => {
handleDialogCancel();
}}
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>
</>
);
};
11 changes: 11 additions & 0 deletions hat/assets/js/apps/Iaso/domains/orgUnits/orgUnitTypes/messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit 4920ef0

Please sign in to comment.