Doc upload in progress.

client/package.json

@@ -10,6 +10,7 @@
     "apollo-link-error": "^1.1.12",
     "apollo-link-logger": "^1.2.3",
     "apollo-link-ws": "^1.0.19",
+    "axios": "^0.19.1",
     "chart.js": "^2.9.3",
     "dotenv": "^8.2.0",
     "firebase": "^7.5.0",

client/src/pages/jobs-documents/jobs-documents.container.jsx

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

client/src/pages/jobs-documents/jobs-documents.page.jsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Upload, Modal, Icon } 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;
+  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 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("https://localhost:5000/sign_s3", {
+        fileName: fileName,
+        fileType: fileType
+      })
+      .then(response => {
+        var returnData = response.data.data.returnData;
+        var signedRequest = returnData.signedRequest;
+        var url = returnData.url;
+        this.setState({ 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");
+            this.setState({ success: true });
+          })
+          .catch(error => {
+            alert("ERROR " + JSON.stringify(error));
+          });
+      })
+      .catch(error => {
+        console.log("Error here.");
+        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 = props => {
+    console.log("Transforming file.", props);
+    //Make the image smaller here.
+    return props;
+  };
+
+  return (
+    <div className='clearfix'>
+      <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;

client/src/pages/jobs-documents/jobs-documents.styles.scss

@@ -0,0 +1,10 @@
+/* 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;
+}

client/src/pages/manage/manage.page.jsx

@@ -12,6 +12,9 @@ const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 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")
+);
 
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
@@ -31,16 +34,20 @@ export default function Manage({ match }) {
       <Content>
         <ErrorBoundary>
           <Suspense
-            fallback={<div>TODO: Suspended Loading in Manage Page...</div>}
-          >
+            fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>
             <Route exact path={`${match.path}`} component={WhiteBoardPage} />
 
             <Route exact path={`${match.path}/jobs`} component={JobsPage} />
             <Route
+              exact
               path={`${match.path}/jobs/:jobId`}
               component={JobsDetailPage}
             />
-
+            <Route
+              exact
+              path={`${match.path}/jobs/:jobId/documents`}
+              component={JobsDocumentsPage}
+            />
             <Route
               exact
               path={`${match.path}/profile`}

client/src/translations/en_us/common.json

@@ -97,6 +97,7 @@
 			"app": "Bodyshop by ImEX Systems",
 			"jobs": "All Jobs | $t(titles.app)",
 			"jobsdetail": "Job {{ro_number}} | $t(titles.app)",
+			"jobsdocuments": "Job Documents {{ro_number}} | $t(titles.app)",
 			"profile": "My Profile | $t(titles.app)"
 		},
 		"vehicles": {

client/src/translations/es/common.json

@@ -97,7 +97,8 @@
 			"app": "Carrocería de ImEX Systems",
 			"jobs": "Todos los trabajos | $t(titles.app)",
 			"jobsdetail": "Trabajo {{ro_number}} | $t(titles.app)",
-			"profile": "Mi perfil | $ t (títulos.app)"
+			"jobsdocuments": "Documentos de trabajo {{ro_number}} | $ t (títulos.app)",
+			"profile": "Mi perfil | $t(titles.app)"
 		},
 		"vehicles": {
 			"fields": {

client/src/translations/fr/common.json

@@ -97,7 +97,8 @@
 			"app": "Carrosserie par ImEX Systems",
 			"jobs": "Tous les emplois | $t(titles.app)",
 			"jobsdetail": "Travail {{ro_number}} | $t(titles.app)",
-			"profile": "Mon profil | $ t (titres.app)"
+			"jobsdocuments": "Documents de travail {{ro_number}} | $ t (titres.app)",
+			"profile": "Mon profil | $t(titles.app)"
 		},
 		"vehicles": {
 			"fields": {

client/yarn.lock

@@ -2627,6 +2627,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c"
   integrity sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==
 
+axios@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.1.tgz#8a6a04eed23dfe72747e1dd43c604b8f1677b5aa"
+  integrity sha512-Yl+7nfreYKaLRvAvjNPkvfjnQHJM1yLBY3zhqAwcJSwR/6ETkanUgylgtIvkvz0xJ+p/vZuNw8X7Hnb7Whsbpw==
+  dependencies:
+    follow-redirects "1.5.10"
+
 axobject-query@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.1.tgz#2a3b1271ec722d48a4cd4b3fcc20c853326a49a7"
@@ -4089,6 +4096,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -5303,6 +5317,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
@@ -11025,8 +11046,6 @@ rxjs@^6.4.0, rxjs@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
   integrity sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==
-  dependencies:
-    tslib "^1.9.0"
 
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"