Skip to content

Commit 9e098dd

Browse files
aetchegoaetchego
authored
fix(harmonisation visuelle): corrections - Ref gestion-de-projet#2873 (#1087)
1 parent ad6bc23 commit 9e098dd

File tree

10 files changed

+113
-58
lines changed

10 files changed

+113
-58
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ const Cim10Form = (props: CriteriaDrawerComponentProps) => {
175175
}}
176176
>
177177
<Alert severity="warning">
178-
Les données AREM sont disponibles uniquement pour la période du 07/12/2009 au 31/12/2022.
178+
Les données AREM sont disponibles uniquement pour la période du 07/12/2009 au 31/07/2024.
179179
</Alert>
180180
<Alert severity="warning">
181181
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‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -216,19 +216,17 @@ const MedicationForm = (props: CriteriaDrawerComponentProps) => {
216216
renderInput={(params) => <TextField {...params} label="Type de prescription" />}
217217
/>
218218
)}
219-
{currentCriteria.type === CriteriaType.MEDICATION_ADMINISTRATION && (
220-
<Autocomplete
221-
multiple
222-
id="criteria-prescription-type-autocomplete"
223-
className={classes.inputItem}
224-
options={criteriaData.data.administrations ?? []}
225-
getOptionLabel={(option) => option.label}
226-
isOptionEqualToValue={(option, value) => option.id === value.id}
227-
value={selectedCriteriaAdministration}
228-
onChange={(e, value) => setCurrentCriteria({ ...currentCriteria, administration: value })}
229-
renderInput={(params) => <TextField {...params} label="Voie d'administration" />}
230-
/>
231-
)}
219+
<Autocomplete
220+
multiple
221+
id="criteria-prescription-type-autocomplete"
222+
className={classes.inputItem}
223+
options={criteriaData.data.administrations ?? []}
224+
getOptionLabel={(option) => option.label}
225+
isOptionEqualToValue={(option, value) => option.id === value.id}
226+
value={selectedCriteriaAdministration}
227+
onChange={(e, value) => setCurrentCriteria({ ...currentCriteria, administration: value })}
228+
renderInput={(params) => <TextField {...params} label="Voie d'administration" />}
229+
/>
232230
<Autocomplete
233231
multiple
234232
options={criteriaData.data.encounterStatus ?? []}

