Added file extesions for documents IO-525

client/src/components/documents-upload/documents-upload.utility.js

@@ -20,8 +20,10 @@ export const handleUpload = (ev, context) => {
   const { bodyshop, jobId } = context;
 
   let key = `${bodyshop.id}/${jobId}/${ev.file.name.replace(/\.[^/.]+$/, "")}`;
+  let extension = ev.file.name.split(".").pop();
   uploadToCloudinary(
     key,
+    extension,
     ev.file.type,
     ev.file,
     onError,
@@ -33,6 +35,7 @@ export const handleUpload = (ev, context) => {
 
 export const uploadToCloudinary = async (
   key,
+  extension,
   fileType,
   file,
   onError,
@@ -94,7 +97,7 @@ export const uploadToCloudinary = async (
   formData.append("signature", signature);
 
   const cloudinaryUploadResponse = await cleanAxios.post(
-    `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+    `${process.env.REACT_APP_CLOUDINARY_ENDPOINT_API}/${DetermineFileType(
       fileType
     )}/upload`,
     formData,
@@ -129,6 +132,7 @@ export const uploadToCloudinary = async (
           key: key,
           billid: billId,
           type: fileType,
+          extension: extension,
         },
       ],
     },
@@ -164,6 +168,7 @@ export function DetermineFileType(filetype) {
   else if (filetype.startsWith("image")) return "image";
   else if (filetype.startsWith("video")) return "video";
   else if (filetype.startsWith("application/pdf")) return "image";
+  else if (filetype.startsWith("application")) return "raw";
 
   return "auto";
 }

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -1,12 +1,13 @@
+import { FileExcelFilled } from "@ant-design/icons";
 import { Card, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import Gallery from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
 import DocumentsUploadComponent from "../documents-upload/documents-upload.component";
+import { DetermineFileType } from "../documents-upload/documents-upload.utility";
 import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
 import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
 import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.selectall.component";
-
 function JobsDocumentsComponent({
   data,
   jobId,
@@ -20,29 +21,47 @@ function JobsDocumentsComponent({
   useEffect(() => {
     let documents = data.reduce(
       (acc, value) => {
-        console.log("value", value);
+        const fileType = DetermineFileType(value.type);
-        if (value.type.includes("image")) {
+        if (value.type.startsWith("image")) {
           acc.images.push({
-            src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
+            src: `${
-            thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
+              process.env.REACT_APP_CLOUDINARY_ENDPOINT
+            }/${DetermineFileType(value.type)}/upload/${value.key}`,
+            thumbnail: `${
+              process.env.REACT_APP_CLOUDINARY_ENDPOINT
+            }/${DetermineFileType(value.type)}/upload/${
+              process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
+            }/${value.key}`,
             thumbnailHeight: 225,
             thumbnailWidth: 225,
             isSelected: false,
             key: value.key,
+            extension: value.extension,
             id: value.id,
             type: value.type,
             tags: [{ value: value.type, title: value.type }],
           });
         } else {
+          let thumb;
+          switch (fileType) {
+            case "video":
+              thumb = `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${fileType}/upload/c_fill,f_png,h_250,w_250/${value.key}`;
+              break;
+            case "raw":
+              thumb = "";
+              break;
+            default:
+              thumb = `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${fileType}/upload/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`;
+              break;
+          }
+
           acc.other.push({
             src: `${
-              value.type.startsWith("video")
+              process.env.REACT_APP_CLOUDINARY_ENDPOINT
-                ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
+            }/${fileType}/upload/${fileType === "video" ? "q_auto/" : ""}${
-                : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
+              value.key
-            }/q_auto/${value.key}`,
+            }${fileType === "raw" ? `.${value.extension}` : ""}`,
-            thumbnail: value.type.startsWith("video")
+            thumbnail: thumb,
-              ? `${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: value.type, title: value.type },
               ...(value.bill
@@ -62,6 +81,7 @@ function JobsDocumentsComponent({
             thumbnailHeight: 225,
             thumbnailWidth: 225,
             isSelected: false,
+            extension: value.extension,
             key: value.key,
             id: value.id,
             type: value.type,
@@ -124,6 +144,13 @@ function JobsDocumentsComponent({
             images={galleryImages.other}
             backdropClosesModal={true}
             enableLightbox={false}
+            thumbnailStyle={() => {
+              return {
+                backgroundImage: <FileExcelFilled />,
+                height: "100%",
+                width: "100%",
+              };
+            }}
             onClickThumbnail={(index) => {
               window.open(
                 galleryImages.other[index].src,

client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx

@@ -47,9 +47,9 @@ export default function JobsDocumentsDeleteButton({
 
           cleanAxios
             .post(
-              `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+              `${
-                image.type
+                process.env.REACT_APP_CLOUDINARY_ENDPOINT_API
-              )}/destroy`,
+              }/${DetermineFileType(image.type)}/destroy`,
               formData,
               options
             )

client/src/graphql/documents.queries.js

@@ -10,6 +10,7 @@ export const GET_DOCUMENTS_BY_JOB = gql`
       name
       key
       type
+      extension
       bill {
         id
         invoice_number

hasura/migrations/1612478848106_alter_table_public_documents_add_column_extension/down.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: ALTER TABLE "public"."documents" DROP COLUMN "extension";
+  type: run_sql

hasura/migrations/1612478848106_alter_table_public_documents_add_column_extension/up.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: ALTER TABLE "public"."documents" ADD COLUMN "extension" text NULL;
+  type: run_sql

hasura/migrations/1612478855295_update_permission_user_public_table_documents/down.yaml

@@ -0,0 +1,34 @@
+- args:
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: drop_insert_permission
+- args:
+    permission:
+      check:
+        job:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
+      columns:
+      - id
+      - created_at
+      - updated_at
+      - uploaded_by
+      - jobid
+      - name
+      - key
+      - billid
+      - type
+      set: {}
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: create_insert_permission

hasura/migrations/1612478855295_update_permission_user_public_table_documents/up.yaml

@@ -0,0 +1,35 @@
+- args:
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: drop_insert_permission
+- args:
+    permission:
+      check:
+        job:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
+      columns:
+      - billid
+      - created_at
+      - extension
+      - id
+      - jobid
+      - key
+      - name
+      - type
+      - updated_at
+      - uploaded_by
+      set: {}
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: create_insert_permission

hasura/migrations/1612478861357_update_permission_user_public_table_documents/down.yaml

@@ -0,0 +1,35 @@
+- args:
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: drop_select_permission
+- args:
+    permission:
+      allow_aggregations: false
+      columns:
+      - key
+      - name
+      - type
+      - uploaded_by
+      - created_at
+      - updated_at
+      - id
+      - billid
+      - jobid
+      computed_fields: []
+      filter:
+        job:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: create_select_permission

hasura/migrations/1612478861357_update_permission_user_public_table_documents/up.yaml

@@ -0,0 +1,36 @@
+- args:
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: drop_select_permission
+- args:
+    permission:
+      allow_aggregations: false
+      columns:
+      - billid
+      - created_at
+      - extension
+      - id
+      - jobid
+      - key
+      - name
+      - type
+      - updated_at
+      - uploaded_by
+      computed_fields: []
+      filter:
+        job:
+          bodyshop:
+            associations:
+              _and:
+              - user:
+                  authid:
+                    _eq: X-Hasura-User-Id
+              - active:
+                  _eq: true
+    role: user
+    table:
+      name: documents
+      schema: public
+  type: create_select_permission

hasura/migrations/metadata.yaml

@@ -1450,28 +1450,30 @@ tables:
               - active:
                   _eq: true
       columns:
-      - id
+      - billid
       - created_at
+      - extension
+      - id
+      - jobid
+      - key
+      - name
+      - type
       - updated_at
       - uploaded_by
-      - jobid
-      - name
-      - key
-      - billid
-      - type
   select_permissions:
   - role: user
     permission:
       columns:
+      - billid
+      - created_at
+      - extension
+      - id
+      - jobid
       - key
       - name
       - type
-      - uploaded_by
-      - created_at
       - updated_at
-      - id
+      - uploaded_by
-      - billid
-      - jobid
       filter:
         job:
           bodyshop: