From b1c81e2e028798c0d2547e51a59103b5384ffaa5 Mon Sep 17 00:00:00 2001 From: Purushottam Tiwari Date: Sat, 3 Sep 2022 01:02:34 +0530 Subject: [PATCH] user groups: Implement General tab functionalities for group settings. There will be one more follow up commit to this, that will add support for editing memberships of user groups and will complete preliminary version for user group edit settings. Follw up for #22214. --- static/js/user_group_edit.js | 69 +++++++++++++++++-- static/styles/subscriptions.css | 19 +++-- .../change_user_group_info_modal.hbs | 12 ++++ .../user_group_settings.hbs | 19 ++++- 4 files changed, 109 insertions(+), 10 deletions(-) create mode 100644 static/templates/user_group_settings/change_user_group_info_modal.hbs diff --git a/static/js/user_group_edit.js b/static/js/user_group_edit.js index f5209b6d1a..5e8e13a148 100644 --- a/static/js/user_group_edit.js +++ b/static/js/user_group_edit.js @@ -1,15 +1,19 @@ import $ from "jquery"; +import render_change_user_group_info_modal from "../templates/user_group_settings/change_user_group_info_modal.hbs"; import render_user_group_settings from "../templates/user_group_settings/user_group_settings.hbs"; import * as blueslip from "./blueslip"; import * as browser_history from "./browser_history"; +import * as channel from "./channel"; import * as components from "./components"; +import * as dialog_widget from "./dialog_widget"; import * as hash_util from "./hash_util"; -import {$t} from "./i18n"; +import {$t, $t_html} from "./i18n"; import {page_params} from "./page_params"; import * as people from "./people"; import * as settings_data from "./settings_data"; +import * as settings_ui from "./settings_ui"; import * as ui from "./ui"; import * as user_group_ui_updates from "./user_group_ui_updates"; import * as user_groups from "./user_groups"; @@ -24,7 +28,7 @@ function setup_group_edit_hash(group) { } function get_user_group_id(target) { - const $row = $(target).closest(".group-row"); + const $row = $(target).closest(".group-row, .user_group_settings_wrapper, .save-button"); return Number.parseInt($row.attr("data-group-id"), 10); } @@ -59,7 +63,9 @@ export function can_edit(group_id) { } export function get_edit_container(group) { - return $(`#groups_overlay .user_group_settings[data-group-id='${CSS.escape(group.id)}']`); + return $( + `#groups_overlay .user_group_settings_wrapper[data-group-id='${CSS.escape(group.id)}']`, + ); } export function show_settings_for(node) { @@ -76,7 +82,7 @@ export function show_settings_for(node) { const $edit_container = get_edit_container(group); $(".nothing-selected").hide(); - $edit_container.addClass("show"); + $edit_container.show(); } export function setup_group_settings(node) { @@ -112,4 +118,59 @@ export function initialize() { open_group_edit_panel_for_row(this); } }); + + $("#manage_groups_container").on("click", "#open_group_info_modal", (e) => { + e.preventDefault(); + e.stopPropagation(); + const user_group_id = get_user_group_id(e.target); + const user_group = user_groups.get_user_group_from_id(user_group_id); + const template_data = { + group_name: user_group.name, + group_description: user_group.description, + }; + const change_user_group_info_modal = render_change_user_group_info_modal(template_data); + dialog_widget.launch({ + html_heading: $t_html( + {defaultMessage: "Edit {group_name}"}, + {group_name: user_group.name}, + ), + html_body: change_user_group_info_modal, + id: "change_group_info_modal", + on_click: save_group_info, + post_render: () => { + $("#change_group_info_modal .dialog_submit_button") + .addClass("save-button") + .attr("data-group-id", user_group_id); + }, + }); + }); + + function save_group_info(e) { + e.preventDefault(); + e.stopPropagation(); + const group = get_user_group_for_target(e.currentTarget); + + const url = `/json/user_groups/${group.id}`; + const data = {}; + const new_name = $("#change_user_group_name").val().trim(); + const new_description = $("#change_user_group_description").val().trim(); + + if (new_name === group.name && new_description === group.description) { + return; + } + if (new_name !== group.name) { + data.name = new_name; + } else { + data.name = group.name; + } + if (new_description !== group.description) { + data.description = new_description; + } else { + data.description = group.description; + } + + const $status_element = $(".group_change_property_info"); + dialog_widget.close_modal(); + settings_ui.do_settings_change(channel.patch, url, data, $status_element); + } } diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css index 5cf6986eb4..60303742ad 100644 --- a/static/styles/subscriptions.css +++ b/static/styles/subscriptions.css @@ -598,7 +598,7 @@ h4.user_group_setting_subsection_title { } .top-bar .stream-name, - .top-bar .group-name, + .top-bar .group-name-wrapper, .bottom-bar .description { white-space: nowrap; overflow: hidden; @@ -624,7 +624,7 @@ h4.user_group_setting_subsection_title { } .top-bar .stream-name, - .top-bar .group-name { + .top-bar .group-name-wrapper { font-weight: 600; } @@ -766,10 +766,12 @@ h4.user_group_setting_subsection_title { } } + .group-header, .stream-header { white-space: nowrap; padding-top: 10px; + .group-name-wrapper, .stream-name { display: inline-block; position: relative; @@ -780,6 +782,7 @@ h4.user_group_setting_subsection_title { white-space: nowrap; max-width: 260px; + .group-name, .sub-stream-name { display: block; max-width: 20ch; @@ -825,12 +828,14 @@ h4.user_group_setting_subsection_title { } } + .group_change_property_info, .stream_change_property_info { vertical-align: top; margin: -5px 0 0; } } + .group-description-wrapper, .stream-description { margin-bottom: 5px; @@ -995,6 +1000,7 @@ h4.user_group_setting_subsection_title { margin: 5.5px 0 1px; } +#change_user_group_description, #change_stream_description { width: 100%; height: 80px; @@ -1115,6 +1121,7 @@ h4.user_group_setting_subsection_title { } @media (width < $sm_min) { + #groups_overlay .user_group_settings_wrapper, #subscription_overlay .subscription_settings { .button-group { display: block; @@ -1122,10 +1129,14 @@ h4.user_group_setting_subsection_title { margin-top: 10px; } - .stream-header .button-group { - margin-top: -5px; + .group-header, + .stream-header { + .button-group { + margin-top: -5px; + } } + .group_change_property_info, .stream_change_property_info { /* For small widths where there is not enough space to show alert beside stream name we set its display diff --git a/static/templates/user_group_settings/change_user_group_info_modal.hbs b/static/templates/user_group_settings/change_user_group_info_modal.hbs new file mode 100644 index 0000000000..6a8808c1c1 --- /dev/null +++ b/static/templates/user_group_settings/change_user_group_info_modal.hbs @@ -0,0 +1,12 @@ +
+ + +
+
+ + +
diff --git a/static/templates/user_group_settings/user_group_settings.hbs b/static/templates/user_group_settings/user_group_settings.hbs index 2f04d20c04..73d91365b2 100644 --- a/static/templates/user_group_settings/user_group_settings.hbs +++ b/static/templates/user_group_settings/user_group_settings.hbs @@ -1,11 +1,26 @@
-
+
- General group settings. +
+
+ {{group.name}} +
+
+
+ +
+
+
+ + {{group.description}} + +