streams: Allow sorting of stream members.

Stream members table in Create stream and stream subscribers UI
can now be sorted.
Fixes #21341

web/src/settings_users.js

@@ -41,7 +41,7 @@ function compare_a_b(a, b) {
     return -1;
 }
 
-function sort_email(a, b) {
+export function sort_email(a, b) {
     const email_a = a.delivery_email;
     const email_b = b.delivery_email;
 
@@ -88,7 +88,7 @@ function sort_last_active(a, b) {
     );
 }
 
-function sort_user_id(a, b) {
+export function sort_user_id(a, b) {
     return compare_a_b(a.user_id, b.user_id);
 }
 

web/src/stream_create_subscribers.js

@@ -7,6 +7,7 @@ import * as add_subscribers_pill from "./add_subscribers_pill";
 import * as ListWidget from "./list_widget";
 import {page_params} from "./page_params";
 import * as people from "./people";
+import * as settings_users from "./settings_users";
 import * as stream_create_subscribers_data from "./stream_create_subscribers_data";
 
 let pill_widget;
@@ -83,28 +84,30 @@ export function build_widgets() {
 
     all_users_list_widget = ListWidget.create($("#create_stream_subscribers"), [current_user_id], {
         name: "new_stream_add_users",
+        get_item: people.get_by_user_id,
         $parent_container: $add_people_container,
-        modifier(user_id) {
-            const user = people.get_by_user_id(user_id);
+        modifier(user) {
             const item = {
                 email: user.delivery_email,
-                user_id,
+                user_id: user.user_id,
                 full_name: user.full_name,
-                is_current_user: user_id === current_user_id,
-                disabled: stream_create_subscribers_data.must_be_subscribed(user_id),
+                is_current_user: user.user_id === current_user_id,
+                disabled: stream_create_subscribers_data.must_be_subscribed(user.user_id),
             };
             return render_new_stream_user(item);
         },
+        sort_fields: {
+            email: settings_users.sort_email,
+            id: settings_users.sort_user_id,
+        },
         filter: {
             $element: $("#people_to_add .add-user-list-filter"),
-            predicate(user_id, search_term) {
-                const user = people.get_by_user_id(user_id);
+            predicate(user, search_term) {
                 return people.build_person_matcher(search_term)(user);
             },
         },
         $simplebar_container,
-        html_selector(user_id) {
-            const user = people.get_by_user_id(user_id);
+        html_selector(user) {
             return $(`#${CSS.escape("user_checkbox_" + user.user_id)}`);
         },
     });

web/src/stream_edit_subscribers.js

@@ -14,6 +14,7 @@ import * as ListWidget from "./list_widget";
 import {page_params} from "./page_params";
 import * as peer_data from "./peer_data";
 import * as people from "./people";
+import * as settings_users from "./settings_users";
 import * as stream_data from "./stream_data";
 import * as stream_settings_containers from "./stream_settings_containers";
 import * as sub_store from "./sub_store";
@@ -122,6 +123,11 @@ function make_list_widget({$parent_container, name, user_ids, user_can_remove_su
                 return match;
             },
         },
+        $parent_container: $("#stream_members_list").expectOne(),
+        sort_fields: {
+            email: settings_users.sort_email,
+            id: settings_users.sort_user_id,
+        },
         $simplebar_container,
     });
 }

web/templates/stream_settings/new_stream_users.hbs

@@ -16,9 +16,9 @@
     <div class="subscriber_list_container" data-simplebar>
         <table class="subscriber-list table table-striped">
             <thead class="table-sticky-headers">
-                <th>{{t "Name" }}</th>
-                <th>{{t "Email" }}</th>
-                <th>{{t "User ID" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
+                <th data-sort="email">{{t "Email" }}</th>
+                <th data-sort="id">{{t "User ID" }}</th>
                 <th>{{t "Action" }}</th>
             </thead>
             <tbody id="create_stream_subscribers" class="subscriber_table"></tbody>

web/templates/stream_settings/stream_members.hbs

@@ -19,11 +19,11 @@
     <div class="subscriber-list-box">
         <div class="subscriber_list_container" data-simplebar>
             <div class="subscriber_list_loading_indicator"></div>
-            <table class="subscriber-list table table-striped">
+            <table id="stream_members_list" class="subscriber-list table table-striped">
                 <thead class="table-sticky-headers">
-                    <th>{{t "Name" }}</th>
-                    <th>{{t "Email" }}</th>
-                    <th>{{t "User ID" }}</th>
+                    <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
+                    <th data-sort="email">{{t "Email" }}</th>
+                    <th data-sort="id">{{t "User ID" }}</th>
                     {{#if can_remove_subscribers}}
                     <th class="actions">{{t "Actions" }}</th>
                     {{/if}}