Skip to content

Commit 3126576

Browse files
aetchegoaetchego
committed
fix(harmonisation visuelle): corrections - Ref gestion-de-projet#2873 (#1087)
1 parent 251406f commit 3126576

File tree

12 files changed

+152
-81
lines changed

12 files changed

+152
-81
lines changed

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

Lines changed: 2 additions & 2 deletions
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
@@ -192,7 +192,7 @@ const Cim10Form = (props: CriteriaDrawerComponentProps) => {
192192
value={currentCriteria.code}
193193
references={cim10References}
194194
onSelect={(value) => setCurrentCriteria({ ...currentCriteria, code: value })}
195-
placeholder="Sélectionner les codes Cim10"
195+
placeholder="Sélectionner les codes CIM10"
196196
/>
197197
</Grid>
198198
<Autocomplete

‎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/Hierarchy/styles.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Grid, styled } from '@mui/material'
22

33
type RowContainerProps = {
4-
color: string
4+
color?: string
55
}
66

77
type RowWrapperProps = {
@@ -14,7 +14,7 @@ type CellWrapperProps = {
1414
fontWeight?: number
1515
}
1616

17-
export const RowContainerWrapper = styled(Grid)<RowContainerProps>(({ color }) => ({
17+
export const RowContainerWrapper = styled(Grid)<RowContainerProps>(({ color = "#fff" }) => ({
1818
backgroundColor: color,
1919
borderBottom: '1px solid rgba(224, 224, 224, 1)',
2020
padding: '0 8px'

‎src/components/SearchValueSet/ValueSetField.tsx‎

Lines changed: 27 additions & 9 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>[]
@@ -17,15 +18,23 @@ type ValueSetFieldProps = {
1718
onSelect: (selectedItems: Hierarchy<FhirItem>[]) => void
1819
}
1920

21+
const PANEL_WIDTH = "900px"
22+
2023
const ValueSetField = ({ value, references, placeholder, disabled = false, onSelect }: ValueSetFieldProps) => {
2124
const [openCodeResearch, setOpenCodeResearch] = useState(false)
2225
const [isExtended, setIsExtended] = useState(false)
26+
const [confirmedValueSets, setConfirmedValueSets] = useState<Hierarchy<FhirItem>[]>(value)
2327

2428
const handleDelete = (node: Hierarchy<FhirItem>) => {
2529
const newCodes = value.filter((item) => !(item.id === node.id && item.system === node.system))
2630
onSelect(newCodes)
2731
}
2832

33+
const handleOpen = () => {
34+
setOpenCodeResearch(true)
35+
setIsExtended(false)
36+
}
37+
2938
return (
3039
<>
3140
<Grid
@@ -35,7 +44,16 @@ const ValueSetField = ({ value, references, placeholder, disabled = false, onSel
3544
borderRadius="4px"
3645
padding="9px 3px 9px 12px"
3746
>
38-
<Grid container alignItems="center" item xs={10}>
47+
<Grid
48+
container
49+
alignItems="center"
50+
item
51+
xs={10}
52+
role="button"
53+
tabIndex={0}
54+
style={{ cursor: 'pointer' }}
55+
onClick={handleOpen}
56+
>
3957
<CodesWithSystems disabled={disabled} codes={value} isExtended={isExtended} onDelete={handleDelete} />
4058
{!value.length && <FormLabel component="legend">{placeholder}</FormLabel>}
4159
</Grid>
@@ -50,22 +68,22 @@ const ValueSetField = ({ value, references, placeholder, disabled = false, onSel
5068
<MoreHorizIcon />
5169
</IconButton>
5270
)}
53-
<IconButton
54-
sx={{ color: '#5BC5F2' }}
55-
size="small"
56-
onClick={() => setOpenCodeResearch(true)}
57-
disabled={disabled}
58-
>
71+
<IconButton sx={{ color: '#5BC5F2' }} size="small" onClick={handleOpen} disabled={disabled}>
5972
<SearchOutlined />
6073
</IconButton>
6174
</Grid>
6275
</Grid>
6376
<Panel
77+
size={PANEL_WIDTH}
78+
mandatory={isEqual(sortBy(confirmedValueSets), sortBy(value))}
79+
onConfirm={() => {
80+
onSelect(confirmedValueSets)
81+
setOpenCodeResearch(false)
82+
}}
6483
onClose={() => setOpenCodeResearch(false)}
65-
onConfirm={() => setOpenCodeResearch(false)}
6684
open={openCodeResearch}
6785
>
68-
<SearchValueSet references={references} onSelect={onSelect} selectedNodes={value} />
86+
<SearchValueSet references={references} onSelect={setConfirmedValueSets} selectedNodes={value} />
6987
</Panel>
7088
</>
7189
)

‎src/components/SearchValueSet/ValueSetTable.tsx‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import {
66
Grid,
77
Table,
88
TableBody,
9-
TableCell,
109
TableContainer,
11-
TableRow,
10+
TableHead,
1211
Typography
1312
} from '@mui/material'
1413
import { LoadingStatus, SelectedStatus } from 'types'
@@ -21,6 +20,7 @@ import { LIMIT_PER_PAGE } from 'hooks/search/useSearchParameters'
2120
import { Pagination } from 'components/ui/Pagination'
2221
import { getLabelFromCode, isDisplayedWithCode } from 'utils/valueSets'
2322
import { FhirItem } from 'types/valueSet'
23+
import TruncatedText from 'components/ui/TruncatedText'
2424

2525
type ValueSetRowProps = {
2626
item: Hierarchy<FhirItem>
@@ -80,7 +80,7 @@ const ValueSetRow = ({
8080
)}
8181
</CellWrapper>
8282
<CellWrapper item xs={10} cursor onClick={() => (open ? setOpen(false) : handleOpen())}>
83-
{getLabelFromCode(item)}
83+
<TruncatedText lineNb={2} text={getLabelFromCode(item)}></TruncatedText>
8484
</CellWrapper>
8585
<CellWrapper item xs={1} container>
8686
<Checkbox
@@ -154,14 +154,17 @@ const ValueSetTable = ({
154154
<Grid container item flexGrow={1}>
155155
<TableContainer style={{ background: 'white' }}>
156156
<Table>
157-
<TableBody>
157+
<TableHead>
158158
{loading.list === LoadingStatus.SUCCESS && !isHierarchy && (
159-
<TableRow>
160-
<TableCell colSpan={6}>
161-
<Grid container alignItems="center" justifyContent="space-between">
159+
<RowContainerWrapper container>
160+
<RowWrapper container alignItems="center" justifyContent="space-between" style={{ paddingRight: 10 }}>
161+
<CellWrapper item xs={1} />
162+
<CellWrapper item xs={10}>
162163
<Typography color={hierarchy.count ? 'primary' : '#4f4f4f'} fontWeight={600}>
163164
{hierarchy.count ? `${hierarchy.count} résultat(s)` : `Aucun résultat à afficher`}
164165
</Typography>
166+
</CellWrapper>
167+
<CellWrapper item xs={1} container>
165168
{hierarchy.count > 0 && (
166169
<Checkbox
167170
disabled={
@@ -175,11 +178,13 @@ const ValueSetTable = ({
175178
style={{ paddingRight: 16 }}
176179
/>
177180
)}
178-
</Grid>
179-
</TableCell>
180-
</TableRow>
181+
</CellWrapper>
182+
</RowWrapper>
183+
</RowContainerWrapper>
181184
)}
182-
{loading.list === LoadingStatus.SUCCESS && (
185+
</TableHead>
186+
{loading.list === LoadingStatus.SUCCESS && (
187+
<TableBody>
183188
<div style={{ maxHeight: '20vh' }}>
184189
{hierarchy.tree.map((item) =>
185190
item ? (
@@ -199,8 +204,8 @@ const ValueSetTable = ({
199204
)
200205
)}
201206
</div>
202-
)}
203-
</TableBody>
207+
</TableBody>
208+
)}
204209
</Table>
205210
{loading.list === LoadingStatus.FETCHING && (
206211
<Grid container justifyContent="center" alignContent="center" height={500}>

‎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>

0 commit comments

Comments
 (0)