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

Added functional upload on invoice enter. BOD-75

Browse Source
This commit is contained in:
Patrick Fic
2020-05-06 10:14:31 -07:00
parent 851527a907
commit 410d024db7
6 changed files with 234 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
client/src/components/documents-upload/documents-upload.container.jsx
View File

@@ -1,17 +1,9 @@
import { useMutation } from "@apollo/react-hooks";
import { notification } from "antd";
import axios from "axios";
import React, { useRef } from "react";
import { useTranslation } from "react-i18next";
import Resizer from "react-image-file-resizer";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
import {
selectBodyshop,
selectCurrentUser,
} from "../../redux/user/user.selectors";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import DocumentsUploadComponent from "./documents-upload.component";
import { handleUpload } from "./documents-upload.utility";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -27,137 +19,18 @@ export function DocumentsUploadContainer({
callbackAfterUpload,
onChange,
}) {
const { t } = useTranslation();
const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
const UploadRef = useRef(null);
const handleUpload = (ev) => {
const { onError, onSuccess, onProgress } = ev;
//If PDF, upload directly.
//If JPEG, resize and upload.
//TODO If this is just an invoice job? Where to put it?
let key = `${bodyshop.id}/${jobId}/${ev.file.name}`;
if (ev.file.type.includes("image")) {
Resizer.imageFileResizer(
ev.file,
2500,
2500,
"JPEG",
75,
0,
(uri) => {
let file = new File([uri], ev.file.name, {});
file.uid = ev.file.uid;
uploadToS3(key, file.type, file, onError, onSuccess, onProgress);
},
"blob"
);
} else {
uploadToS3(key, ev.file.type, ev.file, onError, onSuccess, onProgress);
}
};
const uploadToS3 = (
fileName,
fileType,
file,
onError,
onSuccess,
onProgress
) => {
let timestamp = Math.floor(Date.now() / 1000);
let public_id = fileName;
let tags = `${bodyshop.textid},${
tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
}`;
let eager = "w_200,h_200,c_thumb";
axios
.post("/media/sign", {
eager: eager,
public_id: public_id,
tags: tags,
timestamp: timestamp,
})
.then((response) => {
var signature = response.data;
var options = {
headers: { "X-Requested-With": "XMLHttpRequest" },
onUploadProgress: (e) => {
onProgress({ percent: (e.loaded / e.total) * 100 });
},
};
const formData = new FormData();
formData.append("file", file);
formData.append("eager", eager);
formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
formData.append("public_id", public_id);
formData.append("tags", tags);
formData.append("timestamp", timestamp);
formData.append("signature", signature);
axios
.post(
`${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
formData,
options
)
.then((response) => {
console.log("response", response);
insertNewDocument({
variables: {
docInput: [
{
jobid: jobId,
uploaded_by: currentUser.email,
key: fileName,
invoiceid: invoiceId,
type: fileType,
},
],
},
}).then((r) => {
onSuccess({
uid: r.data.insert_documents.returning[0].id,
name: r.data.insert_documents.returning[0].name,
status: "done",
key: r.data.insert_documents.returning[0].key,
});
notification["success"]({
message: t("documents.successes.insert"),
});
if (callbackAfterUpload) {
callbackAfterUpload();
}
if (onChange) {
//Used in a form.
onChange(UploadRef.current.state.fileList);
}
});
})
.catch((error) => {
onError(error);
notification["error"]({
message: t("documents.errors.insert", {
message: JSON.stringify(error),
}),
});
});
})
.catch((error) => {
console.log("error", error);
notification["error"]({
message: t("documents.errors.getpresignurl", {
message: JSON.stringify(error),
}),
});
});
};
return (
<DocumentsUploadComponent
handleUpload={handleUpload}
UploadRef={UploadRef}
handleUpload={(ev) =>
handleUpload(ev, {
bodyshop: bodyshop,
uploaded_by: currentUser.email,
jobId: jobId,
invoiceId: invoiceId,
tagsArray: tagsArray,
callback: callbackAfterUpload,
})
}
/>
);
}

161
client/src/components/documents-upload/documents-upload.utility.js Normal file
View File

@@ -0,0 +1,161 @@
import { notification } from "antd";
import axios from "axios";
import Resizer from "react-image-file-resizer";
import { client } from "../../App/App.container";
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
import i18n from "i18next";
//Context: currentUserEmail, bodyshop, jobid, invoiceid
export const handleUpload = (ev, context) => {
console.log("ev", ev);
const { onError, onSuccess, onProgress } = ev;
const { bodyshop, jobId } = context;
//If PDF, upload directly.
//If JPEG, resize and upload.
//TODO If this is just an invoice job? Where to put it?
let key = `${bodyshop.id}/${jobId}/${ev.file.name}`;
if (ev.file.type.includes("image")) {
Resizer.imageFileResizer(
ev.file,
2500,
2500,
"JPEG",
75,
0,
(uri) => {
let file = new File([uri], ev.file.name, {});
file.uid = ev.file.uid;
uploadToS3(
key,
file.type,
file,
onError,
onSuccess,
onProgress,
context
);
},
"blob"
);
} else {
uploadToS3(
key,
ev.file.type,
ev.file,
onError,
onSuccess,
onProgress,
context
);
}
};
export const uploadToS3 = (
fileName,
fileType,
file,
onError,
onSuccess,
onProgress,
context
) => {
const {
bodyshop,
jobId,
invoiceId,
uploaded_by,
callback,
tagsArray,
} = context;
let timestamp = Math.floor(Date.now() / 1000);
let public_id = fileName;
let tags = `${bodyshop.textid},${
tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
}`;
let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
axios
.post("/media/sign", {
eager: eager,
public_id: public_id,
tags: tags,
timestamp: timestamp,
})
.then((response) => {
var signature = response.data;
var options = {
headers: { "X-Requested-With": "XMLHttpRequest" },
onUploadProgress: (e) => {
if (!!onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
},
};
const formData = new FormData();
formData.append("file", file);
formData.append("eager", eager);
formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
formData.append("public_id", public_id);
formData.append("tags", tags);
formData.append("timestamp", timestamp);
formData.append("signature", signature);
axios
.post(
`${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
formData,
options
)
.then((response) => {
console.log("Upload Response", response);
client
.mutate({
mutation: INSERT_NEW_DOCUMENT,
variables: {
docInput: [
{
jobid: jobId,
uploaded_by: uploaded_by,
key: fileName,
invoiceid: invoiceId,
type: fileType,
},
],
},
})
.then((r) => {
if (!!onSuccess)
onSuccess({
uid: r.data.insert_documents.returning[0].id,
name: r.data.insert_documents.returning[0].name,
status: "done",
key: r.data.insert_documents.returning[0].key,
});
notification["success"]({
message: i18n.t("documents.successes.insert"),
});
if (callback) {
callback();
}
// if (onChange) {
// //Used in a form.
// onChange(UploadRef.current.state.fileList);
// }
});
})
.catch((error) => {
if (!!onError) onError(error);
notification["error"]({
message: i18n.t("documents.errors.insert", {
message: JSON.stringify(error),
}),
});
});
})
.catch((error) => {
console.log("error", error);
notification["error"]({
message: i18n.t("documents.errors.getpresignurl", {
message: JSON.stringify(error),
}),
});
});
};

2
client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
View File

@@ -38,7 +38,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
}, [form, search.invoiceid]);
if (error) return <AlertComponent message={error.message} type="error" />;
if (!!!search.invoiceid) return <div>{t("invoices.labels.noneseleced")}</div>;
if (!!!search.invoiceid) return <div>{t("invoices.labels.noneselected")}</div>;
return (
<LoadingSkeleton loading={loading}>
<Form

37
client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx
View File

@@ -6,13 +6,15 @@ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { handleUpload } from "../documents-upload/documents-upload.utility";
import InvoiceFormContainer from "../invoice-form/invoice-form.container";
const mapStateToProps = createStructuredSelector({
invoiceEnterModal: selectInvoiceEnterModal,
bodyshop: selectBodyshop,
currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
@@ -22,19 +24,23 @@ function InvoiceEnterModalContainer({
invoiceEnterModal,
toggleModalVisible,
bodyshop,
currentUser,
}) {
const [form] = Form.useForm();
const { t } = useTranslation();
const [enterAgain, setEnterAgain] = useState(false);
const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
const [loading, setLoading] = useState(false);
const handleFinish = (values) => {
setLoading(true);
const { upload, ...remainingValues } = values;
insertInvoice({
variables: {
invoice: [
Object.assign({}, values, {
Object.assign({}, remainingValues, {
invoicelines: {
data: values.invoicelines.map((i) => {
data: remainingValues.invoicelines.map((i) => {
return {
...i,
joblineid: i.joblineid === "noline" ? null : i.joblineid,
@@ -46,6 +52,27 @@ function InvoiceEnterModalContainer({
},
})
.then((r) => {
const invoiceId = r.data.insert_invoices.returning[0].id;
console.log("invoiceId", invoiceId);
/////////////////////////
if (upload && upload.length > 0) {
//insert Each of the documents?
upload.forEach((u) => {
handleUpload(
{ file: u.originFileObj },
{
bodyshop: bodyshop,
uploaded_by: currentUser.email,
jobId: values.jobid,
invoiceId: invoiceId,
tagsArray: null,
callback: null,
}
);
});
}
///////////////////////////
setLoading(false);
notification["success"]({
message: t("invoices.successes.created"),
});
@@ -60,6 +87,7 @@ function InvoiceEnterModalContainer({
setEnterAgain(false);
})
.catch((error) => {
setLoading(false);
setEnterAgain(false);
notification["error"]({
message: t("invoices.errors.creating", {
@@ -89,12 +117,13 @@ function InvoiceEnterModalContainer({
footer={
<span>
<Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
<Button onClick={() => form.submit()}>
<Button loading={loading} onClick={() => form.submit()}>
{t("general.actions.save")}
</Button>
{invoiceEnterModal.context && invoiceEnterModal.context.id ? null : (
<Button
type="primary"
loading={loading}
onClick={() => {
setEnterAgain(true);
}}

31
client/src/components/invoice-form/invoice-form.component.jsx
View File

@@ -1,7 +1,6 @@
import { DatePicker, Form, Input, Statistic, Switch } from "antd";
import { Button, DatePicker, Form, Input, Statistic, Switch, Upload } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
@@ -165,9 +164,26 @@ export default function InvoiceFormComponent({
form={form}
responsibilityCenters={responsibilityCenters}
/>
<Form.Item name="upload" label="Upload">
<DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
{
// <Form.Item name="upload" label="Upload">
// <DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
// </Form.Item>
}
<Form.Item
name="upload"
label="Upload"
valuePropName="fileList"
getValueFromEvent={(e) => {
console.log("Upload event:", e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
}}
>
<Upload name="logo" beforeUpload={() => false} listType="picture">
<Button>Click to upload</Button>
</Upload>
</Form.Item>
<Form.Item shouldUpdate>
@@ -180,7 +196,6 @@ export default function InvoiceFormComponent({
"local_tax_rate",
]);
let totals;
console.log("values", values);
if (
!!values.total &&
!!values.invoicelines &&
@@ -234,6 +249,10 @@ export default function InvoiceFormComponent({
return null;
}}
</Form.Item>
<Button onClick={() => console.log(form.getFieldsValue())}>
Get Values
</Button>
</div>
);
}

2
client/src/translations/en_us/common.json
View File

@@ -381,7 +381,7 @@
"invoice_total": "Invoice Total Amount",
"local_tax": "Local Tax",
"new": "New Invoice",
"noneselected": "No invoice selected.F",
"noneselected": "No invoice selected.",
"state_tax": "State Tax",
"subtotal": "Subtotal"
},