@applica-software-guru/react-admin 1.0.35 → 1.0.37

package/src/components/MainCard.jsx

@@ -1,13 +1,13 @@
-import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material'
+import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
+import { lighten, useTheme } from '@mui/material/styles';
 
-import PropTypes from 'prop-types'
-import { forwardRef } from 'react'
-import { useTheme } from '@mui/material/styles'
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
 
 const headerSX = {
   p: 2.5,
-  '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' },
-}
+  '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }
+};
 
 const MainCard = forwardRef(
   (
@@ -26,13 +26,13 @@ const MainCard = forwardRef(
       sx = {},
       title,
       modal = false,
+      color = 'default',
       ...others
     },
-    ref,
+    ref
   ) => {
-    const theme = useTheme()
-    boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow
-
+    const theme = useTheme();
+    boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;
     return (
       <Card
         elevation={elevation || 0}
@@ -42,15 +42,17 @@ const MainCard = forwardRef(
           position: 'relative',
           border: border ? '1px solid' : 'none',
           borderRadius: 1,
-          borderColor:
-            theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
-          boxShadow:
-            boxShadow && (!border || theme.palette.mode === 'dark')
-              ? shadow || theme.customShadows.z1
-              : 'inherit',
+          borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+          boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
           ':hover': {
-            boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit',
+            boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
           },
+          backgroundColor:
+            color === 'default'
+              ? theme.palette.background.paper
+              : color === 'primary'
+              ? lighten(theme.palette.primary[100], 0.5)
+              : lighten(theme.palette.secondary[100], 0.5),
           ...(modal && {
             position: 'absolute',
             top: '50%',
@@ -60,10 +62,10 @@ const MainCard = forwardRef(
             '& .MuiCardContent-root': {
               overflowY: 'auto',
               minHeight: 'auto',
-              maxHeight: `calc(100vh - 200px)`,
-            },
+              maxHeight: `calc(100vh - 200px)`
+            }
           }),
-          ...sx,
+          ...sx
         }}
       >
         {!darkTitle && title && (
@@ -75,20 +77,14 @@ const MainCard = forwardRef(
             subheader={subheader}
           />
         )}
-        {darkTitle && title && (
-          <CardHeader
-            sx={headerSX}
-            title={<Typography variant="h4">{title}</Typography>}
-            action={secondary}
-          />
-        )}
+        {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h4">{title}</Typography>} action={secondary} />}
         {title && divider && <Divider />}
         {content && <CardContent sx={contentSX}>{children}</CardContent>}
         {!content && children}
       </Card>
-    )
-  },
-)
+    );
+  }
+);
 
 MainCard.propTypes = {
   border: PropTypes.bool,
@@ -106,6 +102,7 @@ MainCard.propTypes = {
   sx: PropTypes.object,
   title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
   modal: PropTypes.bool,
-}
+  color: PropTypes.oneOf(['default', 'primary', 'secondary'])
+};
 
-export default MainCard
+export default MainCard;

package/src/components/index.jsx

@@ -1,36 +1,24 @@
-import ActionsMenu from './ActionsMenu'
-import Layout from './Layout'
-import Loadable from './Loadable'
-import Loader from './Loader'
-import Logo from './Logo'
-import MainCard from './MainCard'
-import MainIcon from './MainIcon'
-import { MenuPopover } from './MenuPopover'
-import Notification from './Notification'
-import ScrollTop from './ScrollTop'
-import ScrollX from './ScrollX'
-import SmallIcon from './SmallIcon'
-export {
-  MainIcon,
-  ActionsMenu,
-  Loadable,
-  Loader,
-  Layout,
-  Logo,
-  MainCard,
-  ScrollTop,
-  ScrollX,
-  MenuPopover,
-  Notification,
-  SmallIcon,
-}
+import ActionsMenu from './ActionsMenu';
+import Layout from './Layout';
+import Loadable from './Loadable';
+import Loader from './Loader';
+import Logo from './Logo';
+import MainCard from './MainCard';
+import MainIcon from './MainIcon';
+import { MenuPopover } from './MenuPopover';
+import Notification from './Notification';
+import ScrollTop from './ScrollTop';
+import ScrollX from './ScrollX';
+import SmallIcon from './SmallIcon';
+export { MainIcon, ActionsMenu, Loadable, Loader, Layout, Logo, MainCard, ScrollTop, ScrollX, MenuPopover, Notification, SmallIcon };
 
