Added file extesions for documents IO-525

This commit is contained in:
Patrick Fic
2021-02-04 15:21:04 -08:00
parent 6e33b5fd6b
commit c3d1de592a
11 changed files with 212 additions and 27 deletions

View File

@@ -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";
}

View File

@@ -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);
if (value.type.includes("image")) {
const fileType = DetermineFileType(value.type);
if (value.type.startsWith("image")) {
acc.images.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: `${
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_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}`,
process.env.REACT_APP_CLOUDINARY_ENDPOINT
}/${fileType}/upload/${fileType === "video" ? "q_auto/" : ""}${
value.key
}${fileType === "raw" ? `.${value.extension}` : ""}`,
thumbnail: thumb,
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,

View File

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

View File

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

View File

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

View File

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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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
- billid
- jobid
- uploaded_by
filter:
job:
bodyshop: