74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { SyncOutlined } from "@ant-design/icons";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { selectAllMedia } from "../../redux/media/media.selectors";
|
|
import { getJobMedia } from "../../redux/media/media.actions";
|
|
import { Button, Card, Space } from "antd";
|
|
import { useTranslation } from "react-i18next";
|
|
import Gallery from "react-grid-gallery";
|
|
import DocumentsLocalUploadComponent from "../documents-local-upload/documents-local-upload.component";
|
|
import { Link } from "react-router-dom";
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
allMedia: selectAllMedia,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
getJobMedia: (id) => dispatch(getJobMedia(id)),
|
|
});
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(JobsDocumentsLocalGallery);
|
|
|
|
export function JobsDocumentsLocalGallery({
|
|
bodyshop,
|
|
getJobMedia,
|
|
allMedia,
|
|
job,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
useEffect(() => {
|
|
if (job) {
|
|
getJobMedia(job.id);
|
|
}
|
|
}, [job, getJobMedia]);
|
|
|
|
return (
|
|
<div>
|
|
<Space wrap>
|
|
<Button
|
|
onClick={() => {
|
|
getJobMedia(job.id);
|
|
}}
|
|
>
|
|
<SyncOutlined />
|
|
</Button>
|
|
<a
|
|
href={`imexmedia://${bodyshop.localmediaservernetwork}/Jobs/${job.id}`}
|
|
>
|
|
<Button>{t("documents.labels.openinexplorer")}</Button>
|
|
</a>
|
|
</Space>
|
|
<Card>
|
|
<DocumentsLocalUploadComponent job={job} />
|
|
</Card>
|
|
<Card title={t("jobs.labels.documents-images")}>
|
|
<Gallery
|
|
images={(allMedia && allMedia[job.id]) || []}
|
|
enableImageSelection={false}
|
|
backdropClosesModal={true}
|
|
onClickImage={(props) => {
|
|
window.open(
|
|
props.target.src,
|
|
"_blank",
|
|
"toolbar=0,location=0,menubar=0"
|
|
);
|
|
}}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|