@applica-software-guru/react-admin 1.5.301 → 1.5.303

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.301"
+  "version": "1.5.303"
 }

package/src/components/Layout/Sidebar/Content.tsx

@@ -0,0 +1,13 @@
+import { Box } from '@mui/material';
+
+type ContentProps = {
+  children: React.ReactNode;
+  sx?: Record<string, any>;
+};
+
+function Content(props: ContentProps) {
+  const { sx } = props;
+  return <Box sx={{ ...sx, flex: '1 1 auto', backgroundColor: 'background.paper' }}>{props.children}</Box>;
+}
+
+export { Content };

package/src/components/Layout/Sidebar/Drawer.tsx

@@ -0,0 +1,50 @@
+import { Drawer as MUIDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { useCallback } from 'react';
+import { useSx } from '@/hooks';
+import { useListViewContext } from '@/components/ra-lists';
+import { isFunction } from 'lodash';
+
+type DrawerProps = {
+  PaperProps?: Record<string, any>;
+  anchor?: 'left' | 'right' | 'top' | 'bottom';
+  variant?: 'temporary' | 'persistent' | 'permanent';
+  children: React.ReactNode;
+  open?: boolean;
+};
+
+function Drawer(props: DrawerProps) {
+  const { PaperProps, anchor = 'right', variant = 'temporary', open = false } = props;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const anchorPosition = isMobile ? 'bottom' : anchor;
+  const { setSidebarOpen } = useListViewContext();
+  const handleClose = useCallback(() => {
+    if (isFunction(setSidebarOpen)) {
+      setSidebarOpen(false);
+    }
+  }, [setSidebarOpen]);
+  const sx = useSx(PaperProps ?? {}, {
+    backgroundColor: 'background.default',
+    boxShadow: '-10px 4px 42px 0px rgba(0, 0, 0, 0.25)',
+    width: {
+      xs: window.innerWidth,
+      sm: 480,
+      md: 600
+    }
+  });
+
+  return (
+    <MUIDrawer
+      {...props}
+      anchor={anchorPosition}
+      onClose={handleClose}
+      open={open}
+      PaperProps={{ sx: sx }}
+      variant={variant}
+    >
+      {props.children}
+    </MUIDrawer>
+  );
+}
+
+export { Drawer };

package/src/components/Layout/Sidebar/Footer.tsx

@@ -0,0 +1,20 @@
+import { Box, Divider } from '@mui/material';
+
+import { ReactNode } from 'react';
+
+interface FooterProps {
+  children: ReactNode;
+}
+
+function Footer(props: FooterProps) {
+  return (
+    <Box>
+      <Divider />
+      <Box bgcolor={'background.paper'} px={2} py={2.5}>
+        {props.children}
+      </Box>
+    </Box>
+  );
+}
+
+export { Footer };

package/src/components/Layout/Sidebar/Header.tsx

@@ -0,0 +1,54 @@
+import { Box, Divider, Stack, Typography } from '@mui/material';
+
+interface HeaderProps {
+  children: React.ReactNode;
+}
+
+function Header(props: HeaderProps) {
+  return (
+    <Box>
+      <Stack
+        alignItems="center"
+        bgcolor="background.paper"
+        direction="row"
+        px={2.5}
+        py={2}
+        spacing={2}
+        minHeight={'64px'}
+      >
+        {props.children}
+      </Stack>
+      <Divider sx={{ opacity: 0.6 }} />
+    </Box>
+  );
+}
+
+interface HeaderTextProps {
+  primary?: React.ReactNode;
+  secondary?: React.ReactNode;
+}
+
+function HeaderText(props: HeaderTextProps) {
+  const { primary, secondary } = props;
+
+  return (
+    <Box display="inline-flex" flexGrow={1} flexShrink={1} flexDirection={'column'}>
+      {primary ? <Typography variant="h5">{primary}</Typography> : null}
+      {secondary ? <Typography variant="h6">{secondary}</Typography> : null}
+    </Box>
+  );
+}
+
+interface HeaderActionProps {
+  children: React.ReactNode;
+}
+
+function HeaderAction(props: HeaderActionProps) {
+  return (
+    <Box display="inline-flex" flexGrow={0} flexShrink={0}>
+      {props.children}
+    </Box>
+  );
+}
+
+export { Header, HeaderAction, HeaderText };

package/src/components/Layout/Sidebar/index.ts

@@ -0,0 +1,22 @@
+import { Content } from './Content';
+import { Drawer } from './Drawer';
+import { Footer } from './Footer';
+import { Header, HeaderAction, HeaderText } from './Header';
+
+type ISidebar = typeof Drawer & {
+  Content: typeof Content;
+  Footer: typeof Footer;
+  Header: typeof Header;
+  HeaderAction: typeof HeaderAction;
+  HeaderText: typeof HeaderText;
+};
+
+const DefaultSidebar = Drawer as ISidebar;
+
+DefaultSidebar.Content = Content;
+DefaultSidebar.Footer = Footer;
+DefaultSidebar.Header = Header;
+DefaultSidebar.HeaderText = HeaderText;
+DefaultSidebar.HeaderAction = HeaderAction;
+
+export { DefaultSidebar as Sidebar };

package/src/components/Layout/TopToolbar.tsx

@@ -0,0 +1,43 @@
+import { Theme, Toolbar, ToolbarProps, styled, useMediaQuery } from '@mui/material';
+import PropTypes from 'prop-types';
+
+function TopToolbar(props: ToolbarProps) {
+  const isXSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'));
+  return <StyledToolbar disableGutters variant={isXSmall ? 'regular' : 'dense'} {...sanitizeToolbarRestProps(props)} />;
+}
+
+TopToolbar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+
+const PREFIX = 'RaTopToolbar';
+
+const StyledToolbar = styled(Toolbar, {
+  name: PREFIX,
+  overridesResolver: (styles) => styles.root
+})(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  gap: theme.spacing(1),
+  whiteSpace: 'nowrap',
+  flex: '0 1 auto',
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5),
+  paddingInline: theme.spacing(2),
+  [theme.breakpoints.down('md')]: {
+    flex: '0 1 100%'
+  },
+  [theme.breakpoints.down('sm')]: {
+    backgroundColor: theme.palette.background.paper,
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
+}));
+
+function sanitizeToolbarRestProps({ hasCreate, ...props }: any): any {
+  return props;
+}
+
+export { TopToolbar };

