From 18059e132da2d8aa51115f6f79537c35fb765f8d Mon Sep 17 00:00:00 2001
From: Ujjawal Modi <umodi2003@gmail.com>
Date: Fri, 3 Mar 2023 00:27:52 +0530
Subject: [PATCH] user groups: Enabled sorting of subscribers.

The new `#groups` overlay does not allow sorting of subscribers.
This commit adds support for sorting of subscribers.
---
 web/src/user_group_create_members.js          | 19 +++++++++++--------
 web/src/user_group_edit_members.js            |  6 ++++++
 .../new_user_group_users.hbs                  |  6 +++---
 .../user_group_members.hbs                    |  6 +++---
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/web/src/user_group_create_members.js b/web/src/user_group_create_members.js
index 18815bc965..bd0d213b33 100644
--- a/web/src/user_group_create_members.js
+++ b/web/src/user_group_create_members.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 user_group_create_members_data from "./user_group_create_members_data";
 
 let pill_widget;
@@ -92,26 +93,28 @@ export function build_widgets() {
     all_users_list_widget = ListWidget.create($("#create_user_group_members"), [current_user_id], {
         name: "new_user_group_add_users",
         $parent_container: $add_people_container,
-        modifier(user_id) {
-            const user = people.get_by_user_id(user_id);
+        get_item: people.get_by_user_id,
+        sort_fields: {
+            email: settings_users.sort_email,
+            id: settings_users.sort_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,
+                is_current_user: user.user_id === current_user_id,
             };
             return render_new_user_group_user(item);
         },
         filter: {
             $element: $("#people_to_add_in_group .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)}`);
         },
     });
diff --git a/web/src/user_group_edit_members.js b/web/src/user_group_edit_members.js
index cbbd18ac30..234cf0e75a 100644
--- a/web/src/user_group_edit_members.js
+++ b/web/src/user_group_edit_members.js
@@ -13,6 +13,7 @@ import {$t, $t_html} from "./i18n";
 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 ui from "./ui";
 import * as user_group_edit from "./user_group_edit";
 import * as user_groups from "./user_groups";
@@ -65,6 +66,11 @@ function make_list_widget({$parent_container, name, user_ids}) {
 
     return ListWidget.create($list_container, users, {
         name,
+        $parent_container,
+        sort_fields: {
+            email: settings_users.sort_email,
+            id: settings_users.sort_user_id,
+        },
         modifier(item) {
             return format_member_list_elem(item);
         },
diff --git a/web/templates/user_group_settings/new_user_group_users.hbs b/web/templates/user_group_settings/new_user_group_users.hbs
index b7bd449b3e..cf0ee750aa 100644
--- a/web/templates/user_group_settings/new_user_group_users.hbs
+++ b/web/templates/user_group_settings/new_user_group_users.hbs
@@ -16,9 +16,9 @@
     <div class="member_list_container" data-simplebar>
         <table class="member-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_user_group_members" class="member_table"></tbody>
diff --git a/web/templates/user_group_settings/user_group_members.hbs b/web/templates/user_group_settings/user_group_members.hbs
index 0ad4d655ea..f47d9b1172 100644
--- a/web/templates/user_group_settings/user_group_members.hbs
+++ b/web/templates/user_group_settings/user_group_members.hbs
@@ -20,9 +20,9 @@
             <div class="member_list_loading_indicator"></div>
             <table class="member-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 class="actions" {{#unless can_edit}}style="display:none"{{/unless}}>{{t "Actions" }}</th>
                 </thead>
                 <tbody class="member_table"></tbody>