IO-3431 Jobs Image Gallery

Signed-off-by: Allan Carr <allan@imexsystems.ca>

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

@@ -1,7 +1,6 @@
-import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
+import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Alert, Button, Card, Col, Row, Space } from "antd";
 import { useEffect, useState } from "react";
-import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -14,6 +13,7 @@ import JobsDocumentsLocalDeleteButton from "./jobs-documents-local-gallery.delet
 import JobsLocalGalleryDownloadButton from "./jobs-documents-local-gallery.download";
 import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
 import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-gallery.selectall.component";
+import LocalMediaGrid from "./local-media-grid.component";
 
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
@@ -132,54 +132,34 @@ export function JobsDocumentsLocalGallery({
         </Col>
         <Col span={24}>
           <Card title={t("jobs.labels.documents-images")}>
-            <Gallery
+            {optimized && (
+              <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
+            )}
+            <LocalMediaGrid
               images={jobMedia.images}
-              onSelect={(index, image) => {
-                toggleMediaSelected({ jobid: job.id, filename: image.filename });
-              }}
-              {...(optimized && {
-                customControls: [
-                  <Alert
-                    key="optimizedImageALert"
-                    style={{ margin: "4px" }}
-                    message={t("documents.labels.optimizedimage")}
-                    type="success"
-                  />
-                ]
-              })}
               onClick={(index) => {
                 setModalState({ open: true, index: index });
-                // const media = allMedia[job.id].find(
-                //   (m) => m.optimized === item.src
-                // );
-
-                // window.open(
-                //   media ? media.fullsize : item.fullsize,
-                //   "_blank",
-                //   "toolbar=0,location=0,menubar=0"
-                // );
               }}
+              onToggle={(index) => {
+                toggleMediaSelected({ jobid: job.id, filename: jobMedia.images[index].filename });
+              }}
+              minColumns={4}
+              expandHeight={true}
             />
           </Card>
         </Col>
         <Col span={24}>
           <Card title={t("jobs.labels.documents-other")}>
-            <Gallery
+            <LocalMediaGrid
               images={jobMedia.other}
-              thumbnailStyle={() => {
-                return {
-                  backgroundImage: <FileExcelFilled />,
-                  height: "100%",
-                  width: "100%",
-                  cursor: "pointer"
-                };
-              }}
               onClick={(index) => {
                 window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
               }}
-              onSelect={(index, image) => {
-                toggleMediaSelected({ jobid: job.id, filename: image.filename });
+              onToggle={(index) => {
+                toggleMediaSelected({ jobid: job.id, filename: jobMedia.other[index].filename });
               }}
+              minColumns={4}
+              expandHeight={true}
             />
           </Card>
         </Col>

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

@@ -6,15 +6,18 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
  * Props:
  *  - images: Array<{ src, fullsize, filename?, isSelected? }>
  *  - onToggle(index)
+ *  - onClick(index) optional for viewing
  */
 export function LocalMediaGrid({
   images,
   onToggle,
+  onClick,
   thumbSize = 100,
   gap = 8,
   minColumns = 3,
   maxColumns = 12,
-  context = "default"
+  context = "default",
+  expandHeight = false
 }) {
   const containerRef = useRef(null);
   const [cols, setCols] = useState(() => {
@@ -114,8 +117,7 @@ export function LocalMediaGrid({
         display: "grid",
         gridTemplateColumns,
         gap,
-        maxHeight: 420,
-        overflowY: "auto",
+        ...(expandHeight ? {} : { maxHeight: 420, overflowY: "auto" }),
         overflowX: "hidden",
         padding: 4,
         justifyContent: justifyMode,
@@ -131,7 +133,7 @@ export function LocalMediaGrid({
           role="listitem"
           tabIndex={0}
           aria-label={img.filename || `image ${idx + 1}`}
-          onClick={() => onToggle(idx)}
+          onClick={() => onClick ? onClick(idx) : onToggle(idx)}
           onKeyDown={(e) => handleKeyDown(e, idx)}
           style={{
             position: "relative",
@@ -197,6 +199,23 @@ export function LocalMediaGrid({
               }}
             />
           )}
+          {onClick && (
+            <input
+              type="checkbox"
+              checked={img.isSelected}
+              onChange={(e) => {
+                e.stopPropagation();
+                onToggle(idx);
+              }}
+              onClick={(e) => e.stopPropagation()}
+              style={{
+                position: 'absolute',
+                top: 5,
+                right: 5,
+                zIndex: 2
+              }}
+            />
+          )}
         </div>
       ))}
       {/* No placeholders needed; layout uses auto-fit for non-chat or fixed columns for chat */}