package/src/components/Layout/index.ts

@@ -9,7 +9,9 @@ export * from './MenuProvider';
 export * from './NavMenu';
 export * from './Navigation';
 export * from './Provider';
+export * as Sidebar from './Sidebar';
 export * from './ThemeColor';
 export * from './ThemeProvider';
 export * from './ThemeToggler';
+export * from './TopToolbar';
 export * from './Wrapper';

package/src/components/Pagination/Pagination.tsx

@@ -6,6 +6,7 @@ import {
   ListPaginationContextValue,
   sanitizeListRestProps,
   useListPaginationContext,
+  useResourceDefinition,
   useTranslate
 } from 'ra-core';
 
@@ -18,6 +19,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
   const translate = useTranslate();
   const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const [currentPage, setCurrentPage] = useState(page - 1); // Stato per la UI
+  const { hasCreate } = useResourceDefinition(props);
 
   const totalPages = useMemo(() => {
     return total != null ? Math.ceil(total / perPage) : undefined;
@@ -125,6 +127,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
         rowsPerPageOptions={emptyArray}
         component="span"
         labelDisplayedRows={labelDisplayedRows}
+        sx={{ justifyContent: hasCreate ? 'flex-start' : 'flex-end', display: hasCreate ? 'flex' : 'block' }}
         {...sanitizeListRestProps(rest)}
       />
     );

package/src/components/ra-lists/FilterSidebar/ActiveFiltersChips.tsx

@@ -0,0 +1,108 @@
+import { Button, Chip, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useListContext, useTranslate } from 'ra-core';
+import { Close } from '@mui/icons-material';
+import { ReactElement, useCallback } from 'react';
+import { isEmpty } from 'lodash';
+import { SaveFiltersButton } from './SaveFiltersButton';
+import { useGetChipValue } from './FilterSidebarContext';
+
+interface ChipItemProps {
+  onDelete: () => void;
+  value: unknown;
+  source: string;
+}
+
+function ChipItem(props: ChipItemProps) {
+  const { onDelete, value, source } = props;
+  const label = useGetChipValue({ source, value });
+
+  return (
+    label && (
+      <Chip
+        label={label}
+        // @ts-ignore
+        variant="combined"
+        color="primary"
+        sx={{
+          height: '36px',
+          '& .MuiChip-deleteIcon': {
+            fontSize: '1rem !important',
+            mr: 1
+          }
+        }}
+        deleteIcon={<Close />}
+        onDelete={onDelete}
+      />
+    )
+  );
+}
+
+function Chips(): ReactElement {
+  const { filterValues, setFilters } = useListContext();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const translate = useTranslate();
+
+  const resetAllFilters = useCallback(() => {
+    // @ts-ignore
+    setFilters({});
+  }, [setFilters]);
+
+  const removeFilter = useCallback(
+    (key: string) => {
+      const newFilters = { ...filterValues };
+      delete newFilters[key];
+      // @ts-ignore
+      setFilters(newFilters);
+    },
+    [filterValues, setFilters]
+  );
+
+  const Buttons = useCallback(() => {
+    return (
+      <Stack flexDirection={'row'} gap={2}>
+        <SaveFiltersButton />
+        <Button variant="outlined" onClick={resetAllFilters}>
+          {translate('ra.action.reset_filters')}
+        </Button>
+      </Stack>
+    );
+  }, [resetAllFilters, translate]);
+
+  return (
+    <Stack gap={2} flexDirection={isMobile ? 'column' : 'row'}>
+      <Stack
+        flexDirection={'row'}
+        flexWrap={isMobile ? 'nowrap' : 'wrap'}
+        gap={2}
+        pb={0.5}
+        overflow={'auto'}
+        width={isMobile ? window.innerWidth - (24 + 34) : 'auto'}
+      >
+        {Object.entries(filterValues).map(([key, value]) => {
+          return <ChipItem key={key} source={key} value={value} onDelete={() => removeFilter(key)} />;
+        })}
+        {!isMobile ? <Buttons /> : null}
+      </Stack>
+      {isMobile ? <Buttons /> : null}
+    </Stack>
+  );
+}
+
+function ActiveFiltersChips(): ReactElement | null {
+  const { filterValues } = useListContext();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const translate = useTranslate();
+
+  return filterValues && !isEmpty(filterValues) ? (
+    <Stack flexDirection={isMobile ? 'column' : 'row'} alignItems={'baseline'} gap={2} m={isMobile ? 2 : 0}>
+      <Typography variant="h6" color="secondary" whiteSpace={'nowrap'}>
+        {translate('ra.title.active_filters')}
+      </Typography>
+      <Chips />
+    </Stack>
+  ) : null;
+}
+
+export { ActiveFiltersChips };

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

@@ -0,0 +1,164 @@
+import { LoadingButton } from '@/components/@extended';
+import { Box, Button, Stack } from '@mui/material';
+import { useListContext, useResourceContext, useTranslate } from 'ra-core';
+import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { FilterContext, getFilterFormValues } from 'react-admin';
+import { FormProvider, useForm } from 'react-hook-form';
+import { ReloadOutlined } from '@ant-design/icons';
+import { isEmpty, isEqual, isFunction } from 'lodash';
+import { SavedFiltersList } from './SavedFiltersList';
+import { useListViewContext } from '@/components/ra-lists';
+import { Sidebar } from '@/components/Layout/Sidebar';
+
+interface FiltersInputProps {
+  form: ReturnType<typeof useForm>;
+  filters?: ReactElement | ReactElement[];
+}
+
+function FiltersInput(props: FiltersInputProps): ReactElement {
+  const { form, filters } = props;
+  const resource = useResourceContext();
+
+  return (
+    <FilterContext.Provider value={Array.isArray(filters) ? filters : [filters]}>
+      <FormProvider {...form}>
+        <Box px={'20px'}>
+          {filters
+            ? (Array.isArray(filters) ? filters : [filters]).map((filter: ReactElement, i) => {
+                const props = { ...filter.props, display: 'label' };
+                return React.isValidElement(filter) ? (
+                  <Box key={i} sx={{ mb: 1 }}>
+                    {React.cloneElement(filter, { ...props, resource })}
+                  </Box>
+                ) : null;
+              })
+            : null}
+        </Box>
+      </FormProvider>
+    </FilterContext.Provider>
+  );
+}
+
+interface FilterSidebarProps {
+  filters?: ReactElement | ReactElement[];
+}
+
+function FilterSidebar(props: FilterSidebarProps): ReactElement {
+  const { filters } = props;
+  const [loading, setLoading] = useState(false);
+  const { setSidebarOpen, sidebarOpen } = useListViewContext();
+  const { filterValues, setFilters } = useListContext();
+  const translate = useTranslate();
+  const form = useForm({
+    defaultValues: filterValues
+  });
+  const { handleSubmit, getValues, reset, watch } = form;
+  const watchValues = watch();
+  // values containes all the filters values and the default ones
+  const values = useMemo(() => {
+    const values: any = {};
+    if (filters) {
+      (Array.isArray(filters) ? filters : [filters]).forEach((filter) => {
+        values[filter.props.source] = filterValues?.[filter.props.source] ?? '';
+      });
+    }
+    return values;
+  }, [filters, filterValues]);
+
+  // Reapply filterValues when the URL changes or a user removes a filter
+  useEffect(() => {
+    const newValues = getFilterFormValues(getValues(), filterValues);
+    const previousValues = getValues();
+    if (!isEqual(newValues, previousValues)) {
+      reset(newValues);
+    }
+    // The reference to the filterValues object is not updated when it changes,
+    // so we must stringify it to compare it by value and also compare the reference.
+    // This makes it work for both input values and filters applied directly through
+    // the ListContext.setFilter (e.g. QuickFilter in the simple example)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(filterValues), filterValues, getValues, reset]);
+
+  const closeSidebar = useCallback(() => {
+    if (isFunction(setSidebarOpen)) {
+      setSidebarOpen(false);
+    }
+  }, [setSidebarOpen]);
+
+  const onSubmit = React.useCallback(
+    (data: any) => {
+      // @ts-ignore
+      setFilters(data);
+      closeSidebar();
+    },
+    [setFilters, closeSidebar]
+  );
+
+  const resetAllFields = useCallback(() => {
+    reset({});
+    // @ts-ignore
+    setFilters({});
+  }, [reset, setFilters]);
+
+  const toggleLoading = useCallback(() => {
+    setLoading((prev) => !prev);
+    resetAllFields();
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, [resetAllFields]);
+
+  const isApplyDisabled = useMemo(() => {
+    const currentFormValues = getValues();
+    return isEmpty(values) || isEqual(currentFormValues, values);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values, getValues, watchValues]);
+
+  return (
+    <Sidebar PaperProps={{ sx: { height: '100%' } }} open={sidebarOpen}>
+      <Sidebar.Header>
+        <Sidebar.HeaderText primary={translate('ra.action.add_filter')} />
+        <Sidebar.HeaderAction>
+          <LoadingButton
+            variant="text"
+            loading={loading}
+            loadingPosition="start"
+            // @ts-ignore
+            startIcon={<ReloadOutlined />}
+            onClick={toggleLoading}
+          >
+            {translate('ra.action.reset_filters')}
+          </LoadingButton>
+        </Sidebar.HeaderAction>
+      </Sidebar.Header>
+      <Sidebar.Content>
+        <SavedFiltersList closeSidebar={closeSidebar} />
+        <FiltersInput form={form} filters={filters} />
+      </Sidebar.Content>
+      <Sidebar.Footer>
+        <Stack direction="row" spacing={2}>
+          <Button
+            fullWidth
+            onClick={() => {
+              reset({});
+              closeSidebar();
+            }}
+          >
+            {translate('ra.action.close')}
+          </Button>
+          <Button
+            fullWidth
+            disabled={isApplyDisabled}
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSubmit)}
+          >
+            {translate('ra.action.apply_filters')}
+          </Button>
+        </Stack>
+      </Sidebar.Footer>
+    </Sidebar>
+  );
+}
+
+export { FilterSidebar };

package/src/components/ra-lists/FilterSidebar/FilterSidebarButton.tsx

@@ -0,0 +1,44 @@
+import { useCallback, useContext } from 'react';
+import { FilterList } from '@mui/icons-material';
+import { FilterContext, useTranslate } from 'react-admin';
+import { useIsEnabledSidebarFilter } from '@/components/ra-lists/FilterSidebar';
+import { Button as MUIButton, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button } from '@/components/ra-buttons';
+import { useListViewContext } from '@/components/ra-lists';
+import { isFunction } from 'lodash';
+
+function FilterSidebarButton() {
+  const { setSidebarOpen } = useListViewContext();
+  const filters = useContext(FilterContext);
+  const hasFilterSidebar = useIsEnabledSidebarFilter();
+  const translate = useTranslate();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  if (!hasFilterSidebar) {
+    throw new Error('The <FilterSidebarButton> component requires the <List aside={<FilterSidebar />}> prop to be set');
+  }
+
+  if (filters === undefined) {
+    throw new Error('The <FilterSidebarButton> component requires the <List filters> prop to be set');
+  }
+
+  const handleFilterClick = useCallback(() => {
+    if (isFunction(setSidebarOpen)) {
+      setSidebarOpen(true);
+    }
+  }, [setSidebarOpen]);
+
+  return isMobile ? (
+    <MUIButton className="add-filter" onClick={handleFilterClick}>
+      <FilterList sx={{ fontSize: '1rem', mr: 0.5 }} />
+      <Typography variant="h6">{translate('ra.action.add_filter')}</Typography>
+    </MUIButton>
+  ) : (
+    <Button label="ra.action.add_filter" onClick={handleFilterClick}>
+      <FilterList />
+    </Button>
+  );
+}
+
+export { FilterSidebarButton };

package/src/components/ra-lists/FilterSidebar/FilterSidebarContext.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { FilterContext, useResourceContext } from 'react-admin';
+
+interface FiltersContextType {
+  hasFilterSidebar?: boolean;
+}
+
+const FilterSidebarContext = createContext<FiltersContextType>({
+  hasFilterSidebar: false
+});
+
+function useIsEnabledSidebarFilter(): boolean {
+  return useContext(FilterSidebarContext)?.hasFilterSidebar ?? false;
+}
+
+interface ChipItemProps {
+  source: string;
+  value: unknown;
+}
+
+function useGetChipValue({ source, value }: ChipItemProps): JSX.Element | null {
+  const filters = useContext(FilterContext);
+  const resource = useResourceContext();
+
+  const currentSourceFilter = useMemo(() => {
+    return filters.find((filter) => React.isValidElement(filter) && filter.props?.source === source);
+  }, [filters, source]);
+  const currentSourceFilterProps = useMemo(
+    () => (React.isValidElement(currentSourceFilter) ? currentSourceFilter.props : {}),
+    [currentSourceFilter]
+  );
+
+  const ChipComponent = React.isValidElement(currentSourceFilter) ? currentSourceFilter.props?.chip : null;
+
+  if (!ChipComponent) {
+    throw new Error(
+      `No chip component found for filter source "${source}". Ensure your filter components define a 'chip' prop.`
+    );
+  }
+
+  const label = useMemo(() => {
+    return React.cloneElement(ChipComponent as React.ReactElement<any>, {
+      ...currentSourceFilterProps,
+      record: { [source]: value },
+      value,
+      resource
+    });
+  }, [value, ChipComponent, source, resource, currentSourceFilterProps]);
+
+  return label;
+}
+
+export { FilterSidebarContext, useGetChipValue, useIsEnabledSidebarFilter };