@addsign/moje-agenda-shared-lib 2.0.66 → 2.0.68

package/lib/components/form/FileInputFormMultiple.tsx

@@ -0,0 +1,220 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
+import { AxiosError } from "axios";
+import { cn } from "../../utils/utils";
+import { handleErrors } from "@addsign/moje-agenda-shared-lib";
+import { IAttachment } from "../../types";
+import { useFederationContext, useFormField } from "../../main";
+
+interface FileInputFormMultipleProps {
+  name: string;
+  value?: IAttachment[] | null;
+  onFilesChanged: (files: IAttachment[]) => void;
+  description?: string;
+  disabled?: boolean;
+  initialFilesReadOnly?: boolean;
+  initialFileIds?: number[];
+  attachmentName?: string;
+  attachmentType?: string;
+}
+
+interface IAttachmentReadOnly extends IAttachment {
+  readonly?: boolean;
+}
+
+const MAX_FILE_SIZE = 1024 * 1024; // 1MB
+
+const FileInputFormMultiple: React.FC<FileInputFormMultipleProps> = ({
+  value,
+  onFilesChanged,
+  name,
+  description,
+  disabled,
+  initialFilesReadOnly = true,
+  initialFileIds,
+  attachmentName,
+  attachmentType,
+}) => {
+  const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(
+    value?.map((file) => ({
+      ...file,
+      readonly: initialFilesReadOnly && initialFileIds?.includes(file.id),
+    })) || []
+  );
+
+  const federationContext = useFederationContext();
+
+  const { error } = useFormField();
+  const hasError = !!error;
+  useEffect(() => {
+    if (!value || value.length === 0) {
+      setFileDataList([]);
+      return;
+    }
+
+    setFileDataList(
+      value.map((file) => ({
+        ...file,
+        readonly: initialFilesReadOnly && initialFileIds?.includes(file.id),
+      }))
+    );
+  }, [value, initialFilesReadOnly, initialFileIds]);
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      const uploadedFiles = await Promise.all(
+        acceptedFiles.map(async (file) => {
+          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 null;
+          }
+
+          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",
+                  },
+                }
+              );
+            return response.data;
+          } catch (error) {
+            handleErrors(error as AxiosError, federationContext.emitter);
+            console.error("There was an error!", error);
+            return null;
+          }
+        })
+      );
+
+      const validFiles = uploadedFiles.filter(
+        (file) => file !== null
+      ) as IAttachment[];
+      const updatedFileDataList = [...fileDataList, ...validFiles];
+      setFileDataList(updatedFileDataList);
+      onFilesChanged(updatedFileDataList);
+    },
+    [
+      federationContext,
+      fileDataList,
+      onFilesChanged,
+      attachmentName,
+      attachmentType,
+    ]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    disabled,
+  });
+
+  const handleRemove = (fileId: number) => {
+    const updatedFileDataList = fileDataList.filter(
+      (file) => file.id !== fileId
+    );
+    setFileDataList(updatedFileDataList);
+    onFilesChanged(updatedFileDataList);
+  };
+
+  if (disabled === true && fileDataList.length === 0) {
+    return null;
+  }
+
+  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 &&
+              "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) => (
+              <div
+                key={file.id}
+                className="w-full flex items-center justify-between py-2 border-b "
+              >
+                <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>
+                </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>
+        </div>
+      </div>
+      {description && (
+        <div
+          className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight"
+          id={name + ":description"}
+        >
+          {description}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileInputFormMultiple;

package/lib/components/ui/Calendar.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";

package/lib/components/ui/Combobox.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
 

package/lib/components/ui/Dialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";

package/lib/components/ui/checkbox.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";

package/lib/components/ui/command.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";