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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.174",
+  "version": "1.3.175",
   "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);