VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/wwwroot/js/notificationHelper.js

var abp = abp || {};
abp.userNotificationHelper = abp.userNotificationHelper || {};
abp.userNotificationHelper.getUrl = function (userNotification) {
    var data = userNotification.notification.data;
    switch (userNotification.notification.notificationName) {
        case "CalendarNotification":
            return '/Home/Calendar';
        case "WorkflowAuditNotification":
            return `/Wf/Audit?rId=${data.recordId}`;
        default:
            return '/Bs/Notification';
    }
};
abp.userNotificationHelper.getUiIconBySeverity = function (severity) {
    switch (severity) {
        case abp.notifications.severity.SUCCESS:
            return '<span class="symbol-label bg-light-success"><span class="fas fa-check-circle text-success fs-4"></span></span>';
        case abp.notifications.severity.WARN:
            return '<span class="symbol-label bg-light-warning"><span class="fas fa-exclamation-circle text-warning fs-4"></span></span>';
        case abp.notifications.severity.ERROR:
            return '<span class="symbol-label bg-light-danger"><span class="fas fa-exclamation-triangle text-danger fs-4"></span></span>';
        case abp.notifications.severity.FATAL:
            return '<span class="symbol-label bg-light-danger"><span class="fas fa-bomb text-danger fs-4"></span></span>';
        case abp.notifications.severity.INFO:
        default:
            return '<span class="symbol-label bg-light-primary"><span class="fas fa-info-circle text-primary fs-4"></span></span>';
    }
};
abp.userNotificationHelper.format = function (userNotification, truncateText) {
    var formatted = {
        id: userNotification.id,
        userNotificationId: userNotification.id,
        name: abp.localization.VberZero("Notification_" + userNotification.notification.notificationName),
        text: abp.notifications.getFormattedMessageFromUserNotification(userNotification),
        time: moment(userNotification.notification.creationTime).format("YYYY-MM-DD HH:mm:ss"),
        icon: abp.userNotificationHelper.getUiIconBySeverity(userNotification.notification.severity),
        state: abp.notifications.getUserNotificationStateAsString(userNotification.state),
        notificationState: userNotification.state,
        data: userNotification.notification.data,
        url: abp.userNotificationHelper.getUrl(userNotification),
        isUnread: userNotification.state === abp.notifications.userNotificationState.UNREAD,
        timeAgo: moment(userNotification.notification.creationTime).fromNow()
    };
    truncateText = truncateText === undefined ? 100 : truncateText;
    if (truncateText) {
        formatted.text = abp.utils.truncateStringWithPostfix(formatted.text, truncateText);
    }

    return formatted;
};
abp.userNotificationHelper.show = function (userNotification) {
    //Application notification
    abp.notifications.showUiNotifyForUserNotification(userNotification, {
        'onclick': function () {
            //Take action when user clicks to live toastr notification
            var url = abp.userNotificationHelper.getUrl(userNotification);
            if (url) {
                location.href = url;
            }
        }
    });
    //var text = abp.userNotificationHelper.format(userNotification,30).text;
    //Desktop notification
    //Push.create("系统通知", {
    //    body: "你有一个新通知！",
    //    icon: abp.appPath + 'img/logo.png',
    //    timeout: 6000,
    //    onClick: function () {
    //        window.focus();
    //        this.close();
    //    }
    //});
};
abp.userNotificationHelper.setAllAsRead = function (callback) {
    $.vbAjax1({
        url: abp.appUrl + 'Notification/SetAllNotificationsAsRead',
        success: function () {
            abp.event.trigger('app.notifications.refresh');
            callback && callback();
        }
    });
};
abp.userNotificationHelper.setAsRead = function (userNotificationId, callback) {
    $.vbAjax4({
        url: abp.appUrl + 'Notification/SetNotificationAsRead',
        data: { id: userNotificationId },
        success: function () {
            abp.event.trigger('app.notifications.read', userNotificationId);
            callback && callback(userNotificationId);
        }
    });
};
abp.notifications.messageFormatters["VberZero.DomainService.Notifications.Data.CalendarNotificationData"] = function (userNotification) {
    var data = userNotification.notification.data;
    //return '<a href="/Home/Calendar">你有一个新日程：{0}</a>'.format(data.title);
    return '您有一个新日程：' + data.title;
}
abp.notifications.messageFormatters["VberZero.DomainService.Notifications.Data.WorkflowAuditNotificationData"] = function (userNotification) {
    var data = userNotification.notification.data;
    //return '<a href="/Home/Calendar">你有一个新日程：{0}</a>'.format(data.title);
    return `【${data.applyUserName}】提交的【${data.title}】需要您审批`;
}
$(function () {
    //Notification handler
    function bindNotificationEvents() {
        $('#SetAllNotificationsAsRead').click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            abp.userNotificationHelper.setAllAsRead(function () {
                loadNotifications();
            });
        });

        $('.set-read').click(function (e) {
            e.preventDefault();
            e.stopPropagation();

            var notificationId = $(this).closest('.notification-item').data("notification-id");
            if (notificationId) {
                abp.userNotificationHelper.setAsRead(notificationId, function () {
                    loadNotifications();
                });
            }
        });

        $('div.notification-url').click(function () {
            var url = $(this).data('url');
            var notificationId = $(this).closest('.notification-item').data("notification-id");
            if (notificationId) {
                abp.userNotificationHelper.setAsRead(notificationId, function () {
                    document.location.href = url;
                });
            }
        });
    }

    function loadNotifications() {
        $.vbAjax4({
            url: abp.appUrl + 'Notification/getUserNotifications',
            data: { maxResultCount: 5 },
            success: function (result) {
                let $notification = $('[data-vb-nav-header="notification"]'),
                    $nav = $notification.find('div').eq(0),
                    $menu = $notification.find('div').eq(1),
                    $unreadCount = $menu.find('[data-vb-notification="unread-count"]'),
                    $items_box = $menu.find('[data-vb-notification="items"]');
                $nav.find('.bullet').remove();
                result.notifications = [];
                result.unreadMessageExists = result.unreadCount > 0;
                result.items.forEach((v) => {
                    result.notifications.push(abp.userNotificationHelper.format(v, 0));
                });
                $items_box.html(notificationsFormatter(result.notifications));
                bindNotificationEvents();
                if (result.unreadCount > 0) {
                    $nav.append(
                        `<span class="bullet bullet-dot bg-warning h-6px w-6px position-absolute translate-middle top-0 start-50 animation-blink"></span>`);
                    $unreadCount.html(result.unreadCount);
                } else {
                    $unreadCount.html(0);
                }
                //if (result.unreadCount > 0) {
                //    $.blinkTitle.stop();
                //    $.blinkTitle.start();
                //}
                //else {
                //    $.blinkTitle.stop();
                //}
            }
        });
    }
    function notificationsFormatter(data) {
        let str = "";
        if (data && data.length) {
            data.forEach((v) => {
                str += `<div class="d-flex flex-stack py-4 notification-item" data-notification-id="${v.id}">
            <div class="d-flex align-items-center">
                <div class="symbol symbol-35px me-4">${v.icon}</div>
                <div class="mb-0 me-2">
                    <div class="notification-url" data-url="${v.url}"><a href="javascript:void(0)" class="fs-6 ${v.isUnread ? "text-gray-800 text-hover-primary" : "text-gray-500"} fw-bolder">${v.name}</a></div>
                    <div class="text-gray-400 fs-7">${v.text}</div>
                </div>
            </div>
            <span class="badge badge-light fs-8">${v.timeAgo}</span>
        </div>`;
            });
        } else {
            str += `<span class="notification-empty-text p-3">${abp.localization.VberZero('ThereIsNoNotification')}</span>`;
        }
        return str;
    }

    //Notification handler
    abp.event.on('abp.notifications.received', function (userNotification) {
        $.vbAjax4({
            url: abp.appUrl + 'Notification/GetUserNotificationById?id=' + userNotification.id,
            success: function (res) {
                console.log("received", res);
                abp.userNotificationHelper.show(res);
            }
        });
        loadNotifications();
    });

    abp.event.on('app.notifications.refresh', function () {
        loadNotifications();
    });

    abp.event.on('app.notifications.read', function () {
        loadNotifications();
    });

    loadNotifications();
});