Files
bodyshop/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx

137 lines
4.5 KiB
JavaScript

import { useApolloClient } from "@apollo/client/react";
import { Button, Form, Popover, Space } from "antd";
import axios from "axios";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { GET_DOC_SIZE_BY_JOB } from "../../graphql/documents.queries.js";
import { selectBodyshop } from "../../redux/user/user.selectors.js";
import JobSearchSelect from "../job-search-select/job-search-select.component.jsx";
import { isFunction } from "lodash";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyGalleryReassign);
/*
################################################################################################
Developer Note:
Known Technical Debt Item
Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
################################################################################################
*/
export function JobsDocumentsImgproxyGalleryReassign({ bodyshop, galleryImages, callback }) {
const { t } = useTranslation();
const [form] = Form.useForm();
const notification = useNotification();
const selectedImages = useMemo(() => {
return [
...galleryImages.images.filter((image) => image.isSelected),
...galleryImages.other.filter((image) => image.isSelected)
];
}, [galleryImages]);
const client = useApolloClient();
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const handleFinish = async ({ jobid }) => {
setLoading(true);
//Check to see if the space remaining on the new job is sufficient. If it isn't cancel this.
const newJobData = await client.query({
query: GET_DOC_SIZE_BY_JOB,
variables: { jobId: jobid }
});
const transferedDocSizeTotal = selectedImages.reduce((acc, val) => acc + val.size, 0);
const shouldPreventTransfer =
bodyshop.jobsizelimit - newJobData.data.documents_aggregate.aggregate.sum.size < transferedDocSizeTotal;
if (shouldPreventTransfer) {
notification.error({
key: "cannotuploaddocuments",
title: t("documents.labels.reassign_limitexceeded_title"),
description: t("documents.labels.reassign_limitexceeded")
});
setLoading(false);
return;
}
const res = await axios.post("/media/imgproxy/rename", {
tojobid: jobid,
documents: selectedImages.map((i) => {
//Need to check if the current key folder is null, or another job.
const currentKeys = i.key.split("/");
currentKeys[1] = jobid;
currentKeys.join("/");
return {
id: i.id,
from: i.key,
to: currentKeys.join("/"),
extension: i.extension,
type: i.type
};
})
});
//Add in confirmation & errors.
if (isFunction(callback)) callback();
if (res.errors) {
notification.error({
title: t("documents.errors.updating", {
message: JSON.stringify(res.errors)
})
});
}
if (!res.mutationResult?.errors) {
notification.success({
message: t("documents.successes.updated")
});
}
setOpen(false);
setLoading(false);
};
const popContent = (
<div>
<Form onFinish={handleFinish} layout="vertical" form={form}>
<Form.Item
label={t("documents.labels.newjobid")}
style={{ width: "20rem" }}
rules={[
{
required: true
//message: t("general.validation.required"),
}
]}
name={"jobid"}
>
<JobSearchSelect notExported={false} notInvoiced={false} />
</Form.Item>
</Form>
<Space>
<Button type="primary" onClick={() => form.submit()}>
{t("general.actions.submit")}
</Button>
<Button onClick={() => setOpen(false)}>{t("general.actions.cancel")}</Button>
</Space>
</div>
);
return (
<Popover content={popContent} open={open}>
<Button disabled={selectedImages.length < 1} onClick={() => setOpen(true)} loading={loading}>
{t("documents.actions.reassign")}
</Button>
</Popover>
);
}