[PUI] download image (#8230)

* Add placeholder for download image button * Implement image download functionality * Increase timeout * Show timeout notification * Icon cleanup
inventree · Oct 6, 2024 · a323bf0 · a323bf0
1 parent c914d1c
commit a323bf0
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 26 deletions.
diff --git a/src/frontend/src/components/details/DetailsImage.tsx b/src/frontend/src/components/details/DetailsImage.tsx
@@ -19,6 +19,8 @@ import { api } from '../../App';
 import { UserRoles } from '../../enums/Roles';
 import { cancelEvent } from '../../functions/events';
 import { InvenTreeIcon } from '../../functions/icons';
+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';
@@ -42,11 +44,13 @@ export type DetailImageProps = {
  * 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;
 };
@@ -245,15 +249,19 @@ function ImageActionButtons({
  apiPath,
  hasImage,
  pk,
- setImage
+ setImage,
+ downloadImage
 }: Readonly<{
  actions?: DetailImageButtonProps;
  visible: boolean;
  apiPath: string;
  hasImage: boolean;
  pk: string;
  setImage: (image: string) => void;
+ downloadImage: () => void;
 }>) {
+ const globalSettings = useGlobalSettingsState();
+
  return (
  <>
  {visible && (
@@ -284,6 +292,25 @@ function ImageActionButtons({
  }}
  />
  )}
+ {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={
@@ -341,6 +368,21 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
 
  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 ||
@@ -359,27 +401,33 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
  };
 
  return (
- <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1} pos="relative">
- <>
- <ApiImage
- src={img}
- mah={IMAGE_DIMENSION}
- maw={IMAGE_DIMENSION}
- onClick={expandImage}
- />
- {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 ? true : false}
- pk={props.pk}
- setImage={setAndRefresh}
- />
- </Overlay>
- )}
- </>
- </AspectRatio>
+ <>
+ {downloadImage.modal}
+ <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1} pos="relative">
+ <>
+ <ApiImage
+ src={img}
+ mah={IMAGE_DIMENSION}
+ maw={IMAGE_DIMENSION}
+ onClick={expandImage}
+ />
+ {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 ? true : false}
+ pk={props.pk}
+ setImage={setAndRefresh}
+ downloadImage={downloadImage.open}
+ />
+ </Overlay>
+ )}
+ </>
+ </AspectRatio>
+ </>
  );
 }
diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
@@ -33,7 +33,10 @@ import {
  extractAvailableFields,
  mapFields
 } from '../../functions/forms';
-import { invalidResponse } from '../../functions/notifications';
+import {
+ invalidResponse,
+ showTimeoutNotification
+} from '../../functions/notifications';
 import { getDetailUrl } from '../../functions/urls';
 import { TableState } from '../../hooks/UseTable';
 import { PathParams } from '../../states/ApiState';
@@ -540,7 +543,7 @@ export function ApiForm({
  break;
  }
  } else {
- invalidResponse(0);
+ showTimeoutNotification();
  props.onFormError?.();
  }
 

diff --git a/src/frontend/src/functions/icons.tsx b/src/frontend/src/functions/icons.tsx
@@ -31,6 +31,7 @@ import {
  IconEdit,
  IconExclamationCircle,
  IconExternalLink,
+ IconFileDownload,
  IconFileUpload,
  IconFlag,
  IconFlagShare,
@@ -143,6 +144,7 @@ const icons = {
  notes: IconNotes,
  photo: IconPhoto,
  upload: IconFileUpload,
+ download: IconFileDownload,
  reject: IconX,
  refresh: IconRefresh,
  select_image: IconGridDots,

diff --git a/src/frontend/src/functions/notifications.tsx b/src/frontend/src/functions/notifications.tsx
@@ -39,6 +39,17 @@ export function invalidResponse(returnCode: number) {
  });
 }
 
+/**
+ * Display a notification on timeout
+ */
+export function showTimeoutNotification() {
+ notifications.show({
+ title: t`Timeout`,
+ message: t`The request timed out`,
+ color: 'red'
+ });
+}
+
 /*
  * Display a login / logout notification message.
  * Any existing login notification(s) will be hidden.

diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -153,6 +153,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
  refresh={refreshInstance}
  imageActions={{
  uploadFile: true,
+ downloadImage: true,
  deleteFile: true
  }}
  />

diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
@@ -511,6 +511,7 @@ export default function PartDetail() {
  appRole={UserRoles.part}
  imageActions={{
  selectExisting: true,
+ downloadImage: true,
  uploadFile: true,
  deleteFile: true
  }}
@@ -531,7 +532,7 @@ export default function PartDetail() {
  ) : (
  <Skeleton />
  );
- }, [part, instanceQuery]);
+ }, [globalSettings, part, instanceQuery]);
 
  // Part data panels (recalculate when part data changes)
  const partPanels: PanelType[] = useMemo(() => {

diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -95,6 +95,7 @@ export default function ReturnOrderDetail() {
  type: 'text',
  name: 'customer_reference',
  label: t`Customer Reference`,
+ icon: 'customer',
  copy: true,
  hidden: !order.customer_reference
  },