MDL-55595 message: fix message preferences for multiple processors

moodle · Oct 7, 2016 · b6723f5 · b6723f5
1 parent d7d7ca2
commit b6723f5
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 32 deletions.
diff --git a/lang/en/message.php b/lang/en/message.php
@@ -122,7 +122,6 @@
 $string['notificationpreferences'] = 'Notification preferences';
 $string['notificationimage'] = 'Notification image';
 $string['notifications'] = 'Notifications';
-$string['notificationsnewmessages'] = 'Notifications of new messages';
 $string['off'] = 'Off';
 $string['offline'] = 'Offline';
 $string['offlinecontacts'] = 'Offline contacts ({$a})';

diff --git a/message/amd/src/message_notification_preference.js b/message/amd/src/message_notification_preference.js
@@ -0,0 +1,66 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Controls the preference for an individual notification type on the
+ * message preference page.
+ *
+ * @module     core_message/message_notification_preference
+ * @class      message_notification_preference
+ * @package    message
+ * @copyright  2016 Ryan Wyllie <ryan@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.2
+ */
+define(['jquery', 'core/ajax', 'core/notification', 'core_message/notification_preference'],
+        function($, ajax, notification, NotificationPreference) {
+
+    var SELECTORS = {
+        PREFERENCE_KEY: '[data-preference-key]',
+    };
+
+    /**
+     * Constructor for the Preference.
+     *
+     * @param element jQuery object root element of the preference
+     * @param int the current user id
+     * @return object Preference
+     */
+    var MessageNotificationPreference = function(element, userId) {
+        NotificationPreference.call(this, element, userId);
+    };
+
+    /**
+     * Clone the parent prototype.
+     */
+    MessageNotificationPreference.prototype = Object.create(NotificationPreference.prototype);
+
+    /**
+     * Set constructor.
+     */
+    MessageNotificationPreference.prototype.constructor = NotificationPreference;
+
+    /**
+     * Get the unique prefix key that identifies this user preference.
+     *
+     * @method getPreferenceKey
+     * @return string
+     */
+    MessageNotificationPreference.prototype.getPreferenceKey = function() {
+        return this.root.find(SELECTORS.PREFERENCE_KEY).attr('data-preference-key');
+    };
+
+    return MessageNotificationPreference;
+});
diff --git a/message/amd/src/message_preferences.js b/message/amd/src/message_preferences.js
@@ -16,18 +16,19 @@
 /**
  * Controls the message preference page.
  *
- * @module     core_message/notification_preference
- * @class      notification_preference
+ * @module     core_message/message_preferences
+ * @class      message_preferences
  * @package    message
  * @copyright  2016 Ryan Wyllie <ryan@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  * @since      3.2
  */
 define(['jquery', 'core/ajax', 'core/notification',
-        'core_message/preferences_notifications_list_controller', 'core/custom_interaction_events'],
-        function($, Ajax, Notification, ListController, CustomEvents) {
+        'core_message/message_notification_preference', 'core/custom_interaction_events'],
+        function($, Ajax, Notification, MessageNotificationPreference, CustomEvents) {
 
     var SELECTORS = {
+        PREFERENCE: '[data-state]',
         PREFERENCES_CONTAINER: '[data-region="preferences-container"]',
         BLOCK_NON_CONTACTS: '[data-region="block-non-contacts-container"] [data-block-non-contacts]',
         BLOCK_NON_CONTACTS_CONTAINER: '[data-region="block-non-contacts-container"]',
@@ -36,19 +37,23 @@ define(['jquery', 'core/ajax', 'core/notification',
     /**
      * Constructor for the MessagePreferences.
      *
+     * @param {jQuery object} element The root element for the message preferences
      * @return object MessagePreferences
      */
-    var MessagePreferences = function() {
-        new ListController($(SELECTORS.PREFERENCES_CONTAINER));
-        var blockContactsElement = $(SELECTORS.BLOCK_NON_CONTACTS);
+    var MessagePreferences = function(element) {
+        this.root = $(element);
 
-        CustomEvents.define(blockContactsElement, [
-            CustomEvents.events.activate
-        ]);
+        this.registerEventListeners();
+    };
 
-        blockContactsElement.on(CustomEvents.events.activate, function(e) {
-            this.saveBlockNonContactsStatus();
-        }.bind(this));
+    /**
+     * Check if the preferences have been disabled on this page.
+     *
+     * @method preferencesDisabled
+     * @return bool
+     */
+    MessagePreferences.prototype.preferencesDisabled = function() {
+        return this.root.find(SELECTORS.PREFERENCES_CONTAINER).hasClass('disabled');
     };
 
     /**
@@ -58,8 +63,8 @@ define(['jquery', 'core/ajax', 'core/notification',
      * @method saveBlockNonContactsStatus
      */
     MessagePreferences.prototype.saveBlockNonContactsStatus = function() {
-        var checkbox = $(SELECTORS.BLOCK_NON_CONTACTS);
-        var container = $(SELECTORS.BLOCK_NON_CONTACTS_CONTAINER);
+        var checkbox = this.root.find(SELECTORS.BLOCK_NON_CONTACTS);
+        var container = this.root.find(SELECTORS.BLOCK_NON_CONTACTS_CONTAINER);
         var ischecked = checkbox.prop('checked');
 
         if (container.hasClass('loading')) {
@@ -89,5 +94,33 @@ define(['jquery', 'core/ajax', 'core/notification',
             });
     };
 
+    /**
+     * Create all of the event listeners for the message preferences page.
+     *
+     * @method registerEventListeners
+     */
+    MessagePreferences.prototype.registerEventListeners = function() {
+        CustomEvents.define(this.root, [
+            CustomEvents.events.activate
+        ]);
+
+        this.root.on(CustomEvents.events.activate, SELECTORS.BLOCK_NON_CONTACTS, function(e) {
+            this.saveBlockNonContactsStatus();
+        }.bind(this));
+
+        this.root.on('change', function(e) {
+            if (!this.preferencesDisabled()) {
+                var preferencesContainer = $(e.target).closest(SELECTORS.PREFERENCES_CONTAINER);
+                var preferenceElement = $(e.target).closest(SELECTORS.PREFERENCE);
+                var messagePreference = new MessageNotificationPreference(preferencesContainer);
+
+                preferenceElement.addClass('loading');
+                messagePreference.save().always(function() {
+                    preferenceElement.removeClass('loading');
+                });
+            }
+        }.bind(this));
+    };
+
     return MessagePreferences;
 });
diff --git a/message/templates/message_preferences.mustache b/message/templates/message_preferences.mustache
@@ -15,9 +15,9 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template core_message/preferences_notifications_list
+    @template core_message/message_preferences
 
-    The list of notifications for the message preferences page
+    The message preferences page
 
     Classes required for JS:
     * None
@@ -75,7 +75,7 @@
         ]
     }
 }}
-<div class="preferences-page-container">
+<div class="preferences-page-container" data-region="preferences-page-container">
     <h2>{{#str}} messagepreferences, message {{/str}}</h2>
     <div class="checkbox-container" data-region="block-non-contacts-container">
         <input id="block-non-contacts"
@@ -90,21 +90,21 @@
     <div class="preferences-container {{#disableall}}disabled{{/disableall}}"
         data-user-id="{{userid}}"
         data-region="preferences-container">
-        <table class="table table-hover preference-table">
+        <table class="table table-hover preference-table" data-region="preference-table">
             <tbody>
                 {{#components}}
-                    <tr>
-                        <th>{{#str}} notificationsnewmessages, message {{/str}}</th>
-                        <td class="align-bottom">
-                            <div class="container-fluid">
-                                <div class="row-fluid">
-                                    <div class="span6">{{#str}} online, message {{/str}}</div>
-                                    <div class="span6">{{#str}} offline, message {{/str}}</div>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
                     {{#notifications}}
+                        <tr data-preference-key="{{preferencekey}}">
+                            <th>{{displayname}}</th>
+                            <td class="align-bottom">
+                                <div class="container-fluid">
+                                    <div class="row-fluid">
+                                        <div class="span6">{{#str}} online, message {{/str}}</div>
+                                        <div class="span6">{{#str}} offline, message {{/str}}</div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
                         {{#processors}}
                             <tr class="preference-row" data-region="preference-row" data-preference-key="{{preferencekey}}">
                                 <td class="preference-name">{{displayname}}</td>
@@ -177,6 +177,6 @@ require(['jquery', 'theme_bootstrapbase/bootstrap', 'core_message/message_prefer
     function($, Bootstrap, MessagePreferences) {
 
     $('[data-toggle="tooltip"]').tooltip();
-    new MessagePreferences();
+    new MessagePreferences($('[data-region="preferences-page-container"]'));
 });
 {{/js}}