rework rights management parts

src/pages/ContactPage.tsx

@@ -9,20 +9,17 @@ import { Breadcrumbs } from "../ui/Breadcrumbs.tsx";
 import { ContactInfosTab } from "./Contact/ContactInfosTab.tsx";
 import { PageTab } from "../ui/PageTab.tsx";
 import { ContactSurveysContent } from "../ui/Contact/ContactSurveys.tsx";
-import { IdsManagement } from "../ui/Contact/IdsManagement.tsx";
 import { RightsManagement } from "../ui/Contact/RightsManagement.tsx";
 
 enum Tab {
   Infos = "Infos",
   Surveys = "Surveys",
-  Ids = "Ids",
   Permissions = "Permissions",
 }
 
 const TabNames = {
   [Tab.Infos]: "Infos contact",
   [Tab.Surveys]: "Questionnaire(s)",
-  [Tab.Ids]: "Gestion des identifiants",
   [Tab.Permissions]: "Gestion des droits",
 };
 
@@ -78,11 +75,10 @@ export function ContactPage() {
         ))}
       </Tabs>
 
-      <Stack px={3} py={3}>
+      <Stack p={3}>
         <Breadcrumbs items={breadcrumbs} />
         {currentTab === Tab.Infos && <ContactInfosTab contact={contact} onSave={refetch} />}
         {currentTab === Tab.Surveys && <ContactSurveysContent contact={contact} />}
-        {currentTab === Tab.Ids && <IdsManagement contact={contact} />}
         {currentTab === Tab.Permissions && <RightsManagement contact={contact} />}
       </Stack>
     </>

src/routes.tsx

@@ -13,6 +13,7 @@ import { SurveyUnitPage } from "./pages/SurveyUnitPage.tsx";
 import { CreateContactPage } from "./pages/CreateContactPage.tsx";
 import { UnauthorizedPage } from "./pages/UnauthorizedPage.tsx";
 import { LogoutPage } from "./pages/Logout.tsx";
+import { AddRightsManagement } from "./ui/Contact/AddRightsManagement.tsx";
 
 export const routes: RouteObject[] = [
   {
@@ -43,10 +44,14 @@ export const routes: RouteObject[] = [
         ],
       },
       { path: "surveys/:id", element: <SurveyPage /> },
-      { path: "contacts/:id", element: <ContactPage /> },
+      {
+        path: "contacts/:id",
+        element: <ContactPage />,
+      },
+      { path: "contacts/:id/rights-management", element: <AddRightsManagement /> },
+      { path: "contacts/create-contact", element: <CreateContactPage /> },
       { path: "survey-units/:id", element: <SurveyUnitPage /> },
       { path: "reglages", element: <Settings /> },
-      { path: "contacts/createContact", element: <CreateContactPage /> },
       { path: "", element: <Home /> },
     ],
   },

src/ui/Contact/AddRightsManagement.tsx

@@ -0,0 +1,69 @@
+import Card from "@mui/material/Card";
+import { TitleWithIconAndDivider } from "../TitleWithIconAndDivider";
+import { BinocularIcon } from "../Icon/BinocularIcon";
+import { Row } from "../Row";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { CircularProgress, Divider, Typography } from "@mui/material";
+import { Stack } from "@mui/system";
+import GroupAddOutlinedIcon from "@mui/icons-material/GroupAddOutlined";
+import { AssociateSurveysTable } from "./AssociateSurveysTable";
+import LibraryAddOutlinedIcon from "@mui/icons-material/LibraryAddOutlined";
+import { useParams } from "react-router-dom";
+import { useFetchQuery } from "../../hooks/useFetchQuery";
+import { ContactHeader } from "./ContactHeader";
+import { AssociateAnotherAccount } from "./AssociateAnotherAccount";
+import { AddRightsForm } from "./AddRightsForm";
+
+export const AddRightsManagement = () => {
+  const { id } = useParams();
+  const { data: contact } = useFetchQuery("/api/contacts/{id}", {
+    urlParams: {
+      id: id!,
+    },
+  });
+
+  if (!contact) {
+    return (
+      <Row justifyContent="center" py={10}>
+        <CircularProgress />
+      </Row>
+    );
+  }
+  return (
+    <>
+      <ContactHeader contact={contact} />
+      <Divider variant="fullWidth" />
+      <Stack p={3} spacing={3}>
+        <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
+          <TitleWithIconAndDivider
+            title={`Ajouter d’autres questionnaires liées au compte “${id}” `}
+            IconComponent={BinocularIcon}
+          />
+          <Row spacing={1}>
+            <InfoOutlinedIcon fontSize="smallIcon" />
+            <Typography variant="bodyMedium">
+              La liste des questionnaires auxquelles le répondant peut accéder avec son identifiant{" "}
+              <strong>{id}</strong> peut être élargie à des questionnaires rattachés à son adresse
+              courriel et figurant dans la liste ci-dessous
+            </Typography>
+          </Row>
+          <AssociateSurveysTable />
+        </Card>
+        <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
+          <TitleWithIconAndDivider
+            title={`Associer un autre compte au compte ${id}`}
+            IconComponent={GroupAddOutlinedIcon}
+          />
+          <AssociateAnotherAccount contact={contact} />
+        </Card>
+        <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
+          <TitleWithIconAndDivider
+            title={`Ajouter d'autres questionnaires au compte ${id} à partir de leurs caractéristiques`}
+            IconComponent={LibraryAddOutlinedIcon}
+          />
+          <AddRightsForm contact={contact} />
+        </Card>
+      </Stack>
+    </>
+  );
+};

