rework contact features (#85)

* rework address form

* rework collectStateHistory component

* add reset filters feature

* remove role in su contact cards and possibility to delete PND state

* bump version

package.json

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

src/hooks/useFetchQuery.ts

@@ -80,6 +80,7 @@ export function useInfiniteFetchQuery<Path extends APIPaths, Options extends API
   return {
     ...result,
     results,
+    count: result?.data?.pages[0]?.totalElements,
   };
 }
 

src/hooks/useSearchFilter.ts

@@ -1,7 +1,8 @@
+import { FormEventHandler, useState } from "react";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 
-const base = {
+export const base = {
   contacts: {
     identifier: "",
     name: "",
@@ -15,9 +16,9 @@ const base = {
     identificationName: "",
   },
   surveys: {
-    idSource: undefined as undefined | string,
+    idSource: "",
     year: undefined as undefined | number,
-    periodicity: undefined as undefined | string,
+    periodicity: "",
   },
 };
 
@@ -34,6 +35,66 @@ export function useSetSearchFilter() {
   return useSearchFilter(v => v.setFilter);
 }
 
+export function useGetSearchFilter() {
+  return useSearchFilter(v => v);
+}
+
 export function useSearchFilterParams<K extends Key>(name: K): State[K] {
   return useSearchFilter(v => v[name]);
 }
+
+/* 
+  Hook to manage filter states more efficiently 
+
+  example: 
+    const { onSubmit, onReset, inputProps } = useSearchForm("contacts", {
+      identifier: "",
+      name: "",
+      email: "",
+      city: "",
+      function: "",
+    });
+
+    <form onSubmit={onSubmit} onReset={onReset}>
+      <TextField
+        label="Identifiant du contact"
+        {...inputProps("identifier")}
+      />
+      <TextField 
+        label="Nom/prénom" 
+        {...inputProps("name")} 
+      />
+      ...
+    </form>
+*/
+
+export function useSearchForm<K extends Key>(key: K, initialValue: State[K]) {
+  const [value, setValue] = useState(initialValue);
+  const setFilter = useSetSearchFilter();
+
+  const onSubmit: FormEventHandler = e => {
+    e.preventDefault();
+    setFilter(key, value);
+  };
+
+  const onReset: FormEventHandler = e => {
+    e.preventDefault();
+    setFilter(key, base[key]);
+    setValue(base[key]);
+  };
+
+  return {
+    value,
+    onSubmit,
+    onReset,
+    inputProps: (name: keyof State[K]) => ({
+      id: name,
+      name: name,
+      value: value[name],
+      onChange: (e: any) => setValue({ ...value, [name]: e.target.value }),
+    }),
+    handler: (name: keyof State[K]) => {
+      return (e: any) => setValue({ ...value, [name]: e.target.value });
+    },
+  };
+}

src/pages/ContactPage.tsx

@@ -21,7 +21,7 @@ enum Tab {
 
 const TabNames = {
   [Tab.Infos]: "Infos contact",
-  [Tab.Surveys]: "Interrogation(s)",
+  [Tab.Surveys]: "Questionnaire(s)",
   [Tab.Ids]: "Gestion des identifiants",
   [Tab.Permissions]: "Gestion des droits",
 };

src/pages/Search/SearchContacts.tsx

@@ -29,13 +29,15 @@ export const SearchContacts = () => {
     hasNextPage,
     fetchNextPage,
     isLoading,
+    count,
   } = useInfiniteFetchQuery(endpoint, {
     query: { ...useSearchFilterParams("contacts"), pageSize: 20, sort: "identifier" },
   });
   const [tab, setTab] = useState("me");
+
   return (
     <Stack spacing={3} sx={{ minHeight: 0 }}>
-      <Row>
+      <Row justifyContent={"space-between"}>
         <ToggleButtonGroup value={tab} exclusive onChange={(_, v) => setTab(v)}>
           <ToggleButton value="me" aria-label="left aligned">
             Mes contacts
@@ -44,6 +46,7 @@ export const SearchContacts = () => {
             Tout
           </ToggleButton>
         </ToggleButtonGroup>
+        {count && <Typography variant="titleSmall">résultat: {count} contact(s)</Typography>}
       </Row>
       {isLoading && (
         <Row justifyContent={"space-around"} height={"100%"}>

src/pages/Search/SearchSurveyUnits.tsx

@@ -1,5 +1,4 @@
 import { Box, CardActionArea, CircularProgress, Stack } from "@mui/material";
-import { FilterListBySelector } from "../../ui/Search/FilterListBySelector.tsx";
 import { Row } from "../../ui/Row";
 import { useInfiniteFetchQuery } from "../../hooks/useFetchQuery.ts";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
@@ -24,6 +23,7 @@ export const SearchSurveyUnits = () => {
     hasNextPage,
     fetchNextPage,
     isLoading,
+    count,
   } = useInfiniteFetchQuery(endpoint, {
     query: useSearchFilterParams("surveyUnits"),
   });
@@ -40,7 +40,7 @@ export const SearchSurveyUnits = () => {
             Tout
           </ToggleButton>
         </ToggleButtonGroup>
-        <FilterListBySelector />
+        {count && <Typography variant="titleSmall">résultat: {count} unité(s) enquêtée(s)</Typography>}
       </Row>
       {isLoading && (
         <Row justifyContent={"space-around"} height={"100%"}>

src/theme.tsx

@@ -104,6 +104,7 @@ declare module "@mui/material/SvgIcon" {
     headerSinglePage: true;
     cardTitle: true;
     smallIcon: true;
+    linkIcon: true;
   }
   interface SvgIconPropsColorOverrides {
     yellow: true;
@@ -305,6 +306,12 @@ export const theme = createTheme({
             fontSize: 20,
           },
         },
+        {
+          props: { fontSize: "linkIcon" },
+          style: {
+            fontSize: 14,
+          },
+        },
       ],
     },
     MuiTab: {
@@ -405,6 +412,7 @@ export const theme = createTheme({
       styleOverrides: {
         root: {
           background: "#FFF",
+          color: palette.text.secondary,
         },
         sizeSmall: {
           ...typography.bodyMedium,

src/ui/AddressInformations.tsx

@@ -14,25 +14,22 @@ export const AddressInformations = ({ identificationName, address }: Props) => {
   const isCodeBoxDisplayed =
     address?.zipCode || address?.cityName || address?.cedexCode || address?.cedexName;
 
-  const isSupplementDisplayed = address?.addressSupplement || address?.specialDistribution;
   return (
     <Stack spacing={1} typography={"bodyMedium"}>
       {identificationName && (
         <Typography variant="titleSmall">{identificationName.toUpperCase()}</Typography>
       )}
+      {address?.addressSupplement && <Box component={"span"}>{address?.addressSupplement}</Box>}
       {isStreetBoxDisplayed && (
         <Box component={"span"}>
           {address?.streetNumber} {address?.repetitionIndex} {address?.streetType} {address?.streetName}
         </Box>
       )}
-      {isSupplementDisplayed && (
-        <Box component={"span"}>
-          {address?.addressSupplement} {address?.specialDistribution}
-        </Box>
-      )}
+      {address?.specialDistribution && <Box component={"span"}>{address?.specialDistribution}</Box>}
       {isCodeBoxDisplayed && (
         <Box component={"span"}>
-          {address?.zipCode} {address?.cityName} {address?.cedexCode} {address?.cedexName}
+          {address?.zipCode} {address?.cityName?.toLocaleUpperCase()} {address?.cedexCode}
+          {address?.cedexName?.toLocaleUpperCase()}
         </Box>
       )}
       <Box component={"span"}>{address?.countryName}</Box>

src/ui/Contact/AddRightsForm.tsx

@@ -83,18 +83,21 @@ export const AddRightsForm = ({ contact }: Props) => {
 
             <SelectWithOptions
               options={[]}
+              value={fieldsData.idSource}
               label={"Source"}
               name={"idSource"}
               onChange={e => setFieldsData({ ...fieldsData, idSource: e.target.value })}
             />
             <SelectWithOptions
               options={[]}
+              value={fieldsData.year}
               label={"Millésime"}
               name={"year"}
               onChange={e => setFieldsData({ ...fieldsData, year: e.target.value })}
             />
             <SelectWithOptions
               options={[]}
+              value={fieldsData.periodicity}
               label={"Période"}
               name={"periodicity"}
               onChange={e => setFieldsData({ ...fieldsData, periodicity: e.target.value })}

src/ui/Contact/CollectStateHistory.tsx

@@ -1,13 +1,15 @@
-import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
+import { IconButton, Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import TableContainer from "@mui/material/TableContainer";
 import { CollectStateSelect, collectStates } from "./CollectStateSelect";
-import { useFetchQuery } from "../../hooks/useFetchQuery";
+import { useFetchMutation, useFetchQuery } from "../../hooks/useFetchQuery";
 import { Row } from "../Row";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import { useState } from "react";
 
 type Props = {
   onClose: () => void;
@@ -18,23 +20,46 @@ type Props = {
 };
 
 export const CollectStateHistory = ({ onClose, open, questioningId, surveyName, onSelect }: Props) => {
-  const { data: states } = useFetchQuery("/api/questionings/{id}/questioning-events", {
+  const [dialog, setDialog] = useState<number>();
+
+  const { data: states, refetch } = useFetchQuery("/api/questionings/{id}/questioning-events", {
     urlParams: {
       id: parseInt(questioningId),
     },
   });
 
+  const { mutateAsync, isPending } = useFetchMutation(
+    "/api/questionings/questioning-events/{id}",
+    "delete",
+  );
+
   if (!states) {
     return;
   }
 
+  const onValidate = async (value: string) => {
+    await onSelect(value);
+    refetch();
+  };
+
+  const onDelete = async (id?: number) => {
+    if (!id) {
+      return;
+    }
+    await mutateAsync({
+      urlParams: { id },
+    });
+    setDialog(undefined);
+    refetch();
+  };
+
   const sortedStates = states.sort((a, b) => b.eventDate!.localeCompare(a.eventDate!));
 
   return (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>
         <Row justifyContent={"space-between"}>
-          Historique {surveyName} <CollectStateSelect onSelect={onSelect} />
+          Historique {surveyName} <CollectStateSelect onValidate={onValidate} />
         </Row>
       </DialogTitle>
       <DialogContent
@@ -50,6 +75,7 @@ export const CollectStateHistory = ({ onClose, open, questioningId, surveyName,
                 <TableCell sx={{ typography: "titleSmall" }}>Date</TableCell>
                 <TableCell sx={{ typography: "titleSmall" }}>Heure</TableCell>
                 <TableCell sx={{ typography: "titleSmall" }}>Statut</TableCell>
+                <TableCell sx={{ typography: "titleSmall" }}>Supprimer</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -63,6 +89,24 @@ export const CollectStateHistory = ({ onClose, open, questioningId, surveyName,
                     <TableCell>{date}</TableCell>
                     <TableCell>{hour}</TableCell>
                     <TableCell>{collectStates.find(cs => cs.value === state.type)?.label}</TableCell>
+                    {state.type && ["VALPAP", "HC", "REFUSAL", "WASTE"].includes(state.type) && (
+                      <TableCell align="center">
+                        <IconButton
+                          aria-label="supprimer"
+                          color="inherit"
+                          onClick={() => setDialog(state.id)}
+                          disabled={isPending}
+                        >
+                          <DeleteOutlineIcon />
+                        </IconButton>
+                        <DeleteDialog
+                          onClose={() => setDialog(undefined)}
+                          onDelete={() => onDelete(state.id)}
+                          open={dialog === state.id}
+                          state={state.type}
+                        />
+                      </TableCell>
+                    )}
                   </TableRow>
                 );
               })}
@@ -78,3 +122,34 @@ export const CollectStateHistory = ({ onClose, open, questioningId, surveyName,
     </Dialog>
   );
 };
+
+type DeleteDialogProps = {
+  onClose: () => void;
+  onDelete: () => void;
+  open: boolean;
+  state: string;
+};
+
+const DeleteDialog = ({ onClose, open, state, onDelete }: DeleteDialogProps) => {
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <DialogContent
+        sx={{
+          width: "350px",
+          height: "fit-content",
+          py: 4,
+        }}
+      >
+        Êtes-vous sûr de vouloir supprimer l'état "{collectStates.find(s => s.value === state)?.label}" ?
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outlined" onClick={onClose}>
+          Annuler
+        </Button>
+        <Button variant="contained" onClick={onDelete}>
+          Valider
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};