continue

src/components/Dashboard/PatientList/index.tsx

@@ -47,7 +47,6 @@ import { useSearchParams } from 'react-router-dom'
 import { checkIfPageAvailable, handlePageError, cleanSearchParams } from 'utils/paginationUtils'
 import List from 'components/ui/List'
 import { v4 as uuidv4 } from 'uuid'
-import { useForm } from 'hooks/useForm'
 import CheckboxGroup from 'components/ui/Inputs/CheckboxGroup'
 import DurationRange from 'components/ui/Inputs/DurationRange'
 import Text from 'components/ui/Inputs/Text'

src/components/PatientsBoard/SavedFiltersSection/EditSavedFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { Grid } from '@mui/material'
 import CheckboxGroup from 'components/ui/Inputs/CheckboxGroup'
 import Modal from 'components/ui/Modal'
@@ -11,7 +11,6 @@ import {
   SearchByTypes
 } from 'types/searchCriterias'
 import { SelectedFilter } from 'hooks/filters/useSavedFilters'
-/*import { useForm } from 'hooks/useForm'*/
 import Select from 'components/ui/Searchbar/Select'
 import DurationRange from 'components/ui/Inputs/DurationRange'
 import { Controller, useForm } from 'react-hook-form'
@@ -27,7 +26,7 @@ type EditSavedFilterProps = {
 }
 
 type DynamicFilters = {
-  [key: string]: string[] // ou tout autre type selon vos données
+  [key: string]: string[]
 }
 
 export type DynamicSelectedFilter = SelectedFilter<DynamicFilters>