‎src/components/Filters/CodeFilter/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ const CodeFilter = ({ name, value, references, disabled = false }: CodeFilterPro
1818
const [code, setCode] = useState(value)
1919

2020
useEffect(() => {
21-
if (context?.updateFormData) context.updateFormData(name, code)
21+
context?.updateFormData(name, code)
2222
}, [code, name])
2323

2424
return (
2525
<InputWrapper>
26-
<Typography variant="h3">Code :</Typography>
26+
<Typography variant="h3">Codes :</Typography>
2727
<ValueSetField
2828
disabled={disabled}
2929
value={code}

‎src/components/Filters/ExecutiveUnitsFilter/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ type ExecutiveUnitsFilterProps = {
1515

1616
const ExecutiveUnitsFilter = ({ name, value, sourceType, disabled = false }: ExecutiveUnitsFilterProps) => {
1717
const context = useContext(FormContext)
18-
const [population, setPopulation] = useState<Hierarchy<ScopeElement, string>[]>(value)
18+
const [population, setPopulation] = useState(value)
1919

2020
useEffect(() => {
2121
context?.updateFormData(name, population)
2222
}, [population, name])
2323

2424
return (
2525
<ExecutiveUnitsInput
26-
value={value}
26+
value={population}
2727
sourceType={sourceType}
2828
disabled={disabled}
29-
onChange={(selectedPopulation) => setPopulation(selectedPopulation)}
29+
onChange={setPopulation}
3030
label={
3131
<Typography variant="h3" alignSelf="center">
3232
Unité exécutrice

‎src/components/SearchValueSet/ValueSetField.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { SearchOutlined } from '@mui/icons-material'
88
import CloseIcon from '@mui/icons-material/Close'
99
import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
1010
import CodesWithSystems from 'components/Hierarchy/CodesWithSystems'
11+
import { isEqual, sortBy } from 'lodash'
1112

1213
type ValueSetFieldProps = {
1314
value: Hierarchy<FhirItem>[]
@@ -20,6 +21,7 @@ type ValueSetFieldProps = {
2021
const ValueSetField = ({ value, references, placeholder, disabled = false, onSelect }: ValueSetFieldProps) => {
2122
const [openCodeResearch, setOpenCodeResearch] = useState(false)
2223
const [isExtended, setIsExtended] = useState(false)
24+
const [confirmedValueSets, setConfirmedValueSets] = useState<Hierarchy<FhirItem>[]>(value)
2325

2426
const handleDelete = (node: Hierarchy<FhirItem>) => {
2527
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
5355
<IconButton
5456
sx={{ color: '#5BC5F2' }}
5557
size="small"
56-
onClick={() => setOpenCodeResearch(true)}
58+
onClick={() => {
59+
setOpenCodeResearch(true)
60+
setIsExtended(false)
61+
}}
5762
disabled={disabled}
5863
>
5964
<SearchOutlined />
6065
</IconButton>
6166
</Grid>
6267
</Grid>
6368
<Panel
69+
mandatory={isEqual(sortBy(confirmedValueSets), sortBy(value))}
70+
onConfirm={() => {
71+
onSelect(confirmedValueSets)
72+
setOpenCodeResearch(false)
73+
}}
6474
onClose={() => setOpenCodeResearch(false)}
65-
onConfirm={() => setOpenCodeResearch(false)}
6675
open={openCodeResearch}
6776
>
68-
<SearchValueSet references={references} onSelect={onSelect} selectedNodes={value} />
77+
<SearchValueSet references={references} onSelect={setConfirmedValueSets} selectedNodes={value} />
6978
</Panel>
7079
</>
7180
)

‎src/components/SearchValueSet/ValueSetTable.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { LIMIT_PER_PAGE } from 'hooks/search/useSearchParameters'
2121
import { Pagination } from 'components/ui/Pagination'
2222
import { getLabelFromCode, isDisplayedWithCode } from 'utils/valueSets'
2323
import { FhirItem } from 'types/valueSet'
24+
import TruncatedText from 'components/ui/TruncatedText'
2425

2526
type ValueSetRowProps = {
2627
item: Hierarchy<FhirItem>
@@ -80,7 +81,7 @@ const ValueSetRow = ({
8081
)}
8182
</CellWrapper>
8283
<CellWrapper item xs={10} cursor onClick={() => (open ? setOpen(false) : handleOpen())}>
83-
{getLabelFromCode(item)}
84+
<TruncatedText lineNb={2} text={getLabelFromCode(item)}></TruncatedText>
8485
</CellWrapper>
8586
<CellWrapper item xs={1} container>
8687
<Checkbox

‎src/components/ui/Inputs/ExecutiveUnits/index.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import CloseIcon from '@mui/icons-material/Close'
1414
import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
1515
import CodesWithSystems from 'components/Hierarchy/CodesWithSystems'
1616
import { SearchOutlined } from '@mui/icons-material'
17+
import { isEqual, sortBy } from 'lodash'
1718

1819
type ExecutiveUnitsProps = {
1920
value: Hierarchy<ScopeElement>[]
@@ -25,16 +26,14 @@ type ExecutiveUnitsProps = {
2526

2627
const ExecutiveUnits = ({ value, sourceType, disabled = false, onChange, label }: ExecutiveUnitsProps) => {
2728
const [population, setPopulation] = useState<Hierarchy<ScopeElement>[]>([])
28-
const [selectedPopulation, setSelectedPopulation] = useState<Hierarchy<ScopeElement>[]>([])
2929
const [confirmedPopulation, setConfirmedPopulation] = useState<Hierarchy<ScopeElement>[]>(value)
3030
const [loading, setLoading] = useState(disabled ? LoadingStatus.SUCCESS : LoadingStatus.FETCHING)
3131
const [open, setOpen] = useState(false)
3232
const [isExtended, setIsExtended] = useState(false)
3333

3434
const handleDelete = (node: Hierarchy<ScopeElement>) => {
35-
const newSelectedPopulation = selectedPopulation.filter((item) => item.id !== node.id)
36-
setSelectedPopulation(newSelectedPopulation)
37-
setConfirmedPopulation(newSelectedPopulation)
35+
const newSelectedPopulation = value.filter((item) => item.id !== node.id)
36+
onChange(newSelectedPopulation)
3837
}
3938

4039
useEffect(() => {
@@ -46,10 +45,6 @@ const ExecutiveUnits = ({ value, sourceType, disabled = false, onChange, label }
4645
if (!disabled) handleFetchPopulation()
4746
}, [])
4847

49-
useEffect(() => {
50-
onChange(confirmedPopulation)
51-
}, [confirmedPopulation])
52-
5348
return (
5449
<InputWrapper>
5550
<Grid item container alignContent="center" alignItems={'center'}>
@@ -75,44 +70,48 @@ const ExecutiveUnits = ({ value, sourceType, disabled = false, onChange, label }
7570
padding="9px 3px 9px 12px"
7671
>
7772
<Grid container alignItems="center" item xs={10}>
78-
{!confirmedPopulation.length && <FormLabel component="legend">Sélectionner une unité exécutrice</FormLabel>}
79-
<CodesWithSystems
80-
disabled={disabled}
81-
codes={confirmedPopulation}
82-
isExtended={isExtended}
83-
onDelete={handleDelete}
84-
/>
73+
{!value.length && <FormLabel component="legend">Sélectionner une unité exécutrice</FormLabel>}
74+
<CodesWithSystems disabled={disabled} codes={value} isExtended={isExtended} onDelete={handleDelete} />
8575
</Grid>
8676
<Grid item xs={2} container justifyContent="flex-end">
87-
{confirmedPopulation.length > 0 && isExtended && (
77+
{value.length > 0 && isExtended && (
8878
<IconButton size="small" sx={{ color: '#5BC5F2' }} onClick={() => setIsExtended(false)}>
8979
<CloseIcon />
9080
</IconButton>
9181
)}
92-
{confirmedPopulation.length > 0 && !isExtended && (
82+
{value.length > 0 && !isExtended && (
9383
<IconButton size="small" sx={{ color: '#5BC5F2' }} onClick={() => setIsExtended(true)}>
9484
<MoreHorizIcon />
9585
</IconButton>
9686
)}
97-
<IconButton sx={{ color: '#5BC5F2' }} size="small" onClick={() => setOpen(true)} disabled={disabled}>
87+
<IconButton
88+
sx={{ color: '#5BC5F2' }}
89+
size="small"
90+
onClick={() => {
91+
setOpen(true)
92+
setIsExtended(false)
93+
}}
94+
disabled={disabled}
95+
>
9896
{loading === LoadingStatus.FETCHING && <CircularProgress size={24} />}
9997
{loading === LoadingStatus.SUCCESS && <SearchOutlined />}
10098
</IconButton>
10199
</Grid>
102100
</Grid>
103101
<Panel
102+
mandatory={isEqual(sortBy(confirmedPopulation), sortBy(value))}
104103
title="Sélectionner une unité exécutrice"
105104
open={open}
106105
onConfirm={() => {
107-
setConfirmedPopulation(selectedPopulation)
106+
onChange(confirmedPopulation)
108107
setOpen(false)
109108
}}
110109
onClose={() => setOpen(false)}
111110
>
112111
<ScopeTree
113112
baseTree={population}
114-
selectedNodes={confirmedPopulation}
115-
onSelect={setSelectedPopulation}
113+
selectedNodes={value}
114+
onSelect={setConfirmedPopulation}
116115
sourceType={sourceType}
117116
/>
118117
</Panel>

‎src/components/ui/Panel/index.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ type RightPanelProps = {
77
title?: string
88
mandatory?: boolean
99
children: ReactNode
10-
onConfirm: () => void
11-
onClose: () => void
10+
cancelText?: string
11+
confirmText?: string
12+
onConfirm?: () => void
13+
onClose?: () => void
1214
}
1315

1416
const Panel = ({
@@ -17,6 +19,8 @@ const Panel = ({
1719
anchor = 'right',
1820
mandatory = false,
1921
children,
22+
cancelText = 'Annuler',
23+
confirmText = 'Confirmer',
2024
onConfirm,
2125
onClose
2226
}: PropsWithChildren<RightPanelProps>) => {
@@ -53,13 +57,17 @@ const Panel = ({
5357
borderTop="1px solid grey"
5458
marginTop={'auto'}
5559
>
56-
<Grid item xs={4} container justifyContent="space-between">
57-
<Button onClick={onClose} variant="outlined">
58-
Annuler
59-
</Button>
60-
<Button disabled={mandatory} onClick={onConfirm} variant="contained">
61-
Confirmer
62-
</Button>
60+
<Grid item xs={5} gap={1} container justifyContent="center">
61+
{onClose && (
62+
<Button onClick={onClose} variant="outlined">
63+
{cancelText}
64+
</Button>
65+
)}
66+
{onConfirm && (
67+
<Button disabled={mandatory} onClick={onConfirm} variant="contained">
68+
{confirmText}
69+
</Button>
70+
)}
6371
</Grid>
6472
</Grid>
6573
</Grid>

‎src/components/ui/TruncatedText/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useRef, useState, useEffect } from 'react'
2+
import { Typography, Tooltip } from '@mui/material'
3+
4+
type TruncatedTextProps = {
5+
lineNb: number
6+
text: string
7+
}
8+
9+
const TruncatedText = ({ lineNb, text }: TruncatedTextProps) => {
10+
const textRef = useRef<HTMLDivElement | null>(null)
11+
const [isTruncated, setIsTruncated] = useState(false)
12+
13+
useEffect(() => {
14+
if (textRef.current) {
15+
setIsTruncated(textRef.current.scrollHeight > textRef.current.clientHeight)
16+
}
17+
}, [])
18+
19+
return (
20+
<div>
21+
<Tooltip title={isTruncated ? textRef.current?.textContent : ''} arrow>
22+
<Typography
23+
variant="body1"
24+
ref={textRef}
25+
style={{
26+
display: '-webkit-box',
27+
WebkitBoxOrient: 'vertical',
28+
WebkitLineClamp: lineNb,
29+
overflow: 'hidden',
30+
textOverflow: 'ellipsis'
31+
}}
32+
>
33+
{text}
34+
</Typography>
35+
</Tooltip>
36+
</div>
37+
)
38+
}
39+
40+
export default TruncatedText

‎src/types/valueSet.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ export enum ReferencesLabel {
1515
ATC = 'ATC',
1616
UCD = 'UCD',
1717
UCD_13 = 'UCD 13',
18-
LOINC = 'Loinc',
19-
ANABIO = 'Anabio',
20-
GHM = 'Ghm',
21-
CIM10 = 'Cim10',
22-
CCAM = 'Ccam'
18+
LOINC = 'LOINC',
19+
ANABIO = 'ANABIO',
20+
GHM = 'GHM',
21+
CIM10 = 'CIIM10',
22+
CCAM = 'CCAM'
2323
}
2424

2525
export type Reference = {

0 commit comments

Comments
 (0)