@applica-software-guru/react-admin 1.3.126 → 1.3.128

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

@@ -0,0 +1,369 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { cloneElement, ReactElement, ReactNode, ElementType } from 'react';
+import { Title, TitlePropType, Pagination as DefaultPagination, ListToolbar, ListActions as DefaultActions } from 'react-admin';
+import PropTypes from 'prop-types';
+import { SxProps } from '@mui/system';
+import Card from '@mui/material/Card';
+import clsx from 'clsx';
+import { ComponentPropType, useListContext, RaRecord } from 'ra-core';
+
+import Empty from './Empty';
+import Error from '../Layout/Error';
+
+const defaultActions = <DefaultActions />;
+const defaultPagination = <DefaultPagination />;
+const defaultEmpty = <Empty />;
+const DefaultComponent = Card;
+
+export const ListView = <RecordType extends RaRecord = any>(props: ListViewProps) => {
+  const {
+    actions = defaultActions,
+    aside,
+    filters,
+    bulkActionButtons,
+    emptyWhileLoading,
+    hasCreate,
+    pagination = defaultPagination,
+    children,
+    className,
+    component: Content = DefaultComponent,
+    title,
+    empty = defaultEmpty,
+    ...rest
+  } = props;
+  const { defaultTitle, data, error, isLoading, filterValues, resource } = useListContext<RecordType>(props);
+
+  if (!children || (!data && isLoading && emptyWhileLoading)) {
+    return null;
+  }
+
+  const renderList = () => (
+    <div className={ListClasses.main}>
+      {(filters || actions) && <ListToolbar className={ListClasses.actions} filters={filters} actions={actions} hasCreate={hasCreate} />}
+      {!error && (
+        <Content className={ListClasses.content}>
+          {bulkActionButtons && children && React.isValidElement<any>(children)
+            ? // FIXME remove in 5.0
+              cloneElement(children, {
+                bulkActionButtons
+              })
+            : children}
+        </Content>
+      )}
+
+      {error ? (
+        <Error
+          error={error}
+          // @ts-ignore
+          resetErrorBoundary={null}
+        />
+      ) : (
+        pagination !== false && pagination
+      )}
+    </div>
+  );
+
+  const renderEmpty = () => empty !== false && cloneElement(empty, { className: ListClasses.noResults, hasCreate });
+
+  const shouldRenderEmptyPage = !isLoading && data?.length === 0 && !Object.keys(filterValues).length && empty !== false;
+
+  return (
+    <Root className={clsx('list-page', className)} {...rest}>
+      <Title title={title} defaultTitle={defaultTitle} preferenceKey={`${resource}.list.title`} />
+      {shouldRenderEmptyPage ? renderEmpty() : renderList()}
+      {aside}
+    </Root>
+  );
+};
+
+ListView.propTypes = {
+  actions: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+  aside: PropTypes.element,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: ComponentPropType,
+  emptyWhileLoading: PropTypes.bool,
+  filters: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  hasCreate: PropTypes.bool,
+  pagination: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+  title: TitlePropType
+};
+
+export interface ListViewProps {
+  /**
+   * The actions to display in the toolbar. defaults to Filter + Create + Export.
+   *
+   * @see https://marmelab.com/react-admin/List.html#actions
+   * @example
+   * import {
+   *     CreateButton,
+   *     DatagridConfigurable,
+   *     ExportButton,
+   *     FilterButton,
+   *     List,
+   *     SelectColumnsButton,
+   *     TopToolbar,
+   * } from 'react-admin';
+   * import IconEvent from '@mui/icons-material/Event';
+   *
+   * const ListActions = () => (
+   *     <TopToolbar>
+   *         <SelectColumnsButton />
+   *         <FilterButton/>
+   *         <CreateButton/>
+   *         <ExportButton/>
+   *     </TopToolbar>
+   * );
+   *
+   * export const PostList = () => (
+   *     <List actions={<ListActions/>}>
+   *         <DatagridConfigurable>
+   *             ...
+   *         </DatagridConfigurable>
+   *     </List>
+   * );
+   */
+  actions?: ReactElement | false;
+
+  /**
+   * The content to render as a sidebar.
+   * @see https://marmelab.com/react-admin/List.html#aside
+   * @example
+   * import { List, useListContext } from 'react-admin';
+   * import { Typography } from '@mui/material';
+   *
+   * const Aside = () => {
+   *     const { data, isLoading } = useListContext();
+   *     if (isLoading) return null;
+   *     return (
+   *         <div style={{ width: 200, margin: '4em 1em' }}>
+   *             <Typography variant="h6">Posts stats</Typography>
+   *             <Typography variant="body2">
+   *                 Total views: {data.reduce((sum, post) => sum + post.views, 0)}
+   *             </Typography>
+   *         </div>
+   *     );
+   * };
+   *
+   * const PostList = () => (
+   *     <List aside={<Aside />}>
+   *         ...
+   *     </List>
+   * );
+   */
+  aside?: ReactElement;
+
+  /**
+   * @deprecated pass the bulkActionButtons prop to the List child (Datagrid or SimpleList) instead
+   */
+  bulkActionButtons?: ReactElement | false;
+
+  /**
+   * A class name to apply to the root div element
+   */
+  className?: string;
+
+  /**
+   * The components rendering the list of records. Usually a <Datagrid> or <SimpleList>.
+   *
+   * @see https://marmelab.com/react-admin/List.html#children
+   * @example
+   * import { List, Datagrid, TextField, DateField, NumberField, BooleanField, ReferenceManyCount } from 'react-admin';
+   *
+   * export const BookList = () => (
+   *     <List>
+   *         <Datagrid rowClick="edit">
+   *             <TextField source="id" />
+   *             <TextField source="title" />
+   *             <DateField source="published_at" />
+   *             <ReferenceManyCount label="Nb comments" reference="comments" target="post_id" link />
+   *             <BooleanField source="commentable" label="Com." />
+   *             <NumberField source="nb_views" label="Views" />
+   *         </Datagrid>
+   *     </List>
+   * );
+   */
+  children: ReactNode;
+
+  /**
+   * The component used to display the list. Defaults to <Card>.
+   *
+   * @see https://marmelab.com/react-admin/List.html#component
+   * @example
+   * import { List } from 'react-admin';
+   *
+   * const PostList = () => (
+   *     <List component="div">
+   *         ...
+   *     </List>
+   * );
+   */
+  component?: ElementType;
+
+  /**
+   * The component to display when the list is empty.
+   *
+   * @see https://marmelab.com/react-admin/List.html#empty
+   * @example
+   * import { CreateButton, List } from 'react-admin';
+   * import { Box, Button, Typography } from '@mui/material';
+   *
+   * const Empty = () => (
+   *     <Box textAlign="center" m={1}>
+   *         <Typography variant="h4" paragraph>
+   *             No products available
+   *         </Typography>
+   *         <Typography variant="body1">
+   *             Create one or import products from a file
+   *         </Typography>
+   *         <CreateButton />
+   *         <Button onClick={...}>Import</Button>
+   *     </Box>
+   * );
+   *
+   * const ProductList = () => (
+   *     <List empty={<Empty />}>
+   *         ...
+   *     </List>
+   * );
+   */
+  empty?: ReactElement | false;
+
+  /**
+   * Set to true to return null while the list is loading.
+   *
+   * @see https://marmelab.com/react-admin/List.html#emptywhileloading
+   * @example
+   * import { List } from 'react-admin';
+   * import { SimpleBookList } from './BookList';
+   *
+   * const BookList = () => (
+   *     <List emptyWhileLoading>
+   *         <SimpleBookList />
+   *     </List>
+   * );
+   */
+  emptyWhileLoading?: boolean;
+
+  /**
+   * The filter inputs to display in the toolbar.
+   *
+   * @see https://marmelab.com/react-admin/List.html#filters
+   * @example
+   * import { List, TextInput } from 'react-admin';
+   *
+   * const postFilters = [
+   *     <TextInput label="Search" source="q" alwaysOn />,
+   *     <TextInput label="Title" source="title" defaultValue="Hello, World!" />,
+   * ];
+   *
+   * export const PostList = () => (
+   *     <List filters={postFilters}>
+   *         ...
+   *     </List>
+   * );
+   */
+  filters?: ReactElement | ReactElement[];
+
+  /**
+   * Set to true to force a Create button in the toolbar, even if there is no create view declared in Resource
+   *
+   * @see https://marmelab.com/react-admin/List.html#hascreate
+   * @example
+   * import { List } from 'react-admin';
+   *
+   * export const PostList = () => (
+   *     <List hasCreate={false}>
+   *         ...
+   *     </List>
+   * );
+   */
+  hasCreate?: boolean;
+
+  /**
+   * The pagination component to display. defaults to <Pagination />
+   *
+   * @see https://marmelab.com/react-admin/List.html#pagination
+   * @example
+   * import { Pagination, List } from 'react-admin';
+   *
+   * const PostPagination = props => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} {...props} />;
+   *
+   * export const PostList = () => (
+   *     <List pagination={<PostPagination />}>
+   *         ...
+   *     </List>
+   * );
+   */
+  pagination?: ReactElement | false;
+
+  /**
+   * The page title (main title) to display above the data. Defaults to the humanized resource name.
+   *
+   * @see https://marmelab.com/react-admin/List.html#title
+   * @example
+   * import { List } from 'react-admin';
+   *
+   * export const PostList = () => (
+   *     <List title="List of posts">
+   *         ...
+   *     </List>
+   * );
+   */
+  title?: string | ReactElement;
+
+  /**
+   * The CSS styles to apply to the component.
+   *
+   * @see https://marmelab.com/react-admin/List.html#sx-css-api
+   * @example
+   * const PostList = () => (
+   *     <List
+   *         sx={{
+   *             backgroundColor: 'yellow',
+   *             '& .RaList-content': {
+   *                 backgroundColor: 'red',
+   *             },
+   *         }}
+   *     >
+   *             ...
+   *     </List>
+   * );
+   */
+  sx?: SxProps;
+}
+
+const PREFIX = 'RaList';
+
+export const ListClasses = {
+  main: `${PREFIX}-main`,
+  content: `${PREFIX}-content`,
+  actions: `${PREFIX}-actions`,
+  noResults: `${PREFIX}-noResults`
+};
+
+const Root = styled('div', {
+  name: PREFIX,
+  overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+  display: 'flex',
+
+  [`& .${ListClasses.main}`]: {
+    flex: '1 1 auto',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+
+  [`& .${ListClasses.content}`]: {
+    position: 'relative',
+    [theme.breakpoints.down('sm')]: {
+      boxShadow: 'none'
+    },
+    overflow: 'inherit'
+  },
+
+  [`& .${ListClasses.actions}`]: {},
+
+  [`& .${ListClasses.noResults}`]: {}
+}));

