npm - @addsign/moje-agenda-shared-lib - Versions diffs - 2.0.60 → 2.0.62 - Mend

@addsign/moje-agenda-shared-lib 2.0.60 → 2.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/components/datatable/DataTableServer.js +93 -54
package/dist/components/datatable/DataTableServer.js.map +1 -1
package/dist/components/form/FileInput.d.ts +1 -0
package/dist/components/form/FileInput.js +13 -4
package/dist/components/form/FileInput.js.map +1 -1
package/dist/components/form/FileInputMultiple.d.ts +1 -0
package/dist/components/form/FileInputMultiple.js +11 -3
package/dist/components/form/FileInputMultiple.js.map +1 -1
package/lib/components/datatable/DataTableServer.tsx +124 -66
package/lib/components/form/FileInput.tsx +15 -2
package/lib/components/form/FileInputMultiple.tsx +13 -1
package/package.json +1 -1

package/dist/components/form/FileInput.d.ts CHANGED Viewed

@@ -22,6 +22,7 @@ interface FileInputProps {
         };
     };
     attachmentName?: string;
+    attachmentType?: string;
 }
 declare const FileInput: React.FC<FileInputProps>;
 export default FileInput;

package/dist/components/form/FileInput.js CHANGED Viewed

@@ -35,7 +35,8 @@ const FileInput = ({
   description,
   disabled,
   errors = {},
-  attachmentName
+  attachmentName,
+  attachmentType
 }) => {
   var _a, _b, _c, _d;
   const [fileData, setFileData] = useState(
@@ -63,6 +64,14 @@ const FileInput = ({
           return;
         }
         const formData = new FormData();
+        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(
@@ -71,8 +80,7 @@ const FileInput = ({
             {
               headers: {
                 "Content-Type": "multipart/form-data"
-              },
-              params: attachmentName ? { attachmentName } : void 0
+              }
             }
           );
           setFileData(response.data);
@@ -91,7 +99,8 @@ const FileInput = ({
       federationContext.emitter,
       onFileChanged,
       name,
-      attachmentName
+      attachmentName,
+      attachmentType
     ]
   );
   const { getRootProps, getInputProps, isDragActive } = useDropzone({

package/dist/components/form/FileInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.js","sources":["../../../lib/components/form/FileInput.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { handleErrors, useFederationContext } from \"../../main\";\r\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\r\nimport { AxiosError } from \"axios\";\r\n\r\nexport interface FileData {\r\n id: number;\r\n mimeType: string;\r\n size: number;\r\n filename: string;\r\n createdByEmpId: string;\r\n created: string;\r\n}\r\n\r\ninterface FileInputProps {\r\n name: string;\r\n label?: string;\r\n initialFile?: FileData;\r\n onFileChanged: (e: any) => void;\r\n required?: boolean;\r\n description?: string;\r\n disabled?: boolean;\r\n errors?: { [key: string]: { message: string } };\r\n attachmentName?: string;\r\n}\r\n\r\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\r\n\r\nconst FileInput: React.FC<FileInputProps> = ({\r\n initialFile,\r\n onFileChanged,\r\n label,\r\n name,\r\n required,\r\n description,\r\n disabled,\r\n errors = {},\r\n attachmentName,\r\n}) => {\r\n const [fileData, setFileData] = useState<FileData \| null>(\r\n initialFile \|\| null\r\n );\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const federationContext = useFederationContext();\r\n useEffect(() => {\r\n if (initialFile) {\r\n setFileData(initialFile);\r\n }\r\n }, [initialFile]);\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: File[]) => {\r\n if (acceptedFiles.length > 0) {\r\n const file = acceptedFiles[0];\r\n\r\n if (file.size > MAX_FILE_SIZE) {\r\n // Handle the case when the file size is exceeded\r\n federationContext.emitter.emit(\"message\", {\r\n title: \"Velikost souboru byla překročena\",\r\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\r\n classes: \"bg-danger \",\r\n timeout: 0,\r\n type: \"error\",\r\n });\r\n return;\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append(\"file\", file);\r\n\r\n try {\r\n const response = await federationContext.apiClient.post<FileData>(\r\n \"/files/upload\",\r\n formData,\r\n {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n params: attachmentName ? { attachmentName } : undefined,\r\n }\r\n );\r\n setFileData(response.data);\r\n onFileChanged({\r\n target: { name, value: response.data.id.toString() },\r\n });\r\n setIsFocused(false);\r\n } catch (error) {\r\n handleErrors(error as AxiosError, federationContext.emitter);\r\n console.error(\"There was an error!\", error);\r\n }\r\n }\r\n },\r\n [\r\n federationContext.apiClient,\r\n federationContext.emitter,\r\n onFileChanged,\r\n name,\r\n attachmentName,\r\n ]\r\n );\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n onDrop,\r\n disabled,\r\n multiple: false,\r\n });\r\n\r\n const handleRemove = () => {\r\n setFileData(null);\r\n onFileChanged({ target: { name, value: null } });\r\n };\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border` +\r\n ` ${\r\n isFocused && !errors[name]?.message\r\n ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n : \"\"\r\n }` +\r\n ` ${\r\n isFocused && errors[name]?.message\r\n ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n : \"\"\r\n } ` +\r\n ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`\r\n }\r\n onFocus={() => setIsFocused(true)}\r\n onBlur={() => setIsFocused(false)}\r\n >\r\n <div className=\"flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full \">\r\n {!fileData ? (\r\n <div\r\n {...getRootProps()}\r\n className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${\r\n isDragActive\r\n ? \"border-indigo-300 bg-indigo-50\"\r\n : \"border-gray-300\"\r\n }`}\r\n >\r\n <input {...getInputProps()} id={name} />\r\n <p className=\"text-gray-500\">\r\n {isDragActive\r\n ? \"Sem přetáhněte soubor\"\r\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souboru\"}\r\n </p>\r\n </div>\r\n ) : (\r\n <div className=\"w-full flex items-center justify-between\">\r\n <div className=\" flex\">\r\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\r\n <a\r\n href={`/api/files/download/${fileData.id}`}\r\n className=\"pl-2 text-left underline text-primary\"\r\n target=\"_blank\"\r\n >\r\n {fileData.filename}\r\n </a>\r\n </div>\r\n {!disabled && (\r\n <div\r\n onClick={handleRemove}\r\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\r\n >\r\n <MdDeleteOutline\r\n style={{ fontSize: \"1.5rem\", margin: \"15px\" }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div\r\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FileInput;\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"FileInput.js","sources":["../../../lib/components/form/FileInput.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { handleErrors, useFederationContext } from \"../../main\";\r\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\r\nimport { AxiosError } from \"axios\";\r\n\r\nexport interface FileData {\r\n id: number;\r\n mimeType: string;\r\n size: number;\r\n filename: string;\r\n createdByEmpId: string;\r\n created: string;\r\n}\r\n\r\ninterface FileInputProps {\r\n name: string;\r\n label?: string;\r\n initialFile?: FileData;\r\n onFileChanged: (e: any) => void;\r\n required?: boolean;\r\n description?: string;\r\n disabled?: boolean;\r\n errors?: { [key: string]: { message: string } };\r\n attachmentName?: string;\r\n attachmentType?: string;\r\n}\r\n\r\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\r\n\r\nconst FileInput: React.FC<FileInputProps> = ({\r\n initialFile,\r\n onFileChanged,\r\n label,\r\n name,\r\n required,\r\n description,\r\n disabled,\r\n errors = {},\r\n attachmentName,\r\n attachmentType,\r\n}) => {\r\n const [fileData, setFileData] = useState<FileData \| null>(\r\n initialFile \|\| null\r\n );\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const federationContext = useFederationContext();\r\n useEffect(() => {\r\n if (initialFile) {\r\n setFileData(initialFile);\r\n }\r\n }, [initialFile]);\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: File[]) => {\r\n if (acceptedFiles.length > 0) {\r\n const file = acceptedFiles[0];\r\n\r\n if (file.size > MAX_FILE_SIZE) {\r\n // Handle the case when the file size is exceeded\r\n federationContext.emitter.emit(\"message\", {\r\n title: \"Velikost souboru byla překročena\",\r\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\r\n classes: \"bg-danger \",\r\n timeout: 0,\r\n type: \"error\",\r\n });\r\n return;\r\n }\r\n\r\n const formData = new FormData();\r\n\r\n // Add the JSON data object\r\n const dataObject = {\r\n ...(attachmentName && { attachmentName }),\r\n ...(attachmentType && { attachmentType }),\r\n };\r\n\r\n formData.append(\r\n \"data\",\r\n new Blob([JSON.stringify(dataObject)], { type: \"application/json\" })\r\n );\r\n formData.append(\"file\", file);\r\n\r\n try {\r\n const response = await federationContext.apiClient.post<FileData>(\r\n \"/files/upload\",\r\n formData,\r\n {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n }\r\n );\r\n setFileData(response.data);\r\n onFileChanged({\r\n target: { name, value: response.data.id.toString() },\r\n });\r\n setIsFocused(false);\r\n } catch (error) {\r\n handleErrors(error as AxiosError, federationContext.emitter);\r\n console.error(\"There was an error!\", error);\r\n }\r\n }\r\n },\r\n [\r\n federationContext.apiClient,\r\n federationContext.emitter,\r\n onFileChanged,\r\n name,\r\n attachmentName,\r\n attachmentType,\r\n ]\r\n );\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n onDrop,\r\n disabled,\r\n multiple: false,\r\n });\r\n\r\n const handleRemove = () => {\r\n setFileData(null);\r\n onFileChanged({ target: { name, value: null } });\r\n };\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border` +\r\n ` ${\r\n isFocused && !errors[name]?.message\r\n ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n : \"\"\r\n }` +\r\n ` ${\r\n isFocused && errors[name]?.message\r\n ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n : \"\"\r\n } ` +\r\n ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`\r\n }\r\n onFocus={() => setIsFocused(true)}\r\n onBlur={() => setIsFocused(false)}\r\n >\r\n <div className=\"flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full \">\r\n {!fileData ? (\r\n <div\r\n {...getRootProps()}\r\n className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${\r\n isDragActive\r\n ? \"border-indigo-300 bg-indigo-50\"\r\n : \"border-gray-300\"\r\n }`}\r\n >\r\n <input {...getInputProps()} id={name} />\r\n <p className=\"text-gray-500\">\r\n {isDragActive\r\n ? \"Sem přetáhněte soubor\"\r\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souboru\"}\r\n </p>\r\n </div>\r\n ) : (\r\n <div className=\"w-full flex items-center justify-between\">\r\n <div className=\" flex\">\r\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\r\n <a\r\n href={`/api/files/download/${fileData.id}`}\r\n className=\"pl-2 text-left underline text-primary\"\r\n target=\"_blank\"\r\n >\r\n {fileData.filename}\r\n </a>\r\n </div>\r\n {!disabled && (\r\n <div\r\n onClick={handleRemove}\r\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\r\n >\r\n <MdDeleteOutline\r\n style={{ fontSize: \"1.5rem\", margin: \"15px\" }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div\r\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FileInput;\r\n"],"names":[],"mappings":"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"}

package/dist/components/form/FileInputMultiple.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ interface FileInputMultipleProps {
     };
     initialFilesReadOnly?: boolean;
     attachmentName?: string;
+    attachmentType?: string;
 }
 declare const FileInputMultiple: React.FC<FileInputMultipleProps>;
 export default FileInputMultiple;

package/dist/components/form/FileInputMultiple.js CHANGED Viewed

@@ -36,7 +36,8 @@ const FileInputMultiple = ({
   disabled,
   errors = {},
   initialFilesReadOnly = true,
-  attachmentName
+  attachmentName,
+  attachmentType
 }) => {
   var _a, _b;
   const [fileDataList, setFileDataList] = useState(
@@ -76,6 +77,14 @@ const FileInputMultiple = ({
             return null;
           }
           const formData = new FormData();
+          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(
@@ -84,8 +93,7 @@ const FileInputMultiple = ({
               {
                 headers: {
                   "Content-Type": "multipart/form-data"
-                },
-                params: attachmentName ? { attachmentName } : void 0
+                }
               }
             );
             return response.data;

package/dist/components/form/FileInputMultiple.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInputMultiple.js","sources":["../../../lib/components/form/FileInputMultiple.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\r\nimport { IAttachment } from \"../../types\";\r\nimport { handleErrors, useFederationContext } from \"../../main\";\r\nimport { AxiosError } from \"axios\";\r\n\r\ninterface FileInputMultipleProps {\r\n name: string;\r\n label?: string;\r\n initialFiles?: IAttachment[];\r\n onFilesChanged: (e: any) => void;\r\n required?: boolean;\r\n description?: string;\r\n disabled?: boolean;\r\n errors?: { [key: string]: { message: string } };\r\n initialFilesReadOnly?: boolean;\r\n attachmentName?: string;\r\n}\r\n\r\ninterface IAttachmentReadOnly extends IAttachment {\r\n readonly?: boolean;\r\n}\r\n\r\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\r\n\r\nconst FileInputMultiple: React.FC<FileInputMultipleProps> = ({\r\n initialFiles,\r\n onFilesChanged,\r\n label,\r\n name,\r\n required,\r\n description,\r\n disabled,\r\n errors = {},\r\n initialFilesReadOnly = true,\r\n attachmentName,\r\n}) => {\r\n const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(\r\n initialFiles\r\n ? [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n : []\r\n );\r\n const federationContext = useFederationContext();\r\n\r\n useEffect(() => {\r\n console.log(\r\n \"%clibcomponents\\formFileInputMultiple.tsx:40 initialFiles\",\r\n \"color: #007acc;\",\r\n initialFiles\r\n );\r\n if (!initialFiles \|\| initialFiles.length === 0) return;\r\n setFileDataList(\r\n [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n );\r\n }, [initialFiles, initialFilesReadOnly]);\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: File[]) => {\r\n const uploadedFiles = await Promise.all(\r\n acceptedFiles.map(async (file) => {\r\n if (file.size > MAX_FILE_SIZE) {\r\n // Handle the case when the file size is exceeded\r\n\r\n federationContext.emitter.emit(\"message\", {\r\n title: \"Velikost souboru byla překročena\",\r\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\r\n classes: \"bg-danger \",\r\n timeout: 0,\r\n type: \"error\",\r\n });\r\n\r\n return null;\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append(\"file\", file);\r\n\r\n try {\r\n const response =\r\n await federationContext.apiClient.post<IAttachment>(\r\n \"/files/upload\",\r\n formData,\r\n {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n params: attachmentName ? { attachmentName } : undefined,\r\n }\r\n );\r\n return response.data;\r\n } catch (error) {\r\n handleErrors(error as AxiosError, federationContext.emitter);\r\n console.error(\"There was an error!\", error);\r\n return null;\r\n }\r\n })\r\n );\r\n\r\n const validFiles = uploadedFiles.filter(\r\n (file) => file !== null\r\n ) as IAttachment[];\r\n const updatedFileDataList = [...fileDataList, ...validFiles];\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n },\r\n [federationContext, fileDataList, onFilesChanged, name, attachmentName]\r\n );\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n onDrop,\r\n disabled,\r\n });\r\n\r\n const handleRemove = (fileId: number) => {\r\n const updatedFileDataList = fileDataList.filter(\r\n (file) => file.id !== fileId\r\n );\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n };\r\n if (disabled === true && fileDataList.length === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2 outline-none border bg-transparent ` +\r\n ` ${errors[name]?.message ? \"border-red-200\" : \"border-gray-300\"} `\r\n }\r\n >\r\n {!disabled && (\r\n <div\r\n {...getRootProps()}\r\n className={`w-full p-4 border-dashed cursor-pointer \r\n border-2 rounded-lg text-center hover:bg-gray-100\r\n ${isDragActive ? \"border-indigo-300 bg-indigo-50\" : \"border-gray-300\"}`}\r\n >\r\n <input {...getInputProps()} id={name} />\r\n <p className=\"text-gray-500\">\r\n {isDragActive\r\n ? \"Sem přetáhněte soubory\"\r\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souborů\"}\r\n </p>\r\n </div>\r\n )}\r\n <div className=\"w-full\">\r\n {fileDataList.map((file) => (\r\n <div\r\n key={file.id}\r\n className=\"w-full flex items-center justify-between py-2 border-b \"\r\n >\r\n <div className=\"flex items-center content-center\">\r\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\r\n <a\r\n href={`/api/files/download/${file.id}`}\r\n className=\"pl-2 text-left underline text-primary\"\r\n target=\"_blank\"\r\n >\r\n {file.filename}\r\n </a>\r\n </div>\r\n {!disabled && file.readonly !== true && (\r\n <div\r\n onClick={() => handleRemove(file.id)}\r\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\r\n >\r\n <MdDeleteOutline\r\n style={{ fontSize: \"1.5rem\", margin: \"10px\" }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div\r\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FileInputMultiple;\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"FileInputMultiple.js","sources":["../../../lib/components/form/FileInputMultiple.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\r\nimport { IAttachment } from \"../../types\";\r\nimport { handleErrors, useFederationContext } from \"../../main\";\r\nimport { AxiosError } from \"axios\";\r\n\r\ninterface FileInputMultipleProps {\r\n name: string;\r\n label?: string;\r\n initialFiles?: IAttachment[];\r\n onFilesChanged: (e: any) => void;\r\n required?: boolean;\r\n description?: string;\r\n disabled?: boolean;\r\n errors?: { [key: string]: { message: string } };\r\n initialFilesReadOnly?: boolean;\r\n attachmentName?: string;\r\n attachmentType?: string;\r\n}\r\n\r\ninterface IAttachmentReadOnly extends IAttachment {\r\n readonly?: boolean;\r\n}\r\n\r\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\r\n\r\nconst FileInputMultiple: React.FC<FileInputMultipleProps> = ({\r\n initialFiles,\r\n onFilesChanged,\r\n label,\r\n name,\r\n required,\r\n description,\r\n disabled,\r\n errors = {},\r\n initialFilesReadOnly = true,\r\n attachmentName,\r\n attachmentType,\r\n}) => {\r\n const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(\r\n initialFiles\r\n ? [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n : []\r\n );\r\n const federationContext = useFederationContext();\r\n\r\n useEffect(() => {\r\n console.log(\r\n \"%clibcomponents\\formFileInputMultiple.tsx:40 initialFiles\",\r\n \"color: #007acc;\",\r\n initialFiles\r\n );\r\n if (!initialFiles \|\| initialFiles.length === 0) return;\r\n setFileDataList(\r\n [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n );\r\n }, [initialFiles, initialFilesReadOnly]);\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: File[]) => {\r\n const uploadedFiles = await Promise.all(\r\n acceptedFiles.map(async (file) => {\r\n if (file.size > MAX_FILE_SIZE) {\r\n // Handle the case when the file size is exceeded\r\n\r\n federationContext.emitter.emit(\"message\", {\r\n title: \"Velikost souboru byla překročena\",\r\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\r\n classes: \"bg-danger \",\r\n timeout: 0,\r\n type: \"error\",\r\n });\r\n\r\n return null;\r\n }\r\n\r\n const formData = new FormData();\r\n\r\n // Add the JSON data object\r\n const dataObject = {\r\n ...(attachmentName && { attachmentName }),\r\n ...(attachmentType && { attachmentType }),\r\n };\r\n\r\n formData.append(\r\n \"data\",\r\n new Blob([JSON.stringify(dataObject)], { type: \"application/json\" })\r\n );\r\n formData.append(\"file\", file);\r\n\r\n try {\r\n const response =\r\n await federationContext.apiClient.post<IAttachment>(\r\n \"/files/upload\",\r\n formData,\r\n {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n }\r\n );\r\n return response.data;\r\n } catch (error) {\r\n handleErrors(error as AxiosError, federationContext.emitter);\r\n console.error(\"There was an error!\", error);\r\n return null;\r\n }\r\n })\r\n );\r\n\r\n const validFiles = uploadedFiles.filter(\r\n (file) => file !== null\r\n ) as IAttachment[];\r\n const updatedFileDataList = [...fileDataList, ...validFiles];\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n },\r\n [federationContext, fileDataList, onFilesChanged, name, attachmentName]\r\n );\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n onDrop,\r\n disabled,\r\n });\r\n\r\n const handleRemove = (fileId: number) => {\r\n const updatedFileDataList = fileDataList.filter(\r\n (file) => file.id !== fileId\r\n );\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n };\r\n if (disabled === true && fileDataList.length === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2 outline-none border bg-transparent ` +\r\n ` ${errors[name]?.message ? \"border-red-200\" : \"border-gray-300\"} `\r\n }\r\n >\r\n {!disabled && (\r\n <div\r\n {...getRootProps()}\r\n className={`w-full p-4 border-dashed cursor-pointer \r\n border-2 rounded-lg text-center hover:bg-gray-100\r\n ${isDragActive ? \"border-indigo-300 bg-indigo-50\" : \"border-gray-300\"}`}\r\n >\r\n <input {...getInputProps()} id={name} />\r\n <p className=\"text-gray-500\">\r\n {isDragActive\r\n ? \"Sem přetáhněte soubory\"\r\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souborů\"}\r\n </p>\r\n </div>\r\n )}\r\n <div className=\"w-full\">\r\n {fileDataList.map((file) => (\r\n <div\r\n key={file.id}\r\n className=\"w-full flex items-center justify-between py-2 border-b \"\r\n >\r\n <div className=\"flex items-center content-center\">\r\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\r\n <a\r\n href={`/api/files/download/${file.id}`}\r\n className=\"pl-2 text-left underline text-primary\"\r\n target=\"_blank\"\r\n >\r\n {file.filename}\r\n </a>\r\n </div>\r\n {!disabled && file.readonly !== true && (\r\n <div\r\n onClick={() => handleRemove(file.id)}\r\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\r\n >\r\n <MdDeleteOutline\r\n style={{ fontSize: \"1.5rem\", margin: \"10px\" }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div\r\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FileInputMultiple;\r\n"],"names":[],"mappings":"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"}

package/lib/components/datatable/DataTableServer.tsx CHANGED Viewed

@@ -128,7 +128,7 @@ function DataTableServer<T extends DataTableInternalItems>({
   const tableRef = useRef<HTMLTableElement | null>(null);
   const syncWidthRef = useRef<HTMLDivElement | null>(null);
-  const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>();
+  const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>(10);
   const federationContext = useFederationContext();
   const [data, setData] = useState<IPageable<T>>();
   const [isLoading, setIsLoading] = useState(false);
@@ -137,15 +137,17 @@ function DataTableServer<T extends DataTableInternalItems>({
   const [hasMounted, setHasMounted] = useState(false);
-  const [currentPage, setCurrentPage] = useState<number>();
+  const [currentPage, setCurrentPage] = useState<number>(0);
   const [selectedItems, setSelectedItems] = useState<T[]>([]);
   const [fulltextSearch, setFulltextSearch] = useState("");
   const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});
   const [columnFilters, setColumnFilters] = useState<{ [key: string]: any }>(
     {}
   );
-  const [showColFilters, setShowColFilters] = useState<boolean>();
+  const [showColFilters, setShowColFilters] = useState<boolean>(false);
   const [sortConfig, setSortConfig] = useState<ISortConfig | null>(null);
+  const prevDepsRef = useRef<any[]>([]);
+  const prevFilterDepsRef = useRef<any[]>([]);
   const createDataPageable = (
     response: any,
@@ -171,24 +173,53 @@ function DataTableServer<T extends DataTableInternalItems>({
   const mergedFilters: { [key: string]: any } = useMemo(() => {
     return showColFilters ? { ...columnFilters, ...filters } : filters || {};
   }, [columnFilters, filters, showColFilters]);
   useEffect(() => {
-    setReloadData(true);
+    const currentDeps = [
+      url,
+      showColFilters,
+      columnFilters,
+      itemsPerPageLocal,
+      currentPage,
+      sortConfig,
+      filters,
+      tableKey,
+    ];
+    // Kontrola, jestli se skutečně něco změnilo
+    const hasChanged = currentDeps.some((dep, index) => {
+      return JSON.stringify(dep) !== JSON.stringify(prevDepsRef.current[index]);
+    });
+    if (hasChanged) {
+      console.log(
+        "setting reloadData - actual change detected",
+        url,
+        showColFilters,
+        columnFilters,
+        itemsPerPageLocal,
+        currentPage,
+        sortConfig,
+        filters,
+        tableKey,
+        reloadData
+      );
+      setReloadData(true);
+    }
+    prevDepsRef.current = currentDeps;
   }, [
     url,
     showColFilters,
-    // id,
     columnFilters,
     itemsPerPageLocal,
     currentPage,
     sortConfig,
-    federationContext.apiClient,
-    federationContext.emitter,
     filters,
     tableKey,
   ]);
   useEffect(() => {
+    console.log("reloadData", reloadData);
     if (reloadData) {
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
@@ -307,66 +338,92 @@ function DataTableServer<T extends DataTableInternalItems>({
   }, [id]);
   useEffect(() => {
-    const fetchFilterOptions = async (column: DataTableColumn<T>) => {
-      if (column.filterOptions) {
-        return column.filterOptions;
-      } else if (column.filterSource) {
-        try {
-          const response = await federationContext.apiClient.get(
-            column.filterSource
-          );
-          const options = response.data.map((item: any) => ({
-            value: item[column.filterValueKey as keyof typeof item]?.toString(),
-            label: item[column.filterLabelKey as keyof typeof item]?.toString(),
-          }));
-          return options;
-        } catch (error) {
-          console.error("Error fetching filter options:", error);
-          return [];
-        }
+    const currentFilterDeps = [columns, federationContext.apiClient];
+    // Kontrola, jestli se skutečně něco změnilo
+    const hasFilterChanged = currentFilterDeps.some((dep, index) => {
+      const prev = prevFilterDepsRef.current[index];
+      if (index === 1) {
+        // federationContext.apiClient (index 1) - referenční porovnání
+        return dep !== prev;
       } else {
-        return [];
+        // columns (index 0) - deep porovnání
+        return JSON.stringify(dep) !== JSON.stringify(prev);
       }
-    };
+    });
-    const updateFilterOptions = async () => {
-      const newFilterOptions: Record<string, any[]> = {};
-      for (const column of columns) {
-        if (
-          (column.filterType === "select" ||
-            column.filterType === "multi-select") &&
-          (column.filterSource || column.filterOptions) &&
-          column.filterValueKey &&
-          column.filterLabelKey &&
-          column.filterParam
-        ) {
-          const options = await fetchFilterOptions(column);
-          if (options && column.filterType === "select") {
-            // Filter out empty values and add a "clear" option
-            const filteredOptions = options.filter(
-              (option: IOptionItem) =>
-                option.value !== null &&
-                option.value !== undefined &&
-                option.value !== ""
+    if (hasFilterChanged) {
+      const fetchFilterOptions = async (column: DataTableColumn<T>) => {
+        if (column.filterOptions) {
+          return column.filterOptions;
+        } else if (column.filterSource) {
+          try {
+            const response = await federationContext.apiClient.get(
+              column.filterSource
             );
-            newFilterOptions[column.filterParam as string] = [
-              { value: "__clear__", label: "Všechny" },
-              ...filteredOptions,
-            ];
-          } else if (options && column.filterType === "multi-select") {
-            newFilterOptions[column.filterParam as string] = options;
+            const options = response.data.map((item: any) => ({
+              value:
+                item[column.filterValueKey as keyof typeof item]?.toString(),
+              label:
+                item[column.filterLabelKey as keyof typeof item]?.toString(),
+            }));
+            return options;
+          } catch (error) {
+            console.error("Error fetching filter options:", error);
+            return [];
+          }
+        } else {
+          return [];
+        }
+      };
+      const updateFilterOptions = async () => {
+        const newFilterOptions: Record<string, any[]> = {};
+        for (const column of columns) {
+          if (
+            (column.filterType === "select" ||
+              column.filterType === "multi-select") &&
+            (column.filterSource || column.filterOptions) &&
+            column.filterValueKey &&
+            column.filterLabelKey &&
+            column.filterParam
+          ) {
+            const options = await fetchFilterOptions(column);
+            if (options && column.filterType === "select") {
+              // Filter out empty values and add a "clear" option
+              const filteredOptions = options.filter(
+                (option: IOptionItem) =>
+                  option.value !== null &&
+                  option.value !== undefined &&
+                  option.value !== ""
+              );
+              newFilterOptions[column.filterParam as string] = [
+                { value: "__clear__", label: "Všechny" },
+                ...filteredOptions,
+              ];
+            } else if (options && column.filterType === "multi-select") {
+              newFilterOptions[column.filterParam as string] = options;
+            }
           }
         }
-      }
-      setFilterOptions(newFilterOptions);
-    };
+        setFilterOptions(newFilterOptions);
+      };
+      console.log(
+        "updateFilterOptions - actual change detected",
+        columns,
+        federationContext.apiClient
+      );
+      updateFilterOptions();
+    }
-    updateFilterOptions();
+    prevFilterDepsRef.current = currentFilterDeps;
   }, [columns, federationContext.apiClient]);
   const hasSomeColFilters = useMemo(() => {
     return columns.some((column) => !!column.filterParam);
   }, [columns]);
@@ -848,7 +905,12 @@ function DataTableServer<T extends DataTableInternalItems>({
                             <div
                               className="p-0 m-0 pb-2"
                               onClick={(e) => e.stopPropagation()}
-                              data-cy={"datatable-filter-container-" + id + "-" + String(key)}
+                              data-cy={
+                                "datatable-filter-container-" +
+                                id +
+                                "-" +
+                                String(key)
+                              }
                             >
                               {filterType === "select" ? (
                                 <Select
@@ -867,15 +929,11 @@ function DataTableServer<T extends DataTableInternalItems>({
                                       String(filterParam)
                                     ]?.toString() || "__clear__"
                                   }
                                   disabled={Object.keys(
                                     (filters as object) || {}
                                   ).includes(String(filterParam))}
                                 >
-                                  <SelectTrigger
-                                    className="flex-1 w-full px-2 font-normal placeholder-muted-foreground"
-                                  >
+                                  <SelectTrigger className="flex-1 w-full px-2 font-normal placeholder-muted-foreground">
                                     <SelectValue placeholder="Zadejte filtr" />
                                   </SelectTrigger>
                                   <SelectContent>
@@ -921,7 +979,7 @@ function DataTableServer<T extends DataTableInternalItems>({
                                   ).includes(String(filterParam))}
                                   variant="secondary"
                                   maxCount={0}
-                                 />
+                                />
                               ) : filterType === "dateRange" ? (
                                 <DateRangeField
                                   //    key={JSON.stringify(mergedFilters)}

package/lib/components/form/FileInput.tsx CHANGED Viewed

@@ -23,6 +23,7 @@ interface FileInputProps {
   disabled?: boolean;
   errors?: { [key: string]: { message: string } };
   attachmentName?: string;
+  attachmentType?: string;
 }
 const MAX_FILE_SIZE = 1024 * 1024; // 1MB
@@ -37,6 +38,7 @@ const FileInput: React.FC<FileInputProps> = ({
   disabled,
   errors = {},
   attachmentName,
+  attachmentType,
 }) => {
   const [fileData, setFileData] = useState<FileData | null>(
     initialFile || null
@@ -47,7 +49,7 @@ const FileInput: React.FC<FileInputProps> = ({
   useEffect(() => {
     if (initialFile) {
       setFileData(initialFile);
-     }
+    }
   }, [initialFile]);
   const onDrop = useCallback(
@@ -68,6 +70,17 @@ const FileInput: React.FC<FileInputProps> = ({
         }
         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 {
@@ -78,7 +91,6 @@ const FileInput: React.FC<FileInputProps> = ({
               headers: {
                 "Content-Type": "multipart/form-data",
               },
-              params: attachmentName ? { attachmentName } : undefined,
             }
           );
           setFileData(response.data);
@@ -98,6 +110,7 @@ const FileInput: React.FC<FileInputProps> = ({
       onFileChanged,
       name,
       attachmentName,
+      attachmentType,
     ]
   );

package/lib/components/form/FileInputMultiple.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ interface FileInputMultipleProps {
   errors?: { [key: string]: { message: string } };
   initialFilesReadOnly?: boolean;
   attachmentName?: string;
+  attachmentType?: string;
 }
 interface IAttachmentReadOnly extends IAttachment {
@@ -35,6 +36,7 @@ const FileInputMultiple: React.FC<FileInputMultipleProps> = ({
   errors = {},
   initialFilesReadOnly = true,
   attachmentName,
+  attachmentType,
 }) => {
   const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(
     initialFiles
@@ -80,6 +82,17 @@ const FileInputMultiple: React.FC<FileInputMultipleProps> = ({
           }
           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 {
@@ -91,7 +104,6 @@ const FileInputMultiple: React.FC<FileInputMultipleProps> = ({
                   headers: {
                     "Content-Type": "multipart/form-data",
                   },
-                  params: attachmentName ? { attachmentName } : undefined,
                 }
               );
             return response.data;

package/package.json CHANGED Viewed

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