From 9bef086e3819f938073de6b132d2b602721ab4a6 Mon Sep 17 00:00:00 2001
From: Sebastian Tilsch <sebastian.tilsch@slub-dresden.de>
Date: Fri, 2 Feb 2024 13:01:15 +0000
Subject: [PATCH] ui improvements and cleanup

---
 .../components/form/DebouncedAutoComplete.tsx | 10 ++++--
 .../components/form/PreloadedOptionSelect.tsx |  2 +-
 .../components/renderer/ArrayToolbar.tsx      |  4 +--
 .../InlineCondensedSemanticFormsRenderer.tsx  |  5 ++-
 .../renderer/MaterialArrayChipsLayout.tsx     | 10 +++---
 .../renderer/SemanticFormsModal.tsx           | 31 ++++++-------------
 6 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/apps/exhibition-live/components/form/DebouncedAutoComplete.tsx b/apps/exhibition-live/components/form/DebouncedAutoComplete.tsx
index 1e38fd17..11ca1ce2 100644
--- a/apps/exhibition-live/components/form/DebouncedAutoComplete.tsx
+++ b/apps/exhibition-live/components/form/DebouncedAutoComplete.tsx
@@ -84,12 +84,18 @@ export const DebouncedAutocomplete: FunctionComponent<
     (e: any): void => {
       const value = e.currentTarget.value;
       onSearchValueChange && onSearchValueChange(value);
-      if (value.length >= minSearchLength &&  !autocompleteDisabled ) {
+      if (value.length >= minSearchLength && !autocompleteDisabled) {
         setLoading(true);
         debouncedRequest(value);
       }
     },
-    [setLoading, debouncedRequest, minSearchLength, onSearchValueChange, autocompleteDisabled],
+    [
+      setLoading,
+      debouncedRequest,
+      minSearchLength,
+      onSearchValueChange,
+      autocompleteDisabled,
+    ],
   );
   const { data: initialData, isLoading } = useQuery(
     ["initiallyLoadSuggestions", initialQueryKey],
diff --git a/apps/exhibition-live/components/form/PreloadedOptionSelect.tsx b/apps/exhibition-live/components/form/PreloadedOptionSelect.tsx
index ff73324f..c4d6b363 100644
--- a/apps/exhibition-live/components/form/PreloadedOptionSelect.tsx
+++ b/apps/exhibition-live/components/form/PreloadedOptionSelect.tsx
@@ -60,7 +60,7 @@ export const PreloadedOptionSelect: FunctionComponent<
 
   return (
     <>
-      {isLoading && <CircularProgress size={'1em'} />}
+      {isLoading && <CircularProgress size={"1em"} />}
       <InputLabel id={selectID}>{title}</InputLabel>
       <Select
         labelId={selectID}
diff --git a/apps/exhibition-live/components/renderer/ArrayToolbar.tsx b/apps/exhibition-live/components/renderer/ArrayToolbar.tsx
index 487b3236..202bdb2e 100644
--- a/apps/exhibition-live/components/renderer/ArrayToolbar.tsx
+++ b/apps/exhibition-live/components/renderer/ArrayToolbar.tsx
@@ -18,7 +18,7 @@ import { JsonSchema7 } from "@jsonforms/core";
 import { sladb, slent } from "../form/formConfigs";
 import { BASE_IRI } from "../config";
 import { memo } from "./config";
-import {useGlobalSearchWithHelper, useRightDrawerState} from "../state";
+import { useGlobalSearchWithHelper, useRightDrawerState } from "../state";
 import { SearchbarWithFloatingButton } from "../layout/main-layout/Searchbar";
 import SimilarityFinder from "../form/SimilarityFinder";
 import { JSONSchema7 } from "json-schema";
@@ -105,7 +105,7 @@ export const ArrayLayoutToolbar = memo(
       [addItem, path],
     );
 
-    const { open: sidebarOpen} = useRightDrawerState();
+    const { open: sidebarOpen } = useRightDrawerState();
 
     const {
       path: globalPath,
diff --git a/apps/exhibition-live/components/renderer/InlineCondensedSemanticFormsRenderer.tsx b/apps/exhibition-live/components/renderer/InlineCondensedSemanticFormsRenderer.tsx
index 90d34bfe..0f88894e 100644
--- a/apps/exhibition-live/components/renderer/InlineCondensedSemanticFormsRenderer.tsx
+++ b/apps/exhibition-live/components/renderer/InlineCondensedSemanticFormsRenderer.tsx
@@ -51,9 +51,7 @@ const InlineCondensedSemanticFormsRenderer = (props: ControlProps) => {
     label,
     description,
   } = props;
-  const enableDrawer = true;
   const [formData, setFormData] = useState<any>({ "@id": data });
-  const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [editMode, setEditMode] = useState(false);
   const ctx = useJsonForms();
@@ -262,7 +260,7 @@ const InlineCondensedSemanticFormsRenderer = (props: ControlProps) => {
     <Hidden xsUp={!visible}>
       <Grid
         container
-        alignItems="baseline"
+        alignItems="start"
         sx={{ marginBottom: (theme) => theme.spacing(2) }}
       >
         <Grid item flex={"auto"}>
@@ -281,6 +279,7 @@ const InlineCondensedSemanticFormsRenderer = (props: ControlProps) => {
               onSelectionChange={handleSelectedChange}
               onSearchValueChange={handleSearchStringChange}
               searchString={searchString || ""}
+              autocompleteDisabled={sidebarOpen}
               inputProps={{
                 onFocus: handleFocus,
                 ...(showAsFocused && { focused: true }),
diff --git a/apps/exhibition-live/components/renderer/MaterialArrayChipsLayout.tsx b/apps/exhibition-live/components/renderer/MaterialArrayChipsLayout.tsx
index 56267381..ad231b32 100644
--- a/apps/exhibition-live/components/renderer/MaterialArrayChipsLayout.tsx
+++ b/apps/exhibition-live/components/renderer/MaterialArrayChipsLayout.tsx
@@ -24,7 +24,7 @@ import {
   slent,
 } from "../form/formConfigs";
 import { v4 as uuidv4 } from "uuid";
-import {Box, Grid, IconButton, List, Stack} from "@mui/material";
+import { Box, Grid, IconButton, List, Stack } from "@mui/material";
 import { SemanticFormsInline } from "./SemanticFormsInline";
 import AddIcon from "@mui/icons-material/Add";
 import { useGlobalCRUDOptions } from "../state/useGlobalCRUDOptions";
@@ -120,9 +120,11 @@ const MaterialArrayChipsLayoutComponent = (props: ArrayLayoutProps & {}) => {
   const isReifiedStatement = Boolean(appliedUiSchemaOptions.isReifiedStatement);
 
   return (
-    <Box sx={theme => ({
-      marginBottom: theme.spacing(2)
-    })}>
+    <Box
+      sx={(theme) => ({
+        marginBottom: theme.spacing(2),
+      })}
+    >
       <ArrayLayoutToolbar
         label={computeLabel(
           label,
diff --git a/apps/exhibition-live/components/renderer/SemanticFormsModal.tsx b/apps/exhibition-live/components/renderer/SemanticFormsModal.tsx
index fe00bc89..6f7a4bf6 100644
--- a/apps/exhibition-live/components/renderer/SemanticFormsModal.tsx
+++ b/apps/exhibition-live/components/renderer/SemanticFormsModal.tsx
@@ -56,25 +56,19 @@ export const SemanticFormsModal = (props: SemanticFormsModalProps) => {
   });
 
   const [editMode, setEditMode] = useState(true);
-  const [searchText, setSearchText] = useState<string | undefined>();
 
   const uischemaExternal = typeIRI && useUISchemaForType(typeIRI);
-  const typeName = useMemo(
-    () => typeIRI && typeIRI.substring(BASE_IRI.length, typeIRI.length),
-    [typeIRI],
-  );
 
   const { crudOptions } = useGlobalCRUDOptions();
-  const { loadQuery, existsQuery, saveMutation, removeMutation } =
-    useCRUDWithQueryClient(
-      entityIRI,
-      typeIRI,
-      schema as JSONSchema7,
-      defaultPrefix,
-      crudOptions,
-      defaultJsonldContext,
-      { enabled: true },
-    );
+  const { loadQuery, saveMutation, removeMutation } = useCRUDWithQueryClient(
+    entityIRI,
+    typeIRI,
+    schema as JSONSchema7,
+    defaultPrefix,
+    crudOptions,
+    defaultJsonldContext,
+    { enabled: true },
+  );
   const { data: remoteData } = loadQuery;
 
   useEffect(() => {
@@ -120,12 +114,6 @@ export const SemanticFormsModal = (props: SemanticFormsModalProps) => {
     });
   }, [loadQuery]);
 
-  const handleSearchTextChange = useCallback(
-    (searchText: string | undefined) => {
-      setSearchText(searchText);
-    },
-    [setSearchText],
-  );
   const handleDataChange = useCallback(
     (data_: any) => {
       setFormData(data_);
@@ -164,7 +152,6 @@ export const SemanticFormsModal = (props: SemanticFormsModalProps) => {
               uischemas: uischemas,
             }}
             onEntityChange={onChange}
-            searchText={searchText}
             formsPath={formsPath}
           />
         )}