From ac7bd51d9e1c7729a52b916d0f2120ea352bb5da Mon Sep 17 00:00:00 2001
From: Sebastian Tilsch <sebastian.tilsch@slub-dresden.de>
Date: Sun, 11 Feb 2024 21:59:54 +0100
Subject: [PATCH] more consistency and inlien editiing

---
 .../components/content/main/TypedForm.tsx     |  65 +++++-----
 .../components/form/show/EntityDetailCard.tsx | 112 +++++++++++++-----
 .../form/show/EntityDetailElement.tsx         |   2 +-
 .../renderer/SimpleExpandPanelRenderer.tsx    |  24 ++--
 .../public/locales/de/translation.json        |   1 +
 .../public/locales/en/translation.json        |   1 +
 6 files changed, 123 insertions(+), 82 deletions(-)

diff --git a/apps/exhibition-live/components/content/main/TypedForm.tsx b/apps/exhibition-live/components/content/main/TypedForm.tsx
index 2bbb157a..bb67555f 100644
--- a/apps/exhibition-live/components/content/main/TypedForm.tsx
+++ b/apps/exhibition-live/components/content/main/TypedForm.tsx
@@ -39,47 +39,42 @@ const WithPreviewForm = ({ classIRI, entityIRI, data, children }: Props) => {
     [rightDrawerOpen, rightDrawerWidth],
   );
 
-  return features?.enablePreview ? (
+  return (
     <>
-      {previewEnabled ? (
-        <Grid
-          container
-          direction={isLandscape ? "column" : "row"}
-          wrap="nowrap"
-          sx={{ height: "100%" }}
-        >
-          <Grid item flex={1}>
-            {children}
-          </Grid>
+      <Grid
+        container
+        direction={isLandscape ? "column" : "row"}
+        wrap="nowrap"
+        sx={{ height: "100%" }}
+      >
+        <Grid item flex={1}>
+          {children}
+        </Grid>
+        {features?.enablePreview && previewEnabled && (
           <Grid item flex={1}>
-            {
-              <EntityDetailElement
-                typeIRI={classIRI}
-                entityIRI={entityIRI}
-                data={data}
-              />
-            }
+            <EntityDetailElement
+              typeIRI={classIRI}
+              entityIRI={entityIRI}
+              data={data}
+            />
           </Grid>
-          <Grid
-            item
-            sx={{
+        )}
+        <Grid
+          item
+          sx={{
+            width: rightBoxWidth,
+            flexShrink: 0,
+            "& .MuiDrawer-paper": {
               width: rightBoxWidth,
-              flexShrink: 0,
-              "& .MuiDrawer-paper": {
-                width: rightBoxWidth,
-                // boxSizing: 'border-box',
-              },
-            }}
-          />
-        </Grid>
-      ) : (
-        children
-      )}
+              // boxSizing: 'border-box',
+            },
+          }}
+        />
+      </Grid>
     </>
-  ) : (
-    <>{children}</>
   );
 };
