@applica-software-guru/react-admin 1.0.75 → 1.0.77

package/package.json

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

package/src/components/Layout/Header/HeaderContent/Profile.jsx

@@ -27,7 +27,7 @@ const Profile = () => {
   const theme = useTheme();
 
   const { identity } = useGetIdentity();
-  const hasProfilePic = identity !== undefined && identity.image !== null && identity.image !== '';
+  const hasProfilePic = identity !== undefined && identity.image && identity.image !== null && identity.image !== '';
   const anchorRef = useRef(null);
   const [open, setOpen] = useState(false);
   const handleToggle = () => {

package/src/components/Layout/index.jsx

@@ -1,22 +1,27 @@
 import 'simplebar/dist/simplebar.css';
 
-import { Box, Container, Toolbar, useMediaQuery } from '@mui/material';
+import { Box, Container, Dialog, Toolbar, useMediaQuery } from '@mui/material';
 import { useBreadcrumbs, useMenuConfig, useThemeConfig } from '../../hooks';
 import { useEffect, useState } from 'react';
 
 import Breadcrumbs from '../@extended/Breadcrumbs';
+import { ChangePasswordForm } from '../ra-forms';
 import Drawer from './Drawer';
 import Footer from './Footer';
 import Header from './Header';
 import HorizontalBar from './Drawer/HorizontalBar';
 import { Outlet } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { useGetIdentity } from 'ra-core';
 import { useTheme } from '@mui/material/styles';
 
 const Layout = ({ children, name, version, logoMain, logoIcon, notification, enableNotification }) => {
   const theme = useTheme();
   const { openDrawer } = useMenuConfig();
   const { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
+  const { identity } = useGetIdentity();
+  const [needToChangePassword, setNeedToChangePassword] = useState(false);
+
   const matchDownLG = useMediaQuery(theme.breakpoints.down('xl'));
   const downLG = useMediaQuery(theme.breakpoints.down('lg'));
   const { container, miniDrawer, menuOrientation, isHorizontalLayout } = useThemeConfig();
@@ -28,6 +33,7 @@ const Layout = ({ children, name, version, logoMain, logoIcon, notification, ena
     setOpen(!open);
     openDrawer(!open);
   };
+  useEffect(() => setNeedToChangePassword(identity?.needToChangePassword === true), [identity]);
   useEffect(() => {
     if (!miniDrawer) {
       setOpen(!matchDownLG);
@@ -41,6 +47,8 @@ const Layout = ({ children, name, version, logoMain, logoIcon, notification, ena
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [drawerOpen]);
 
+  const handlePasswordChange = () => setNeedToChangePassword(false);
+
   return (
     <Box sx={{ display: 'flex', width: '100%' }}>
       <Header
@@ -68,6 +76,9 @@ const Layout = ({ children, name, version, logoMain, logoIcon, notification, ena
             flexDirection: 'column'
           }}
         >
+          <Dialog open={needToChangePassword} maxWidth="xs" fullWidth>
+            <ChangePasswordForm onSuccess={handlePasswordChange} firstAccess />
+          </Dialog>
           {!isLoading && (
             <Breadcrumbs
               titleBottom

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

@@ -1,7 +1,7 @@
-import { EditContextProvider, ResourceContextProvider, required, useAuthProvider, useNotify } from 'ra-core';
+import { Alert, AlertTitle, Grid } from '@mui/material';
+import { EditContextProvider, ResourceContextProvider, required, useAuthProvider, useNotify, useTranslate } from 'ra-core';
 import { useCallback, useState } from 'react';
 
-import { Grid } from '@mui/material';
 import { SaveButton } from 'ra-ui-materialui';
 import SimpleForm from './SimpleForm';
 import { TextInput } from '../ra-inputs';
@@ -10,11 +10,13 @@ import { useThemeConfig } from '../../hooks';
 
 export type ChangePasswordFormProps = {
   onSuccess: () => void;
+  firstAccess?: boolean;
 };
-const ChangePasswordForm = ({ onSuccess }: ChangePasswordFormProps) => {
+const ChangePasswordForm = ({ onSuccess, firstAccess }: ChangePasswordFormProps) => {
   const { spacing } = useThemeConfig();
   const [saving, setSaving] = useState(false);
   const authProvider = useAuthProvider();
+  const translate = useTranslate();
   const notify = useNotify();
   const handleSubmit = useCallback(
     (data: any) => {
@@ -50,6 +52,14 @@ const ChangePasswordForm = ({ onSuccess }: ChangePasswordFormProps) => {
           }
         >
           <Grid container spacing={spacing}>
+            {firstAccess === true && (
+              <Grid item xs={12}>
+                <Alert severity="warning">
+                  <AlertTitle>{translate('ra.auth.first_access.change_password')}</AlertTitle>
+                  {translate('ra.auth.first_access.change_password_helper')}
+                </Alert>
+              </Grid>
+            )}
             <Grid item xs={12}>
               <TextInput source="oldPassword" type="password" validate={required()} />
             </Grid>

package/src/components/ra-inputs/{LabeledInput.jsx → LabeledInput.tsx}

@@ -1,4 +1,4 @@
-import { FieldTitle, useInput } from 'react-admin';
+import { FieldTitle, InputProps, useInput } from 'react-admin';
 import { FormHelperText, InputLabel, Stack } from '@mui/material';
 
 import PropTypes from 'prop-types';
@@ -6,7 +6,25 @@ import React from 'react';
 import { useAppConfig } from '../../hooks';
 import { useTheme } from '@emotion/react';
 
-const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divider, ...props }) => {
+export type LabeledInputProps = InputProps & {
+  sx?: any;
+  children?: React.ReactElement;
+  label?: string | boolean;
+  addLabel?: boolean;
+  resource?: string;
+  isRequired?: boolean;
+  source?: string;
+  display?: 'legend' | 'label';
+  helperText?: string | boolean;
+  divider?: boolean;
+};
+
+/**
+ * Consente di disegnare un input con una label e un eventuale messaggio di aiuto.
+ *
+ * @returns {JSX.Element}
+ */
+const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divider, ...props }: LabeledInputProps): JSX.Element => {
   const theme = useTheme();
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired } = props;
@@ -18,10 +36,13 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
     <Stack
       spacing={1}
       sx={{
+        // @ts-ignore
+        width: props?.fullWidth ? '100%' : 'auto',
         '& .MuiFormHelperText-root': {
           // @see: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx#L340
           // the 'invalid' prop is not used inside the react-admin component. This is necessary if we want to support
           // remove error message colorization when the field is in error state.
+          /** @ts-ignore */
           color: invalid ? theme.palette.error.main : theme.palette.text.secondary,
           '& span': {
             display: 'none'
@@ -34,6 +55,7 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
         <InputLabel
           error={invalid === true}
           sx={{
+            // @ts-ignore
             borderBottom: divider ? `1px solid ${theme.palette.divider}` : 'none',
             pb: divider ? 1 : 0,
             mt: divider ? 1 : 0
@@ -44,6 +66,7 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
       )}
       {React.isValidElement(children)
         ? React.cloneElement(children, {
+            // @ts-ignore
             ...children.props,
             ...props,
             label: display === 'legend' ? label : false

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

@@ -32,37 +32,52 @@ const ApplicaStyledList = styled(RaList, {
       },
       '& .MuiButton-root': {
         margin: theme.spacing(2)
-      },
-      '& .RaFilterForm-filterFormInput > .ra-input': {
-        alignSelf: 'center'
+      }
+    },
+
+    '& .RaList-actions': {
+      padding: theme.spacing(2),
+      paddingTop: 0,
+      '& .RaFilterForm-filterFormInput': {
+        '& .ra-input': {
+          alignSelf: 'center'
+        },
+        [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.
+          marginTop: theme.spacing(1),
+          marginBottom: theme.spacing(1)
+        }
       },
       '& .RaFilterFormInput-hideButton': {
         marginTop: theme.spacing(1),
         marginBottom: theme.spacing(0.5),
         marginRight: theme.spacing(1)
+      },
+      '& > .MuiToolbar-root': {
+        flex: 'unset',
+        padding: 0
       }
-    }
-  },
-  '& .RaList-actions': {
-    padding: theme.spacing(2),
-    paddingTop: 0
-  },
-  '& .RaList-content': {
-    // Resolve an issue related to the visualization of the bulk actions toolbar.
-    // Padding and margin create a non empty space that allows the toolbar to be displayed when
-    // the selection is empty.
-    '& .RaBulkActionsToolbar-collapsed': {
-      height: 0,
-      paddingTop: 0,
-      paddingBottom: 0
     },
-    // Resolve a defect related to the usage of AntDesin icons with Mantis and React-Admin.
-    // These two lines are not needed if you are not using AntDesign icons.
-    '& .icon span': {
-      top: -1,
-      left: -1
+
+    '& .RaList-content': {
+      // Resolve an issue related to the visualization of the bulk actions toolbar.
+      // Padding and margin create a non empty space that allows the toolbar to be displayed when
+      // the selection is empty.
+      '& .RaBulkActionsToolbar-collapsed': {
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0
+      },
+      // Resolve a defect related to the usage of AntDesin icons with Mantis and React-Admin.
+      // These two lines are not needed if you are not using AntDesign icons.
+      '& .icon span': {
+        top: -1,
+        left: -1
+      }
     }
   },
+
   '& .RaEmpty-toolbar': {
     margin: theme.spacing(2)
   }