OCLOMRS-1044:Bug Fix: Pick Concepts from Source and Dictionaries

openmrs · Oct 5, 2021 · 169d4ff · 169d4ff
1 parent ac397b8
commit 169d4ff
Showing 1 changed file with 50 additions and 11 deletions.
diff --git a/src/apps/concepts/components/ViewConceptsHeader.tsx b/src/apps/concepts/components/ViewConceptsHeader.tsx
@@ -10,6 +10,7 @@ import { getContainerIdFromUrl } from "../utils";
 import {
   Button,
   createStyles,
+  Grid,
   IconButton,
   Input,
   InputAdornment,
@@ -23,8 +24,7 @@ import {
   useAnchor
 } from "../../../utils";
 import { APISource } from "../../sources";
-import { AccountTreeOutlined, FolderOpen  } from "@material-ui/icons";
-import { Search as SearchIcon } from "@material-ui/icons";
+import { AccountTreeOutlined, FolderOpen, Search as SearchIcon } from "@material-ui/icons";
 import { APIDictionary } from '../../dictionaries/types';
 
 interface Props {
@@ -63,6 +63,10 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: "0.2rem",
       fill: "#8080809c"
     },
+    searchInput: {
+      textAlign: "center",
+      fontSize: "larger"
+    },
   })
 );
 
@@ -74,8 +78,11 @@ const ViewConceptsHeader: React.FC<Props> = ({
   children,
   sources,
   dictionaries
+  // showOnlyVerified,
+  // toggleShowVerified
 }) => {
   const [showSources, setShowSources] = useState(false);
+  const [search, setSearch] = useState("");
   const [preferredSources, setPreferredSources] = useState< { name: string; url: string }[] >();
   useEffect(() => {
   const defaultSources = Object.entries( PREFERRED_SOURCES_VIEW_ONLY).map(([key, value]) => ({ name: key, url: value }));
@@ -86,6 +93,9 @@ const ViewConceptsHeader: React.FC<Props> = ({
         setPreferredSources(allSources);
       } else setPreferredSources(defaultSources);
     }, [showSources, sources, dictionaries]);
+    // const handleSearch = (event) => {
+    //   setSearch(event.target.value)
+    // }
 
   const classes = useStyles();
   const isSourceContainer = containerType === SOURCE_CONTAINER;
@@ -95,8 +105,6 @@ const ViewConceptsHeader: React.FC<Props> = ({
     handleSwitchSourceClick,
     handleSwitchSourceClose
   ] = useAnchor();
-
-  // const [q, setQ] = useState(initialQ);
   const getTitleBasedOnContainerType = () => {
     return isAddToDictionary
       ? `Import existing concept from ${getContainerIdFromUrl(containerUrl)}`
@@ -129,24 +137,55 @@ const ViewConceptsHeader: React.FC<Props> = ({
           keepMounted
           open={Boolean(switchSourceAnchor)}
           onClose={handleSwitchSourceClose}
-        >
-        <Input
-          color="secondary"
+        > 
+        <Grid
+        container
+          // eslint-disable-next-line react/jsx-no-comment-textnodes
+          direction="column">
+          {showSources?  
+          <Input
+          color="primary"
           type="search"
           fullWidth
-          placeholder= {showSources ? "Select a recommended source" : "Select an alternative source"}
-          data-testid="searchInput"
+          placeholder= {"Select an alternative source"}
+          value={search}
+          onChange = {event => setSearch(event.target.value)}
+          data-testid="switch-source"
           endAdornment={
             <InputAdornment position="end">
               <IconButton
-                onClick={() => setShowSources(!showSources)}
+              onClick={() => setShowSources(!showSources)}
                 data-testid="searchButton"
               >
                 <SearchIcon />
               </IconButton>
             </InputAdornment>
           }
-        />
+        /> :
+          <Button 
+           variant="text" 
+           onClick={() => setShowSources(!showSources)}
+          > 
+          Select a recommended source
+             {/* {showSources ? "Select a recommended source" : "Select an alternative source"} */}
+          </Button> 
+        }
+
+        {/* <FormControlLabel
+        control={
+          <Switch
+            checkedIcon={<VerifiedSource />}
+            checked={showOnlyVerified}
+            onChange={toggleShowVerified}
+            color="primary"
+            name="displayVerified"
+          />
+        }
+        label={
+          showOnlyVerified ? `Showing verified {"Select a recommended source"} only` : `Show verified {"Select an alternative source"} only`
+        }
+      /> */}
+        </Grid>
             {preferredSources?.map(({ name, url }) => (
             <MenuItem
               // replace because we want to keep the back button useful