[2.20.0-SNAPSHOT][Merge] - Merge fix/1495 into develop - Ref gestion-…

…de-projet#1495 gestion-de-projet#1775

[2.20.0-SNAPSHOT][Merge] - Merge fix/1495 into develop

src/components/CreationCohort/DiagramView/components/PopulationCard/components/PopulationRightPanel.tsx

@@ -10,6 +10,7 @@ import { ScopeTreeRow } from 'types'
 import { useAppSelector } from 'state'
 
 import useStyles from './styles'
+import ScopeSearchBar from 'components/Inputs/ScopeSearchBar/ScopeSearchBar'
 
 type PopulationRightPanelProps = {
   open: boolean
@@ -24,6 +25,7 @@ const PopulationRightPanel: React.FC<PopulationRightPanelProps> = (props) => {
 
   const { selectedPopulation = [] } = useAppSelector((state) => state.cohortCreation.request || {})
   const [_selectedPopulation, onChangeSelectedPopulation] = useState<ScopeTreeRow[]>([])
+  const [searchInput, setSearchInput] = useState('')
 
   useEffect(() => {
     onChangeSelectedPopulation(
@@ -42,7 +44,14 @@ const PopulationRightPanel: React.FC<PopulationRightPanelProps> = (props) => {
         </div>
 
         <div className={classes.drawerContentContainer}>
-          <ScopeTree defaultSelectedItems={_selectedPopulation} onChangeSelectedItem={onChangeSelectedPopulation} />
+          <div className={classes.searchBar}>
+            <ScopeSearchBar searchInput={searchInput} onChangeInput={setSearchInput} />
+          </div>
+          <ScopeTree
+            searchInput={searchInput}
+            defaultSelectedItems={_selectedPopulation}
+            onChangeSelectedItem={onChangeSelectedPopulation}
+          />
         </div>
 
         <div className={classes.drawerActionContainer}>

src/components/CreationCohort/DiagramView/components/PopulationCard/components/styles.ts

@@ -32,6 +32,9 @@ const useStyles = makeStyles(() => ({
     '& > button': {
       margin: '12px 8px'
     }
+  },
+  searchBar: {
+    marginBottom: '0px'
   }
 }))
 

src/components/Inputs/ScopeSearchBar/ScopeSearchBar.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { Grid, IconButton, InputAdornment, InputBase } from '@material-ui/core'
+
+import { ReactComponent as SearchIcon } from 'assets/icones/search.svg'
+import ClearIcon from '@material-ui/icons/Clear'
+
+import useStyles from './styles'
+import Alert from '@material-ui/lab/Alert'
+
+type ScopeSearchBarProps = {
+  searchInput: string
+  onChangeInput: (searchInput: string) => void
+  alertMessage?: string
+}
+
+const ScopeSearchBar: React.FC<ScopeSearchBarProps> = ({ searchInput, onChangeInput, alertMessage }) => {
+  const classes = useStyles()
+
+  const handleChangeInput = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    onChangeInput(event.target.value)
+  }
+
+  const handleClearInput = () => {
+    onChangeInput('')
+  }
+
+  return (
+    <Grid id="je suis ici" container alignItems="flex-end" direction="row-reverse" style={{ marginBlock: 8 }}>
+      <Grid item container alignItems="center" xs={1} className={classes.searchBar}>
+        <InputBase
+          placeholder="Rechercher"
+          className={classes.input}
+          value={searchInput}
+          onChange={handleChangeInput}
+          endAdornment={
+            searchInput && (
+              <InputAdornment position="end">
+                <IconButton onClick={handleClearInput}>
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            )
+          }
+        />
+        <IconButton type="submit" aria-label="search">
+          <SearchIcon fill="#ED6D91" height="15px" />
+        </IconButton>
+      </Grid>
+      {alertMessage && (
+        <Alert severity="info" style={{ backgroundColor: 'transparent' }}>
+          {alertMessage}
+        </Alert>
+      )}
+    </Grid>
+  )
+}
+
+export default ScopeSearchBar

src/components/Inputs/ScopeSearchBar/styles.ts

@@ -0,0 +1,17 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles((theme) => ({
+  searchBar: {
+    minWidth: 250,
+    backgroundColor: '#FFF',
+    border: '1px solid #D0D7D8',
+    boxShadow: '0px 1px 16px #0000000A',
+    borderRadius: '25px'
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1
+  }
+}))
+
+export default useStyles