Doc upload in progress.

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": {