Sort modtools search results by nickname

spec/modtools.js

@@ -176,6 +176,9 @@
             const user_els = modal.el.querySelectorAll('.list-group--users > li');
             expect(user_els.length).toBe(6);
 
+            const nicks = Array.from(modal.el.querySelectorAll('.list-group--users > li')).map(el => el.getAttribute('data-nick'));
+            expect(nicks.join(' ')).toBe('gower juliet romeo thirdwitch wiccan witch');
+
             const filter = modal.el.querySelector('[name="filter"]');
             expect(filter).not.toBe(null);
 
@@ -284,6 +287,9 @@
             const user_els = modal.el.querySelectorAll('.list-group--users > li');
             expect(user_els.length).toBe(6);
 
+            const nicks = Array.from(modal.el.querySelectorAll('.list-group--users > li')).map(el => el.getAttribute('data-nick'));
+            expect(nicks.join(' ')).toBe('crone newb nomorenicks oldhag some1 tux');
+
             const filter = modal.el.querySelector('[name="filter"]');
             expect(filter).not.toBe(null);
 

src/converse-muc-views.js

@@ -234,18 +234,19 @@ converse.plugins.add('converse-muc-views', {
                 this.roles_filter = '';
 
                 this.listenTo(this.model, 'change:role', () => {
-                    this.users_with_role = this.getUsersWithRole();
+                    this.users_with_role = this.chatroomview.model.getOccupantsWithRole(this.model.get('role'));
                     this.render();
                 });
                 this.listenTo(this.model, 'change:affiliation', async () => {
                     this.loading_users_with_affiliation = true;
                     this.users_with_affiliation = null;
                     this.render();
+                    const chatroom = this.chatroomview.model;
                     const affiliation = this.model.get('affiliation');
                     if (this.shouldFetchAffiliationsList()) {
-                        this.users_with_affiliation = await this.chatroomview.model.getAffiliationList(affiliation);
+                        this.users_with_affiliation = await chatroom.getAffiliationList(affiliation);
                     } else {
-                        this.users_with_affiliation = this.getUsersWithAffiliation();
+                        this.users_with_affiliation = chatroom.getOccupantsWithAffiliation(affiliation);
                     }
                     this.loading_users_with_affiliation = false;
                     this.render();
@@ -325,30 +326,6 @@ converse.plugins.add('converse-muc-views', {
                 }
             },
 
-            getUsersWithAffiliation () {
-                return this.chatroomview.model.occupants
-                    .where({'affiliation': this.model.get('affiliation')})
-                    .map(item => {
-                        return {
-                            'jid': item.get('jid'),
-                            'nick': item.get('nick'),
-                            'affiliation': item.get('affiliation')
-                        }
-                    });
-            },
-
-            getUsersWithRole () {
-                return this.chatroomview.model.occupants
-                    .where({'role': this.model.get('role')})
-                    .map(item => {
-                        return {
-                            'jid': item.get('jid'),
-                            'nick': item.get('nick'),
-                            'role': item.get('role')
-                        }
-                    });
-            },
-
             filterRoleResults (ev) {
                 this.roles_filter = ev.target.value;
                 this.render();

src/headless/converse-muc.js

@@ -1311,6 +1311,56 @@ converse.plugins.add('converse-muc', {
                     this.occupants.findWhere({'nick': nick_or_jid});
             },
 
+            /**
+             * Return an array of occupant models that have the required role
+             * @private
+             * @method _converse.ChatRoom#getOccupantsWithRole
+             * @param { String } role
+             * @returns { _converse.ChatRoomOccupant[] }
+             */
+            getOccupantsWithRole (role) {
+                return this.getOccupantsSortedBy('nick')
+                    .filter(o => o.get('role') === role)
+                    .map(item => {
+                        return {
+                            'jid': item.get('jid'),
+                            'nick': item.get('nick'),
+                            'role': item.get('role')
+                        }
+                    });
+            },
+
+            /**
+             * Return an array of occupant models that have the required affiliation
+             * @private
+             * @method _converse.ChatRoom#getOccupantsWithAffiliation
+             * @param { String } affiliation
+             * @returns { _converse.ChatRoomOccupant[] }
+             */
+            getOccupantsWithAffiliation (affiliation) {
+                return this.getOccupantsSortedBy('nick')
+                    .filter(o => o.get('affiliation') === affiliation)
+                    .map(item => {
+                        return {
+                            'jid': item.get('jid'),
+                            'nick': item.get('nick'),
+                            'affiliation': item.get('affiliation')
+                        }
+                    });
+            },
+
+            /**
+             * Return an array of occupant models, sorted according to the passed-in attribute.
+             * @private
+             * @method _converse.ChatRoom#getOccupantsSortedBy
+             * @param { String } attr - The attribute to sort the returned array by
+             * @returns { _converse.ChatRoomOccupant[] }
+             */
+            getOccupantsSortedBy (attr) {
+                return Array.from(this.occupants.models)
+                    .sort((a, b) => a.get(attr) < b.get(attr) ? -1 : (a.get(attr) > b.get(attr) ? 1 : 0));
+            },
+
             /**
              * Sends an IQ stanza to the server, asking it for the relevant affiliation list .
              * Returns an array of {@link MemberListItem} objects, representing occupants
@@ -1340,7 +1390,9 @@ converse.plugins.add('converse-muc', {
                     log.warn(result);
                     return err;
                 }
-                return muc_utils.parseMemberListIQ(result).filter(p => p);
+                return muc_utils.parseMemberListIQ(result)
+                    .filter(p => p)
+                    .sort((a, b) => a.nick < b.nick ? -1 : (a.nick > b.nick ? 1 : 0))
             },
 
             /**

src/templates/moderator_tools_modal.js

@@ -91,7 +91,7 @@ const tpl_set_role_form = (o) => html`
 
 
 const role_list_item = (o) => html`
-    <li class="list-group-item">
+    <li class="list-group-item" data-nick="${o.item.nick}">
         <ul class="list-group">
             <li class="list-group-item active">
                 <div><strong>JID:</strong> ${o.item.jid}</div>
@@ -134,7 +134,7 @@ const tpl_set_affiliation_form = (o) => html`
 
 
 const affiliation_list_item = (o) => html`
-    <li class="list-group-item">
+    <li class="list-group-item" data-nick="${o.item.nick}">
         <ul class="list-group">
             <li class="list-group-item active">
                 <div><strong>JID:</strong> ${o.item.jid}</div>