Merge pull request #844 from coronasafe/develop

V 4.6
ohcnetwork · Oct 26, 2020 · 9217dd4 · 9217dd4
2 parents 03c6a6e + ccede52
commit 9217dd4
Show file tree

Hide file tree

Showing 13 changed files with 369 additions and 296 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "raviger": "^1.4.5",
     "react": "^16.13.1",
     "react-csv": "^2.0.3",
+    "react-csv-reader": "^3.1.1",
     "react-dom": "^16.13.1",
     "react-google-recaptcha": "^2.1.0",
     "react-leaflet-location-picker": "^1.4.2",

diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
@@ -137,6 +137,12 @@ export const BED_TYPES: Array<OptionsType> = [
   { id: 30, text: "Covid Beds" },
   { id: 40, text: "KASP Beds" },
   { id: 50, text: "KASP ICU beds" },
+  { id: 60, text: "KASP Oxygen beds" },
+  { id: 70, text: "KASP Ventilator beds" },
+  { id: 100, text: "Covid Ventilators" },
+  { id: 110, text: "Covid ICU" },
+  { id: 120, text: "Covid Oxygen beds" },
+  { id: 150, text: "Oxygen beds" },
 ];
 
 export const DOCTOR_SPECIALIZATION: Array<OptionsType> = [

diff --git a/src/Components/ExternalResult/ExternalResultUpload.tsx b/src/Components/ExternalResult/ExternalResultUpload.tsx
@@ -3,106 +3,113 @@ import { navigate } from "raviger";
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { externalResultUploadCsv } from "../../Redux/actions";
-
+import CSVReader from "react-csv-reader";
+const get = require('lodash.get');
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ExternalResultUpload() {
   const dispatch: any = useDispatch();
   const [uploadFile, setUploadFile] = useState("");
-  const [errors, setErrors] = useState<any>({
-    name: "",
-  });
-
-  const validateForm = () => {
-    let formIsValid = true;
-    let err = Object.assign({}, errors);
-    if (!uploadFile) {
-      formIsValid = false;
-      err.uploadFile = "Please choose a file to upload";
-    }
-    setErrors(err);
-    return formIsValid;
+  const [csvData, setCsvData] = useState(new Array<any>());
+  const [errors, setErrors] = useState<any>({});
+  const handleForce = (data: any, fileInfo: any) => {
+    setCsvData(data)
   };
 
-  const handleFileUpload = (e: any) => {
-    const regex = new RegExp("(.*?).(csv)$");
-    if (regex.test(e.target.files[0].name)) {
-      const err = Object.assign({}, errors);
-      if (err.uploadFile) {
-        err.uploadFile = null;
-      }
-      setErrors(err);
-      setUploadFile(e.target.files[0]);
-    } else {
-      console.log("Incompatible File Type :  Please Upload a CSV File");
-    }
+  const papaparseOptions = {
+    header: true,
+    dynamicTyping: true,
+    skipEmptyLines: true,
+    transformHeader: (header: string) => header.toLowerCase().replace(/\W/g, "_")
   };
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
-
-    const valid = validateForm();
-    if (!valid) {
-      return;
+    const valid = true
+    const data = {
+      sample_tests: csvData,
     }
 
-    let form = document.getElementById("uploadForm") as HTMLFormElement
-    let formData = form ? new FormData(form) : new FormData();
-
-    dispatch(externalResultUploadCsv(formData)).then((resp: any) => {
-      const res = resp && resp.data;
-      if (res && res.success) {
-        console.log(res.message);
-      } else {
-        console.log(res.message);
-      }
-    });
+    if (valid) {
+      setErrors({})
+      dispatch(externalResultUploadCsv(data)).then((resp: any) => {
+        console.log(resp)
+        console.log(resp.status)
+        if (resp && resp.status === 202) {
+          navigate('/external_results')
+        } else {
+          setErrors(resp.data)
+        }
+      });
+    }
   };
 
-  console.log(uploadFile)
+
   return (
     <div className="px-6">
       <PageTitle title="Upload External Results" hideBack className="mt-4" />
-      <form id="uploadForm">
-        <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
-          <div className="bg-white p-4 shadow rounded-lg">
-            <label
-              htmlFor="file"
-              className="block text-sm leading-5 font-medium text-gray-700 sm:mt-px sm:pt-2"
-            >
-              <div className="mt-2 sm:mt-0 sm:col-span-2">
-                <div className="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
-                  <div className="text-center">
-                    <p className="mt-1 text-sm text-gray-600">
-                      <button
-                        type="button"
-                        className="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition duration-150 ease-in-out"
-                      >
-                        Upload a CSV File
-                    </button>
-                    </p>
-                    <p className="mt-1 text-xs text-gray-500">CSV up to 5MB</p>
-                  </div>
+      <div className="max-w-3xl mx-auto mt-6">
+        <div className="p-4 ">
+          <div
+            className="block text-sm leading-5 font-medium text-gray-700 sm:mt-px sm:pt-2"
+          >
+            <div className="mt-2 sm:mt-0 sm:col-span-2">
+              <div className="mx-auto max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+                <div className="text-center">
+                  <CSVReader
+                    cssClass="react-csv-input"
+                    label="Select a CSV file in the specified format"
+                    onFileLoaded={handleForce}
+                    parserOptions={papaparseOptions}
+                  />
+                  <a className="mt-2 text-xs font-light" href="https://docs.google.com/spreadsheets/d/17VfgryA6OYSYgtQZeXU9mp7kNvLySeEawvnLBO_1nuE/edit?usp=sharing" target="blank">
+                    Sample Format
+                  </a>
                 </div>
               </div>
-              <input
-                type="file"
-                color="primary"
-                className="hidden custom-file-input "
-                id="file"
-                name="file"
-                onChange={handleFileUpload}
-              />
-            </label>
-            <div className="mt-2">
-              <button className="btn btn-primary" onClick={handleSubmit}>
-                Save
-              </button>
             </div>
           </div>
+          <div className=" bg-white rounded shadow">
+            {
+              csvData.map((data: any, index: number) => {
+
+                return (
+                  <div key={index} className="p-2 border-b flex">
+                    <div className="p-2 mr-2">
+                      {index + 1}
+                    </div>
+                    <div className="p-2 mr-2 md:w-1/3">
+                      {data.name}
+                    </div>
+
+                    <div className="p-2 mr-2">
+                      {errors && errors[index + 1] && <div>
+                        {
+                          Object.keys(errors[index + 1]).map((data: any, index: number) => {
+                            return (
+                              <div key={index}>
+                                {data} - {errors[index + 1] && errors[index + 1][data]}
+                              </div>);
+                          })
+                        }
+                      </div>
+                      }
+                    </div>
+                  </div>);
+              })
+            }
+          </div>
+          <div className="">
+
+          </div>
+          <div className="mt-2">
+            <button className="btn btn-primary" onClick={handleSubmit}>
+              Save
+              </button>
+          </div>
         </div>
-      </form>
-    </div>
+      </div>
+    </div >
   );
 }