fix internal links (edit, show)

enables display of detail modal with all objects within the list and correct edit entry functionality across all views
slub · Jan 4, 2024 · f085f67 · f085f67
1 parent 36fab53
commit f085f67
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -12,8 +12,7 @@ You might want to set your own storage backend(s) within the settings modal.
 
 The pure frontend specific component based framework, that sets the base of the exhibition catalog is documented within the Storybook.
 
-You can get a live preview of the current `develop` branch here: [https://slub.github.io/exhibition-live/storybook/](https://slub.github.io/exhibition-live/storybook/?path=/docs/example-introduction--docs)
-
+You can get a live preview of the current `develop` branch here: [https://slub.github.io/exhibition-live/storybook/](https://slub.github.io/exhibition-live/storybook/)
 
 # Development
 

diff --git a/apps/exhibition-live/components/config/typeIRIToTypeName.ts b/apps/exhibition-live/components/config/typeIRIToTypeName.ts
@@ -1,5 +1,5 @@
 import { BASE_IRI } from "./index";
 
 export const typeIRItoTypeName = (iri: string) => {
-  return iri.substring(BASE_IRI.length, iri.length);
+  return iri?.substring(BASE_IRI.length, iri.length);
 };
diff --git a/apps/exhibition-live/components/content/main/TypedForm.tsx b/apps/exhibition-live/components/content/main/TypedForm.tsx
@@ -88,7 +88,7 @@ const TypedForm = ({ typeName, entityIRI, classIRI }: MainFormProps) => {
         return;
       }
       const typeName = typeIRI.substring(BASE_IRI.length, typeIRI.length);
-      router.push(`/create/${typeName}/${encodeIRI(entityIRI)}`);
+      router.push(`/create/${typeName}?encID=${encodeIRI(entityIRI)}`);
     },
     [router],
   );

