admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-3431 Jobs Image Gallery

Browse Source 
Signed-off-by: Allan Carr <allan@imexsystems.ca>
This commit is contained in:
Allan Carr
2026-01-02 14:51:13 -08:00
parent 2eca085284
commit 4a22aeca46
4 changed files with 154 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>