From ad11561d31ead2f9d9afb284b8e9e78eea299f4a Mon Sep 17 00:00:00 2001 From: Shubham Padia Date: Mon, 21 Oct 2024 06:25:30 +0000 Subject: [PATCH] user_groups: Add users to members preview list without add button. This makes the behaviour of this screen similar to the create channel screen where the user does not need to click `Add` button to add users to members preview. This follows most of the logic from that flow for soft removal, syncing between members preview list and the input pills, etc. The current user will have a pill in this case unlike channel creation since a user can create a group without them in it. --- web/src/user_group_create_members.ts | 36 ++++++++++++++++--- web/src/user_group_create_members_data.ts | 26 +++++++++++++- .../user_group_settings/add_members_form.hbs | 12 ++++--- .../new_user_group_users.hbs | 4 +-- 4 files changed, 66 insertions(+), 12 deletions(-) diff --git a/web/src/user_group_create_members.ts b/web/src/user_group_create_members.ts index 4a61c60ad4..5578849c1f 100644 --- a/web/src/user_group_create_members.ts +++ b/web/src/user_group_create_members.ts @@ -33,8 +33,13 @@ function add_all_users(): void { add_user_ids(user_ids); } -function remove_user_ids(user_ids: number[]): void { - user_group_create_members_data.remove_user_ids(user_ids); +function soft_remove_user_id(user_id: number): void { + user_group_create_members_data.soft_remove_user_id(user_id); + redraw_member_list(); +} + +function undo_soft_remove_user_id(user_id: number): void { + user_group_create_members_data.undo_soft_remove_user_id(user_id); redraw_member_list(); } @@ -43,13 +48,25 @@ export function clear_member_list(): void { redraw_member_list(); } +function sync_user_ids(user_ids: number[]): void { + user_group_create_members_data.sync_user_ids(user_ids); + redraw_member_list(); +} + function build_pill_widget({$parent_container}: {$parent_container: JQuery}): void { const $pill_container = $parent_container.find(".pill-container"); const get_potential_members = user_group_create_members_data.get_potential_members; - pill_widget = add_subscribers_pill.create({ + pill_widget = add_subscribers_pill.create_without_add_button({ $pill_container, get_potential_subscribers: get_potential_members, + onPillCreateAction: add_user_ids, + // It is better to sync the current set of user ids in the input + // instead of removing user_ids from the user_ids_set, otherwise + // we'll have to have more complex logic of when to remove + // a user and when not to depending upon their group, channel + // and individual pills. + onPillRemoveAction: sync_user_ids, }); } @@ -64,7 +81,14 @@ export function create_handlers($container: JQuery): void { e.preventDefault(); const $elem = $(e.target); const user_id = Number.parseInt($elem.attr("data-user-id")!, 10); - remove_user_ids([user_id]); + soft_remove_user_id(user_id); + }); + + $container.on("click", ".undo_soft_removed_potential_subscriber", (e) => { + e.preventDefault(); + const $elem = $(e.target); + const user_id = Number.parseInt($elem.attr("data-user-id")!, 10); + undo_soft_remove_user_id(user_id); }); function add_users({pill_user_ids}: {pill_user_ids: number[]}): void { @@ -108,6 +132,9 @@ export function build_widgets(): void { full_name: user.full_name, is_current_user: user.user_id === current_user_id, img_src: people.small_avatar_url_for_person(user), + soft_removed: user_group_create_members_data.user_id_in_soft_remove_list( + user.user_id, + ), }; return render_new_user_group_user(item); }, @@ -122,4 +149,5 @@ export function build_widgets(): void { return $(`#${CSS.escape("user_checkbox_" + user.user_id)}`); }, }); + pill_widget.appendValue(current_user.email); } diff --git a/web/src/user_group_create_members_data.ts b/web/src/user_group_create_members_data.ts index 1864b031d8..a546f03ae7 100644 --- a/web/src/user_group_create_members_data.ts +++ b/web/src/user_group_create_members_data.ts @@ -1,11 +1,15 @@ +import _ from "lodash"; + import * as people from "./people"; import type {User} from "./people"; import {current_user} from "./state_data"; let user_id_set: Set; +let soft_remove_user_id_set: Set; export function initialize_with_current_user(): void { user_id_set = new Set([current_user.user_id]); + soft_remove_user_id_set = new Set(); } export function sorted_user_ids(): number[] { @@ -24,7 +28,7 @@ export function get_all_user_ids(): number[] { export function get_principals(): number[] { // Return list of user ids which were selected by user. - return [...user_id_set]; + return _.difference([...user_id_set], [...soft_remove_user_id_set]); } export function get_potential_members(): User[] { @@ -38,6 +42,9 @@ export function add_user_ids(user_ids: number[]): void { const user = people.maybe_get_user_by_id(user_id); if (user) { user_id_set.add(user_id); + // Re-adding a user explicitly will not undo the soft remove on their row. + // e.g If `Iago` was added as part of a group and crossed out. + // Now, adding another group with Iago as part of it should not undo the soft remove. } } } @@ -46,5 +53,22 @@ export function add_user_ids(user_ids: number[]): void { export function remove_user_ids(user_ids: number[]): void { for (const user_id of user_ids) { user_id_set.delete(user_id); + undo_soft_remove_user_id(user_id); } } + +export function sync_user_ids(user_ids: number[]): void { + user_id_set = new Set(user_ids); +} + +export function soft_remove_user_id(user_id: number): void { + soft_remove_user_id_set.add(user_id); +} + +export function undo_soft_remove_user_id(user_id: number): void { + soft_remove_user_id_set.delete(user_id); +} + +export function user_id_in_soft_remove_list(user_id: number): boolean { + return soft_remove_user_id_set.has(user_id); +} diff --git a/web/templates/user_group_settings/add_members_form.hbs b/web/templates/user_group_settings/add_members_form.hbs index 7a9526e3f6..0d042263fd 100644 --- a/web/templates/user_group_settings/add_members_form.hbs +++ b/web/templates/user_group_settings/add_members_form.hbs @@ -5,9 +5,11 @@ {{~! Squash whitespace so that placeholder is displayed when empty. ~}} -
- -
+ {{#if (not hide_add_button)}} +
+ +
+ {{/if}} 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 db059af4e3..73c078ab98 100644 --- a/web/templates/user_group_settings/new_user_group_users.hbs +++ b/web/templates/user_group_settings/new_user_group_users.hbs @@ -1,5 +1,5 @@
- {{> add_members_form}} + {{> add_members_form hide_add_button=true}}

@@ -7,7 +7,7 @@
-

{{t 'Members' }}

+

{{t 'Members preview' }}