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

Fixed scaling of images. Fixed server.js issues for production

Browse Source
This commit is contained in:
Patrick Fic
2020-01-15 22:24:35 -08:00
parent 1134f26282
commit 2971c72f76
11 changed files with 246 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.6.1">
<babeledit_project be_version="2.6.1" version="1.2">
<!--
BabelEdit project file
@@ -18,6 +18,110 @@
<folder_node>
<name>translation</name>
<children>
<folder_node>
<name>documents</name>
<children>
<folder_node>
<name>errors</name>
<children>
<concept_node>
<name>getpresignurl</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>insert</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>upload</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>successes</name>
<children>
<concept_node>
<name>insert</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
</children>
</folder_node>
<folder_node>
<name>general</name>
<children>

5
client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
View File

@@ -10,8 +10,7 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
<CardTemplate
loading={loading}
title={t("jobs.labels.cards.customer")}
extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}
>
extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}>
{data ? (
<span>
<div>{`${data?.pit_owner_first_name ??
@@ -25,7 +24,7 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
</a>
) : null}
<div>{`${data?.owner.preferred_contact ?? ""}`}</div>
<div>{`${data?.owner?.preferred_contact ?? ""}`}</div>
</span>
) : null}
</CardTemplate>

2
client/src/components/jobs-documents/jobs-documents.container.jsx
View File

@@ -23,7 +23,7 @@ export default function JobsDocumentsContainer({ jobId }) {
return (
<JobDocuments
data={data}
data={data.documents}
jobId={jobId}
shopId={
shopData.data?.bodyshops[0]?.id

78
client/src/components/jobs-documents/jobs-documents.page.jsx
View File

@@ -1,10 +1,11 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Upload, Modal, Icon, Button } from "antd";
import { Upload, Modal, Icon, notification } from "antd";
import axios from "axios";
import "./jobs-documents.styles.scss";
import Resizer from "react-image-file-resizer";
//import { Resizer } from "../../utils/resizer";
import { useMutation } from "react-apollo";
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
function getBase64(file) {
return new Promise((resolve, reject) => {
@@ -16,11 +17,25 @@ function getBase64(file) {
}
function JobsDetailPage({ shopId, jobId, loading, data }) {
//const { t } = useTranslation();
const { t } = useTranslation();
const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
console.log("data", data);
const [state, setState] = useState({
previewVisible: false,
previewImage: "",
fl: data.reduce((acc, value) => {
acc.push({
uid: value.id,
url: value.url,
name: value.name,
status: "done"
});
return acc;
}, []),
fileList: [
{
uid: "-1",
@@ -41,24 +56,22 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
console.log("handleUpload Props:", ev);
Resizer.imageFileResizer(
ev.file,
3000,
3000,
3500,
3500,
"JPEG",
85,
75,
0,
uri => {
let file = new File([uri], ev.file.name, {
//type: ev.file.type,
uid: ev.file.uid
});
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;
console.log("Preparing the upload ");
let key = `${shopId}/${jobId}/${fileName}`;
//URL is using the proxy set in pacakges.json.
axios
.post("/sign_s3", {
fileName: `${shopId}/${jobId}/${fileName}`,
fileName: key,
fileType
})
.then(response => {
@@ -66,8 +79,6 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
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: {
@@ -79,16 +90,40 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
.put(signedRequest, file, options)
.then(result => {
console.log("Response from s3", result);
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("Inside Error here.", error);
alert("ERROR " + JSON.stringify(error));
console.log("Error uploading to S3", error);
notification["error"]({
message: t("documents.errors.insert") + JSON.stringify(error)
});
});
})
.catch(error => {
console.log("Outside Error here.", error);
alert(JSON.stringify(error));
notification["error"]({
message:
t("documents.errors.getpresignurl") + JSON.stringify(error)
});
});
},
"blob"
@@ -115,7 +150,7 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
const uploadButton = (
<div>
<Icon type='plus' />
<div className='ant-upload-text'>Upload</div>
<div className='ant-upload-text'>{t("documents.labels.upload")}</div>
</div>
);
@@ -123,11 +158,6 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
<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}

2
client/src/graphql/documents.queries.js
View File

@@ -13,7 +13,7 @@ export const GET_DOCUMENTS_BY_JOB = gql`
export const INSERT_NEW_DOCUMENT = gql`
mutation INSERT_NEW_DOCUMENT($docInput: [documents_insert_input!]!) {
insert_ducments(objects: $docInput) {
insert_documents(objects: $docInput) {
returning {
id
}

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

@@ -29,7 +29,6 @@ function JobsDetailPage({ match, location }) {
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>

12
client/src/translations/en_us/common.json
View File

@@ -1,5 +1,17 @@
{
"translation": {
"documents": {
"errors": {
"getpresignurl": "Error obtaining presigned URL for document. ",
"insert": "Unable to upload file."
},
"labels": {
"upload": "Upload"
},
"successes": {
"insert": "Uploaded document successfully. "
}
},
"general": {
"labels": {
"in": "In",

12
client/src/translations/es/common.json
View File

@@ -1,5 +1,17 @@
{
"translation": {
"documents": {
"errors": {
"getpresignurl": "Error al obtener la URL prescrita para el documento.",
"insert": "Incapaz de cargar el archivo."
},
"labels": {
"upload": "Subir"
},
"successes": {
"insert": "Documento cargado con éxito."
}
},
"general": {
"labels": {
"in": "en",

12
client/src/translations/fr/common.json
View File

@@ -1,5 +1,17 @@
{
"translation": {
"documents": {
"errors": {
"getpresignurl": "Erreur lors de l'obtention de l'URL présignée pour le document.",
"insert": "Incapable de télécharger le fichier."
},
"labels": {
"upload": "Télécharger"
},
"successes": {
"insert": "Document téléchargé avec succès."
}
},
"general": {
"labels": {
"in": "dans",

28
s3upload.js
View File

@@ -37,7 +37,33 @@ exports.sign_s3 = (req, res) => {
res.json({ success: false, error: err });
}
// Data payload of what we are sending back, the url of the signedRequest and a URL where we can access the content after its saved.
const returnData = {
const returnData = {
signedRequest: data,
url: `https://${S3_BUCKET}.s3.amazonaws.com/${fileName}`
};
// Send it all back
res.json({ success: true, data: { returnData } });
});
};
exports.get_s3 = (req, res) => {
const s3 = new aws.S3(); // Create a new instance of S3
const fileName = req.body.fileName;
//const fileType = req.body.fileType;
// Set up the payload of what we are sending to the S3 api
const s3Params = {
Bucket: S3_BUCKET,
Key: fileName,
Expires: 500
};
// Make a request to the S3 API to get a signed URL which we can use to upload our file
s3.getSignedUrl("getObject", s3Params, (err, data) => {
if (err) {
console.log(err);
res.json({ success: false, error: err });
}
// Data payload of what we are sending back, the url of the signedRequest and a URL where we can access the content after its saved.
const returnData = {
signedRequest: data,
url: `https://${S3_BUCKET}.s3.amazonaws.com/${fileName}`
};

28
server.js
View File

@@ -6,8 +6,8 @@ const compression = require("compression");
var enforce = require("express-sslify");
if (process.env.NODE_ENV !== "production") require("dotenv").config();
const https = require('https');
const fs = require('fs');
const https = require("https");
const fs = require("fs");
const app = express();
const port = process.env.PORT || 5000;
@@ -32,17 +32,29 @@ if (process.env.NODE_ENV === "production") {
var s3upload = require("./s3upload");
app.post("/sign_s3", s3upload.sign_s3);
app.get("/sign_s3", s3upload.get_s3);
app.get("/test", function(req, res) {
res.json({ success: true });
});
https.createServer({
key: fs.readFileSync('./key.pem'),
cert: fs.readFileSync('./cert.pem'),
passphrase: 'Wl0d8k@!'
}, app)
.listen(5000);
if (process.env.NODE_ENV === "production") {
app.listen(port, error => {
if (error) throw error;
console.log("Server running on port " + port);
});
} else {
https
.createServer(
{
key: fs.readFileSync("./key.pem"),
cert: fs.readFileSync("./cert.pem"),
passphrase: "Wl0d8k@!"
},
app
)
.listen(port);
}
// app.listen(port, error => {
// if (error) throw error;