-export * from './@extended'
-export * from './third-party'
+export * from './@extended';
+export * from './third-party';
 
 // Ra-Applica
-export * from './ra-buttons'
-export * from './ra-fields'
-export * from './ra-inputs'
-export * from './ra-lists'
-export * from './ra-forms'
+export * from './ra-buttons';
+export * from './ra-fields';
+export * from './ra-inputs';
+export * from './ra-lists';
+export * from './ra-forms';
+export * from './ra-custom';

package/src/components/ra-buttons/CreateInDialogButton.tsx

@@ -0,0 +1,261 @@
+import {
+  Button,
+  CreateButtonClasses,
+  CreateContextProvider,
+  CreateControllerResult,
+  RedirectionSideEffect,
+  SaveButton,
+  useCreateController,
+  useNotify,
+  useRedirect,
+  useResourceContext,
+  useTranslate
+} from 'react-admin';
+import { Dialog, Fab, useMediaQuery } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { SxProps, Theme, styled } from '@mui/material/styles';
+
+import { Add } from '@mui/icons-material';
+import PropTypes from 'prop-types';
+import { Toolbar } from '../ra-forms';
+import clsx from 'clsx';
+import { useAppConfig } from '../../hooks';
+import { useQueryClient } from 'react-query';
+
+const updateColl = (old: any, data: any) => {
+  const id = data.id;
+  if (!old) return [data];
+  const index = old.findIndex((record: any) => record.id === id);
+  if (index === -1) {
+    return [...old, data];
+  }
+
+  return [...old.slice(0, index), { ...old[index], ...data }, ...old.slice(index + 1)];
+};
+const setManyReferenceQueryData = (res: any, data: any) => {
+  const result = res && res.data ? { data: updateColl(res.data, data), total: res.total + 1 } : res;
+  return result;
+};
+const setManyQueryData = (coll: any, data: any) => (coll && coll.length > 0 ? updateColl(coll, data) : coll);
+const setListQueryData = (res: any, data: any) =>
+  res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
+
+export type CreateInDialogContentProps = {
+  onClose: () => void;
+  record?: any;
+  redirect: RedirectionSideEffect;
+  children: React.ReactElement;
+  onSubmit?: (record: any, close: () => void) => void;
+  onSuccess?: (data: any) => void;
+  onError?: (error: any) => void;
+};
+
+const CreateInDialogContent = ({
+  onClose,
+  record,
+  children,
+  redirect: _redirect,
+  onSubmit,
+  onSuccess,
+  onError
+}: CreateInDialogContentProps) => {
+  const queryClient = useQueryClient();
+  const resource = useResourceContext();
+  const redirect = useRedirect();
+  const notify = useNotify();
+  const handleSuccess = useCallback(
+    (data: any) => {
+      const now = Date.now();
+      const updatedAt = now;
+
+      queryClient.setQueryData([resource, 'getOne', { id: data.id }], data);
+      queryClient.setQueriesData([resource, 'getList'], (res: any) => setListQueryData(res, data), {
+        updatedAt
+      });
+      queryClient.setQueriesData([resource, 'getMany'], (coll: any) => setManyQueryData(coll, data), {
+        updatedAt
+      });
+      queryClient.setQueriesData([resource, 'getManyReference'], (res: any) => setManyReferenceQueryData(res, data), { updatedAt });
+
+      onClose();
+      notify('ra.notification.created');
+      if (_redirect !== undefined) {
+        redirect(_redirect, resource, data.id, data);
+      }
+      if (onSuccess) {
+        onSuccess(data);
+      }
+    },
+    [onClose, onSuccess, queryClient, resource, notify, redirect, _redirect]
+  );
+  const { save, isLoading } = useCreateController({
+    mutationOptions: {
+      onSuccess: handleSuccess,
+      onError: onError
+    }
+  });
+  const handleSave = useCallback(
+    (record: any) => {
+      if (onSubmit) {
+        onSubmit(record, onClose);
+      } else if (save) {
+        save(record);
+      }
+    },
+    [onSubmit, save, onClose]
+  );
+  return (
+    <CreateContextProvider
+      value={
+        {
+          record: record,
+          save: handleSave,
+          saving: isLoading,
+          redirect: _redirect
+        } as CreateControllerResult
+      }
+    >
+      {React.cloneElement(children, {
+        ...children.props,
+        toolbar: (
+          <Toolbar>
+            <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
+            <SaveButton />
+          </Toolbar>
+        )
+      })}
+    </CreateContextProvider>
+  );
+};
+
+CreateInDialogContent.propTypes = {
+  children: PropTypes.node,
+  onClose: PropTypes.func,
+  record: PropTypes.object,
+  redirect: PropTypes.oneOf(['list', 'edit', 'show', false])
+};
+CreateInDialogContent.defaultProps = {
+  redirect: false
+};
+const scrollStates = {
+  true: { _scrollToTop: true },
+  false: {}
+} as any;
+
+const StyledFab = styled(Fab, {
+  name: 'RaApplicaCreateInDialogButton',
+  overridesResolver: (_props, styles) => styles.root
+})(({ theme }) => ({
+  [`&.${CreateButtonClasses.floating}`]: {
+    color: theme.palette.getContrastText(theme.palette.primary.main),
+    margin: 0,
+    top: 'auto',
+    right: 20,
+    bottom: 60,
+    left: 'auto',
+    position: 'fixed',
+    zIndex: 1000
+  }
+}));
+
+export type CreateInDialogButtonProps = {
+  fullWidth?: boolean;
+  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+  label?: string;
+  record?: any;
+  redirect?: RedirectionSideEffect;
+  scrollToTop?: boolean;
+  className?: string;
+  sx?: SxProps;
+  children: React.ReactElement;
+  onSubmit?: (record: any, close: () => void) => void;
+  onSuccess?: (data: any) => void;
+  onError?: (error: any) => void;
+};
+
+/**
+ * Consente di gestire la creazione di un record, per una specifica entità, o in modalità completamente personalizzata, all'interno di una dialog.
+ *
+ * @param {CreateInDialogButtonProps}
+ * @returns {React.ReactElement}
+ */
+const CreateInDialogButton = ({
+  fullWidth,
+  maxWidth,
+  label,
+  record,
+  redirect,
+  scrollToTop,
+  className,
+  sx,
+  onSubmit,
+  onSuccess,
+  onError,
+  ...props
+}: CreateInDialogButtonProps): React.ReactElement => {
+  const [open, setOpen] = useState(false);
+  const translate = useTranslate();
+  const resource = useResourceContext();
+  const { openDialog, closeDialog } = useAppConfig();
+
+  const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
+  const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
+  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  return (
+    <>
+      {isSmall ? (
+        <StyledFab
+          {...props}
+          // @ts-ignore
+          state={scrollStates[String(scrollToTop)]}
+          color="primary"
+          className={clsx(CreateButtonClasses.floating, className)}
+          aria-label={label && translate(label)}
+          onClick={handleOpen}
+        >
+          <Add />
+        </StyledFab>
+      ) : (
+        <Button {...props} sx={sx} label={label} onClick={handleOpen}>
+          <Add />
+        </Button>
+      )}
+      <Dialog open={open} onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
+        <CreateInDialogContent
+          {...props}
+          redirect={redirect}
+          record={record}
+          onClose={handleClose}
+          onSubmit={onSubmit}
+          onSuccess={onSuccess}
+          onError={onError}
+        />
+      </Dialog>
+    </>
+  );
+};
+
+CreateInDialogButton.defaultProps = {
+  fullWidth: true,
+  maxWidth: 'md',
+  label: 'ra.action.create',
+  scrollToTop: true
+};
+
+CreateInDialogButton.propTypes = {
+  ...Button.propTypes,
+  redirect: PropTypes.oneOf(['list', 'edit', 'show', false]),
+  fullWidth: PropTypes.bool,
+  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
+  label: PropTypes.string,
+  record: PropTypes.object,
+  scrollToTop: PropTypes.bool,
+  className: PropTypes.string,
+  sx: PropTypes.object,
+  children: PropTypes.node,
+  onSubmit: PropTypes.func,
+  onSuccess: PropTypes.func,
+  onError: PropTypes.func
+};
+
+export default CreateInDialogButton;

