@dashadmin/dash-admin 1.3.25 → 1.3.26

package/src/contexts/com/components/NotificationAttributesTable.tsx

@@ -0,0 +1,54 @@
+
+import React, { FC, ReactNode } from 'react';
+import DictionaryContext from '../../dictionary/DictionaryContext';
+
+export interface ISimpleAntAttrTable {
+	tableData: any;
+	ignore?: string[];
+	include?: string[];
+}
+
+const NotificationAttributesTable: FC<ISimpleAntAttrTable> = ({
+	tableData,
+	ignore,
+	include,
+}) => {
+	const dict = React.useContext(DictionaryContext);
+
+	if (!ignore) ignore = [];
+	if (!include) include = [];
+
+	let column = tableData ? Object.keys(tableData) : [];
+	if (include.length) column = column.filter((key) => include.includes(key));
+	if (ignore.length) column = column.filter((key) => !ignore.includes(key));
+
+	const TDData = (): // @ts-ignore - JSX namespace issue
+	JSX.Element | JSX.Element[] => {
+		return column && column.length > 0 ? (
+			column.map((attr) => {
+				return (
+					<tr>
+						<td>{dict.get(attr)}</td>
+						<td>
+							{typeof tableData[attr] !== 'object'
+								? dict.get(tableData[attr])
+								: tableData[attr]}
+						</td>
+					</tr>
+				);
+			})
+		) : (
+			<></>
+		);
+	};
+
+	return (
+		<table className='table'>
+			<tbody>
+				<TDData />
+			</tbody>
+		</table>
+	);
+};
+
+export default NotificationAttributesTable;

package/src/contexts/com/components/NotificationRenderer.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from 'react';
+import { useRecordContext } from 'react-admin';
+
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import { IDashNotificationBase, IDashNotificationPayloadBase } from '../../../interfaces/communication/INotification';
+import { IDashFormattedNotification, formatNotification } from './notificationFormats';
+
+export const NotificationComponent: FC<{ notification: IDashNotificationBase<any> }> = ({
+	notification,
+}) => {
+	let _record = notification as IDashNotificationBase<IDashNotificationPayloadBase>;
+	const formattedNotificationDefault: IDashFormattedNotification =
+		formatNotification(_record);
+	return (
+		<formattedNotificationDefault.content notification={_record} />
+	);
+};
+
+const NotificationRendererView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const record: IDashNotificationBase<any> = useRecordContext();
+	return <NotificationComponent notification={record} />;
+};
+
+const NotificationRenderer = ({
+	method,
+	attribute,
+    resourceConfig
+}: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return <>Not implemented</>;
+		case 'view':
+		case 'list':
+			return <NotificationRendererView attribute={attribute} method={method} resourceConfig={resourceConfig}  />;
+	}
+};
+
+export default NotificationRenderer;

package/src/contexts/com/components/NotificationsWidget.tsx

