message/amd/src/message_drawer_view_group_info.js

   1 // This file is part of Moodle - http://moodle.org/
   2 //
   3 // Moodle is free software: you can redistribute it and/or modify
   4 // it under the terms of the GNU General Public License as published by
   5 // the Free Software Foundation, either version 3 of the License, or
   6 // (at your option) any later version.
   7 //
   8 // Moodle is distributed in the hope that it will be useful,
   9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11 // GNU General Public License for more details.
  12 //
  13 // You should have received a copy of the GNU General Public License
  14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15
  16 /**
  17  * Controls the group info page of the message drawer.
  18  *
  19  * @module     core_message/message_drawer_view_group_info
  20  * @copyright  2018 Ryan Wyllie <ryan@moodle.com>
  21  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22  */
  23 define(
  24 [
  25     'jquery',
  26     'core/str',
  27     'core/templates',
  28     'core_message/message_repository',
  29     'core_message/message_drawer_lazy_load_list',
  30 ],
  31 function(
  32     $,
  33     Str,
  34     Templates,
  35     Repository,
  36     LazyLoadList
  37 ) {
  38
  39     var LOAD_MEMBERS_LIMIT = 50;
  40
  41     var SELECTORS = {
  42         CONTENT_CONTAINER: '[data-region="group-info-content-container"]',
  43         MEMBERS_LIST: '[data-region="members-list"]',
  44     };
  45
  46     var TEMPLATES = {
  47         CONTENT: 'core_message/message_drawer_view_group_info_body_content',
  48         MEMBERS_LIST: 'core_message/message_drawer_view_group_info_participants_list'
  49     };
  50
  51     /**
  52      * Get the content container of the group info view container.
  53      *
  54      * @param {Object} root Contact container element.
  55      * @return {Object} jQuery object
  56      */
  57     var getContentContainer = function(root) {
  58         return root.find(SELECTORS.CONTENT_CONTAINER);
  59     };
  60
  61     /**
  62      * Render the group info page.
  63      *
  64      * @param {Object} root Container element.
  65      * @param {Object} conversation The group conversation.
  66      * @param {Number} loggedInUserId The logged in user's id.
  67      * @return {Object} jQuery promise
  68      */
  69     var render = function(root, conversation, loggedInUserId) {
  70         var placeholderCount = conversation.totalMemberCount > 50 ? 50 : conversation.totalMemberCount;
  71         var placeholders = Array.apply(null, Array(placeholderCount)).map(function() {
  72             return true;
  73         });
  74         var templateContext = {
  75             name: conversation.name,
  76             subname: conversation.subname,
  77             imageurl: conversation.imageUrl,
  78             placeholders: placeholders,
  79             loggedinuser: {
  80                 id: loggedInUserId
  81             }
  82         };
  83
  84         return Templates.render(TEMPLATES.CONTENT, templateContext)
  85             .then(function(html) {
  86                 getContentContainer(root).append(html);
  87                 return html;
  88             });
  89     };
  90
  91     /**
  92      * Get the callback to load members of the conversation.
  93      *
  94      * @param {Object} conversation The conversation
  95      * @param {Number} limit How many members to load
  96      * @param {Number} offset How many memebers to skip
  97      * @return {Function} the callback.
  98      */
  99     var getLoadMembersCallback = function(conversation, limit, offset) {
 100         return function(root, userId) {
 101             return Repository.getConversationMembers(conversation.id, userId, limit + 1, offset)
 102                 .then(function(members) {
 103                     if (members.length > limit) {
 104                         members = members.slice(0, -1);
 105                     } else {
 106                         LazyLoadList.setLoadedAll(root, true);
 107                     }
 108
 109                     offset = offset + limit;
 110
 111                     // Filter out the logged in user so that they don't appear in the list.
 112                     return members.filter(function(member) {
 113                         return member.id != userId;
 114                     });
 115                 });
 116         };
 117     };
 118
 119     /**
 120      * Function to render the members in the list.
 121      *
 122      * @param {Object} contentContainer The list content container.
 123      * @param {Array} members The list of members to render
 124      * @return {Object} jQuery promise
 125      */
 126     var renderMembersCallback = function(contentContainer, members) {
 127         return Templates.render(TEMPLATES.MEMBERS_LIST, {contacts: members})
 128             .then(function(html) {
 129                 contentContainer.append(html);
 130                 return html;
 131             });
 132     };
 133
 134     /**
 135      * Setup the contact page.
 136      *
 137      * @param {Object} root Contact container element.
 138      * @param {Number} conversation The conversation
 139      * @param {Number} loggedInUserId The logged in user id
 140      * @return {Object} jQuery promise
 141      */
 142     var show = function(root, conversation, loggedInUserId) {
 143         root = $(root);
 144
 145         getContentContainer(root).empty();
 146         return render(root, conversation, loggedInUserId)
 147             .then(function() {
 148                 var listRoot = LazyLoadList.getRoot(root);
 149                 LazyLoadList.show(
 150                     listRoot,
 151                     getLoadMembersCallback(conversation, LOAD_MEMBERS_LIMIT, 0),
 152                     renderMembersCallback
 153                 );
 154                 return;
 155             });
 156     };
 157
 158     /**
 159      * String describing this page used for aria-labels.
 160      *
 161      * @param {Object} root Contact container element.
 162      * @param {Number} conversation The conversation
 163      * @return {Object} jQuery promise
 164      */
 165     var description = function(root, conversation) {
 166         return Str.get_string('messagedrawerviewgroupinfo', 'core_message', conversation.name);
 167     };
 168
 169     return {
 170         show: show,
 171         description: description
 172     };
 173 });