fix(harmonisation visuelle): corrections - Ref gestion-de-projet#2873 (…

…#1087)
aphp · Jan 20, 2025 · ed7882a · ed7882a
1 parent 251406f
commit ed7882a
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 81 deletions.
diff --git a/.../DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/index.tsx b/.../DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/index.tsx
@@ -175,7 +175,7 @@ const Cim10Form = (props: CriteriaDrawerComponentProps) => {
             }}
           >
             <Alert severity="warning">
-              Les données AREM sont disponibles uniquement pour la période du 07/12/2009 au 31/12/2022.
+              Les données AREM sont disponibles uniquement pour la période du 07/12/2009 au 31/07/2024.
             </Alert>
             <Alert severity="warning">
               Seuls les diagnostics rattachés à une visite Orbis (avec un Dossier Administratif - NDA) sont actuellement
@@ -192,7 +192,7 @@ const Cim10Form = (props: CriteriaDrawerComponentProps) => {
               value={currentCriteria.code}
               references={cim10References}
               onSelect={(value) => setCurrentCriteria({ ...currentCriteria, code: value })}
-              placeholder="Sélectionner les codes Cim10"
+              placeholder="Sélectionner les codes CIM10"
             />
           </Grid>
           <Autocomplete

diff --git a/...ramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/index.tsx b/...ramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/index.tsx
@@ -216,19 +216,17 @@ const MedicationForm = (props: CriteriaDrawerComponentProps) => {
               renderInput={(params) => <TextField {...params} label="Type de prescription" />}
             />
           )}
-          {currentCriteria.type === CriteriaType.MEDICATION_ADMINISTRATION && (
-            <Autocomplete
-              multiple
-              id="criteria-prescription-type-autocomplete"
-              className={classes.inputItem}
-              options={criteriaData.data.administrations ?? []}
-              getOptionLabel={(option) => option.label}
-              isOptionEqualToValue={(option, value) => option.id === value.id}
-              value={selectedCriteriaAdministration}
-              onChange={(e, value) => setCurrentCriteria({ ...currentCriteria, administration: value })}
-              renderInput={(params) => <TextField {...params} label="Voie d'administration" />}
-            />
-          )}
+          <Autocomplete
+            multiple
+            id="criteria-prescription-type-autocomplete"
+            className={classes.inputItem}
+            options={criteriaData.data.administrations ?? []}
+            getOptionLabel={(option) => option.label}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            value={selectedCriteriaAdministration}
+            onChange={(e, value) => setCurrentCriteria({ ...currentCriteria, administration: value })}
+            renderInput={(params) => <TextField {...params} label="Voie d'administration" />}
+          />
           <Autocomplete
             multiple
             options={criteriaData.data.encounterStatus ?? []}

