134 lines
4.4 KiB
JavaScript
134 lines
4.4 KiB
JavaScript
import { Collapse, Space } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import Gallery from "react-grid-gallery";
|
|
import { useTranslation } from "react-i18next";
|
|
import DocumentsUploadComponent from "../documents-upload/documents-upload.component";
|
|
import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
|
|
import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
|
|
|
|
function JobsDocumentsComponent({
|
|
data,
|
|
jobId,
|
|
refetch,
|
|
billId,
|
|
billsCallback,
|
|
}) {
|
|
const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
|
|
const { t } = useTranslation();
|
|
useEffect(() => {
|
|
let documents = data.reduce(
|
|
(acc, value) => {
|
|
if (value.type.includes("image")) {
|
|
acc.images.push({
|
|
src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
|
|
thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
|
|
thumbnailHeight: 225,
|
|
thumbnailWidth: 225,
|
|
isSelected: false,
|
|
key: value.key,
|
|
id: value.id,
|
|
});
|
|
} else {
|
|
acc.other.push({
|
|
src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
|
|
thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
|
|
tags: [
|
|
{ value: "PDF", title: t("documents.labels.doctype") },
|
|
...(value.bill
|
|
? [
|
|
{
|
|
value: value.bill.vendor.name,
|
|
title: t("vendors.fields.name"),
|
|
},
|
|
{ value: value.bill.date, title: t("bills.fields.date") },
|
|
{
|
|
value: value.bill.invoice_number,
|
|
title: t("bills.fields.invoice_number"),
|
|
},
|
|
]
|
|
: []),
|
|
],
|
|
thumbnailHeight: 225,
|
|
thumbnailWidth: 225,
|
|
isSelected: false,
|
|
key: value.key,
|
|
id: value.id,
|
|
});
|
|
}
|
|
|
|
return acc;
|
|
},
|
|
{ images: [], other: [] }
|
|
);
|
|
setgalleryImages(documents);
|
|
}, [data, setgalleryImages, t]);
|
|
|
|
return (
|
|
<div className="clearfix">
|
|
<Space>
|
|
<DocumentsUploadComponent
|
|
jobId={jobId}
|
|
billId={billId}
|
|
callbackAfterUpload={billsCallback || refetch}
|
|
tagsArray={["test"]}
|
|
/>
|
|
<JobsDocumentsDownloadButton galleryImages={galleryImages} />
|
|
<JobsDocumentsDeleteButton
|
|
galleryImages={galleryImages}
|
|
deletionCallback={billsCallback || refetch}
|
|
/>
|
|
</Space>
|
|
<Collapse
|
|
style={{ marginTop: "2rem" }}
|
|
defaultActiveKey={["images", "other"]}
|
|
bordered="false"
|
|
>
|
|
<Collapse.Panel key="images" header={t("jobs.labels.documents-images")}>
|
|
<Gallery
|
|
images={galleryImages.images}
|
|
backdropClosesModal={true}
|
|
onClickImage={(props) => {
|
|
window.open(
|
|
props.target.src,
|
|
"_blank",
|
|
"toolbar=0,location=0,menubar=0"
|
|
);
|
|
}}
|
|
onSelectImage={(index, image) => {
|
|
setgalleryImages({
|
|
...galleryImages,
|
|
images: galleryImages.images.map((g, idx) =>
|
|
index === idx ? { ...g, isSelected: !g.isSelected } : g
|
|
),
|
|
});
|
|
}}
|
|
/>
|
|
</Collapse.Panel>
|
|
<Collapse.Panel key="other" header={t("jobs.labels.documents-other")}>
|
|
<Gallery
|
|
images={galleryImages.other}
|
|
backdropClosesModal={true}
|
|
enableLightbox={false}
|
|
onClickThumbnail={(index) => {
|
|
window.open(
|
|
galleryImages.other[index].src,
|
|
"_blank",
|
|
"toolbar=0,location=0,menubar=0"
|
|
);
|
|
}}
|
|
onSelectImage={(index) => {
|
|
setgalleryImages({
|
|
...galleryImages,
|
|
other: galleryImages.other.map((g, idx) =>
|
|
index === idx ? { ...g, isSelected: !g.isSelected } : g
|
|
),
|
|
});
|
|
}}
|
|
/>
|
|
</Collapse.Panel>
|
|
</Collapse>
|
|
</div>
|
|
);
|
|
}
|
|
export default JobsDocumentsComponent;
|