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

Added document delete + refined document upload

Browse Source
This commit is contained in:
Patrick Fic
2020-01-24 12:52:13 -08:00
parent 5f256c204d
commit 066b900409
8 changed files with 152 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
bodyshop_translations.babel
View File

@@ -24,6 +24,27 @@
<folder_node>
<name>errors</name>
<children>
<concept_node>
<name>deletes3</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>getpresignurl</name>
<definition_loaded>false</definition_loaded>
@@ -118,6 +139,27 @@
<folder_node>
<name>successes</name>
<children>
<concept_node>
<name>delete</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>

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

@@ -4,7 +4,10 @@ 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 {
INSERT_NEW_DOCUMENT,
DELETE_DOCUMENT
} from "../../graphql/documents.queries";
import "./jobs-documents.styles.scss";
import { generateCdnThumb } from "../../utils/DocHelpers";
@@ -20,6 +23,7 @@ function getBase64(file) {
function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
const { t } = useTranslation();
const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
const [deleteDocument] = useMutation(DELETE_DOCUMENT);
const [state, setState] = useState({
previewVisible: false,
@@ -32,7 +36,9 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
uid: value.id,
url: value.thumb_url,
name: value.name,
status: "done"
status: "done",
full_url: value.url,
key: value.key
});
return acc;
}, [])
@@ -69,7 +75,7 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
axios
.put(signedRequest, file, options)
.then(response => {
onSuccess(response.body);
console.log("response from axios", response);
insertNewDocument({
variables: {
docInput: [
@@ -83,7 +89,14 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
]
}
}).then(r => {
console.log(r);
onSuccess({
uid: r.data.insert_documents.returning[0].id,
url: r.data.insert_documents.returning[0].thumb_url,
name: r.data.insert_documents.returning[0].name,
status: "done",
full_url: r.data.insert_documents.returning[0].url,
key: r.data.insert_documents.returning[0].key
});
notification["success"]({
message: t("documents.successes.insert")
});
@@ -135,23 +148,62 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
const handleCancel = () => setState({ ...state, previewVisible: false });
const handlePreview = async file => {
if (!file.url && !file.preview) {
if (!file.full_url && !file.url) {
file.preview = await getBase64(file.originFileObj);
}
setState({
...state,
previewImage: file.url || file.preview,
previewImage: file.full_url || file.url,
previewVisible: true
});
};
const handleChange = props => {
const { fileList } = props;
setFileList(fileList);
const { event, fileList, file } = props;
//Required to ensure that the state accurately reflects new data and that images can be deleted in feeded.
if (!event) {
//SPread the new file in where the old one was.
const newFileList = fileList.map(i =>
i.uid === file.uid ? Object.assign({}, i, file.response) : i
);
setFileList(newFileList);
} else {
setFileList(fileList);
}
};
const { previewVisible, previewImage } = state;
const handleRemove = file => {
console.log("file", file);
//Remove the file on S3
axios
.post("/delete_s3", { fileName: file.key })
.then(response => {
//Delete the record in our database.
if (response.status === 200) {
deleteDocument({ variables: { id: file.uid } }).then(r => {
notification["success"]({
message: t("documents.successes.delete")
});
});
} else {
notification["error"]({
message:
1 +
t("documents.errors.deletes3") +
JSON.stringify(response.message)
});
}
})
.catch(error => {
notification["error"]({
message: "2" + t("documents.errors.deletes3") + JSON.stringify(error)
});
});
};
return (
<div className='clearfix'>
<button
@@ -160,18 +212,13 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
bucket: process.env.REACT_APP_S3_BUCKET,
key:
"52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/c8ca5761-681a-4bb3-ab76-34c447357be3/Invoice_353284489.pdf",
edits: {
resize: {
height: 100,
width: 100
}
}
edits: { format: "jpeg" }
});
const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
console.log("url", url);
}}>
H
Test PDF
</button>
<Upload.Dragger
customRequest={handleUpload}
@@ -180,6 +227,7 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
fileList={fileList}
multiple={true}
onPreview={handlePreview}
onRemove={handleRemove}
onChange={handleChange}>
<p className='ant-upload-drag-icon'>
<Icon type='inbox' />

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

@@ -7,6 +7,7 @@ export const GET_DOCUMENTS_BY_JOB = gql`
url
thumb_url
name
key
}
}
`;
@@ -14,6 +15,20 @@ export const GET_DOCUMENTS_BY_JOB = gql`
export const INSERT_NEW_DOCUMENT = gql`
mutation INSERT_NEW_DOCUMENT($docInput: [documents_insert_input!]!) {
insert_documents(objects: $docInput) {
returning {
id
url
thumb_url
name
key
}
}
}
`;
export const DELETE_DOCUMENT = gql`
mutation DELETE_DOCUMENT($id: uuid) {
delete_documents(where: { id: { _eq: $id } }) {
returning {
id
}

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

@@ -2,6 +2,7 @@
"translation": {
"documents": {
"errors": {
"deletes3": "Error deleting document from storage. ",
"getpresignurl": "Error obtaining presigned URL for document. ",
"insert": "Unable to upload file.",
"nodocuments": "There are no documents."
@@ -10,6 +11,7 @@
"upload": "Upload"
},
"successes": {
"delete": "Document deleted successfully.",
"insert": "Uploaded document successfully. "
}
},

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

@@ -2,6 +2,7 @@
"translation": {
"documents": {
"errors": {
"deletes3": "Error al eliminar el documento del almacenamiento.",
"getpresignurl": "Error al obtener la URL prescrita para el documento.",
"insert": "Incapaz de cargar el archivo.",
"nodocuments": "No hay documentos"
@@ -10,6 +11,7 @@
"upload": "Subir"
},
"successes": {
"delete": "Documento eliminado con éxito.",
"insert": "Documento cargado con éxito."
}
},

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

@@ -2,6 +2,7 @@
"translation": {
"documents": {
"errors": {
"deletes3": "Erreur lors de la suppression du document du stockage.",
"getpresignurl": "Erreur lors de l'obtention de l'URL présignée pour le document.",
"insert": "Incapable de télécharger le fichier.",
"nodocuments": "Il n'y a pas de documents."
@@ -10,6 +11,7 @@
"upload": "Télécharger"
},
"successes": {
"delete": "Le document a bien été supprimé.",
"insert": "Document téléchargé avec succès."
}
},

22
s3upload.js
View File

@@ -71,3 +71,25 @@ exports.get_s3 = (req, res) => {
res.json({ success: true, data: { returnData } });
});
};
exports.delete_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
console.log("fileName", req.body);
const s3Params = {
Bucket: S3_BUCKET,
Key: fileName
};
s3.deleteObject(s3Params, function(err, data) {
if (err) {
res.json({ success: false, message: err.message });
}
// error
else {
res.json({ success: true, data });
} // deleted
});
};

7
server.js
View File

@@ -21,10 +21,11 @@ app.use(cors());
var s3upload = require("./s3upload");
app.post("/sign_s3", s3upload.sign_s3);
app.get("/sign_s3", s3upload.get_s3);
app.post("/delete_s3", s3upload.delete_s3);
app.get("/test", function(req, res) {
res.json({ success: true });
});
// app.get("/test", function(req, res) {
// res.json({ success: true });
// });
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "client/build")));