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

2
client/package.json
View File

@@ -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",

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;

10
client/yarn.lock
View File

@@ -3544,6 +3544,11 @@ compose-function@3.0.3:
dependencies:
arity-n "^1.0.4"
compress@^0.99.0:
version "0.99.0"
resolved "https://registry.yarnpkg.com/compress/-/compress-0.99.0.tgz#97e301c25c4d01f097d85103f65eccb2e7796502"
integrity sha1-l+MBwlxNAfCX2FED9l7Msud5ZQI=
compressible@~2.0.16:
version "2.0.17"
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.17.tgz#6e8c108a16ad58384a977f3a482ca20bff2f38c1"
@@ -10355,6 +10360,11 @@ react-icons@^3.8.0:
dependencies:
camelcase "^5.0.0"
react-image-file-resizer@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.2.1.tgz#ee081bd41798ff960eea1a56b1a86ba317fecf11"
integrity sha512-uvhNj2NKMUraVKIrsmPNZgWn34b7fjEcuWAyMXUrVb06gedNtOalOBxVwXYocd4KnZRFv2/ilmAE4KEzIkj4aA==
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"

3
hasura/migrations/1579106882840_create_table_public_documents/down.yaml Normal file
View File

@@ -0,0 +1,3 @@
- args:
sql: DROP TABLE "public"."documents"
type: run_sql

20
hasura/migrations/1579106882840_create_table_public_documents/up.yaml Normal file
View File

@@ -0,0 +1,20 @@
- args:
sql: CREATE EXTENSION IF NOT EXISTS pgcrypto;
type: run_sql
- args:
sql: "CREATE TABLE \"public\".\"documents\"(\"id\" uuid NOT NULL DEFAULT gen_random_uuid(),
\"created_at\" timestamptz NOT NULL DEFAULT now(), \"updated_at\" timestamptz
NOT NULL DEFAULT now(), \"url\" text NOT NULL, \"thumb_url\" text NOT NULL,
\"uploaded_by\" text NOT NULL, \"jobid\" uuid NOT NULL, \"name\" text, PRIMARY
KEY (\"id\") , FOREIGN KEY (\"jobid\") REFERENCES \"public\".\"jobs\"(\"id\")
ON UPDATE cascade ON DELETE cascade);\nCREATE OR REPLACE FUNCTION \"public\".\"set_current_timestamp_updated_at\"()\nRETURNS
TRIGGER AS $$\nDECLARE\n _new record;\nBEGIN\n _new := NEW;\n _new.\"updated_at\"
= NOW();\n RETURN _new;\nEND;\n$$ LANGUAGE plpgsql;\nCREATE TRIGGER \"set_public_documents_updated_at\"\nBEFORE
UPDATE ON \"public\".\"documents\"\nFOR EACH ROW\nEXECUTE PROCEDURE \"public\".\"set_current_timestamp_updated_at\"();\nCOMMENT
ON TRIGGER \"set_public_documents_updated_at\" ON \"public\".\"documents\" \nIS
'trigger to set value of column \"updated_at\" to current timestamp on row update';\n"
type: run_sql
- args:
name: documents
schema: public
type: add_existing_table_or_view

12
hasura/migrations/1579106900223_track_all_relationships/down.yaml Normal file
View File

@@ -0,0 +1,12 @@
- args:
relationship: job
table:
name: documents
schema: public
type: drop_relationship
- args:
relationship: documents
table:
name: jobs
schema: public
type: drop_relationship

20
hasura/migrations/1579106900223_track_all_relationships/up.yaml Normal file
View File

@@ -0,0 +1,20 @@
- args:
name: job
table:
name: documents
schema: public
using:
foreign_key_constraint_on: jobid
type: create_object_relationship
- args:
name: documents
table:
name: jobs
schema: public
using:
foreign_key_constraint_on:
column: jobid
table:
name: documents
schema: public
type: create_array_relationship

6
hasura/migrations/1579106943432_update_permission_user_public_table_documents/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: user
table:
name: documents
schema: public
type: drop_insert_permission

31
hasura/migrations/1579106943432_update_permission_user_public_table_documents/up.yaml Normal file
View File

@@ -0,0 +1,31 @@
- args:
permission:
allow_upsert: true
check:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
columns:
- name
- thumb_url
- uploaded_by
- url
- created_at
- updated_at
- id
- jobid
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: documents
schema: public
type: create_insert_permission

6
hasura/migrations/1579106952393_update_permission_user_public_table_documents/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: user
table:
name: documents
schema: public
type: drop_select_permission

28
hasura/migrations/1579106952393_update_permission_user_public_table_documents/up.yaml Normal file
View File

@@ -0,0 +1,28 @@
- args:
permission:
allow_aggregations: false
columns:
- name
- thumb_url
- uploaded_by
- url
- created_at
- updated_at
- id
- jobid
filter:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
limit: null
role: user
table:
name: documents
schema: public
type: create_select_permission

6
hasura/migrations/1579106959311_update_permission_user_public_table_documents/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: user
table:
name: documents
schema: public
type: drop_update_permission

30
hasura/migrations/1579106959311_update_permission_user_public_table_documents/up.yaml Normal file
View File

@@ -0,0 +1,30 @@
- args:
permission:
columns:
- name
- thumb_url
- uploaded_by
- url
- created_at
- updated_at
- id
- jobid
filter:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: documents
schema: public
type: create_update_permission

6
hasura/migrations/1579106966146_update_permission_user_public_table_documents/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: user
table:
name: documents
schema: public
type: drop_delete_permission

17
hasura/migrations/1579106966146_update_permission_user_public_table_documents/up.yaml Normal file
View File

@@ -0,0 +1,17 @@
- args:
permission:
filter:
job:
bodyshop:
associations:
_and:
- user:
authid:
_eq: X-Hasura-User-Id
- active:
_eq: true
role: user
table:
name: documents
schema: public
type: create_delete_permission