package/src/components/ra-pages/GenericErrorPage.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { Button, Container, Stack, Typography } from '@mui/material';
 //@ts-ignore
-import imgSrc from '../../assets/genericError.png';
+import imgSrc from '../../assets/generic-error.png';
 
 function GenericErrorPage() {
   const onReload = useCallback(() => location.reload(), []);

package/src/dev/CatchResult.ts

@@ -0,0 +1,32 @@
+export type CatchResultConstructorData = {
+  catch: boolean;
+  display: boolean;
+  log: boolean;
+  error?: string;
+};
+
+export default class CatchResult {
+  catch: boolean;
+  display: boolean;
+  log: boolean;
+  error?: string;
+
+  constructor({ catch: catchErr, display: displayErr, log: logErr, error }: CatchResultConstructorData) {
+    this.catch = catchErr;
+    this.display = displayErr;
+    this.log = logErr;
+    this.error = error;
+  }
+
+  isCatched() {
+    return this.catch;
+  }
+
+  logError() {
+    return this.log;
+  }
+
+  displayError() {
+    return this.display;
+  }
+}

package/src/dev/ErrorEventHandler.ts

@@ -0,0 +1,51 @@
+import _ from 'lodash';
+export type IErrorEventHandlerConstructData = {
+  apiUrl: string;
+};
+
+export interface IErrorEventHandler {
+  handle(event: ErrorEvent): void;
+}
+
+class ErrorEventHandler implements IErrorEventHandler {
+  #headers: Headers;
+  #apiUrl: string;
+  #handledErrors: Set<string> = new Set<string>();
+
+  constructor(data: IErrorEventHandlerConstructData) {
+    const { apiUrl } = data ?? {};
+    if (!_.isString(apiUrl) || _.isEmpty(apiUrl)) {
+      throw new Error('[ErrorMessageHandler] constructor: please provide a valid apiUrl');
+    }
+    this.#apiUrl = apiUrl;
+    this.#headers = new Headers({ Accept: 'application/json', 'Content-Type': 'application/json' });
+  }
+
+  handle(error: ErrorEvent): void {
+    const { message, filename, lineno, colno } = error;
+    const hash = `${message}${filename}${lineno}${colno}`;
+    if (this.#handledErrors.has(hash)) {
+      return;
+    }
+
+    this.#handledErrors.add(hash);
+    fetch(`${this.#apiUrl}/ui/error-log`, {
+      method: 'PUT',
+      headers: this.#headers,
+      body: JSON.stringify({
+        filename: error.filename,
+        message: error.message,
+        line: error.lineno,
+        column: error.colno,
+        stack: error.error?.stack,
+      })
+    }).catch(() => {
+      // eslint-disable-next-line no-console
+      console.log('Unable to send error to server');
+      this.#handledErrors.delete(hash);
+    });
+    return;
+  }
+}
+
+export default ErrorEventHandler;

package/src/dev/index.ts

@@ -1,2 +1,4 @@
-import useCliErrorCatcher, { CatchResult } from './useCliErrorCatcher';
-export { useCliErrorCatcher, CatchResult };
+import useErrorEventCatcher from './useErrorEventCatcher';
+import CatchResult from './CatchResult';
+import ErrorEventHandler from './ErrorEventHandler';
+export { useErrorEventCatcher, CatchResult, ErrorEventHandler };

package/src/dev/useErrorEventCatcher.ts

@@ -0,0 +1,50 @@
+/* eslint-disable prefer-spread */
+/* eslint-disable prefer-rest-params */
+/* eslint-disable no-console */
+import * as React from 'react';
+import ErrorEventHandler, { IErrorEventHandler } from './ErrorEventHandler';
+import CatchResult from './CatchResult';
+
+export type UseErrorEventCatcherProps = {
+  apiUrl: string;
+  enabled?: boolean;
+  loading?: boolean;
+  catcherFn?: (error: string | any) => CatchResult;
+  errorHandler?: IErrorEventHandler;
+};
+
+const useErrorEventCatcher = ({
+  enabled = true,
+  apiUrl,
+  loading,
+  catcherFn = (error) => new CatchResult({ catch: error != undefined, display: false, log: error != undefined, error }),
+  ...props
+}: UseErrorEventCatcherProps) => {
+  const errorHandler = React.useMemo(() => {
+    if (props.errorHandler) {
+      return props.errorHandler;
+    }
+    return new ErrorEventHandler({ apiUrl });
+  }, [apiUrl, props.errorHandler]);
+  const handleError = React.useCallback(
+    function (event: ErrorEvent) {
+      const catchResult = catcherFn(event);
+
+      if (catchResult.logError()) {
+        errorHandler.handle(event);
+      }
+
+      return !catchResult.isCatched() || catchResult.displayError();
+    },
+    [apiUrl, loading, catcherFn, enabled, errorHandler]
+  );
+  React.useEffect(() => {
+    window.removeEventListener('error', handleError);
+    window.addEventListener('error', handleError);
+    return () => {
+      window.removeEventListener('error', handleError);
+    };
+  }, [handleError]);
+  return true;
+};
+export default useErrorEventCatcher;

package/src/playground/components/pages/CustomPage.jsx

@@ -1,6 +1,12 @@
 import { Typography } from '@mui/material';
 
+import { useEffect } from 'react';
+
 const CustomPage = () => {
+  useEffect(() => {
+    throw new Error('Custom Page not implemented yet');
+  }, []);
+
   return <Typography>Hello, Custom Page!</Typography>;
 };
 

package/dist/dev/useCliErrorCatcher.d.ts

@@ -1,59 +0,0 @@
-export type CatchResultProps = {
-    catch: boolean;
-    display: boolean;
-    log: boolean;
-    error?: string;
-};
-declare class CatchResult {
-    catch: boolean;
-    display: boolean;
-    log: boolean;
-    error?: string;
-    constructor({ catch: catchErr, display: displayErr, log: logErr, error }: CatchResultProps);
-    isCatched(): boolean;
-    logError(): boolean;
-    displayError(): boolean;
-}
-export type CliErrorCatcherBodyBuilderProps = (error: string | any) => any;
-export type UseCliErrorCatcherProps = {
-    /**
-     * Definisce l'URL del server API.
-     */
-    apiUrl: string;
-    /**
-     * Definisce se il catcher è abilitato.
-     */
-    enabled?: boolean;
-    /**
-     * Definisce l'endpoint del server API su cui inviare l'errore.
-     * Questo parametro viene aggiunto all'URL del server API (apiUrl) attraverso una semplice concatenazione.
-     *
-     * @example
-     * // Serve più per ricordarti come funziona quando lo utilizzerai attivamente dopo tanto tempo (ti conosco bene Roberto, dimenticherai tutto!).
-     * let apiUrl = 'http://localhost:3000';
-     * let endpoint = '/ui-errors/put';
-     * let url = apiUrl + endpoint;
-     * // url = 'http://localhost:3000/ui-errors/put'
-     */
-    endpoint?: string;
-    /**
-     * Definisce se l'applicazione chiamante è in caricamento.
-     * In tal caso il catcher non viene attivato.
-     */
-    loading?: boolean;
-    /**
-     * Definisce la funzione che determina se l'errore deve essere catturato.
-     *
-     * @param error
-     * @returns {CatchResult} Restituisce un oggetto di tipo CatchResult.
-     */
-    catcherFn?: (error: string | any) => CatchResult;
-    /**
-     * Definisce la funzione che costruisce il body da inviare al server API.
-     */
-    bodyBuilder?: CliErrorCatcherBodyBuilderProps;
-};
-declare const useCliErrorCatcher: ({ enabled, apiUrl, endpoint, loading, catcherFn, bodyBuilder }: UseCliErrorCatcherProps) => boolean;
-export { CatchResult };
-export default useCliErrorCatcher;
-//# sourceMappingURL=useCliErrorCatcher.d.ts.map

package/dist/dev/useCliErrorCatcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCliErrorCatcher.d.ts","sourceRoot":"","sources":["../../../src/dev/useCliErrorCatcher.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,cAAM,WAAW;IACf,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;gBAEH,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,gBAAgB;IAO1F,SAAS;IAIT,QAAQ;IAIR,YAAY;CAGb;AAED,MAAM,MAAM,+BAA+B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,KAAK,GAAG,CAAC;AAmB3E,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,KAAK,WAAW,CAAC;IACjD;;OAEG;IACH,WAAW,CAAC,EAAE,+BAA+B,CAAC;CAC/C,CAAC;AAEF,QAAA,MAAM,kBAAkB,mEAOrB,uBAAuB,YAoCzB,CAAC;AACF,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,eAAe,kBAAkB,CAAC"}