Added job card functionality + new fields.
This commit is contained in:
Patrick Fic
@@ -0,0 +1,196 @@
|
||||
import { Button, Icon, Modal, notification, Upload } from "antd";
|
||||
import axios from "axios";
|
||||
import React, { useState } from "react";
|
||||
import { useMutation } from "react-apollo";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Resizer from "react-image-file-resizer";
|
||||
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
|
||||
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 JobsDocumentsComponent({ shopId, jobId, loading, data }) {
|
||||
const { t } = useTranslation();
|
||||
const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
|
||||
|
||||
const [state, setState] = useState({
|
||||
previewVisible: false,
|
||||
previewImage: ""
|
||||
});
|
||||
|
||||
const [fileList, setFileList] = useState(
|
||||
data.reduce((acc, value) => {
|
||||
acc.push({
|
||||
uid: value.id,
|
||||
url: value.url,
|
||||
name: value.name,
|
||||
status: "done",
|
||||
thumUrl:
|
||||
"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
});
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
|
||||
const handleUpload = ev => {
|
||||
const { onError, onSuccess, onProgress } = ev;
|
||||
|
||||
Resizer.imageFileResizer(
|
||||
ev.file,
|
||||
3000,
|
||||
3000,
|
||||
"JPEG",
|
||||
75,
|
||||
0,
|
||||
uri => {
|
||||
let file = new File([uri], ev.file.name, {});
|
||||
file.uid = ev.file.uid;
|
||||
// Split the filename to get the name and type
|
||||
let fileName = file.name;
|
||||
let fileType = file.type;
|
||||
let key = `${shopId}/${jobId}/${fileName}`;
|
||||
//URL is using the proxy set in pacakges.json.
|
||||
axios
|
||||
.post("/sign_s3", {
|
||||
fileName: key,
|
||||
fileType
|
||||
})
|
||||
.then(response => {
|
||||
var returnData = response.data.data.returnData;
|
||||
var signedRequest = returnData.signedRequest;
|
||||
var url = returnData.url;
|
||||
setState({ ...state, url: url });
|
||||
// Put the fileType in the headers for the upload
|
||||
var options = {
|
||||
headers: {
|
||||
"Content-Type": fileType
|
||||
},
|
||||
onUploadProgress: e => {
|
||||
onProgress({ percent: (e.loaded / e.total) * 100 });
|
||||
}
|
||||
};
|
||||
|
||||
axios
|
||||
.put(signedRequest, file, options)
|
||||
.then(response => {
|
||||
onSuccess(response.body);
|
||||
insertNewDocument({
|
||||
variables: {
|
||||
docInput: [
|
||||
{
|
||||
jobid: jobId,
|
||||
uploaded_by: "patrick@bodyshop.app",
|
||||
url,
|
||||
thumb_url: url
|
||||
}
|
||||
]
|
||||
}
|
||||
}).then(r => {
|
||||
console.log(r);
|
||||
notification["success"]({
|
||||
message: t("documents.successes.insert")
|
||||
});
|
||||
});
|
||||
|
||||
setState({ ...state, success: true });
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Error uploading to S3", error);
|
||||
onError(error);
|
||||
notification["error"]({
|
||||
message: t("documents.errors.insert") + JSON.stringify(error)
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Outside Error here.", error);
|
||||
notification["error"]({
|
||||
message:
|
||||
t("documents.errors.getpresignurl") + 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 = props => {
|
||||
const { fileList } = props;
|
||||
console.log("New fileList", fileList);
|
||||
setFileList(fileList);
|
||||
};
|
||||
|
||||
const { previewVisible, previewImage } = state;
|
||||
// const uploadButton = (
|
||||
// <div>
|
||||
// <Icon type='plus' />
|
||||
// <div className='ant-upload-text'>{t("documents.labels.upload")}</div>
|
||||
// </div>
|
||||
// );
|
||||
|
||||
console.log(
|
||||
"process.env.REACT_APP_S3_BUCKET",
|
||||
process.env.REACT_APP_S3_BUCKET
|
||||
);
|
||||
const imageRequest = JSON.stringify({
|
||||
bucket: process.env.REACT_APP_S3_BUCKET,
|
||||
key:
|
||||
"52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/f11e92a4-8a7d-4ec0-86ac-2f46b631e438/thumb-1920-459857.jpg",
|
||||
edits: {
|
||||
resize: {
|
||||
height: 100,
|
||||
width: 100
|
||||
}
|
||||
}
|
||||
});
|
||||
const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
|
||||
const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
|
||||
|
||||
return (
|
||||
<div className='clearfix'>
|
||||
<Upload.Dragger
|
||||
customRequest={handleUpload}
|
||||
accept='.pdf,.jpg,.jpeg'
|
||||
listType='picture-card'
|
||||
fileList={fileList}
|
||||
multiple={true}
|
||||
onPreview={handlePreview}
|
||||
onChange={handleChange}>
|
||||
<p className='ant-upload-drag-icon'>
|
||||
<Icon type='inbox' />
|
||||
</p>
|
||||
<p className='ant-upload-text'>
|
||||
Click or drag file to this area to upload
|
||||
</p>
|
||||
<p className='ant-upload-hint'>
|
||||
Support for a single or bulk upload. Strictly prohibit from uploading
|
||||
company data or other band files
|
||||
</p>
|
||||
</Upload.Dragger>
|
||||
<Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
|
||||
<img alt='example' style={{ width: "100%" }} src={previewImage} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default JobsDocumentsComponent;
|
||||
Reference in New Issue
Block a user