@applica-software-guru/react-admin 1.1.90 → 1.1.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.1.90",
+  "version": "1.1.92",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/ra-forms/Create.tsx

@@ -6,7 +6,10 @@ const StyledCreate = styled(RaCreate, {
   slot: 'root'
 })(({ theme }) => ({
   '& .RaCreate-card, & > div > div > form': {
-    backgroundColor: theme.palette.background.default
+    backgroundColor: theme.palette.background.default,
+    '& .RaToolbar-mobileToolbar': {
+      backgroundColor: 'yellow'
+    }
   },
   '& .RaCreate-main>.MuiPaper-root:first-of-type': {
     overflow: 'visible'

package/src/components/ra-forms/Edit.jsx

@@ -8,6 +8,9 @@ const StyledEdit = styled(RaEdit, {
   '& .RaEdi-card, & > div > div > form': {
     backgroundColor: theme.palette.background.default
   },
+  '& .RaToolbar-mobileToolbar': {
+    borderTop: `1px solid ${theme.palette.divider}`
+  },
   '& .RaEdit-main>.MuiPaper-root:first-of-type': {
     // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
     // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -15,16 +15,15 @@ import {
   TableRow,
   Typography
 } from '@mui/material';
-import { RaRecord, useRecordContext, useTranslate } from 'ra-core';
+import { RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
+import { styled, useTheme } from '@mui/material/styles';
 
-import { MoreHoriz } from '@mui/icons-material';
 import { PlusCircleOutlined } from '@ant-design/icons';
 import PropTypes from 'prop-types';
 import { TableFormIteratorContext } from './TableFormIteratorContext';
 import { TableFormIteratorItem } from './TableFormIteratorItem';
 import { UseFieldArrayReturn } from 'react-hook-form';
 import get from 'lodash/get';
-import { styled } from '@mui/material/styles';
 
 /**
  *
@@ -45,12 +44,14 @@ import { styled } from '@mui/material/styles';
  * @returns
  */
 const TableFormIterator = (props: TableFormIteratorProps) => {
-  const { children, resource, source, label, disableActions = false, disableAdd = false, disableRemove = false, className } = props;
+  const { children, resource, source, label, disableActions = false, disableAdd = false, disableRemove = false, className, empty } = props;
   const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
   const { fields, remove, replace } = useArrayInput(props);
+  const theme = useTheme();
   const translate = useTranslate();
   const record = useRecordContext(props);
   const initialDefaultValue = useRef({});
+  const translateLabel = useTranslateLabel();
   const removeField = useCallback(
     (index: number) => {
       remove(index);
@@ -82,7 +83,8 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
     [fields.length, removeField, source]
   );
 
-  const tableBorderColor = '#F0F0F0';
+  // @ts-ignore
+  const tableBorderColor = theme.palette.mode === 'dark' ? theme.palette.grey.A400 : theme.palette.grey.A800;
 
   return fields ? (
     // @ts-ignore
@@ -100,21 +102,18 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
                   if (!React.isValidElement<any>(input)) {
                     return null;
                   }
-                  const { source, label = '' } = input.props;
                   return (
                     <TableCell key={index}>
                       <Typography display={'flex'} variant="subtitle1" fontWeight={500} color="text.primary" textTransform="none">
-                        {label || source}
+                        {translateLabel({ ...input.props, resource })}
                       </Typography>
                     </TableCell>
                   );
                 })}
 
                 {!disableActions && (
-                  <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} key={'actions'}>
-                    <Typography display={'flex'} variant="subtitle1" fontWeight={500} color="text.primary" textTransform="none">
-                      <MoreHoriz />
-                    </Typography>
+                  <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', verticalAlign: 'top' }} key={'actions'}>
+                    <Typography display={'flex'} variant="subtitle1" fontWeight={500} color="text.primary" textTransform="none" />
                   </TableCell>
                 )}
               </TableRow>
@@ -123,10 +122,14 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
             <TableBody>
               {fields.length === 0 && (
                 <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                  <TableCell colSpan={4} align="center">
-                    <Typography variant="body1" color="text.secondary">
-                      -
-                    </Typography>
+                  <TableCell colSpan={4 + (disableActions ? 0 : 1)} align="center">
+                    {empty ? (
+                      empty
+                    ) : (
+                      <Typography variant="body1" color="text.secondary">
+                        -
+                      </Typography>
+                    )}
                   </TableCell>
                 </TableRow>
               )}
@@ -171,13 +174,17 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
 const AddTableRow = (props: any) => {
   const { label, disableAdd } = props;
   const { append } = useArrayInput(props);
+  const theme = useTheme();
+  // @ts-ignore
+  const tableBorderColor = theme.palette.mode === 'dark' ? theme.palette.grey.A400 : theme.palette.grey.A800;
+  const iconColor = theme.palette.mode === 'light' ? '#000000' : '#FFFFFF';
 
   return (
     <Stack justifyContent={'space-between'} alignItems={'center'} flexDirection={'row'}>
       <Typography>{label}</Typography>
       {!disableAdd && (
-        <IconButton size="small" color="secondary" sx={{ border: '1px solid #D9D9D9' }} onClick={() => append({})}>
-          <PlusCircleOutlined style={{ color: '#000000' }} />
+        <IconButton size="small" color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={() => append({})}>
+          <PlusCircleOutlined style={{ color: iconColor }} />
         </IconButton>
       )}
     </Stack>
@@ -216,7 +223,8 @@ TableFormIterator.propTypes = {
   translate: PropTypes.func,
   disableAdd: PropTypes.bool,
   disableRemove: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  TransitionProps: PropTypes.shape({})
+  TransitionProps: PropTypes.shape({}),
+  empty: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
 };
 
 export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
@@ -236,6 +244,7 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   resource?: string;
   source?: string;
   sx?: SxProps;
+  empty: ReactNode | string;
 }
 
 export default StyledTableFormIterator;

package/src/components/ra-forms/TableForm/TableFormIteratorItem.tsx

@@ -40,7 +40,7 @@ export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorI
         }
         const { source, ...inputProps } = input.props;
         return (
-          <TableCell sx={{ border: 0 }}>
+          <TableCell sx={{ border: 0, verticalAlign: 'top' }}>
             {cloneElement(input, {
               source: source ? `${member}.${source}` : member,
               index: source ? undefined : index2,

package/src/components/ra-inputs/AutocompleteArrayInput.jsx

@@ -8,6 +8,10 @@ const StyledAutocompleteArrayInput = styled(RaAutocompleteArrayInput, {
 })(({ label }) => ({
   '& legend': {
     width: label === false ? 0 : 'auto'
+  },
+  '& .MuiAutocomplete-inputRoot': {
+    // Serve ad allineare l'altezza di un input di tipo Autocomplete a quella degli altri campi utilizzati.
+    padding: `0px 9px`
   }
 }));
 

package/src/components/ra-inputs/AutocompleteInput.jsx

@@ -8,6 +8,13 @@ const StyledAutocompleteInput = styled(RaAutocompleteInput, {
 })(({ label }) => ({
   '& legend': {
     width: label === false ? 0 : 'auto'
+  },
+  '& .MuiAutocomplete-inputRoot': {
+    // Serve ad allineare l'altezza di un input di tipo Autocomplete a quella degli altri campi utilizzati.
+    padding: `0px 9px`
+  },
+  '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+    paddingTop: '4px'
   }
 }));
 

package/src/components/ra-inputs/SelectArrayInput.jsx

@@ -9,10 +9,9 @@ const ApplicaStyledSelectArrayInput = styled(RaSelectArrayInput, {
   '& legend': {
     width: label === false ? 0 : 'auto'
   },
-  '& .RaSelectArrayInput-chips': {
-    '& .RaSelectArrayInput-chip': {
-      marginTop: 0
-    }
+  '& .RaSelectArrayInput-chips > .RaSelectArrayInput-chip': {
+    marginTop: '-2px',
+    marginBottom: '-2px'
   }
 }));
 

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

@@ -9,6 +9,7 @@ const ApplicaStyledList = styled(RaList, {
 })(({ theme }) => ({
   '& .RaList-main': {
     overflowX: 'auto',
+
     '& .RaBulkActionsToolbar-toolbar': {
       // La barra delle operazioni massive di react-admin non è perfettamente
       // compatibile con il tema mantis, peratnto ho dovuto apportare una serie
@@ -37,16 +38,23 @@ const ApplicaStyledList = styled(RaList, {
 
     '& .RaList-actions': {
       padding: theme.spacing(2),
-      paddingTop: 0,
+      paddingTop: theme.spacing(1),
+      alignItems: 'center',
+      '& form': {
+        alignItems: 'center'
+      },
       '& .RaFilterForm-filterFormInput': {
-        marginTop: theme.spacing(1),
+        '& .MuiFormControl-root': {
+          marginTop: 0
+        },
         '& .ra-input': {
-          alignSelf: 'center'
+          alignSelf: 'center',
+          marginTop: 0
         },
         [theme.breakpoints.down('sm')]: {
           // Quando lo schermo è piccolo, il filtro viene visualizzato in una colonna.
           // Diamo un margine maggiore in basso per evitare che siano troppo vicini.
-          marginBottom: theme.spacing(1)
+          marginBottom: theme.spacing(1.5)
         }
       },
       '& .RaFilterFormInput-hideButton': {
@@ -56,7 +64,9 @@ const ApplicaStyledList = styled(RaList, {
       },
       '& > .MuiToolbar-root': {
         flex: 'unset',
-        padding: 0
+        padding: 0,
+        alignSelf: 'flex-end',
+        minHeight: 'fit-content'
       }
     },
 

package/src/hooks/useMenu.jsx

@@ -154,7 +154,8 @@ const createNodes = ({ userGroups, resources, permissions, translate, roles }) =
     const resourceExists = resourceGroup?.children?.some((c) => c.id === resource.name);
     const resourceRoles = resourceMenu?.roles || resource.options?.roles || [];
     const hasRoles = !resourceRoles || resourceRoles.length === 0 || resourceRoles.some((role) => roles.includes(role));
-    if (!hasPermission(resource, permissions) || !resource.hasList || !hasRoles) {
+    const hasPerms = hasPermission(resource, permissions);
+    if (!hasPerms || !resource.hasList || !hasRoles) {
       if (resourceExists && resourceGroup?.children?.length > 0) {
         resourceGroup.children = resourceGroup.children.filter((c) => c.id !== resource.name);
       }

package/src/playground/components/ra-forms/UserForm.jsx

@@ -34,10 +34,10 @@ const UserForm = ({ configuredRoles }) => {
         </Grid>
         <Grid item lg={12} xs={12}>
           <ArrayInput source="items" label={false}>
-            <TableFormIterator label="Ciao">
-              <TextInput source="name" label="Giovaaaa" sx={{ minWidth: 200 }} />
-              <TextInput source="surname" label="Weee" sx={{ minWidth: 150 }} />
-              <SelectArrayInput source="roles" choices={configuredRoles} />
+            <TableFormIterator label="Informazioni utente">
+              <TextInput source="name" label="Name" sx={{ minWidth: 200 }} />
+              <TextInput source="surname" label="Surname" sx={{ minWidth: 150 }} />
+              <SelectArrayInput source="roles" label="Ruoli" choices={configuredRoles} />
             </TableFormIterator>
           </ArrayInput>
         </Grid>