ui improvements and cleanup

slub · Feb 2, 2024 · 9bef086 · 9bef086
1 parent d640c9c
commit 9bef086
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}
           />
         )}