paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

custom_profile_fields: Toggle new "display_in_profile_summary" field.

Browse Source 
Custom profile fields table `CSS` changed to fit the new "Display"
column of checkboxes, checkboxes are for select/deselect custom
profile field to display in profile popover.

New option "Display in profile summary" added in create and edit
custom profile fields form, with the help of this the user can
pick max of 2 custom profile fields except for `LONG_TEXT` and
`USER` fields to display in his user profile popover.

Checkboxes will go in a disabled state, with an explanatory tooltip,
if we've already passed the limit of 2 fields with this setting
enabled.

Fixes #21215.
This commit is contained in:
Yogesh Sirsat
2022-08-17 17:46:15 +05:30
committed by Tim Abbott
parent cd71fdea60
commit a3094d0f26
9 changed files with 223 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
static/js/settings_profile_fields.js
View File

@@ -39,6 +39,7 @@ export function maybe_disable_widgets() {
.prop("disabled", true);
}
let display_in_profile_summary_fields_limit_reached = false;
let order = [];
const field_types = page_params.custom_profile_field_types;
@@ -58,6 +59,14 @@ export function field_type_id_to_string(type_id) {
return undefined;
}
// Checking custom profile field type is valid for showing display in profile summary checkbox field.
function is_valid_to_display_in_summary(field_type) {
if (field_type === field_types.LONG_TEXT.id || field_type === field_types.USER.id) {
return false;
}
return true;
}
function update_profile_fields_table_element() {
const $profile_fields_table = $("#admin_profile_fields_table").expectOne();
@@ -206,8 +215,9 @@ function set_up_create_field_form() {
$("#dialog_error").hide();
const $field_elem = $("#profile_field_external_accounts");
const $field_url_pattern_elem = $("#custom_external_account_url_pattern");
const profile_field_type = Number.parseInt($("#profile_field_type").val(), 10);
if (Number.parseInt($("#profile_field_type").val(), 10) === field_types.EXTERNAL_ACCOUNT.id) {
if (profile_field_type === field_types.EXTERNAL_ACCOUNT.id) {
$field_elem.show();
const $profile_field_external_account_type = $(
"#profile_field_external_accounts_type",
@@ -230,6 +240,13 @@ function set_up_create_field_form() {
$field_url_pattern_elem.hide();
$field_elem.hide();
}
// Not showing "display in profile summary" option for long text/user profile field.
if (is_valid_to_display_in_summary(profile_field_type)) {
$("#profile_field_display_in_profile_summary").closest(".input-group").show();
} else {
$("#profile_field_display_in_profile_summary").closest(".input-group").hide();
}
}
function read_field_data_from_form(field_type_id, $profile_field_form, old_field_data) {
@@ -261,6 +278,9 @@ function open_custom_profile_field_form_modal() {
hint: $("#profile_field_hint").val(),
field_type,
field_data: JSON.stringify(field_data),
display_in_profile_summary: $("#profile_field_display_in_profile_summary").is(
":checked",
),
};
const url = "/json/realm/profile_fields";
const opts = {
@@ -275,6 +295,22 @@ function open_custom_profile_field_form_modal() {
set_up_select_field();
set_up_external_account_field();
clear_form_data();
// If we already have 2 custom profile fields configured to be
// displayed in the user profile summary, disable the input to
// change it.
$("#add-new-custom-profile-field-form #profile_field_display_in_profile_summary").prop(
"disabled",
display_in_profile_summary_fields_limit_reached,
);
$("#add-new-custom-profile-field-form .profile_field_display_label").toggleClass(
"disabled_label",
display_in_profile_summary_fields_limit_reached,
);
$("#add-new-custom-profile-field-form .checkbox").toggleClass(
"display_in_profile_summary_tooltip",
display_in_profile_summary_fields_limit_reached,
);
}
dialog_widget.launch({
@@ -409,8 +445,10 @@ function open_edit_form_modal(e) {
name: field.name,
hint: field.hint,
choices,
display_in_profile_summary: field.display_in_profile_summary === true,
is_select_field: field.type === field_types.SELECT.id,
is_external_account_field: field.type === field_types.EXTERNAL_ACCOUNT.id,
valid_to_display_in_summary: is_valid_to_display_in_summary(field.type),
},
realm_default_external_accounts: page_params.realm_default_external_accounts,
});
@@ -418,6 +456,17 @@ function open_edit_form_modal(e) {
function set_initial_values_of_profile_field() {
const $profile_field_form = $("#edit-custom-profile-field-form-" + field_id);
// If its passes or equals the max limit we are disabling option for display custom profile field
// in user profile summary and adding tooptip except already checked field.
if (display_in_profile_summary_fields_limit_reached && !field.display_in_profile_summary) {
$profile_field_form
.find("input[name=display_in_profile_summary]")
.prop("disabled", true);
$profile_field_form
.find(".checkbox")
.addClass("display_in_profile_summary_tooltip disabled_label");
}
if (Number.parseInt(field.type, 10) === field_types.SELECT.id) {
set_up_select_field_edit_form($profile_field_form, field_data);
}
@@ -450,6 +499,9 @@ function open_edit_form_modal(e) {
data.name = $profile_field_form.find("input[name=name]").val();
data.hint = $profile_field_form.find("input[name=hint]").val();
data.display_in_profile_summary = $profile_field_form
.find("input[name=display_in_profile_summary]")
.is(":checked");
const new_field_data = read_field_data_from_form(
Number.parseInt(field.type, 10),
@@ -493,12 +545,52 @@ function open_edit_form_modal(e) {
form_id: edit_custom_profile_field_form_id,
html_heading: $t_html({defaultMessage: "Edit custom profile field"}),
html_body,
id: "edit-custom-profile-field-form-modal",
on_click: submit_form,
post_render: set_initial_values_of_profile_field,
loading_spinner: true,
});
}
// If passes or equals the max limit, we are disabling option for
// display custom profile field in user profile summary and adding tooltip.
function update_profile_fields_checkboxes() {
// Disabling only uncheck checkboxes in table, so user should able uncheck checked checkboxes.
$("#admin_profile_fields_table .display_in_profile_summary_checkbox_false").prop(
"disabled",
display_in_profile_summary_fields_limit_reached,
);
$("#admin_profile_fields_table .display_in_profile_summary_false").toggleClass(
"display_in_profile_summary_tooltip",
display_in_profile_summary_fields_limit_reached,
);
}
function toggle_display_in_profile_summary_profile_field(e) {
const field_id = Number.parseInt($(e.currentTarget).attr("data-profile-field-id"), 10);
const field = get_profile_field(field_id);
let field_data;
if (field.field_data) {
field_data = field.field_data;
}
const data = {
name: field.name,
hint: field.hint,
field_data,
display_in_profile_summary: !field.display_in_profile_summary,
};
const $profile_field_status = $("#admin-profile-field-status").expectOne();
settings_ui.do_settings_change(
channel.patch,
"/json/realm/profile_fields/" + field_id,
data,
$profile_field_status,
);
}
export function reset() {
meta.loaded = false;
}
@@ -533,6 +625,7 @@ export function do_populate_profile_fields(profile_fields_data) {
$profile_fields_table.find("tr.profile-field-form").remove(); // Clear all rows.
order = [];
let display_in_profile_summary_fields_count = 0;
for (const profile_field of profile_fields_data) {
order.push(profile_field.id);
let field_data = {};
@@ -544,6 +637,7 @@ export function do_populate_profile_fields(profile_fields_data) {
choices = parse_field_choices_from_field_data(field_data);
}
const display_in_profile_summary = profile_field.display_in_profile_summary === true;
$profile_fields_table.append(
render_admin_profile_field_list({
profile_field: {
@@ -555,13 +649,23 @@ export function do_populate_profile_fields(profile_fields_data) {
is_select_field: profile_field.type === field_types.SELECT.id,
is_external_account_field:
profile_field.type === field_types.EXTERNAL_ACCOUNT.id,
display_in_profile_summary,
valid_to_display_in_summary: is_valid_to_display_in_summary(profile_field.type),
},
can_modify: page_params.is_admin,
realm_default_external_accounts: page_params.realm_default_external_accounts,
}),
);
// Keeping counts of all display_in_profile_summary profile fields, to keep track.
if (display_in_profile_summary) {
display_in_profile_summary_fields_count += 1;
}
}
// Update whether we're at the limit for display_in_profile_summary.
display_in_profile_summary_fields_limit_reached = display_in_profile_summary_fields_count >= 2;
if (page_params.is_admin) {
const field_list = $("#admin_profile_fields_table")[0];
Sortable.create(field_list, {
@@ -571,6 +675,7 @@ export function do_populate_profile_fields(profile_fields_data) {
});
}
update_profile_fields_checkboxes();
update_profile_fields_table_element();
loading.destroy_indicator($("#admin_page_profile_fields_loading_indicator"));
}
@@ -647,4 +752,9 @@ export function build_page() {
$("#admin_profile_fields_table").on("click", ".delete", delete_profile_field);
$("#add-custom-profile-field-btn").on("click", open_custom_profile_field_form_modal);
$("#admin_profile_fields_table").on("click", ".open-edit-form-modal", open_edit_form_modal);
$("#admin_profile_fields_table").on(
"click",
".display_in_profile_summary",
toggle_display_in_profile_summary_profile_field,
);
}