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

Updated document upload component IO-526

Browse Source
This commit is contained in:
Patrick Fic
2021-02-03 14:12:59 -08:00
parent 0b849b6a91
commit 772259f495
2 changed files with 89 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/documents-upload/documents-upload.component.jsx
View File

@@ -15,6 +15,7 @@ const mapStateToProps = createStructuredSelector({
});
export function DocumentsUploadComponent({
children,
currentUser,
bodyshop,
jobId,
@@ -23,7 +24,7 @@ export function DocumentsUploadComponent({
callbackAfterUpload,
}) {
return (
<Upload
<Upload.Dragger
multiple={true}
customRequest={(ev) =>
handleUpload(ev, {
@@ -36,12 +37,28 @@ export function DocumentsUploadComponent({
})
}
accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
showUploadList={false}
// showUploadList={false}
>
<Button type="primary">
<UploadOutlined />
</Button>
</Upload>
{
// <Button type="primary">
// <UploadOutlined />
// </Button>
}
{children || (
<>
<p className="ant-upload-drag-icon">
<UploadOutlined />
</p>
<p className="ant-upload-text">
Click or drag file to this area to upload
</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from
uploading company data or other band files
</p>
</>
)}
</Upload.Dragger>
);
}
export default connect(mapStateToProps, null)(DocumentsUploadComponent);

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

@@ -66,67 +66,77 @@ function JobsDocumentsComponent({
return (
<div className="clearfix">
<DocumentsUploadComponent
jobId={jobId}
billId={billId}
callbackAfterUpload={billsCallback || refetch}
tagsArray={["test"]}
/>
<Space>
<JobsDocumentsGallerySelectAllComponent
galleryImages={galleryImages}
setGalleryImages={setgalleryImages}
/>
<JobsDocumentsDownloadButton galleryImages={galleryImages} />
<JobsDocumentsDeleteButton
galleryImages={galleryImages}
deletionCallback={billsCallback || refetch}
/>
</Space>
<div>
<Space>
<JobsDocumentsGallerySelectAllComponent
galleryImages={galleryImages}
setGalleryImages={setgalleryImages}
/>
<JobsDocumentsDownloadButton galleryImages={galleryImages} />
<JobsDocumentsDeleteButton
galleryImages={galleryImages}
deletionCallback={billsCallback || refetch}
/>
</Space>
</div>
<div style={{ marginTop: "2rem" }}>
<Card title={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
),
});
}}
/>
<DocumentsUploadComponent
jobId={jobId}
billId={billId}
callbackAfterUpload={billsCallback || refetch}
tagsArray={["test"]}
>
<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
),
});
}}
/>
</DocumentsUploadComponent>
</Card>
<Card title={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
),
});
}}
/>
<DocumentsUploadComponent
jobId={jobId}
billId={billId}
callbackAfterUpload={billsCallback || refetch}
tagsArray={["test"]}
>
<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
),
});
}}
/>
</DocumentsUploadComponent>
</Card>
</div>
</div>