108 lines
3.2 KiB
JavaScript
108 lines
3.2 KiB
JavaScript
import { SyncOutlined } from "@ant-design/icons";
|
|
import { Button, Card, Space } from "antd";
|
|
import React, { useEffect } from "react";
|
|
import Gallery from "react-grid-gallery";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
getBillMedia,
|
|
getJobMedia,
|
|
toggleMediaSelected,
|
|
} from "../../redux/media/media.actions";
|
|
import { selectAllMedia } from "../../redux/media/media.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { CreateExplorerLinkForJob } from "../../utils/localmedia";
|
|
import DocumentsLocalUploadComponent from "../documents-local-upload/documents-local-upload.component";
|
|
import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
|
|
import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-gallery.selectall.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
allMedia: selectAllMedia,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
getJobMedia: (id) => dispatch(getJobMedia(id)),
|
|
getBillMedia: ({ jobid, invoice_number }) => {
|
|
dispatch(getBillMedia({ jobid, invoice_number }));
|
|
},
|
|
toggleMediaSelected: ({ jobid, filename }) =>
|
|
dispatch(toggleMediaSelected({ jobid, filename })),
|
|
});
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(JobsDocumentsLocalGallery);
|
|
|
|
export function JobsDocumentsLocalGallery({
|
|
bodyshop,
|
|
toggleMediaSelected,
|
|
getJobMedia,
|
|
getBillMedia,
|
|
allMedia,
|
|
job,
|
|
invoice_number,
|
|
vendorid,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
useEffect(() => {
|
|
if (job) {
|
|
if (invoice_number) {
|
|
getBillMedia({ jobid: job.id, invoice_number });
|
|
} else {
|
|
getJobMedia(job.id);
|
|
}
|
|
}
|
|
}, [job, invoice_number, getJobMedia, getBillMedia]);
|
|
|
|
return (
|
|
<div>
|
|
<Space wrap>
|
|
<Button
|
|
onClick={() => {
|
|
if (job) {
|
|
if (invoice_number) {
|
|
getBillMedia({ jobid: job.id, invoice_number });
|
|
} else {
|
|
getJobMedia(job.id);
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<SyncOutlined />
|
|
</Button>
|
|
<a href={CreateExplorerLinkForJob({ jobid: job.id })}>
|
|
<Button>{t("documents.labels.openinexplorer")}</Button>
|
|
</a>
|
|
<JobsDocumentsLocalGalleryReassign jobid={job.id} />
|
|
<JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
|
|
</Space>
|
|
<Card>
|
|
<DocumentsLocalUploadComponent
|
|
job={job}
|
|
invoice_number={invoice_number}
|
|
vendorid={vendorid}
|
|
/>
|
|
</Card>
|
|
<Card title={t("jobs.labels.documents-images")}>
|
|
<Gallery
|
|
images={(allMedia && allMedia[job.id]) || []}
|
|
backdropClosesModal={true}
|
|
onSelectImage={(index, image) => {
|
|
toggleMediaSelected({ jobid: job.id, filename: image.filename });
|
|
}}
|
|
onClickImage={(props) => {
|
|
window.open(
|
|
props.target.src,
|
|
"_blank",
|
|
"toolbar=0,location=0,menubar=0"
|
|
);
|
|
}}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|