diff --git a/app/frontend/src/javascript/components/family-account/child-item.tsx b/app/frontend/src/javascript/components/family-account/child-item.tsx index b412285cd..1f0134808 100644 --- a/app/frontend/src/javascript/components/family-account/child-item.tsx +++ b/app/frontend/src/javascript/components/family-account/child-item.tsx @@ -3,18 +3,39 @@ import { Child } from '../../models/child'; import { useTranslation } from 'react-i18next'; import { FabButton } from '../base/fab-button'; import FormatLib from '../../lib/format'; +import { DeleteChildModal } from './delete-child-modal'; +import ChildAPI from '../../api/child'; interface ChildItemProps { child: Child; onEdit: (child: Child) => void; - onDelete: (child: Child) => void; + onDelete: (error: string) => void; + onError: (error: string) => void; } /** * A child item. */ -export const ChildItem: React.FC = ({ child, onEdit, onDelete }) => { +export const ChildItem: React.FC = ({ child, onEdit, onDelete, onError }) => { const { t } = useTranslation('public'); + const [isOpenDeleteChildModal, setIsOpenDeleteChildModal] = React.useState(false); + + /** + * Toggle the delete child modal + */ + const toggleDeleteChildModal = () => setIsOpenDeleteChildModal(!isOpenDeleteChildModal); + + /** + * Delete a child + */ + const deleteChild = () => { + ChildAPI.destroy(child.id).then(() => { + toggleDeleteChildModal(); + onDelete(t('app.public.child_item.deleted')); + }).catch(() => { + onError(t('app.public.child_item.unable_to_delete')); + }); + }; return (
@@ -32,7 +53,8 @@ export const ChildItem: React.FC = ({ child, onEdit, onDelete })
} onClick={() => onEdit(child)} className="edit-button" /> - } onClick={() => onDelete(child)} className="delete-button" /> + } onClick={toggleDeleteChildModal} className="delete-button" /> +
); diff --git a/app/frontend/src/javascript/components/family-account/children-list.tsx b/app/frontend/src/javascript/components/family-account/children-list.tsx index efcac3275..875555ddd 100644 --- a/app/frontend/src/javascript/components/family-account/children-list.tsx +++ b/app/frontend/src/javascript/components/family-account/children-list.tsx @@ -69,10 +69,9 @@ export const ChildrenList: React.FC = ({ user, operator, onEr /** * Delete a child */ - const deleteChild = (child: Child) => { - ChildAPI.destroy(child.id).then(() => { - ChildAPI.index({ user_id: user.id }).then(setChildren); - }); + const handleDeleteChildSuccess = (msg: string) => { + ChildAPI.index({ user_id: user.id }).then(setChildren); + onSuccess(msg); }; /** @@ -105,7 +104,7 @@ export const ChildrenList: React.FC = ({ user, operator, onEr
{children.map(child => ( - + ))}
setIsOpenChildModal(false)} onSuccess={handleSaveChildSuccess} onError={onError} supportingDocumentsTypes={supportingDocumentsTypes} operator={operator} /> diff --git a/app/frontend/src/javascript/components/family-account/delete-child-modal.tsx b/app/frontend/src/javascript/components/family-account/delete-child-modal.tsx new file mode 100644 index 000000000..ba844d796 --- /dev/null +++ b/app/frontend/src/javascript/components/family-account/delete-child-modal.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { useTranslation } from 'react-i18next'; +import { FabModal } from '../base/fab-modal'; +import { Child } from '../../models/child'; + +interface DeleteChildModalProps { + isOpen: boolean, + toggleModal: () => void, + child: Child, + onDelete: (child: Child) => void, +} + +/** + * Modal dialog to remove a requested child + */ +export const DeleteChildModal: React.FC = ({ isOpen, toggleModal, onDelete, child }) => { + const { t } = useTranslation('public'); + + /** + * Callback triggered when the child confirms the deletion + */ + const handleDeleteChild = () => { + onDelete(child); + }; + + return ( + +

{t('app.public.delete_child_modal.confirm_delete_child')}

+
+ ); +}; diff --git a/config/locales/app.public.en.yml b/config/locales/app.public.en.yml index 7a6547881..6cd2b7157 100644 --- a/config/locales/app.public.en.yml +++ b/config/locales/app.public.en.yml @@ -503,6 +503,12 @@ en: first_name: "First name of the child" last_name: "Last name of the child" birthday: "Birthday" + deleted: "The child has been deleted." + unable_to_delete: "Unable to delete the child." + delete_child_modal: + confirmation_required: "Confirmation required" + confirm: "Confirm" + confirm_delete_child: "Do you really want to remove this child?" tour: conclusion: title: "Thank you for your attention" diff --git a/config/locales/app.public.fr.yml b/config/locales/app.public.fr.yml index f5da1413e..3ec715aba 100644 --- a/config/locales/app.public.fr.yml +++ b/config/locales/app.public.fr.yml @@ -503,6 +503,12 @@ fr: first_name: "Prénom de l'enfant" last_name: "Nom de l'enfant" birthday: "Date de naissance" + deleted: "L'enfant a bien été supprimée." + unable_to_delete: "Impossible de supprimer la demande de l'enfant." + delete_child_modal: + confirmation_required: "Confirmation requise" + confirm: "Valider" + confirm_delete_child: "Êtes-vous sûr de vouloir supprimer la demande de cet enfant ?" tour: conclusion: title: "Merci de votre attention"