@inventreedb/ui 0.0.1

package/src/components/details/DetailsImage.tsx

@@ -0,0 +1,462 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  AspectRatio,
+  Button,
+  Grid,
+  Group,
+  Image,
+  Overlay,
+  Paper,
+  Text,
+  rem,
+  useMantineColorScheme
+} from '@mantine/core';
+import {
+  Dropzone,
+  type FileWithPath,
+  IMAGE_MIME_TYPE
+} from '@mantine/dropzone';
+import { useHover } from '@mantine/hooks';
+import { modals } from '@mantine/modals';
+import { useMemo, useState } from 'react';
+
+import type { UserRoles } from '@lib/enums/Roles';
+import { showNotification } from '@mantine/notifications';
+import { api } from '../../App';
+import { cancelEvent } from '../../functions/events';
+import { InvenTreeIcon } from '../../functions/icons';
+import { showApiErrorMessage } from '../../functions/notifications';
+import { useEditApiFormModal } from '../../hooks/UseForm';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+import { PartThumbTable } from '../../tables/part/PartThumbTable';
+import { vars } from '../../theme';
+import { ActionButton } from '../buttons/ActionButton';
+import { ApiImage } from '../images/ApiImage';
+import { StylishText } from '../items/StylishText';
+
+/**
+ * Props for detail image
+ */
+export type DetailImageProps = {
+  appRole?: UserRoles;
+  src: string;
+  apiPath: string;
+  refresh?: () => void;
+  imageActions?: DetailImageButtonProps;
+  pk: string;
+};
+
+/**
+ * Actions for Detail Images.
+ * If true, the button type will be visible
+ * @param {boolean} selectExisting - PART ONLY. Allows selecting existing images as part image
+ * @param {boolean} downloadImage - Allows downloading image from a remote URL
+ * @param {boolean} uploadFile - Allows uploading a new image
+ * @param {boolean} deleteFile - Allows deleting the current image
+ */
+export type DetailImageButtonProps = {
+  selectExisting?: boolean;
+  downloadImage?: boolean;
+  uploadFile?: boolean;
+  deleteFile?: boolean;
+};
+
+// Image is expected to be 1:1 square, so only 1 dimension is needed
+const IMAGE_DIMENSION = 256;
+
+// Image to display if instance has no image
+const backup_image = '/static/img/blank_image.png';
+
+/**
+ * Modal used for removing/deleting the current image relation
+ */
+const removeModal = (apiPath: string, setImage: (image: string) => void) =>
+  modals.openConfirmModal({
+    title: <StylishText size='xl'>{t`Remove Image`}</StylishText>,
+    children: (
+      <Text>
+        <Trans>Remove the associated image from this item?</Trans>
+      </Text>
+    ),
+    labels: { confirm: t`Remove`, cancel: t`Cancel` },
+    onConfirm: async () => {
+      await api.patch(apiPath, { image: null });
+      setImage(backup_image);
+    }
+  });
+
+/**
+ * Modal used for uploading a new image
+ */
+function UploadModal({
+  apiPath,
+  setImage
+}: Readonly<{
+  apiPath: string;
+  setImage: (image: string) => void;
+}>) {
+  const [currentFile, setCurrentFile] = useState<FileWithPath | null>(null);
+  let uploading = false;
+
+  // Components to show in the Dropzone when no file is selected
+  const noFileIdle = (
+    <Group>
+      <InvenTreeIcon icon='photo' iconProps={{ size: '3.2rem', stroke: 1.5 }} />
+      <div>
+        <Text size='xl' inline>
+          <Trans>Drag and drop to upload</Trans>
+        </Text>
+        <Text size='sm' c='dimmed' inline mt={7}>
+          <Trans>Click to select file(s)</Trans>
+        </Text>
+      </div>
+    </Group>
+  );
+
+  /**
+   * Generates components to display selected image in Dropzone
+   */
+  const fileInfo = (file: FileWithPath) => {
+    const imageUrl = URL.createObjectURL(file);
+    const size = file.size / 1024 ** 2;
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '15px',
+          flexGrow: '1'
+        }}
+      >
+        <Image
+          src={imageUrl}
+          onLoad={() => URL.revokeObjectURL(imageUrl)}
+          radius='sm'
+          height={75}
+          fit='contain'
+          style={{ flexBasis: '40%' }}
+        />
+        <div style={{ flexBasis: '60%' }}>
+          <Text size='xl' inline style={{ wordBreak: 'break-all' }}>
+            {file.name}
+          </Text>
+          <Text size='sm' c='dimmed' inline mt={7}>
+            {size.toFixed(2)} MB
+          </Text>
+        </div>
+      </div>
+    );
+  };
+
+  /**
+   * Create FormData object and upload selected image
+   */
+  const uploadImage = async (file: FileWithPath | null) => {
+    if (!file) {
+      return;
+    }
+
+    uploading = true;
+    const formData = new FormData();
+    formData.append('image', file, file.name);
+
+    api
+      .patch(apiPath, formData)
+      .then((response) => {
+        setImage(response.data.image);
+        modals.closeAll();
+        showNotification({
+          title: t`Image uploaded`,
+          message: t`Image has been uploaded successfully`,
+          color: 'green'
+        });
+      })
+      .catch((error) => {
+        showApiErrorMessage({
+          error: error,
+          title: t`Upload Error`,
+          field: 'image'
+        });
+      });
+  };
+
+  const { colorScheme } = useMantineColorScheme();
+
+  const primaryColor =
+    vars.colors.primaryColors[colorScheme === 'dark' ? 4 : 6];
+  const redColor = vars.colors.red[colorScheme === 'dark' ? 4 : 6];
+
+  return (
+    <Paper style={{ height: '220px' }}>
+      <Dropzone
+        onDrop={(files) => setCurrentFile(files[0])}
+        maxFiles={1}
+        accept={IMAGE_MIME_TYPE}
+        loading={uploading}
+      >
+        <Group
+          justify='center'
+          gap='xl'
+          style={{ minHeight: rem(140), pointerEvents: 'none' }}
+        >
+          <Dropzone.Accept>
+            <InvenTreeIcon
+              icon='upload'
+              iconProps={{
+                size: '3.2rem',
+                stroke: 1.5,
+                color: primaryColor
+              }}
+            />
+          </Dropzone.Accept>
+          <Dropzone.Reject>
+            <InvenTreeIcon
+              icon='reject'
+              iconProps={{
+                size: '3.2rem',
+                stroke: 1.5,
+                color: redColor
+              }}
+            />
+          </Dropzone.Reject>
+          <Dropzone.Idle>
+            {currentFile ? fileInfo(currentFile) : noFileIdle}
+          </Dropzone.Idle>
+        </Group>
+      </Dropzone>
+      <Paper
+        style={{
+          position: 'sticky',
+          bottom: '0',
+          left: '0',
+          right: '0',
+          height: '60px',
+          zIndex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          gap: '10px'
+        }}
+      >
+        <Button
+          variant='outline'
+          disabled={!currentFile}
+          onClick={() => setCurrentFile(null)}
+        >
+          <Trans>Clear</Trans>
+        </Button>
+        <Button
+          disabled={!currentFile}
+          onClick={() => uploadImage(currentFile)}
+        >
+          <Trans>Submit</Trans>
+        </Button>
+      </Paper>
+    </Paper>
+  );
+}
+
+/**
+ * Generate components for Action buttons used with the Details Image
+ */
+function ImageActionButtons({
+  actions = {},
+  visible,
+  apiPath,
+  hasImage,
+  pk,
+  setImage,
+  downloadImage
+}: Readonly<{
+  actions?: DetailImageButtonProps;
+  visible: boolean;
+  apiPath: string;
+  hasImage: boolean;
+  pk: string;
+  setImage: (image: string) => void;
+  downloadImage: () => void;
+}>) {
+  const globalSettings = useGlobalSettingsState();
+
+  return (
+    <>
+      {visible && (
+        <Group
+          gap='xs'
+          style={{ zIndex: 2, position: 'absolute', top: '10px', left: '10px' }}
+        >
+          {actions.selectExisting && (
+            <ActionButton
+              icon={
+                <InvenTreeIcon
+                  icon='select_image'
+                  iconProps={{ color: 'white' }}
+                />
+              }
+              tooltip={t`Select from existing images`}
+              variant='outline'
+              size='lg'
+              tooltipAlignment='top'
+              onClick={(event: any) => {
+                cancelEvent(event);
+
+                modals.open({
+                  title: <StylishText size='xl'>{t`Select Image`}</StylishText>,
+                  size: '80%',
+                  children: <PartThumbTable pk={pk} setImage={setImage} />
+                });
+              }}
+            />
+          )}
+          {actions.downloadImage &&
+            globalSettings.isSet('INVENTREE_DOWNLOAD_FROM_URL') && (
+              <ActionButton
+                icon={
+                  <InvenTreeIcon
+                    icon='download'
+                    iconProps={{ color: 'white' }}
+                  />
+                }
+                tooltip={t`Download remote image`}
+                variant='outline'
+                size='lg'
+                tooltipAlignment='top'
+                onClick={(event: any) => {
+                  cancelEvent(event);
+                  downloadImage();
+                }}
+              />
+            )}
+          {actions.uploadFile && (
+            <ActionButton
+              icon={
+                <InvenTreeIcon icon='upload' iconProps={{ color: 'white' }} />
+              }
+              tooltip={t`Upload new image`}
+              variant='outline'
+              size='lg'
+              tooltipAlignment='top'
+              onClick={(event: any) => {
+                cancelEvent(event);
+                modals.open({
+                  title: <StylishText size='xl'>{t`Upload Image`}</StylishText>,
+                  children: (
+                    <UploadModal apiPath={apiPath} setImage={setImage} />
+                  )
+                });
+              }}
+            />
+          )}
+          {actions.deleteFile && hasImage && (
+            <ActionButton
+              icon={
+                <InvenTreeIcon icon='delete' iconProps={{ color: 'red' }} />
+              }
+              tooltip={t`Delete image`}
+              variant='outline'
+              size='lg'
+              tooltipAlignment='top'
+              onClick={(event: any) => {
+                cancelEvent(event);
+                removeModal(apiPath, setImage);
+              }}
+            />
+          )}
+        </Group>
+      )}
+    </>
+  );
+}
+
+/**
+ * Renders an image with action buttons for display on Details panels
+ */
+export function DetailsImage(props: Readonly<DetailImageProps>) {
+  // Displays a group of ActionButtons on hover
+  const { hovered, ref } = useHover();
+  const [img, setImg] = useState<string>(props.src ?? backup_image);
+
+  // Sets a new image, and triggers upstream instance refresh
+  const setAndRefresh = (image: string) => {
+    setImg(image);
+    props.refresh?.();
+  };
+
+  const permissions = useUserState();
+
+  const downloadImage = useEditApiFormModal({
+    url: props.apiPath,
+    title: t`Download Image`,
+    fields: {
+      remote_image: {}
+    },
+    timeout: 10000,
+    successMessage: t`Image downloaded successfully`,
+    onFormSuccess: (response: any) => {
+      if (response.image) {
+        setAndRefresh(response.image);
+      }
+    }
+  });
+
+  const hasOverlay: boolean = useMemo(() => {
+    return (
+      props.imageActions?.selectExisting ||
+      props.imageActions?.uploadFile ||
+      props.imageActions?.deleteFile ||
+      false
+    );
+  }, [props.imageActions]);
+
+  const expandImage = (event: any) => {
+    cancelEvent(event);
+    modals.open({
+      children: <ApiImage src={img} />,
+      withCloseButton: false
+    });
+  };
+
+  return (
+    <>
+      {downloadImage.modal}
+      <Grid.Col span={{ base: 12, sm: 4 }}>
+        <AspectRatio
+          ref={ref}
+          maw={IMAGE_DIMENSION}
+          ratio={1}
+          pos='relative'
+          visibleFrom='xs'
+        >
+          <>
+            <ApiImage
+              src={img}
+              mah={IMAGE_DIMENSION}
+              maw={IMAGE_DIMENSION}
+              onClick={expandImage}
+            />
+            {props.appRole &&
+              permissions.hasChangeRole(props.appRole) &&
+              hasOverlay &&
+              hovered && (
+                <Overlay color='black' opacity={0.8} onClick={expandImage}>
+                  <ImageActionButtons
+                    visible={hovered}
+                    actions={props.imageActions}
+                    apiPath={props.apiPath}
+                    hasImage={!!props.src}
+                    pk={props.pk}
+                    setImage={setAndRefresh}
+                    downloadImage={downloadImage.open}
+                  />
+                </Overlay>
+              )}
+          </>
+        </AspectRatio>
+      </Grid.Col>
+    </>
+  );
+}

