feat: harmonisation textuelle - Ref gestion-de-projet#2371

aphp · Nov 19, 2024 · c5fb815 · c5fb815
1 parent 9454c0d
commit c5fb815
Show file tree

Hide file tree

Showing 22 changed files with 277 additions and 251 deletions.
diff --git a/...ramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/index.tsx b/...ramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/index.tsx
@@ -43,7 +43,7 @@ const AdvancedInputs = ({ sourceType, selectedCriteria, onChangeValue, onError }
   }
 
   return (
-    <>
+    <Grid container>
       <Grid
         item
         container
@@ -61,7 +61,7 @@ const AdvancedInputs = ({ sourceType, selectedCriteria, onChangeValue, onError }
         </IconButton>
       </Grid>
 
-      <Collapse in={checked} unmountOnExit>
+      <Collapse in={checked} unmountOnExit style={{ width: '100%' }}>
         <Grid container direction="column" padding="0 1em" gap="10px">
           <InputWrapper>
             <ExecutiveUnitsInput
@@ -135,7 +135,7 @@ const AdvancedInputs = ({ sourceType, selectedCriteria, onChangeValue, onError }
           )}
         </Grid>
       </Collapse>
-    </>
+    </Grid>
   )
 }
 

diff --git a/...t/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CcamForm/index.tsx b/...t/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CcamForm/index.tsx
@@ -167,7 +167,7 @@ const CcamForm = (props: CriteriaDrawerComponentProps) => {
               remontées aux tutelles et disponibles dans le SNDS.
             </Alert>
           </Grid>
-          <Grid className={classes.inputContainer}>
+          <Grid className={classes.inputItem}>
             <ValueSetField
               value={currentCriteria.code}
               references={ccamReferences}

diff --git a/.../DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/index.tsx b/.../DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/index.tsx
@@ -179,7 +179,7 @@ const Cim10Form = (props: CriteriaDrawerComponentProps) => {
             </Alert>
           </Grid>
 
-          <Grid className={classes.inputContainer}>
+          <Grid className={classes.inputItem}>
             <ValueSetField
               value={currentCriteria.code}
               references={cim10References}

diff --git a/...rt/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHMForm/index.tsx b/...rt/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHMForm/index.tsx
@@ -142,7 +142,7 @@ const GhmForm = (props: CriteriaDrawerComponentProps) => {
             />
           </BlockWrapper>
 
-          <Grid className={classes.inputContainer}>
+          <Grid className={classes.inputItem}>
             <ValueSetField
               value={currentCriteria.code}
               references={ghmReferences}

diff --git a/src/components/CreationCohort/DiagramView/index.tsx b/src/components/CreationCohort/DiagramView/index.tsx
@@ -70,7 +70,7 @@ const DiagramView = () => {
         )}
         <CohortCreationBreadcrumbs />
 
-        <Grid container justifyContent="center">
+        <Grid container justifyContent="center" alignItems="center">
           {selectedPopulation && selectedPopulation.length > 0 && (
             <PopulationCard
               onEditDisabled={maintenanceIsActive}

diff --git a/src/components/Filters/ExecutiveUnitsFilter/index.tsx b/src/components/Filters/ExecutiveUnitsFilter/index.tsx
@@ -4,6 +4,7 @@ import { ScopeElement } from 'types'
 import { SourceType } from 'types/scope'
 import { Hierarchy } from 'types/hierarchy'
 import ExecutiveUnitsInput from 'components/ui/Inputs/ExecutiveUnits'
+import { Typography } from '@mui/material'
 
 type ExecutiveUnitsFilterProps = {
   value: Hierarchy<ScopeElement, string>[]
@@ -26,6 +27,11 @@ const ExecutiveUnitsFilter = ({ name, value, sourceType, disabled = false }: Exe
       sourceType={sourceType}
       disabled={disabled}
       onChange={(selectedPopulation) => setPopulation(selectedPopulation)}
+      label={
+        <Typography variant="h3" alignSelf="center">
+          Unité exécutrice
+        </Typography>
+      }
     />
   )
 }

diff --git a/src/components/Hierarchy/CodesWithSystems.tsx b/src/components/Hierarchy/CodesWithSystems.tsx
@@ -9,9 +9,16 @@ type CodesWithSystemsProps<T> = {
   disabled?: boolean
   isExtended?: boolean
   onDelete: (node: Hierarchy<T>) => void
+  inSelectedCodes?: boolean
 }
 
-const CodesWithSystems = <T,>({ codes, disabled = false, isExtended = true, onDelete }: CodesWithSystemsProps<T>) => {
+const CodesWithSystems = <T,>({
+  codes,
+  disabled = false,
+  isExtended = true,
+  onDelete,
+  inSelectedCodes
+}: CodesWithSystemsProps<T>) => {
   const groupedBySystem = useMemo(() => groupBySystem(codes), [codes])
 
   const ChipGroup = ({ codes }: { codes: Hierarchy<T>[] }) => (
@@ -21,7 +28,11 @@ const CodesWithSystems = <T,>({ codes, disabled = false, isExtended = true, onDe
           disabled={disabled}
           key={code.id}
           label={getLabelFromCode(code)}
-          sx={{ marginBottom: '2px', marginRight: '2px', color: '#00000099' }}
+          sx={{
+            marginBottom: '2px',
+            marginRight: '2px',
+            backgroundColor: inSelectedCodes ? '#FFF' : undefined
+          }}
           onDelete={() => onDelete(code)}
         />
       ))}
@@ -35,7 +46,7 @@ const CodesWithSystems = <T,>({ codes, disabled = false, isExtended = true, onDe
           {groupedBySystem.map((group) => (
             <Grid item xs={12}>
               {isDisplayedWithSystem(group.system) && (
-                <Typography fontWeight="700" marginRight="5px">
+                <Typography fontWeight="700" marginRight="5px" padding={'8px 0'}>
                   {`${getLabelFromSystem(group.system)} (${group.codes.length})`}
                 </Typography>
               )}

diff --git a/src/components/Hierarchy/SelectedCodes.tsx b/src/components/Hierarchy/SelectedCodes.tsx
@@ -15,23 +15,28 @@ const SelectedCodes = <T,>({ values, onDelete }: SelectedCodesProps<T>) => {
 
   return (
     <Grid container>
-      <Collapse in={openSelectedCodesDrawer}>
-        <Grid
-          item
-          container
-          xs={12}
-          justifyContent="space-between"
-          style={{ maxHeight: 200, overflowX: 'hidden', overflowY: 'auto', marginBottom: 20 }}
-        >
-          <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)
-          </Typography>
-        </Grid>
+      {values.length > 0 && (
+        <Collapse in={openSelectedCodesDrawer} style={{ width: '100%' }}>
+          <Grid
+            item
+            container
+            xs={12}
+            justifyContent="space-between"
+            style={{
+              maxHeight: 200,
+              overflowX: 'hidden',
+              overflowY: 'auto',
+              marginBottom: 20
+            }}
+          >
+            <CodesWithSystems codes={values} onDelete={onDelete} inSelectedCodes />
+          </Grid>
+        </Collapse>
+      )}
+      <Grid item xs={12} container alignItems="center" justifyContent="space-between" height={24}>
+        <Typography textAlign="center" fontWeight={900} color="#0063AF">
+          {values.length} sélectionné(s)
+        </Typography>
         <Grid item xs={1} container justifyContent="flex-end">
           {values.length > 0 && (
             <>

diff --git a/src/components/Hierarchy/styles.ts b/src/components/Hierarchy/styles.ts
@@ -16,16 +16,18 @@ type CellWrapperProps = {
 
 export const RowContainerWrapper = styled(Grid)<RowContainerProps>(({ color }) => ({
   backgroundColor: color,
-  borderBottom: '1px solid rgba(224, 224, 224, 1)'
+  borderBottom: '1px solid rgba(224, 224, 224, 1)',
+  padding: '0 8px'
 }))
 
 export const RowWrapper = styled(Grid)<RowWrapperProps>(({ size = '50px' }) => ({
-  height: size,
-  padding: 0
+  height: size
 }))
 
-export const CellWrapper = styled(Grid)<CellWrapperProps>(({ cursor = false, color = '#4F4F4f', fontWeight = 600 }) => ({
-  color: color,
-  cursor: cursor ? 'pointer' : '',
-  fontWeight: fontWeight
-}))
+export const CellWrapper = styled(Grid)<CellWrapperProps>(
+  ({ cursor = false, color = '#4F4F4f', fontWeight = 600 }) => ({
+    color: color,
+    cursor: cursor ? 'pointer' : '',
+    fontWeight: fontWeight
+  })
+)
diff --git a/src/components/ScopeTree/ScopeTreeTable.tsx b/src/components/ScopeTree/ScopeTreeTable.tsx
@@ -174,7 +174,7 @@ const ScopeTreeTable = ({
     <TableContainer style={{ overflowX: 'hidden', background: 'white' }}>
       <Table>
         <TableHead>
-          <RowContainerWrapper alignItems="center" container color="#e1e1e1" height={'60px'}>
+          <RowContainerWrapper alignItems="center" container color={'#d1e2f4'} height={'60px'}>
             <CellWrapper item xs={1}></CellWrapper>
             <CellWrapper item xs={5} color="#0063AF">
               Nom
@@ -205,7 +205,12 @@ const ScopeTreeTable = ({
             </TableRow>
           )}
           {loading.search !== LoadingStatus.FETCHING && (
-            <div style={{ maxHeight: '65vh', overflow: 'auto' }}>
+            <div
+              style={{
+                maxHeight: mode === SearchMode.EXPLORATION ? '65vh' : '60vh',
+                overflow: 'auto'
+              }}
+            >
               {hierarchy.tree.map((item) =>
                 item ? (
                   <ScopeTreeRow

diff --git a/src/components/ScopeTree/index.tsx b/src/components/ScopeTree/index.tsx
@@ -16,9 +16,10 @@ type ScopeTreeProps = {
   selectedNodes: Hierarchy<ScopeElement, string>[]
   sourceType: SourceType
   onSelect: (selectedItems: Hierarchy<ScopeElement, string>[]) => void
+  isCareSiteView?: boolean
 }
 
-const ScopeTree = ({ baseTree, selectedNodes, sourceType, onSelect }: ScopeTreeProps) => {
+const ScopeTree = ({ baseTree, selectedNodes, sourceType, onSelect, isCareSiteView = false }: ScopeTreeProps) => {
   const {
     hierarchyData: { hierarchy, loadingStatus, selectAllStatus, selectedCodes },
     hierarchyActions: { expand, select, selectAll },
@@ -31,56 +32,62 @@ const ScopeTree = ({ baseTree, selectedNodes, sourceType, onSelect }: ScopeTreeP
   }, [selectedCodes])
 
   return (
-    <>
-      <Grid container direction="column" wrap="nowrap" height="100%" overflow="hidden">
-        <Grid container padding={'30px 20px'}>
-          <Grid item xs={12}>
-            <Paper sx={{ padding: '20px', backgroundColor: 'transparent' }}>
-              <SearchInput value={searchInput} placeholder={'Rechercher'} onchange={onChangeSearchInput} />
-            </Paper>
-          </Grid>
-        </Grid>
-        <Grid container direction="column" wrap="wrap" height="100%" overflow="auto" padding={'0px 20px'}>
-          <Grid
-            item
-            container
-            direction="column"
-            justifyContent="space-between"
-            wrap="nowrap"
-            height="100%"
-            style={{ overflow: 'hidden' }}
-          >
-            <Grid>
-              <ScopeTreeTable
-                loading={loadingStatus}
-                selectAllStatus={selectAllStatus}
-                sourceType={sourceType}
-                mode={mode}
-                hierarchy={hierarchy}
-                onExpand={expand}
-                onSelect={select}
-                onSelectAll={selectAll}
-              />
-            </Grid>
-          </Grid>
+    <Grid
+      container
+      direction="column"
+      wrap="nowrap"
+      height={'calc(100% - 20px)'}
+      overflow="hidden"
+      justifyContent={'space-between'}
+    >
+      <Grid container padding={'24px 20px'}>
+        <SearchInput value={searchInput} placeholder={'Rechercher'} onchange={onChangeSearchInput} />
+      </Grid>
+      <Grid container direction="column" wrap="wrap" height="100vh" overflow="auto" padding={'0px 20px'}>
+        <Grid
+          item
+          container
+          direction="column"
+          justifyContent="space-between"
+          wrap="nowrap"
+          height="100%"
+          style={{ overflow: 'hidden' }}
+        >
+          <ScopeTreeTable
+            loading={loadingStatus}
+            selectAllStatus={selectAllStatus}
+            sourceType={sourceType}
+            mode={mode}
+            hierarchy={hierarchy}
+            onExpand={expand}
+            onSelect={select}
+            onSelectAll={selectAll}
+          />
         </Grid>
       </Grid>
-      <div>
+      <Grid container direction={'column'} style={{ backgroundColor: 'transparent' }}>
         {loadingStatus.search === LoadingStatus.SUCCESS && hierarchy.count / LIMIT_PER_PAGE > 1 && (
-          <Paper sx={{ padding: '20px 0px' }}>
+          <Grid container justifyContent={'center'}>
             <Pagination
               count={Math.ceil(hierarchy.count / LIMIT_PER_PAGE)}
               currentPage={hierarchy.page}
               onPageChange={onChangePage}
               color="#0063AF"
+              centered
             />
-          </Paper>
+          </Grid>
         )}
-        <Paper sx={{ padding: '20px 30px', backgroundColor: '#D1E2F4' }}>
+        <Paper
+          elevation={isCareSiteView ? 0 : undefined}
+          sx={{
+            padding: '10px 30px',
+            backgroundColor: isCareSiteView ? '#E6F1FD' : '#D1E2F4'
+          }}
+        >
           <SelectedCodes values={selectedCodes} onDelete={(code) => select(code, false)} />
         </Paper>
-      </div>
-    </>
+      </Grid>
+    </Grid>
   )
 }