package/src/components/ra-custom/ListItem.tsx

@@ -0,0 +1,147 @@
+import { Button, ButtonProps, Stack, Typography } from '@mui/material';
+import { FieldTitle, useRecordContext, useResourceContext } from 'ra-core';
+import React, { ElementType } from 'react';
+
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { useAppConfig } from '../../hooks';
+
+export type ListItemProps = {
+  source?: string;
+  label?: string;
+  record?: any;
+  variant?:
+    | 'body1'
+    | 'body2'
+    | 'caption'
+    | 'button'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'inherit'
+    | 'overline'
+    | 'subtitle1'
+    | 'subtitle2';
+  spaceTop?: boolean;
+  spaceBottom?: boolean;
+  leftIcon?: ElementType<any>;
+  rightIcon?: ElementType<any>;
+  component?: ElementType<any>;
+  button?: string;
+  buttonProps?: ButtonProps;
+};
+
+const defaultIconStyle = {
+  width: '1.5rem',
+  alignSelf: 'center'
+};
+
+/**
+ * Implementa il componente ListItem progettato e disegnato da Applica.
+ * Questo componente può essere utilizzato in diverse combinazioni di proprietà e consente di visualizzare e/o modificare dati
+ * aggiungendo elementi decorativi di dettagli e personalizzazioni nella formattazione dei dati.
+ *
+ * @param {ListItemProps} props
+ * @returns {JSX.Element}
+ */
+const ListItem = ({
+  source,
+  label,
+  variant,
+  record: providedRecord,
+  spaceBottom,
+  spaceTop,
+  component,
+  leftIcon,
+  rightIcon,
+  button,
+  buttonProps,
+  ...props
+}: ListItemProps): JSX.Element => {
+  const { getCurrentDialog } = useAppConfig();
+  const resource = useResourceContext(props as any);
+  const dialogResource = getCurrentDialog();
+  const _record = useRecordContext();
+  const record = providedRecord || _record;
+  const value = get(record, (source as string) || '');
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      sx={(theme) => ({
+        pt: 1,
+        pb: 1,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        ...(spaceBottom && { mb: 2 }),
+        ...(spaceTop && { mt: 2 })
+      })}
+    >
+      <Stack direction="row" alignItems="start">
+        {leftIcon &&
+          (React.isValidElement(leftIcon)
+            ? React.cloneElement(leftIcon, { style: defaultIconStyle } as any)
+            : React.createElement(leftIcon as ElementType<any>, { style: defaultIconStyle }))}
+        <FieldTitle label={label} source={source} resource={dialogResource || resource} />
+      </Stack>
+      <Stack direction="row" alignItems="center">
+        {component ? (
+          React.isValidElement(component) ? (
+            React.cloneElement(component, { record, resource, value } as any)
+          ) : (
+            React.createElement(component as ElementType<any>, { source, record, resource, value })
+          )
+        ) : (
+          <Typography variant={variant}>{value}</Typography>
+        )}
+        {rightIcon &&
+          (React.isValidElement(rightIcon)
+            ? React.cloneElement(rightIcon, { style: defaultIconStyle } as any)
+            : React.createElement(rightIcon as ElementType<any>, { style: defaultIconStyle }))}
+        {button && (
+          <Button size="small" variant="outlined" sx={{ ml: 1, p: 0 }} {...buttonProps}>
+            {button}
+          </Button>
+        )}
+      </Stack>
+    </Stack>
+  );
+};
+
+ListItem.propTypes = {
+  source: PropTypes.string,
+  label: PropTypes.string,
+  record: PropTypes.object,
+  variant: PropTypes.oneOf([
+    'body1',
+    'body2',
+    'caption',
+    'button',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'inherit',
+    'overline',
+    'subtitle1',
+    'subtitle2'
+  ]),
+  spaceTop: PropTypes.bool,
+  spaceBottom: PropTypes.bool,
+  leftIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element, PropTypes.func]),
+  rightIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element, PropTypes.func]),
+  component: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element, PropTypes.func]),
+  buttonProps: PropTypes.object,
+  button: PropTypes.string
+};
+
+ListItem.defaultProps = {
+  variant: 'body1'
+};
+
+export default ListItem;

