107 lines
3.2 KiB
JavaScript
107 lines
3.2 KiB
JavaScript
import axios from "axios";
|
|
import React, { useEffect, useState } from "react";
|
|
import Gallery from "react-grid-gallery";
|
|
//import { Document, Page, pdfjs } from "react-pdf";
|
|
import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
|
|
//import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
import { Collapse } from "antd";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
//pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.min.js`;
|
|
|
|
function JobsDocumentsComponent({ data, jobId, refetch }) {
|
|
const [galleryImages, setgalleryImages] = useState([]);
|
|
const [pdfDocuments, setPdfDocuments] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setgalleryImages(
|
|
data
|
|
.filter(item => item.thumb_url !== "application/pdf")
|
|
.reduce((acc, value) => {
|
|
acc.push({
|
|
src: value.url,
|
|
thumbnail: value.thumb_url,
|
|
thumbnailHeight: 150,
|
|
thumbnailWidth: 150,
|
|
isSelected: false
|
|
});
|
|
return acc;
|
|
}, [])
|
|
);
|
|
}, [data, setgalleryImages]);
|
|
|
|
useEffect(() => {
|
|
setPdfDocuments(
|
|
data
|
|
.filter(item => item.thumb_url === "application/pdf")
|
|
.reduce((acc, value) => {
|
|
acc.push({
|
|
src: value.url,
|
|
thumbnail: value.thumb_url,
|
|
thumbnailHeight: 150,
|
|
thumbnailWidth: 150,
|
|
isSelected: false
|
|
});
|
|
return acc;
|
|
}, [])
|
|
);
|
|
}, [data, setPdfDocuments]);
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="clearfix">
|
|
<DocumentsUploadContainer jobId={jobId} callbackAfterUpload={refetch} />
|
|
<button
|
|
onClick={() => {
|
|
axios
|
|
.get("/downloadImages", {
|
|
images: galleryImages.map(i => i.src)
|
|
})
|
|
.then(r => console.log("r", r));
|
|
}}
|
|
>
|
|
Dl
|
|
</button>
|
|
|
|
<Collapse defaultActiveKey="photos">
|
|
<Collapse.Panel key="t" header="t">
|
|
<Gallery
|
|
images={pdfDocuments}
|
|
onSelectImage={(index, image) => {
|
|
setPdfDocuments(
|
|
pdfDocuments.map((g, idx) =>
|
|
index === idx ? { ...g, isSelected: !g.isSelected } : g
|
|
)
|
|
);
|
|
}}
|
|
/>
|
|
</Collapse.Panel>
|
|
<Collapse.Panel key="photos" header={t("documents.labels.photos")}>
|
|
<Gallery
|
|
images={galleryImages}
|
|
onSelectImage={(index, image) => {
|
|
setgalleryImages(
|
|
galleryImages.map((g, idx) =>
|
|
index === idx ? { ...g, isSelected: !g.isSelected } : g
|
|
)
|
|
);
|
|
}}
|
|
></Gallery>
|
|
</Collapse.Panel>
|
|
{
|
|
// <Collapse.Panel
|
|
// key="documents"
|
|
// header={t("documents.labels.documents")}
|
|
// >
|
|
// {pdfDocuments.map((doc, idx) => (
|
|
// <Document key={idx} loading={<LoadingSpinner />} file={doc.src}>
|
|
// <Page pageIndex={0} />
|
|
// </Document>
|
|
// ))}
|
|
// </Collapse.Panel>
|
|
}
|
|
</Collapse>
|
|
</div>
|
|
);
|
|
}
|
|
export default JobsDocumentsComponent;
|