IO-2008 Split local media into images and other as per cloudinary for better other support.

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

@@ -1,4 +1,4 @@
-import { SyncOutlined } from "@ant-design/icons";
+import { SyncOutlined, FileExcelFilled } from "@ant-design/icons";
 import { Button, Card, Space } from "antd";
 import React, { useEffect } from "react";
 import Gallery from "react-grid-gallery";
@@ -58,6 +58,24 @@ export function JobsDocumentsLocalGallery({
     }
   }, [job, invoice_number, getJobMedia, getBillMedia]);
 
+  const jobMedia =
+    allMedia && allMedia[job.id]
+      ? allMedia[job.id].reduce(
+          (acc, val) => {
+            if (
+              val.type &&
+              val.type.mime &&
+              val.type.mime.startsWith("image")
+            ) {
+              acc.images.push(val);
+            } else {
+              acc.other.push(val);
+            }
+            return acc;
+          },
+          { images: [], other: [] }
+        )
+      : { images: [], other: [] };
   return (
     <div>
       <Space wrap>
@@ -90,7 +108,7 @@ export function JobsDocumentsLocalGallery({
       </Card>
       <Card title={t("jobs.labels.documents-images")}>
         <Gallery
-          images={(allMedia && allMedia[job.id]) || []}
+          images={jobMedia.images}
           backdropClosesModal={true}
           onSelectImage={(index, image) => {
             toggleMediaSelected({ jobid: job.id, filename: image.filename });
@@ -104,6 +122,31 @@ export function JobsDocumentsLocalGallery({
           }}
         />
       </Card>
+      <Card title={t("jobs.labels.documents-other")}>
+        <Gallery
+          images={jobMedia.other}
+          backdropClosesModal={true}
+          enableLightbox={false}
+          thumbnailStyle={() => {
+            return {
+              backgroundImage: <FileExcelFilled />,
+              height: "100%",
+              width: "100%",
+              cursor: "pointer",
+            };
+          }}
+          onClickThumbnail={(index) => {
+            window.open(
+              jobMedia.other[index].src,
+              "_blank",
+              "toolbar=0,location=0,menubar=0"
+            );
+          }}
+          onSelectImage={(index, image) => {
+            toggleMediaSelected({ jobid: job.id, filename: image.filename });
+          }}
+        />
+      </Card>
     </div>
   );
 }