début refacto

src/components/PatientsBoard/CriteriasSection/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Chip, Grid } from '@mui/material'
+import { LabelObject } from 'types/searchCriterias'
+import { v4 as uuidv4 } from 'uuid'
+
+type CriteriasSectionProps = {
+  value: LabelObject[]
+  onDelete: () => void
+}
+
+const CriteriasSection = ({ value, onDelete }: CriteriasSectionProps) => {
+  return (
+    <>
+      {value?.length > 0 && (
+        <Grid item xs={12} container>
+          {value
+            .filter((filter) => filter.label)
+            .map((filter) => (
+              <Chip key={uuidv4()} label={filter.label} onDelete={onDelete} />
+            ))}
+        </Grid>
+      )}
+    </>
+  )
+}
+
+export default CriteriasSection

src/components/PatientsBoard/DataSection/index.tsx

@@ -0,0 +1,30 @@
+import { Grid } from '@mui/material'
+import DataTablePatient from 'components/DataTable/DataTablePatient'
+import React from 'react'
+import { LoadingStatus } from 'types'
+
+type DataSectionProps = {
+  data: any[]
+  deidentified: boolean
+  loadingStatus: LoadingStatus
+}
+
+const DataSection = ({ data, deidentified, loadingStatus }: DataSectionProps) => {
+  return (
+    <Grid item xs={12}>
+      {/*<DataTablePatient
+        loading={loadingStatus === LoadingStatus.FETCHING || loadingStatus === LoadingStatus.IDDLE}
+       // groupId={groupId}
+        deidentified={deidentified ?? false}
+        patientsList={data}
+        orderBy={orderBy}
+        setOrderBy={(orderBy) => changeOrderBy(orderBy)}
+        page={page}
+        setPage={(newPage) => setPage(newPage)}
+        total={patientsResult.nb}
+  />*/}
+    </Grid>
+  )
+}
+
+export default DataSection

src/components/PatientsBoard/SavedFiltersSection/SaveFilterAction.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import { Grid, Tooltip } from '@mui/material'
+import Button from 'components/ui/Button'
+import { Save } from '@mui/icons-material'
+import Modal from 'components/ui/Modal'
+import { useForm } from 'hooks/useForm'
+import Text from 'components/ui/Inputs/Text'
+
+type SaveFilterActionProps = {
+  disabled?: boolean
+  onSubmit: (name: string) => void
+}
+
+const InputKey = 'filtersName'
+
+const SaveFilterActionProps = ({ disabled = false, onSubmit }: SaveFilterActionProps) => {
+  const {
+    inputs: { filtersName },
+    changeInput
+  } = useForm({ [InputKey]: '' })
+  const [toggleModal, setToggleModal] = useState(false)
+
+  return (
+    <>
+      <Tooltip title="" /*title={maintenanceIsActive ? "Ce bouton est desactivé en fonction d'une maintenance." : ''}*/>
+        <Grid container>
+          <Button
+            width="100%"
+            icon={<Save height="15px" fill="#FFF" />}
+            onClick={() => setToggleModal(true)}
+            color="secondary"
+            disabled={disabled}
+          >
+            Enregistrer filtres
+          </Button>
+        </Grid>
+      </Tooltip>
+      <Modal
+        title="Sauvegarder le filtre"
+        color="secondary"
+        open={toggleModal}
+        onClose={() => setToggleModal(false)}
+        onSubmit={() => {
+          onSubmit(filtersName)
+          setToggleModal(false)
+        }}
+        isError={
+          filtersName.length < 2 || filtersName.length > 50 /*||
+          savedFiltersErrors.isError*/
+        }
+      >
+        <Text
+          placeholder="Choisir un nom compris entre 2 et 50 caractères"
+          minLimit={2}
+          maxLimit={50}
+          onChange={(value) => {
+            changeInput(InputKey, value)
+            //resetSavedFilterError()
+          }}
+        />
+        {/*savedFiltersErrors.isError && <ErrorMessage>{savedFiltersErrors.errorMessage}</ErrorMessage>*/}
+      </Modal>
+    </>
+  )
+}
+
+export default SaveFilterActionProps

src/components/PatientsBoard/SavedFiltersSection/SavedFilters.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+type SavedFiltersProps = {}
+
+const SavedFilters = ({}: SavedFiltersProps) => {}
+
+export default SavedFilters

