Update Notification
This commit is contained in:
@@ -33,7 +33,7 @@ class NotificationController extends Controller
|
|||||||
'notifications.description',
|
'notifications.description',
|
||||||
'notifications.avatar',
|
'notifications.avatar',
|
||||||
'notification_types.type',
|
'notification_types.type',
|
||||||
DB::raw('DATE_FORMAT(notifications.created_at, "%Y-%m-%dT%H:%i:%s.000Z") as createdAt'),
|
DB::raw('DATE_FORMAT(notifications.created_at, "%Y-%m-%dT%H:%i:%s.000+07:00") as createdAt'),
|
||||||
'notifications.isUnRead',
|
'notifications.isUnRead',
|
||||||
)
|
)
|
||||||
->where('hospital_id', '=', $hospital_id)
|
->where('hospital_id', '=', $hospital_id)
|
||||||
|
|||||||
@@ -32,15 +32,18 @@ import { useSnackbar } from 'notistack';
|
|||||||
export default function NotificationsPopover() {
|
export default function NotificationsPopover() {
|
||||||
const [notifications, setNotifications] = useState([]);
|
const [notifications, setNotifications] = useState([]);
|
||||||
const {enqueueSnackbar} = useSnackbar();
|
const {enqueueSnackbar} = useSnackbar();
|
||||||
useEffect(() => {
|
const getDataNotifications = async () => {
|
||||||
axios
|
axios
|
||||||
.get('notifications/1')
|
.get('notifications/1')
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
setNotifications(response.data.data.notifications);
|
setNotifications(response.data.data.notifications);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
|
enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
getDataNotifications();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const totalUnRead = notifications.filter((item) => item.isUnRead === 1).length;
|
const totalUnRead = notifications.filter((item) => item.isUnRead === 1).length;
|
||||||
@@ -102,31 +105,36 @@ export default function NotificationsPopover() {
|
|||||||
<Divider sx={{ borderStyle: 'dashed' }} />
|
<Divider sx={{ borderStyle: 'dashed' }} />
|
||||||
|
|
||||||
<Scrollbar sx={{ height: { xs: 340, sm: 'auto' } }}>
|
<Scrollbar sx={{ height: { xs: 340, sm: 'auto' } }}>
|
||||||
<List
|
{notifications && notifications.length > 0 ? (
|
||||||
disablePadding
|
<>
|
||||||
subheader={
|
<List
|
||||||
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
|
disablePadding
|
||||||
New
|
subheader={
|
||||||
</ListSubheader>
|
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
|
||||||
}
|
New
|
||||||
>
|
</ListSubheader>
|
||||||
{notifications.slice(0, 2).map((notification) => (
|
}
|
||||||
<NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
|
>
|
||||||
))}
|
{notifications.slice(0, 2).map((notification) => (
|
||||||
</List>
|
<NotificationItem key={notification.id} notification={notification} onClick={notification.id} getDataNotifications={getDataNotifications}/>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
|
||||||
|
<List
|
||||||
|
disablePadding
|
||||||
|
subheader={
|
||||||
|
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
|
||||||
|
Before that
|
||||||
|
</ListSubheader>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{notifications.slice(2, 5).map((notification) => (
|
||||||
|
<NotificationItem key={notification.id} notification={notification} onClick={notification.id} getDataNotifications={getDataNotifications}/>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</>
|
||||||
|
): ''}
|
||||||
|
|
||||||
<List
|
|
||||||
disablePadding
|
|
||||||
subheader={
|
|
||||||
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
|
|
||||||
Before that
|
|
||||||
</ListSubheader>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{notifications.slice(2, 5).map((notification) => (
|
|
||||||
<NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Scrollbar>
|
</Scrollbar>
|
||||||
|
|
||||||
<Divider sx={{ borderStyle: 'dashed' }} />
|
<Divider sx={{ borderStyle: 'dashed' }} />
|
||||||
@@ -153,7 +161,7 @@ type NotificationItemProps = {
|
|||||||
isUnRead: boolean;
|
isUnRead: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
function NotificationItem({ notification, onClick }: { notification: NotificationItemProps, onClick: (id: string) => void}) {
|
function NotificationItem({ notification, onClick, getDataNotifications }: { notification: NotificationItemProps, onClick: (id: string) => void, getDataNotifications: () => void}) {
|
||||||
const { avatar, title } = renderContent(notification);
|
const { avatar, title } = renderContent(notification);
|
||||||
const {enqueueSnackbar} = useSnackbar();
|
const {enqueueSnackbar} = useSnackbar();
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
@@ -167,6 +175,7 @@ function NotificationItem({ notification, onClick }: { notification: Notificatio
|
|||||||
.post('set-read-notification', data)
|
.post('set-read-notification', data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
enqueueSnackbar(response.data.meta.message, {variant : "success"});
|
enqueueSnackbar(response.data.meta.message, {variant : "success"});
|
||||||
|
getDataNotifications();
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
|
enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
|
||||||
|
|||||||
Reference in New Issue
Block a user