mirror of https://github.com/zulip/zulip.git
806 lines
30 KiB
TypeScript
806 lines
30 KiB
TypeScript
import $ from "jquery";
|
|
import assert from "minimalistic-assert";
|
|
import SortableJS from "sortablejs";
|
|
|
|
import render_confirm_delete_profile_field from "../templates/confirm_dialog/confirm_delete_profile_field.hbs";
|
|
import render_confirm_delete_profile_field_option from "../templates/confirm_dialog/confirm_delete_profile_field_option.hbs";
|
|
import render_add_new_custom_profile_field_form from "../templates/settings/add_new_custom_profile_field_form.hbs";
|
|
import render_admin_profile_field_list from "../templates/settings/admin_profile_field_list.hbs";
|
|
import render_edit_custom_profile_field_form from "../templates/settings/edit_custom_profile_field_form.hbs";
|
|
import render_settings_profile_field_choice from "../templates/settings/profile_field_choice.hbs";
|
|
|
|
import * as channel from "./channel";
|
|
import * as confirm_dialog from "./confirm_dialog";
|
|
import * as dialog_widget from "./dialog_widget";
|
|
import {$t, $t_html} from "./i18n";
|
|
import * as loading from "./loading";
|
|
import * as people from "./people";
|
|
import * as settings_components from "./settings_components";
|
|
import type {FieldData, SelectFieldData} from "./settings_components";
|
|
import * as settings_ui from "./settings_ui";
|
|
import type {CustomProfileField} from "./state_data";
|
|
import {current_user, realm} from "./state_data";
|
|
import type {HTMLSelectOneElement, UserExternalAccountData} from "./types";
|
|
import * as ui_report from "./ui_report";
|
|
|
|
type FieldChoice = {
|
|
value: string;
|
|
text: string;
|
|
order: string;
|
|
};
|
|
|
|
const meta: {
|
|
loaded: boolean;
|
|
} = {
|
|
loaded: false,
|
|
};
|
|
|
|
function display_success_status(): void {
|
|
const $spinner = $("#admin-profile-field-status").expectOne();
|
|
const success_msg_html = settings_ui.strings.success_html;
|
|
ui_report.success(success_msg_html, $spinner, 1000);
|
|
settings_ui.display_checkmark($spinner);
|
|
}
|
|
|
|
export function maybe_disable_widgets(): void {
|
|
if (current_user.is_admin) {
|
|
return;
|
|
}
|
|
|
|
$(".organization-box [data-name='profile-field-settings']")
|
|
.find("input, button, select")
|
|
.prop("disabled", true);
|
|
}
|
|
|
|
let display_in_profile_summary_fields_limit_reached = false;
|
|
let order: number[] = [];
|
|
|
|
export function field_type_id_to_string(type_id: number): string | undefined {
|
|
for (const field_type of Object.values(realm.custom_profile_field_types)) {
|
|
if (field_type.id === type_id) {
|
|
// Few necessary modifications in field-type-name for
|
|
// table-list view of custom fields UI in org settings
|
|
if (field_type.name === "Date picker") {
|
|
return "Date";
|
|
} else if (field_type.name === "Person picker") {
|
|
return "Person";
|
|
}
|
|
return field_type.name;
|
|
}
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
// Checking custom profile field type is valid for showing display on user card checkbox field.
|
|
function is_valid_to_display_in_summary(field_type: number): boolean {
|
|
const field_types = realm.custom_profile_field_types;
|
|
if (field_type === field_types.LONG_TEXT.id || field_type === field_types.USER.id) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function delete_profile_field(this: HTMLElement, e: JQuery.ClickEvent): void {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const profile_field_id = Number.parseInt($(this).attr("data-profile-field-id")!, 10);
|
|
const profile_field = get_profile_field(profile_field_id);
|
|
const active_user_ids = people.get_active_user_ids();
|
|
let users_using_deleting_profile_field = 0;
|
|
|
|
for (const user_id of active_user_ids) {
|
|
const user_profile_data = people.get_custom_profile_data(user_id, profile_field_id);
|
|
if (user_profile_data) {
|
|
users_using_deleting_profile_field += 1;
|
|
}
|
|
}
|
|
assert(profile_field !== undefined);
|
|
const html_body = render_confirm_delete_profile_field({
|
|
profile_field_name: profile_field.name,
|
|
count: users_using_deleting_profile_field,
|
|
});
|
|
|
|
function request_delete(): void {
|
|
const url = "/json/realm/profile_fields/" + profile_field_id;
|
|
const opts = {
|
|
success_continuation() {
|
|
display_success_status();
|
|
},
|
|
};
|
|
dialog_widget.submit_api_request(channel.del, url, {}, opts);
|
|
}
|
|
|
|
confirm_dialog.launch({
|
|
html_body,
|
|
html_heading: $t_html({defaultMessage: "Delete custom profile field?"}),
|
|
on_click: request_delete,
|
|
});
|
|
}
|
|
|
|
export function get_value_for_new_option(container: JQuery): number {
|
|
let value = 0;
|
|
for (const row of $(container).find(".choice-row")) {
|
|
value = Math.max(value, Number.parseInt($(row).attr("data-value")!, 10) + 1);
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function create_choice_row(container: JQuery): void {
|
|
const context = {
|
|
text: "",
|
|
value: get_value_for_new_option(container),
|
|
new_empty_choice_row: true,
|
|
};
|
|
const row_html = render_settings_profile_field_choice(context);
|
|
$(container).append($(row_html));
|
|
}
|
|
|
|
function clear_form_data(): void {
|
|
const field_types = realm.custom_profile_field_types;
|
|
|
|
$("#profile_field_name").val("").closest(".input-group").show();
|
|
$("#profile_field_hint").val("").closest(".input-group").show();
|
|
// Set default type "Short text" in field type dropdown
|
|
$("#profile_field_type").val(field_types.SHORT_TEXT.id);
|
|
// Clear data from select field form
|
|
$("#profile_field_choices").empty();
|
|
create_choice_row($("#profile_field_choices"));
|
|
$("#profile_field_choices_row").hide();
|
|
// Clear external account field form
|
|
$("#custom_field_url_pattern").val("");
|
|
$("#custom_external_account_url_pattern").hide();
|
|
$("#profile_field_external_accounts").hide();
|
|
$("#profile_field_external_accounts_type").val(
|
|
$<HTMLSelectOneElement>(
|
|
"select:not([multiple])#profile_field_external_accounts_type option:first-child",
|
|
).val()!,
|
|
);
|
|
}
|
|
|
|
function set_up_create_field_form(): void {
|
|
const field_types = realm.custom_profile_field_types;
|
|
// Hide error on field type change.
|
|
$("#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(
|
|
$<HTMLSelectOneElement>("select:not([multiple])#profile_field_type").val()!,
|
|
10,
|
|
);
|
|
|
|
$("#profile_field_name").val("").prop("disabled", false);
|
|
$("#profile_field_hint").val("").prop("disabled", false);
|
|
$field_url_pattern_elem.hide();
|
|
$field_elem.hide();
|
|
|
|
if (profile_field_type === field_types.EXTERNAL_ACCOUNT.id) {
|
|
$field_elem.show();
|
|
const profile_field_external_account_type = $<HTMLSelectOneElement>(
|
|
"select:not([multiple])#profile_field_external_accounts_type",
|
|
).val()!;
|
|
if (profile_field_external_account_type === "custom") {
|
|
$field_url_pattern_elem.show();
|
|
} else {
|
|
$field_url_pattern_elem.hide();
|
|
const external_account =
|
|
realm.realm_default_external_accounts[profile_field_external_account_type];
|
|
assert(external_account !== undefined);
|
|
const profile_field_name = external_account.name;
|
|
$("#profile_field_name").val(profile_field_name).prop("disabled", true);
|
|
$("#profile_field_hint").val("").prop("disabled", true);
|
|
}
|
|
} else if (profile_field_type === field_types.PRONOUNS.id) {
|
|
const default_label = $t({defaultMessage: "Pronouns"});
|
|
const default_hint = $t({
|
|
defaultMessage: "What pronouns should people use to refer to you?",
|
|
});
|
|
$("#profile_field_name").val(default_label);
|
|
$("#profile_field_hint").val(default_hint);
|
|
}
|
|
|
|
// Not showing "display on user card" 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();
|
|
const check_display_in_profile_summary_by_default =
|
|
profile_field_type === field_types.PRONOUNS.id &&
|
|
!display_in_profile_summary_fields_limit_reached;
|
|
$("#profile_field_display_in_profile_summary").prop(
|
|
"checked",
|
|
check_display_in_profile_summary_by_default,
|
|
);
|
|
} else {
|
|
$("#profile_field_display_in_profile_summary").closest(".input-group").hide();
|
|
$("#profile_field_display_in_profile_summary").prop("checked", false);
|
|
}
|
|
}
|
|
|
|
function open_custom_profile_field_form_modal(): void {
|
|
const html_body = render_add_new_custom_profile_field_form({
|
|
realm_default_external_accounts: realm.realm_default_external_accounts,
|
|
custom_profile_field_types: realm.custom_profile_field_types,
|
|
});
|
|
|
|
function create_profile_field(): void {
|
|
let field_data: FieldData | undefined = {};
|
|
const field_type = $<HTMLSelectOneElement>(
|
|
"select:not([multiple])#profile_field_type",
|
|
).val()!;
|
|
field_data = settings_components.read_field_data_from_form(
|
|
Number.parseInt(field_type, 10),
|
|
$(".new-profile-field-form"),
|
|
undefined,
|
|
);
|
|
const data = {
|
|
name: $("#profile_field_name").val(),
|
|
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",
|
|
),
|
|
required: $("#profile-field-required").is(":checked"),
|
|
};
|
|
const url = "/json/realm/profile_fields";
|
|
const opts = {
|
|
success_continuation() {
|
|
display_success_status();
|
|
},
|
|
};
|
|
dialog_widget.submit_api_request(channel.post, url, data, opts);
|
|
}
|
|
|
|
function set_up_form_fields(): void {
|
|
set_up_select_field();
|
|
set_up_external_account_field();
|
|
clear_form_data();
|
|
|
|
// If we already have 2 custom profile fields configured to be
|
|
// displayed on the user card, 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 .profile_field_display_label").toggleClass(
|
|
"display_in_profile_summary_tooltip",
|
|
display_in_profile_summary_fields_limit_reached,
|
|
);
|
|
}
|
|
|
|
dialog_widget.launch({
|
|
form_id: "add-new-custom-profile-field-form",
|
|
help_link: "/help/custom-profile-fields#add-a-custom-profile-field",
|
|
html_heading: $t_html({defaultMessage: "Add a new custom profile field"}),
|
|
html_body,
|
|
html_submit_button: $t_html({defaultMessage: "Add"}),
|
|
on_click: create_profile_field,
|
|
post_render: set_up_form_fields,
|
|
loading_spinner: true,
|
|
});
|
|
}
|
|
|
|
function add_choice_row(this: HTMLElement, e: JQuery.TriggeredEvent): void {
|
|
const $curr_choice_row = $(this).parent();
|
|
if ($curr_choice_row.next().hasClass("choice-row")) {
|
|
return;
|
|
}
|
|
// Display delete buttons for all existing choices before creating the new row,
|
|
// which will not have the delete button so that there is at least one option present.
|
|
$curr_choice_row.find("button.delete-choice").show();
|
|
assert(e.delegateTarget instanceof HTMLElement);
|
|
const choices_div = e.delegateTarget;
|
|
create_choice_row($(choices_div));
|
|
}
|
|
|
|
function delete_choice_row(row: HTMLElement): void {
|
|
const $row = $(row).parent();
|
|
$row.remove();
|
|
}
|
|
|
|
function delete_choice_row_for_edit(
|
|
row: HTMLElement,
|
|
$profile_field_form: JQuery,
|
|
field: CustomProfileField,
|
|
): void {
|
|
delete_choice_row(row);
|
|
disable_submit_btn_if_no_property_changed($profile_field_form, field);
|
|
}
|
|
|
|
function show_modal_for_deleting_options(
|
|
field: CustomProfileField,
|
|
deleted_values: Record<string, string>,
|
|
update_profile_field: () => void,
|
|
): void {
|
|
const active_user_ids = people.get_active_user_ids();
|
|
let users_count_with_deleted_option_selected = 0;
|
|
for (const user_id of active_user_ids) {
|
|
const field_value = people.get_custom_profile_data(user_id, field.id);
|
|
if (field_value && deleted_values[field_value.value]) {
|
|
users_count_with_deleted_option_selected += 1;
|
|
}
|
|
}
|
|
const deleted_options_count = Object.keys(deleted_values).length;
|
|
const html_body = render_confirm_delete_profile_field_option({
|
|
count: users_count_with_deleted_option_selected,
|
|
field_name: field.name,
|
|
deleted_options_count,
|
|
deleted_values,
|
|
});
|
|
|
|
confirm_dialog.launch({
|
|
html_heading: $t_html(
|
|
{
|
|
defaultMessage:
|
|
"{N, plural, one {Delete this option?} other {Delete these options?}}",
|
|
},
|
|
{N: deleted_options_count},
|
|
),
|
|
html_body,
|
|
on_click: update_profile_field,
|
|
});
|
|
}
|
|
|
|
function get_profile_field(id: number): CustomProfileField | undefined {
|
|
return realm.custom_profile_fields.find((field) => field.id === id);
|
|
}
|
|
|
|
export function parse_field_choices_from_field_data(field_data: SelectFieldData): FieldChoice[] {
|
|
const choices: FieldChoice[] = [];
|
|
for (const [value, choice] of Object.entries(field_data)) {
|
|
choices.push({
|
|
value,
|
|
text: choice.text,
|
|
order: choice.order,
|
|
});
|
|
}
|
|
choices.sort((a, b) => Number.parseInt(a.order, 10) - Number.parseInt(b.order, 10));
|
|
return choices;
|
|
}
|
|
|
|
function set_up_external_account_field_edit_form(
|
|
$profile_field_form: JQuery,
|
|
url_pattern_val: string,
|
|
): void {
|
|
if ($profile_field_form.find("select[name=external_acc_field_type]").val() === "custom") {
|
|
$profile_field_form.find("input[name=url_pattern]").val(url_pattern_val);
|
|
$profile_field_form.find(".custom_external_account_detail").show();
|
|
$profile_field_form.find("input[name=name]").prop("disabled", false);
|
|
$profile_field_form.find("input[name=hint]").prop("disabled", false);
|
|
} else {
|
|
$profile_field_form.find("input[name=name]").prop("disabled", true);
|
|
$profile_field_form.find("input[name=hint]").prop("disabled", true);
|
|
$profile_field_form.find(".custom_external_account_detail").hide();
|
|
}
|
|
}
|
|
|
|
function disable_submit_btn_if_no_property_changed(
|
|
$profile_field_form: JQuery,
|
|
field: CustomProfileField,
|
|
): void {
|
|
const data = settings_components.populate_data_for_custom_profile_field_request(
|
|
$profile_field_form,
|
|
field,
|
|
);
|
|
let save_changes_button_disabled = false;
|
|
if (Object.keys(data).length === 0 || data.field_data === "{}") {
|
|
save_changes_button_disabled = true;
|
|
}
|
|
$("#edit-custom-profile-field-form-modal .dialog_submit_button").prop(
|
|
"disabled",
|
|
save_changes_button_disabled,
|
|
);
|
|
}
|
|
|
|
function set_up_select_field_edit_form(
|
|
$profile_field_form: JQuery,
|
|
field: CustomProfileField,
|
|
): void {
|
|
// Re-render field choices in edit form to load initial select data
|
|
const $choice_list = $profile_field_form.find(".edit_profile_field_choices_container");
|
|
$choice_list.off();
|
|
$choice_list.empty();
|
|
const choices_data = parse_field_choices_from_field_data(
|
|
settings_components.select_field_data_schema.parse(JSON.parse(field.field_data)),
|
|
);
|
|
|
|
for (const choice of choices_data) {
|
|
$choice_list.append(
|
|
$(
|
|
render_settings_profile_field_choice({
|
|
text: choice.text,
|
|
value: choice.value,
|
|
}),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Add blank choice at last
|
|
create_choice_row($choice_list);
|
|
SortableJS.create($choice_list[0]!, {
|
|
onUpdate() {
|
|
// Do nothing on drag. We process the order on submission
|
|
},
|
|
filter: "input",
|
|
preventOnFilter: false,
|
|
onSort() {
|
|
disable_submit_btn_if_no_property_changed($profile_field_form, field);
|
|
},
|
|
});
|
|
}
|
|
|
|
function open_edit_form_modal(this: HTMLElement): void {
|
|
const field_types = realm.custom_profile_field_types;
|
|
|
|
const field_id = Number.parseInt($(this).attr("data-profile-field-id")!, 10);
|
|
const field = get_profile_field(field_id)!;
|
|
|
|
let field_data: unknown = {};
|
|
if (field.field_data) {
|
|
field_data = JSON.parse(field.field_data);
|
|
}
|
|
let choices: FieldChoice[] = [];
|
|
if (field.type === field_types.SELECT.id) {
|
|
const select_field_data = settings_components.select_field_data_schema.parse(field_data);
|
|
choices = parse_field_choices_from_field_data(select_field_data);
|
|
}
|
|
|
|
const html_body = render_edit_custom_profile_field_form({
|
|
profile_field_info: {
|
|
id: field.id,
|
|
name: field.name,
|
|
hint: field.hint,
|
|
choices,
|
|
display_in_profile_summary: field.display_in_profile_summary === true,
|
|
required: field.required,
|
|
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: realm.realm_default_external_accounts,
|
|
});
|
|
|
|
function set_initial_values_of_profile_field(): void {
|
|
const $profile_field_form = $("#edit-custom-profile-field-form-" + field_id);
|
|
|
|
// If it exceeds or equals the max limit, we are disabling option for display custom
|
|
// profile field on user card and adding tooltip, unless the field is already checked.
|
|
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(".edit_profile_field_display_label")
|
|
.addClass("display_in_profile_summary_tooltip disabled_label");
|
|
}
|
|
|
|
if (field.type === field_types.SELECT.id) {
|
|
set_up_select_field_edit_form($profile_field_form, field);
|
|
}
|
|
|
|
if (field.type === field_types.EXTERNAL_ACCOUNT.id) {
|
|
const external_account_data =
|
|
settings_components.external_account_field_schema.parse(field_data);
|
|
$profile_field_form
|
|
.find("select[name=external_acc_field_type]")
|
|
.val(external_account_data.subtype);
|
|
|
|
set_up_external_account_field_edit_form(
|
|
$profile_field_form,
|
|
external_account_data.url_pattern!,
|
|
);
|
|
}
|
|
|
|
// Set initial value in edit form
|
|
$profile_field_form.find("input[name=name]").val(field.name);
|
|
$profile_field_form.find("input[name=hint]").val(field.hint);
|
|
|
|
$profile_field_form
|
|
.find(".edit_profile_field_choices_container")
|
|
.on("input", ".choice-row input", add_choice_row);
|
|
$profile_field_form
|
|
.find(".edit_profile_field_choices_container")
|
|
.on("click", "button.delete-choice", function (this: HTMLElement) {
|
|
delete_choice_row_for_edit(this, $profile_field_form, field);
|
|
});
|
|
|
|
$("#edit-custom-profile-field-form-modal .dialog_submit_button").prop("disabled", true);
|
|
// Setup onInput event listeners to disable/enable submit button,
|
|
// select field add/update/remove operations are covered in onSort and
|
|
// row delete button is separately covered in delete_choice_row_for_edit.
|
|
$profile_field_form.on("input", () => {
|
|
disable_submit_btn_if_no_property_changed($profile_field_form, field);
|
|
});
|
|
}
|
|
|
|
function submit_form(): void {
|
|
const $profile_field_form = $("#edit-custom-profile-field-form-" + field_id);
|
|
|
|
const data = settings_components.populate_data_for_custom_profile_field_request(
|
|
$profile_field_form,
|
|
field,
|
|
);
|
|
|
|
function update_profile_field(): void {
|
|
const url = "/json/realm/profile_fields/" + field_id;
|
|
const opts = {
|
|
success_continuation() {
|
|
display_success_status();
|
|
},
|
|
};
|
|
dialog_widget.submit_api_request(channel.patch, url, data, opts);
|
|
}
|
|
|
|
if (field.type === field_types.SELECT.id && data.field_data !== undefined) {
|
|
const new_values = new Set(
|
|
Object.keys(
|
|
settings_components.select_field_data_schema.parse(
|
|
JSON.parse(data.field_data.toString()),
|
|
),
|
|
),
|
|
);
|
|
const deleted_values: Record<string, string> = {};
|
|
const select_field_data =
|
|
settings_components.select_field_data_schema.parse(field_data);
|
|
for (const [value, option] of Object.entries(select_field_data)) {
|
|
if (!new_values.has(value)) {
|
|
deleted_values[value] = option.text;
|
|
}
|
|
}
|
|
|
|
if (Object.keys(deleted_values).length !== 0) {
|
|
const edit_select_field_modal_callback: () => void = () => {
|
|
show_modal_for_deleting_options(field, deleted_values, update_profile_field);
|
|
};
|
|
dialog_widget.close(edit_select_field_modal_callback);
|
|
return;
|
|
}
|
|
}
|
|
|
|
update_profile_field();
|
|
}
|
|
|
|
const edit_custom_profile_field_form_id = "edit-custom-profile-field-form-" + field_id;
|
|
dialog_widget.launch({
|
|
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 exceeds or equals the max limit, we are disabling option for
|
|
// display custom profile field on user card and adding tooltip.
|
|
function update_profile_fields_checkboxes(): void {
|
|
// 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(this: HTMLInputElement): void {
|
|
const field_id = Number.parseInt($(this).attr("data-profile-field-id")!, 10);
|
|
|
|
const data = {
|
|
display_in_profile_summary: this.checked,
|
|
};
|
|
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,
|
|
);
|
|
}
|
|
|
|
function toggle_required(this: HTMLInputElement): void {
|
|
const field_id = Number.parseInt($(this).attr("data-profile-field-id")!, 10);
|
|
|
|
const data = {
|
|
required: this.checked,
|
|
};
|
|
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(): void {
|
|
meta.loaded = false;
|
|
}
|
|
|
|
function update_field_order(this: HTMLElement): void {
|
|
order = [];
|
|
$(".profile-field-row").each(function () {
|
|
order.push(Number.parseInt($(this).attr("data-profile-field-id")!, 10));
|
|
});
|
|
settings_ui.do_settings_change(
|
|
channel.patch,
|
|
"/json/realm/profile_fields",
|
|
{order: JSON.stringify(order)},
|
|
$("#admin-profile-field-status").expectOne(),
|
|
);
|
|
}
|
|
|
|
export function populate_profile_fields(profile_fields_data: CustomProfileField[]): void {
|
|
if (!meta.loaded) {
|
|
// If outside callers call us when we're not loaded, just
|
|
// exit and we'll draw the widgets again during set_up().
|
|
return;
|
|
}
|
|
do_populate_profile_fields(profile_fields_data);
|
|
}
|
|
|
|
export function do_populate_profile_fields(profile_fields_data: CustomProfileField[]): void {
|
|
const field_types = realm.custom_profile_field_types;
|
|
|
|
// We should only call this internally or from tests.
|
|
const $profile_fields_table = $("#admin_profile_fields_table").expectOne();
|
|
|
|
$profile_fields_table.find("tr.profile-field-row").remove(); // Clear all rows.
|
|
$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 choices: FieldChoice[] = [];
|
|
if (profile_field.field_data && profile_field.type === field_types.SELECT.id) {
|
|
const field_data = settings_components.select_field_data_schema.parse(
|
|
JSON.parse(profile_field.field_data),
|
|
);
|
|
choices = parse_field_choices_from_field_data(field_data);
|
|
}
|
|
const display_in_profile_summary = profile_field.display_in_profile_summary === true;
|
|
const required = profile_field.required;
|
|
$profile_fields_table.append(
|
|
$(
|
|
render_admin_profile_field_list({
|
|
profile_field: {
|
|
id: profile_field.id,
|
|
name: profile_field.name,
|
|
hint: profile_field.hint,
|
|
type: field_type_id_to_string(profile_field.type),
|
|
choices,
|
|
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,
|
|
),
|
|
required,
|
|
},
|
|
can_modify: current_user.is_admin,
|
|
realm_default_external_accounts: realm.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 (current_user.is_admin) {
|
|
const field_list = $("#admin_profile_fields_table")[0]!;
|
|
SortableJS.create(field_list, {
|
|
onUpdate: update_field_order,
|
|
filter: "input",
|
|
preventOnFilter: false,
|
|
});
|
|
}
|
|
|
|
update_profile_fields_checkboxes();
|
|
loading.destroy_indicator($("#admin_page_profile_fields_loading_indicator"));
|
|
}
|
|
|
|
function set_up_select_field(): void {
|
|
const field_types = realm.custom_profile_field_types;
|
|
|
|
create_choice_row($("#profile_field_choices"));
|
|
|
|
if (current_user.is_admin) {
|
|
const choice_list = $("#profile_field_choices")[0]!;
|
|
SortableJS.create(choice_list, {
|
|
onUpdate() {
|
|
// Do nothing on drag. We process the order on submission
|
|
},
|
|
filter: "input",
|
|
preventOnFilter: false,
|
|
});
|
|
}
|
|
|
|
const field_type = $<HTMLSelectOneElement>("select:not([multiple])#profile_field_type").val()!;
|
|
if (Number.parseInt(field_type, 10) !== field_types.SELECT.id) {
|
|
// If 'Select' type is already selected, show choice row.
|
|
$("#profile_field_choices_row").hide();
|
|
}
|
|
|
|
$<HTMLSelectOneElement>("select:not([multiple])#profile_field_type").on(
|
|
"change",
|
|
function (this: HTMLSelectOneElement) {
|
|
$("#dialog_error").hide();
|
|
const selected_field_id = Number.parseInt($<HTMLSelectOneElement>(this).val()!, 10);
|
|
if (selected_field_id === field_types.SELECT.id) {
|
|
$("#profile_field_choices_row").show();
|
|
} else {
|
|
$("#profile_field_choices_row").hide();
|
|
}
|
|
},
|
|
);
|
|
|
|
$("#profile_field_choices").on("input", ".choice-row input", add_choice_row);
|
|
$("#profile_field_choices").on("click", "button.delete-choice", function (this: HTMLElement) {
|
|
delete_choice_row(this);
|
|
});
|
|
}
|
|
|
|
function set_up_external_account_field(): void {
|
|
$("#profile_field_type").on("change", () => {
|
|
set_up_create_field_form();
|
|
});
|
|
|
|
$("#profile_field_external_accounts_type").on("change", () => {
|
|
set_up_create_field_form();
|
|
});
|
|
}
|
|
|
|
export function get_external_account_link(field: UserExternalAccountData): string {
|
|
assert(field.field_data !== undefined);
|
|
const field_subtype = field.field_data.subtype;
|
|
let field_url_pattern: string;
|
|
|
|
if (field_subtype === "custom") {
|
|
assert(field.field_data.url_pattern !== undefined);
|
|
field_url_pattern = field.field_data.url_pattern;
|
|
} else {
|
|
const external_account = realm.realm_default_external_accounts[field_subtype];
|
|
assert(external_account !== undefined);
|
|
field_url_pattern = external_account.url_pattern;
|
|
}
|
|
return field_url_pattern.replace("%(username)s", () => field.value);
|
|
}
|
|
|
|
export function set_up(): void {
|
|
build_page();
|
|
maybe_disable_widgets();
|
|
}
|
|
|
|
export function build_page(): void {
|
|
// create loading indicators
|
|
loading.make_indicator($("#admin_page_profile_fields_loading_indicator"));
|
|
// Populate profile_fields table
|
|
do_populate_profile_fields(realm.custom_profile_fields);
|
|
meta.loaded = true;
|
|
|
|
$("#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",
|
|
"input.display_in_profile_summary",
|
|
toggle_display_in_profile_summary_profile_field,
|
|
);
|
|
$("#admin_profile_fields_table").on("click", ".required-field-toggle", toggle_required);
|
|
}
|