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

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

Author: aetchego

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

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

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'

src/components/SearchValueSet/ValueSetField.tsx

@@ -18,6 +18,8 @@ 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)
@@ -28,6 +30,11 @@ const ValueSetField = ({ value, references, placeholder, disabled = false, onSel
     onSelect(newCodes)
   }
 
+  const handleOpen = () => {
+    setOpenCodeResearch(true)
+    setIsExtended(false)
+  }
+
   return (
     <>
       <Grid
@@ -37,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>
@@ -52,20 +68,13 @@ const ValueSetField = ({ value, references, placeholder, disabled = false, onSel
               <MoreHorizIcon />
             </IconButton>
           )}
-          <IconButton
-            sx={{ color: '#5BC5F2' }}
-            size="small"
-            onClick={() => {
-              setOpenCodeResearch(true)
-              setIsExtended(false)
-            }}
-            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)

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'
@@ -155,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={
@@ -176,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 ? (
@@ -200,8 +204,8 @@ const ValueSetTable = ({
                     )
                   )}
                 </div>
-              )}
-            </TableBody>
+              </TableBody>
+            )}
           </Table>
           {loading.list === LoadingStatus.FETCHING && (
             <Grid container justifyContent="center" alignContent="center" height={500}>

src/components/ui/Panel/index.tsx

@@ -9,6 +9,7 @@ type RightPanelProps = {
   children: ReactNode
   cancelText?: string
   confirmText?: string
+  size?: string
   onConfirm?: () => void
   onClose?: () => void
 }
@@ -19,6 +20,7 @@ const Panel = ({
   anchor = 'right',
   mandatory = false,
   children,
+  size = '650px',
   cancelText = 'Annuler',
   confirmText = 'Confirmer',
   onConfirm,
@@ -28,11 +30,11 @@ const Panel = ({
     <Drawer
       anchor={anchor}
       open={open}
-      PaperProps={{ style: { width: '650px' } }}
+      PaperProps={{ style: { width: size } }}
       onClose={onClose}
       sx={{ zIndex: 1300, overflowY: 'unset' }}
     >
-      <Grid container direction="column" maxWidth="650px" height="100%" flexWrap="nowrap">
+      <Grid container direction="column" maxWidth={size} height="100%" flexWrap="nowrap">
         <Grid item container flexDirection="column" flexWrap="nowrap" overflow="auto">
           <Paper>
             <Grid container justifyContent="center" width="100%">

src/components/ui/Tabs/styles.ts

@@ -19,6 +19,7 @@ export const TabWrapper = styled(Tab)<TabCustomProps>(({ width, variant }) => ({
   padding: '0px 6px',
   fontSize: 13,
   width: width,
+  maxWidth: '100%',
   '&.MuiButtonBase-root.MuiTab-root': {
     minHeight: 40
   },

src/types/valueSet.ts

@@ -18,7 +18,7 @@ export enum ReferencesLabel {
   LOINC = 'LOINC',
   ANABIO = 'ANABIO',
   GHM = 'GHM',
-  CIM10 = 'CIIM10',
+  CIM10 = 'CIM10',
   CCAM = 'CCAM'
 }