+
 export type MainFormProps = {
   typeName: string;
   entityIRI?: string;
@@ -135,7 +130,7 @@ const TypedForm = ({ typeName, entityIRI, classIRI }: MainFormProps) => {
   return (
     <WithPreviewForm data={data} classIRI={classIRI} entityIRI={entityIRI}>
       {loadedSchema && (
-        <Box sx={{ p: 2.5, display: "flex" }}>
+        <Box sx={{ p: 2, display: "flex" }}>
           <NewSemanticJsonForm
             defaultEditMode={true}
             data={data}
diff --git a/apps/exhibition-live/components/form/show/EntityDetailCard.tsx b/apps/exhibition-live/components/form/show/EntityDetailCard.tsx
index ad14bfcf..bb0454c6 100644
--- a/apps/exhibition-live/components/form/show/EntityDetailCard.tsx
+++ b/apps/exhibition-live/components/form/show/EntityDetailCard.tsx
@@ -1,4 +1,9 @@
-import React, { FunctionComponent, useCallback } from "react";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import useExtendedSchema from "../../state/useExtendedSchema";
 import { useCRUDWithQueryClient } from "../../state/useCRUDWithQueryClient";
 import { useGlobalCRUDOptions } from "../../state/useGlobalCRUDOptions";
@@ -21,6 +26,10 @@ import { encodeIRI } from "../../utils/core";
 
 import { typeIRItoTypeName } from "../../config";
 import { useSettings } from "../../state/useLocalSettings";
+import NewSemanticJsonForm from "../SemanticJsonForm";
+import { JSONSchema7 } from "json-schema";
+import { uischemas } from "../uischemas";
+import { uischemata } from "../uischemaForType";
 
 interface OwnProps {
   typeIRI: string;
@@ -39,6 +48,7 @@ export const EntityDetailCard: FunctionComponent<Props> = ({
   const { t } = useTranslation();
 
   const router = useModifiedRouter();
+  const [editMode, setEditMode] = useState(false);
   const editEntry = useCallback(() => {
     const typeName = typeIRItoTypeName(typeIRI);
     router.push(`/create/${typeName}?encID=${encodeIRI(entityIRI)}`);
@@ -47,38 +57,80 @@ export const EntityDetailCard: FunctionComponent<Props> = ({
     features: { enableDebug },
   } = useSettings();
 
+  const editInlineEntry = useCallback(() => {
+    setEditMode(true);
+  }, []);
+  const [formData, setFormData] = useState<any>(data);
+  const typeName = typeIRItoTypeName(typeIRI);
+  const loadedSchema = useExtendedSchema({ typeName, classIRI: typeIRI });
+  const { crudOptions } = useGlobalCRUDOptions();
+  const uischema = useMemo(
+    () => uischemata[typeName] || (uischemas as any)[typeName],
+    [typeName],
+  );
+
   return (
     <>
-      <Card>
-        <CardActionArea>
-          {cardInfo.image && (
-            <CardMedia
-              component="img"
-              sx={{ maxHeight: "24em", objectFit: "contain" }}
-              image={cardInfo.image}
-              alt={cardInfo.label}
-            />
-          )}
-          <CardContent>
-            <Typography gutterBottom variant="h5" component="div">
-              {cardInfo.label}
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              {cardInfo.description}
-            </Typography>
-          </CardContent>
-        </CardActionArea>
-        <CardActions>
-          <Button size="small" color="primary" onClick={editEntry}>
-            {t("edit")}
-          </Button>
-        </CardActions>
-      </Card>
-      <LobidAllPropTable allProps={data} />
-      {enableDebug && (
+      {editMode ? (
+        <NewSemanticJsonForm
+          data={formData}
+          onChange={setFormData}
+          entityIRI={data["@id"]}
+          typeIRI={typeIRI}
+          crudOptions={crudOptions}
+          defaultPrefix={defaultPrefix}
+          searchText={""}
+          shouldLoadInitially
+          jsonldContext={defaultJsonldContext}
+          schema={loadedSchema as JSONSchema7}
+          jsonFormsProps={{
+            uischema,
+            uischemas: uischemas,
+          }}
+          enableSidebar={false}
+          disableSimilarityFinder={true}
+          wrapWithinCard={true}
+        />
+      ) : (
         <>
-          <JsonView data={cardInfo} shouldInitiallyExpand={(lvl) => lvl < 3} />
-          <JsonView data={data} shouldInitiallyExpand={(lvl) => lvl < 3} />
+          <Card>
+            <CardActionArea>
+              {cardInfo.image && (
+                <CardMedia
+                  component="img"
+                  sx={{ maxHeight: "24em", objectFit: "contain" }}
+                  image={cardInfo.image}
+                  alt={cardInfo.label}
+                />
+              )}
+              <CardContent>
+                <Typography gutterBottom variant="h5" component="div">
+                  {cardInfo.label}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {cardInfo.description}
+                </Typography>
+              </CardContent>
+            </CardActionArea>
+            <CardActions>
+              <Button size="small" color="primary" onClick={editEntry}>
+                {t("edit")}
+              </Button>
+              <Button size="small" color="primary" onClick={editInlineEntry}>
+                {t("edit inline")}
+              </Button>
+            </CardActions>
+          </Card>
+          <LobidAllPropTable allProps={data} />
+          {enableDebug && (
+            <>
+              <JsonView
+                data={cardInfo}
+                shouldInitiallyExpand={(lvl) => lvl < 3}
+              />
+              <JsonView data={data} shouldInitiallyExpand={(lvl) => lvl < 3} />
+            </>
+          )}
         </>
       )}
     </>
diff --git a/apps/exhibition-live/components/form/show/EntityDetailElement.tsx b/apps/exhibition-live/components/form/show/EntityDetailElement.tsx
index 7506777b..03382c63 100644
--- a/apps/exhibition-live/components/form/show/EntityDetailElement.tsx
+++ b/apps/exhibition-live/components/form/show/EntityDetailElement.tsx
@@ -64,7 +64,7 @@ export const EntityDetailElement = ({
   }, [typeName, data]);
 
   return (
-    <Box sx={{ m: 2 }}>
+    <Box sx={{ p: 2 }}>
       <EntityDetailCard
         typeIRI={classIRI}
         entityIRI={entityIRI}
diff --git a/apps/exhibition-live/components/renderer/SimpleExpandPanelRenderer.tsx b/apps/exhibition-live/components/renderer/SimpleExpandPanelRenderer.tsx
index e942c807..227431a8 100644
--- a/apps/exhibition-live/components/renderer/SimpleExpandPanelRenderer.tsx
+++ b/apps/exhibition-live/components/renderer/SimpleExpandPanelRenderer.tsx
@@ -28,6 +28,8 @@ import { defaultJsonldContext, defaultPrefix } from "../form/formConfigs";
 import get from "lodash/get";
 import { TabIcon } from "../theme/icons";
 import { useModifiedRouter } from "../basic";
+import NiceModal from "@ebay/nice-modal-react";
+import { EntityDetailModal } from "../form/show";
 
 type SimpleExpandPanelRendererProps = {
   data: any;
@@ -77,9 +79,7 @@ export const SimpleExpandPanelRenderer = (
     return {};
   }, [data, typeName, entityIRI]);
   const [modalIsOpen, setModalIsOpen] = useState(false);
-  const handleToggle = useCallback(() => {
-    setModalIsOpen(!modalIsOpen);
-  }, [setModalIsOpen, modalIsOpen]);
+
   const subSchema = useMemo(
     () =>
       bringDefinitionToTop(rootSchema as JSONSchema7, typeName) as JSONSchema7,
@@ -130,6 +130,10 @@ export const SimpleExpandPanelRenderer = (
   const router = useModifiedRouter();
   const locale = router.query.locale || "";
 
+  const showDetailModal = useCallback(() => {
+    NiceModal.show(EntityDetailModal, { typeIRI, entityIRI, data });
+  }, [typeIRI, entityIRI, data]);
+
   return (
     <ListItem
       secondaryAction={
@@ -149,7 +153,7 @@ export const SimpleExpandPanelRenderer = (
         </Stack>
       }
     >
-      <ListItemButton onClick={!draft ? handleToggle : undefined}>
+      <ListItemButton onClick={!draft ? showDetailModal : undefined}>
         <ListItemAvatar>
           <Avatar aria-label="Index" src={image}>
             {count + 1}
@@ -162,18 +166,6 @@ export const SimpleExpandPanelRenderer = (
           secondary={description}
         />
       </ListItemButton>
-      {!draft && (
-        <SemanticFormsModal
-          schema={subSchema as JsonSchema}
-          entityIRI={entityIRI}
-          typeIRI={typeIRI}
-          label={realLabel}
-          open={modalIsOpen}
-          askClose={() => setModalIsOpen(false)}
-          askCancel={() => setModalIsOpen(false)}
-          onChange={onChange}
-        />
-      )}
     </ListItem>
   );
 };
diff --git a/apps/exhibition-live/public/locales/de/translation.json b/apps/exhibition-live/public/locales/de/translation.json
index 34163651..efe0a86c 100644
--- a/apps/exhibition-live/public/locales/de/translation.json
+++ b/apps/exhibition-live/public/locales/de/translation.json
@@ -1,5 +1,6 @@
 {
   "edit": "bearbeiten",
+  "edit inline": "Inline bearbeiten",
   "cancel": "abbrechen",
   "settings": "Einstellungen",
   "search": "Suche",
diff --git a/apps/exhibition-live/public/locales/en/translation.json b/apps/exhibition-live/public/locales/en/translation.json
index fdfadc71..671c47cb 100644
--- a/apps/exhibition-live/public/locales/en/translation.json
+++ b/apps/exhibition-live/public/locales/en/translation.json
@@ -1,5 +1,6 @@
 {
   "edit": "edit",
+  "edit inline": "edit inline",
   "cancel": "cancel",
   "settings": "settings",
   "search": "search",