-
-
Notifications
You must be signed in to change notification settings - Fork 218
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33438 from dimagi/bmb/b5-notifications-service-js
[B5] Initial migration for notifications js (notifications_service)
- Loading branch information
Showing
15 changed files
with
283 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
...pp/tests/data/bootstrap5_diffs/javascript/notifications/notifications_service.js.diff.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| --- | ||
| +++ | ||
| @@ -4,13 +4,13 @@ | ||
| * | ||
| */ | ||
|
|
||
| -hqDefine('notifications/js/bootstrap3/notifications_service', [ | ||
| +hqDefine('notifications/js/bootstrap5/notifications_service', [ | ||
| 'jquery', | ||
| 'knockout', | ||
| 'underscore', | ||
| 'jquery.rmi/jquery.rmi', | ||
| 'analytix/js/kissmetrix', | ||
| - 'hqwebapp/js/bootstrap3/hq.helpers', | ||
| + 'hqwebapp/js/bootstrap5/hq.helpers', | ||
| ], function ( | ||
| $, | ||
| ko, |
15 changes: 15 additions & 0 deletions
15
...sts/data/bootstrap5_diffs/javascript/notifications/notifications_service_main.js.diff.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| +++ | ||
| @@ -2,10 +2,10 @@ | ||
| * Document ready handling for pages that use notifications/js/notifications_service.js | ||
| */ | ||
|
|
||
| -hqDefine('notifications/js/bootstrap3/notifications_service_main', [ | ||
| +hqDefine('notifications/js/bootstrap5/notifications_service_main', [ | ||
| 'jquery', | ||
| 'hqwebapp/js/initial_page_data', | ||
| - 'notifications/js/bootstrap3/notifications_service', | ||
| + 'notifications/js/bootstrap5/notifications_service', | ||
| 'analytix/js/google', | ||
| ], function ( | ||
| $, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
190 changes: 190 additions & 0 deletions
190
corehq/apps/notifications/static/notifications/js/bootstrap5/notifications_service.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,190 @@ | ||
| /** | ||
| * NotificationsService communicates with the NotificationsServiceRMIView django view | ||
| * to fetch and update notifications for users on CommCare HQ. | ||
| * | ||
| */ | ||
|
|
||
| hqDefine('notifications/js/bootstrap5/notifications_service', [ | ||
| 'jquery', | ||
| 'knockout', | ||
| 'underscore', | ||
| 'jquery.rmi/jquery.rmi', | ||
| 'analytix/js/kissmetrix', | ||
| 'hqwebapp/js/bootstrap5/hq.helpers', | ||
| ], function ( | ||
| $, | ||
| ko, | ||
| _, | ||
| RMI, | ||
| kissmetrics | ||
| ) { | ||
| 'use strict'; | ||
|
|
||
| // Workaround for non-RequireJS pages: when `define` doesn't exist, RMI is just a global variable. | ||
| RMI = RMI || window.RMI; | ||
|
|
||
| var module = {}; | ||
| var _private = {}; | ||
| _private.RMI = function () {}; | ||
|
|
||
| module.setRMI = function (rmiUrl, csrfToken) { | ||
| var _rmi = RMI(rmiUrl, csrfToken); | ||
| _private.RMI = function (remoteMethod, data) { | ||
| return _rmi("", data, {headers: {"DjNg-Remote-Method": remoteMethod}}); | ||
| }; | ||
| }; | ||
|
|
||
| var Notification = function (data) { | ||
| var self = this; | ||
| self.id = ko.observable(data.id); | ||
| self.isRead = ko.observable(data.isRead); | ||
| self.content = ko.observable(data.content); | ||
| self.url = ko.observable(data.url); | ||
| self.type = ko.observable(data.type); | ||
| self.date = ko.observable(data.date); | ||
| self.activated = ko.observable(data.activated); | ||
|
|
||
| self.isAlert = ko.computed(function () { | ||
| return self.type() === 'alert'; | ||
| }); | ||
| self.isInfo = ko.computed(function () { | ||
| return self.type() === 'info'; | ||
| }); | ||
| self.isFeature = ko.computed(function () { | ||
| return self.type() === 'feat_basic' || self.type() === 'feat_pro'; | ||
| }); | ||
| self.markAsRead = function () { | ||
| _private.RMI("mark_as_read", {id: self.id()}) | ||
| .done(function (data) { | ||
| if (self.isFeature()) { | ||
| kissmetrics.track.event("Notifications tab - Clicked notifications tab - " + | ||
| "Clicked on Case Sharing text link", | ||
| {email: data.email, domain: data.domain}); | ||
| } | ||
| }); | ||
| self.isRead(true); | ||
| return true; | ||
| }; | ||
| }; | ||
|
|
||
| var NotificationsServiceModel = function () { | ||
| var self = this; | ||
| self.notifications = ko.observableArray(); | ||
| self.hasError = ko.observable(false); | ||
| self.lastSeenNotificationDate = ko.observable(); | ||
|
|
||
| self.hasUnread = ko.computed(function () { | ||
| return _.some(self.notifications(), function (note) { | ||
| return !note.isRead(); | ||
| }); | ||
| }); | ||
|
|
||
| self.hasUnreadFeatureNotification = ko.computed(function () { | ||
| return _.some(self.notifications(), function (note) { | ||
| return !note.isRead() && (note.type() === 'feat_basic' || note.type() === 'feat_pro') | ||
| }); | ||
| }) | ||
|
|
||
| self.seen = ko.computed(function () { | ||
| if (self.hasUnreadFeatureNotification()) { | ||
| return false; | ||
| } | ||
|
|
||
| if (!self.hasUnread()) { | ||
| return true; | ||
| } | ||
|
|
||
| var notifications = self.notifications(); | ||
| if (notifications.length === 0) { | ||
| return true; | ||
| } | ||
|
|
||
| var newestNotification = notifications[0]; | ||
| var newestNotificationDate = new Date(newestNotification.activated()); | ||
| var lastSeenNotificationDate = new Date(self.lastSeenNotificationDate()); | ||
| return lastSeenNotificationDate >= newestNotificationDate; | ||
| }); | ||
|
|
||
| self.init = function () { | ||
| _private.RMI("get_notifications", {'did_it_work': true}) | ||
| .done(function (data) { | ||
| self.lastSeenNotificationDate(data.lastSeenNotificationDate); | ||
| _.each(data.notifications, function (data) { | ||
| self.notifications.push(new Notification(data)); | ||
| }); | ||
| }) | ||
| .fail(function (jqXHR, textStatus, errorThrown) { | ||
| self.hasError(true); | ||
| }); | ||
| }; | ||
|
|
||
| self.bellClickHandler = function () { | ||
| if (self.notifications().length === 0) { | ||
| return; | ||
| } | ||
|
|
||
| _private.RMI("save_last_seen", {"notification_id": self.notifications()[0].id()}) | ||
| .done(function (data) { | ||
| self.lastSeenNotificationDate(data.activated); | ||
| if (self.hasUnreadFeatureNotification()) { | ||
| kissmetrics.track.event("Notifications tab - Clicked notifications tab", | ||
| {email: data.email, domain: data.domain}); | ||
| } | ||
| }) | ||
| .fail(function (jqXHR, textStatus, errorThrown) { | ||
| console.log(errorThrown); // eslint-disable-line no-console | ||
| self.hasError(true); | ||
| }); | ||
| }; | ||
| }; | ||
|
|
||
| module.serviceModel = {}; | ||
| module.initService = function (notificationsKoSelector) { | ||
| if ($(notificationsKoSelector).length < 1) { | ||
| return; | ||
| } | ||
| module.serviceModel = new NotificationsServiceModel(); | ||
| module.serviceModel.init(); | ||
| if (!ko.dataFor($(notificationsKoSelector)[0])) { | ||
| // avoid multiple inits | ||
| $(notificationsKoSelector).koApplyBindings(module.serviceModel); | ||
| } | ||
| }; | ||
|
|
||
| module.relativelyPositionUINotify = function (uiNotifySelector) { | ||
| var uiNotifyAlerts = $(uiNotifySelector); | ||
| _.each(uiNotifyAlerts, function (elem) { | ||
| var $notify = $(elem), | ||
| $target = $($notify.data('target')); | ||
|
|
||
| $notify.remove(); | ||
| $target | ||
| .css('position', 'relative') | ||
| .append($notify); | ||
|
|
||
| }); | ||
| }; | ||
|
|
||
| // Store dismissed slugs client-side so that alerts that are generated client-side | ||
| // don't get re-created after user has dismissed them. | ||
| var dismissedSlugs = []; | ||
| module.initUINotify = function (uiNotifySelector) { | ||
| var uiNotifyAlerts = $(uiNotifySelector); | ||
| if (uiNotifyAlerts.length > 0) { | ||
| uiNotifyAlerts.on('closed.bs.alert', function () { | ||
| var notifySlug = $(this).data('slug'); | ||
| dismissedSlugs.push(notifySlug); | ||
| _private.RMI("dismiss_ui_notify", { | ||
| "slug": notifySlug, | ||
| }); | ||
| }); | ||
| uiNotifyAlerts.each(function () { | ||
| if (_.contains(dismissedSlugs, $(this).data('slug'))) { | ||
| $(this).addClass("hide"); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| return module; | ||
| }); |
32 changes: 32 additions & 0 deletions
32
corehq/apps/notifications/static/notifications/js/bootstrap5/notifications_service_main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /** | ||
| * Document ready handling for pages that use notifications/js/notifications_service.js | ||
| */ | ||
|
|
||
| hqDefine('notifications/js/bootstrap5/notifications_service_main', [ | ||
| 'jquery', | ||
| 'hqwebapp/js/initial_page_data', | ||
| 'notifications/js/bootstrap5/notifications_service', | ||
| 'analytix/js/google', | ||
| ], function ( | ||
| $, | ||
| initialPageData, | ||
| notificationsService, | ||
| googleAnalytics | ||
| ) { | ||
| var initNotifications = function () { | ||
| var csrfToken = $("#csrfTokenContainer").val(); | ||
| notificationsService.setRMI(initialPageData.reverse('notifications_service'), csrfToken); | ||
| notificationsService.initService('#js-settingsmenu-notifications'); | ||
| notificationsService.relativelyPositionUINotify('.alert-ui-notify-relative'); | ||
| notificationsService.initUINotify('.alert-ui-notify'); | ||
|
|
||
| $(document).on('click', '.notification-link', function () { | ||
| googleAnalytics.track.event('Notification', 'Opened Message', this.href); | ||
| }); | ||
| googleAnalytics.track.click($('#notification-icon'), 'Notification', 'Clicked Bell Icon'); | ||
| }; | ||
| $(document).ready(initNotifications); | ||
| return { | ||
| 'initNotifications': initNotifications, | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters