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

Images upload as resized images. Added location hash for jobs detail page.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-15 14:13:09 -08:00
parent fe5193a20b
commit 2e7c396339
24 changed files with 431 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/pages/jobs-detail/jobs-detail.page.jsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { useQuery } from "@apollo/react-hooks";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
@@ -7,9 +7,11 @@ import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import { Tabs, Icon, Row } from "antd";
import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
import { useTranslation } from "react-i18next";
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
function JobsDetailPage({ match }) {
function JobsDetailPage({ match, location }) {
const { jobId } = match.params;
const { hash } = location;
const { t } = useTranslation();
const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
variables: { id: jobId },
@@ -22,18 +24,19 @@ function JobsDetailPage({ match }) {
: t("titles.jobsdetail", {
ro_number: data.jobs_by_pk.ro_number
});
}, [loading,data,t]);
}, [loading, data, t]);
const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
console.log("selectedTab", selectedTab);
return (
<div>
<Row>
<JobTombstone job={data.jobs_by_pk} />
</Row>
<Row>
<Tabs defaultActiveKey='lines'>
<Tabs defaultActiveKey={selectedTab}>
<Tabs.TabPane
tab={
<span>
@@ -41,7 +44,7 @@ function JobsDetailPage({ match }) {
Lines
</span>
}
key='lines'>
key='#lines'>
<JobLinesContainer match={match} />
</Tabs.TabPane>
<Tabs.TabPane
@@ -51,7 +54,7 @@ function JobsDetailPage({ match }) {
Rates
</span>
}
key='rates'>
key='#rates'>
Estimate Rates
</Tabs.TabPane>
<Tabs.TabPane
@@ -61,9 +64,19 @@ function JobsDetailPage({ match }) {
Parts
</span>
}
key='parts'>
key='#parts'>
Estimate Parts
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<Icon type='file-image' />
Documents
</span>
}
key='#documents'>
<JobsDocumentsContainer jobId={jobId} />
</Tabs.TabPane>
</Tabs>
</Row>
</div>

6
client/src/pages/jobs-documents/jobs-documents.container.jsx
View File

@@ -1,6 +0,0 @@
import React from "react";
import JobDocuments from "./jobs-documents.page";
export default function JobsDocumentsContainer() {
return <JobDocuments loading data={null} />;
}

189
client/src/pages/jobs-documents/jobs-documents.page.jsx
View File

@@ -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 = (
<div>
<Icon type='plus' />
<div className='ant-upload-text'>Upload</div>
</div>
);
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 (
<div className='clearfix'>
<Button onClick={test}>Test</Button>
<Upload
customRequest={handleUpload}
accept='.pdf,.jpg,.jpeg'
listType='picture-card'
fileList={fileList}
multiple={true}
onPreview={handlePreview}
transformFile={transformFile}
onChange={handleChange}>
{fileList.length >= 8 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
<img alt='example' style={{ width: "100%" }} src={previewImage} />
</Modal>
</div>
);
}
export default JobsDetailPage;

10
client/src/pages/jobs-documents/jobs-documents.styles.scss
View File

@@ -1,10 +0,0 @@
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}

2
client/src/pages/manage/manage.page.jsx
View File

@@ -13,7 +13,7 @@ const JobsPage = lazy(() => import("../jobs/jobs.page"));
const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
const ProfilePage = lazy(() => import("../profile/profile.container.page"));
const JobsDocumentsPage = lazy(() =>
import("../jobs-documents/jobs-documents.container")
import("../../components/jobs-documents/jobs-documents.container")
);
const { Header, Content, Footer } = Layout;