package/src/components/details/ItemDetails.tsx

@@ -0,0 +1,17 @@
+import { Paper, SimpleGrid } from '@mantine/core';
+import type React from 'react';
+
+export function ItemDetailsGrid(props: React.PropsWithChildren<{}>) {
+  return (
+    <Paper p='xs'>
+      <SimpleGrid
+        cols={{ base: 1, '900px': 2 }}
+        type='container'
+        spacing='xs'
+        verticalSpacing='xs'
+      >
+        {props.children}
+      </SimpleGrid>
+    </Paper>
+  );
+}

package/src/components/editors/NotesEditor.tsx

@@ -0,0 +1,232 @@
+import { t } from '@lingui/core/macro';
+import { notifications } from '@mantine/notifications';
+import { useQuery } from '@tanstack/react-query';
+import DOMPurify from 'dompurify';
+import EasyMDE, { type default as SimpleMde } from 'easymde';
+import 'easymde/dist/easymde.min.css';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import SimpleMDE from 'react-simplemde-editor';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { useApi } from '../../contexts/ApiContext';
+import { ModelInformationDict } from '../render/ModelType';
+
+/*
+ * A text editor component for editing notes against a model type and instance.
+ * Uses the react-simple-mde editor: https://github.com/RIP21/react-simplemde-editor
+ *
+ * TODO:
+ * - Disable editing by default when the component is launched - user can click an "edit" button to enable
+ * - Allow image resizing in the future (requires back-end validation changes))
+ * - Allow user to configure the editor toolbar (i.e. hide some buttons if they don't want them)
+ */
+export default function NotesEditor({
+  modelType,
+  modelId,
+  editable
+}: Readonly<{
+  modelType: ModelType;
+  modelId: number;
+  editable?: boolean;
+}>) {
+  const api = useApi();
+  // In addition to the editable prop, we also need to check if the user has "enabled" editing
+  const [editing, setEditing] = useState<boolean>(false);
+
+  const [markdown, setMarkdown] = useState<string>('');
+
+  useEffect(() => {
+    // Initially disable editing mode on load
+    setEditing(false);
+  }, [editable, modelId, modelType]);
+
+  const noteUrl: string = useMemo(() => {
+    const modelInfo = ModelInformationDict[modelType];
+    return apiUrl(modelInfo.api_endpoint, modelId);
+  }, [modelType, modelId]);
+
+  // Image upload handler
+  const imageUploadHandler = useCallback(
+    (
+      file: File,
+      onSuccess: (url: string) => void,
+      onError: (error: string) => void
+    ) => {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      formData.append('model_type', modelType);
+      formData.append('model_id', modelId.toString());
+
+      api
+        .post(apiUrl(ApiEndpoints.notes_image_upload), formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .catch((error) => {
+          onError(error.message);
+          notifications.hide('notes');
+          notifications.show({
+            id: 'notes',
+            title: t`Error`,
+            message: t`Image upload failed`,
+            color: 'red'
+          });
+        })
+        .then((response: any) => {
+          onSuccess(response.data.image);
+          notifications.hide('notes');
+          notifications.show({
+            id: 'notes',
+            title: t`Success`,
+            message: t`Image uploaded successfully`,
+            color: 'green'
+          });
+        });
+    },
+    [modelType, modelId]
+  );
+
+  const dataQuery = useQuery({
+    queryKey: ['notes-editor', noteUrl, modelType, modelId],
+    queryFn: () =>
+      api
+        .get(noteUrl)
+        .then((response) => response.data?.notes ?? '')
+        .catch(() => ''),
+    enabled: true
+  });
+
+  // Update internal markdown data when the query data changes
+  useEffect(() => {
+    setMarkdown(dataQuery.data ?? '');
+  }, [dataQuery.data]);
+
+  // Callback to save notes to the server
+  const saveNotes = useCallback(
+    (markdown: string) => {
+      if (!noteUrl) {
+        return;
+      }
+
+      api
+        .patch(noteUrl, { notes: markdown })
+        .then(() => {
+          notifications.hide('notes');
+          notifications.show({
+            title: t`Success`,
+            message: t`Notes saved successfully`,
+            color: 'green',
+            id: 'notes',
+            autoClose: 2000
+          });
+        })
+        .catch((error) => {
+          notifications.hide('notes');
+
+          const msg =
+            error?.response?.data?.non_field_errors[0] ??
+            t`Failed to save notes`;
+
+          notifications.show({
+            title: t`Error Saving Notes`,
+            message: msg,
+            color: 'red',
+            id: 'notes'
+          });
+        });
+    },
+    [api, noteUrl]
+  );
+
+  const editorOptions: SimpleMde.Options = useMemo(() => {
+    const icons: any[] = [];
+
+    if (editing) {
+      icons.push({
+        name: 'save-notes',
+        action: (editor: SimpleMde) => {
+          saveNotes(editor.value());
+        },
+        className: 'fa fa-save',
+        title: t`Save Notes`
+      });
+
+      icons.push('|');
+
+      icons.push('heading-1', 'heading-2', 'heading-3', '|'); // Headings
+      icons.push('bold', 'italic', 'strikethrough', '|'); // Text styles
+      icons.push('unordered-list', 'ordered-list', 'code', 'quote', '|'); // Text formatting
+      icons.push('table', 'link', 'image', '|');
+      icons.push('horizontal-rule', '|', 'guide'); // Misc
+
+      icons.push('|', 'undo', 'redo'); // Undo/Redo
+
+      icons.push('|');
+
+      icons.push({
+        name: 'edit-disabled',
+        action: () => setEditing(false),
+        className: 'fa fa-times',
+        title: t`Close Editor`
+      });
+    } else if (editable) {
+      icons.push({
+        name: 'edit-enabled',
+        action: () => setEditing(true),
+        className: 'fa fa-edit',
+        title: t`Enable Editing`
+      });
+    }
+
+    return {
+      toolbar: icons,
+      uploadImage: true,
+      imagePathAbsolute: true,
+      imageUploadFunction: imageUploadHandler,
+      renderingConfig: {
+        sanitizerFunction: (html: string) => {
+          return DOMPurify.sanitize(html);
+        }
+      },
+      sideBySideFullscreen: false,
+      shortcuts: {},
+      spellChecker: false
+    };
+  }, [editable, editing]);
+
+  const [mdeInstance, setMdeInstance] = useState<SimpleMde | null>(null);
+
+  useEffect(() => {
+    if (mdeInstance) {
+      const previewMode = !(editable && editing);
+
+      mdeInstance.codemirror?.setOption('readOnly', previewMode);
+
+      // Ensure the preview mode is toggled if required
+      if (mdeInstance.isPreviewActive() != previewMode) {
+        const sibling =
+          mdeInstance?.codemirror.getWrapperElement()?.nextSibling;
+
+        if (sibling != null) {
+          EasyMDE.togglePreview(mdeInstance);
+        }
+      }
+    }
+  }, [mdeInstance, editable, editing]);
+
+  return (
+    <SimpleMDE
+      autoFocus
+      getMdeInstance={(instance: SimpleMde) => setMdeInstance(instance)}
+      onChange={(value: string) => {
+        setMarkdown(value);
+      }}
+      options={editorOptions}
+      value={markdown}
+    />
+  );
+}