@applica-software-guru/react-admin 1.5.302 → 1.5.304

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

@@ -0,0 +1,72 @@
+import { ReactElement } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useListContext, useTranslate } from 'ra-core';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+
+import { SavedQuery, extractValidSavedQueries, useSavedQueries } from 'react-admin';
+
+interface RemoveSavedQueryDialogProps {
+  open: boolean;
+  onClose: () => void;
+  filterToRemove?: SavedQuery;
+}
+
+function RemoveSavedQueryDialog({ open, onClose, filterToRemove }: RemoveSavedQueryDialogProps): ReactElement {
+  const translate = useTranslate();
+  const { resource, filterValues, sort, perPage, displayedFilters } = useListContext();
+  const filterValuesToUse = filterToRemove?.value?.filter || filterValues;
+  const label = filterToRemove?.label ?? '';
+
+  const [savedQueries, setSavedQueries] = useSavedQueries(resource);
+
+  function removeQuery() {
+    const savedQueryToRemove = {
+      filter: filterValuesToUse,
+      sort,
+      perPage,
+      displayedFilters
+    };
+
+    const newSavedQueries = extractValidSavedQueries(savedQueries);
+    const index = newSavedQueries.findIndex((savedFilter) => isEqual(savedFilter.value, savedQueryToRemove));
+    setSavedQueries([...newSavedQueries.slice(0, index), ...newSavedQueries.slice(index + 1)]);
+    onClose();
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">
+        {translate('ra.saved_queries.remove_dialog_title', {
+          label: label,
+          _: 'Remove saved query?'
+        })}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          {translate('ra.saved_queries.remove_message', {
+            _: 'Are you sure you want to remove that item from your list of saved queries?'
+          })}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>{translate('ra.action.cancel')}</Button>
+        <Button
+          onClick={removeQuery}
+          color="primary"
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+        >
+          {translate('ra.action.confirm')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export { RemoveSavedQueryDialog };
+export type { RemoveSavedQueryDialogProps };

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

@@ -0,0 +1,28 @@
+import { Button } from '@mui/material';
+import { useCallback, useState } from 'react';
+import { SaveFiltersDialog } from './SaveFiltersDialog';
+import { useTranslate } from 'ra-core';
+
+function SaveFiltersButton() {
+  const [open, setOpen] = useState(false);
+  const translate = useTranslate();
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const openDialog = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  return (
+    <>
+      <Button sx={{ height: '36px' }} variant="contained" onClick={openDialog}>
+        {translate('ra.action.save_filter')}
+      </Button>
+      <SaveFiltersDialog open={open} onClose={onClose} />
+    </>
+  );
+}
+
+export { SaveFiltersButton };

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

@@ -0,0 +1,138 @@
+import { SimpleForm } from '@/components/ra-forms';
+import { TextInput } from '@/components/ra-inputs';
+import { Button, Dialog, Divider, List, ListItem, ListItemText, Stack, Toolbar, Typography } from '@mui/material';
+import { required, useListContext, useTranslate } from 'ra-core';
+import { extractValidSavedQueries, useSavedQueries } from 'ra-ui-materialui';
+import { useCallback } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useGetChipValue } from './FilterSidebarContext';
+
+interface SelectedFiltersItemProps {
+  value: unknown;
+  source: string;
+  lastItem: string;
+}
+
+function SelectedFiltersItem(props: SelectedFiltersItemProps): JSX.Element {
+  const { value, source, lastItem } = props;
+  const label = useGetChipValue({ source, value });
+
+  return (
+    <Stack>
+      <ListItem alignItems="flex-start" sx={{ pl: 0 }}>
+        <ListItemText primary={label} sx={{ my: 0 }} />
+      </ListItem>
+      {lastItem === source ? null : <Divider />}
+    </Stack>
+  );
+}
+
+function SelectedFiltersList(): JSX.Element {
+  const { filterValues } = useListContext();
+  const translate = useTranslate();
+
+  return (
+    <Stack mt={4} width={'100%'}>
+      <Typography variant="h6" fontWeight={'bold'} color={'secondary'}>
+        {translate('ra.title.selected_filters')}
+      </Typography>
+      <List sx={{ bgcolor: 'background.paper', pt: 0 }}>
+        {filterValues
+          ? Object.entries(filterValues).map(([key, value]) => {
+              const lastEntry = Object.entries(filterValues).pop();
+              const lastItem = lastEntry ? lastEntry[0] : '';
+              return <SelectedFiltersItem key={key} lastItem={lastItem} value={value} source={key} />;
+            })
+          : null}
+      </List>
+    </Stack>
+  );
+}
+
+interface CustomToolbarProps {
+  onClose: () => void;
+  addQuery: (queryName: string) => void;
+}
+
+function CustomToolbar(props: CustomToolbarProps): JSX.Element {
+  const { onClose, addQuery } = props;
+  const translate = useTranslate();
+  const { handleSubmit } = useFormContext();
+
+  const onFormSubmit = useCallback(
+    (data: Record<string, any>) => {
+      addQuery(data.queryName);
+    },
+    [addQuery]
+  );
+
+  return (
+    <Toolbar sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+      <Button onClick={onClose}>{translate('ra.action.cancel')}</Button>
+      <Button variant="contained" onClick={handleSubmit(onFormSubmit)}>
+        {translate('ra.action.save')}
+      </Button>
+    </Toolbar>
+  );
+}
+
+interface SaveFiltersFormProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+function SaveFiltersDialog(props: SaveFiltersFormProps) {
+  const { open, onClose } = props;
+  const { filterValues, sort, perPage, displayedFilters, resource } = useListContext();
+  const [savedQueries, setSavedQueries] = useSavedQueries(resource);
+  const translate = useTranslate();
+
+  const addQuery = useCallback(
+    (queryName: string): void => {
+      const newSavedQuery = {
+        label: queryName.trim(),
+        value: {
+          filter: filterValues,
+          sort,
+          perPage,
+          displayedFilters
+        }
+      };
+      const newSavedQueries = extractValidSavedQueries(savedQueries);
+      setSavedQueries(newSavedQueries.concat(newSavedQuery));
+      onClose();
+    },
+    [filterValues, sort, perPage, displayedFilters, savedQueries, setSavedQueries, onClose]
+  );
+
+  const checkAlreadyExists = useCallback(
+    () => (value: string) => {
+      if (savedQueries.some((query) => query.label === value?.trim())) {
+        return 'ra.validation.already_exists';
+      }
+      return undefined;
+    },
+    [savedQueries]
+  );
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+      <SimpleForm
+        toolbar={<CustomToolbar addQuery={addQuery} onClose={onClose} />}
+        title={translate('ra.title.save_favorite_filter')}
+        modal={true}
+      >
+        <TextInput
+          fullWidth
+          source={'queryName'}
+          label={translate('ra.input.query_name')}
+          placeholder={translate('ra.input.query_name_placeholder')}
+          validate={[required(), checkAlreadyExists()]}
+        />
+        <SelectedFiltersList />
+      </SimpleForm>
+    </Dialog>
+  );
+}
+
+export { SaveFiltersDialog };

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

@@ -0,0 +1,118 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Stack, Typography } from '@mui/material';
+import { useListContext, useTranslate } from 'ra-core';
+import { SavedQuery, extractValidSavedQueries, useSavedQueries } from 'ra-ui-materialui';
+import { useCallback, useState } from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useTheme } from '@mui/material/styles';
+import { RemoveSavedQueryDialog } from './RemoveSavedQueryDialog';
+
+interface RemoveSavedQueryButtonProps {
+  query?: SavedQuery;
+}
+
+function RemoveSavedQueryButton(props: RemoveSavedQueryButtonProps) {
+  const { query } = props;
+  const [open, setOpen] = useState(false);
+  const toggleDialog = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  const translate = useTranslate();
+
+  return (
+    <>
+      <Button size="small" color="primary" onClick={toggleDialog}>
+        {translate('ra.action.delete')}
+      </Button>
+      <RemoveSavedQueryDialog open={open} onClose={toggleDialog} filterToRemove={query} />
+    </>
+  );
+}
+
+interface SavedFiltersListProps {
+  closeSidebar: () => void;
+}
+
+function SavedFiltersList(props: SavedFiltersListProps) {
+  const { closeSidebar } = props;
+  const { resource, setFilters, setSort, setPage, setPerPage } = useListContext();
+  const [expanded, setExpanded] = useState(false);
+  const theme = useTheme();
+  const [savedQueries] = useSavedQueries(resource);
+  const validSavedQueries = extractValidSavedQueries(savedQueries);
+  const translate = useTranslate();
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  const handleApplyFilter = useCallback(
+    (props: any) => {
+      const { value } = props;
+      // @ts-ignore
+      setFilters(value.filter);
+      setSort({ field: value.sort.field, order: value.sort.order });
+      setPage(1);
+      setPerPage(value.perPage);
+      closeSidebar();
+    },
+    [setFilters, setSort, setPage, setPerPage, closeSidebar]
+  );
+
+  return savedQueries && savedQueries.length > 0 ? (
+    <Box
+      sx={{
+        mt: '-1px',
+        mb: 2,
+        '& .MuiAccordion-root': {
+          borderColor: theme.palette.divider,
+          '& .Mui-expanded:last-of-type': {
+            marginBottom: 'inherit'
+          },
+          '& .MuiAccordionSummary-root': {
+            bgcolor: 'transparent',
+            flexDirection: 'row'
+          },
+          '& .MuiAccordionSummary-content': {
+            justifyContent: 'space-between',
+            marginLeft: 0
+          },
+          '& .MuiAccordionDetails-root': {
+            borderColor: theme.palette.divider
+          },
+          '& .MuiAccordionSummary-expandIconWrapper': {
+            color: theme.palette.text.primary,
+            '&.Mui-expanded': {
+              transform: 'rotate(180deg)'
+            }
+          }
+        }
+      }}
+    >
+      <Accordion expanded={expanded} onChange={toggleExpanded}>
+        <AccordionSummary sx={{ px: '20px' }} expandIcon={<ExpandMoreIcon fontSize="small" />}>
+          <Typography variant="h5" fontWeight="bold">
+            {translate('ra.action.saved_filters')} ({validSavedQueries.length})
+          </Typography>
+        </AccordionSummary>
+        {validSavedQueries?.map((query, i) => (
+          <AccordionDetails
+            key={i}
+            sx={{ display: 'flex', justifyContent: 'space-between', px: '20px', alignItems: 'center' }}
+          >
+            <Typography variant="body1">{query.label}</Typography>
+            <Stack flexDirection="row" alignItems={'center'}>
+              <RemoveSavedQueryButton query={query} />
+              <Button size="small" color="primary" onClick={() => handleApplyFilter({ value: query.value })}>
+                {translate('ra.action.apply')}
+              </Button>
+            </Stack>
+          </AccordionDetails>
+        ))}
+      </Accordion>
+    </Box>
+  ) : (
+    <Box height={16} />
+  );
+}
+
+export { SavedFiltersList };

