@addsign/moje-agenda-shared-lib 2.0.72 → 2.0.73

package/lib/components/form/FileInputForm.tsx

@@ -2,9 +2,19 @@ import React, { useState, useEffect, useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
 import { AxiosError } from "axios";
+import { LoaderCircleIcon } from "lucide-react";
 import { cn } from "../../utils/utils";
 import { IAttachment } from "../../types";
 import { handleErrors, useFederationContext, useFormField } from "../../main";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "../ui/Dialog";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
 
 export interface FileInputFormProps {
   name: string;
@@ -14,6 +24,7 @@ export interface FileInputFormProps {
   disabled?: boolean;
   attachmentName?: string;
   attachmentType?: string;
+  askForAttachmentName?: boolean;
 }
 
 const MAX_FILE_SIZE = 1024 * 1024; // 1MB
@@ -26,9 +37,14 @@ const FileInputForm: React.FC<FileInputFormProps> = ({
   disabled,
   attachmentName,
   attachmentType,
+  askForAttachmentName = false,
 }) => {
   const [fileData, setFileData] = useState<IAttachment | null>(value || null);
   const [isFocused, setIsFocused] = useState(false);
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [fileName, setFileName] = useState<string>("");
+  const [isUploading, setIsUploading] = useState(false);
 
   const federationContext = useFederationContext();
   const { error } = useFormField();
@@ -36,6 +52,67 @@ const FileInputForm: React.FC<FileInputFormProps> = ({
   useEffect(() => {
     setFileData(value || null);
   }, [value]);
+  const uploadFile = useCallback(
+    async (file: File, customName?: string) => {
+      if (file.size > MAX_FILE_SIZE) {
+        // Handle the case when the file size is exceeded
+        federationContext.emitter.emit("message", {
+          title: "Velikost souboru byla překročena",
+          message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,
+          classes: "bg-danger ",
+          timeout: 0,
+          type: "error",
+        });
+        return;
+      }
+
+      setIsUploading(true);
+      const formData = new FormData();
+
+      // Add the JSON data object
+      const dataObject = {
+        ...(customName
+          ? { attachmentName: customName }
+          : attachmentName && { attachmentName }),
+        ...(attachmentType && { attachmentType }),
+      };
+
+      formData.append(
+        "data",
+        new Blob([JSON.stringify(dataObject)], { type: "application/json" })
+      );
+      formData.append("file", file);
+
+      try {
+        const response = await federationContext.apiClient.post<IAttachment>(
+          "/files/upload",
+          formData,
+          {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          }
+        );
+        const uploadedFile = response.data;
+        setFileData(uploadedFile);
+        onFileChanged(uploadedFile);
+        setIsFocused(false);
+      } catch (error) {
+        handleErrors(error as AxiosError, federationContext.emitter);
+        console.error("There was an error!", error);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [
+      federationContext.apiClient,
+      federationContext.emitter,
+      onFileChanged,
+      attachmentName,
+      attachmentType,
+    ]
+  );
+
   const onDrop = useCallback(
     async (acceptedFiles: File[]) => {
       if (acceptedFiles.length > 0) {
@@ -53,52 +130,44 @@ const FileInputForm: React.FC<FileInputFormProps> = ({
           return;
         }
 
-        const formData = new FormData();
-
-        // Add the JSON data object
-        const dataObject = {
-          ...(attachmentName && { attachmentName }),
-          ...(attachmentType && { attachmentType }),
-        };
-
-        formData.append(
-          "data",
-          new Blob([JSON.stringify(dataObject)], { type: "application/json" })
-        );
-        formData.append("file", file);
-
-        try {
-          const response = await federationContext.apiClient.post<IAttachment>(
-            "/files/upload",
-            formData,
-            {
-              headers: {
-                "Content-Type": "multipart/form-data",
-              },
-            }
-          );
-          const uploadedFile = response.data;
-          setFileData(uploadedFile);
-          onFileChanged(uploadedFile);
-          setIsFocused(false);
-        } catch (error) {
-          handleErrors(error as AxiosError, federationContext.emitter);
-          console.error("There was an error!", error);
+        if (askForAttachmentName) {
+          setPendingFile(file);
+          setFileName(file.name);
+          setIsDialogOpen(true);
+        } else {
+          await uploadFile(file);
         }
       }
     },
-    [
-      federationContext.apiClient,
-      federationContext.emitter,
-      onFileChanged,
-      attachmentName,
-      attachmentType,
-    ]
+    [askForAttachmentName, uploadFile, federationContext]
   );
 
+  const handleDialogSubmit = async () => {
+    if (pendingFile) {
+      setIsDialogOpen(false);
+      await uploadFile(pendingFile, fileName);
+      setPendingFile(null);
+      setFileName("");
+    }
+  };
+
+  const handleDialogCancel = () => {
+    setIsDialogOpen(false);
+    setPendingFile(null);
+    setFileName("");
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
-    disabled,
+    disabled: disabled || isUploading,
     multiple: false,
   });
 
@@ -108,76 +177,153 @@ const FileInputForm: React.FC<FileInputFormProps> = ({
   };
 
   return (
-    <div className="w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary">
-      <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
-        <div
-          className={cn(
-            `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border`,
-            isFocused &&
+    <>
+      <div className="w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary">
+        <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
+          <div
+            className={cn(
+              `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border relative`,
+              isFocused &&
               !hasError &&
               "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300",
 
-            hasError &&
+              hasError &&
               "outline-4 outline-red-200 outline-offset-0 border-none",
-            !isFocused && hasError && "border-red-200 ",
-            disabled ? "bg-gray-100" : "bg-transparent"
-          )}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-        >
-          <div className="flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full ">
-            {!fileData ? (
-              <div
-                {...getRootProps()}
-                className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${
-                  isDragActive
-                    ? "border-indigo-300 bg-indigo-50"
-                    : "border-gray-300"
-                }`}
-              >
-                <input {...getInputProps()} id={name} />
-                <p className="text-gray-500">
-                  {isDragActive
-                    ? "Sem přetáhněte soubor"
-                    : "Klikněte pro nahrání, nebo nahrajte přetažením souboru"}
-                </p>
-              </div>
-            ) : (
-              <div className="w-full flex items-center justify-between">
-                <div className=" flex">
-                  <MdInsertDriveFile style={{ fontSize: "2rem" }} />
-                  <a
-                    href={`/api/files/download/${fileData.id}`}
-                    className="pl-2 text-left underline text-primary"
-                    target="_blank"
-                  >
-                    {fileData.filename}
-                  </a>
+              !isFocused && hasError && "border-red-200 ",
+              disabled ? "bg-gray-100" : "bg-transparent"
+            )}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+          >
+            {isUploading && (
+              <div className="absolute inset-0 bg-white/80 backdrop-blur-sm rounded-lg z-10 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-2">
+                  <LoaderCircleIcon className="h-8 w-8 animate-spin text-primary" />
+                  <p className="text-sm text-gray-600">Nahrávání...</p>
                 </div>
-                {!disabled && (
-                  <div
-                    onClick={handleRemove}
-                    className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
-                  >
-                    <MdDeleteOutline
-                      style={{ fontSize: "1.5rem", margin: "15px" }}
-                    />
-                  </div>
-                )}
               </div>
             )}
+            <div className="flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full ">
+              {!fileData ? (
+                <div
+                  {...getRootProps()}
+                  className={cn(
+                    `w-full p-4 border-dashed border-2 rounded-lg text-center`,
+                    isUploading
+                      ? "cursor-not-allowed opacity-50"
+                      : "cursor-pointer hover:bg-gray-100",
+                    isDragActive ? "border-indigo-300 bg-indigo-50" : "border-gray-300"
+                  )}
+                >
+                  <input {...getInputProps()} id={name} />
+                  <p className="text-gray-500">
+                    {isDragActive
+                      ? "Sem přetáhněte soubor"
+                      : "Klikněte pro nahrání, nebo nahrajte přetažením souboru"}
+                  </p>
+                </div>
+              ) : (
+                <div className="w-full flex items-center justify-between py-2 border-b">
+                  <div className="flex flex-col flex-1">
+                    <div className="flex items-center gap-2">
+                      <MdInsertDriveFile style={{ fontSize: "2rem" }} />
+                      <div className="flex flex-col flex-1">
+                        <a
+                          href={`/api/files/download/${fileData.id}`}
+                          className="text-left underline text-primary text-sm cursor-pointer"
+                          target="_blank"
+                        >
+                          {fileData.filename}
+                        </a>
+                        {fileData.attachmentName && (
+                          <div className="text-sm text-gray-600">
+                            {fileData.attachmentName}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  {!disabled && !isUploading && (
+                    <div
+                      onClick={handleRemove}
+                      className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
+                    >
+                      <MdDeleteOutline
+                        style={{ fontSize: "1.5rem", margin: "15px" }}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>
+        {description && (
+          <div
+            className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight"
+            id={name + ":description"}
+          >
+            {description}
+          </div>
+        )}
       </div>
-      {description && (
-        <div
-          className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight"
-          id={name + ":description"}
-        >
-          {description}
-        </div>
-      )}
-    </div>
+
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          setIsDialogOpen(open);
+          if (!open) {
+            handleDialogCancel();
+          }
+        }}
+      >
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Zadejte popis přílohy</DialogTitle>
+          </DialogHeader>
+          {pendingFile && (
+            <div className="space-y-4 py-4">
+              <div className="flex flex-col gap-2 p-4 border rounded-lg">
+                <div className="flex items-center gap-2">
+                  <MdInsertDriveFile style={{ fontSize: "1.5rem" }} />
+                  <div className="flex-1">
+                    <div className="font-medium text-sm">{pendingFile.name}</div>
+                    <div className="text-xs text-gray-500">
+                      {formatFileSize(pendingFile.size)}
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-2">
+                  <label className="text-sm font-medium mb-1 block">
+                    Popis přílohy:
+                  </label>
+                  <Input
+                    value={fileName}
+                    onChange={(e) => setFileName(e.target.value)}
+                    placeholder="Zadejte popis přílohy"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={handleDialogCancel} disabled={isUploading}>
+              Zrušit
+            </Button>
+            <Button onClick={handleDialogSubmit} disabled={isUploading}>
+              {isUploading ? (
+                <>
+                  <LoaderCircleIcon className="h-4 w-4 animate-spin mr-2" />
+                  Nahrávání...
+                </>
+              ) : (
+                "Nahrát"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };