refactor: filter components - Ref gestion-de-projet#2490

aphp · Jan 14, 2025 · 30a2916 · 30a2916
1 parent 72efe98
commit 30a2916
Show file tree

Hide file tree

Showing 63 changed files with 798 additions and 1,037 deletions.
diff --git a/...ramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/index.tsx b/...ramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/index.tsx
@@ -15,7 +15,7 @@ import { DurationRangeType } from 'types/searchCriterias'
 import { CriteriaLabel } from 'components/ui/CriteriaLabel'
 import { getOccurenceDateLabel } from 'utils/requestCriterias'
 import ExecutiveUnitsInput from 'components/ui/Inputs/ExecutiveUnits'
-import { InputWrapper } from 'components/ui/Inputs'
+import { InputWrapper } from 'components/ui/Inputs/styles'
 
 type AdvancedInputsProps = {
   sourceType: SourceType

diff --git a/...amView/components/LogicalOperator/components/CriteriaRightPanel/DemographicForm/index.tsx b/...amView/components/LogicalOperator/components/CriteriaRightPanel/DemographicForm/index.tsx
@@ -181,7 +181,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}

diff --git a/...mponents/TemporalConstraintCard/components/TemporalConstraintModal/EpisodeConstraints.tsx b/...mponents/TemporalConstraintCard/components/TemporalConstraintModal/EpisodeConstraints.tsx
@@ -87,8 +87,8 @@ const EpisodeConstraints: React.FC<EpisodeConstraintsProps> = ({ constraints, on
         </Grid>
         <RadioGroup
           row
-          selectedValue={radioValues}
-          onchange={(e) => {
+          value={radioValues}
+          onChange={(e) => {
             if (
               radioValues === TemporalConstraintsKind.PARTIAL_EPISODE_CONSTRAINT &&
               constraints.find(
@@ -101,7 +101,7 @@ const EpisodeConstraints: React.FC<EpisodeConstraintsProps> = ({ constraints, on
               onChangeValue(e as TemporalConstraintsKind)
             }
           }}
-          items={episodesTemporalConstraintsTypes}
+          options={episodesTemporalConstraintsTypes}
           style={{ margin: '1em', justifyContent: 'space-around' }}
         />
       </Grid>

diff --git a/.../components/TemporalConstraintCard/components/TemporalConstraintModal/StayConstraints.tsx b/.../components/TemporalConstraintCard/components/TemporalConstraintModal/StayConstraints.tsx
@@ -79,8 +79,8 @@ const StayConstraints: React.FC<StayConstraintsProps> = ({ constraints, onChange
         <Typography variant="h3">Contraintes sur les séjours</Typography>
         <RadioGroup
           row
-          selectedValue={radioValues}
-          onchange={(e) => {
+          value={radioValues}
+          onChange={(e) => {
             if (
               radioValues === TemporalConstraintsKind.PARTIAL_CONSTRAINT &&
               constraints.find((constraint) => constraint.constraintType === TemporalConstraintsKind.SAME_ENCOUNTER)
@@ -91,7 +91,7 @@ const StayConstraints: React.FC<StayConstraintsProps> = ({ constraints, onChange
               onChangeValue(e as TemporalConstraintsKind)
             }
           }}
-          items={temporalConstraintsTypes}
+          options={temporalConstraintsTypes}
           style={{ margin: '1em', justifyContent: 'space-around' }}
         />
       </Grid>

diff --git a/src/components/Dashboard/BiologyList/index.tsx b/src/components/Dashboard/BiologyList/index.tsx
@@ -8,12 +8,9 @@ import { BlockWrapper } from 'components/ui/Layout'
 import Button from 'components/ui/Button'
 import DatesRangeFilter from 'components/Filters/DatesRangeFilter'
 import DisplayDigits from 'components/ui/Display/DisplayDigits'
-import EncounterStatusFilter from 'components/Filters/EncounterStatusFilter'
 import ExecutiveUnitsFilter from 'components/Filters/ExecutiveUnitsFilter'
-import IppFilter from 'components/Filters/IppFilter'
 import List from 'components/ui/List'
 import Modal from 'components/ui/Modal'
-import NdaFilter from 'components/Filters/NdaFilter'
 import SearchInput from 'components/ui/Searchbar/SearchInput'
 import TextInput from 'components/Filters/TextInput'
 
@@ -34,6 +31,7 @@ import { getCodeList } from 'services/aphp/serviceValueSets'
 import { getConfig } from 'config'
 import CodeFilter from 'components/Filters/CodeFilter'
 import { getValueSetsFromSystems } from 'utils/valueSets'
+import MultiSelectInput from 'components/Filters/MultiSelectInput'
 
 type BiologyListProps = {
   deidentified?: boolean
@@ -79,6 +77,7 @@ const BiologyList = ({ deidentified }: BiologyListProps) => {
     },
     { changeOrderBy, changeSearchInput, addFilters, removeFilter, addSearchCriterias }
   ] = useSearchCriterias(initBioSearchCriterias)
+  console.log('test filters', filters)
   const filtersAsArray = useMemo(
     () =>
       selectFiltersAsArray({
@@ -319,19 +318,29 @@ const BiologyList = ({ deidentified }: BiologyListProps) => {
         onClose={() => setToggleFilterByModal(false)}
         onSubmit={(newFilters) => addFilters({ ...filters, ...newFilters })}
       >
-        {!deidentified && <NdaFilter name={FilterKeys.NDA} value={nda} />}
-        {!deidentified && <IppFilter name={FilterKeys.IPP} value={ipp ?? ''} />}
+        {!deidentified && (
+          <TextInput name={FilterKeys.NDA} value={nda} label="NDA :" placeholder="Exemple: 6601289264,141740347" />
+        )}
+        {!deidentified && (
+          <TextInput
+            name={FilterKeys.IPP}
+            value={ipp}
+            label="IPP :"
+            placeholder="'Exemple: 8000000000001,8000000000002'"
+          />
+        )}
         <CodeFilter name={FilterKeys.CODE} value={code} references={references} />
         <DatesRangeFilter values={[startDate, endDate]} names={[FilterKeys.START_DATE, FilterKeys.END_DATE]} />
         <ExecutiveUnitsFilter
           sourceType={SourceType.BIOLOGY}
           value={executiveUnits}
           name={FilterKeys.EXECUTIVE_UNITS}
         />
-        <EncounterStatusFilter
+        <MultiSelectInput
           value={encounterStatus}
           name={FilterKeys.ENCOUNTER_STATUS}
-          encounterStatusList={encounterStatusList}
+          options={encounterStatusList}
+          label="Statut de la visite associée :"
         />
       </Modal>
       <Modal
@@ -427,19 +436,23 @@ const BiologyList = ({ deidentified }: BiologyListProps) => {
                 </Grid>
                 {!deidentified && (
                   <Grid item xs={12}>
-                    <NdaFilter
+                    <TextInput
                       name="nda"
                       disabled={isReadonlyFilterInfoModal}
-                      value={selectedSavedFilter?.filterParams.filters.nda ?? ''}
+                      value={selectedSavedFilter?.filterParams.filters.nda || ''}
+                      label="NDA :"
+                      placeholder="Exemple: 6601289264,141740347"
                     />
                   </Grid>
                 )}
                 {!deidentified && (
                   <Grid item xs={12}>
-                    <IppFilter
+                    <TextInput
                       disabled={isReadonlyFilterInfoModal}
                       name={FilterKeys.IPP}
                       value={selectedSavedFilter?.filterParams.filters.ipp ?? ''}
+                      label="IPP :"
+                      placeholder="'Exemple: 8000000000001,8000000000002'"
                     />
                   </Grid>
                 )}
@@ -470,11 +483,12 @@ const BiologyList = ({ deidentified }: BiologyListProps) => {
                   />
                 </Grid>
                 <Grid item xs={12}>
-                  <EncounterStatusFilter
+                  <MultiSelectInput
                     disabled={isReadonlyFilterInfoModal}
                     value={selectedSavedFilter?.filterParams.filters.encounterStatus || []}
                     name={FilterKeys.ENCOUNTER_STATUS}
-                    encounterStatusList={encounterStatusList}
+                    options={encounterStatusList}
+                    label="Statut de la visite associée :"
                   />
                 </Grid>
               </Grid>

diff --git a/src/components/Dashboard/Documents/index.tsx b/src/components/Dashboard/Documents/index.tsx
@@ -29,18 +29,14 @@ import useSearchCriterias, { initAllDocsSearchCriterias } from 'reducers/searchC
 import { AlertWrapper } from 'components/ui/Alert'
 import DatesRangeFilter from 'components/Filters/DatesRangeFilter'
 import DocTypesFilter from 'components/Filters/DocTypesFilter'
-import DocStatusFilter from 'components/Filters/DocStatusFilter'
 import ExecutiveUnitsFilter from 'components/Filters/ExecutiveUnitsFilter'
-import IppFilter from 'components/Filters/IppFilter'
-import NdaFilter from 'components/Filters/NdaFilter'
 import { ResourceType } from 'types/requestCriterias'
 import { Save, SavedSearch } from '@mui/icons-material'
 import TextInput from 'components/Filters/TextInput'
 import { useSavedFilters } from 'hooks/filters/useSavedFilters'
 import List from 'components/ui/List'
 import { useAppDispatch, useAppSelector } from 'state'
 import Modal from 'components/ui/Modal'
-import EncounterStatusFilter from 'components/Filters/EncounterStatusFilter'
 import { SourceType } from 'types/scope'
 import { useSearchParams } from 'react-router-dom'
 import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
@@ -49,6 +45,7 @@ import { DocumentReference } from 'fhir/r4'
 import { getCodeList } from 'services/aphp/serviceValueSets'
 import { getConfig } from 'config'
 import { v4 as uuidv4 } from 'uuid'
+import MultiSelectInput from 'components/Filters/MultiSelectInput'
 
 type DocumentsProps = {
   deidentified: boolean
@@ -132,7 +129,10 @@ const Documents: React.FC<DocumentsProps> = ({ deidentified }) => {
   const controllerRef = useRef<AbortController>(new AbortController())
   const isFirstRender = useRef(true)
 
-  const docStatusesList = [FilterByDocumentStatus.VALIDATED, FilterByDocumentStatus.NOT_VALIDATED]
+  const docStatusesList = [
+    { id: FilterByDocumentStatus.VALIDATED, label: FilterByDocumentStatus.VALIDATED },
+    { id: FilterByDocumentStatus.NOT_VALIDATED, label: FilterByDocumentStatus.NOT_VALIDATED }
+  ]
 
   const fetchDocumentsList = async () => {
     try {
@@ -385,20 +385,35 @@ const Documents: React.FC<DocumentsProps> = ({ deidentified }) => {
         onSubmit={(newFilters) => addFilters({ ...filters, ...newFilters })}
         color="secondary"
       >
-        {!deidentified && <NdaFilter name={FilterKeys.NDA} value={nda} />}
-        {!deidentified && <IppFilter name={FilterKeys.IPP} value={ipp ?? ''} />}
-        <DocStatusFilter docStatusesList={docStatusesList} name={FilterKeys.DOC_STATUSES} value={docStatuses} />
+        {!deidentified && (
+          <TextInput name={FilterKeys.NDA} value={nda} label="NDA :" placeholder="Exemple: 6601289264,141740347" />
+        )}
+        {!deidentified && (
+          <TextInput
+            name={FilterKeys.IPP}
+            value={ipp}
+            label="IPP :"
+            placeholder="'Exemple: 8000000000001,8000000000002'"
+          />
+        )}
+        <MultiSelectInput
+          options={docStatusesList}
+          name={FilterKeys.DOC_STATUSES}
+          value={docStatuses}
+          label="Statut de documents :"
+        />
         <DocTypesFilter allDocTypesList={allDocTypesList.docTypes} value={docTypes} name={FilterKeys.DOC_TYPES} />
         <DatesRangeFilter values={[startDate, endDate]} names={[FilterKeys.START_DATE, FilterKeys.END_DATE]} />
         <ExecutiveUnitsFilter
           sourceType={SourceType.DOCUMENT}
           value={executiveUnits}
           name={FilterKeys.EXECUTIVE_UNITS}
         />
-        <EncounterStatusFilter
+        <MultiSelectInput
           value={encounterStatus}
           name={FilterKeys.ENCOUNTER_STATUS}
-          encounterStatusList={encounterStatusList}
+          options={encounterStatusList}
+          label="Statut de la visite associée :"
         />
       </Modal>
       <Modal
@@ -508,28 +523,33 @@ const Documents: React.FC<DocumentsProps> = ({ deidentified }) => {
 
               <Grid item>
                 {!deidentified && (
-                  <NdaFilter
+                  <TextInput
                     disabled={isReadonlyFilterInfoModal}
                     name={FilterKeys.NDA}
                     value={selectedSavedFilter?.filterParams.filters.nda ?? ''}
+                    label="NDA :"
+                    placeholder="Exemple: 6601289264,141740347"
                   />
                 )}
               </Grid>
               <Grid item>
                 {!deidentified && (
-                  <IppFilter
+                  <TextInput
                     disabled={isReadonlyFilterInfoModal}
                     name={FilterKeys.IPP}
                     value={selectedSavedFilter?.filterParams.filters.ipp ?? ''}
+                    label="IPP :"
+                    placeholder="'Exemple: 8000000000001,8000000000002'"
                   />
                 )}
               </Grid>
               <Grid item>
-                <DocStatusFilter
+                <MultiSelectInput
                   disabled={isReadonlyFilterInfoModal}
-                  docStatusesList={docStatusesList}
                   value={selectedSavedFilter?.filterParams.filters.docStatuses ?? []}
+                  options={docStatusesList}
                   name={FilterKeys.DOC_STATUSES}
+                  label="Statut de documents :"
                 />
               </Grid>
               <Grid item>
@@ -559,11 +579,12 @@ const Documents: React.FC<DocumentsProps> = ({ deidentified }) => {
                 />
               </Grid>
               <Grid item>
-                <EncounterStatusFilter
+                <MultiSelectInput
+                  label="Statut de la visite associée :"
                   disabled={isReadonlyFilterInfoModal}
                   value={selectedSavedFilter?.filterParams.filters.encounterStatus ?? []}
                   name={FilterKeys.ENCOUNTER_STATUS}
-                  encounterStatusList={encounterStatusList}
+                  options={encounterStatusList}
                 />
               </Grid>
             </Grid>

diff --git a/src/components/Dashboard/ExportModal/exportUtils.ts b/src/components/Dashboard/ExportModal/exportUtils.ts
@@ -299,7 +299,7 @@ const fetchDocumentsCount = async (cohortId: string, documentsFilters?: SearchCr
         size: 0,
         _list: [cohortId],
         searchBy: documentsFilters.searchBy,
-        docStatuses: docStatuses,
+        docStatuses: docStatuses.map((obj) => obj.id),
         _text: documentsFilters.searchInput,
         type: docTypes.map((docType) => docType.code).join(),
         'encounter-identifier': nda,

diff --git a/src/components/Dashboard/FormsList/index.tsx b/src/components/Dashboard/FormsList/index.tsx
@@ -5,26 +5,38 @@ import { CircularProgress, Grid, useMediaQuery, useTheme } from '@mui/material'
 import { FilterList } from '@mui/icons-material'
 import Button from 'components/ui/Button'
 import DisplayDigits from 'components/ui/Display/DisplayDigits'
-import EncounterStatusFilter from 'components/Filters/EncounterStatusFilter'
 import ExecutiveUnitsFilter from 'components/Filters/ExecutiveUnitsFilter'
-import IppFilter from 'components/Filters/IppFilter'
 import Modal from 'components/ui/Modal'
 import { DTTB_ResultsType as ResultsType, LoadingStatus } from 'types'
-import { FilterKeys, LabelObject } from 'types/searchCriterias'
+import { FilterKeys, FormNames, LabelObject } from 'types/searchCriterias'
 import { CanceledError } from 'axios'
 import services from 'services/aphp'
 import useSearchCriterias, { initFormsCriterias } from 'reducers/searchCriteriasReducer'
 import { cancelPendingRequest } from 'utils/abortController'
 import { selectFiltersAsArray } from 'utils/filters'
 import { SourceType } from 'types/scope'
 import { Questionnaire } from 'fhir/r4'
-import MaternityFormFilter from 'components/Filters/MaternityFormFilter'
 import DataTableForms from 'components/DataTable/DataTableForms'
 import { useSearchParams } from 'react-router-dom'
 import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
 import Chip from 'components/ui/Chip'
 import { getCodeList } from 'services/aphp/serviceValueSets'
 import { getConfig } from 'config'
+import TextInput from 'components/Filters/TextInput'
+import MultiSelectInput from 'components/Filters/MultiSelectInput'
+import labels from 'labels.json'
+import CheckboxsFilter from 'components/Filters/CheckboxsFilter'
+
+const formOptions = [
+  {
+    id: FormNames.PREGNANCY,
+    label: labels.formNames.pregnancy
+  },
+  {
+    id: FormNames.HOSPIT,
+    label: labels.formNames.hospit
+  }
+]
 
 const FormsList = () => {
   const theme = useTheme()
@@ -206,17 +218,23 @@ const FormsList = () => {
         onClose={() => setToggleFilterByModal(false)}
         onSubmit={(newFilters) => addFilters({ ...filters, ...newFilters })}
       >
-        <IppFilter name={FilterKeys.IPP} value={ipp ?? ''} />
-        <MaternityFormFilter name={FilterKeys.FORM_NAME} value={formName} />
+        <TextInput
+          name={FilterKeys.IPP}
+          value={ipp}
+          label="IPP :"
+          placeholder="'Exemple: 8000000000001,8000000000002'"
+        />
+        <CheckboxsFilter name={FilterKeys.FORM_NAME} value={formName} label="Formulaire :" options={formOptions} />
         <ExecutiveUnitsFilter
           sourceType={SourceType.FORM_RESPONSE}
           value={executiveUnits}
           name={FilterKeys.EXECUTIVE_UNITS}
         />
-        <EncounterStatusFilter
+        <MultiSelectInput
+          label="Statut de la visite associée :"
           value={encounterStatus}
           name={FilterKeys.ENCOUNTER_STATUS}
-          encounterStatusList={encounterStatusList}
+          options={encounterStatusList}
         />
       </Modal>
     </Grid>