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

src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/index.tsx

@@ -81,7 +81,7 @@
     const encounterStatus =
       mappingCriteria(currentCriteria?.encounterStatus, CriteriaDataKey.ENCOUNTER_STATUS, criteriaData) || []
     setCurrentCriteria({ ...currentCriteria, code, encounterStatus })
   }, [])
   return (
     <Grid className={classes.root}>
       <Grid className={classes.actionContainer}>
@@ -175,7 +175,7 @@
             }}
           >
             <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

src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/index.tsx

@@ -61,7 +61,7 @@
     if (currentCriteria.type === CriteriaType.MEDICATION_ADMINISTRATION) {
       setCurrentCriteria({ ...currentCriteria, endOccurrence: [null, null] })
     }
   }, [currentCriteria.type])
 
   const medicationReferences = useMemo(() => {
     return getValueSetsFromSystems([
@@ -75,7 +75,7 @@
       mappingCriteria(currentCriteria?.encounterStatus, CriteriaDataKey.ENCOUNTER_STATUS, criteriaData) || []
     const code = mappingHierarchyCriteria(currentCriteria?.code, CriteriaDataKey.MEDICATION_DATA, criteriaData) || []
     setCurrentCriteria({ ...currentCriteria, code, encounterStatus })
   }, [])
 
   if (criteriaData?.data?.prescriptionTypes === 'loading' || criteriaData?.data?.administrations === 'loading') {
     return <></>
@@ -216,19 +216,17 @@
               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 ?? []}

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}

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

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>[]
@@ -20,6 +21,7 @@ type ValueSetFieldProps = {
 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))
@@ -53,19 +55,26 @@ const ValueSetField = ({ value, references, placeholder, disabled = false, onSel
           <IconButton
             sx={{ color: '#5BC5F2' }}
             size="small"
-            onClick={() => setOpenCodeResearch(true)}
+            onClick={() => {
+              setOpenCodeResearch(true)
+              setIsExtended(false)
+            }}
             disabled={disabled}
           >
             <SearchOutlined />
           </IconButton>
         </Grid>
       </Grid>
       <Panel
+        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>
     </>
   )

src/components/SearchValueSet/ValueSetTable.tsx

@@ -21,6 +21,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 +81,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

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>

src/components/ui/Panel/index.tsx

@@ -7,8 +7,10 @@ type RightPanelProps = {
   title?: string
   mandatory?: boolean
   children: ReactNode
-  onConfirm: () => void
-  onClose: () => void
+  cancelText?: string
+  confirmText?: string
+  onConfirm?: () => void
+  onClose?: () => void
 }
 
 const Panel = ({
@@ -17,6 +19,8 @@ const Panel = ({
   anchor = 'right',
   mandatory = false,
   children,
+  cancelText = 'Annuler',
+  confirmText = 'Confirmer',
   onConfirm,
   onClose
 }: PropsWithChildren<RightPanelProps>) => {
@@ -53,13 +57,17 @@ const Panel = ({
           borderTop="1px solid grey"
           marginTop={'auto'}
         >
-          <Grid item xs={4} container justifyContent="space-between">
-            <Button onClick={onClose} variant="outlined">
-              Annuler
-            </Button>
-            <Button disabled={mandatory} onClick={onConfirm} variant="contained">
-              Confirmer
-            </Button>
+          <Grid item xs={5} gap={1} container justifyContent="center">
+            {onClose && (
+              <Button onClick={onClose} variant="outlined">
+                {cancelText}
+              </Button>
+            )}
+            {onConfirm && (
+              <Button disabled={mandatory} onClick={onConfirm} variant="contained">
+                {confirmText}
+              </Button>
+            )}
           </Grid>
         </Grid>
       </Grid>

src/components/ui/TruncatedText/index.tsx

@@ -0,0 +1,40 @@
+import React, { useRef, useState, useEffect } from 'react'
+import { Typography, Tooltip } from '@mui/material'
+
+type TruncatedTextProps = {
+  lineNb: number
+  text: string
+}
+
+const TruncatedText = ({ lineNb, text }: TruncatedTextProps) => {
+  const textRef = useRef<HTMLDivElement | null>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
+
+  useEffect(() => {
+    if (textRef.current) {
+      setIsTruncated(textRef.current.scrollHeight > textRef.current.clientHeight)
+    }
+  }, [])
+
+  return (
+    <div>
+      <Tooltip title={isTruncated ? textRef.current?.textContent : ''} arrow>
+        <Typography
+          variant="body1"
+          ref={textRef}
+          style={{
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: lineNb,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}
+        >
+          {text}
+        </Typography>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default TruncatedText

src/types/valueSet.ts

@@ -15,11 +15,11 @@ export enum ReferencesLabel {
   ATC = 'ATC',
   UCD = 'UCD',
   UCD_13 = 'UCD 13',
-  LOINC = 'Loinc',
-  ANABIO = 'Anabio',
-  GHM = 'Ghm',
-  CIM10 = 'Cim10',
-  CCAM = 'Ccam'
+  LOINC = 'LOINC',
+  ANABIO = 'ANABIO',
+  GHM = 'GHM',
+  CIM10 = 'CIIM10',
+  CCAM = 'CCAM'
 }
 
 export type Reference = {