feature/IO-3456-Broken-Image - Fix issue

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx

@@ -35,14 +35,16 @@ export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier,
     ...galleryImages.other.filter((image) => image.isSelected)
   ];
 
-  const downloadProgress = ({ loaded }) => {
-    setDownload((currentDownloadState) => ({
-      downloaded: loaded ?? 0,
-      speed: (loaded ?? 0) - (currentDownloadState?.downloaded ?? 0)
-    }));
-  };
+  function downloadProgress(progressEvent) {
+    setDownload((currentDownloadState) => {
+      return {
+        downloaded: progressEvent.loaded || 0,
+        speed: (progressEvent.loaded || 0) - ((currentDownloadState && currentDownloadState.downloaded) || 0)
+      };
+    });
+  }
 
-  const standardMediaDownload = (bufferData) => {
+  function standardMediaDownload(bufferData) {
     try {
       const a = document.createElement("a");
       const url = window.URL.createObjectURL(new Blob([bufferData]));
@@ -53,26 +55,29 @@ export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier,
       setLoading(false);
       setDownload(null);
     }
-  };
+  }
 
   const handleDownload = async () => {
     logImEXEvent("jobs_documents_download");
     setLoading(true);
     try {
-      const { data } = await axios({
+      const response = await axios({
         url: "/media/imgproxy/download",
         method: "POST",
         responseType: "blob",
         data: { jobId, documentids: imagesToDownload.map((_) => _.id) },
         onDownloadProgress: downloadProgress
       });
-      // Use the response data (Blob) to trigger download
-      standardMediaDownload(data);
-    } catch {
-      // handle error (optional)
-    } finally {
+
       setLoading(false);
       setDownload(null);
+
+      // Use the response data (Blob) to trigger download
+      standardMediaDownload(response.data);
+    } catch {
+      setLoading(false);
+      setDownload(null);
+      // handle error (optional)
     }
   };
 

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx

@@ -76,14 +76,14 @@ function JobsDocumentsImgproxyComponent({
               <SyncOutlined />
             </Button>
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
-            {!billId && (
-              <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
-            )}
             <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} jobId={jobId} />
             <JobsDocumentsDeleteButton
               galleryImages={galleryImages}
               deletionCallback={billsCallback || fetchThumbnails || refetch}
             />
+            {!billId && (
+              <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
+            )}
           </Space>
         </Col>
         {!hasMediaAccess && (

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.delete.component.jsx

@@ -67,7 +67,7 @@ export default function JobsDocumentsImgproxyDeleteButton({ galleryImages, delet
       okButtonProps={{ danger: true }}
       cancelText={t("general.actions.cancel")}
     >
-      <Button danger disabled={imagesToDelete.length < 1} loading={loading}>
+      <Button disabled={imagesToDelete.length < 1} loading={loading}>
         {t("documents.actions.delete")}
       </Button>
     </Popconfirm>

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -107,8 +107,8 @@ export function JobsDocumentsLocalGallery({
             <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
               <Button>{t("documents.labels.openinexplorer")}</Button>
             </a>
-            <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
             <JobsDocumentsLocalGalleryReassign jobid={job.id} />
+            <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
             <JobsLocalGalleryDownloadButton job={job} />
             <JobsDocumentsLocalDeleteButton jobid={job.id} />
           </Space>

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.delete.component.jsx

@@ -28,8 +28,6 @@ export function JobsDocumentsLocalDeleteButton({ bodyshop, getJobMedia, allMedia
 
   const [loading, setLoading] = useState(false);
 
-  const imagesToDelete = (allMedia?.[jobid] || []).filter((i) => i.isSelected);
-
   const handleDelete = async () => {
     logImEXEvent("job_documents_delete");
     setLoading(true);
@@ -38,7 +36,7 @@ export function JobsDocumentsLocalDeleteButton({ bodyshop, getJobMedia, allMedia
       `${bodyshop.localmediaserverhttp}/jobs/delete`,
       {
         jobid: jobid,
-        files: imagesToDelete.map((i) => i.filename)
+        files: (allMedia?.[jobid] || []).filter((i) => i.isSelected).map((i) => i.filename)
       },
       { headers: { ims_token: bodyshop.localmediatoken } }
     );
@@ -62,17 +60,14 @@ export function JobsDocumentsLocalDeleteButton({ bodyshop, getJobMedia, allMedia
 
   return (
     <Popconfirm
-      disabled={imagesToDelete.length < 1}
       icon={<QuestionCircleOutlined style={{ color: "red" }} />}
       onConfirm={handleDelete}
       title={t("documents.labels.confirmdelete")}
       okText={t("general.actions.delete")}
-      okButtonProps={{ danger: true }}
+      okButtonProps={{ type: "danger" }}
       cancelText={t("general.actions.cancel")}
     >
-      <Button danger disabled={imagesToDelete.length < 1} loading={loading}>
-        {t("documents.actions.delete")}
-      </Button>
+      <Button loading={loading}>{t("documents.actions.delete")}</Button>
     </Popconfirm>
   );
 }

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.download.jsx

@@ -1,8 +1,8 @@
-import { Button, Space } from "antd";
+import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import cleanAxios from "../../utils/CleanAxios";
-import formatBytes from "../../utils/formatbytes";
+
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectAllMedia } from "../../redux/media/media.selectors";
@@ -19,63 +19,45 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobsLocalGalleryDown
 
 export function JobsLocalGalleryDownloadButton({ bodyshop, allMedia, job }) {
   const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-  const [download, setDownload] = useState(false);
+  const [download, setDownload] = useState(null);
 
-  const imagesToDownload = (allMedia?.[job.id] || []).filter((i) => i.isSelected);
-
-  const downloadProgress = ({ loaded }) => {
-    setDownload((currentDownloadState) => ({
-      downloaded: loaded || 0,
-      speed: (loaded || 0) - (currentDownloadState?.downloaded || 0)
-    }));
-  };
-
-  const standardMediaDownload = (bufferData, filename) => {
-    try {
-      const a = document.createElement("a");
-      const url = window.URL.createObjectURL(new Blob([bufferData]));
-      a.href = url;
-      a.download = `${filename}.zip`;
-      a.click();
-    } catch {
-      setLoading(false);
-      setDownload(null);
-    }
-  };
+  function downloadProgress(progressEvent) {
+    setDownload((currentDownloadState) => {
+      return {
+        downloaded: progressEvent.loaded || 0,
+        speed: (progressEvent.loaded || 0) - (currentDownloadState?.downloaded || 0)
+      };
+    });
+  }
 
   const handleDownload = async () => {
-    const { localmediaserverhttp, localmediatoken } = bodyshop;
-    const { id, ro_number } = job;
-    setLoading(true);
-    try {
-      const response = await cleanAxios.post(
-        `${localmediaserverhttp}/jobs/download`,
-        {
-          jobid: id,
-          files: imagesToDownload.map((i) => i.filename)
-        },
-        {
-          headers: { ims_token: localmediatoken },
-          responseType: "arraybuffer",
-          onDownloadProgress: downloadProgress
-        }
-      );
-      standardMediaDownload(response.data, ro_number);
-    } catch {
-      // handle error (optional)
-    } finally {
-      setLoading(false);
-      setDownload(null);
-    }
+    const theDownloadedZip = await cleanAxios.post(
+      `${bodyshop.localmediaserverhttp}/jobs/download`,
+      {
+        jobid: job.id,
+        files: (allMedia?.[job.id] || []).filter((i) => i.isSelected).map((i) => i.filename)
+      },
+      {
+        headers: { ims_token: bodyshop.localmediatoken },
+        responseType: "arraybuffer",
+        onDownloadProgress: downloadProgress
+      }
+    );
+    setDownload(null);
+    standardMediaDownload(theDownloadedZip.data, job.ro_number);
   };
 
   return (
-    <Button disabled={imagesToDownload < 1} loading={download || loading} onClick={handleDownload}>
-      <Space>
-        <span>{t("documents.actions.download")}</span>
-        {download && <span>{`(${formatBytes(download.downloaded)} @ ${formatBytes(download.speed)} / second)`}</span>}
-      </Space>
+    <Button loading={!!download} onClick={handleDownload}>
+      {t("documents.actions.download")}
     </Button>
   );
 }
+
+function standardMediaDownload(bufferData, filename) {
+  const a = document.createElement("a");
+  const url = window.URL.createObjectURL(new Blob([bufferData]));
+  a.href = url;
+  a.download = `${filename}.zip`;
+  a.click();
+}

server/integrations/partsManagement/endpoints/partsManagementProvisioning.js

@@ -134,13 +134,16 @@ const insertUserAssociation = async (uid, email, shopId) => {
 
 /**
  * PATCH handler for updating bodyshop fields.
- * Allows patching: shopname, address1, address2, city, state, zip_post, country, email, timezone, phone, logo_img_path
+ * Allows patching: shopname, address1, address2, city, state, zip_post, country, email, timezone, phone
+ * Also allows updating logo_img_path via a simple logoUrl string, which is expanded to the full object.
  * @param req
  * @param res
  * @returns {Promise<void>}
  */
 const patchPartsManagementProvisioning = async (req, res) => {
   const { id } = req.params;
+
+  // Fields that can be directly patched 1:1
   const allowedFields = [
     "shopname",
     "address1",
@@ -151,31 +154,58 @@ const patchPartsManagementProvisioning = async (req, res) => {
     "country",
     "email",
     "timezone",
-    "phone",
-    "logo_img_path"
+    "phone"
+    // NOTE: logo_img_path is handled separately via logoUrl
   ];
+
   const updateFields = {};
+
+  // Copy over simple scalar fields if present
   for (const field of allowedFields) {
     if (req.body[field] !== undefined) {
       updateFields[field] = req.body[field];
     }
   }
+
+  // Handle logo update via a simple href string, same behavior as provision route
+  if (typeof req.body.logo_img_path === "string") {
+    const trimmed = req.body.logo_img_path.trim();
+    if (trimmed) {
+      updateFields.logo_img_path = {
+        src: trimmed,
+        width: "",
+        height: "",
+        headerMargin: DefaultNewShop.logo_img_path.headerMargin
+      };
+    }
+  }
+
   if (Object.keys(updateFields).length === 0) {
     return res.status(400).json({ error: "No valid fields provided for update." });
   }
+
   // Check that the bodyshop has an external_shop_id before allowing patch
   try {
-    // Fetch the bodyshop by id
     const shopResp = await client.request(
-      `query GetBodyshop($id: uuid!) { bodyshops_by_pk(id: $id) { id external_shop_id } }`,
+      `query GetBodyshop($id: uuid!) {
+        bodyshops_by_pk(id: $id) {
+          id
+          external_shop_id
+        }
+      }`,
       { id }
     );
+
     if (!shopResp.bodyshops_by_pk?.external_shop_id) {
       return res.status(400).json({ error: "Cannot patch: bodyshop does not have an external_shop_id." });
     }
   } catch (err) {
-    return res.status(500).json({ error: "Failed to validate bodyshop external_shop_id.", detail: err });
+    return res.status(500).json({
+      error: "Failed to validate bodyshop external_shop_id.",
+      detail: err
+    });
   }
+
   try {
     const resp = await client.request(UPDATE_BODYSHOP_BY_ID, { id, fields: updateFields });
     if (!resp.update_bodyshops_by_pk) {