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

package/lib/components/form/FileInputFormMultiple.tsx

@@ -2,10 +2,20 @@ import React, { useState, useCallback, useEffect } 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 { handleErrors } from "@addsign/moje-agenda-shared-lib";
 import { IAttachment } from "../../types";
 import { useFederationContext, useFormField } from "../../main";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "../ui/Dialog";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
 
 interface FileInputFormMultipleProps {
   name: string;
@@ -17,6 +27,7 @@ interface FileInputFormMultipleProps {
   initialFileIds?: number[];
   attachmentName?: string;
   attachmentType?: string;
+  askForAttachmentName?: boolean;
 }
 
 interface IAttachmentReadOnly extends IAttachment {
@@ -35,6 +46,7 @@ const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
   initialFileIds,
   attachmentName,
   attachmentType,
+  askForAttachmentName = false,
 }) => {
   const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(
     value?.map((file) => ({
@@ -43,6 +55,11 @@ const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
     })) || []
   );
 
+  const [pendingFiles, setPendingFiles] = useState<File[]>([]);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [fileNames, setFileNames] = useState<Record<string, string>>({});
+  const [isUploading, setIsUploading] = useState(false);
+
   const federationContext = useFederationContext();
 
   const { error } = useFormField();
@@ -61,10 +78,11 @@ const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
     );
   }, [value, initialFilesReadOnly, initialFileIds]);
 