diff --git a/apps/exhibition-live/components/content/main/TypedList.tsx b/apps/exhibition-live/components/content/main/TypedList.tsx
@@ -184,8 +184,8 @@ const computeColumns: (
                       parseMarkdownLinks(group).map(({ label, url }) => {
                         return (
                           <Grid item key={url} sx={{ m: 0.5 }}>
-                            <Link href={`/show/${encodeIRI(url)}`}>
-                              <OverflowChip label={label} />
+                            <Link>
+                              <OverflowChip entityIRI={url} label={label} />
                             </Link>
                           </Grid>
                         );

diff --git a/apps/exhibition-live/components/form/show/EntityDetailModal.tsx b/apps/exhibition-live/components/form/show/EntityDetailModal.tsx
@@ -24,23 +24,26 @@ import {
 } from "../../utils/mapping/simpleFieldExtractor";
 import { PrimaryFieldResults } from "../../utils/types";
 import { EntityDetailCard } from "./EntityDetailCard";
+import { useTypeIRIFromEntity } from "../../state";
 
 type EntityDetailModalProps = {
-  typeIRI: string;
+  typeIRI: string | undefined;
   entityIRI: string;
 };
 
 export const EntityDetailModal = NiceModal.create(
   ({ typeIRI, entityIRI }: EntityDetailModalProps) => {
     const modal = useModal();
-    const typeName = useMemo(() => typeIRItoTypeName(typeIRI), [typeIRI]);
-    const loadedSchema = useExtendedSchema({ typeName, classIRI: typeIRI });
+    const typeIRIs = typeIRI ? [typeIRI] : useTypeIRIFromEntity(entityIRI);
+    const classIRI: string | undefined = typeIRIs?.[0];
+    const typeName = useMemo(() => typeIRItoTypeName(classIRI), [classIRI]);
+    const loadedSchema = useExtendedSchema({ typeName, classIRI });
     const { crudOptions } = useGlobalCRUDOptions();
     const {
       loadQuery: { data: rawData },
     } = useCRUDWithQueryClient(
       entityIRI,
-      typeIRI,
+      classIRI,
       loadedSchema,
       defaultPrefix,
       crudOptions,

diff --git a/apps/exhibition-live/components/form/show/LoadedEntityDetailModal.tsx b/apps/exhibition-live/components/form/show/LoadedEntityDetailModal.tsx
@@ -19,17 +19,39 @@ import {
 } from "../../utils/mapping/simpleFieldExtractor";
 import { PrimaryFieldResults } from "../../utils/types";
 import { EntityDetailCard } from "./EntityDetailCard";
+import { useTypeIRIFromEntity } from "../../state";
+import useExtendedSchema from "../../state/useExtendedSchema";
+import { useGlobalCRUDOptions } from "../../state/useGlobalCRUDOptions";
+import { useCRUDWithQueryClient } from "../../state/useCRUDWithQueryClient";
+import { defaultJsonldContext, defaultPrefix } from "../formConfigs";
 
 type LoadedEntityDetailModalProps = {
-  typeIRI: string;
+  typeIRI?: string;
   entityIRI: string;
   data: any;
 };
 
 export const LoadedEntityDetailModal = NiceModal.create(
-  ({ typeIRI, entityIRI, data }: LoadedEntityDetailModalProps) => {
+  ({ typeIRI, entityIRI, data: defaultData }: LoadedEntityDetailModalProps) => {
     const modal = useModal();
-    const typeName = useMemo(() => typeIRItoTypeName(typeIRI), [typeIRI]);
+    const typeIRIs = typeIRI ? [typeIRI] : useTypeIRIFromEntity(entityIRI);
+    const classIRI: string | undefined = typeIRIs?.[0];
+    const typeName = useMemo(() => typeIRItoTypeName(classIRI), [classIRI]);
+    const loadedSchema = useExtendedSchema({ typeName, classIRI });
+    const { crudOptions } = useGlobalCRUDOptions();
+    const {
+      loadQuery: { data: rawData },
+    } = useCRUDWithQueryClient(
+      entityIRI,
+      classIRI,
+      loadedSchema,
+      defaultPrefix,
+      crudOptions,
+      defaultJsonldContext,
+      { enabled: true, refetchOnWindowFocus: true },
+      "show",
+    );
+    const data = rawData?.document || defaultData;
     const cardInfo = useMemo<PrimaryFieldResults<string>>(() => {
       const fieldDecl = primaryFields[typeName];
       console.log("fieldDecl", fieldDecl, "data", data, "typeName", typeName);
@@ -70,7 +92,7 @@ export const LoadedEntityDetailModal = NiceModal.create(
         </AppBar>
         <DialogContent>
           <EntityDetailCard
-            typeIRI={typeIRI}
+            typeIRI={classIRI}
             entityIRI={entityIRI}
             data={data}
             cardInfo={cardInfo}

diff --git a/apps/exhibition-live/components/layout/main-layout/menu/NavItem.tsx b/apps/exhibition-live/components/layout/main-layout/menu/NavItem.tsx
@@ -11,12 +11,15 @@ import {
   Typography,
   useMediaQuery,
 } from "@mui/material";
+import { v4 as uuidv4 } from "uuid";
 import { useTheme } from "@mui/material/styles";
 import { useModifiedRouter } from "../../../basic";
 import { useEffect, useCallback } from "react";
 
 import { useThemeSettings } from "../../../state";
 import { MenuItem } from "./types";
+import { encodeIRI } from "../../../utils/core";
+import { slent } from "../../../form/formConfigs";
 
 type NavItemProps = {
   item: MenuItem;
@@ -37,8 +40,9 @@ export const NavItem = ({
   const matchesSM = useMediaQuery(theme.breakpoints.down("lg"));
 
   const create = useCallback(
-    (typeName: any) => {
-      router.push(`/create/${typeName}`);
+    (typeName: string) => {
+      const newEncodedURI = encodeIRI(slent(`${typeName}-${uuidv4()}`).value);
+      router.push(`/create/${typeName}?encID=${newEncodedURI}`);
     },
     [router],
   );

diff --git a/apps/exhibition-live/components/lists/OverflowChip.tsx b/apps/exhibition-live/components/lists/OverflowChip.tsx
@@ -1,19 +1,33 @@
-import { useState, MouseEvent } from "react";
+import { useState, MouseEvent, useMemo, useCallback } from "react";
 import { Chip, Tooltip, Typography } from "@mui/material";
+import NiceModal from "@ebay/nice-modal-react";
+import { LoadedEntityDetailModal } from "../form/show/LoadedEntityDetailModal";
 
 type OverflowContainerProps = {
   label: string;
+  entityIRI: string;
 };
 
 const OverflowText = ({ children }: { children: string }) => {
   return <Typography noWrap>{children}</Typography>;
 };
-export const OverflowChip = ({ label }: OverflowContainerProps) => {
+export const OverflowChip = ({ label, entityIRI }: OverflowContainerProps) => {
   const [tooltipEnabled, setTooltipEnabled] = useState(false);
 
-  const handleShouldShow = ({ currentTarget }: MouseEvent<Element>) => {
-    setTooltipEnabled(true);
-  };
+  const showDetailModal = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      NiceModal.show(LoadedEntityDetailModal, { entityIRI, data: {} });
+    },
+    [entityIRI],
+  );
+
+  const handleShouldShow = useCallback(
+    (e: MouseEvent<Element>) => {
+      setTooltipEnabled(true);
+    },
+    [setTooltipEnabled, showDetailModal],
+  );
 
   return (
     <Tooltip
@@ -26,6 +40,7 @@ export const OverflowChip = ({ label }: OverflowContainerProps) => {
         onMouseEnter={handleShouldShow}
         sx={{ maxWidth: "8em" }}
         label={label}
+        onClick={showDetailModal}
       />
     </Tooltip>
   );

diff --git a/apps/exhibition-live/components/renderer/SimpleExpandPanelRenderer.tsx b/apps/exhibition-live/components/renderer/SimpleExpandPanelRenderer.tsx
@@ -27,6 +27,7 @@ import { useGlobalCRUDOptions } from "../state/useGlobalCRUDOptions";
 import { defaultJsonldContext, defaultPrefix } from "../form/formConfigs";
 import get from "lodash/get";
 import { TabIcon } from "../theme/icons";
+import {useModifiedRouter} from "../basic";
 
 type SimpleExpandPanelRendererProps = {
   data: any;
@@ -126,6 +127,8 @@ export const SimpleExpandPanelRenderer = (
     if (!saveMutation) return;
     saveMutation.mutate(data);
   }, [saveMutation, data]);
+  const router = useModifiedRouter();
+  const locale = router.query.locale || "";
 
   return (
     <ListItem
@@ -151,7 +154,7 @@ export const SimpleExpandPanelRenderer = (
                   ({ children, ...props }, ref) => (
                     <span {...props} ref={ref}>
                       <a
-                        href={`/de/create/${typeName}?encID=${encodeIRI(
+                        href={`/${locale}/create/${typeName}?encID=${encodeIRI(
                           entityIRI,
                         )}`}
                         target="_blank"

diff --git a/apps/exhibition-live/components/state/index.ts b/apps/exhibition-live/components/state/index.ts
@@ -10,3 +10,4 @@ export * from "./useQueryKeyResolver";
 export * from "./useGlobalAuth";
 export * from "./useDrawerDimensions";
 export * from "./useRightDrawerState";
+export * from "./useTypeIRIFromEntity";
diff --git a/apps/exhibition-live/components/state/useTypeIRIFromEntity.ts b/apps/exhibition-live/components/state/useTypeIRIFromEntity.ts
@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+import { getClasses } from "../utils/crud";
+import { useGlobalCRUDOptions } from "./useGlobalCRUDOptions";
+import { defaultPrefix, defaultQueryBuilderOptions } from "../form/formConfigs";
+
+export const useTypeIRIFromEntity = (entityIRI: string) => {
+  const { crudOptions } = useGlobalCRUDOptions();
+  const selectFetch = crudOptions?.selectFetch;
+  const { data: typeIRIs } = useQuery(
+    ["classes", entityIRI],
+    async () => {
+      return await getClasses(entityIRI, selectFetch, {
+        queryBuildOptions: defaultQueryBuilderOptions,
+        defaultPrefix: defaultPrefix,
+      });
+    },
+    {
+      enabled: Boolean(entityIRI && selectFetch),
+    },
+  );
+  return typeIRIs;
+};
diff --git a/apps/exhibition-live/public/locales/de/common.json b/apps/exhibition-live/public/locales/de/common.json
@@ -34,7 +34,7 @@
   "CorporationRole_plural": "Rollen von Organisationen",
   "EventType": "Ereignisart",
   "EventType_plural": "Ereignisarten",
-  "edit entry": "Eintrag beareiten",
+  "edit entry": "Eintrag bearbeiten",
   "line chart": "Liniendiagramm",
   "timeline": "Zeitstrahl"
 }