@inventreedb/ui 0.0.1 → 0.0.2

package/src/components/details/DetailsImage.tsx

@@ -1,462 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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}
-    />
-  );
-}