@applica-software-guru/react-admin 1.3.174 → 1.3.176

package/package.json

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

package/src/components/Layout/Header/Notification/Notification.tsx

@@ -1,9 +1,9 @@
 import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import { useLayoutMediaState, useLayoutNotificationsState } from '../../Provider';
 import { HeaderToggleButton } from '../Buttons';
-import { useGetList, useTranslate } from 'ra-core';
+import { useGetList, useNotify, useRefresh, useTranslate, useUpdateMany } from 'ra-core';
 import { HeaderNotificationItem, INotification } from './NotificationItem';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   Badge,
   ClickAwayListener,
@@ -21,6 +21,7 @@ import { usePopoverState } from '../../../../hooks';
 import { IconButton, Transitions } from '../../../@extended';
 import MainCard from '../../../MainCard';
 import { Link } from 'react-router-dom';
+import dayjs from 'dayjs';
 
 const avatarSx = {
   width: 36,
@@ -45,6 +46,8 @@ function HeaderNotification() {
 function HeaderNotificationButton() {
   const translate = useTranslate(),
     theme = useTheme(),
+    refresh = useRefresh(),
+    notify = useNotify(),
     { downMd } = useLayoutMediaState(),
     { resource } = useLayoutNotificationsState(),
     [notifications, setNotifications] = useState<Array<INotification>>([]),
@@ -64,6 +67,27 @@ function HeaderNotificationButton() {
     }
   }, [data, isLoading]);
 
+  const unreadNotificationIds = notifications.filter((notification) => !notification.readed).map((notification) => notification.id);
+
+  const [updateMany] = useUpdateMany(
+    resource,
+    {
+      ids: unreadNotificationIds,
+      data: { readed: dayjs().format('YYYY-MM-DD HH:mm:ss') }
+    },
+    {
+      onSuccess: () => {
+        refresh();
+        notify('resources.notifications.messages.readed.done');
+      },
+      onError: () => notify('ra.notification.readed_error')
+    }
+  );
+
+  const handleUpdateMany = useCallback(() => {
+    updateMany();
+  }, [updateMany]);
+
   return (
     <>
       <HeaderToggleButton value="notifications" selected={open} onChange={handleToggle}>
@@ -90,14 +114,14 @@ function HeaderNotificationButton() {
             >
               <ClickAwayListener onClickAway={handleClose}>
                 <MainCard
-                  title="Notification"
+                  title={translate('ra.notification.title')}
                   elevation={0}
                   border={false}
                   content={false}
                   secondary={
                     <>
                       {read > 0 && (
-                        <Tooltip title="Mark as all read">
+                        <Tooltip title={translate('ra.notification.mark-as-read')} onClick={handleUpdateMany}>
                           {/*@ts-ignore*/}
                           <IconButton color="success" size="small">
                             <CheckCircleOutlined style={{ fontSize: '1.15rem' }} />

package/src/components/Layout/Header/Notification/NotificationItem.tsx

@@ -74,9 +74,25 @@ function HeaderNotificationItem(props: IHeaderNotificationItemProps) {
             <MessageOutlined />
           </Avatar>
         </ListItemAvatar>
-        <ListItemText primary={notification.title} secondary={notification.content} />
+        <ListItemText
+          sx={{
+            overflow: 'hidden',
+            wordBreak: 'break-word',
+            width: '90%'
+          }}
+          primary={notification.title}
+          secondary={notification.content}
+        />
         <Box flexGrow={1} flexShrink={1} minWidth={theme.spacing(2)} />
-        <ListItemText primary={ago} primaryTypographyProps={{ variant: 'caption' }} />
+        <ListItemText
+          sx={{
+            overflow: 'hidden',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word'
+          }}
+          primary={ago}
+          primaryTypographyProps={{ variant: 'caption' }}
+        />
       </ListItemButton>
     </ListItem>
   );

package/src/components/ra-fields/DateAgoField.jsx

@@ -6,6 +6,8 @@ import { Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import { get } from 'lodash';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/en';
+import 'dayjs/locale/it';
 
 dayjs.extend(relativeTime);
 

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

@@ -11,10 +11,10 @@ const StyledAutocompleteArrayInput = styled(RaAutocompleteArrayInput, {
   },
   '& .MuiAutocomplete-inputRoot': {
     padding: `0px 9px`
-  },
-  '& label.MuiFormLabel-root[data-shrink="false"]': {
-    minHeight: '18px'
   }
+  // '& label.MuiFormLabel-root[data-shrink="false"]': {
+  //   minHeight: '18px'
+  // }
 }));
 
 // eslint-disable-next-line no-unused-vars

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

@@ -9,9 +9,9 @@ const StyledAutocompleteInput = styled(RaAutocompleteInput, {
   '& legend': {
     width: label === false ? 0 : 'auto'
   },
-  '& label.MuiFormLabel-root[data-shrink="false"]': {
-    minHeight: '18px'
-  },
+  // '& label.MuiFormLabel-root[data-shrink="false"]': {
+  //   minHeight: '18px'
+  // },
   '& .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/LabeledInput.tsx

@@ -4,7 +4,7 @@ import { FormHelperText, InputLabel, Stack } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useAppConfig } from '../../hooks';
-import { useTheme } from '@emotion/react';
+import { useTheme } from '@mui/material/styles';
 
 export type LabeledInputProps = InputProps & {
   sx?: any;

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

@@ -12,10 +12,10 @@ const ApplicaStyledSelectArrayInput = styled(RaSelectArrayInput, {
   '& .RaSelectArrayInput-chips > .RaSelectArrayInput-chip': {
     marginTop: '-2px',
     marginBottom: '-2px'
-  },
-  '& label.MuiFormLabel-root[data-shrink="false"]': {
-    marginTop: '2px'
   }
+  // '& label.MuiFormLabel-root[data-shrink="false"]': {
+  //   marginTop: '2px'
+  // }
 }));
 
 ApplicaStyledSelectArrayInput.propTypes = {

package/src/components/ra-inputs/SelectInput.tsx

@@ -8,11 +8,11 @@ const ApplicaStyledSelectInput = styled(RaSelectInput, {
   slot: 'Root'
 })(({ label }) => ({
   '& legend': {
-    width: label === false ? 0 : 'auto'
-  },
-  '& label.MuiFormLabel-root[data-shrink="false"]': {
-    marginTop: '2px'
+    width: label === false || label === null ? 0 : 'auto'
   }
+  // '& label.MuiFormLabel-root[data-shrink="false"]': {
+  //   marginTop: '2px'
+  // }
 }));
 export type SelectInputProps = LabeledInputProps & RaSelectInputProps;
 const SelectInput = (props: SelectInputProps) => (
@@ -21,9 +21,4 @@ const SelectInput = (props: SelectInputProps) => (
   </LabeledInput>
 );
 
-SelectInput.propTypes = {
-  ...RaSelectInput.propTypes,
-  ...LabeledInput.propTypes
-};
-
 export default SelectInput;

package/src/contexts/ThemeConfigContext.tsx

@@ -96,6 +96,7 @@ const ThemeConfigProvider = ({ initialConfig, children }: ThemeConfigProviderPro
   return (
     <ThemeConfigContext.Provider
       value={{
+        // @ts-ignore
         ...config,
 
         setFontFamily,