corrections for pr

src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DemographicForm/index.tsx

@@ -195,7 +195,7 @@ const DemographicForm = (props: CriteriaDrawerComponentProps) => {
             />
             <DurationRange
               value={age}
-              active={!birthdates[0] || !birthdates[1]}
+              //disabled={!birthdates[0] || !birthdates[1]}
               onChange={(value) => setAge(value)}
               onError={(isError) => setError(isError ? Error.INCOHERENT_AGE_ERROR : Error.NO_ERROR)}
               deidentified={deidentified}

src/components/Dashboard/PatientList/index.tsx

@@ -98,7 +98,6 @@ const PatientList = ({ total, deidentified }: PatientListProps) => {
     },
     { changeOrderBy, changeSearchBy, changeSearchInput, addFilters, removeFilter, addSearchCriterias }
   ] = useSearchCriterias(initPatientsSearchCriterias)
-
   const filtersAsArray = useMemo(() => {
     return selectFiltersAsArray({ genders, vitalStatuses, birthdatesRanges })
   }, [genders, vitalStatuses, birthdatesRanges])
@@ -292,12 +291,19 @@ const PatientList = ({ total, deidentified }: PatientListProps) => {
         onClose={() => setToggleFilterByModal(false)}
         onSubmit={(newFilters) => addFilters({ genders, birthdatesRanges, vitalStatuses, ...newFilters })}
       >
-        <CheckboxsFilter name={FilterKeys.GENDERS} value={genders} label="Genre :" options={genderOptions} />
+        <CheckboxsFilter
+          name={FilterKeys.GENDERS}
+          value={genders}
+          label="Genre :"
+          options={genderOptions}
+          //onChange={(value) => searchCriteriaForm.changeInput(FilterKeys.GENDERS, value)}
+        />
         <CheckboxsFilter
           name={FilterKeys.VITAL_STATUSES}
           value={vitalStatuses}
           label="Statut vital :"
           options={vitalStatusesOptions}
+          //onChange={(value) => searchCriteriaForm.changeInput(FilterKeys.VITAL_STATUSES, value)}
         />
         <BirthdatesRangesFilter
           name={FilterKeys.BIRTHDATES}

src/components/Filters/BirthdatesRangesFilters/index.tsx

@@ -31,7 +31,7 @@ const BirthdatesRangesFilter = ({
   return (
     <InputWrapper>
       <DurationRange
-        active={!disabled}
+        disabled={disabled}
         deidentified={deidentified}
         label="Âge"
         onError={onError}

src/components/ui/Inputs/CheckboxGroup/index.tsx

@@ -0,0 +1,52 @@
+import { Checkbox, FormControlLabel, FormGroup, Typography } from '@mui/material'
+import { InputWrapper } from 'components/ui/Inputs/styles'
+import React, { useEffect, useState } from 'react'
+import { LabelObject } from 'types/searchCriterias'
+import { isChecked, toggleFilter } from 'utils/filters'
+
+type CheckboxGroupProps<T> = {
+  value: T[]
+  label?: string
+  disabled?: boolean
+  options: LabelObject[]
+  onChange: (value: T[]) => void
+}
+
+const CheckboxGroup = <T extends string>({
+  value,
+  label,
+  options,
+  onChange,
+  disabled = false
+}: CheckboxGroupProps<T>) => {
+  const [inputs, setInputs] = useState(value)
+
+  useEffect(() => {
+    onChange(inputs)
+  }, [inputs])
+
+  return (
+    <InputWrapper>
+      {label && <Typography variant="h3">{label}</Typography>}
+      <FormGroup
+        row={true}
+        onChange={(e) => setInputs(toggleFilter(inputs, (e.target as HTMLInputElement).value as T))}
+      >
+        <>
+          {options.map((option) => (
+            <FormControlLabel
+              key={option.id}
+              disabled={disabled}
+              checked={isChecked(option.id, inputs)}
+              value={option.id}
+              control={<Checkbox color="secondary" />}
+              label={option.label}
+            />
+          ))}
+        </>
+      </FormGroup>
+    </InputWrapper>
+  )
+}
+
+export default CheckboxGroup

src/components/ui/Inputs/DurationRange/index.tsx

@@ -13,9 +13,8 @@ type DurationRangeProps = {
   value: DurationRangeType
   label?: string
   deidentified?: boolean
-  active?: boolean
+  disabled?: boolean
   unit?: string
-  // placeholderType?: string
   onChange: (newDuration: DurationRangeType) => void
   onError: (isError: boolean) => void
 }
@@ -29,15 +28,15 @@ const defaultMaxDuration: DurationType = {
   month: null,
   day: null
 }
-const DurationRange: React.FC<DurationRangeProps> = ({
+const DurationRange = ({
   value,
   label,
   deidentified = false,
-  active = true,
+  disabled = false,
   unit = 'Âge',
   onChange,
   onError
-}) => {
+}: DurationRangeProps) => {
   const [minDuration, setMinDuration] = useState<DurationType>(convertStringToDuration(value[0]) || defaultMinDuration)
   const [maxDuration, setMaxDuration] = useState<DurationType>(convertStringToDuration(value[1]) || defaultMaxDuration)
   const [error, setError] = useState<ErrorType>({ isError: false, errorMessage: '' })
@@ -47,31 +46,29 @@ const DurationRange: React.FC<DurationRangeProps> = ({
     onError(false)
     if (!checkMinMaxValue(minDuration, maxDuration)) {
       setError({ isError: true, errorMessage: 'La date maximale doit être supérieure à la date minimale.' })
-      onError(true)
-      onChange([convertDurationToString(minDuration), convertDurationToString(maxDuration)])
-    } else {
       onChange([convertDurationToString(minDuration), convertDurationToString(maxDuration)])
-    }
+      onError(true)
+    } else onChange([convertDurationToString(minDuration), convertDurationToString(maxDuration)])
   }, [minDuration, maxDuration])
 
   return (
     <BlockWrapper>
       {label && (
         <BlockWrapper margin="0px 0px 10px 0px">
-          <DurationLabel variant="h3">{label} :</DurationLabel>
+          <DurationLabel variant="h3">{label}</DurationLabel>
         </BlockWrapper>
       )}
       <BlockWrapper margin="0px 0px 10px 0px">
         <DurationInput
-          disabled={!active}
+          disabled={disabled}
           value={minDuration}
           deidentified={deidentified}
           label={`${unit} minimum`}
           onChange={(newDuration) => setMinDuration(newDuration)}
         />
       </BlockWrapper>
       <DurationInput
-        disabled={!active}
+        disabled={disabled}
         value={maxDuration}
         deidentified={deidentified}
         label={`${unit} maximum`}

src/components/ui/Inputs/Text/index.tsx

@@ -0,0 +1,69 @@
+import { Grid, TextField, Typography } from '@mui/material'
+import { InputWrapper } from 'components/ui/Inputs/styles'
+import { ErrorMessage } from 'components/ui/Inputs/Errors'
+import React, { useEffect, useState } from 'react'
+
+type TextInputProps = {
+  value?: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  minLimit?: number
+  maxLimit?: number
+  onChange: (newInput: string) => void
+  onError?: (isError: boolean) => void
+}
+
+const TextInput = ({
+  value = '',
+  placeholder = '',
+  label,
+  disabled,
+  minLimit,
+  maxLimit,
+  onChange,
+  onError
+}: TextInputProps) => {
+  const [input, setFiltersName] = useState(value)
+  const [isError, setIsError] = useState({ min: false, max: false })
+
+  useEffect(() => {
+    if (onError) {
+      onError(false)
+      if (isError.min || isError.max) onError(true)
+    }
+  }, [isError])
+
+  useEffect(() => {
+    let min = false
+    let max = false
+    if (maxLimit && input.length > maxLimit) max = true
+    else if (minLimit && input.length < minLimit) min = true
+    onChange(input)
+    setIsError({ min, max })
+  }, [input])
+
+  return (
+    <>
+      <InputWrapper>
+        {label && <Typography variant="h3">{label}</Typography>}
+        <TextField
+          margin="normal"
+          fullWidth
+          autoFocus
+          disabled={disabled}
+          value={input}
+          placeholder={placeholder || 'Non renseigné'}
+          onChange={(event) => setFiltersName(event.target.value)}
+        />
+      </InputWrapper>
+      {isError.max && (
+        <Grid>
+          <ErrorMessage>Le champ dépasse la limite de {maxLimit} caractères.</ErrorMessage>
+        </Grid>
+      )}
+    </>
+  )
+}
+
+export default TextInput

src/hooks/filters/useSavedFilters.ts

@@ -59,7 +59,7 @@ export const useSavedFilters = <T>(type: ResourceType) => {
       setSavedFiltersErrors({ isError: false })
       await getSavedFilters()
     } catch {
-      setSavedFiltersErrors({ isError: true, errorMessage: 'Nom déjà existant.' })
+      setSavedFiltersErrors({ isError: true, errorMessage: "Il y a eu une erreur lors de l'enregistrement du filtre. Vérifiez que le nom n'existe pas déjà." })
       throw 'Nom déjà existant'
     }
   }

src/types/searchCriterias.ts

@@ -301,7 +301,7 @@ export type GenericFilter = {
   encounterStatus: LabelObject[]
 }
 
-export interface PatientsFilters {
+export type PatientsFilters = {
   genders: GenderStatus[]
   birthdatesRanges: DurationRangeType
   vitalStatuses: VitalStatus[]