@@ -0,0 +1,182 @@
+import React, { FC, useContext, useEffect } from 'react';
+import { useGetList } from 'react-admin';
+import { NotificationComponent } from './NotificationRenderer';
+
+import { Badge, Button, Popover } from '@mui/material';
+import { useNavigate } from 'react-router';
+import { Link } from 'react-router-dom';
+import { useStore } from 'react-admin';
+import NotificationsActive from '@mui/icons-material/NotificationsActive';
+
+import LaravelEchoContext, { ILaravelEchoContext } from '../LaravelEchoContext';
+import DictionaryContext from '../../dictionary/DictionaryContext';
+import Scrollbar from '../../../components/scrollbar/Scrollbar';
+import { IDashFormattedNotification, formatNotification } from './notificationFormats';
+import { IDashNotificationBase, IDashNotificationPayloadBase } from '../../../interfaces/communication/INotification';
+
+import { dashStorage } from 'dash-utils';
+export interface INotificationItem {
+	key: React.Key;
+	title: string;
+	notification: IDashNotificationBase<any>;
+	image?: string;
+	name?: string;
+	time?: string;
+}
+
+export const NotificationWrapper: FC<{
+	notification: IDashNotificationBase<any>;
+	key: React.Key;
+	children: React.ReactNode;
+}> = ({ notification, key, children }) => {
+	const formattedNotification: IDashFormattedNotification = formatNotification<any>(notification);
+	return (
+		<li key={key} className='dash-media'>
+			<div className='dash-user-thumb dash-mr-3'>
+				<formattedNotification.content notification={notification} />
+				<span className='dash-badge dash-badge-danger dash-text-white dash-rounded-circle'></span>
+			</div>
+			<div className='dash-media-body'>
+				<h5><formattedNotification.title notification={notification} /></h5>
+				<span>
+					<formattedNotification.content notification={notification} />
+				</span>
+				{children}
+			</div>
+		</li>
+	);
+};
+
+export const NotificationsWidget: FC<{}> = () => {
+	const [currentNotifications, setCurrentNotifications] = useStore<number>(
+		'activeNotifications',
+	);
+
+	const laravelEchoContext =
+		useContext<ILaravelEchoContext>(LaravelEchoContext);
+
+	useEffect(() => {
+		if (
+			laravelEchoContext.lastEvent &&
+			dashStorage.getItem('lastEvent') !==
+				JSON.stringify(laravelEchoContext.lastEvent)
+		) {
+			if (
+				['ProductImportProgressNotification'].includes(
+					laravelEchoContext.lastEvent.notificationPayload.class,
+				)
+			)
+				return;
+			setCurrentNotifications((currentNotifications || 0) + 1);
+		}
+	}, [laravelEchoContext.lastEvent]);
+
+	const navigate = useNavigate();
+
+	const {
+		data: NOTIFICATIONS,
+		// total,
+		// isLoading,
+		// error,
+		// refetch,
+	} = useGetList('notification', {
+		pagination: { page: 1, perPage: 5 },
+		sort: null,
+	});
+
+	const dict = React.useContext(DictionaryContext);
+
+	const NoNotifications = () => {
+		return (
+			<ul className='dash-sub-popover'>
+				<li>{dict.get('NO_AVAILABLE_NOTIFICATIONS')}</li>
+			</ul>
+		);
+	};
+
+	const MailNotification = () => {
+		return (
+			<>
+				<div className='dash-popover-header'>
+					<h3 className='dash-mb-0'>
+						{dict.get('NOTIFICATIONS_WIDGET_TITLE')}
+					</h3>
+					<Button onClick={() => navigate('notification')}>Ver todas</Button>
+				</div>
+				<Scrollbar className='dash-popover-scroll'>
+					<ul className='dash-sub-popover'>
+						{NOTIFICATIONS && NOTIFICATIONS.length ? (
+							(NOTIFICATIONS as any[]).map((notification, index) => {
+								const linkNotification = {
+									...notification,
+									notificationPayload: {
+										...notification.notificationPayload,
+										notificationPayload: {
+											...notification.notificationPayload.notificationPayload,
+											name: (
+												<Link
+													target='_blank'
+													to={`/log/${notification?.notificationPayload?.notificationPayload?.id}/show`}
+												>
+													{
+														notification?.notificationPayload
+															?.notificationPayload?.name
+													}
+												</Link>
+											),
+										},
+									},
+								};
+								return (
+									<NotificationWrapper notification={notification} key={index}>
+										<NotificationComponent notification={linkNotification} />
+									</NotificationWrapper>
+								);
+							})
+						) : (
+							<NoNotifications />
+						)}
+					</ul>
+				</Scrollbar>
+			</>
+		);
+	};
+
+	const [anchorEl, setAnchorEl] =
+		React.useState<HTMLButtonElement | null>(null);
+
+	const openNotifications = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	const openPanel = Boolean(anchorEl);
+
+	return (
+		<div className='dash-notify dash-header-entry'>
+			<Popover
+				id={undefined}
+				open={openPanel}
+				anchorEl={anchorEl}
+				onClose={handleClose}
+				anchorOrigin={{
+					vertical: 'bottom',
+					horizontal: 'left',
+				}}
+			>
+				<MailNotification />
+			</Popover>
+			<Badge
+				onClick={openNotifications}
+				badgeContent={currentNotifications}
+				color='primary'
+			>
+				<NotificationsActive color='action' />
+			</Badge>
+		</div>
+	);
+};
+export default NotificationsWidget;

package/src/contexts/com/components/notificationFormats.tsx

@@ -0,0 +1,50 @@
+import { Fragment, ReactNode } from 'react';
+import DefaultNotificationComponent from './DefaultNotificationComponent';
+
+import { IDashNotificationBase, IDashNotificationPayloadBase } from '../../../interfaces/communication/INotification';
+
+
+
+export interface DefaultDashNotificationPayload extends IDashNotificationPayloadBase {
+    [x: string]: any;
+}
+
+export interface IDashFormattedNotification {
+    class: string;
+    title:  React.FC<{ notification: IDashNotificationBase<any> }>;
+    content: React.FC<{ notification: IDashNotificationBase<any> }>;
+    date?: string;
+    icon:  React.FC<{ notification: IDashNotificationBase<any> }>;
+    [key: string]: any;
+}
+
+export interface INotificationFormat<T> {
+    class: string;
+    title: React.FC<{ notification: IDashNotificationBase<T> }>,
+    content: React.FC<{ notification: IDashNotificationBase<T> }>,
+    icon: React.FC<{ notification: IDashNotificationBase<T> }>,
+}
+
+export function formatNotification<T>(
+    notification: IDashNotificationBase<T>,
+    titleComponent?: React.FC<{ notification: IDashNotificationBase<T> }>,
+    iconComponent?: React.FC<{ notification: IDashNotificationBase<T> }>,
+    contentComponent?: React.FC<{ notification: IDashNotificationBase<T> }>,
+
+): IDashFormattedNotification {
+    
+    return {
+        class: notification.class,
+        title: titleComponent
+            ? titleComponent
+            : (notification) => <>notification.title</>,
+        icon: iconComponent 
+            ? iconComponent
+            : (notification) => <>🔔</>,
+        content: contentComponent
+            ? contentComponent
+            : DefaultNotificationComponent
+    };
+}
+
+export default formatNotification;