@@ -40,7 +39,6 @@ const EditSavedFilter = <T,>({
   onEdit,
   onClose
 }: EditSavedFilterProps) => {
-
   const {
     control,
     handleSubmit,
@@ -51,7 +49,7 @@ const EditSavedFilter = <T,>({
     mode: 'onChange',
     reValidateMode: 'onChange'
   })
-  
+
   useEffect(() => {
     reset(criteria)
   }, [criteria, reset])
@@ -70,7 +68,6 @@ const EditSavedFilter = <T,>({
         <Controller
           name="filterName"
           control={control}
-          //defaultValue={criteria.filterName}
           rules={{
             required: 'Ce champ est requis.',
             minLength: {

src/components/PatientsBoard/SavedFiltersSection/SaveFilterAction.tsx

@@ -1,23 +1,35 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Grid, Tooltip, Button } from '@mui/material'
 import { Save } from '@mui/icons-material'
 import Modal from 'components/ui/Modal'
 import Text from 'components/ui/Inputs/Text'
-import { useForm } from 'react-hook-form'
+import { Controller, useForm } from 'react-hook-form'
+import { ErrorType } from 'types/error'
 
 type SaveFilterActionProps = {
   disabled?: boolean
   onSubmit: (name: string) => void
 }
 
-const SaveFilterAction = ({ disabled = false, onSubmit }: SaveFilterActionProps) => {
+const SaveFilterAction = ({ disabled = false, error, onSubmit }: SaveFilterActionProps) => {
   const [toggleModal, setToggleModal] = useState(false)
   const {
-    getValues,
-    register,
+    control,
     handleSubmit,
-    formState: { errors, isDirty, isValid }
-  } = useForm<{name: string}>()
+    reset,
+    formState: { errors, isValid, isDirty }
+  } = useForm<{ name: string }>({
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
+
+  useEffect(() => {
+    reset({ name: '' })
+  }, [toggleModal])
+
+  useEffect(() => {
+    console.log('test save name', errors.name, isValid, errors)
+  }, [isValid])
 
   return (
     <>
@@ -41,26 +53,37 @@ const SaveFilterAction = ({ disabled = false, onSubmit }: SaveFilterActionProps)
         title="Sauvegarder le filtre"
         color="secondary"
         open={toggleModal}
-        readonly={false}
-        //readonly={disabled || !isDirty}
+        readonly={disabled}
         onClose={() => setToggleModal(false)}
-        onSubmit={handleSubmit((data) => console.log(data))}
-        //isError={!isValid}
+        onSubmit={handleSubmit((data) => {
+          onSubmit(data.name)
+          setToggleModal(false)
+          reset()
+        })}
+        isError={!isValid}
       >
-        <Text
-          {...register('name', {
+        <Controller
+          name="name"
+          control={control}
+          rules={{
             required: 'Ce champ est requis.',
             minLength: {
               value: 2,
-              message: 'Le texte doit contenir au moins 2 caractères.'
+              message: 'Le nom doit contenir au moins 2 caractères.'
             },
             maxLength: {
               value: 50,
-              message: 'Le texte ne peut pas dépasser 50 caractères.'
+              message: 'Le nom ne peut pas dépasser 50 caractères.'
             }
-          })}
-          //  errorMessage={errors.textInput?.message}
-          placeholder="Choisir un nom compris entre 2 et 50 caractères"
+          }}
+          render={({ field }) => (
+            <Text
+              {...field}
+              label="Nom :"
+              placeholder="Choisir un nom compris entre 2 et 50 caractères"
+              errorMessage={isDirty && errors.name?.message}
+            />
+          )}
         />
       </Modal>
     </>

src/components/PatientsBoard/SavedFiltersSection/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { Grid } from '@mui/material'
+import { Alert, Grid, Snackbar } from '@mui/material'
 import SaveFilterAction from './SaveFilterAction'
 import { Filters, PatientsFilters, SearchCriterias } from 'types/searchCriterias'
 import { ResourceType } from 'types/requestCriterias'
@@ -38,6 +38,14 @@ const SavedFiltersSection = ({ deidentified, criterias, canSave, onSelect }: Sav
           />
         </Grid>
       )}
+      <Snackbar
+        open={savedFiltersErrors.isError}
+        onClose={() => resetSavedFilterError()}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        autoHideDuration={6000}
+      >
+        <Alert severity="error">{savedFiltersErrors.errorMessage}</Alert>
+      </Snackbar>
       <Grid item xs={3}>
         {asListItems.length > 0 && (
           <SavedFilters

src/components/PatientsBoard/SearchSection/FilterAction.tsx

@@ -3,7 +3,6 @@ import CheckboxGroup from 'components/ui/Inputs/CheckboxGroup'
 import DurationRange from 'components/ui/Inputs/DurationRange'
 import Modal from 'components/ui/Modal'
 import { FilterKeys, Filters, genderOptions, vitalStatusesOptions } from 'types/searchCriterias'
-import { useForm } from 'hooks/useForm'
 import FilterList from 'assets/icones/filter.svg?react'
 import { Button } from '@mui/material'
 
@@ -14,13 +13,13 @@ type FilterActionProps = {
 }
 
 const FilterAction = ({ filters, deidentified, onSubmit }: FilterActionProps) => {
-  const {
+  /*const {
     inputs,
     inputs: { genders, vitalStatuses, birthdatesRanges },
     changeFormError,
     changeInput,
     hasErrors
-  } = useForm(filters)
+  } = useForm(filters)*/
   const [toggleModal, setToggleModal] = useState(false)
 
   return (
@@ -34,7 +33,7 @@ const FilterAction = ({ filters, deidentified, onSubmit }: FilterActionProps) =>
       >
         Filtrer
       </Button>
-      <Modal
+      {/*<Modal
         title="Filtrer par :"
         open={toggleModal}
         color="secondary"
@@ -64,7 +63,7 @@ const FilterAction = ({ filters, deidentified, onSubmit }: FilterActionProps) =>
           onChange={(value) => changeInput(FilterKeys.BIRTHDATES, value)}
           onError={changeFormError}
         />
-      </Modal>
+      </Modal>*/}
     </>
   )
 }

src/components/PatientsBoard/SearchSection/OccurrenceSearch.tsx

@@ -4,7 +4,7 @@ import DisplayLocked from 'components/ui/Display/DisplayLocked'
 import { SearchByTypes, searchByListPatients } from 'types/searchCriterias'
 import Select from 'components/ui/Searchbar/Select'
 import SearchInput from 'components/ui/Searchbar/SearchInput'
-import { useForm } from 'hooks/useForm'
+import { Controller, useForm, useWatch } from 'react-hook-form'
 
 type SearchType = {
   searchBy: SearchByTypes
@@ -18,32 +18,42 @@ type OccurrencesSearchProps = {
 }
 
 const OccurrencesSearch = ({ search, deidentified, onChange }: OccurrencesSearchProps) => {
-  const {
-    inputs,
-    inputs: { searchBy, searchInput },
-    changeInput
-  } = useForm(search)
+  const { control } = useForm<SearchType>({ defaultValues: search })
 
-  useEffect(() => onChange(inputs), [inputs])
+  const watchedFields = useWatch({
+    control
+  })
+
+  useEffect(() => onChange(watchedFields as SearchType), [watchedFields])
 
   return (
     <>
       {!deidentified && (
-        <>
-          <Select
-            value={searchBy}
-            label="Rechercher dans :"
-            width={'150px'}
-            items={searchByListPatients}
-            onchange={(newValue: SearchByTypes) => changeInput('searchBy', newValue)}
-          />
-          <SearchInput
-            value={searchInput}
-            placeholder="Rechercher"
-            width={'70%'}
-            onchange={(newValue) => changeInput('searchInput', newValue)}
-          />
-        </>
+        <Grid container>
+          <Grid item xs={12} md={4}>
+            <Controller
+              defaultValue={SearchByTypes.TEXT}
+              name="searchBy"
+              control={control}
+              render={({ field }) => (
+                <Select<SearchByTypes | undefined>
+                  value={field.value}
+                  label="Rechercher dans :"
+                  items={searchByListPatients}
+                  onchange={field.onChange}
+                />
+              )}
+            />
+          </Grid>
+          <Grid item xs={12} md={8}>
+            <Controller
+              defaultValue=""
+              name="searchInput"
+              control={control}
+              render={({ field }) => <SearchInput {...field} placeholder="Rechercher" onchange={field.onChange} />}
+            />
+          </Grid>
+        </Grid>
       )}
       {deidentified && (
         <Grid container>

src/components/PatientsBoard/index.tsx

@@ -20,7 +20,7 @@ const PatientsBoard = ({ deidentified }: PatientsBoardProps) => {
           onSearch={(searchCriterias) => onSaveSearchCriterias(searchCriterias)}
         />
         <SavedFiltersSection
-          canSave={criterias.length > 0 || searchCriterias.searchInput !== ""}
+          canSave={criterias.length > 0 || searchCriterias.searchInput.length > 0}
           deidentified={deidentified ?? false}
           criterias={searchCriterias}
           onSelect={onSaveSearchCriterias}

src/components/PatientsBoard/usePatientsBoard.ts

@@ -13,7 +13,7 @@ export const usePatientBoard = () => {
 
   const onSaveSearchCriterias = ({ searchBy, searchInput, filters }: SearchCriterias<Filters>) => {
     if (searchBy) changeSearchBy(searchBy)
-    if (searchInput) changeSearchInput(searchInput)
+    if (searchInput !== undefined) changeSearchInput(searchInput)
     if (filters) addFilters(filters)
   }
 

src/components/ui/Searchbar/SearchInput.tsx

@@ -16,7 +16,6 @@ type SearchInputProps = {
   searchOnClick?: boolean
   displayHelpIcon?: boolean
   error?: SearchInputError | null
-  width?: string
   disabled?: boolean
   onchange: (value: string) => void
 }
@@ -25,7 +24,6 @@ const SearchInput = ({
   placeholder,
   value,
   searchOnClick = false,
-  width = '100%',
   displayHelpIcon = false,
   error = null,
   disabled = false,
@@ -40,12 +38,12 @@ const SearchInput = ({
   }, [value])
 
   useEffect(() => {
-    if (!searchOnClick) onchange(debouncedSearchValue)
+    if (!searchOnClick) onchange?.(debouncedSearchValue)
   }, [debouncedSearchValue])
 
   return (
     <>
-      <SearchInputWrapper width={width} error={error?.isError}>
+      <SearchInputWrapper error={error?.isError}>
         <InputBase
           disabled={disabled}
           placeholder={placeholder}