improve usability

slub · Mar 21, 2024 · 1e6b441 · 1e6b441
1 parent 1d00547
commit 1e6b441
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 22 deletions.
diff --git a/apps/exhibition-live/components/form/SemanticJsonFormNoOps.tsx b/apps/exhibition-live/components/form/SemanticJsonFormNoOps.tsx
@@ -47,7 +47,7 @@ import {
   primaryTextFieldControlTester,
   PrimaryTextFieldRenderer,
 } from "../renderer/PrimaryFieldTextRenderer";
-import { useGlobalSearch } from "../state";
+import {useGlobalSearch, useRightDrawerState} from "../state";
 import MaterialArrayOfLinkedItemChipsRenderer, {
   materialArrayLayoutChipsTester,
 } from "../renderer/MaterialArrayOfLinkedItemChipsRenderer";
@@ -201,6 +201,8 @@ export const SemanticJsonFormNoOps: FunctionComponent<
     [onChange, onError],
   );
 
+  const { closeDrawer } = useRightDrawerState()
+
   const handleMappedData = useCallback(
     (newData: any) => {
       if (!newData) return;
@@ -211,6 +213,7 @@ export const SemanticJsonFormNoOps: FunctionComponent<
             ? "confirm save mapping"
             : "confirm mapping",
       }).then(() => {
+        closeDrawer()
         onChange(
           (data: any) => ({
             ...newData,
@@ -221,14 +224,16 @@ export const SemanticJsonFormNoOps: FunctionComponent<
         );
       });
     },
-    [onChange, typeIRI],
+    [onChange, typeIRI, closeDrawer],
   );
 
   const handleEntityIRIChange = useCallback(
-    (iri) =>
+    (iri) => {
       onEntityDataChange &&
-      onEntityDataChange({ "@id": iri, "@type": typeIRI }),
-    [onEntityDataChange, typeIRI],
+      onEntityDataChange({"@id": iri, "@type": typeIRI});
+      closeDrawer()
+    },
+    [onEntityDataChange, typeIRI, closeDrawer],
   );
 
   const WithCard = useMemo(

diff --git a/apps/exhibition-live/components/form/SimilarityFinder.tsx b/apps/exhibition-live/components/form/SimilarityFinder.tsx
@@ -232,6 +232,7 @@ const useKnowledgeBases = () => {
               typeIRI={typeIRI}
               data={undefined}
               cardActionChildren={null}
+              readonly
             />
           }
         />

diff --git a/apps/exhibition-live/components/form/discover/DiscoverSearchTable.tsx b/apps/exhibition-live/components/form/discover/DiscoverSearchTable.tsx
@@ -89,6 +89,7 @@ const DiscoverSearchTable: FunctionComponent<Props> = ({
                                     typeIRI={typeIRI}
                                     data={undefined}
                                     cardActionChildren={null}
+                                    readonly
                                 />
                             }
                         />

diff --git a/apps/exhibition-live/components/form/edit/EditEntityModal.tsx b/apps/exhibition-live/components/form/edit/EditEntityModal.tsx
@@ -151,6 +151,7 @@ export const EditEntityModal = NiceModal.create(
                         defaultEditMode={true}
                         searchText={""}
                         schema={loadedSchema as JSONSchema7}
+                        formsPath={"root"}
                         jsonFormsProps={{
                             uischema,
                             uischemas: uischemas,

diff --git a/apps/exhibition-live/components/form/lobid/LobidSearchTable.tsx b/apps/exhibition-live/components/form/lobid/LobidSearchTable.tsx
@@ -24,8 +24,6 @@ import {
   extractFieldIfString,
 } from "../../utils/mapping/simpleFieldExtractor";
 import { useQuery } from "@tanstack/react-query";
-import { EntityDetailElement } from "../show";
-import { sladb } from "../formConfigs";
 import {typeIRItoTypeName} from "../../config";
 
 type Props = {

diff --git a/apps/exhibition-live/components/form/show/EntityDetailCard.tsx b/apps/exhibition-live/components/form/show/EntityDetailCard.tsx
@@ -22,16 +22,17 @@ import {encodeIRI} from "../../utils/core";
 
 import {typeIRItoTypeName} from "../../config";
 import {useSettings} from "../../state/useLocalSettings";
-import {uischemas} from "../uischemas";
-import {uischemata} from "../uischemaForType";
+import NiceModal from "@ebay/nice-modal-react";
+import {EditEntityModal} from "../edit/EditEntityModal";
 
 interface OwnProps {
     typeIRI: string;
     entityIRI: string;
     cardInfo: PrimaryFieldResults<string>;
     cardActionChildren?: React.ReactNode;
     data: any;
-    readOnly?: boolean
+    readonly?: boolean;
+    inlineEditing?: boolean;
 }
 
 type Props = OwnProps;
@@ -41,26 +42,30 @@ export const EntityDetailCard: FunctionComponent<Props> = ({
                                                                cardInfo,
                                                                data,
                                                                cardActionChildren,
-                                                               readOnly
+                                                               readonly,
+                                                               inlineEditing
                                                            }) => {
     const {t} = useTranslation();
 
     const router = useModifiedRouter();
     const editEntry = useCallback(() => {
         const typeName = typeIRItoTypeName(typeIRI);
-        router.push(`/create/${typeName}?encID=${encodeIRI(entityIRI)}`);
-    }, [router, typeIRI, entityIRI]);
+        if(inlineEditing) {
+            NiceModal.show(EditEntityModal, {
+                entityIRI: entityIRI,
+                typeIRI: typeIRI,
+                data,
+                disableLoad: true
+            })
+        } else {
+          router.push(`/create/${typeName}?encID=${encodeIRI(entityIRI)}`);
+        }
+    }, [router, typeIRI, entityIRI, inlineEditing]);
+
     const {
         features: {enableDebug},
     } = useSettings();
 
-    const typeName = typeIRItoTypeName(typeIRI);
-    const loadedSchema = useExtendedSchema({typeName, classIRI: typeIRI});
-    const uischema = useMemo(
-        () => uischemata[typeName] || (uischemas as any)[typeName],
-        [typeName],
-    );
-
     return (
         <>
             <Card>
@@ -83,9 +88,9 @@ export const EntityDetailCard: FunctionComponent<Props> = ({
                     </CardContent>
                 </CardActionArea>
                 {cardActionChildren !== null && <CardActions>{
-                    typeof cardActionChildren !== 'undefined' && !readOnly ? cardActionChildren : <>
+                    typeof cardActionChildren !== 'undefined' && !readonly ? cardActionChildren : <>
                         <Button size="small" color="primary" onClick={editEntry}>
-                            {t("edit")}
+                            {inlineEditing ? t("edit inline")  :  t("edit")}
                         </Button>
                     </>
                 }

diff --git a/apps/exhibition-live/components/form/show/EntityDetailElement.tsx b/apps/exhibition-live/components/form/show/EntityDetailElement.tsx
@@ -19,13 +19,17 @@ type EntityDetailElementProps = {
   entityIRI: string;
   data: any;
   cardActionChildren?: React.ReactNode;
+  inlineEditing?: boolean;
+  readonly?: boolean;
 };
 
 export const EntityDetailElement = ({
   typeIRI,
   entityIRI,
   data: liveData,
   cardActionChildren,
+  inlineEditing,
+  readonly,
   ...rest
 }: EntityDetailElementProps & Partial<BoxProps>) => {
   const boxProps = rest || {};
@@ -67,6 +71,8 @@ export const EntityDetailElement = ({
         data={data}
         cardInfo={cardInfo}
         cardActionChildren={cardActionChildren}
+        inlineEditing={inlineEditing}
+        readonly={readonly}
       />
     </Box>
   );

diff --git a/apps/exhibition-live/components/form/show/EntityDetailModal.tsx b/apps/exhibition-live/components/form/show/EntityDetailModal.tsx
@@ -98,6 +98,7 @@ export const EntityDetailModal = NiceModal.create(
             entityIRI={entityIRI}
             data={data}
             cardInfo={cardInfo}
+            inlineEditing={true}
           />
         </DialogContent>
         <DialogActions>

diff --git a/apps/exhibition-live/components/state/useCRUDWithQueryClient.ts b/apps/exhibition-live/components/state/useCRUDWithQueryClient.ts
@@ -98,6 +98,7 @@ export const useCRUDWithQueryClient = (
     {
       onSuccess: async () => {
         await queryClient.invalidateQueries(["load", entityIRI]);
+        await queryClient.invalidateQueries(["show", entityIRI]);
         /*for (const sourceIRI of resolveSourceIRIs(entityIRI)) {
         console.log('invalidateQueries', sourceIRI)
         await queryClient.invalidateQueries(["load", sourceIRI]);