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

package/lib/components/datatable/DataTableServer.tsx

@@ -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/package.json

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