src/components/PatientsBoard/SavedFiltersSection/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Grid } from '@mui/material'
+import SaveFilterAction from './SaveFilterAction'
+import useSearchCriterias, { initPatientsSearchCriterias } from 'reducers/searchCriteriasReducer'
+import { PatientsFilters, SearchByTypes } from 'types/searchCriterias'
+import { ResourceType } from 'types/requestCriterias'
+import { useSavedFilters } from 'hooks/filters/useSavedFilters'
+
+type SavedFiltersSectionProps = {
+  deidentified: boolean
+}
+
+const SavedFiltersSection = ({ deidentified }: SavedFiltersSectionProps) => {
+  const {
+    allSavedFiltersAsListItems,
+    allSavedFilters,
+    savedFiltersErrors,
+    selectedSavedFilter,
+    methods: {
+      getSavedFilters,
+      postSavedFilter,
+      deleteSavedFilters,
+      patchSavedFilter,
+      selectFilter,
+      resetSavedFilterError
+    }
+  } = useSavedFilters<PatientsFilters>(ResourceType.PATIENT)
+
+  return (
+    <Grid container item xs={12}>
+      <Grid item xs={3}>
+        <SaveFilterAction
+          //disabled={maintenanceIsActive}
+          onSubmit={(name) => {} /*postSavedFilter(name)*/}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SavedFiltersSection

src/components/PatientsBoard/SearchSection/FilterAction.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import CheckboxGroup from 'components/ui/Inputs/CheckboxGroup'
+import DurationRange from 'components/ui/Inputs/DurationRange'
+import Modal from 'components/ui/Modal'
+import { FilterKeys, PatientsFilters, genderOptions, vitalStatusesOptions } from 'types/searchCriterias'
+import { useForm } from 'hooks/useForm'
+import Button from 'components/ui/Button'
+import FilterList from 'assets/icones/filter.svg?react'
+
+type FilterActionProps = {
+  filters: PatientsFilters
+  deidentified?: boolean
+  onSubmit: (filters: PatientsFilters) => void
+}
+
+const FilterAction = ({ filters, deidentified, onSubmit }: FilterActionProps) => {
+  const {
+    inputs,
+    inputs: { genders, vitalStatuses, birthdatesRanges },
+    changeFormError,
+    changeInput,
+    hasErrors
+  } = useForm(filters)
+  const [toggleModal, setToggleModal] = useState(false)
+
+  return (
+    <>
+      <Button
+        icon={<FilterList height="15px" fill="#FFF" />}
+        onClick={() => setToggleModal(true)}
+      >
+        Filtrer
+      </Button>
+      <Modal
+        title="Filtrer par :"
+        open={toggleModal}
+        color="secondary"
+        isError={hasErrors}
+        onClose={() => setToggleModal(false)}
+        onSubmit={() => {
+          onSubmit(inputs)
+          setToggleModal(false)
+        }}
+      >
+        <CheckboxGroup
+          value={genders}
+          label="Genre :"
+          options={genderOptions}
+          onChange={(value) => changeInput(FilterKeys.GENDERS, value)}
+        />
+        <CheckboxGroup
+          value={vitalStatuses}
+          label="Statut vital :"
+          options={vitalStatusesOptions}
+          onChange={(value) => changeInput(FilterKeys.VITAL_STATUSES, value)}
+        />
+        <DurationRange
+          value={birthdatesRanges}
+          label="Âge :"
+          deidentified={deidentified ?? false}
+          onChange={(value) => changeInput(FilterKeys.BIRTHDATES, value)}
+          onError={changeFormError}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export default FilterAction

src/components/PatientsBoard/SearchSection/OccurrenceSearch.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react'
+import { Grid } from '@mui/material'
+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'
+
+type SearchType = {
+  searchBy: SearchByTypes
+  searchInput: string
+}
+
+type OccurrencesSearchProps = {
+  search: SearchType
+  deidentified?: boolean
+  onChange: (search: SearchType) => void
+}
+
+const OccurrencesSearch = ({ search, deidentified, onChange }: OccurrencesSearchProps) => {
+  const {
+    inputs,
+    inputs: { searchBy, searchInput },
+    changeInput
+  } = useForm(search)
+
+  useEffect(() => onChange(inputs), [inputs])
+
+  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)}
+          />
+        </>
+      )}
+      {deidentified && (
+        <Grid container justifyContent="flex-end">
+          <DisplayLocked />
+        </Grid>
+      )}
+    </>
+  )
+}
+
+export default OccurrencesSearch

src/components/PatientsBoard/SearchSection/index.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react'
+import { Grid } from '@mui/material'
+import FilterAction from './FilterAction'
+import useSearchCriterias, { initPatientsSearchCriterias } from 'reducers/searchCriteriasReducer'
+import OccurrencesSearch from './OccurrenceSearch'
+import { SearchByTypes, SearchCriterias } from 'types/searchCriterias'
+
+type SearchSectionProps<T> = {
+  deidentified: boolean
+  onSearch: (searchCriterias: SearchCriterias<T>) => void
+}
+
+const SearchSection = <T,>({ deidentified, onSearch }: SearchSectionProps<T>) => {
+  const [{ searchBy, searchInput, filters }, { changeSearchBy, changeSearchInput, addFilters }] =
+    useSearchCriterias(initPatientsSearchCriterias)
+
+  useEffect(() => onSearch({ searchBy, searchInput, filters }), [searchBy, searchInput, filters])
+
+  return (
+    <Grid container justifyContent="space-between">
+      <Grid container item xs={8}>
+        <OccurrencesSearch
+          search={{ searchBy: searchBy ?? SearchByTypes.TEXT, searchInput }}
+          onChange={(newSearch) => {
+            changeSearchBy(newSearch.searchBy)
+            changeSearchInput(newSearch.searchInput)
+          }}
+        />
+      </Grid>
+      <Grid container item xs={3}>
+        <FilterAction deidentified={deidentified} filters={filters} onSubmit={(newFilters) => addFilters(newFilters)} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SearchSection