package/src/components/ra-custom/index.tsx

@@ -0,0 +1,2 @@
+import ListItem from './ListItem';
+export { ListItem };

package/src/components/ra-fields/AttachmentField.tsx

@@ -0,0 +1,88 @@
+import BaseAttachmentField, { BaseAttachmentFieldProps } from './BaseAttachmentField';
+import { Box, Typography } from '@mui/material';
+import { FileField as RaFileField, useDataProvider, useRecordContext, useResourceContext, useTranslate } from 'react-admin';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import { get } from 'lodash';
+
+export type AttachmentFieldProps = BaseAttachmentFieldProps & {
+  title: string;
+  entityId?: string;
+  property?: string;
+  disabled?: boolean;
+  /**
+   * Consente di definire la risorsa base da utilizzare, per le chiamate REST, per recuperare i dati dell'utente associato al singolo allegato.
+   */
+  userResource?: string;
+};
+
+const AttachmentField = ({ entityId, property, disabled, userResource = 'entities/user', ...props }: AttachmentFieldProps) => {
+  const [user, setUser] = useState<any>(null);
+  const record = useRecordContext(props);
+  const dataProvider = useDataProvider();
+  const resource = useResourceContext();
+  const handleClick = useCallback(
+    async (e: any) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const item = get(record, props?.source);
+      const entity = resource.replace('entities/', '');
+      const attachment = await dataProvider.getFile(
+        `/attachments/${entity}/${entityId || record?.id}/${property || props?.source}/${item?.id || record?.id}`
+      );
+      const link = document.createElement('a');
+      link.href = attachment;
+      link.download = get(record, props?.title || props?.source);
+      link.click();
+    },
+    [dataProvider, record, entityId, resource, property, props?.source, props?.title]
+  );
+  const _record = useMemo(
+    () => ({
+      ...record,
+      [props?.source]: record?.src || get(record, props?.source),
+      [props?.title]: record?.title || get(record, props?.title || props?.source)
+    }),
+    [record, props?.source, props?.title]
+  );
+  const translate = useTranslate();
+  useEffect(() => {
+    if (!record || !record?.userId) return;
+    dataProvider.getOne(userResource, { id: record?.userId }).then(({ data }) => setUser(data));
+  }, [record, dataProvider, userResource]);
+
+  return (
+    <BaseAttachmentField
+      {...props}
+      disabled={disabled}
+      record={_record}
+      onClick={handleClick}
+      title={
+        <Box sx={{ cursor: 'pointer' }}>
+          <Typography variant="subtitle1">{get(_record, props?.title || props?.source)}</Typography>
+          <Typography variant="caption" color="secondary">
+            {get(_record, 'sizeDescription')}
+            {user && ` | `}
+            {user &&
+              translate('ra.attachment.info', {
+                user: user?.name,
+                created: dayjs(_record?.createdAt).format('DD/MM/YYYY HH:mm')
+              })}
+          </Typography>
+        </Box>
+      }
+    />
+  );
+};
+
+AttachmentField.propTypes = {
+  // @ts-ignore
+  ...RaFileField.propTypes,
+  source: PropTypes.string,
+  title: PropTypes.string,
+  disabled: PropTypes.bool
+};
+
+export default AttachmentField;