MDL-55638 core_message: add message when there are no contacts

lang/en/message.php

@@ -109,6 +109,8 @@
 $string['newonlymsg'] = 'Show only new';
 $string['newsearch'] = 'New search';
 $string['noframesjs'] = 'Use more accessible interface';
+$string['nocontacts'] = 'No contacts';
+$string['noconversations'] = 'No conversations';
 $string['nomessages'] = 'No messages waiting';
 $string['nomessagesfound'] = 'No messages were found';
 $string['noreply'] = 'Do not reply to this message';

message/amd/src/message_area.js

@@ -57,6 +57,7 @@ define(['jquery', 'core_message/message_area_contacts', 'core_message/message_ar
             MESSAGESHEADERACTIONS: "[data-region='messages-header-actions']",
             MESSAGERESPONSE: "[data-region='response']",
             MESSAGETEXT: "[data-region='message-text']",
+            NOCONTACTS: "[data-region=no-contacts]",
             PROFILE: "[data-region='profile']",
             PROFILEADDCONTACT: "[data-action='profile-add-contact']",
             PROFILEBLOCKCONTACT: "[data-action='profile-block-contact']",

message/amd/src/message_area_contacts.js

@@ -130,6 +130,11 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
          * @private
          */
         Contacts.prototype._viewConversations = function() {
+            // If conversations is empty then try load some.
+            if (this._numConversationsDisplayed === 0) {
+                this._loadConversations();
+            }
+
             this.messageArea.find(this.messageArea.SELECTORS.CONTACTS).hide();
             this.messageArea.find(this.messageArea.SELECTORS.CONVERSATIONS).show();
         };
@@ -140,7 +145,7 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
          * @private
          */
         Contacts.prototype._viewContacts = function() {
-            // If contacts is empty then load some.
+            // If contacts is empty then try load some.
             if (this._numContactsDisplayed === 0) {
                 this._loadContacts();
             }
@@ -179,6 +184,9 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
                 user = usercontact.clone();
                 // Change the data action attribute.
                 user.attr('data-action', 'view-contact-msg');
+                // Remove the 'no conversations' message.
+                this.messageArea.find(this.messageArea.SELECTORS.CONVERSATIONS + " " +
+                    this.messageArea.SELECTORS.NOCONTACTS).remove();
                 // Increment the number of conversations displayed.
                 this._numConversationsDisplayed++;
             }
@@ -214,8 +222,13 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
             var numberreceived = 0;
             // Add loading icon to the end of the list.
             return templates.render('core/loading', {}).then(function(html, js) {
-                templates.appendNodeContents(this.messageArea.SELECTORS.CONVERSATIONS,
-                    "<div style='text-align:center'>" + html + "</div>", js);
+                if (this._numConversationsDisplayed) {
+                    templates.appendNodeContents(this.messageArea.SELECTORS.CONVERSATIONS,
+                        "<div style='text-align:center'>" + html + "</div>", js);
+                } else { // No conversations, just replace contents.
+                    templates.replaceNodeContents(this.messageArea.SELECTORS.CONVERSATIONS,
+                        "<div style='text-align:center'>" + html + "</div>", js);
+                }
                 return this._getItems('core_message_data_for_messagearea_conversations',
                     this._numConversationsDisplayed, this._numConversationsToRetrieve);
             }.bind(this)).then(function(data) {
@@ -231,6 +244,9 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
                     templates.appendNodeContents(this.messageArea.SELECTORS.CONVERSATIONS, html, js);
                     // Increment the number of conversations displayed.
                     this._numConversationsDisplayed += numberreceived;
+                } else if (!this._numConversationsDisplayed) {
+                    // If we didn't receive any contacts and there are currently none, then we want to show a message.
+                    templates.replaceNodeContents(this.messageArea.SELECTORS.CONVERSATIONS, html, js);
                 }
                 // Mark that we are no longer busy loading data.
                 this._isLoadingConversations = false;
@@ -259,8 +275,13 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
             var numberreceived = 0;
             // Add loading icon to the end of the list.
             return templates.render('core/loading', {}).then(function(html, js) {
-                templates.appendNodeContents(this.messageArea.SELECTORS.CONTACTS,
-                    "<div style='text-align:center'>" + html + "</div>", js);
+                if (this._numContactsDisplayed) {
+                    templates.appendNodeContents(this.messageArea.SELECTORS.CONTACTS,
+                        "<div style='text-align:center'>" + html + "</div>", js);
+                } else { // No contacts, just replace contents.
+                    templates.replaceNodeContents(this.messageArea.SELECTORS.CONTACTS,
+                        "<div style='text-align:center'>" + html + "</div>", js);
+                }
                 return this._getItems('core_message_data_for_messagearea_contacts',
                     this._numContactsDisplayed, this._numContactsToRetrieve);
             }.bind(this)).then(function(data) {
@@ -276,6 +297,9 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
                     templates.appendNodeContents(this.messageArea.SELECTORS.CONTACTS, html, js);
                     // Increment the number of contacts displayed.
                     this._numContactsDisplayed += numberreceived;
+                } else if (!this._numContactsDisplayed) {
+                    // If we didn't receive any contacts and there are currently none, then we want to show a message.
+                    templates.replaceNodeContents(this.messageArea.SELECTORS.CONTACTS, html, js);
                 }
                 // Mark that we are no longer busy loading data.
                 this._isLoadingContacts = false;
@@ -401,8 +425,10 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
                     for (var i = 0; i <= requests.length - 1; i++) {
                         // Remove the conversation.
                         this._removeContact(this.messageArea.SELECTORS.CONVERSATIONS, requests[i].args.otheruserid);
+                        this._numConversationsDisplayed--;
                         // Trigger conversation deleted events.
                         this.messageArea.trigger(this.messageArea.EVENTS.CONVERSATIONDELETED, requests[i].args.otheruserid);
+
                     }
                 }.bind(this), notification.exception);
             }
@@ -441,16 +467,10 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
          * @param {int} userid
          * @private
          */
-        Contacts.prototype._addContact = function(userid) {
-            var user = this._getUserNode(this.messageArea.SELECTORS.CONTACTS, userid);
-            if (user.length !== 0) {
-                user.show();
-            } else {
-                // Must have added contact we searched for that wasn't in the contact list. Let's just refresh the contact panel.
-                this.messageArea.find(this.messageArea.SELECTORS.CONTACTS).empty();
-                this._numContactsDisplayed = 0;
-                this._loadContacts();
-            }
+        Contacts.prototype._addContact = function() {
+            this.messageArea.find(this.messageArea.SELECTORS.CONTACTS).empty();
+            this._numContactsDisplayed = 0;
+            this._loadContacts();
         };
 
         /**
@@ -473,7 +493,8 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
          * @private
          */
         Contacts.prototype._removeContact = function(selector, userid) {
-            this._getUserNode(selector, userid).hide();
+            this._getUserNode(selector, userid).remove();
+            this._numContactsDisplayed--;
         };
 
         /**

message/classes/api.php

@@ -259,7 +259,7 @@ public static function get_contacts($userid, $limitfrom = 0, $limitnum = 0) {
             }
         }
 
-        return new \core_message\output\messagearea\contacts($userid, 0, $arrcontacts);
+        return new \core_message\output\messagearea\contacts($userid, 0, $arrcontacts, false);
     }
 
     /**

message/classes/output/messagearea/contacts.php

@@ -51,17 +51,24 @@ class contacts implements templatable, renderable {
      */
     protected $contacts;
 
+    /**
+     * Are we storing conversations or contacts?
+     */
+    protected $isconversation;
+
     /**
      * Constructor.
      *
      * @param int $userid The id of the user the contacts belong to
      * @param int $otheruserid The id of the user we are viewing
+     * @param bool $isconversation Are we storing conversations or contacts?
      * @param \core_message\output\messagearea\contact[] $contacts
      */
-    public function __construct($userid, $otheruserid, $contacts) {
+    public function __construct($userid, $otheruserid, $contacts, $isconversation = true) {
         $this->userid = $userid;
         $this->otheruserid = $otheruserid;
         $this->contacts = $contacts;
+        $this->isconversation = $isconversation;
     }
 
     /**
@@ -93,7 +100,7 @@ public function export_for_template(\renderer_base $output) {
             }
             $data->contacts[] = $contactdata;
         }
-
+        $data->isconversation = $this->isconversation;
         return $data;
     }
 }

message/externallib.php

@@ -742,6 +742,7 @@ public static function data_for_messagearea_conversations_returns() {
         return new external_single_structure(
             array(
                 'userid' => new external_value(PARAM_INT, 'The id of the user who we are viewing conversations for'),
+                'isconversation' => new external_value(PARAM_BOOL, 'Are we storing conversations or contacts?'),
                 'contacts' => new external_multiple_structure(
                     new external_single_structure(
                         array(

message/templates/message_area_contacts.mustache

@@ -1,3 +1,13 @@
 {{#contacts}}
     {{> core_message/message_area_contact }}
 {{/contacts}}
+{{^contacts}}
+    <div class="nocontacts" data-region="no-contacts">
+        {{#isconversation}}
+            {{#str}}noconversations, message{{/str}}
+        {{/isconversation}}
+        {{^isconversation}}
+            {{#str}}nocontacts, message{{/str}}
+        {{/isconversation}}
+    </div>
+{{/contacts}}

theme/bootstrapbase/less/moodle/message.less

@@ -138,6 +138,11 @@
                 height: 500px;
                 overflow-y: auto;
 
+                .nocontacts {
+                    padding-top: 20px;
+                    text-align: center;
+                }
+
                 .contact {
                     height: 66px;
                     cursor: pointer;

theme/bootstrapbase/style/moodle.css

@@ -5863,6 +5863,10 @@ a.ygtvspacer:hover {
   height: 500px;
   overflow-y: auto;
 }
+.messaging-area-container .messaging-area .contacts-area .contacts .nocontacts {
+  padding-top: 20px;
+  text-align: center;
+}
 .messaging-area-container .messaging-area .contacts-area .contacts .contact {
   height: 66px;
   cursor: pointer;