Feature parametrer phases vil 316

src/api/villages/villages.put.ts

@@ -0,0 +1,31 @@
+import { useMutation } from 'react-query';
+import type { Village } from 'server/entities/village';
+
+import { axiosRequest } from 'src/utils/axiosRequest';
+
+export const updateVillage = async (id: number, villageData: Partial<Village>) => {
+  const response = await axiosRequest({
+    method: 'PUT',
+    url: `/villages/${id}`,
+    data: villageData,
+  });
+
+  return response.data;
+};
+
+export const useUpdateVillage = (args: { id: number; villageData: Partial<Village> }) => {
+  const { id, villageData } = args;
+  return useMutation({
+    mutationFn: () => {
+      return updateVillage(id, villageData);
+    },
+  });
+};
+
+export const useUpdateVillages = () => {
+  return useMutation({
+    mutationFn: async (village: { id: number; villageData: Partial<Village> }) => {
+      return await updateVillage(village.id, village.villageData);
+    },
+  });
+};

src/components/admin/manage/settings/SavePhasesModal.tsx

@@ -0,0 +1,70 @@
+import { useSnackbar } from 'notistack';
+import React, { useState, useEffect } from 'react';
+
+import { useUpdateVillages } from 'src/api/villages/villages.put';
+import { Modal } from 'src/components/Modal';
+import type { VillagePhase } from 'types/village.type';
+
+interface SavePhasesModalProps {
+  villagePhases: { [villageId: number]: VillagePhase };
+  isModalOpen: boolean;
+  setIsModalOpen: (val: boolean) => void;
+}
+
+export function SavePhasesModal({ villagePhases, isModalOpen, setIsModalOpen }: SavePhasesModalProps) {
+  const [isModalLoading, setIsModalLoading] = useState(false);
+  const updateVillages = useUpdateVillages();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const handleConfirm = async (villagePhases: { [villageId: number]: VillagePhase }) => {
+    const promises = [];
+    for (const key in villagePhases) {
+      const villageId: number = +key;
+      promises.push(updateVillages.mutateAsync({ id: villageId, villageData: { activePhase: villagePhases[villageId] } }));
+    }
+    await Promise.allSettled(promises);
+  };
+
+  useEffect(() => {
+    if (updateVillages.isLoading) {
+      setIsModalLoading(true);
+    }
+    if (updateVillages.isSuccess) {
+      enqueueSnackbar('Modifications enregistrées !', {
+        variant: 'success',
+      });
+      setIsModalOpen(false);
+      setIsModalLoading(false);
+    }
+    if (updateVillages.isError) {
+      enqueueSnackbar("Une erreur s'est produite lors de la modifications !", {
+        variant: 'error',
+      });
+      setIsModalOpen(false);
+      setIsModalLoading(false);
+    }
+  }, [updateVillages.isLoading, updateVillages.isSuccess, updateVillages.isError, setIsModalOpen, enqueueSnackbar]);
+
+  return (
+    <Modal
+      open={isModalOpen}
+      noCloseButton={true}
+      maxWidth="sm"
+      title="Es-tu sûr ?"
+      onConfirm={async () => handleConfirm(villagePhases)}
+      onClose={() => {
+        setIsModalOpen(false);
+      }}
+      loading={isModalLoading}
+      cancelLabel="Annuler"
+      confirmLabel="Enregistrer"
+      color="primary"
+      ariaLabelledBy="phaseModal"
+      ariaDescribedBy="Modal de validation des phases"
+    >
+      <div id="brouillon-desc" style={{ padding: '0.5rem' }}>
+        <p>Les modifications que tu souhaites apporter vont modifier les phases actives.</p>
+      </div>
+    </Modal>
+  );
+}

src/pages/admin/newportal/manage/settings/phases/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { Button, Checkbox, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 
 import { useGetVillages } from 'src/api/villages/villages.get';
-import { SavePhasesModal } from 'src/components/admin/managa/settings/SavePhasesModal';
+import { SavePhasesModal } from 'src/components/admin/manage/settings/SavePhasesModal';
 import { UserContext } from 'src/contexts/userContext';
 import { primaryColor } from 'src/styles/variables.const';
 import BackArrow from 'src/svg/back-arrow.svg';
@@ -17,7 +17,7 @@ const Phases = () => {
   const hasAccess = user !== null && user.type in [UserType.MEDIATOR, UserType.ADMIN, UserType.SUPER_ADMIN];
   const [villagePhases, setVillagePhases] = useState<{ [villageId: number]: VillagePhase }>({});
   const villages = useGetVillages();
-  const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   useEffect(() => {
     if (villages.data) {