Actually fix offcut images

src/app/admin/offcuts/Create.tsx

@@ -4,7 +4,6 @@ import {
   AutocompleteInput,
   CheckboxGroupInput,
   Create,
-  ImageField,
   ImageInput,
   RadioButtonGroupInput,
   ReferenceArrayInput,
@@ -17,6 +16,7 @@ import {
 import { useWatch } from "react-hook-form";
 import RemoveChoiceButton from "./RemoveChoiceButton";
 import OffcutReferenceInput from "./OffcutReferenceInput";
+import { ImageField } from "./ImageField";
 
 export const MaterialInput = ({
   source,
@@ -111,21 +111,9 @@ export const Fields = () => {
   );
 };
 
-export const addBasePathToOffcutPictures = (data: any) => {
-  return {
-    ...data,
-    pictures: data.pictures.map((picture: any) => {
-      return {
-        ...picture,
-        src: `/scrrap-lab${picture.src}`,
-      };
-    }),
-  };
-};
-
 const OffcutCreate = () => {
   return (
-    <Create redirect="list" transform={addBasePathToOffcutPictures}>
+    <Create redirect="list">
       <SimpleForm>
         <Fields />
       </SimpleForm>

src/app/admin/offcuts/Edit.tsx

@@ -1,12 +1,11 @@
 import { Edit, SimpleForm } from "react-admin";
-import { addBasePathToOffcutPictures, Fields } from "./Create";
+import { Fields } from "./Create";
 
 const OffcutEdit = () => {
   return (
     <Edit
       redirect="list"
       title="Modifier Chute"
-      transform={addBasePathToOffcutPictures}
     >
       <SimpleForm>
         <Fields />

src/app/admin/offcuts/ImageField.tsx

@@ -0,0 +1,153 @@
+/* eslint-disable @next/next/no-img-element */
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import { Box, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import get from "lodash/get";
+import { useRecordContext, useTranslate } from "ra-core";
+import { TableCellProps } from "@mui/material/TableCell";
+import { SxProps } from "@mui/system";
+import { sanitizeFieldRestProps, FieldProps } from "react-admin";
+import { PropertyPath } from "lodash";
+
+type TextAlign = TableCellProps["align"];
+type SortOrder = "ASC" | "DESC";
+
+const fieldPropTypes = {
+  sortBy: PropTypes.string,
+  sortByOrder: PropTypes.oneOf<SortOrder>(["ASC", "DESC"]),
+  source: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.bool,
+  ]),
+  sortable: PropTypes.bool,
+  className: PropTypes.string,
+  cellClassName: PropTypes.string,
+  headerClassName: PropTypes.string,
+  textAlign: PropTypes.oneOf<TextAlign>([
+    "inherit",
+    "left",
+    "center",
+    "right",
+    "justify",
+  ]),
+  emptyText: PropTypes.string,
+};
+
+export const ImageField = <
+  RecordType extends Record<string, any> = Record<string, any>
+>(
+  props: ImageFieldProps<RecordType>
+) => {
+  const { className, emptyText, source, src, title, ...rest } = props;
+  const record = useRecordContext(props);
+  const sourceValue = get(record, source as PropertyPath);
+  const translate = useTranslate();
+
+  if (!sourceValue) {
+    return emptyText ? (
+      <Typography
+        component="span"
+        variant="body2"
+        className={className}
+        {...sanitizeFieldRestProps(rest)}
+      >
+        {emptyText && translate(emptyText, { _: emptyText })}
+      </Typography>
+    ) : (
+      <Typography
+        component="div"
+        className={className}
+        {...sanitizeFieldRestProps(rest)}
+      />
+    );
+  }
+
+  if (Array.isArray(sourceValue)) {
+    return (
+      <Root className={className} {...sanitizeFieldRestProps(rest)}>
+        <ul className={ImageFieldClasses.list}>
+          {sourceValue.map((file, index) => {
+            const fileTitleValue = get(file, title as PropertyPath) || title;
+            const srcValue = get(file, src as PropertyPath) || title;
+
+            return (
+              <li key={index}>
+                <img
+                  alt={fileTitleValue}
+                  title={fileTitleValue}
+                  src={
+                    srcValue.startsWith("/api/images")
+                      ? `/scrrap-lab${srcValue}`
+                      : srcValue
+                  }
+                  className={ImageFieldClasses.image}
+                />
+              </li>
+            );
+          })}
+        </ul>
+      </Root>
+    );
+  }
+
+  const titleValue =
+    get(record, title as PropertyPath, "")?.toString() || title;
+
+  return (
+    <Root className={className} {...sanitizeFieldRestProps(rest)}>
+      <img
+        title={titleValue}
+        alt={titleValue}
+        src={
+          sourceValue?.toString().startsWith("/api/images")
+            ? `/scrrap-lab${sourceValue?.toString()}`
+            : sourceValue?.toString()
+        }
+        className={ImageFieldClasses.image}
+      />
+    </Root>
+  );
+};
+
+// What? TypeScript loses the displayName if we don't set it explicitly
+ImageField.displayName = "ImageField";
+
+ImageField.propTypes = {
+  ...fieldPropTypes,
+  src: PropTypes.string,
+  title: PropTypes.string,
+};
+
+const PREFIX = "RaImageField";
+
+export const ImageFieldClasses = {
+  list: `${PREFIX}-list`,
+  image: `${PREFIX}-image`,
+};
+
+const Root = styled(Box, {
+  name: PREFIX,
+  overridesResolver: (props, styles) => styles.root,
+})({
+  [`& .${ImageFieldClasses.list}`]: {
+    display: "flex",
+    listStyleType: "none",
+  },
+  [`& .${ImageFieldClasses.image}`]: {
+    margin: "0.25rem",
+    width: 200,
+    height: 100,
+    objectFit: "contain",
+  },
+});
+
+export interface ImageFieldProps<
+  RecordType extends Record<string, any> = Record<string, any>
+> extends FieldProps<RecordType> {
+  src?: string;
+  title?: string;
+  sx?: SxProps;
+}