Added Video support for document upload. IO-524

2021-02-04 14:15:16 -08:00
parent dcd9cfc331
commit 6e33b5fd6b
5 changed files with 42 additions and 38 deletions
--- a/README.MD
+++ b/README.MD
@@ -12,7 +12,7 @@ To Start Hasura CLI:
 npx hasura console --admin-secret Dev-BodyShopAppBySnaptSoftware!

 Migrating to Staging:
-npx hasura migrate apply --up 10 --endpoint https://db.imex.online/ --admin-secret Production-ImEXOnline!@#
+npx hasura migrate apply --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'

 NGROK TEsting:

@@ -21,6 +21,6 @@ NGROK TEsting:
 Finding deadfiles - run from client directory
 npx deadfile ./src/index.js --exclude build templates

-cd client && yarn build && cd build && scp -r ** imex@prod-tor1.imex.online:~/bodyshop/client/build && cd .. &&cd ..
+cd client && yarn build && cd build && scp -r \*\* imex@prod-tor1.imex.online:~/bodyshop/client/build && cd .. &&cd ..

 gq https://bodyshop-dev-db.herokuapp.com/v1/graphql -H "X-Hasura-Admin-Secret: Dev-BodyShopAppBySnaptSoftware\!" --introspect > schema.graphql
--- a/client/src/components/documents-upload/documents-upload.component.jsx
+++ b/client/src/components/documents-upload/documents-upload.component.jsx
@@ -1,5 +1,5 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Button, Upload } from "antd";
+import { Upload } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -50,11 +50,7 @@ export function DocumentsUploadComponent({
            <UploadOutlined />
          </p>
          <p className="ant-upload-text">
-            Click or drag file to this area to upload
-          </p>
-          <p className="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from
-            uploading company data or other band files
+            Click or drag files to this area to upload.
          </p>
        </>
      )}
--- a/client/src/components/documents-upload/documents-upload.utility.js
+++ b/client/src/components/documents-upload/documents-upload.utility.js
@@ -93,9 +93,10 @@ export const uploadToCloudinary = async (
  formData.append("timestamp", timestamp);
  formData.append("signature", signature);

-  //Upload request to Cloudinary
  const cloudinaryUploadResponse = await cleanAxios.post(
-    `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
+    `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+      fileType
+    )}/upload`,
    formData,
    {
      ...options,
@@ -156,3 +157,13 @@ export const uploadToCloudinary = async (
    return;
  }
 };
+
+export function DetermineFileType(filetype) {
+  console.log("Checking Type", filetype, filetype.startsWith("video"));
+  if (!filetype) return "auto";
+  else if (filetype.startsWith("image")) return "image";
+  else if (filetype.startsWith("video")) return "video";
+  else if (filetype.startsWith("application/pdf")) return "image";
+
+  return "auto";
+}
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -23,30 +23,28 @@ function JobsDocumentsComponent({
        console.log("value", value);
        if (value.type.includes("image")) {
          acc.images.push({
-            src: `${
-              value.type.startsWith("video")
-                ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
-                : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
-            }/${value.key}`,
-            thumbnail: `${
-              value.type.startsWith("video")
-                ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
-                : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
-            }/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${
-              value.key
-            }`,
+            src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
+            thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
            thumbnailHeight: 225,
            thumbnailWidth: 225,
            isSelected: false,
            key: value.key,
            id: value.id,
+            type: value.type,
+            tags: [{ value: value.type, title: value.type }],
          });
        } else {
          acc.other.push({
-            src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
-            thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
+            src: `${
+              value.type.startsWith("video")
+                ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
+                : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
+            }/q_auto/${value.key}`,
+            thumbnail: value.type.startsWith("video")
+              ? `${process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT}/c_fill,f_png,h_250,w_250/${value.key}`
+              : `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
            tags: [
-              { value: "PDF", title: t("documents.labels.doctype") },
+              { value: value.type, title: value.type },
              ...(value.bill
                ? [
                    {
@@ -66,6 +64,7 @@ function JobsDocumentsComponent({
            isSelected: false,
            key: value.key,
            id: value.id,
+            type: value.type,
          });
        }

@@ -91,6 +90,12 @@ function JobsDocumentsComponent({
          />
        </Space>
      </div>
+      <DocumentsUploadComponent
+        jobId={jobId}
+        billId={billId}
+        callbackAfterUpload={billsCallback || refetch}
+        tagsArray={["test"]}
+      ></DocumentsUploadComponent>
      <div style={{ marginTop: "2rem" }}>
        <Card title={t("jobs.labels.documents-images")}>
          <Gallery
@@ -112,12 +117,6 @@ function JobsDocumentsComponent({
              });
            }}
          />
-          <DocumentsUploadComponent
-            jobId={jobId}
-            billId={billId}
-            callbackAfterUpload={billsCallback || refetch}
-            tagsArray={["test"]}
-          ></DocumentsUploadComponent>
        </Card>

        <Card title={t("jobs.labels.documents-other")}>
@@ -141,12 +140,6 @@ function JobsDocumentsComponent({
              });
            }}
          />
-          <DocumentsUploadComponent
-            jobId={jobId}
-            billId={billId}
-            callbackAfterUpload={billsCallback || refetch}
-            tagsArray={["test"]}
-          ></DocumentsUploadComponent>
        </Card>
      </div>
    </div>
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx
@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { DELETE_DOCUMENT } from "../../graphql/documents.queries";
 import cleanAxios from "../../utils/CleanAxios";
+import { DetermineFileType } from "../documents-upload/documents-upload.utility";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid

 export default function JobsDocumentsDeleteButton({
@@ -20,6 +21,7 @@ export default function JobsDocumentsDeleteButton({
    ...galleryImages.other.filter((image) => image.isSelected),
  ];
  const [loading, setLoading] = useState(false);
+
  const handleDelete = () => {
    logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
    setLoading(true);
@@ -45,7 +47,9 @@ export default function JobsDocumentsDeleteButton({

          cleanAxios
            .post(
-              `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/destroy`,
+              `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+                image.type
+              )}/destroy`,
              formData,
              options
            )