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

Added separate documents display for non-images. BOD-420

Browse Source
This commit is contained in:
Patrick Fic
2020-10-02 13:35:29 -07:00
parent e2c3d7f4de
commit 1dea9deca3
10 changed files with 232 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
View File

@@ -1,6 +1,7 @@
import { Space } from "antd";
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";
@@ -12,27 +13,55 @@ function JobsDocumentsComponent({
billId,
billsCallback,
}) {
const [galleryImages, setgalleryImages] = useState([]);
const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
const { t } = useTranslation();
useEffect(() => {
setgalleryImages(
data.reduce((acc, value) => {
acc.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.type.includes("pdf")
? [{ value: "PDF", title: "PDF" }]
: [],
thumbnailHeight: 200,
thumbnailWidth: 200,
isSelected: false,
key: value.key,
id: value.id,
});
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: [] }
);
}, [data, setgalleryImages]);
setgalleryImages(documents);
}, [data, setgalleryImages, t]);
return (
<div className="clearfix">
@@ -49,17 +78,55 @@ function JobsDocumentsComponent({
deletionCallback={billsCallback || refetch}
/>
</Space>
<Gallery
images={galleryImages}
onSelectImage={(index, image) => {
setgalleryImages(
galleryImages.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
)
);
}}
/>
<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>
);
}