refactor: refacto of patientfilter and chip - Ref gestion-de-projet#2119

* fix: remove all patients filter - Ref gestion-de-projet#2119 * checkbox replace radio buttons
aphp · Jul 28, 2023 · 6752f0d · 6752f0d
1 parent 6f12cc2
commit 6752f0d
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 130 deletions.
diff --git a/src/components/Dashboard/PatientList/PatientList.tsx b/src/components/Dashboard/PatientList/PatientList.tsx
@@ -22,7 +22,6 @@ import {
   PatientFilters as PatientFiltersType,
   SearchByTypes,
   SimpleChartDataType,
-  VitalStatus,
   DTTB_ResultsType as ResultsType
 } from 'types'
 
@@ -63,9 +62,9 @@ const PatientList: React.FC<PatientListProps> = ({
   const [open, setOpen] = useState(false)
 
   const [filters, setFilters] = useState<PatientFiltersType>({
-    gender: null,
+    gender: [],
     birthdatesRanges: ['', ''],
-    vitalStatus: null
+    vitalStatus: []
   })
 
   const [order, setOrder] = useState<Order>({
@@ -160,12 +159,12 @@ const PatientList: React.FC<PatientListProps> = ({
     }
   }
 
-  const handleDeleteChip = (filterName: string) => {
+  const handleDeleteChip = <S extends string, T>(filterName: S, value?: T) => {
     switch (filterName) {
       case 'gender':
         setFilters((prevFilters) => ({
           ...prevFilters,
-          gender: null
+          gender: [...prevFilters.gender.filter((elem) => elem !== value)]
         }))
         break
       case 'birthdates':
@@ -177,7 +176,7 @@ const PatientList: React.FC<PatientListProps> = ({
       case 'vitalStatus':
         setFilters((prevFilters) => ({
           ...prevFilters,
-          vitalStatus: VitalStatus.all
+          vitalStatus: [...prevFilters.vitalStatus.filter((elem) => elem !== value)]
         }))
         break
     }
@@ -224,13 +223,14 @@ const PatientList: React.FC<PatientListProps> = ({
         total={patientsResult.nb}
       />
 
-      <PatientFilters
-        open={open}
-        onClose={() => setOpen(false)}
-        onSubmit={() => setOpen(false)}
-        filters={filters}
-        onChangeFilters={setFilters}
-      />
+      {open && (
+        <PatientFilters
+          onClose={() => setOpen(false)}
+          onSubmit={() => setOpen(false)}
+          filters={filters}
+          onChangeFilters={setFilters}
+        />
+      )}
     </Grid>
   )
 }

diff --git a/src/components/DataTable/DataTablePatient.tsx b/src/components/DataTable/DataTablePatient.tsx
@@ -9,7 +9,7 @@ import { ReactComponent as UnknownIcon } from 'assets/icones/autre-inconnu.svg'
 
 import DataTable from 'components/DataTable/DataTable'
 
-import { CohortPatient, Column, Order, PatientGenderKind } from 'types'
+import { CohortPatient, Column, Order, GenderStatus } from 'types'
 
 import { getAge } from 'utils/age'
 import { capitalizeFirstLetter } from 'utils/capitalize'
@@ -115,9 +115,7 @@ const DataTablePatientLine: React.FC<{
       }
     >
       <TableCell align="center">
-        {patient.gender && (
-          <PatientGender gender={patient.gender as PatientGenderKind} className={classes.genderIcon} />
-        )}
+        {patient.gender && <PatientGender gender={patient.gender as GenderStatus} className={classes.genderIcon} />}
       </TableCell>
       <TableCell>{deidentified ? 'Prénom' : capitalizeFirstLetter(patient.name?.[0].given?.[0])}</TableCell>
       <TableCell>{deidentified ? 'Nom' : patient.name?.map((e) => e.family).join(' ')}</TableCell>
@@ -156,16 +154,16 @@ const DataTablePatientLine: React.FC<{
 export default DataTablePatient
 
 type PatientGenderProps = {
-  gender?: PatientGenderKind
+  gender?: GenderStatus
   className?: string
 }
 
 const PatientGender: React.FC<PatientGenderProps> = ({ gender, className }) => {
   switch (gender) {
-    case PatientGenderKind._male:
+    case GenderStatus.MALE:
       return <MaleIcon className={className} />
 
-    case PatientGenderKind._female:
+    case GenderStatus.FEMALE:
       return <FemaleIcon className={className} />
 
     default:

diff --git a/src/components/Filters/PatientFilters/PatientFilters.tsx b/src/components/Filters/PatientFilters/PatientFilters.tsx
@@ -1,61 +1,67 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import {
   Button,
+  Checkbox,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   FormControlLabel,
+  FormGroup,
   Grid,
-  Radio,
-  RadioGroup,
   Typography
 } from '@mui/material'
 
-import { PatientFilters as PatientFiltersType, PatientGenderKind, VitalStatus } from 'types'
+import { PatientFilters as PatientFiltersType, GenderStatus, VitalStatus } from 'types'
 
 import useStyles from './styles'
 import { InputAgeRange } from '../../Inputs'
 
 type PatientFiltersProps = {
-  open: boolean
   onClose: () => void
   onSubmit: () => void
   filters: PatientFiltersType
   onChangeFilters: (newFilters: PatientFiltersType) => void
 }
 
-const PatientFilters: React.FC<PatientFiltersProps> = ({ open, onClose, onSubmit, filters, onChangeFilters }) => {
+const PatientFilters: React.FC<PatientFiltersProps> = ({ onClose, onSubmit, filters, onChangeFilters }) => {
   const { classes } = useStyles()
 
-  const [_gender, setGender] = useState<PatientGenderKind | null>(filters.gender)
   const [birthdatesRanges, setBirthdatesRanges] = useState<[string, string]>(filters.birthdatesRanges)
-  const [_vitalStatus, setVitalStatus] = useState<VitalStatus | null>(filters.vitalStatus)
+  const [gender, setGender] = useState<GenderStatus[]>(filters.gender)
+  const [vitalStatus, setVitalStatus] = useState<VitalStatus[]>(filters.vitalStatus)
 
   const [error, setError] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
 
-  useEffect(() => {
-    setGender(filters.gender)
-    setBirthdatesRanges(filters.birthdatesRanges)
-    setVitalStatus(filters.vitalStatus)
-    _onError(false)
-  }, [open]) // eslint-disable-line
+  const checkIfChecked = <T,>(value: T, arr: T[]): boolean => {
+    return arr.includes(value)
+  }
 
-  const _onChangeGender = (event: React.ChangeEvent<HTMLInputElement>, value: string) => {
-    setGender(value as PatientGenderKind)
+  const onChangeGender = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value as GenderStatus
+    if (gender.includes(value)) {
+      setGender([...gender.filter((elem) => elem !== value)])
+    } else {
+      setGender([...gender, value])
+    }
   }
 
-  const _onChangeVitalStatus = (event: React.ChangeEvent<HTMLInputElement>, value: string) => {
-    setVitalStatus(value as VitalStatus)
+  const onChangeVitalStatus = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value as VitalStatus
+    if (vitalStatus.includes(value)) {
+      setVitalStatus([...vitalStatus.filter((elem) => elem !== value)])
+    } else {
+      setVitalStatus([...vitalStatus, value])
+    }
   }
 
   const _onSubmit = () => {
     onChangeFilters({
-      gender: _gender,
+      gender: gender,
       birthdatesRanges: birthdatesRanges,
-      vitalStatus: _vitalStatus
+      vitalStatus: vitalStatus
     })
 
     onSubmit()
@@ -67,21 +73,31 @@ const PatientFilters: React.FC<PatientFiltersProps> = ({ open, onClose, onSubmit
   }
 
   return (
-    <Dialog open={open} onClose={onClose}>
+    <Dialog open onClose={onClose}>
       <DialogTitle>Filtrer les patients :</DialogTitle>
       <DialogContent className={classes.dialog}>
         <Grid container direction="column" className={classes.filter}>
           <Typography variant="h3">Genre :</Typography>
-          <RadioGroup name="Gender" value={_gender} onChange={_onChangeGender} row={true}>
-            <FormControlLabel value={PatientGenderKind._male} control={<Radio color="secondary" />} label="Hommes" />
-            <FormControlLabel value={PatientGenderKind._female} control={<Radio color="secondary" />} label="Femmes" />
-            <FormControlLabel value={PatientGenderKind._other} control={<Radio color="secondary" />} label="Autres" />
+          <FormGroup onChange={onChangeGender} row={true}>
+            <FormControlLabel
+              checked={checkIfChecked(GenderStatus.MALE, gender)}
+              value={GenderStatus.MALE}
+              control={<Checkbox color="secondary" />}
+              label="Hommes"
+            />
+            <FormControlLabel
+              checked={checkIfChecked(GenderStatus.FEMALE, gender)}
+              value={GenderStatus.FEMALE}
+              control={<Checkbox color="secondary" />}
+              label="Femmes"
+            />
             <FormControlLabel
-              value={PatientGenderKind._unknown}
-              control={<Radio color="secondary" />}
-              label="Tous les genres"
+              checked={checkIfChecked(`${GenderStatus.OTHER},${GenderStatus.UNKNOWN}`, gender)}
+              value={`${GenderStatus.OTHER},${GenderStatus.UNKNOWN}`}
+              control={<Checkbox color="secondary" />}
+              label="Autres"
             />
-          </RadioGroup>
+          </FormGroup>
         </Grid>
         <Grid container direction="column" className={classes.filter}>
           <InputAgeRange
@@ -96,11 +112,20 @@ const PatientFilters: React.FC<PatientFiltersProps> = ({ open, onClose, onSubmit
 
         <Grid container direction="column">
           <Typography variant="h3">Statut vital :</Typography>
-          <RadioGroup name="VitalStatus" value={_vitalStatus} onChange={_onChangeVitalStatus} row={true}>
-            <FormControlLabel value="alive" control={<Radio color="secondary" />} label="Patients vivants" />
-            <FormControlLabel value="deceased" control={<Radio color="secondary" />} label="Patients décédés" />
-            <FormControlLabel value="all" control={<Radio color="secondary" />} label="Tous les patients" />
-          </RadioGroup>
+          <FormGroup onChange={onChangeVitalStatus} row={true}>
+            <FormControlLabel
+              checked={checkIfChecked(VitalStatus.ALIVE, vitalStatus)}
+              value={VitalStatus.ALIVE}
+              control={<Checkbox color="secondary" />}
+              label="Patients vivants"
+            />
+            <FormControlLabel
+              checked={checkIfChecked(VitalStatus.DECEASED, vitalStatus)}
+              value={VitalStatus.DECEASED}
+              control={<Checkbox color="secondary" />}
+              label="Patients décédés"
+            />
+          </FormGroup>
         </Grid>
       </DialogContent>
       <DialogActions>

diff --git a/src/components/Patient/PatientHeader/PatientHeader.tsx b/src/components/Patient/PatientHeader/PatientHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { CohortPatient, IPatientDetails, PatientGenderKind } from 'types'
+import { CohortPatient, IPatientDetails, GenderStatus } from 'types'
 
 import Grid from '@mui/material/Grid'
 
@@ -40,7 +40,7 @@ const PatientHeader: React.FC<PatientHeaderProps> = ({
           <PatientTitle firstName={firstName} lastName={lastName} />
         </Grid>
         <Grid container item justifyContent="flex-end" xs={3}>
-          <PatientInfo age={age} ipp={ipp} gender={patient.gender as PatientGenderKind} />
+          <PatientInfo age={age} ipp={ipp} gender={patient.gender as GenderStatus} />
         </Grid>
       </Grid>
     </Grid>

diff --git a/src/components/Patient/PatientHeader/PatientInfo/PatientInfo.tsx b/src/components/Patient/PatientHeader/PatientInfo/PatientInfo.tsx
@@ -7,26 +7,26 @@ import { ReactComponent as MaleIcon } from 'assets/icones/mars.svg'
 import { ReactComponent as UnknownIcon } from 'assets/icones/autre-inconnu.svg'
 
 import useStyles from './styles'
-import { PatientGenderKind } from 'types'
+import { GenderStatus } from 'types'
 
 type GenderIconTypes = {
-  gender?: PatientGenderKind
+  gender?: GenderStatus
 }
 const GenderIcon: React.FC<GenderIconTypes> = ({ gender }) => {
   const { classes } = useStyles()
 
   switch (gender) {
-    case PatientGenderKind._female:
+    case GenderStatus.FEMALE:
       return <FemaleIcon className={classes.genderIcon} />
-    case PatientGenderKind._male:
+    case GenderStatus.MALE:
       return <MaleIcon className={classes.genderIcon} />
     default:
       return <UnknownIcon className={classes.genderIcon} />
   }
 }
 
 type PatientInfoTypes = {
-  gender?: PatientGenderKind
+  gender?: GenderStatus
   age: React.ReactText
   ipp?: string
 }

diff --git a/src/components/Patient/PatientSidebar/PatientSidebar.tsx b/src/components/Patient/PatientSidebar/PatientSidebar.tsx
@@ -10,7 +10,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
 import { getAge, substructAgeString } from 'utils/age'
 import services from 'services/aphp'
-import { CohortPatient, PatientFilters as PatientFiltersType, PatientGenderKind, SearchByTypes, Sort } from 'types'
+import { CohortPatient, PatientFilters as PatientFiltersType, GenderStatus, SearchByTypes, Sort } from 'types'
 
 import useStyles from './styles'
 import moment from 'moment/moment'
@@ -48,9 +48,9 @@ const PatientSidebar: React.FC<PatientSidebarTypes> = ({
   const [loadingStatus, setLoadingStatus] = useState(false)
 
   const [filters, setFilters] = useState<PatientFiltersType>({
-    gender: null,
+    gender: [],
     birthdatesRanges: ['', ''],
-    vitalStatus: null
+    vitalStatus: []
   })
 
   const [openSort, setOpenSort] = useState(false)
@@ -168,7 +168,7 @@ const PatientSidebar: React.FC<PatientSidebarTypes> = ({
               firstName={deidentifiedBoolean ? 'Prénom' : patient.name?.[0].given?.[0] ?? ''}
               lastName={deidentifiedBoolean ? 'Nom' : patient.name?.map((e) => e.family).join(' ') ?? ''}
               age={getAge(patient)}
-              gender={patient.gender as PatientGenderKind}
+              gender={patient.gender as GenderStatus}
               deceased={patient.deceasedDateTime ?? patient.deceasedBoolean}
               ipp={
                 deidentifiedBoolean