Fix too big "drop file to upload"
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
@@ -703,6 +703,7 @@ function ControlOverviewPageContent({
|
|||||||
toast({
|
toast({
|
||||||
title: "Evidence uploaded",
|
title: "Evidence uploaded",
|
||||||
description: "Evidence has been uploaded successfully.",
|
description: "Evidence has been uploaded successfully.",
|
||||||
|
variant: "default",
|
||||||
});
|
});
|
||||||
setIsUploadEvidenceOpen(false);
|
setIsUploadEvidenceOpen(false);
|
||||||
setTaskForEvidence(null);
|
setTaskForEvidence(null);
|
||||||
@@ -751,6 +752,7 @@ function ControlOverviewPageContent({
|
|||||||
toast({
|
toast({
|
||||||
title: "Upload started",
|
title: "Upload started",
|
||||||
description: `Uploading ${file.name}...`,
|
description: `Uploading ${file.name}...`,
|
||||||
|
variant: "default",
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get the evidence connection ID for this task
|
// Get the evidence connection ID for this task
|
||||||
@@ -773,6 +775,7 @@ function ControlOverviewPageContent({
|
|||||||
toast({
|
toast({
|
||||||
title: "Evidence uploaded",
|
title: "Evidence uploaded",
|
||||||
description: "Evidence has been uploaded successfully.",
|
description: "Evidence has been uploaded successfully.",
|
||||||
|
variant: "default",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
@@ -996,9 +999,9 @@ function ControlOverviewPageContent({
|
|||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<h2 className="text-xl font-semibold">Tasks</h2>
|
<h2 className="text-xl font-semibold">Tasks</h2>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<div className="text-sm text-gray-500 flex items-center">
|
<div className="text-sm text-gray-500 flex items-center bg-gray-50 px-3 py-1.5 rounded-md border border-gray-200">
|
||||||
<FileIcon className="w-4 h-4 mr-1 text-gray-400" />
|
<FileIcon className="w-4 h-4 mr-2 text-blue-500" />
|
||||||
<span>Drag & drop files onto tasks to upload evidence</span>
|
<span>Drag & drop files onto tasks to upload evidence</span>
|
||||||
</div>
|
</div>
|
||||||
<Dialog
|
<Dialog
|
||||||
@@ -1155,10 +1158,10 @@ function ControlOverviewPageContent({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{draggedOverTaskId === task?.id && (
|
{draggedOverTaskId === task?.id && (
|
||||||
<div className="absolute inset-0 flex items-center justify-center bg-blue-50 bg-opacity-80 rounded-md z-10 backdrop-blur-[1px]">
|
<div className="absolute inset-0 flex items-center justify-center rounded-md z-10 bg-blue-50 bg-opacity-90 backdrop-blur-sm border-2 border-dashed border-blue-400">
|
||||||
<div className="flex flex-col items-center gap-2 text-blue-600 bg-white p-4 rounded-lg shadow-xs">
|
<div className="flex items-center gap-2 text-blue-600 bg-white p-5 rounded-lg shadow-md">
|
||||||
<FileIcon className="w-12 h-12" />
|
<Upload className="w-4 h-4 text-blue-500" />
|
||||||
<p className="font-medium">
|
<p className="text-sm font-medium text-center">
|
||||||
Drop file to upload evidence
|
Drop file to upload evidence
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1166,10 +1169,11 @@ function ControlOverviewPageContent({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{uploadingTaskId === task?.id && (
|
{uploadingTaskId === task?.id && (
|
||||||
<div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90 rounded-md z-10">
|
<div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-95 rounded-md z-10 backdrop-blur-sm">
|
||||||
<div className="flex flex-col items-center gap-2 text-blue-600">
|
<div className="flex flex-col items-center gap-3 text-blue-600">
|
||||||
<Loader2 className="w-8 h-8 animate-spin" />
|
<Loader2 className="w-10 h-10 animate-spin text-blue-500" />
|
||||||
<p className="font-medium">Uploading evidence...</p>
|
<p className="font-medium">Uploading evidence...</p>
|
||||||
|
<p className="text-sm text-gray-500">Please wait</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -1424,12 +1428,12 @@ function ControlOverviewPageContent({
|
|||||||
{task?.evidences?.edges && task.evidences.edges.length > 0 && (
|
{task?.evidences?.edges && task.evidences.edges.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="bg-gray-50 border-t border-gray-200 px-4 py-2 flex justify-between items-center cursor-pointer hover:bg-gray-100"
|
className="bg-gray-50 border-t border-gray-200 px-4 py-2.5 flex justify-between items-center cursor-pointer hover:bg-gray-100 transition-colors"
|
||||||
onClick={() => task.id && toggleEvidenceList(task.id)}
|
onClick={() => task.id && toggleEvidenceList(task.id)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FileIcon className="w-4 h-4 text-gray-500" />
|
<FileIcon className="w-4 h-4 text-blue-500" />
|
||||||
<span className="text-xs font-medium text-gray-700">
|
<span className="text-sm font-medium text-gray-700">
|
||||||
{task.evidences.edges.length}{" "}
|
{task.evidences.edges.length}{" "}
|
||||||
{task.evidences.edges.length === 1
|
{task.evidences.edges.length === 1
|
||||||
? "Evidence"
|
? "Evidence"
|
||||||
@@ -1444,7 +1448,7 @@ function ControlOverviewPageContent({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{expandedEvidenceTaskId === task.id && (
|
{expandedEvidenceTaskId === task.id && (
|
||||||
<div className="bg-white border-t border-gray-200 p-3 space-y-2">
|
<div className="bg-white border-t border-gray-200 p-3 space-y-2.5">
|
||||||
{task.evidences.edges.map((edge) => {
|
{task.evidences.edges.map((edge) => {
|
||||||
if (!edge) return null;
|
if (!edge) return null;
|
||||||
const evidence = edge.node;
|
const evidence = edge.node;
|
||||||
@@ -1453,16 +1457,20 @@ function ControlOverviewPageContent({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={evidence.id}
|
key={evidence.id}
|
||||||
className="flex items-center justify-between p-2 rounded border border-gray-200 hover:border-blue-300 transition-colors"
|
className="flex items-center justify-between p-3 rounded-md border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all bg-gray-50"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
{getFileIcon(evidence.mimeType)}
|
<div className="bg-white p-2 rounded-md border border-gray-200">
|
||||||
|
{getFileIcon(evidence.mimeType)}
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="text-sm font-medium text-gray-700">
|
<div className="text-sm font-medium text-gray-800">
|
||||||
{evidence.filename}
|
{evidence.filename}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-gray-500 flex items-center gap-2">
|
<div className="text-xs text-gray-500 flex items-center gap-2 mt-0.5">
|
||||||
<span>{formatFileSize(evidence.size)}</span>
|
<span className="font-medium text-gray-600">
|
||||||
|
{formatFileSize(evidence.size)}
|
||||||
|
</span>
|
||||||
<span>•</span>
|
<span>•</span>
|
||||||
<span>
|
<span>
|
||||||
{formatDate(evidence.createdAt)}
|
{formatDate(evidence.createdAt)}
|
||||||
@@ -1470,16 +1478,16 @@ function ControlOverviewPageContent({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1">
|
||||||
{evidence.mimeType.startsWith("image/") ? (
|
{evidence.mimeType.startsWith("image/") ? (
|
||||||
<button
|
<button
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
handlePreviewEvidence(evidence)
|
handlePreviewEvidence(evidence)
|
||||||
}
|
}
|
||||||
className="p-1 rounded-full hover:bg-gray-100"
|
className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
|
||||||
title="Preview Image"
|
title="Preview Image"
|
||||||
>
|
>
|
||||||
<Eye className="w-4 h-4 text-gray-600" />
|
<Eye className="w-4 h-4 text-blue-600" />
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
@@ -1487,10 +1495,10 @@ function ControlOverviewPageContent({
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
handlePreviewEvidence(evidence);
|
handlePreviewEvidence(evidence);
|
||||||
}}
|
}}
|
||||||
className="p-1 rounded-full hover:bg-gray-100"
|
className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
|
||||||
title="View File"
|
title="Download"
|
||||||
>
|
>
|
||||||
<Eye className="w-4 h-4 text-gray-600" />
|
<Download className="w-4 h-4 text-blue-600" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
@@ -1498,24 +1506,26 @@ function ControlOverviewPageContent({
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
handlePreviewEvidence(evidence);
|
handlePreviewEvidence(evidence);
|
||||||
}}
|
}}
|
||||||
className="p-1 rounded-full hover:bg-gray-100"
|
className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
|
||||||
title="Download"
|
title="Download"
|
||||||
>
|
>
|
||||||
<Download className="w-4 h-4 text-gray-600" />
|
<Download className="w-4 h-4 text-blue-600" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
handleDeleteEvidence(
|
if (task?.id) {
|
||||||
evidence.id,
|
handleDeleteEvidence(
|
||||||
evidence.filename,
|
evidence.id,
|
||||||
task.id
|
evidence.filename,
|
||||||
);
|
task.id
|
||||||
|
);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
className="p-1 rounded-full hover:bg-gray-10 hover:text-red-600"
|
className="p-1.5 rounded-full hover:bg-red-50 hover:shadow-sm transition-all"
|
||||||
title="Delete Evidence"
|
title="Delete"
|
||||||
>
|
>
|
||||||
<Trash2 className="w-4 h-4 text-gray-600 hover:text-red-600" />
|
<Trash2 className="w-4 h-4 text-red-500" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1565,7 +1575,7 @@ function ControlOverviewPageContent({
|
|||||||
open={isUploadEvidenceOpen}
|
open={isUploadEvidenceOpen}
|
||||||
onOpenChange={setIsUploadEvidenceOpen}
|
onOpenChange={setIsUploadEvidenceOpen}
|
||||||
>
|
>
|
||||||
<DialogContent>
|
<DialogContent className="sm:max-w-md">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Upload Evidence</DialogTitle>
|
<DialogTitle>Upload Evidence</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
@@ -1574,7 +1584,7 @@ function ControlOverviewPageContent({
|
|||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<form onSubmit={confirmUploadEvidence}>
|
<form onSubmit={confirmUploadEvidence}>
|
||||||
<div className="space-y-4 py-4">
|
<div className="space-y-6 py-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="evidence-name">
|
<Label htmlFor="evidence-name">
|
||||||
Evidence Name (Optional)
|
Evidence Name (Optional)
|
||||||
@@ -1584,16 +1594,31 @@ function ControlOverviewPageContent({
|
|||||||
placeholder="Enter a name for this evidence"
|
placeholder="Enter a name for this evidence"
|
||||||
value={evidenceName}
|
value={evidenceName}
|
||||||
onChange={(e) => setEvidenceName(e.target.value)}
|
onChange={(e) => setEvidenceName(e.target.value)}
|
||||||
|
className="w-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-3">
|
||||||
<Label htmlFor="evidence-file">File</Label>
|
<Label htmlFor="evidence-file">File</Label>
|
||||||
<Input
|
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 transition-colors hover:border-blue-400 bg-gray-50">
|
||||||
id="evidence-file"
|
<div className="flex flex-col items-center justify-center gap-3">
|
||||||
type="file"
|
<Upload className="w-10 h-10 text-blue-500" />
|
||||||
ref={fileInputRef}
|
<div className="text-center">
|
||||||
required
|
<p className="text-sm font-medium text-gray-700">
|
||||||
/>
|
Drag and drop your file here, or click to browse
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
Supported file types: PDF, images, documents
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
id="evidence-file"
|
||||||
|
type="file"
|
||||||
|
ref={fileInputRef}
|
||||||
|
required
|
||||||
|
className="w-full opacity-0 absolute inset-0 cursor-pointer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
|
|||||||
Reference in New Issue
Block a user