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

Author: jwamalwa

src/apps/concepts/components/ViewConceptsHeader.tsx

@@ -10,19 +10,25 @@ import { getContainerIdFromUrl } from "../utils";
 import {
   Button,
   createStyles,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  Input,
+  InputAdornment,
   makeStyles,
   Menu,
   MenuItem,
-  TextField,
+  Switch,
   Theme
 } from "@material-ui/core";
 import {
   PREFERRED_SOURCES_VIEW_ONLY,
   useAnchor
 } from "../../../utils";
 import { APISource } from "../../sources";
-import { AccountTreeOutlined, FolderOpen } from "@material-ui/icons";
+import { AccountTreeOutlined, FolderOpen, Search as SearchIcon } from "@material-ui/icons";
 import { APIDictionary } from '../../dictionaries/types';
+import { VerifiedSource } from "../../../components/VerifiedSource";
 
 interface Props {
   containerType: string;
@@ -32,6 +38,8 @@ interface Props {
   children?: React.ReactNode[];
   sources: APISource[];
   dictionaries: APIDictionary[];
+  showOnlyVerified: boolean;
+  toggleShowVerified: React.ChangeEventHandler<HTMLInputElement>;
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -60,6 +68,10 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: "0.2rem",
       fill: "#8080809c"
     },
+    searchInput: {
+      textAlign: "center",
+      fontSize: "larger"
+    },
   })
 );
 
@@ -70,9 +82,12 @@ const ViewConceptsHeader: React.FC<Props> = ({
   addConceptToDictionary,
   children,
   sources,
-  dictionaries
+  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 }));
@@ -84,6 +99,7 @@ const ViewConceptsHeader: React.FC<Props> = ({
       } else setPreferredSources(defaultSources);
     }, [showSources, sources, dictionaries]);
 
+
   const classes = useStyles();
   const isSourceContainer = containerType === SOURCE_CONTAINER;
   const isAddToDictionary = isSourceContainer && !!addConceptToDictionary;
@@ -92,7 +108,6 @@ const ViewConceptsHeader: React.FC<Props> = ({
     handleSwitchSourceClick,
     handleSwitchSourceClose
   ] = useAnchor();
-
   const getTitleBasedOnContainerType = () => {
     return isAddToDictionary
       ? `Import existing concept from ${getContainerIdFromUrl(containerUrl)}`
@@ -125,21 +140,53 @@ const ViewConceptsHeader: React.FC<Props> = ({
           keepMounted
           open={Boolean(switchSourceAnchor)}
           onClose={handleSwitchSourceClose}
-        >
-          <TextField 
-          multiline
-          className={classes.textField} 
-          InputProps={{
-            className: classes.underline
-          }} 
-            inputProps={{
-              className: classes.input
-            }}
-            value={
-              showSources ? "Choose a source/dictionary" : "Select a different source/dictionary"
-            }
-            onClick={() => setShowSources(!showSources)}
+        > 
+        <Grid
+        container
+          direction="column">
+          <Button 
+           variant="text" 
+           onClick={() => setShowSources(!showSources)}
+          > 
+             {/* {showSources ? "Select a recommended source" : "Select an alternative source"} */}
+          </Button> 
+          {showSources &&  
+          <Input
+          color="primary"
+          type="search"
+          fullWidth
+          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)}
+                data-testid="searchButton"
+              >
+                <SearchIcon />
+              </IconButton>
+            </InputAdornment>
+          }
+        /> 
+        }
+      
+      <FormControlLabel
+        control={
+          <Switch
+            checkedIcon={<VerifiedSource />}
+            checked={showOnlyVerified}
+            onChange={toggleShowVerified}
+            color="primary"
+            name="displayVerified"
           />
+        }
+        label={
+          showOnlyVerified ? `Showing verified S only` : `Show verified Sources only`
+        }
+      /> 
+        </Grid>
             {preferredSources?.map(({ name, url }) => (
             <MenuItem
               // replace because we want to keep the back button useful

src/apps/concepts/pages/ViewConceptsPage.tsx

@@ -221,6 +221,7 @@ const ViewConceptsPage: React.FC<Props> = ({
   const isImporting = dictionaryToAddTo !== undefined;
 
   const [q, setQ] = useState(initialQ);
+  const [showOnlyVerified, setShowOnlyVerified] = useState(false);
 
   const gimmeAUrl = (params: QueryParams = {}, conceptsUrl: string = url) => {
     const newParams: QueryParams = {
@@ -231,7 +232,8 @@ const ViewConceptsPage: React.FC<Props> = ({
         generalFilters: generalFilters,
         sourceFilters: sourceFilters,
         page: 1,
-        q
+        q,
+
       },
       ...params
     };
@@ -305,7 +307,10 @@ const ViewConceptsPage: React.FC<Props> = ({
       gimmeAUrl={gimmeAUrl}
       addConceptToDictionary={dictionaryToAddTo}
       sources={sources}
-      dictionaries={dictionaries}
+      dictionaries={dictionaries} 
+      showOnlyVerified={showOnlyVerified} 
+      toggleShowVerified={(e)=>setShowOnlyVerified(e.target.checked)} 
+
     >
       <Grid
         container