feat: add questioning page data (#97)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "platine-management",
   "private": true,
-  "version": "2.0.1",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/pages/QuestioningPage.tsx

@@ -44,12 +44,7 @@ export const QuestioningPage = () => {
     );
   }
 
-  const surveyUnitLabel =
-    questioning.surveyUnitIdentificationCode !== ""
-      ? questioning.surveyUnitIdentificationCode
-      : questioning.surveyUnitId;
-
-  const label = `${questioning.campaignId ?? ""} ${surveyUnitLabel ?? ""}`;
+  const label = `Interrogation ${questioning.questioningId}`;
   const breadcrumbs = [
     { href: "/", title: "Accueil" },
     { href: "/questionings", title: "Interrogations" },

src/types/api.ts

@@ -832,6 +832,8 @@ export type APISchemas = {
     listContactIdentifiers?: Array<string>
     surveyUnitId?: string
     surveyUnitIdentificationCode?: string
+    surveyUnitIdentificationName?: string
+    surveyUnitLabel?: string
     listEvents?: Array<APISchemas["QuestioningEventDto"]>
     lastEvent?: string
     /* Format: date-time */
@@ -1586,7 +1588,7 @@ export type APIEndpoints = {
     }
   }
   "/api/questionings/{id}/questioning-communications": {
-    responses: { get: {} }
+    responses: { get: Array<APISchemas["QuestioningCommunicationDto"]> }
     requests: {
       method?: "get"
       urlParams: {

src/ui/CardtitleWithIcon.tsx

@@ -10,7 +10,7 @@ type Props = {
 export const CardtitleWithIcon = ({ IconComponent, title }: Props) => {
   return (
     <Row spacing={2}>
-      <IconComponent />
+      <IconComponent alt="" />
       <Typography variant="headlineSmall" component="h2">
         {title}
       </Typography>

src/ui/FilterSelect.tsx

@@ -1,7 +1,7 @@
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
-import Select from "@mui/material/Select";
+import Select from "@mui/material/Select/Select";
 import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";
 
 type Props = {

src/ui/Form/SelectWithOptions.tsx

@@ -1,4 +1,5 @@
-import { OutlinedInput, Select, MenuItem, SelectChangeEvent } from "@mui/material";
+import { OutlinedInput, MenuItem } from "@mui/material";
+import Select, { SelectChangeEvent } from "@mui/material/Select/Select";
 
 type Option = string | { label: string; value: string };
 

src/ui/Questioning/AddStatusDialog.tsx

@@ -7,10 +7,10 @@ import {
   FormControl,
   InputLabel,
   MenuItem,
-  Select,
 } from "@mui/material";
 import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";
 import { collectStatus } from "../../constants/collectStatus.ts";
+import Select from "@mui/material/Select/Select";
 
 const options = collectStatus.filter(state => ["HC", "REFUSAL", "WASTE"].includes(state.value));
 

src/ui/Questioning/QuestioningCommentsCard.tsx

@@ -46,6 +46,10 @@ export const QuestioningCommentsCard = ({ questioning, refetch }: Props) => {
     "post",
   );
 
+  const comments = questioning.listComments
+    ? questioning.listComments.sort((a, b) => b.commentDate!.localeCompare(a.commentDate!))
+    : [];
+
   const handleChangeTab = (_: SyntheticEvent, newValue: Tab) => {
     setCurrentTab(newValue);
   };
@@ -105,9 +109,7 @@ export const QuestioningCommentsCard = ({ questioning, refetch }: Props) => {
           ))}
         </Tabs>
         <Stack sx={{ py: 2, px: 1 }} gap={0.5}>
-          {currentTab === Tab.Questioning && (
-            <CommentsList comments={questioning.listComments ?? []} sx={{ px: 2.5 }} />
-          )}
+          {currentTab === Tab.Questioning && <CommentsList comments={comments} sx={{ px: 2.5 }} />}
           {currentTab === Tab.SurveyUnit && <CommentListSU surveyUnitId={questioning.surveyUnitId} />}
         </Stack>
       </Stack>
@@ -137,5 +139,9 @@ export const CommentListSU = ({ surveyUnitId }: { surveyUnitId?: string }) => {
     );
   }
 
-  return <CommentsList comments={data.comments ?? []} sx={{ px: 2.5 }} />;
+  const comments = data.comments
+    ? data.comments.sort((a, b) => b.commentDate!.localeCompare(a.commentDate!))
+    : [];
+
+  return <CommentsList comments={comments} sx={{ px: 2.5 }} />;
 };

src/ui/Questioning/QuestioningInfos.tsx

@@ -1,36 +1,75 @@
-import { Button, Card, Stack, Typography } from "@mui/material";
+import { Button, Card, Divider, List, ListItem, ListItemText, Stack, Typography } from "@mui/material";
 import { Row } from "../Row.tsx";
 import { Link } from "../Link.tsx";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import { StatesCard } from "./StatesCard.tsx";
 import { QuestioningCommentsCard } from "./QuestioningCommentsCard.tsx";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { APISchemas } from "../../types/api.ts";
+import { CardtitleWithIcon } from "../CardtitleWithIcon.tsx";
 
 type Props = {
   questioning: APISchemas["QuestioningDetailsDto"];
   refetch: () => void;
 };
 
 export const QuestioningInfos = ({ questioning, refetch }: Props) => {
-  const surveyUnitLabel =
-    questioning.surveyUnitIdentificationCode !== ""
-      ? questioning.surveyUnitIdentificationCode
-      : questioning.surveyUnitId;
+  const surveyUnitLabel = questioning.surveyUnitLabel ? `${questioning.surveyUnitLabel} : ` : "";
+  const surveyUnitInformations =
+    questioning.surveyUnitLabel || questioning.surveyUnitIdentificationCode
+      ? `${questioning.surveyUnitIdentificationName} (${surveyUnitLabel}${questioning.surveyUnitIdentificationCode})`
+      : questioning.surveyUnitIdentificationName;
+
+  const sortedConctacts = questioning.listContactIdentifiers?.sort((a, b) => a.localeCompare(b)) ?? [];
 
   return (
     <Row gap={3} alignItems={"start"}>
       <Card sx={{ p: 3, flex: 1 }} elevation={2}>
         <Stack gap={2}>
-          <Typography variant={"headlineSmall"} component="h2">
-            Informations
-          </Typography>
-
+          <CardtitleWithIcon IconComponent={InfoOutlinedIcon} title={"Informations"} />
+          <List dense sx={{ py: 0 }}>
+            <ListItem sx={{ px: 0 }}>
+              <ListItemText
+                primary={
+                  <Typography variant="titleSmall" component="h3">
+                    Répondant(s)
+                  </Typography>
+                }
+              />
+            </ListItem>
+            <Divider variant="fullWidth" />
+            {questioning.listContactIdentifiers &&
+              sortedConctacts.map(contact => (
+                <ListItem
+                  key={contact}
+                  sx={{ px: 0 }}
+                  secondaryAction={
+                    <Button
+                      component={Link}
+                      to={`/contacts/${contact}`}
+                      sx={{ typography: "titleSmall" }}
+                      size="large"
+                      endIcon={<OpenInNewIcon />}
+                    >
+                      Voir
+                    </Button>
+                  }
+                >
+                  <div style={{ "width": "100%" }}>
+                    <ListItemText
+                      primary={<Typography variant="bodyMedium">{`#${contact}`}</Typography>}
+                    />
+                    <Divider variant="fullWidth" />
+                  </div>
+                </ListItem>
+              ))}
+          </List>
           <Stack gap={1} sx={{ pr: 2 }}>
             <Typography variant="titleSmall" component="h3">
               Unité enquêtée
             </Typography>
             <Row justifyContent={"space-between"}>
-              <Typography variant="bodyMedium">{surveyUnitLabel}</Typography>
+              <Typography variant="bodyMedium">{surveyUnitInformations}</Typography>
               <Button
                 component={Link}
                 to={`/survey-units/${questioning.surveyUnitId}`}

src/ui/Questioning/SearchQuestioningTableRow.tsx

@@ -40,11 +40,7 @@ export const SearchQuestioningTableRow = ({ questioning, stateFilter }: Props) =
           {questioning.listContactIdentifiers?.map(contact => `#${contact}`).join(", ")}
         </TableCell>
       )}
-      <TableCell>
-        {questioning.surveyUnitIdentificationCode !== ""
-          ? questioning.surveyUnitIdentificationCode
-          : questioning.surveyUnitId}
-      </TableCell>
+      <TableCell>{questioning.surveyUnitIdentificationCode}</TableCell>
       <TableCell>
         {questioning.lastEvent && (
           <Chip
@@ -80,7 +76,7 @@ export const SearchQuestioningTableRow = ({ questioning, stateFilter }: Props) =
           : "N/A"}
       </TableCell>
       {/* TODO use it when get quality data */}
-      {/* {stateFilter === "recovery" && <TableCell>{questioning.quality}</TableCell>} */}
+      {stateFilter === "recovery" && <TableCell>TODO DATA</TableCell>}
       <TableCell align="right">
         <ChevronRightIcon fontSize="navigateIcon" color="primary" />
       </TableCell>

src/ui/Search/FilterListBySelector.tsx

@@ -1,6 +1,7 @@
-import { Box, FormControl, MenuItem, Select, SelectChangeEvent } from "@mui/material";
+import { Box, FormControl, MenuItem } from "@mui/material";
 import { Row } from "../Row.tsx";
 import React from "react";
+import Select, { SelectChangeEvent } from "@mui/material/Select/Select";
 
 export const FilterListBySelector = () => {
   const [selectedOption, setSelectedOption] = React.useState("mostRecent");

src/ui/Search/SearchFilters.tsx

@@ -1,13 +1,13 @@
 import FormControl from "@mui/material/FormControl";
 import { Row } from "../Row.tsx";
 import InputLabel from "@mui/material/InputLabel";
-import Select from "@mui/material/Select";
 import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";
 import MenuItem from "@mui/material/MenuItem";
 import { SearchTextField } from "../SearchTextField.tsx";
 import { TextFieldProps } from "@mui/material/TextField";
 import { ListItemText } from "@mui/material";
 import CheckIcon from "@mui/icons-material/Check";
+import Select from "@mui/material/Select/Select";
 
 type Props = Pick<TextFieldProps, "sx"> & {
   hasResetButton: boolean;

src/ui/Search/SearchSurveySelect.tsx

@@ -1,7 +1,7 @@
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
-import Select, { SelectProps } from "@mui/material/Select";
+import Select, { SelectProps } from "@mui/material/Select/Select";
 import { useId } from "react";
 
 type Props = { options: string[] } & SelectProps;

src/ui/SearchTextField.tsx

@@ -5,6 +5,7 @@ import CloseIcon from "@mui/icons-material/Close";
 type Props = {
   hasResetButton: boolean;
   label: string;
+  onReset?: () => void;
   inputProps: (name: "searchParam") => {
     id: "searchParam";
     name: "searchParam";
@@ -13,7 +14,7 @@ type Props = {
   };
 };
 
-export const SearchTextField = ({ hasResetButton, label, inputProps }: Props) => {
+export const SearchTextField = ({ hasResetButton, label, inputProps, onReset }: Props) => {
   return (
     <TextField
       id="search-field"
@@ -28,11 +29,16 @@ export const SearchTextField = ({ hasResetButton, label, inputProps }: Props) =>
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">
-            {hasResetButton && (
-              <IconButton aria-label={"Réinitialiser la recherche"} type={"reset"} edge="end">
-                {<CloseIcon color="primary" />}
-              </IconButton>
-            )}
+            {hasResetButton &&
+              (onReset ? (
+                <IconButton aria-label={"Réinitialiser la recherche"} onClick={onReset} edge="end">
+                  {<CloseIcon color="primary" />}
+                </IconButton>
+              ) : (
+                <IconButton aria-label={"Réinitialiser la recherche"} type="reset" edge="end">
+                  {<CloseIcon color="primary" />}
+                </IconButton>
+              ))}
             <IconButton
               aria-label={"Lancer la recherche"}
               variant="contained"

src/ui/Survey/SurveyHeader.tsx

@@ -1,11 +1,12 @@
 import { Row } from "../Row.tsx";
-import { IconButton, MenuItem, Select, SelectChangeEvent, Stack, Typography } from "@mui/material";
+import { IconButton, MenuItem, Select, Stack, Typography } from "@mui/material";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import { useNavigate } from "react-router-dom";
 import { BinocularIcon } from "../Icon/BinocularIcon.tsx";
 import { useState } from "react";
 import { APISchemas } from "../../types/api.ts";
 import { useFetchQuery } from "../../hooks/useFetchQuery.ts";
+import { SelectChangeEvent } from "@mui/material/Select/Select";
 
 type Props = {
   survey: APISchemas["SurveyDto"];

src/ui/SurveyUnit/SurveyUnitCommentsCard.tsx

@@ -86,6 +86,14 @@ type CommentType = {
 } & Pick<StackProps, "sx">;
 
 export const CommentsList = ({ comments, sx }: CommentType) => {
+  if (comments.length === 0) {
+    return (
+      <Typography variant="titleSmall" color={theme.palette.text.tertiary} sx={{ px: 2 }}>
+        Aucun commentaire ajouté.
+      </Typography>
+    );
+  }
+
   return (
     comments?.length > 0 && (
       <List

src/ui/TableComponents.tsx

@@ -10,9 +10,9 @@ import { FormEventHandler } from "react";
 import { theme } from "../theme.tsx";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
-import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { FormControl, InputLabel, MenuItem } from "@mui/material";
 import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";
+import Select, { SelectChangeEvent } from "@mui/material/Select/Select";
 
 export interface Column {
   id: string;
@@ -79,11 +79,13 @@ const CustomPageSizeSelector = ({
     <FormControl sx={{ width: "160px", mr: 2 }} variant="filled">
       <InputLabel id={"selectPaginationLabel"}>{"Lignes par page"}</InputLabel>
       <Select
+        labelId="selectPaginationLabel"
         variant="filled"
         defaultValue={defaultValue.toString()}
         onChange={onChange}
         fullWidth
         disableUnderline
+        inputProps={{ "aria-labelledby": "selectPaginationLabel" }}
         IconComponent={props => <ExpandMoreOutlinedIcon {...props} sx={{ color: "text.primary" }} />}
       >
         {[10, 20, 50].map(pageSize => (