fields

aphp · Nov 8, 2024 · 63754c2 · 63754c2
1 parent 44bca6e
commit 63754c2
Show file tree

Hide file tree

Showing 18 changed files with 195 additions and 478 deletions.
diff --git a/src/components/Dashboard/MedicationList/index.tsx b/src/components/Dashboard/MedicationList/index.tsx
@@ -261,12 +261,12 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => {
     setTriggerClean(!triggerClean)
   }, [selectedTab])
 
-    const references = useMemo(() => {
-      return getValueSetsFromSystems([
-        getConfig().features.medication.valueSets.medicationAtc.url,
-        getConfig().features.medication.valueSets.medicationUcd.url
-      ])
-    }, [])
+  const references = useMemo(() => {
+    return getValueSetsFromSystems([
+      getConfig().features.medication.valueSets.medicationAtc.url,
+      getConfig().features.medication.valueSets.medicationUcd.url
+    ])
+  }, [])
 
   return (
     <Grid container gap="20px">
@@ -473,89 +473,79 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => {
             validationText="Sauvegarder"
           >
             <Grid container direction="column" gap="8px">
-              <Grid item container direction="column">
+              <TextInput
+                name="filterName"
+                label="Nom :"
+                value={selectedSavedFilter?.filterName}
+                error={savedFiltersErrors}
+                disabled={isReadonlyFilterInfoModal}
+                minLimit={2}
+                maxLimit={50}
+              />
+              {!deidentified && (
                 <TextInput
-                  name="filterName"
-                  label="Nom :"
-                  value={selectedSavedFilter?.filterName}
-                  error={savedFiltersErrors}
+                  name="searchInput"
+                  label="Recherche textuelle :"
                   disabled={isReadonlyFilterInfoModal}
-                  minLimit={2}
-                  maxLimit={50}
+                  value={selectedSavedFilter?.filterParams.searchInput}
                 />
-              </Grid>
+              )}
               {!deidentified && (
-                <Grid item container direction="column" paddingBottom="8px">
-                  <TextInput
-                    name="searchInput"
-                    label="Recherche textuelle :"
-                    disabled={isReadonlyFilterInfoModal}
-                    value={selectedSavedFilter?.filterParams.searchInput}
-                  />
-                </Grid>
+                <NdaFilter
+                  disabled={isReadonlyFilterInfoModal}
+                  name={FilterKeys.NDA}
+                  value={selectedSavedFilter?.filterParams.filters.nda ?? ''}
+                />
               )}
-              <Grid item>
-                {!deidentified && (
-                  <NdaFilter
-                    disabled={isReadonlyFilterInfoModal}
-                    name={FilterKeys.NDA}
-                    value={selectedSavedFilter?.filterParams.filters.nda ?? ''}
-                  />
-                )}
-                {!deidentified && (
-                  <Grid item>
-                    <IppFilter
-                      disabled={isReadonlyFilterInfoModal}
-                      name={FilterKeys.IPP}
-                      value={selectedSavedFilter?.filterParams.filters.ipp ?? ''}
-                    />
-                  </Grid>
-                )}
-                {selectedTab.id === ResourceType.MEDICATION_REQUEST && (
-                  <PrescriptionTypesFilter
-                    value={selectedSavedFilter?.filterParams.filters.prescriptionTypes || []}
-                    name={FilterKeys.PRESCRIPTION_TYPES}
-                    allPrescriptionTypes={allPrescriptionTypes}
-                    disabled={isReadonlyFilterInfoModal}
-                  />
-                )}
-                {selectedTab.id === ResourceType.MEDICATION_ADMINISTRATION && (
-                  <AdministrationTypesFilter
-                    disabled={isReadonlyFilterInfoModal}
-                    value={selectedSavedFilter?.filterParams.filters.administrationRoutes || []}
-                    name={FilterKeys.ADMINISTRATION_ROUTES}
-                    allAdministrationTypes={allAdministrationRoutes}
-                  />
-                )}
-                <Grid item xs={12}>
-                  <CodeFilter
-                    references={references}
-                    disabled={isReadonlyFilterInfoModal}
-                    name={FilterKeys.CODE}
-                    value={selectedSavedFilter?.filterParams.filters.code ?? []}
-                  />
-                </Grid>
-                <DatesRangeFilter
+              {!deidentified && (
+                <IppFilter
                   disabled={isReadonlyFilterInfoModal}
-                  values={[
-                    selectedSavedFilter?.filterParams.filters.startDate,
-                    selectedSavedFilter?.filterParams.filters.endDate
-                  ]}
-                  names={[FilterKeys.START_DATE, FilterKeys.END_DATE]}
+                  name={FilterKeys.IPP}
+                  value={selectedSavedFilter?.filterParams.filters.ipp ?? ''}
                 />
-                <ExecutiveUnitsFilter
-                  sourceType={SourceType.MEDICATION}
+              )}
+              {selectedTab.id === ResourceType.MEDICATION_REQUEST && (
+                <PrescriptionTypesFilter
+                  value={selectedSavedFilter?.filterParams.filters.prescriptionTypes || []}
+                  name={FilterKeys.PRESCRIPTION_TYPES}
+                  allPrescriptionTypes={allPrescriptionTypes}
                   disabled={isReadonlyFilterInfoModal}
-                  value={selectedSavedFilter?.filterParams.filters.executiveUnits || []}
-                  name={FilterKeys.EXECUTIVE_UNITS}
                 />
-                <EncounterStatusFilter
+              )}
+              {selectedTab.id === ResourceType.MEDICATION_ADMINISTRATION && (
+                <AdministrationTypesFilter
                   disabled={isReadonlyFilterInfoModal}
-                  value={selectedSavedFilter?.filterParams.filters.encounterStatus || []}
-                  name={FilterKeys.ENCOUNTER_STATUS}
-                  encounterStatusList={encounterStatusList}
+                  value={selectedSavedFilter?.filterParams.filters.administrationRoutes || []}
+                  name={FilterKeys.ADMINISTRATION_ROUTES}
+                  allAdministrationTypes={allAdministrationRoutes}
                 />
-              </Grid>
+              )}
+              <CodeFilter
+                references={references}
+                disabled={isReadonlyFilterInfoModal}
+                name={FilterKeys.CODE}
+                value={selectedSavedFilter?.filterParams.filters.code ?? []}
+              />
+              <DatesRangeFilter
+                disabled={isReadonlyFilterInfoModal}
+                values={[
+                  selectedSavedFilter?.filterParams.filters.startDate,
+                  selectedSavedFilter?.filterParams.filters.endDate
+                ]}
+                names={[FilterKeys.START_DATE, FilterKeys.END_DATE]}
+              />
+              <ExecutiveUnitsFilter
+                sourceType={SourceType.MEDICATION}
+                disabled={isReadonlyFilterInfoModal}
+                value={selectedSavedFilter?.filterParams.filters.executiveUnits || []}
+                name={FilterKeys.EXECUTIVE_UNITS}
+              />
+              <EncounterStatusFilter
+                disabled={isReadonlyFilterInfoModal}
+                value={selectedSavedFilter?.filterParams.filters.encounterStatus || []}
+                name={FilterKeys.ENCOUNTER_STATUS}
+                encounterStatusList={encounterStatusList}
+              />
             </Grid>
           </Modal>
         </List>

diff --git a/src/components/Filters/CodeFilter/index.tsx b/src/components/Filters/CodeFilter/index.tsx
@@ -19,7 +19,7 @@ const CodeFilter = ({ name, value, references, disabled = false }: CodeFilterPro
 
   useEffect(() => {
     if (context?.updateFormData) context.updateFormData(name, code)
-  }, [code])
+  }, [code, name])
 
   return (
     <InputWrapper>

diff --git a/src/components/Filters/ExecutiveUnitsFilter/index.tsx b/src/components/Filters/ExecutiveUnitsFilter/index.tsx
@@ -18,7 +18,7 @@ const ExecutiveUnitsFilter = ({ name, value, sourceType, disabled = false }: Exe
 
   useEffect(() => {
     context?.updateFormData(name, population)
-  }, [population, context, name])
+  }, [population, name])
 
   return (
     <ExecutiveUnitsInput

diff --git a/src/components/Hierarchy/CodesWithSystems.tsx b/src/components/Hierarchy/CodesWithSystems.tsx
@@ -0,0 +1,56 @@
+import { Chip, Grid, Typography } from '@mui/material'
+import React, { useMemo } from 'react'
+import { Hierarchy } from 'types/hierarchy'
+import { groupBySystem } from 'utils/hierarchy/hierarchy'
+import { getLabelFromCode, getLabelFromSystem, isDisplayedWithSystem } from 'utils/valueSets'
+
+type CodesWithSystemsProps<T> = {
+  codes: Hierarchy<T>[]
+  disabled?: boolean
+  isExtended?: boolean
+  onDelete: (node: Hierarchy<T>) => void
+}
+
+const CodesWithSystems = <T,>({ codes, disabled = false, isExtended = true, onDelete }: CodesWithSystemsProps<T>) => {
+  const groupedBySystem = useMemo(() => groupBySystem(codes), [codes])
+
+  const ChipGroup = ({ codes }: { codes: Hierarchy<T>[] }) => (
+    <>
+      {codes.map((code) => (
+        <Chip
+          disabled={disabled}
+          key={code.id}
+          label={getLabelFromCode(code)}
+          sx={{ marginBottom: '2px', marginRight: '2px', color: '#00000099' }}
+          onDelete={() => onDelete(code)}
+        />
+      ))}
+    </>
+  )
+
+  return (
+    <>
+      {codes.length > 0 && isExtended && (
+        <Grid container alignItems="center" overflow="hidden">
+          {groupedBySystem.map((group) => (
+            <Grid item xs={12}>
+              {isDisplayedWithSystem(group.system) && (
+                <Typography fontWeight="700" marginRight="5px">
+                  {`${getLabelFromSystem(group.system)} (${group.codes.length})`}
+                </Typography>
+              )}
+              <ChipGroup codes={group.codes} />
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      {codes.length > 0 && !isExtended && (
+        <div style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
+          <ChipGroup codes={codes} />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default CodesWithSystems
diff --git a/src/components/Hierarchy/SelectedCodes.tsx b/src/components/Hierarchy/SelectedCodes.tsx
@@ -1,19 +1,16 @@
 import React, { useState } from 'react'
 
 import { Collapse, Grid, Typography } from '@mui/material'
-import Chip from 'components/ui/Chip'
 import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material'
 import { Hierarchy } from 'types/hierarchy'
-import { v4 as uuidv4 } from 'uuid'
-import { HIERARCHY_ROOT } from 'services/aphp/serviceValueSets'
+import CodesWithSystems from './CodesWithSystems'
 
 type SelectedCodesProps<T> = {
   values: Hierarchy<T>[]
-  joinDisplayWithCode?: (code: Hierarchy<T>) => boolean
-  onDelete: (hierarchyElement: Hierarchy<T>) => void
+  onDelete: (node: Hierarchy<T>) => void
 }
 
-const SelectedCodes = <T,>({ values, joinDisplayWithCode = () => false, onDelete }: SelectedCodesProps<T>) => {
+const SelectedCodes = <T,>({ values, onDelete }: SelectedCodesProps<T>) => {
   const [openSelectedCodesDrawer, setOpenSelectedCodesDrawer] = useState(false)
 
   return (
@@ -26,26 +23,13 @@ const SelectedCodes = <T,>({ values, joinDisplayWithCode = () => false, onDelete
           justifyContent="space-between"
           style={{ maxHeight: 200, overflowX: 'hidden', overflowY: 'auto', marginBottom: 20 }}
         >
-          {values?.length > 0 && (
-            <Grid item xs={12} container marginTop={2}>
-              {values.map((code) => (
-                <Chip
-                  key={uuidv4()}
-                  style={{ backgroundColor: '#FFF' }}
-                  label={
-                    joinDisplayWithCode(code) && code.id !== HIERARCHY_ROOT ? `${code.id} - ${code.label}` : code.label
-                  }
-                  onDelete={() => onDelete(code)}
-                />
-              ))}
-            </Grid>
-          )}
+          <CodesWithSystems codes={values} onDelete={onDelete} />
         </Grid>
       </Collapse>
       <Grid item xs={12} container alignItems="center" justifyContent="space-between">
         <Grid item xs={4} container>
           <Typography textAlign="center" fontWeight={900} color="#0063AF">
-            {values?.length} sélectionné(s)
+            {values.length} sélectionné(s)
           </Typography>
         </Grid>
         <Grid item xs={1} container justifyContent="flex-end">

diff --git a/src/components/Patient/PatientMedication/index.tsx b/src/components/Patient/PatientMedication/index.tsx
@@ -467,7 +467,6 @@ const PatientMedication = ({ groupId }: PatientMedicationProps) => {
             validationText="Sauvegarder"
           >
             <Grid container direction="column" gap="8px">
-              <Grid item container direction="column">
                 <TextInput
                   name="filterName"
                   label="Nom :"
@@ -477,18 +476,14 @@ const PatientMedication = ({ groupId }: PatientMedicationProps) => {
                   minLimit={2}
                   maxLimit={50}
                 />
-              </Grid>
               {!searchResults.deidentified && (
-                <Grid item container direction="column" paddingBottom="8px">
                   <TextInput
                     name="searchInput"
                     label="Recherche textuelle :"
                     disabled={isReadonlyFilterInfoModal}
                     value={selectedSavedFilter?.filterParams.searchInput}
                   />
-                </Grid>
               )}
-              <Grid item>
                 {!searchResults.deidentified && (
                   <NdaFilter
                     disabled={isReadonlyFilterInfoModal}
@@ -539,7 +534,6 @@ const PatientMedication = ({ groupId }: PatientMedicationProps) => {
                   encounterStatusList={encounterStatusList}
                 />
               </Grid>
-            </Grid>
           </Modal>
         </List>
       </Modal>