feat: use search questionings api

InseeFr · Nov 15, 2024 · 5f8a07c · 5f8a07c
1 parent 2d80b52
commit 5f8a07c
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 82 deletions.
diff --git a/src/pages/Search/SearchQuestionings.tsx b/src/pages/Search/SearchQuestionings.tsx
@@ -1,5 +1,9 @@
 import { FormEventHandler, useState } from "react";
-import { useGetSearchFilter, useSearchForm } from "../../hooks/useSearchFilter.ts";
+import {
+  useGetSearchFilter,
+  useSearchFilterParams,
+  useSearchForm,
+} from "../../hooks/useSearchFilter.ts";
 import Stack from "@mui/material/Stack";
 import { Row } from "../../ui/Row.tsx";
 import { theme } from "../../theme.tsx";
@@ -10,15 +14,30 @@ 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";
+
+const endpoint = "/api/questionings/search";
 
 export const SearchQuestionings = () => {
   const breadcrumbs = [{ href: "/", title: "Accueil" }, "Interrogations"];
 
   const [tab, setTab] = useState("me");
   const [stateFilter, setStateFilter] = useState("all");
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
 
   const { questionings: questioningFilter } = useGetSearchFilter();
 
+  const { data, isLoading } = useFetchQuery(endpoint, {
+    query: {
+      ...useSearchFilterParams("questionings"),
+      page: page,
+      pageSize: rowsPerPage,
+    },
+  });
+
+  const questionings = data?.content ?? [];
+
   const { onSubmit, onReset, inputProps, value } = useSearchForm("questionings", questioningFilter);
 
   const handleSubmit: FormEventHandler = e => {
@@ -31,8 +50,7 @@ export const SearchQuestionings = () => {
 
   const hasResetButton = value.searchParam !== "";
 
-  // TODO use real condition
-  const hasNoQuestioning = false;
+  const hasNoQuestioning = !isLoading && questionings.length === 0;
 
   return (
     <Stack>
@@ -103,9 +121,24 @@ export const SearchQuestionings = () => {
             <FilterSelect options={[]} label={"Dernière communication"} name={"lastCommunication"} />
           </Row>
           {hasNoQuestioning && (
-            <EmptyState isFiltered={hasResetButton} text={"Aucune interrogation trouvée."} />
+            <EmptyState
+              isFiltered={hasResetButton}
+              text={"Aucune interrogation trouvée."}
+              onReset={onReset}
+            />
+          )}
+          {!hasNoQuestioning && (
+            <SearchQuestioningTable
+              questionings={questionings}
+              stateFilter={stateFilter}
+              isLoading={isLoading}
+              totalCount={data?.totalElements ?? 0}
+              page={page}
+              setPage={setPage}
+              rowsPerPage={rowsPerPage}
+              setRowsPerPage={setRowsPerPage}
+            />
           )}
-          {!hasNoQuestioning && <SearchQuestioningTable stateFilter={stateFilter} />}
         </Stack>
       </form>
     </Stack>

diff --git a/src/types/api.ts b/src/types/api.ts
@@ -810,6 +810,36 @@ export type APISchemas = {
     messageSurveyOffline?: string
     messageInfoSurveyOffline?: string
   }
+  PageSearchQuestioningDto: {
+    /* Format: int64 */
+    totalElements?: number
+    /* Format: int32 */
+    totalPages?: number
+    first?: boolean
+    last?: boolean
+    pageable?: APISchemas["PageableObject"]
+    /* Format: int32 */
+    size?: number
+    content?: Array<APISchemas["SearchQuestioningDto"]>
+    /* Format: int32 */
+    number?: number
+    sort?: Array<APISchemas["SortObject"]>
+    /* Format: int32 */
+    numberOfElements?: number
+    empty?: boolean
+  }
+  SearchQuestioningDto: {
+    campaignId?: string
+    /* Format: int64 */
+    questioningId?: number
+    surveyUnitId?: string
+    surveyUnitIdentificationCode?: string
+    listContactIdentifiers?: Array<string>
+    lastEvent?: string
+    lastCommunication?: string
+    /* Format: date-time */
+    validationDate?: string
+  }
   AssistanceDto: { mailAssistance?: string; surveyUnitId?: string }
   Address: {
     StreetNumber?: string
@@ -873,6 +903,7 @@ export type APISchemas = {
     idPartitioning?: string
     questioningAccreditations?: Array<APISchemas["QuestioningAccreditation"]>
     questioningEvents?: Array<APISchemas["QuestioningEvent"]>
+    questioningCommunications?: Array<APISchemas["QuestioningCommunication"]>
     surveyUnit?: APISchemas["SurveyUnit"]
   }
   QuestioningAccreditation: {
@@ -885,6 +916,21 @@ export type APISchemas = {
     questioning?: APISchemas["Questioning"]
     main?: boolean
   }
+  QuestioningCommunication: {
+    /* Format: int64 */
+    id?: number
+    /* Format: date-time */
+    date?: string
+    type?:
+      | "COURRIER_OUVERTURE"
+      | "MAIL_OUVERTURE"
+      | "COURRIER_RELANCE"
+      | "MAIL_RELANCE"
+      | "COURRIER_MED"
+      | "COURRIER_CNR"
+    questioning?: APISchemas["Questioning"]
+    status?: "AUTOMATIC" | "MANUAL"
+  }
   QuestioningEvent: {
     /* Format: int64 */
     id?: number
@@ -1004,10 +1050,10 @@ export type APISchemas = {
     listCampaigns?: Array<string>
   }
   SearchContactDto: {
-    identifier?: string
-    email?: string
     firstName?: string
     lastName?: string
+    email?: string
+    identifier?: string
   }
   MyQuestioningDto: {
     identificationCode?: string
@@ -1418,12 +1464,14 @@ export type APIEndpoints = {
     responses: { get: APISchemas["SurveyUnitPage"] }
     requests: {
       method?: "get"
-      query?: {
-        param?: string
+      query: {
+        searchParam: string
+        /* id or code or name */
+        searchType: string
         /* Format: int32 */
         page?: number
         /* Format: int32 */
-        size?: number
+        pageSize?: number
         sort?: string
       }
     }
@@ -1482,6 +1530,29 @@ export type APIEndpoints = {
       }
     }
   }
+  "/api/questionings/{id}/questioning-communications": {
+    responses: { get: {} }
+    requests: {
+      method?: "get"
+      urlParams: {
+        /* Format: int64 */
+        id: number
+      }
+    }
+  }
+  "/api/questionings/search": {
+    responses: { get: APISchemas["PageSearchQuestioningDto"] }
+    requests: {
+      method?: "get"
+      query?: {
+        searchParam?: string
+        /* Format: int32 */
+        page?: number
+        /* Format: int32 */
+        pageSize?: number
+      }
+    }
+  }
   "/api/questioning/{id}/assistance": {
     responses: { get: APISchemas["AssistanceDto"] }
     requests: {
@@ -1624,8 +1695,9 @@ export type APIEndpoints = {
     responses: { get: APISchemas["ContactPage"] }
     requests: {
       method?: "get"
-      query?: {
-        param?: string
+      query: {
+        searchParam: string
+        searchType?: string
         /* Format: int32 */
         page?: number
         /* Format: int32 */

diff --git a/src/ui/Questioning/SearchQuestioningTable.tsx b/src/ui/Questioning/SearchQuestioningTable.tsx
@@ -1,52 +1,21 @@
 import {
   Paper,
   SelectChangeEvent,
+  Skeleton,
   Table,
   TableBody,
   TableCell,
   TableContainer,
   TableHead,
+  TableRow,
   TableSortLabel,
 } from "@mui/material";
 import { Column, CustomTableFooter, TableHeader } from "../TableComponents.tsx";
 import { useState } from "react";
 import { SearchQuestioningTableRow } from "./SearchQuestioningTableRow.tsx";
 import { theme } from "../../theme.tsx";
-
-const questioningsMock = [
-  {
-    questioningId: 1,
-    campaignId: "ARTI",
-    listContactIdentifiers: ["IDEC123", "IDEC223", "IDEC323", "IDEC423"],
-    surveyUnitIdentificationCode: "SIREN001",
-    surveyUnitId: "BBB001",
-    lastEvent: "HC",
-    lastCommunication: "COURRIER_RELANCE",
-    validationDate: "2024-07-19T07:23:20.156Z",
-    quality: "5",
-  },
-  {
-    questioningId: 2,
-    campaignId: "ARTI",
-    listContactIdentifiers: ["IDEC123"],
-    surveyUnitIdentificationCode: "SIRET/ID",
-    surveyUnitId: "BBB001",
-    lastEvent: "REFUSAL",
-    lastCommunication: "MAIL_OUVERTURE",
-    validationDate: undefined,
-    quality: "8",
-  },
-  {
-    questioningId: 3,
-    campaignId: "ARTI",
-    listContactIdentifiers: undefined,
-    surveyUnitId: "BBB001",
-    lastEvent: "PARTIELINT",
-    lastCommunication: "COURRIER_MED",
-    validationDate: undefined,
-    quality: "2",
-  },
-];
+import { APISchemas } from "../../types/api.ts";
+import { LoadingRow } from "../Contact/SearchContactTable.tsx";
 
 export const getCollectStateChipColor = (state?: string) => {
   switch (state) {
@@ -83,12 +52,26 @@ const columnsWithQuality: readonly Column[] = [
 ];
 
 type Props = {
+  questionings: APISchemas["SearchQuestioningDto"][];
   stateFilter: string;
+  isLoading: boolean;
+  totalCount: number;
+  setPage: (page: number) => void;
+  setRowsPerPage: (page: number) => void;
+  page: number;
+  rowsPerPage: number;
 };
 
-export const SearchQuestioningTable = ({ stateFilter }: Props) => {
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
+export const SearchQuestioningTable = ({
+  questionings,
+  stateFilter,
+  isLoading,
+  totalCount,
+  setPage,
+  setRowsPerPage,
+  rowsPerPage,
+  page,
+}: Props) => {
   const [order, setOrder] = useState<"asc" | "desc">();
 
   const handleChangePage = (_: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
@@ -105,11 +88,12 @@ export const SearchQuestioningTable = ({ stateFilter }: Props) => {
     setPage(0);
   };
 
-  const sortedQuestioning = order
-    ? questioningsMock.sort((a, b) =>
-        order === "asc" ? a.quality.localeCompare(b.quality) : b.quality.localeCompare(a.quality),
-      )
-    : questioningsMock;
+  // TODO use it when get quality data
+  // const sortedQuestioning = order
+  //   ? questionings.sort((a, b) =>
+  //       order === "asc" ? a.quality.localeCompare(b.quality) : b.quality.localeCompare(a.quality),
+  //     )
+  //   : questionings;
 
   return (
     <TableContainer component={Paper} elevation={2}>
@@ -148,20 +132,32 @@ export const SearchQuestioningTable = ({ stateFilter }: Props) => {
         ) : (
           <TableHeader columns={columns} />
         )}
+        {isLoading && (
+          <TableRow>
+            <TableCell>
+              <Skeleton />
+            </TableCell>
+            <TableCell>
+              <Skeleton />
+            </TableCell>
+            <TableCell>
+              <Skeleton />
+            </TableCell>
+            <LoadingRow />
+          </TableRow>
+        )}
         <TableBody>
-          {sortedQuestioning
-            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-            .map(questioning => (
-              <SearchQuestioningTableRow
-                key={questioning.questioningId}
-                questioning={questioning}
-                stateFilter={stateFilter}
-              />
-            ))}
+          {questionings.map(questioning => (
+            <SearchQuestioningTableRow
+              key={questioning.questioningId}
+              questioning={questioning}
+              stateFilter={stateFilter}
+            />
+          ))}
         </TableBody>
-        {sortedQuestioning.length > rowsPerPage && (
+        {totalCount > rowsPerPage * (page + 1) && (
           <CustomTableFooter
-            count={sortedQuestioning.length}
+            count={totalCount}
             rowsPerPage={rowsPerPage}
             page={page}
             labelDisplayedRows="interrogations affichées"