Reformat all project files to use the prettier config file.
This commit is contained in:
Patrick Fic
@@ -1,14 +1,14 @@
|
||||
import {FileExcelFilled, SyncOutlined} from "@ant-design/icons";
|
||||
import {Alert, Button, Card, Space} from "antd";
|
||||
import React, {useEffect, useState} 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 { FileExcelFilled, SyncOutlined } from "@ant-design/icons";
|
||||
import { Alert, Button, Card, Space } from "antd";
|
||||
import React, { useEffect, useState } 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 JobsDocumentsLocalDeleteButton from "./jobs-documents-local-gallery.delete.component";
|
||||
import JobsLocalGalleryDownloadButton from "./jobs-documents-local-gallery.download";
|
||||
@@ -19,194 +19,163 @@ import Lightbox from "react-image-lightbox";
|
||||
import "react-image-lightbox/style.css";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
allMedia: selectAllMedia,
|
||||
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})),
|
||||
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 default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsLocalGallery);
|
||||
|
||||
export function JobsDocumentsLocalGallery({
|
||||
bodyshop,
|
||||
toggleMediaSelected,
|
||||
getJobMedia,
|
||||
getBillMedia,
|
||||
allMedia,
|
||||
job,
|
||||
invoice_number,
|
||||
vendorid,
|
||||
}) {
|
||||
const {t} = useTranslation();
|
||||
const [modalState, setModalState] = useState({open: false, index: 0});
|
||||
useEffect(() => {
|
||||
if (job) {
|
||||
if (invoice_number) {
|
||||
getBillMedia({jobid: job.id, invoice_number});
|
||||
bodyshop,
|
||||
toggleMediaSelected,
|
||||
getJobMedia,
|
||||
getBillMedia,
|
||||
allMedia,
|
||||
job,
|
||||
invoice_number,
|
||||
vendorid
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [modalState, setModalState] = useState({ open: false, index: 0 });
|
||||
useEffect(() => {
|
||||
if (job) {
|
||||
if (invoice_number) {
|
||||
getBillMedia({ jobid: job.id, invoice_number });
|
||||
} else {
|
||||
getJobMedia(job.id);
|
||||
}
|
||||
}
|
||||
}, [job, invoice_number, getJobMedia, getBillMedia]);
|
||||
let optimized;
|
||||
const jobMedia =
|
||||
allMedia && allMedia[job.id]
|
||||
? allMedia[job.id].reduce(
|
||||
(acc, val) => {
|
||||
if (val.type && val.type.mime && val.type.mime.startsWith("image")) {
|
||||
acc.images.push({
|
||||
...val,
|
||||
fullsize: val.src,
|
||||
src: val.thumbnail,
|
||||
height: val.thumbnailHeight,
|
||||
width: val.thumbnailWidth,
|
||||
...(val.optimized && { src: val.optimized, fullsize: val.src })
|
||||
});
|
||||
if (val.optimized) optimized = true;
|
||||
} else {
|
||||
getJobMedia(job.id);
|
||||
acc.other.push({
|
||||
...val,
|
||||
fullsize: val.src,
|
||||
src: val.thumbnail,
|
||||
height: val.thumbnailHeight,
|
||||
width: val.thumbnailWidth,
|
||||
tags: [{ value: val.filename, title: val.filename }]
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [job, invoice_number, getJobMedia, getBillMedia]);
|
||||
let optimized;
|
||||
const jobMedia =
|
||||
allMedia && allMedia[job.id]
|
||||
? allMedia[job.id].reduce(
|
||||
(acc, val) => {
|
||||
if (
|
||||
val.type &&
|
||||
val.type.mime &&
|
||||
val.type.mime.startsWith("image")
|
||||
) {
|
||||
acc.images.push({
|
||||
...val,
|
||||
fullsize: val.src,
|
||||
src: val.thumbnail,
|
||||
height: val.thumbnailHeight,
|
||||
width: val.thumbnailWidth,
|
||||
...(val.optimized && {src: val.optimized, fullsize: val.src}),
|
||||
});
|
||||
if (val.optimized) optimized = true;
|
||||
} else {
|
||||
acc.other.push({
|
||||
...val,
|
||||
fullsize: val.src,
|
||||
src: val.thumbnail,
|
||||
height: val.thumbnailHeight,
|
||||
width: val.thumbnailWidth,
|
||||
tags: [{value: val.filename, title: val.filename}],
|
||||
});
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{images: [], other: []}
|
||||
)
|
||||
: {images: [], other: []};
|
||||
return acc;
|
||||
},
|
||||
{ images: [], other: [] }
|
||||
)
|
||||
: { images: [], other: [] };
|
||||
|
||||
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}/>
|
||||
<JobsLocalGalleryDownloadButton job={job}/>
|
||||
<JobsDocumentsLocalDeleteButton jobid={job.id}/>
|
||||
</Space>
|
||||
<Card>
|
||||
<DocumentsLocalUploadComponent
|
||||
job={job}
|
||||
invoice_number={invoice_number}
|
||||
vendorid={vendorid}
|
||||
allowAllTypes
|
||||
/>
|
||||
</Card>
|
||||
<Card title={t("jobs.labels.documents-images")}>
|
||||
<Gallery
|
||||
images={jobMedia.images}
|
||||
onSelect={(index, image) => {
|
||||
toggleMediaSelected({jobid: job.id, filename: image.filename});
|
||||
}}
|
||||
{...(optimized && {
|
||||
customControls: [
|
||||
<Alert
|
||||
style={{margin: "4px"}}
|
||||
message={t("documents.labels.optimizedimage")}
|
||||
type="success"
|
||||
/>,
|
||||
],
|
||||
})}
|
||||
onClick={(index) => {
|
||||
setModalState({open: true, index: index});
|
||||
// const media = allMedia[job.id].find(
|
||||
// (m) => m.optimized === item.src
|
||||
// );
|
||||
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} />
|
||||
<JobsLocalGalleryDownloadButton job={job} />
|
||||
<JobsDocumentsLocalDeleteButton jobid={job.id} />
|
||||
</Space>
|
||||
<Card>
|
||||
<DocumentsLocalUploadComponent job={job} invoice_number={invoice_number} vendorid={vendorid} allowAllTypes />
|
||||
</Card>
|
||||
<Card title={t("jobs.labels.documents-images")}>
|
||||
<Gallery
|
||||
images={jobMedia.images}
|
||||
onSelect={(index, image) => {
|
||||
toggleMediaSelected({ jobid: job.id, filename: image.filename });
|
||||
}}
|
||||
{...(optimized && {
|
||||
customControls: [
|
||||
<Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
|
||||
]
|
||||
})}
|
||||
onClick={(index) => {
|
||||
setModalState({ open: true, index: index });
|
||||
// const media = allMedia[job.id].find(
|
||||
// (m) => m.optimized === item.src
|
||||
// );
|
||||
|
||||
// window.open(
|
||||
// media ? media.fullsize : item.fullsize,
|
||||
// "_blank",
|
||||
// "toolbar=0,location=0,menubar=0"
|
||||
// );
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<Card title={t("jobs.labels.documents-other")}>
|
||||
<Gallery
|
||||
images={jobMedia.other}
|
||||
thumbnailStyle={() => {
|
||||
return {
|
||||
backgroundImage: <FileExcelFilled/>,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
cursor: "pointer",
|
||||
};
|
||||
}}
|
||||
onClick={(index) => {
|
||||
window.open(
|
||||
jobMedia.other[index].fullsize,
|
||||
"_blank",
|
||||
"toolbar=0,location=0,menubar=0"
|
||||
);
|
||||
}}
|
||||
onSelect={(index, image) => {
|
||||
toggleMediaSelected({jobid: job.id, filename: image.filename});
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
{modalState.open && (
|
||||
<Lightbox
|
||||
mainSrc={jobMedia.images[modalState.index].fullsize}
|
||||
nextSrc={
|
||||
jobMedia.images[(modalState.index + 1) % jobMedia.images.length]
|
||||
.fullsize
|
||||
}
|
||||
prevSrc={
|
||||
jobMedia.images[
|
||||
(modalState.index + jobMedia.images.length - 1) %
|
||||
jobMedia.images.length
|
||||
].fullsize
|
||||
}
|
||||
onCloseRequest={() => setModalState({open: false, index: 0})}
|
||||
onMovePrevRequest={() =>
|
||||
setModalState({
|
||||
...modalState,
|
||||
index:
|
||||
(modalState.index + jobMedia.images.length - 1) %
|
||||
jobMedia.images.length,
|
||||
})
|
||||
}
|
||||
onMoveNextRequest={() =>
|
||||
setModalState({
|
||||
...modalState,
|
||||
index: (modalState.index + 1) % jobMedia.images.length,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
// window.open(
|
||||
// media ? media.fullsize : item.fullsize,
|
||||
// "_blank",
|
||||
// "toolbar=0,location=0,menubar=0"
|
||||
// );
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<Card title={t("jobs.labels.documents-other")}>
|
||||
<Gallery
|
||||
images={jobMedia.other}
|
||||
thumbnailStyle={() => {
|
||||
return {
|
||||
backgroundImage: <FileExcelFilled />,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
cursor: "pointer"
|
||||
};
|
||||
}}
|
||||
onClick={(index) => {
|
||||
window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
|
||||
}}
|
||||
onSelect={(index, image) => {
|
||||
toggleMediaSelected({ jobid: job.id, filename: image.filename });
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
{modalState.open && (
|
||||
<Lightbox
|
||||
mainSrc={jobMedia.images[modalState.index].fullsize}
|
||||
nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
|
||||
prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
|
||||
onCloseRequest={() => setModalState({ open: false, index: 0 })}
|
||||
onMovePrevRequest={() =>
|
||||
setModalState({
|
||||
...modalState,
|
||||
index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
|
||||
})
|
||||
}
|
||||
onMoveNextRequest={() =>
|
||||
setModalState({
|
||||
...modalState,
|
||||
index: (modalState.index + 1) % jobMedia.images.length
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user