src/ui/Contact/AssociateSurveysTable.tsx

@@ -7,7 +7,6 @@ import TableCell from "@mui/material/TableCell";
 import TableBody from "@mui/material/TableBody";
 import Checkbox from "@mui/material/Checkbox";
 import { useState } from "react";
-import Box from "@mui/system/Box";
 import Button from "@mui/material/Button";
 import TableFooter from "@mui/material/TableFooter";
 import { LoadingCell } from "./ContactSurveysTable";
@@ -60,60 +59,58 @@ export const AssociateSurveysTable = () => {
     console.log(selectedIds);
   };
   return (
-    <Box>
-      <TableContainer sx={{ py: 3 }}>
-        <Table>
-          <TableHeader columns={columns} />
-          <TableBody>
-            {surveysMock.map(survey => {
-              return (
-                <TableRow
-                  hover
-                  tabIndex={-1}
-                  key={`row-${survey.id}`}
-                  sx={{ borderBottom: `solid 1px ${theme.palette.text.hint}` }}
-                >
-                  {columns.map(column => {
-                    const value = survey[column.id as keyof typeof survey];
+    <TableContainer sx={{ pt: 3 }}>
+      <Table>
+        <TableHeader columns={columns} />
+        <TableBody>
+          {surveysMock.map(survey => {
+            return (
+              <TableRow
+                hover
+                tabIndex={-1}
+                key={`row-${survey.id}`}
+                sx={{ borderBottom: `solid 1px ${theme.palette.text.hint}` }}
+              >
+                {columns.map(column => {
+                  const value = survey[column.id as keyof typeof survey];
 
-                    if (column.id === "action") {
-                      return (
-                        <TableCell key={`action-${survey.id}`} align="center">
-                          <Checkbox
-                            aria-label={`checkbox-${survey.id}`}
-                            onChange={() => onChange(survey.id)}
-                          />
-                        </TableCell>
-                      );
-                    }
+                  if (column.id === "action") {
+                    return (
+                      <TableCell key={`action-${survey.id}`} align="center">
+                        <Checkbox
+                          aria-label={`checkbox-${survey.id}`}
+                          onChange={() => onChange(survey.id)}
+                        />
+                      </TableCell>
+                    );
+                  }
 
-                    if (column.id === "role") {
-                      return (
-                        <TableCell key={`role-${survey.id}`} sx={{ fontWeight: 600 }}>
-                          {value}
-                        </TableCell>
-                      );
-                    }
+                  if (column.id === "role") {
+                    return (
+                      <TableCell key={`role-${survey.id}`} sx={{ fontWeight: 600 }}>
+                        {value}
+                      </TableCell>
+                    );
+                  }
 
-                    return <TableCell key={column.id}>{value ?? "NO DATA"}</TableCell>;
-                  })}
-                </TableRow>
-              );
-            })}
-            {isLoading && <LoadingCell columnLength={columns.length} />}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell align="right" colSpan={columns.length} sx={{ py: 4 }}>
-                <Button variant="contained" disabled={selectedIds.length === 0} onClick={onClick}>
-                  Associer
-                </Button>
-              </TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </Box>
+                  return <TableCell key={column.id}>{value ?? "NO DATA"}</TableCell>;
+                })}
+              </TableRow>
+            );
+          })}
+          {isLoading && <LoadingCell columnLength={columns.length} />}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell align="right" colSpan={columns.length} sx={{ py: 4 }}>
+              <Button variant="contained" disabled={selectedIds.length === 0} onClick={onClick}>
+                Associer
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 };