@applica-software-guru/react-admin 1.5.362-alpha1 → 1.5.363

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.362-alpha1"
+  "version": "1.5.363"
 }

package/src/components/Pagination/Pagination.tsx

@@ -4,7 +4,6 @@ import {
   ComponentPropType,
   ListPaginationContextValue,
   sanitizeListRestProps,
-  useListContext,
   useListPaginationContext,
   useResourceDefinition,
   useTranslate
@@ -17,8 +16,6 @@ import { PaginationActions, PaginationActionsProps } from './PaginationActions';
 const Pagination: FC<PaginationProps> = memo((props) => {
   const { rowsPerPageOptions = DefaultRowsPerPageOptions, actions, limit = null, ...rest } = props;
   const { isLoading, hasNextPage, page, perPage, total, setPage, setPerPage } = useListPaginationContext(props);
-  // Recupera i dati della pagina corrente
-  const { data } = useListContext();
   const translate = useTranslate();
   const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const [currentPage, setCurrentPage] = useState(page - 1); // Stato per la UI
@@ -36,12 +33,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
     setIsSelectedPage(false);
   }, [page]);
 
-  // Modalità infinito: total === -1
   const totalPages = useMemo(() => {
-    if (total === -1) {
-      // In modalità infinito, non conosciamo il totale
-      return undefined;
-    }
     return total != null ? Math.ceil(total / perPage) : undefined;
   }, [perPage, total]);
 
@@ -63,30 +55,12 @@ const Pagination: FC<PaginationProps> = memo((props) => {
       }
 
       event.preventDefault();
-      // Modalità infinito: total === -1
-      if (total === -1) {
-        // Puoi andare indietro se page >= 0
-        // Puoi andare avanti solo se la pagina attuale ha rowsPerPage record
-        const canGoForward = data && Array.isArray(data) && data.length === perPage;
-        if (page < 0) {
-          throw new Error(
-            translate('ra.navigation.page_out_of_boundaries', {
-              page: page + 1
-            })
-          );
-        }
-        if (page > currentPage && !canGoForward) {
-          // Non puoi andare avanti se la risposta è minore di rowsPerPage
-          return;
-        }
-      } else {
-        if (page < 0 || (totalPages !== undefined && page > totalPages - 1)) {
-          throw new Error(
-            translate('ra.navigation.page_out_of_boundaries', {
-              page: page + 1
-            })
-          );
-        }
+      if (page < 0 || (totalPages !== undefined && page > totalPages - 1)) {
+        throw new Error(
+          translate('ra.navigation.page_out_of_boundaries', {
+            page: page + 1
+          })
+        );
       }
 
       const arrowSelected =
@@ -110,7 +84,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
         setPage(page + 1);
       }
     },
-    [debouncedPageChange, setPage, translate, totalPages, setIsSelectedPage, total, data, perPage, currentPage]
+    [debouncedPageChange, setPage, translate, totalPages, setIsSelectedPage]
   );
 
   const handlePerPageChange = useCallback(
@@ -202,7 +176,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
       // @ts-ignore
       ActionsComponent={ActionsComponent}
       nextIconButtonProps={{
-        disabled: total === -1 ? !(data && Array.isArray(data) && data.length === perPage) : !hasNextPage
+        disabled: !hasNextPage
       }}
       component="span"
       labelRowsPerPage={translate('ra.navigation.page_rows_per_page')}

package/src/components/Pagination/PaginationActions.tsx

@@ -1,22 +1,16 @@
 import { FC, memo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Pagination, PaginationProps } from '@mui/material';
-import { useListContext, useTranslate } from 'ra-core';
 import PropTypes from 'prop-types';
+import { useTranslate } from 'ra-core';
 
 const PaginationActions: FC<PaginationActionsProps> = memo((props) => {
   const { page, rowsPerPage, count, onPageChange, size = 'small', className, ...rest } = props;
-  const { data } = useListContext();
   const translate = useTranslate();
 
   const nbPages = Math.ceil(count / rowsPerPage) || 1;
 
-  // Modalità infinito: total === -1
-  const isInfinite = count === -1;
-  // Disabilita avanti se i record sono meno di rowsPerPage
-  const disableNext = isInfinite ? !(data && Array.isArray(data) && data.length === rowsPerPage) : page + 1 >= nbPages;
-
-  if (nbPages === 1 && !isInfinite) {
+  if (nbPages === 1) {
     return <Root className={className} />;
   }
 
@@ -39,22 +33,13 @@ const PaginationActions: FC<PaginationActionsProps> = memo((props) => {
     <Root className={className}>
       <Pagination
         size={size}
-        count={isInfinite ? page + 2 : nbPages}
+        count={nbPages}
+        // <TablePagination>, the parent, uses 0-based pagination
+        // while <Pagination> uses 1-based pagination
         page={page + 1}
-        onChange={(e: any, newPage) => {
-          // Disabilita avanti in modalità infinito
-          if (isInfinite && newPage - 1 > page && disableNext) return;
-          onPageChange(e, newPage - 1);
-        }}
+        onChange={(e: any, page) => onPageChange(e, page - 1)}
         {...sanitizeRestProps(rest)}
         getItemAriaLabel={getItemAriaLabel}
-        renderItem={(item) => {
-          // Disabilita il bottone avanti in modalità infinito
-          if (isInfinite && item.type === 'next') {
-            return { ...item, disabled: disableNext };
-          }
-          return item;
-        }}
       />
     </Root>
   );

package/src/components/ra-lists/Datagrid/Datagrid.tsx

@@ -5,19 +5,29 @@ import clsx from 'clsx';
 import difference from 'lodash/difference';
 import union from 'lodash/union';
 import { Identifier, sanitizeListRestProps, useListContext, useTranslate } from 'ra-core';
-import { FC, cloneElement, createElement, isValidElement, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  FC,
+  cloneElement,
+  createElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import * as React from 'react';
 import {
   BulkDeleteButton,
   DatagridBody,
   DatagridClasses,
-  DatagridHeader,
   DatagridLoading,
   DatagridRoot,
   PureDatagridBody,
   DatagridProps as RaDatagridProps
 } from 'react-admin';
 import { Empty } from '@/components/ra-lists/Empty';
+import { DatagridHeader, SortItem } from './DatagridHeader';
 
 const defaultBulkActionButtons = <BulkDeleteButton />;
 
@@ -125,6 +135,29 @@ const Datagrid = React.forwardRef((props, ref) => {
 
   const translate = useTranslate();
   const { sort, data, isLoading, onSelect, onToggleItem, selectedIds, setSort, total } = useListContext(props);
+  const [multiSort, setMultiSort] = useState<SortItem[]>([]);
+
+  const prevMultiSortKeyRef = useRef<string>('');
+  const multiSortKey = useMemo(() => multiSort.map((s) => `${s.field}:${s.order}`).join('|'), [multiSort]);
+
+  useEffect(() => {
+    const prevKey = prevMultiSortKeyRef.current;
+    if (prevKey === multiSortKey) return;
+
+    if (multiSort.length > 0) {
+      setSort({
+        field: multiSort.map((s) => s.field).join(','),
+        order: multiSort.map((s) => s.order).join(',') as 'ASC' | 'DESC'
+      });
+    }
+
+    prevMultiSortKeyRef.current = multiSortKey;
+  }, [multiSortKey, multiSort, setSort]);
+
+  const onMultiSortChange = useCallback((newMultiSort: SortItem[]) => {
+    setMultiSort(newMultiSort);
+  }, []);
+
   const hasBulkActions = !!bulkActionButtons !== false;
   const contextValue = useMemo(() => ({ isRowExpandable, expandSingle }), [isRowExpandable, expandSingle]);
   const lastSelected = useRef(null);
@@ -216,7 +249,7 @@ const Datagrid = React.forwardRef((props, ref) => {
         <div className={DatagridClasses.tableWrapper}>
           <Table ref={ref} className={DatagridClasses.table} size={size} {...sanitizeRestProps(rest)}>
             {createOrCloneElement(
-              header,
+              <DatagridHeader multiSort={multiSort} setMultiSort={onMultiSortChange} />,
               {
                 children,
                 sort,

package/src/components/ra-lists/Datagrid/DatagridHeader.tsx

@@ -0,0 +1,179 @@
+import { Checkbox, TableCell, TableHead, TableRow, TableSortLabel, Typography } from '@mui/material';
+import { RaRecord, useListContext, useTranslateLabel } from 'ra-core';
+import React, { ReactElement, ReactNode, useCallback, useMemo } from 'react';
+import { DatagridHeaderProps } from 'react-admin';
+
+type SortItem = {
+  field: string;
+  order: 'ASC' | 'DESC';
+};
+
+interface MultiSortDatagridHeaderProps extends Omit<DatagridHeaderProps, 'setSort'> {
+  setMultiSort?: (sort: SortItem[]) => void;
+  multiSort?: SortItem[];
+}
+
+function DatagridHeader(props: MultiSortDatagridHeaderProps): ReactElement {
+  const {
+    children,
+    hasExpand,
+    hasBulkActions,
+    isRowSelectable,
+    onSelect,
+    selectedIds = [],
+    data = [],
+    multiSort = [],
+    setMultiSort,
+    resource
+  } = props;
+  const { setSort } = useListContext();
+  const translateLabel = useTranslateLabel();
+
+  const updateSort = useCallback(
+    (field: string, isMultiSort: boolean = false) => {
+      if (!setMultiSort) {
+        const currentSortForField = multiSort.find((s) => s.field === field);
+        const newOrder = currentSortForField?.order === 'ASC' ? 'DESC' : 'ASC';
+        setSort({ field, order: newOrder });
+        return;
+      }
+
+      const existingIndex = multiSort.findIndex((s) => s.field === field);
+
+      if (!isMultiSort) {
+        if (existingIndex >= 0) {
+          const currentOrder = multiSort[existingIndex].order;
+          if (currentOrder === 'ASC') {
+            setMultiSort([{ field, order: 'DESC' }]);
+          } else {
+            setMultiSort([]);
+          }
+        } else {
+          setMultiSort([{ field, order: 'ASC' }]);
+        }
+        return;
+      }
+
+      const newMultiSort = [...multiSort];
+
+      if (existingIndex >= 0) {
+        const currentOrder = newMultiSort[existingIndex].order;
+        if (currentOrder === 'ASC') {
+          newMultiSort[existingIndex] = { field, order: 'DESC' };
+        } else {
+          newMultiSort.splice(existingIndex, 1);
+        }
+      } else {
+        newMultiSort.push({ field, order: 'ASC' });
+      }
+
+      setMultiSort(newMultiSort);
+    },
+    [multiSort, setMultiSort, setSort]
+  );
+
+  const handleSelectAll = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (!onSelect) {
+        return;
+      }
+      if (event.target.checked) {
+        const allIds = data
+          .filter((record: RaRecord) => (isRowSelectable ? isRowSelectable(record) : true))
+          .map((record: RaRecord) => record.id);
+        onSelect(allIds);
+      } else {
+        onSelect([]);
+      }
+    },
+    [data, isRowSelectable, onSelect]
+  );
+
+  const getSortForField = useCallback(
+    (field: string): { order: 'ASC' | 'DESC'; index: number } | null => {
+      const index = multiSort.findIndex((s) => s.field === field);
+      if (index >= 0) {
+        return { order: multiSort[index].order, index };
+      }
+      return null;
+    },
+    [multiSort]
+  );
+
+  const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
+
+  const selectableCount = useMemo(
+    () => data.filter((record: RaRecord) => (isRowSelectable ? isRowSelectable(record) : true)).length,
+    [data, isRowSelectable]
+  );
+
+  const handleSortClick = useCallback(
+    (source: string) => (event: React.MouseEvent<unknown>) => {
+      updateSort(source, event.ctrlKey || event.metaKey);
+    },
+    [updateSort]
+  );
+
+  return (
+    <TableHead>
+      <TableRow>
+        {!!hasExpand && <TableCell />}
+        {!!hasBulkActions && (
+          <TableCell padding="checkbox">
+            <Checkbox
+              color="primary"
+              checked={selectedIds.length > 0 && selectedIds.length === selectableCount}
+              onChange={handleSelectAll}
+            />
+          </TableCell>
+        )}
+        {childrenArray.length > 0 ? (
+          childrenArray.map((child: ReactNode, index) => {
+            if (!child || typeof child !== 'object' || !('props' in child)) {
+              return <TableCell key={index} />;
+            }
+
+            const source =
+              child.props.source ?? (typeof child.props.label === 'string' ? child.props.label : undefined);
+            const sortable = child.props.sortable !== false && !!source;
+            const sortInfo = sortable ? getSortForField(source) : null;
+
+            const translated = translateLabel({
+              ...child.props,
+              source: child.props.source ?? source,
+              resource
+            });
+
+            const displayLabel: ReactNode = translated ?? child.props.label ?? null;
+
+            return (
+              <TableCell
+                key={child.props.source ?? index}
+                align={child.props.textAlign || 'left'}
+                sx={{ cursor: sortable ? 'pointer' : 'default' }}
+              >
+                {sortable ? (
+                  <TableSortLabel
+                    active={!!sortInfo}
+                    direction={(sortInfo?.order.toLowerCase() as 'asc' | 'desc') || 'asc'}
+                    onClick={handleSortClick(source)}
+                  >
+                    <Typography>{displayLabel}</Typography>
+                  </TableSortLabel>
+                ) : (
+                  displayLabel
+                )}
+              </TableCell>
+            );
+          })
+        ) : (
+          <TableCell />
+        )}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export { DatagridHeader };
+
+export type { MultiSortDatagridHeaderProps, SortItem };

package/src/components/ra-lists/ListTabsToolbar.tsx

@@ -19,147 +19,141 @@ interface ListTabsToolbarProps {
   tabs?: ListTabToolbarConfig[];
 }
 
-function ListTabsToolbar({ tabs = [] }: ListTabsToolbarProps) {
-  const { setFilters, filterValues, displayedFilters } = useListContext();
-  const { setCurrentTabKey } = useListViewContext();
-  const resource = useResourceContext();
-  const theme = useTheme();
-  const [searchParams, setSearchParams] = useSearchParams();
+interface TabFilterState {
+  filterValues: Record<string, any>;
+  displayedFilters: Record<string, any>;
+}
 
-  if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
-    throw new Error('ListTabsToolbar: Each tab must have a unique key.');
-  }
+function useListTabs(tabs: ListTabToolbarConfig[]) {
+  const [searchParams] = useSearchParams();
+  const resource = useResourceContext();
+  const { setCurrentTabKey } = useListViewContext();
+  const { filterValues, displayedFilters, setFilters } = useListContext();
 
-  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
   const resourceKey = useMemo(() => resource.replace(/^entities\//, ''), [resource]);
-  const tabGroupKey = useMemo(() => `${resourceKey}-tab-group`, [resourceKey]);
-  const tabFiltersKey = useMemo(() => `${resourceKey}-tab-filters`, [resourceKey]);
+  const tabGroupKey = `${resourceKey}-tab-group`;
+  const tabFiltersKey = `${resourceKey}-tab-filters`;
 
-  const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex);
-  const [tabFilterStates, setTabFilterStates] = useSessionStorage(tabFiltersKey, {});
-  const initialized = useRef(false);
-
-  const saveCurrentTabFilters = useMemo(
-    () =>
-      _.debounce((tabKey: string, filters: any, displayed: any) => {
-        setTabFilterStates((prev: any) => ({
-          ...prev,
-          [tabKey]: {
-            filterValues: { ...filters },
-            displayedFilters: { ...displayed }
-          }
-        }));
-      }, 500),
-    [setTabFilterStates]
-  );
+  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
 
-  const restoreTabFilters = useCallback(
-    (tabKey: string, tabFilter: Record<string, any>, debounce: boolean) => {
-      const savedState = (tabFilterStates as any)?.[tabKey];
+  const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex) as [number, (v: number) => void];
+  const [tabFilterStates, setTabFilterStates] = useSessionStorage(tabFiltersKey, {}) as [
+    Record<string, TabFilterState>,
+    (v: any) => void
+  ];
 
-      if (savedState) {
-        setFilters(savedState.filterValues, savedState.displayedFilters || {}, debounce);
-      } else {
-        setFilters(tabFilter, {}, debounce);
-      }
-    },
-    [tabFilterStates, setFilters]
-  );
+  const initialized = useRef(false);
+  const switchingTab = useRef(false);
 
-  const buildFilters = useCallback(
-    (index: number, debounce: boolean) => {
-      const newTabKey = tabs[index].key;
+  const handleTabChange = useCallback(
+    (index: number) => {
+      const tab = tabs[index];
+      if (!tab) return;
 
-      setCurrentTabKey?.(newTabKey);
-      restoreTabFilters(newTabKey, tabs[index].filter, debounce);
-    },
-    [tabs, setCurrentTabKey, restoreTabFilters]
-  );
+      setCurrentTab(index);
+      setCurrentTabKey?.(tab.key);
 
-  const updateUrlParam = useCallback(
-    (index: number) => {
-      const newParams = new URLSearchParams(searchParams.toString());
-      newParams.set(tabGroupKey, String(index));
-      setSearchParams(newParams, { replace: true });
-    },
-    [searchParams, setSearchParams, tabGroupKey]
-  );
+      const savedState = tabFilterStates?.[tab.key];
+      const nextFilters = savedState?.filterValues ?? tab.filter;
+      const nextDisplayed = savedState?.displayedFilters ?? {};
 
-  const handleChange = useCallback(
-    (_: any, newIndex: number) => {
-      setCurrentTab(newIndex);
-      buildFilters(newIndex, true);
+      if (!_.isEqual(nextFilters, filterValues) || !_.isEqual(nextDisplayed, displayedFilters)) {
+        switchingTab.current = true;
+        setFilters(nextFilters, nextDisplayed);
+      }
     },
-    [buildFilters, setCurrentTab]
+    [tabs, tabFilterStates, filterValues, displayedFilters, setCurrentTab, setCurrentTabKey, setFilters]
   );
 
   useEffect(() => {
-    if (initialized.current && tabs.length > 0) {
-      const currentTabKey = tabs[Number(currentTab)]?.key;
-      if (currentTabKey) {
-        saveCurrentTabFilters(currentTabKey, filterValues, displayedFilters);
-      }
-    }
-  }, [filterValues, displayedFilters, currentTab, tabs, saveCurrentTabFilters]);
+    if (initialized.current) return;
+    initialized.current = true;
 
-  useEffect(() => {
     const param = searchParams.get(tabGroupKey);
-    if (param !== String(currentTab)) {
-      updateUrlParam(Number(currentTab));
+    const initialIndex = param != null ? Number(param) : Number(currentTab);
+    const hasUrlFilter = searchParams.get('filter') !== null;
+
+    if (hasUrlFilter) {
+      setCurrentTab(initialIndex);
+      setCurrentTabKey?.(tabs[initialIndex]?.key);
+    } else {
+      handleTabChange(initialIndex);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterValues]);
+  }, [searchParams, tabGroupKey, currentTab, setCurrentTab, setCurrentTabKey, handleTabChange, tabs]);
 
   useEffect(() => {
-    if (!initialized.current) {
-      const param = searchParams.get(tabGroupKey);
-      const initialIndex = param != null ? Number(param) : Number(currentTab);
+    if (!initialized.current || switchingTab.current) {
+      switchingTab.current = false;
+      return;
+    }
+
+    const currentTabKey = tabs[Number(currentTab)]?.key;
+    if (!currentTabKey) return;
 
-      if (param != null && initialIndex !== Number(currentTab)) {
-        setCurrentTab(initialIndex);
+    setTabFilterStates((prev: Record<string, TabFilterState>) => {
+      const prevState = prev?.[currentTabKey];
+      if (
+        _.isEqual(prevState?.filterValues, filterValues) &&
+        _.isEqual(prevState?.displayedFilters, displayedFilters)
+      ) {
+        return prev;
       }
+      return {
+        ...prev,
+        [currentTabKey]: { filterValues, displayedFilters }
+      };
+    });
+  }, [filterValues, displayedFilters, currentTab, tabs, setTabFilterStates]);
+
+  return {
+    currentTab,
+    handleTabChange: (_: any, val: number) => handleTabChange(val)
+  };
+}
 
-      buildFilters(initialIndex, false);
-      initialized.current = true;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+function ListTabsToolbar({ tabs = [] }: ListTabsToolbarProps) {
+  const theme = useTheme();
+  const { currentTab, handleTabChange } = useListTabs(tabs);
+
+  if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
+    throw new Error('ListTabsToolbar: Each tab must have a unique key.');
+  }
+
+  if (tabs.length === 0) return null;
 
   return (
     <Box sx={{ width: '100%' }}>
-      {tabs.length > 0 ? (
-        <Tabs
-          value={Number(currentTab)}
-          onChange={handleChange}
-          allowScrollButtonsMobile
-          variant="scrollable"
-          scrollButtons="auto"
-          sx={{
-            width: '100%',
-            '.MuiTabs-scrollButtons.Mui-disabled': {
-              opacity: 0.2
-            }
-          }}
-        >
-          {tabs.map((tab) => (
-            <Tab
-              icon={tab.icon}
-              key={tab.key}
-              label={tab.label}
-              sx={{
-                flex: '0 0 auto',
-                lineHeight: 1,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                '& .MuiTab-iconWrapper': {
-                  marginRight: theme.spacing(0.5)
-                }
-              }}
-            />
-          ))}
-        </Tabs>
-      ) : null}
+      <Tabs
+        value={Number(currentTab)}
+        onChange={handleTabChange}
+        allowScrollButtonsMobile
+        variant="scrollable"
+        scrollButtons="auto"
+        sx={{
+          width: '100%',
+          '.MuiTabs-scrollButtons.Mui-disabled': {
+            opacity: 0.2
+          }
+        }}
+      >
+        {tabs.map((tab) => (
+          <Tab
+            icon={tab.icon}
+            key={tab.key}
+            label={tab.label}
+            sx={{
+              flex: '0 0 auto',
+              lineHeight: 1,
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              '& .MuiTab-iconWrapper': {
+                marginRight: theme.spacing(0.5)
+              }
+            }}
+          />
+        ))}
+      </Tabs>
     </Box>
   );
 }