fix bug with search field uneditable

also ake search text writable within similarity finder
slub · Jan 23, 2024 · fb41103 · fb41103
1 parent f8fd4ce
commit fb41103
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/apps/exhibition-live/components/form/SimilarityFinder.tsx b/apps/exhibition-live/components/form/SimilarityFinder.tsx
@@ -3,14 +3,9 @@ import { Storage as KnowledgebaseIcon } from "@mui/icons-material";
 import {
   Badge,
   Box,
-  Chip,
   Divider,
   Grid,
-  MenuItem,
-  Select,
-  Typography,
-  ToggleButton,
-  ToggleButtonGroup,
+  TextField,
 } from "@mui/material";
 import ClassicResultListWrapper from "./result/ClassicResultListWrapper";
 import { dcterms } from "@tpluscode/rdf-ns-builders";
@@ -119,15 +114,22 @@ const SimilarityFinder: FunctionComponent<Props> = ({
     search: globalSearch,
     typeName: globalTypeName,
     path: globalPath,
+    setSearch,
   } = useGlobalSearch();
   const { t } = useTranslation("translation");
-  const searchString = useMemo<string | null>(
-    () =>
-      (searchOnDataPath && Resolve.data(data, searchOnDataPath)) ||
-      globalSearch ||
-      search ||
-      null,
-    [data, searchOnDataPath, search, globalSearch],
+  const handleSearchStringChange = useCallback(
+    (value: string) => {
+      setSearch(value);
+    },
+    [setSearch],
+  );
+  const dataPathSearch = useMemo<string | undefined>(
+    () => searchOnDataPath && Resolve.data(data, searchOnDataPath),
+    [data, searchOnDataPath],
+  );
+  const searchString: string | undefined = useMemo<string | null>(
+    () => dataPathSearch || globalSearch || search || null,
+    [data, dataPathSearch, search, globalSearch],
   );
 
   const [typeName, setTypeName] = useState(
@@ -286,13 +288,18 @@ const SimilarityFinder: FunctionComponent<Props> = ({
             }}
           >
             <Box sx={{ flexGrow: 1 }}>
-              <Typography gutterBottom variant="caption" component="div">
-                Suche in {selectedKnowledgeSources.join(",")} nach {t(typeName)}{" "}
-                ({globalPath})
-              </Typography>
-              <Typography variant="body2" gutterBottom>
-                {searchString}
-              </Typography>
+              <TextField
+                variant={"standard"}
+                disabled={Boolean(dataPathSearch)}
+                fullWidth={true}
+                value={searchString || ""}
+                onChange={(e) =>
+                  handleSearchStringChange(e.currentTarget.value)
+                }
+                label={`Suche in ${selectedKnowledgeSources.join(",")} nach ${t(
+                  typeName,
+                )} `}
+              />
             </Box>
             <Box
               sx={{

diff --git a/apps/exhibition-live/components/form/discover/DiscoverAutocompleteInput.tsx b/apps/exhibition-live/components/form/discover/DiscoverAutocompleteInput.tsx
@@ -153,7 +153,7 @@ const DiscoverAutocompleteInput: FunctionComponent<Props> = ({
       // @ts-ignore
       load={load}
       initialQueryKey={typeIRI}
-      value={selectedValue || { label: "", value: null }}
+      value={selectedValue || { label: searchString, value: null }}
       getOptionLabel={handleGetOptionLabel}
       placeholder={`Suche nach ${typeName} in der aktuellen Datenbank`}
       renderOption={(props, option: any) => (

diff --git a/apps/exhibition-live/components/state/useGlobalSearchWithHelper.ts b/apps/exhibition-live/components/state/useGlobalSearchWithHelper.ts
@@ -75,7 +75,8 @@ export const useGlobalSearchWithHelper = (
   const handleFocus = useCallback(() => {
     setTypeName(typeName);
     setPath(formsPath);
-  }, [setTypeName, typeName, setPath, formsPath]);
+    setSearch(searchString);
+  }, [searchString, setSearch, setTypeName, typeName, setPath, formsPath]);
 
   return {
     ...globalSearch,