diff --git a/src/components/Filters/CodeFilter/index.tsx b/src/components/Filters/CodeFilter/index.tsx
@@ -18,12 +18,12 @@ const CodeFilter = ({ name, value, references, disabled = false }: CodeFilterPro
   const [code, setCode] = useState(value)
 
   useEffect(() => {
-    if (context?.updateFormData) context.updateFormData(name, code)
+    context?.updateFormData(name, code)
   }, [code, name])
 
   return (
     <InputWrapper>
-      <Typography variant="h3">Code :</Typography>
+      <Typography variant="h3">Codes :</Typography>
       <ValueSetField
         disabled={disabled}
         value={code}

diff --git a/src/components/Filters/ExecutiveUnitsFilter/index.tsx b/src/components/Filters/ExecutiveUnitsFilter/index.tsx
@@ -15,18 +15,18 @@ type ExecutiveUnitsFilterProps = {
 
 const ExecutiveUnitsFilter = ({ name, value, sourceType, disabled = false }: ExecutiveUnitsFilterProps) => {
   const context = useContext(FormContext)
-  const [population, setPopulation] = useState<Hierarchy<ScopeElement, string>[]>(value)
+  const [population, setPopulation] = useState(value)
 
   useEffect(() => {
     context?.updateFormData(name, population)
   }, [population, name])
 
   return (
     <ExecutiveUnitsInput
-      value={value}
+      value={population}
       sourceType={sourceType}
       disabled={disabled}
-      onChange={(selectedPopulation) => setPopulation(selectedPopulation)}
+      onChange={setPopulation}
       label={
         <Typography variant="h3" alignSelf="center">
           Unité exécutrice

diff --git a/src/components/Hierarchy/styles.ts b/src/components/Hierarchy/styles.ts
@@ -1,7 +1,7 @@
 import { Grid, styled } from '@mui/material'
 
 type RowContainerProps = {
-  color: string
+  color?: string
 }
 
 type RowWrapperProps = {
@@ -14,7 +14,7 @@ type CellWrapperProps = {
   fontWeight?: number
 }
 
-export const RowContainerWrapper = styled(Grid)<RowContainerProps>(({ color }) => ({
+export const RowContainerWrapper = styled(Grid)<RowContainerProps>(({ color = '#fff' }) => ({
   backgroundColor: color,
   borderBottom: '1px solid rgba(224, 224, 224, 1)',
   padding: '0 8px'

diff --git a/src/components/SearchValueSet/ValueSetField.tsx b/src/components/SearchValueSet/ValueSetField.tsx
@@ -8,6 +8,7 @@ import { SearchOutlined } from '@mui/icons-material'
 import CloseIcon from '@mui/icons-material/Close'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 import CodesWithSystems from 'components/Hierarchy/CodesWithSystems'
+import { isEqual, sortBy } from 'lodash'
 
 type ValueSetFieldProps = {
   value: Hierarchy<FhirItem>[]
@@ -17,15 +18,23 @@ type ValueSetFieldProps = {
   onSelect: (selectedItems: Hierarchy<FhirItem>[]) => void
 }
 
+const PANEL_WIDTH = '900px'
+
 const ValueSetField = ({ value, references, placeholder, disabled = false, onSelect }: ValueSetFieldProps) => {
   const [openCodeResearch, setOpenCodeResearch] = useState(false)
   const [isExtended, setIsExtended] = useState(false)
+  const [confirmedValueSets, setConfirmedValueSets] = useState<Hierarchy<FhirItem>[]>(value)
 
   const handleDelete = (node: Hierarchy<FhirItem>) => {
     const newCodes = value.filter((item) => !(item.id === node.id && item.system === node.system))
     onSelect(newCodes)
   }
 
+  const handleOpen = () => {
+    setOpenCodeResearch(true)
+    setIsExtended(false)
+  }
+
   return (
     <>
       <Grid
@@ -35,7 +44,16 @@ const ValueSetField = ({ value, references, placeholder, disabled = false, onSel
         borderRadius="4px"
         padding="9px 3px 9px 12px"
       >
-        <Grid container alignItems="center" item xs={10}>
+        <Grid
+          container
+          alignItems="center"
+          item
+          xs={10}
+          role="button"
+          tabIndex={0}
+          style={{ cursor: 'pointer' }}
+          onClick={handleOpen}
+        >
           <CodesWithSystems disabled={disabled} codes={value} isExtended={isExtended} onDelete={handleDelete} />
           {!value.length && <FormLabel component="legend">{placeholder}</FormLabel>}
         </Grid>
@@ -50,22 +68,22 @@ const ValueSetField = ({ value, references, placeholder, disabled = false, onSel
               <MoreHorizIcon />
             </IconButton>
           )}
-          <IconButton
-            sx={{ color: '#5BC5F2' }}
-            size="small"
-            onClick={() => setOpenCodeResearch(true)}
-            disabled={disabled}
-          >
+          <IconButton sx={{ color: '#5BC5F2' }} size="small" onClick={handleOpen} disabled={disabled}>
             <SearchOutlined />
           </IconButton>
         </Grid>
       </Grid>
       <Panel
+        size={PANEL_WIDTH}
+        mandatory={isEqual(sortBy(confirmedValueSets), sortBy(value))}
+        onConfirm={() => {
+          onSelect(confirmedValueSets)
+          setOpenCodeResearch(false)
+        }}
         onClose={() => setOpenCodeResearch(false)}
-        onConfirm={() => setOpenCodeResearch(false)}
         open={openCodeResearch}
       >
-        <SearchValueSet references={references} onSelect={onSelect} selectedNodes={value} />
+        <SearchValueSet references={references} onSelect={setConfirmedValueSets} selectedNodes={value} />
       </Panel>
     </>
   )

diff --git a/src/components/SearchValueSet/ValueSetTable.tsx b/src/components/SearchValueSet/ValueSetTable.tsx
@@ -6,9 +6,8 @@ import {
   Grid,
   Table,
   TableBody,
-  TableCell,
   TableContainer,
-  TableRow,
+  TableHead,
   Typography
 } from '@mui/material'
 import { LoadingStatus, SelectedStatus } from 'types'
@@ -21,6 +20,7 @@ import { LIMIT_PER_PAGE } from 'hooks/search/useSearchParameters'
 import { Pagination } from 'components/ui/Pagination'
 import { getLabelFromCode, isDisplayedWithCode } from 'utils/valueSets'
 import { FhirItem } from 'types/valueSet'
+import TruncatedText from 'components/ui/TruncatedText'
 
 type ValueSetRowProps = {
   item: Hierarchy<FhirItem>
@@ -80,7 +80,7 @@ const ValueSetRow = ({
             )}
           </CellWrapper>
           <CellWrapper item xs={10} cursor onClick={() => (open ? setOpen(false) : handleOpen())}>
-            {getLabelFromCode(item)}
+            <TruncatedText lineNb={2} text={getLabelFromCode(item)}></TruncatedText>
           </CellWrapper>
           <CellWrapper item xs={1} container>
             <Checkbox
@@ -154,14 +154,17 @@ const ValueSetTable = ({
       <Grid container item flexGrow={1}>
         <TableContainer style={{ background: 'white' }}>
           <Table>
-            <TableBody>
+            <TableHead>
               {loading.list === LoadingStatus.SUCCESS && !isHierarchy && (
-                <TableRow>
-                  <TableCell colSpan={6}>
-                    <Grid container alignItems="center" justifyContent="space-between">
+                <RowContainerWrapper container>
+                  <RowWrapper container alignItems="center" justifyContent="space-between" style={{ paddingRight: 10 }}>
+                    <CellWrapper item xs={1} />
+                    <CellWrapper item xs={10}>
                       <Typography color={hierarchy.count ? 'primary' : '#4f4f4f'} fontWeight={600}>
                         {hierarchy.count ? `${hierarchy.count} résultat(s)` : `Aucun résultat à afficher`}
                       </Typography>
+                    </CellWrapper>
+                    <CellWrapper item xs={1} container>
                       {hierarchy.count > 0 && (
                         <Checkbox
                           disabled={
@@ -175,11 +178,13 @@ const ValueSetTable = ({
                           style={{ paddingRight: 16 }}
                         />
                       )}
-                    </Grid>
-                  </TableCell>
-                </TableRow>
+                    </CellWrapper>
+                  </RowWrapper>
+                </RowContainerWrapper>
               )}
-              {loading.list === LoadingStatus.SUCCESS && (
+            </TableHead>
+            {loading.list === LoadingStatus.SUCCESS && (
+              <TableBody>
                 <div style={{ maxHeight: '20vh' }}>
                   {hierarchy.tree.map((item) =>
                     item ? (
@@ -199,8 +204,8 @@ const ValueSetTable = ({
                     )
                   )}
                 </div>
-              )}
-            </TableBody>
+              </TableBody>
+            )}
           </Table>
           {loading.list === LoadingStatus.FETCHING && (
             <Grid container justifyContent="center" alignContent="center" height={500}>

diff --git a/src/components/ui/Inputs/ExecutiveUnits/index.tsx b/src/components/ui/Inputs/ExecutiveUnits/index.tsx
@@ -14,6 +14,7 @@ import CloseIcon from '@mui/icons-material/Close'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 import CodesWithSystems from 'components/Hierarchy/CodesWithSystems'
 import { SearchOutlined } from '@mui/icons-material'
+import { isEqual, sortBy } from 'lodash'
 
 type ExecutiveUnitsProps = {
   value: Hierarchy<ScopeElement>[]
@@ -25,16 +26,14 @@ type ExecutiveUnitsProps = {
 
 const ExecutiveUnits = ({ value, sourceType, disabled = false, onChange, label }: ExecutiveUnitsProps) => {
   const [population, setPopulation] = useState<Hierarchy<ScopeElement>[]>([])
-  const [selectedPopulation, setSelectedPopulation] = useState<Hierarchy<ScopeElement>[]>([])
   const [confirmedPopulation, setConfirmedPopulation] = useState<Hierarchy<ScopeElement>[]>(value)
   const [loading, setLoading] = useState(disabled ? LoadingStatus.SUCCESS : LoadingStatus.FETCHING)
   const [open, setOpen] = useState(false)
   const [isExtended, setIsExtended] = useState(false)
 
   const handleDelete = (node: Hierarchy<ScopeElement>) => {
-    const newSelectedPopulation = selectedPopulation.filter((item) => item.id !== node.id)
-    setSelectedPopulation(newSelectedPopulation)
-    setConfirmedPopulation(newSelectedPopulation)
+    const newSelectedPopulation = value.filter((item) => item.id !== node.id)
+    onChange(newSelectedPopulation)
   }
 
   useEffect(() => {
@@ -46,10 +45,6 @@ const ExecutiveUnits = ({ value, sourceType, disabled = false, onChange, label }
     if (!disabled) handleFetchPopulation()
   }, [])
 
-  useEffect(() => {
-    onChange(confirmedPopulation)
-  }, [confirmedPopulation])
-
   return (
     <InputWrapper>
       <Grid item container alignContent="center" alignItems={'center'}>
@@ -75,44 +70,48 @@ const ExecutiveUnits = ({ value, sourceType, disabled = false, onChange, label }
         padding="9px 3px 9px 12px"
       >
         <Grid container alignItems="center" item xs={10}>
-          {!confirmedPopulation.length && <FormLabel component="legend">Sélectionner une unité exécutrice</FormLabel>}
-          <CodesWithSystems
-            disabled={disabled}
-            codes={confirmedPopulation}
-            isExtended={isExtended}
-            onDelete={handleDelete}
-          />
+          {!value.length && <FormLabel component="legend">Sélectionner une unité exécutrice</FormLabel>}
+          <CodesWithSystems disabled={disabled} codes={value} isExtended={isExtended} onDelete={handleDelete} />
         </Grid>
         <Grid item xs={2} container justifyContent="flex-end">
-          {confirmedPopulation.length > 0 && isExtended && (
+          {value.length > 0 && isExtended && (
             <IconButton size="small" sx={{ color: '#5BC5F2' }} onClick={() => setIsExtended(false)}>
               <CloseIcon />
             </IconButton>
           )}
-          {confirmedPopulation.length > 0 && !isExtended && (
+          {value.length > 0 && !isExtended && (
             <IconButton size="small" sx={{ color: '#5BC5F2' }} onClick={() => setIsExtended(true)}>
               <MoreHorizIcon />
             </IconButton>
           )}
-          <IconButton sx={{ color: '#5BC5F2' }} size="small" onClick={() => setOpen(true)} disabled={disabled}>
+          <IconButton
+            sx={{ color: '#5BC5F2' }}
+            size="small"
+            onClick={() => {
+              setOpen(true)
+              setIsExtended(false)
+            }}
+            disabled={disabled}
+          >
             {loading === LoadingStatus.FETCHING && <CircularProgress size={24} />}
             {loading === LoadingStatus.SUCCESS && <SearchOutlined />}
           </IconButton>
         </Grid>
       </Grid>
       <Panel
+        mandatory={isEqual(sortBy(confirmedPopulation), sortBy(value))}
         title="Sélectionner une unité exécutrice"
         open={open}
         onConfirm={() => {
-          setConfirmedPopulation(selectedPopulation)
+          onChange(confirmedPopulation)
           setOpen(false)
         }}
         onClose={() => setOpen(false)}
       >
         <ScopeTree
           baseTree={population}
-          selectedNodes={confirmedPopulation}
-          onSelect={setSelectedPopulation}
+          selectedNodes={value}
+          onSelect={setConfirmedPopulation}
           sourceType={sourceType}
         />
       </Panel>