Add image back to part details

- Also fix onClick events

src/frontend/src/components/details/DetailsImage.tsx

@@ -267,7 +267,10 @@ function ImageActionButtons({
               variant="outline"
               size="lg"
               tooltipAlignment="top"
-              onClick={() => {
+              onClick={(event: any) => {
+                event?.preventDefault();
+                event?.stopPropagation();
+                event?.nativeEvent?.stopImmediatePropagation();
                 modals.open({
                   title: <StylishText size="xl">{t`Select Image`}</StylishText>,
                   size: 'xxl',
@@ -285,7 +288,10 @@ function ImageActionButtons({
               variant="outline"
               size="lg"
               tooltipAlignment="top"
-              onClick={() => {
+              onClick={(event: any) => {
+                event?.preventDefault();
+                event?.stopPropagation();
+                event?.nativeEvent?.stopImmediatePropagation();
                 modals.open({
                   title: <StylishText size="xl">{t`Upload Image`}</StylishText>,
                   children: (
@@ -304,7 +310,12 @@ function ImageActionButtons({
               variant="outline"
               size="lg"
               tooltipAlignment="top"
-              onClick={() => removeModal(apiPath, setImage)}
+              onClick={(event: any) => {
+                event?.preventDefault();
+                event?.stopPropagation();
+                event?.nativeEvent?.stopImmediatePropagation();
+                removeModal(apiPath, setImage);
+              }}
             />
           )}
         </Group>
@@ -329,6 +340,16 @@ export function DetailsImage(props: DetailImageProps) {
 
   const permissions = useUserState();
 
+  const expandImage = (event: any) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    event?.nativeEvent?.stopImmediatePropagation();
+    modals.open({
+      children: <ApiImage src={img} />,
+      withCloseButton: false
+    });
+  };
+
   return (
     <>
       <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1}>
@@ -337,18 +358,10 @@ export function DetailsImage(props: DetailImageProps) {
             src={img}
             height={IMAGE_DIMENSION}
             width={IMAGE_DIMENSION}
+            onClick={expandImage}
           />
           {permissions.hasChangeRole(props.appRole) && hovered && (
-            <Overlay
+            <Overlay color="black" opacity={0.8} onClick={expandImage}>
-              color="black"
-              opacity={0.8}
-              onClick={() => {
-                modals.open({
-                  children: <ApiImage src={img} />,
-                  withCloseButton: false
-                });
-              }}
-            >
               <ImageActionButtons
                 visible={hovered}
                 actions={props.imageActions}

src/frontend/src/pages/part/PartDetail.tsx

@@ -1,5 +1,12 @@
 import { t } from '@lingui/macro';
-import { Group, LoadingOverlay, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  Grid,
+  Group,
+  LoadingOverlay,
+  Skeleton,
+  Stack,
+  Text
+} from '@mantine/core';
 import {
   IconBookmarks,
   IconBuilding,
@@ -28,12 +35,8 @@ import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { api } from '../../App';
-import {
+import { DetailsImage } from '../../components/details/DetailsImage';
-  DetailsImageType,
+import { ItemDetailsGrid } from '../../components/details/ItemDetails';
-  ItemDetailFields,
-  ItemDetails,
-  ItemDetailsGrid
-} from '../../components/details/ItemDetails';
 import {
   ActionDropdown,
   BarcodeActionDropdown,
@@ -368,7 +371,25 @@ export default function PartDetail() {
 
     return (
       <ItemDetailsGrid>
-        <DetailsTable fields={tl} item={part} />
+        <Grid>
+          <Grid.Col span={4}>
+            <DetailsImage
+              appRole={UserRoles.part}
+              imageActions={{
+                selectExisting: true,
+                uploadFile: true,
+                deleteFile: true
+              }}
+              src={part.image}
+              apiPath={apiUrl(ApiEndpoints.part_list, part.pk)}
+              refresh={refreshInstance}
+              pk={part.pk}
+            />
+          </Grid.Col>
+          <Grid.Col span={8}>
+            <DetailsTable fields={tl} item={part} />
+          </Grid.Col>
+        </Grid>
         <DetailsTable fields={tr} item={part} />
         <DetailsTable fields={bl} item={part} />
         <DetailsTable fields={br} item={part} />