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

35
client/src/components/jobs-documents/jobs-documents.container.jsx Normal file
View File

@@ -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 <LoadingSpinner />;
if (error) return <AlertComponent type='error' message={error.message} />;
if (shopData.error)
return <AlertComponent type='error' message={shopData.error.message} />;
return (
<JobDocuments
data={data}
jobId={jobId}
shopId={
shopData.data?.bodyshops[0]?.id
? shopData.data?.bodyshops[0]?.id
: "error"
}
/>
);
}

145
client/src/components/jobs-documents/jobs-documents.page.jsx Normal file
View File

@@ -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 = (
<div>
<Icon type='plus' />
<div className='ant-upload-text'>Upload</div>
</div>
);
return (
<div className='clearfix'>
<Upload
customRequest={handleUpload}
data={file => ({
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}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
<img alt='example' style={{ width: "100%" }} src={previewImage} />
</Modal>
</div>
);
}
export default JobsDetailPage;

0
client/src/pages/jobs-documents/jobs-documents.styles.scss → client/src/components/jobs-documents/jobs-documents.styles.scss
View File

7
client/src/graphql/apollo-error-handling.js
View File

@@ -9,15 +9,12 @@ const errorLink = onError(
console.log("networkError", networkError);
console.log("operation", operation);
console.log("forward", forward);
if (graphQLErrors) {
if (graphQLErrors[0]?.message.includes("JWTExpired") || networkError?.message.includes("JWTExpired")) {
//User access token has expired
console.log("graphQLErrors", graphQLErrors);
}
if (networkError) {
console.log(`[Network error]: ${networkError}`);
//props.history.push("/network-error");
if (networkError.message.includes("JWTExpired")) {
if (networkError?.message?.includes("JWTExpired")) {
console.log("Got to the error check.");
if (access_token && access_token !== "undefined") {
// Let's refresh token through async request

8
client/src/graphql/bodyshop.queries.js
View File

@@ -22,3 +22,11 @@ export const QUERY_BODYSHOP = gql`
}
}
`;
export const QUERY_SHOP_ID = gql`
query QUERY_SHOP_ID {
bodyshops(where: { associations: { active: { _eq: true } } }) {
id
}
}
`;

22
client/src/graphql/documents.queries.js Normal file
View File

@@ -0,0 +1,22 @@
import { gql } from "apollo-boost";
export const GET_DOCUMENTS_BY_JOB = gql`
query GET_DOCUMENTS_BY_JOB($jobId: uuid!) {
documents(where: { jobid: { _eq: $jobId } }) {
id
url
thumb_url
name
}
}
`;
export const INSERT_NEW_DOCUMENT = gql`
mutation INSERT_NEW_DOCUMENT($docInput: [documents_insert_input!]!) {
insert_ducments(objects: $docInput) {
returning {
id
}
}
}
`;

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;

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;