package/src/components/ra-lists/FilterSidebar/index.ts

@@ -0,0 +1,8 @@
+export * from './ActiveFiltersChips';
+export * from './FilterSidebar';
+export * from './FilterSidebarButton';
+export * from './FilterSidebarContext';
+export * from './RemoveSavedQueryDialog';
+export * from './SaveFiltersButton';
+export * from './SaveFiltersDialog';
+export * from './SavedFiltersList';

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

@@ -2,9 +2,11 @@ import { MainCard } from '@/components/MainCard';
 import { ListView } from '@/components/ra-lists/ListView';
 import { styled } from '@mui/system';
 import { ListBase, RaRecord } from 'ra-core';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, isValidElement } from 'react';
 import { ListProps } from 'react-admin';
 import { Pagination } from '@/components/Pagination/Pagination';
+import { FilterSidebar } from './FilterSidebar';
+import { ListViewProvider } from './ListViewProvider';
 
 /**
  * List page component
@@ -56,6 +58,7 @@ import { Pagination } from '@/components/Pagination/Pagination';
  *     </List>
  * );
  */
+
 function RaList<RecordType extends RaRecord = any>({
   debounce,
   disableAuthentication,
@@ -69,7 +72,7 @@ function RaList<RecordType extends RaRecord = any>({
   sort,
   storeKey,
   ...rest
-}: ListProps<RecordType>): ReactElement {
+}: ListProps): ReactElement {
   return (
     <ListBase<RecordType>
       debounce={debounce}
@@ -84,7 +87,9 @@ function RaList<RecordType extends RaRecord = any>({
       sort={sort}
       storeKey={storeKey}
     >
-      <ListView<RecordType> {...rest} />
+      <ListViewProvider>
+        <ListView<RecordType> {...rest} />
+      </ListViewProvider>
     </ListBase>
   );
 }
@@ -193,12 +198,24 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
 }));
 
 function List(props: ListProps): ReactElement {
-  const Wrapper = props.aside ? React.Fragment : MainCard;
+  const { aside } = props;
+
+  // Check if 'aside' is a valid React element
+  const isAsideValid = isValidElement(aside);
+
+  // Determine if 'aside' is a FilterSidebar component
+  const isFilterSidebar = isAsideValid && aside?.type === FilterSidebar;
+
+  // Use React.Fragment if there's a generic 'aside', otherwise use MainCard
+  const ListWrapper = isAsideValid && !isFilterSidebar ? React.Fragment : MainCard;
+
+  // Define props for the ListWrapper based on the presence of 'aside'
+  const listWrapperProps = !aside || isFilterSidebar ? { content: false } : undefined;
 
   return (
-    <Wrapper {...(!props.aside && { content: false })}>
+    <ListWrapper {...listWrapperProps}>
       <StyledList {...props} pagination={<Pagination />} />
-    </Wrapper>
+    </ListWrapper>
   );
 }
 

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