-  const onDrop = useCallback(
-    async (acceptedFiles: File[]) => {
+  const uploadFiles = useCallback(
+    async (files: File[], customNames?: Record<string, string>) => {
+      setIsUploading(true);
       const uploadedFiles = await Promise.all(
-        acceptedFiles.map(async (file) => {
+        files.map(async (file) => {
           if (file.size > MAX_FILE_SIZE) {
             // Handle the case when the file size is exceeded
             federationContext.emitter.emit("message", {
@@ -82,7 +100,9 @@ const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
 
           // Add the JSON data object
           const dataObject = {
-            ...(attachmentName && { attachmentName }),
+            ...(customNames?.[file.name]
+              ? { attachmentName: customNames[file.name] }
+              : attachmentName && { attachmentName }),
             ...(attachmentType && { attachmentType }),
           };
 
@@ -118,6 +138,7 @@ const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
       const updatedFileDataList = [...fileDataList, ...validFiles];
       setFileDataList(updatedFileDataList);
       onFilesChanged(updatedFileDataList);
+      setIsUploading(false);
     },
     [
       federationContext,
@@ -128,9 +149,67 @@ const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
     ]
   );
 
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      // Filter out files that exceed size limit
+      const validFiles = acceptedFiles.filter((file) => {
+        if (file.size > MAX_FILE_SIZE) {
+          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 false;
+        }
+        return true;
+      });
+
+      if (validFiles.length === 0) {
+        return;
+      }
+
+      if (askForAttachmentName) {
+        // Initialize file names with original file names
+        const initialNames: Record<string, string> = {};
+        validFiles.forEach((file) => {
+          initialNames[file.name] = file.name;
+        });
+        setFileNames(initialNames);
+        setPendingFiles(validFiles);
+        setIsDialogOpen(true);
+      } else {
+        await uploadFiles(validFiles);
+      }
+    },
+    [askForAttachmentName, uploadFiles, federationContext]
+  );
+
+  const handleDialogSubmit = async () => {
+    setIsDialogOpen(false);
+    await uploadFiles(pendingFiles, fileNames);
+    setPendingFiles([]);
+    setFileNames({});
+  };
+
+  const handleDialogCancel = () => {
+    setIsDialogOpen(false);
+    setPendingFiles([]);
+    setFileNames({});
+  };
+
+  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,
   });
 
   const handleRemove = (fileId: number) => {
@@ -146,74 +225,163 @@ const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
   }
 
   return (
-    <div
-      className="w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary"
-      data-cy={"file-input-form-multiple-" + name}
-    >
-      <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
-        <div
-          className={cn(
-            `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2  outline-none border bg-transparent   `,
-            hasError &&
+    <>
+      <div
+        className="w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary"
+        data-cy={"file-input-form-multiple-" + name}
+      >
+        <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
+          <div
+            className={cn(
+              `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2 outline-none border bg-transparent relative`,
+              hasError &&
               "outline-4 outline-red-200 outline-offset-0 border-none ",
-            disabled ? "bg-gray-100" : "bg-transparent"
-          )}
-        >
-          {!disabled && (
-            <div
-              {...getRootProps()}
-              className={`w-full p-4 border-dashed cursor-pointer 
-                border-2 rounded-lg text-center 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 soubory"
-                  : "Klikněte pro nahrání, nebo nahrajte přetažením souborů"}
-              </p>
-            </div>
-          )}
-          <div className="w-full">
-            {fileDataList.map((file) => (
+              disabled ? "bg-gray-100" : "bg-transparent"
+            )}
+          >
+            {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>
+              </div>
+            )}
+            {!disabled && (
               <div
-                key={file.id}
-                className="w-full flex items-center justify-between py-2 border-b "
+                {...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"
+                )}
               >
-                <div className="flex items-center content-center">
-                  <MdInsertDriveFile style={{ fontSize: "2rem" }} />
-                  <a
-                    href={`/api/files/download/${file.id}`}
-                    className="pl-2 text-left underline text-primary"
-                    target="_blank"
-                  >
-                    {file.filename}
-                  </a>
+                <input {...getInputProps()} id={name} />
+                <p className="text-gray-500">
+                  {isDragActive
+                    ? "Sem přetáhněte soubory"
+                    : "Klikněte pro nahrání, nebo nahrajte přetažením souborů"}
+                </p>
+              </div>
+            )}
+            <div className="w-full">
+              {fileDataList.map((file) => (
+                <div
+                  key={file.id}
+                  className="w-full flex items-center justify-between py-2 border-b "
+                >
+                  <div className="flex flex-col flex-1">
+                    <div className="flex items-center content-center gap-2">
+                      <MdInsertDriveFile style={{ fontSize: "2rem" }} />
+
+                      <div className="flex flex-col flex-1">
+                        <a
+                          href={`/api/files/download/${file.id}`}
+                          className="text-left underline text-primary text-sm"
+                          target="_blank"
+                        >
+                          {file.filename}
+                        </a>
+                        {file.attachmentName && (
+                          <div className="text-sm text-gray-600">
+                            {file.attachmentName}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                  </div>
+                  {!disabled && file.readonly !== true && !isUploading && (
+                    <div
+                      onClick={() => handleRemove(file.id)}
+                      className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
+                    >
+                      <MdDeleteOutline
+                        style={{ fontSize: "1.5rem", margin: "10px" }}
+                      />
+                    </div>
+                  )}
                 </div>
-                {!disabled && file.readonly !== true && (
-                  <div
-                    onClick={() => handleRemove(file.id)}
-                    className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
-                  >
-                    <MdDeleteOutline
-                      style={{ fontSize: "1.5rem", margin: "10px" }}
-                    />
+              ))}
+            </div>
+          </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-2xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Zadejte popisy příloh</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            {pendingFiles.map((file) => (
+              <div
+                key={file.name}
+                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">{file.name}</div>
+                    <div className="text-xs text-gray-500">
+                      {formatFileSize(file.size)}
+                    </div>
                   </div>
-                )}
+                </div>
+                <div className="mt-2">
+                  <label className="text-sm font-medium mb-1 block">
+                    Popis přílohy:
+                  </label>
+                  <Input
+                    value={fileNames[file.name] || file.name}
+                    onChange={(e) =>
+                      setFileNames({
+                        ...fileNames,
+                        [file.name]: e.target.value,
+                      })
+                    }
+                    placeholder="Zadejte popis přílohy"
+                  />
+                </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>
+          <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>
+    </>
   );
 };
 

package/lib/css/tailwind.css

@@ -1,10 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-
-:root {
-    /*  --color-primary: green;
-  Example color */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+
+:root {
+    /*  --color-primary: green;
+  Example color */
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.72",
+  "version": "2.0.73",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/tailwind.config.js

@@ -1,97 +1,97 @@
-
-/** @type {import('tailwindcss').Config.theme.extend} */
-export const TAILWIND_THEME_EXTEND = {
-  colors: {
-    border: "var(--border)",
-    input: "var(--input)",
-    ring: "var(--ring)",
-    background: "var(--background)",
-    foreground: "var(--foreground)",
-
-    // Using modern `rgb`
-    primary: {
-      DEFAULT: "var(--color-primary)",
-      hover: "var(--color-primary-hover)",
-      text: "var(--color-primary-text)",
-      foreground: "var(--color-primary-text)",
-      border: "var(--color-primary-border)",
-    },
-    secondary: {
-      DEFAULT: "var(--color-secondary)",
-      hover: "var(--color-secondary-hover)",
-      text: "var(--color-secondary-text)",
-      foreground: "var(--secondary-foreground)",
-      border: "var(--color-secondary-border)",
-    },
-    danger: {
-      DEFAULT: "var(--color-danger)",
-      hover: "var(--color-danger-hover)",
-      text: "var(--color-danger-text)",
-      border: "var(--color-danger-border)",
-    },
-    destructive: {
-      DEFAULT: "var(--destructive)",
-      foreground: "var(--destructive-foreground)",
-    },
-    warning: {
-      DEFAULT: "var(--color-warning)",
-      hover: "var(--color-warning-hover)",
-      text: "var(--color-warning-text)",
-      border: "var(--color-warning-border)",
-    },
-    success: {
-      DEFAULT: "var(--color-success)",
-      hover: "var(--color-success-hover)",
-      text: "var(--color-success-text)",
-      border: "var(--color-success-border)",
-    },
-
-    gray: {
-      150: "rgb(238, 240, 243)",
-    },
-
-    muted: {
-      DEFAULT: "var(--muted)",
-      foreground: "var(--muted-foreground)",
-    },
-    accent: {
-      DEFAULT: "var(--accent)",
-      foreground: "var(--accent-foreground)",
-    },
-    popover: {
-      DEFAULT: "var(--popover)",
-      foreground: "var(--popover-foreground)",
-    },
-    card: {
-      DEFAULT: "var(--card)",
-      foreground: "var(--card-foreground)",
-    },
-  },
-
-  animation: {
-    spin: 'spin 2s linear infinite',
-  },
-}
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: "class",
-  important: false, // Ensures all classes use !important
-
-  content: [
-    "./lib/**/*.{js,ts,jsx,tsx}",
-    "./lib/**/*.{ts,tsx}",
-    "./lib/components/**/*.{ts,tsx}",
-    "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
-  ],
-  theme: {
-    extend: TAILWIND_THEME_EXTEND,
-  },
-  plugins: [],
-  safelist: [
-    "bg-danger", // Add any other dynamic classes here
-    "lg:grid-cols-3",
-    "lg:grid-cols-2",
-    "lg:grid-cols-4",
-  ],
-};
+
+/** @type {import('tailwindcss').Config.theme.extend} */
+export const TAILWIND_THEME_EXTEND = {
+  colors: {
+    border: "var(--border)",
+    input: "var(--input)",
+    ring: "var(--ring)",
+    background: "var(--background)",
+    foreground: "var(--foreground)",
+
+    // Using modern `rgb`
+    primary: {
+      DEFAULT: "var(--color-primary)",
+      hover: "var(--color-primary-hover)",
+      text: "var(--color-primary-text)",
+      foreground: "var(--color-primary-text)",
+      border: "var(--color-primary-border)",
+    },
+    secondary: {
+      DEFAULT: "var(--color-secondary)",
+      hover: "var(--color-secondary-hover)",
+      text: "var(--color-secondary-text)",
+      foreground: "var(--secondary-foreground)",
+      border: "var(--color-secondary-border)",
+    },
+    danger: {
+      DEFAULT: "var(--color-danger)",
+      hover: "var(--color-danger-hover)",
+      text: "var(--color-danger-text)",
+      border: "var(--color-danger-border)",
+    },
+    destructive: {
+      DEFAULT: "var(--destructive)",
+      foreground: "var(--destructive-foreground)",
+    },
+    warning: {
+      DEFAULT: "var(--color-warning)",
+      hover: "var(--color-warning-hover)",
+      text: "var(--color-warning-text)",
+      border: "var(--color-warning-border)",
+    },
+    success: {
+      DEFAULT: "var(--color-success)",
+      hover: "var(--color-success-hover)",
+      text: "var(--color-success-text)",
+      border: "var(--color-success-border)",
+    },
+
+    gray: {
+      150: "rgb(238, 240, 243)",
+    },
+
+    muted: {
+      DEFAULT: "var(--muted)",
+      foreground: "var(--muted-foreground)",
+    },
+    accent: {
+      DEFAULT: "var(--accent)",
+      foreground: "var(--accent-foreground)",
+    },
+    popover: {
+      DEFAULT: "var(--popover)",
+      foreground: "var(--popover-foreground)",
+    },
+    card: {
+      DEFAULT: "var(--card)",
+      foreground: "var(--card-foreground)",
+    },
+  },
+
+  animation: {
+    spin: 'spin 2s linear infinite',
+  },
+}
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: "class",
+  important: false, // Ensures all classes use !important
+
+  content: [
+    "./lib/**/*.{js,ts,jsx,tsx}",
+    "./lib/**/*.{ts,tsx}",
+    "./lib/components/**/*.{ts,tsx}",
+    "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
+  ],
+  theme: {
+    extend: TAILWIND_THEME_EXTEND,
+  },
+  plugins: [],
+  safelist: [
+    "bg-danger", // Add any other dynamic classes here
+    "lg:grid-cols-3",
+    "lg:grid-cols-2",
+    "lg:grid-cols-4",
+  ],
+};