feat: rework HistoryDialog

InseeFr · Nov 15, 2024 · 1c9a8ac · 1c9a8ac
1 parent 140419e
commit 1c9a8ac
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 164 deletions.
diff --git a/src/pages/QuestioningPage.tsx b/src/pages/QuestioningPage.tsx
@@ -56,7 +56,7 @@ export const QuestioningPage = () => {
     label,
   ];
 
-  const hasNoQuestioningUrl = questioning.readOnlyUrl === null && questioning.readOnlyUrl === "";
+  const hasNoQuestioningUrl = questioning.readOnlyUrl === null || questioning.readOnlyUrl === "";
 
   return (
     <>

diff --git a/src/pages/Search/SearchQuestionings.tsx b/src/pages/Search/SearchQuestionings.tsx
@@ -11,8 +11,6 @@ import { Breadcrumbs } from "../../ui/Breadcrumbs.tsx";
 import { Divider, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
 import { SearchQuestioningTable } from "../../ui/Questioning/SearchQuestioningTable.tsx";
 import { EmptyState } from "../../ui/TableComponents.tsx";
-import { FilterSelect } from "../../ui/FilterSelect.tsx";
-import { SearchSelectStatus } from "../../ui/Questioning/SearchSelectStatus.tsx";
 import { SearchTextField } from "../../ui/SearchTextField.tsx";
 import { useFetchQuery } from "../../hooks/useFetchQuery.ts";
 
@@ -115,11 +113,12 @@ export const SearchQuestionings = () => {
             label={"Rechercher par unité enquêtée ou identifiant de connexion"}
             inputProps={inputProps}
           />
-          <Row gap={3}>
+          {/* TODO: use it later
+           <Row gap={3}>
             <FilterSelect options={[]} label={"Collecte"} name={"campaignId"} />
             <SearchSelectStatus />
             <FilterSelect options={[]} label={"Dernière communication"} name={"lastCommunication"} />
-          </Row>
+          </Row> */}
           {hasNoQuestioning && (
             <EmptyState
               isFiltered={hasResetButton}

diff --git a/src/ui/Questioning/HistoryDialog.tsx b/src/ui/Questioning/HistoryDialog.tsx
@@ -0,0 +1,32 @@
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import TableContainer from "@mui/material/TableContainer";
+import Table from "@mui/material/Table";
+import { ReactNode } from "react";
+
+type Props = {
+  onClose: () => void;
+  open: boolean;
+  title: string;
+  children: ReactNode;
+};
+
+export const HistoryDialog = ({ onClose, open, children, title }: Props) => {
+  return (
+    <Dialog onClose={onClose} open={open} sx={{ ".MuiPaper-root": { maxWidth: "715px" } }}>
+      <DialogTitle sx={{ pb: 2.5 }}>{title}</DialogTitle>
+      <DialogContent
+        sx={{
+          minWidth: "715px",
+          width: "fit-content",
+          height: "450px",
+        }}
+      >
+        <TableContainer>
+          <Table>{children}</Table>
+        </TableContainer>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/ui/Questioning/LastComunicationHistory.tsx b/src/ui/Questioning/LastComunicationHistory.tsx
@@ -1,10 +1,7 @@
-import { Chip, Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import TableContainer from "@mui/material/TableContainer";
+import { Chip, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
 import { APISchemas } from "../../types/api.ts";
 import { communicationsList } from "../../constants/communications.ts";
+import { HistoryDialog } from "./HistoryDialog.tsx";
 
 type Props = {
   questioning: APISchemas["QuestioningDetailsDto"];
@@ -17,58 +14,43 @@ export const LastCommunicationHistory = ({ questioning, onClose, open }: Props)
     questioning.listCommunications?.sort((a, b) => b.date!.localeCompare(a.date!)) ?? [];
 
   return (
-    <Dialog onClose={onClose} open={open} sx={{ ".MuiPaper-root": { maxWidth: "715px" } }}>
-      <DialogTitle sx={{ pb: 2.5 }}>Historique des communications</DialogTitle>
-      <DialogContent
-        sx={{
-          minWidth: "715px",
-          width: "fit-content",
-          height: "450px",
-        }}
-      >
-        <TableContainer>
-          <Table>
-            <TableHead sx={{ backgroundColor: "#EBEFF5" }}>
-              <TableRow>
-                <TableCell sx={{ typography: "titleSmall", width: "115px" }}>Date</TableCell>
-                <TableCell sx={{ typography: "titleSmall", width: "75px" }}>Heure</TableCell>
-                <TableCell sx={{ typography: "titleSmall", width: "120px" }}>Type</TableCell>
-                <TableCell sx={{ typography: "titleSmall" }}>Type de communication</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {sortedCommunications.map(communication => {
-                const date =
-                  communication.date && new Date(Date.parse(communication.date)).toLocaleDateString();
-                const hour =
-                  communication.date && new Date(Date.parse(communication.date)).toLocaleTimeString();
+    <HistoryDialog onClose={onClose} open={open} title={"Historique des communications"}>
+      <TableHead sx={{ backgroundColor: "#EBEFF5" }}>
+        <TableRow>
+          <TableCell sx={{ typography: "titleSmall", width: "115px" }}>Date</TableCell>
+          <TableCell sx={{ typography: "titleSmall", width: "75px" }}>Heure</TableCell>
+          <TableCell sx={{ typography: "titleSmall", width: "120px" }}>Type</TableCell>
+          <TableCell sx={{ typography: "titleSmall" }}>Type de communication</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {sortedCommunications.map(communication => {
+          const date =
+            communication.date && new Date(Date.parse(communication.date)).toLocaleDateString();
+          const hour =
+            communication.date && new Date(Date.parse(communication.date)).toLocaleTimeString();
 
-                return (
-                  <TableRow key={communication.id}>
-                    <TableCell>{date}</TableCell>
-                    <TableCell>{hour}</TableCell>
-                    <TableCell>
-                      {communication.status === "AUTOMATIC" ? "Automatique" : "Manuel"}
-                    </TableCell>
-                    <TableCell>
-                      <Chip
-                        sx={{
-                          typography: "titleSmall",
-                          textOverflow: "ellipsis",
-                        }}
-                        label={
-                          communicationsList.find(com => com.value === communication.type)?.label ??
-                          "Aucun état"
-                        }
-                      />
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </DialogContent>
-    </Dialog>
+          return (
+            <TableRow key={communication.id}>
+              <TableCell>{date}</TableCell>
+              <TableCell>{hour}</TableCell>
+              <TableCell>{communication.status === "AUTOMATIC" ? "Automatique" : "Manuel"}</TableCell>
+              <TableCell>
+                <Chip
+                  sx={{
+                    typography: "titleSmall",
+                    textOverflow: "ellipsis",
+                  }}
+                  label={
+                    communicationsList.find(com => com.value === communication.type)?.label ??
+                    "Aucun état"
+                  }
+                />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </HistoryDialog>
   );
 };
diff --git a/src/ui/Questioning/QuestioningCommentsCard.tsx b/src/ui/Questioning/QuestioningCommentsCard.tsx
@@ -13,9 +13,10 @@ import { QuestioningCommentDialog } from "./QuestioningCommentDialog.tsx";
 import { useFetchMutation } from "../../hooks/useFetchQuery.ts";
 import { useQueryClient } from "@tanstack/react-query";
 import { useMaybeUser } from "../../hooks/useAuth.ts";
+import { APISchemas } from "../../types/api.ts";
 
 type Props = {
-  questioning: any;
+  questioning: APISchemas["QuestioningDetailsDto"];
 };
 
 enum Tab {
@@ -53,13 +54,13 @@ export const QuestioningCommentsCard = ({ questioning }: Props) => {
       return;
     }
 
-    if (category === "SurveyUnit") {
+    if (category === "SurveyUnit" && questioning.surveyUnitId && questioning.surveyUnitId !== "") {
       await mutateAsyncSurveyUnit({
         body: {
           comment,
           author: `${user?.given_name} ${user?.family_name}`,
         },
-        urlParams: { id: questioning.idSu },
+        urlParams: { id: questioning.surveyUnitId },
       });
 
       queryClient.invalidateQueries({ queryKey: ["/api/survey-units/{id}"] });
@@ -89,10 +90,12 @@ export const QuestioningCommentsCard = ({ questioning }: Props) => {
         </Tabs>
         <Stack sx={{ py: 2, px: 1 }} gap={0.5}>
           {currentTab === Tab.Questioning && (
-            <CommentsList comments={questioning.questioningComments} sx={{ px: 2.5 }} />
+            // TODO: use data when get comments
+            <CommentsList comments={[]} sx={{ px: 2.5 }} />
           )}
           {currentTab === Tab.SurveyUnit && (
-            <CommentsList comments={questioning.surveyUnitComments} sx={{ px: 2.5 }} />
+            // TODO: use data when get comments
+            <CommentsList comments={[]} sx={{ px: 2.5 }} />
           )}
         </Stack>
       </Stack>

diff --git a/src/ui/Questioning/SearchSelectStatus.tsx b/src/ui/Questioning/SearchSelectStatus.tsx
diff --git a/src/ui/Questioning/StatusHistory.tsx b/src/ui/Questioning/StatusHistory.tsx
@@ -1,11 +1,8 @@
-import { Chip, Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import TableContainer from "@mui/material/TableContainer";
+import { Chip, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
 import { getCollectStateChipColor } from "./SearchQuestioningTable.tsx";
 import { collectStatus } from "../../constants/collectStatus.ts";
 import { APISchemas } from "../../types/api.ts";
+import { HistoryDialog } from "./HistoryDialog.tsx";
 
 type Props = {
   onClose: () => void;
@@ -18,66 +15,53 @@ export const StatusHistory = ({ onClose, open, questioning }: Props) => {
     questioning.listEvents?.sort((a, b) => b.eventDate!.localeCompare(a.eventDate!)) ?? [];
 
   return (
-    <Dialog onClose={onClose} open={open} sx={{ ".MuiPaper-root": { maxWidth: "715px" } }}>
-      <DialogTitle sx={{ pb: 2.5 }}>Historique des statuts</DialogTitle>
-      <DialogContent
-        sx={{
-          minWidth: "715px",
-          width: "fit-content",
-          height: "450px",
-        }}
-      >
-        <TableContainer>
-          <Table>
-            <TableHead sx={{ backgroundColor: "#EBEFF5" }}>
-              <TableRow>
-                <TableCell sx={{ typography: "titleSmall", width: "115px" }}>Date</TableCell>
-                <TableCell sx={{ typography: "titleSmall", width: "75px" }}>Heure</TableCell>
-                <TableCell sx={{ typography: "titleSmall", width: "120px" }}>Type</TableCell>
-                <TableCell sx={{ typography: "titleSmall" }}>Statut</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {sortedStatus.map(statusElement => {
-                const date =
-                  statusElement.eventDate &&
-                  new Date(Date.parse(statusElement.eventDate)).toLocaleDateString();
-                const hour =
-                  statusElement.eventDate &&
-                  new Date(Date.parse(statusElement.eventDate)).toLocaleTimeString();
+    <HistoryDialog onClose={onClose} open={open} title={"Historique des statuts"}>
+      <TableHead sx={{ backgroundColor: "#EBEFF5" }}>
+        <TableRow>
+          <TableCell sx={{ typography: "titleSmall", width: "115px" }}>Date</TableCell>
+          <TableCell sx={{ typography: "titleSmall", width: "75px" }}>Heure</TableCell>
+          <TableCell sx={{ typography: "titleSmall", width: "120px" }}>Type</TableCell>
+          <TableCell sx={{ typography: "titleSmall" }}>Statut</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {sortedStatus.map(statusElement => {
+          const date =
+            statusElement.eventDate &&
+            new Date(Date.parse(statusElement.eventDate)).toLocaleDateString();
+          const hour =
+            statusElement.eventDate &&
+            new Date(Date.parse(statusElement.eventDate)).toLocaleTimeString();
 
-                const source =
-                  typeof statusElement.payload === "object" && "source" in statusElement.payload
-                    ? statusElement.payload.source
-                    : undefined;
-                const type = source === "platine-gestion" ? "Manuel" : "Automatique";
+          const source =
+            typeof statusElement.payload === "object" && "source" in statusElement.payload
+              ? statusElement.payload.source
+              : undefined;
+          const type = source === "platine-gestion" ? "Manuel" : "Automatique";
 
-                return (
-                  <TableRow key={statusElement.id}>
-                    <TableCell>{date}</TableCell>
-                    <TableCell>{hour}</TableCell>
-                    <TableCell>{type} </TableCell>
-                    <TableCell>
-                      <Chip
-                        sx={{
-                          typography: "titleSmall",
+          return (
+            <TableRow key={statusElement.id}>
+              <TableCell>{date}</TableCell>
+              <TableCell>{hour}</TableCell>
+              <TableCell>{type} </TableCell>
+              <TableCell>
+                <Chip
+                  sx={{
+                    typography: "titleSmall",
 
-                          textOverflow: "ellipsis",
-                        }}
-                        label={
-                          collectStatus.find(state => state.value === statusElement.type)?.label ??
-                          "Aucun état"
-                        }
-                        color={getCollectStateChipColor(statusElement.type)}
-                      />
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </DialogContent>
-    </Dialog>
+                    textOverflow: "ellipsis",
+                  }}
+                  label={
+                    collectStatus.find(state => state.value === statusElement.type)?.label ??
+                    "Aucun état"
+                  }
+                  color={getCollectStateChipColor(statusElement.type)}
+                />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </HistoryDialog>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,7 @@ export const QuestioningPage = () => { @@
         label,
       ];
-      const hasNoQuestioningUrl = questioning.readOnlyUrl === null && questioning.readOnlyUrl === "";
+      const hasNoQuestioningUrl = questioning.readOnlyUrl === null || questioning.readOnlyUrl === "";
       return (
         <>
@@ Expand Down @@