diff --git a/client/package.json b/client/package.json
index cd6b2f079..6a12b97a5 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
"apollo-link-ws": "^1.0.19",
"axios": "^0.19.1",
"chart.js": "^2.9.3",
+ "compress": "^0.99.0",
"dotenv": "^8.2.0",
"firebase": "^7.5.0",
"graphql": "^14.5.8",
@@ -23,6 +24,7 @@
"react-dom": "^16.12.0",
"react-i18next": "^11.2.7",
"react-icons": "^3.8.0",
+ "react-image-file-resizer": "^0.2.1",
"react-moment": "^0.9.7",
"react-number-format": "^4.3.1",
"react-router-dom": "^5.1.2",
diff --git a/client/src/components/jobs-documents/jobs-documents.container.jsx b/client/src/components/jobs-documents/jobs-documents.container.jsx
new file mode 100644
index 000000000..268000809
--- /dev/null
+++ b/client/src/components/jobs-documents/jobs-documents.container.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import { QUERY_SHOP_ID } from "../../graphql/bodyshop.queries";
+import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobDocuments from "./jobs-documents.page";
+
+export default function JobsDocumentsContainer({ jobId }) {
+ const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
+ variables: { jobId: jobId },
+ fetchPolicy: "network-only"
+ });
+
+ const shopData = useQuery(QUERY_SHOP_ID, {
+ fetchPolicy: "network-only"
+ });
+
+ if (loading || shopData.loading) return ;
+ if (error) return ;
+ if (shopData.error)
+ return ;
+
+ return (
+
+ );
+}
diff --git a/client/src/components/jobs-documents/jobs-documents.page.jsx b/client/src/components/jobs-documents/jobs-documents.page.jsx
new file mode 100644
index 000000000..61a68269a
--- /dev/null
+++ b/client/src/components/jobs-documents/jobs-documents.page.jsx
@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Upload, Modal, Icon, Button } from "antd";
+import axios from "axios";
+import "./jobs-documents.styles.scss";
+import Resizer from "react-image-file-resizer";
+//import { Resizer } from "../../utils/resizer";
+
+function getBase64(file) {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = () => resolve(reader.result);
+ reader.onerror = error => reject(error);
+ });
+}
+
+function JobsDetailPage({ shopId, jobId, loading, data }) {
+ //const { t } = useTranslation();
+
+ const [state, setState] = useState({
+ previewVisible: false,
+ previewImage: "",
+ fileList: [
+ {
+ uid: "-1",
+ name: "image.png",
+ status: "done",
+ url:
+ "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+ },
+ {
+ uid: "-2",
+ name: "image.png",
+ status: "error"
+ }
+ ]
+ });
+
+ const handleUpload = ev => {
+ console.log("handleUpload Props:", ev);
+ Resizer.imageFileResizer(
+ ev.file,
+ 3000,
+ 3000,
+ "JPEG",
+ 85,
+ 0,
+ uri => {
+ let file = new File([uri], ev.file.name, {
+ //type: ev.file.type,
+ uid: ev.file.uid
+ });
+
+ // Split the filename to get the name and type
+ let fileName = file.name;
+ let fileType = file.type;
+ console.log("Preparing the upload ");
+ axios
+ .post("/sign_s3", {
+ fileName: `${shopId}/${jobId}/${fileName}`,
+ fileType
+ })
+ .then(response => {
+ var returnData = response.data.data.returnData;
+ var signedRequest = returnData.signedRequest;
+ var url = returnData.url;
+ setState({ ...state, url: url });
+ console.log("Recieved a signed request " + signedRequest);
+
+ // Put the fileType in the headers for the upload
+ var options = {
+ headers: {
+ "Content-Type": fileType
+ }
+ };
+
+ axios
+ .put(signedRequest, file, options)
+ .then(result => {
+ console.log("Response from s3", result);
+ setState({ ...state, success: true });
+ })
+ .catch(error => {
+ console.log("Inside Error here.", error);
+ alert("ERROR " + JSON.stringify(error));
+ });
+ })
+ .catch(error => {
+ console.log("Outside Error here.", error);
+ alert(JSON.stringify(error));
+ });
+ },
+ "blob"
+ );
+ };
+
+ const handleCancel = () => setState({ ...state, previewVisible: false });
+
+ const handlePreview = async file => {
+ if (!file.url && !file.preview) {
+ file.preview = await getBase64(file.originFileObj);
+ }
+
+ setState({
+ ...state,
+ previewImage: file.url || file.preview,
+ previewVisible: true
+ });
+ };
+
+ const handleChange = ({ fileList }) => setState({ ...state, fileList });
+
+ const { previewVisible, previewImage, fileList } = state;
+ const uploadButton = (
+
+ );
+
+ return (
+
+
({
+ photoCotent: file, // file is currently uploading pictures
+ photoWidth: file.height, // Get the width and height of the picture by handleBeforeUpload
+ photoHeight: file.width
+ })}
+ accept='.pdf,.jpg,.jpeg'
+ listType='picture-card'
+ fileList={fileList}
+ multiple={true}
+ onPreview={handlePreview}
+ onChange={handleChange}>
+ {uploadButton}
+
+
+ 
+
+
-
+
@@ -41,7 +44,7 @@ function JobsDetailPage({ match }) {
Lines
}
- key='lines'>
+ key='#lines'>
}
- key='rates'>
+ key='#rates'>
Estimate Rates
}
- key='parts'>
+ key='#parts'>
Estimate Parts
+
+
+ Documents
+
+ }
+ key='#documents'>
+
+
diff --git a/client/src/pages/jobs-documents/jobs-documents.container.jsx b/client/src/pages/jobs-documents/jobs-documents.container.jsx
deleted file mode 100644
index 85329e289..000000000
--- a/client/src/pages/jobs-documents/jobs-documents.container.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-import JobDocuments from "./jobs-documents.page";
-
-export default function JobsDocumentsContainer() {
- return ;
-}
diff --git a/client/src/pages/jobs-documents/jobs-documents.page.jsx b/client/src/pages/jobs-documents/jobs-documents.page.jsx
deleted file mode 100644
index da1c68a83..000000000
--- a/client/src/pages/jobs-documents/jobs-documents.page.jsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Upload, Modal, Icon, Button } from "antd";
-import axios from "axios";
-import "./jobs-documents.styles.scss";
-
-function getBase64(file) {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = () => resolve(reader.result);
- reader.onerror = error => reject(error);
- });
-}
-
-function JobsDetailPage({ match, loading, data }) {
- //const { jobId } = match.params;
-
- console.log("match", match);
- const { t } = useTranslation();
-
- useEffect(() => {
- document.title = loading
- ? "..."
- : t("titles.jobsdocuments", {
- ro_number: data.jobs_by_pk.ro_number
- });
- }, [t, loading, data]);
-
- const [state, setState] = useState({
- previewVisible: false,
- previewImage: "",
- fileList: [
- {
- uid: "-1",
- name: "image.png",
- status: "done",
- url:
- "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
- },
- {
- uid: "-2",
- name: "image.png",
- status: "done",
- url:
- "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
- },
- {
- uid: "-3",
- name: "image.png",
- status: "done",
- url:
- "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
- },
- {
- uid: "-4",
- name: "image.png",
- status: "done",
- url:
- "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
- },
- {
- uid: "-5",
- name: "image.png",
- status: "error"
- }
- ]
- });
-
- const test = props => {
- axios({
- url: "/test",
- method: "get"
- })
- .then(response => {
- console.log("response", response);
- })
- .catch(error => {
- console.log("Payment Error: ", error);
- alert(
- "There was an issue with your payment! Please make sure you use the provided credit card."
- );
- });
- };
-
- const handleUpload = ev => {
- console.log("Handle Upload.", ev);
- let file = ev.file;
- // Split the filename to get the name and type
- let fileName = ev.file.name;
- let fileType = ev.file.type;
- console.log("Preparing the upload ");
- axios
- .post("/sign_s3", {
- fileName:
- "testjob/" + "adcd4c7b-029b-48c7-a1c2-8cf1761ce1dc" + fileName,
- fileType
- })
- .then(response => {
- var returnData = response.data.data.returnData;
- var signedRequest = returnData.signedRequest;
- var url = returnData.url;
- setState({ ...state, url: url });
- console.log("Recieved a signed request " + signedRequest);
-
- // Put the fileType in the headers for the upload
- var options = {
- headers: {
- "Content-Type": fileType
- }
- };
- axios
- .put(signedRequest, file, options)
- .then(result => {
- console.log("Response from s3", result);
- setState({ ...state, success: true });
- })
- .catch(error => {
- console.log("Inside Error here.", error);
- alert("ERROR " + JSON.stringify(error));
- });
- })
- .catch(error => {
- console.log("Outside Error here.", error);
- alert(JSON.stringify(error));
- });
- };
-
- const handleCancel = () => setState({ ...state, previewVisible: false });
-
- const handlePreview = async file => {
- if (!file.url && !file.preview) {
- file.preview = await getBase64(file.originFileObj);
- }
-
- setState({
- ...state,
- previewImage: file.url || file.preview,
- previewVisible: true
- });
- };
-
- const handleChange = ({ fileList }) => setState({ ...state, fileList });
-
- const { previewVisible, previewImage, fileList } = state;
- const uploadButton = (
-
- );
-
- const transformFile = file => {
- console.log("Transforming file.", file);
- // Make the image smaller here.
-
- const reader = new FileReader();
-
- reader.onload = e => {
- console.log(e.target.result);
- };
- reader.readAsDataURL(file);
-
- console.log("reader", reader);
-
- return file;
- };
-
- return (
-
-
-
- {fileList.length >= 8 ? null : uploadButton}
-
-
-
-
-