@@ -0,0 +1,101 @@
+import React, { ReactElement, memo } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import { Divider, ToolbarProps, useMediaQuery } from '@mui/material';
+import { Exporter, useListContext } from 'ra-core';
+import { FilterContext, FilterForm } from 'react-admin';
+import { ActiveFiltersChips, FilterSidebarContext } from './FilterSidebar';
+import { isEmpty } from 'lodash';
+
+interface ListToolbarPropsExtended extends ListToolbarProps {
+  hasFilterSidebar?: boolean;
+}
+
+function ListToolbarComp(props: ListToolbarPropsExtended): ReactElement | null {
+  const { filters, actions, className, hasFilterSidebar, ...rest } = props;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const Actions = actions ? React.cloneElement(actions, { ...rest, ...actions.props }) : null;
+  const { filterValues } = useListContext();
+
+  return Array.isArray(filters) ? (
+    <FilterSidebarContext.Provider value={{ hasFilterSidebar }}>
+      <FilterContext.Provider value={filters}>
+        {isMobile && hasFilterSidebar ? (
+          <div>
+            {Actions}
+            {!isEmpty(filterValues) ? (
+              <div>
+                <Divider />
+                <ActiveFiltersChips />
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <Root className={className}>
+            {hasFilterSidebar ? <ActiveFiltersChips /> : <FilterForm />}
+            <span />
+            {Actions}
+          </Root>
+        )}
+      </FilterContext.Provider>
+    </FilterSidebarContext.Provider>
+  ) : (
+    <Root className={className}>
+      {filters
+        ? React.cloneElement(filters, {
+            ...rest,
+            context: 'form'
+          })
+        : null}
+      <span />
+      {actions
+        ? React.cloneElement(actions, {
+            ...rest,
+            filters,
+            ...actions.props
+          })
+        : null}
+    </Root>
+  );
+}
+
+ListToolbarComp.propTypes = {
+  filters: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  // @ts-ignore
+  actions: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+  // @ts-ignore
+  exporter: PropTypes.oneOfType([PropTypes.func, PropTypes.bool])
+};
+
+interface ListToolbarProps extends Omit<ToolbarProps, 'classes' | 'onSelect'> {
+  actions?: ReactElement | false;
+  exporter?: Exporter | false;
+  filters?: ReactElement | ReactElement[];
+  hasCreate?: boolean;
+}
+
+const PREFIX = 'RaListToolbar';
+
+const Root = styled('div', {
+  name: PREFIX,
+  overridesResolver: (styles) => styles.root
+})(({ theme }) => ({
+  display: 'flex',
+  position: 'relative',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  width: '100%',
+  // [theme.breakpoints.down('md')]: {
+  //   flexWrap: 'wrap'
+  // },
+  [theme.breakpoints.down('sm')]: {
+    backgroundColor: theme.palette.background.paper,
+    flexWrap: 'inherit',
+    flexDirection: 'column-reverse'
+  }
+}));
+
+const ListToolbar = memo(ListToolbarComp);
+export { ListToolbar };
+export type { ListToolbarProps };

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

@@ -11,10 +11,11 @@ import {
   ListActions as DefaultActions,
   Pagination as DefaultPagination,
   Empty,
-  ListToolbar,
   SavedQueriesListClasses,
   Title
 } from 'react-admin';
+import { ListToolbar } from './ListToolbar';
+import { FilterSidebar } from './FilterSidebar';
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
 const defaultEmpty = <Empty />;
@@ -38,7 +39,8 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
   } = props;
   const { defaultTitle, data, error, isLoading, filterValues, resource } = useListContext<RecordType>(props);
   const theme = useTheme() as any;
-  const isAsideValidElement = React.isValidElement(aside);
+  const hasAsideSidebar = React.isValidElement(aside) && aside?.type !== FilterSidebar;
+  const hasFilterSidebar = React.isValidElement(aside) && aside?.type === FilterSidebar;
 
   if (!children || (!data && isLoading && emptyWhileLoading)) {
     return null;
@@ -49,18 +51,24 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
       <div
         className={ListClasses.main}
         style={{
-          border: isAsideValidElement ? '1px solid' : 'none',
-          borderRadius: isAsideValidElement ? 4 : 0,
-          borderColor: isAsideValidElement
+          border: hasAsideSidebar ? '1px solid' : 'none',
+          borderRadius: hasAsideSidebar ? 4 : 0,
+          borderColor: hasAsideSidebar
             ? theme.palette.mode === 'dark'
               ? theme.palette.divider
               : theme.palette.grey.A800
             : 'transparent',
-          backgroundColor: isAsideValidElement ? theme.palette.background.paper : 'transparent'
+          backgroundColor: hasAsideSidebar ? theme.palette.background.paper : 'transparent'
         }}
       >
         {filters || actions ? (
-          <ListToolbar className={ListClasses.actions} filters={filters} actions={actions} hasCreate={hasCreate} />
+          <ListToolbar
+            className={ListClasses.actions}
+            filters={filters}
+            actions={actions}
+            hasCreate={hasCreate}
+            hasFilterSidebar={hasFilterSidebar}
+          />
         ) : null}
         {!error && (
           <Content className={ListClasses.content}>
@@ -97,7 +105,9 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
     <Root className={clsx('list-page', className)} {...rest}>
       <Title title={title} defaultTitle={defaultTitle} preferenceKey={`${resource}.list.title`} />
       {shouldRenderEmptyPage ? renderEmpty() : renderList()}
-      {isAsideValidElement ? <AsideCard aside={aside} /> : null}
+      {hasAsideSidebar ? <AsideCard aside={aside} /> : null}
+      {/* @ts-ignore */}
+      {hasFilterSidebar ? React.cloneElement(aside, { filters }) : null}
     </Root>
   );
 }

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

@@ -0,0 +1,23 @@
+import React, { createContext, useContext } from 'react';
+
+interface ListViewContextType {
+  sidebarOpen?: boolean;
+  setSidebarOpen?: (open: boolean) => void;
+}
+
+const ListViewContext = createContext<ListViewContextType>({
+  sidebarOpen: false,
+  setSidebarOpen: () => {}
+});
+
+function ListViewProvider(props: { children: React.ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = React.useState(false);
+
+  return <ListViewContext.Provider value={{ sidebarOpen, setSidebarOpen }}>{props.children}</ListViewContext.Provider>;
+}
+
+function useListViewContext() {
+  return useContext(ListViewContext);
+}
+
+export { ListViewProvider, useListViewContext };

package/src/components/ra-lists/index.ts

@@ -2,6 +2,9 @@ export * from './BulkActionsToolbar';
 export * from './BulkFloatingActionsToolbar';
 export * from './Datagrid';
 export * from './Empty';
+export * from './FilterSidebar';
 export * from './List';
+export * from './ListToolbar';
+export * from './ListViewProvider';
 export * from './NotificationList';
 export * from './SimpleList';

package/src/index.ts

@@ -30,7 +30,6 @@ export {
   HttpError,
   I18nContextProvider,
   ListBase,
-  ListToolbar,
   LoadingIndicator,
   SimpleFormIterator as RaSimpleFormIterator,
   RecordContextProvider,
@@ -44,9 +43,9 @@ export {
   SimpleShowLayout,
   SingleFieldList,
   TabbedFormTabs,
-  TopToolbar,
   UrlField,
   ValidationError,
+  WithListContext,
   choices,
   email,
   maxLength,
@@ -84,6 +83,7 @@ export {
   useNotify,
   usePermissions,
   useRecordContext,
+  useReferenceArrayFieldController,
   useRefresh,
   useRemoveFromStore,
   useResetStore,