Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

popovers: Extract user_profile_modal functions in separate module. 

We had a lot of functions and click handlers that were only
involved with user profile modal and were not related to
popovers logic in any way. So we extract these functions
into a separate module `user_profile.js`.
This commit is contained in:
m-e-l-u-h-a-n 2021-06-24 00:18:49 +05:30 committed by Tim Abbott
parent 0e65225d06
commit 777f784e07
5 changed files with 211 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/click_handlers.js
View File

@ -41,6 +41,7 @@ import * as stream_popover from "./stream_popover";
import * as topic_list from "./topic_list";
import * as ui_util from "./ui_util";
import * as unread_ops from "./unread_ops";
import * as user_profile from "./user_profile";
import * as util from "./util";
export function initialize() {
@ -582,6 +583,7 @@ export function initialize() {
}
popovers.register_click_handlers();
user_profile.register_click_handlers();
emoji_picker.register_click_handlers();
stream_popover.register_click_handlers();
notifications.register_click_handlers();

188
static/js/popovers.js
View File

@ -1,5 +1,5 @@
import ClipboardJS from "clipboard";
import {add, formatISO, parseISO, set} from "date-fns";
import {add, formatISO, set} from "date-fns";
import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
import $ from "jquery";
import {hideAll} from "tippy.js";
@ -10,15 +10,11 @@ import render_playground_links_popover_content from "../templates/playground_lin
import render_remind_me_popover_content from "../templates/remind_me_popover_content.hbs";
import render_user_group_info_popover from "../templates/user_group_info_popover.hbs";
import render_user_group_info_popover_content from "../templates/user_group_info_popover_content.hbs";
import render_user_group_list_item from "../templates/user_group_list_item.hbs";
import render_user_info_popover_content from "../templates/user_info_popover_content.hbs";
import render_user_info_popover_title from "../templates/user_info_popover_title.hbs";
import render_user_profile_modal from "../templates/user_profile_modal.hbs";
import render_user_stream_list_item from "../templates/user_stream_list_item.hbs";
import * as blueslip from "./blueslip";
import * as buddy_data from "./buddy_data";
import * as components from "./components";
import * as compose_actions from "./compose_actions";
import * as compose_state from "./compose_state";
import * as compose_ui from "./compose_ui";
@ -28,7 +24,6 @@ import * as feature_flags from "./feature_flags";
import * as giphy from "./giphy";
import * as hash_util from "./hash_util";
import {$t} from "./i18n";
import * as ListWidget from "./list_widget";
import * as message_edit from "./message_edit";
import * as message_edit_history from "./message_edit_history";
import * as message_lists from "./message_lists";
@ -45,10 +40,7 @@ import * as realm_playground from "./realm_playground";
import * as reminder from "./reminder";
import * as resize from "./resize";
import * as rows from "./rows";
import * as settings_account from "./settings_account";
import * as settings_data from "./settings_data";
import * as settings_profile_fields from "./settings_profile_fields";
import * as stream_data from "./stream_data";
import * as stream_popover from "./stream_popover";
import * as user_groups from "./user_groups";
import * as user_status from "./user_status";
@ -80,7 +72,7 @@ export function clipboard_enable(arg) {
return new ClipboardJS(arg);
}
function elem_to_user_id(elem) {
export function elem_to_user_id(elem) {
return Number.parseInt(elem.attr("data-user-id"), 10);
}
@ -169,53 +161,6 @@ function calculate_info_popover_placement(size, elt) {
return undefined;
}
function get_custom_profile_field_data(user, field, field_types, dateFormat) {
const field_value = people.get_custom_profile_data(user.user_id, field.id);
const field_type = field.type;
const profile_field = {};
if (!field_value) {
return profile_field;
}
if (!field_value.value) {
return profile_field;
}
profile_field.name = field.name;
profile_field.is_user_field = false;
profile_field.is_link = field_type === field_types.URL.id;
profile_field.is_external_account = field_type === field_types.EXTERNAL_ACCOUNT.id;
profile_field.type = field_type;
switch (field_type) {
case field_types.DATE.id:
profile_field.value = dateFormat.format(parseISO(field_value.value));
break;
case field_types.USER.id:
profile_field.id = field.id;
profile_field.is_user_field = true;
profile_field.value = field_value.value;
break;
case field_types.SELECT.id: {
const field_choice_dict = JSON.parse(field.field_data);
profile_field.value = field_choice_dict[field_value.value].text;
break;
}
case field_types.SHORT_TEXT.id:
case field_types.LONG_TEXT.id:
profile_field.value = field_value.value;
profile_field.rendered_value = field_value.rendered_value;
break;
case field_types.EXTERNAL_ACCOUNT.id:
profile_field.value = field_value.value;
profile_field.field_data = JSON.parse(field.field_data);
profile_field.link = settings_profile_fields.get_external_account_link(profile_field);
break;
default:
profile_field.value = field_value.value;
}
return profile_field;
}
function render_user_info_popover(
user,
popover_element,
@ -340,120 +285,6 @@ function show_user_info_popover_for_message(element, user, message) {
}
}
export function hide_user_profile() {
overlays.close_modal("#user-profile-modal");
}
function compare_by_name(a, b) {
return util.strcmp(a.name, b.name);
}
function format_user_stream_list_item(stream) {
return render_user_stream_list_item({
name: stream.name,
stream_id: stream.stream_id,
stream_color: stream.color,
invite_only: stream.invite_only,
is_web_public: stream.is_web_public,
stream_edit_url: hash_util.stream_edit_uri(stream),
});
}
function format_user_group_list_item(group) {
return render_user_group_list_item({
group_id: group.id,
name: group.name,
});
}
function render_user_stream_list(streams, user) {
streams.sort(compare_by_name);
const container = $("#user-profile-modal .user-stream-list");
container.empty();
ListWidget.create(container, streams, {
name: `user-${user.user_id}-stream-list`,
modifier(item) {
return format_user_stream_list_item(item);
},
simplebar_container: $("#user-profile-modal .modal-body"),
});
}
function render_user_group_list(groups, user) {
groups.sort(compare_by_name);
const container = $("#user-profile-modal .user-group-list");
container.empty();
ListWidget.create(container, groups, {
name: `user-${user.user_id}-group-list`,
modifier(item) {
return format_user_group_list_item(item);
},
simplebar_container: $("#user-profile-modal .modal-body"),
});
}
export function show_user_profile(user) {
hide_all();
const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
const field_types = page_params.custom_profile_field_types;
const profile_data = page_params.custom_profile_fields
.map((f) => get_custom_profile_field_data(user, f, field_types, dateFormat))
.filter((f) => f.name !== undefined);
const user_streams = stream_data.get_subscribed_streams_for_user(user.user_id);
const groups_of_user = user_groups.get_user_groups_of_user(user.user_id);
const args = {
full_name: user.full_name,
email: people.get_visible_email(user),
profile_data,
user_avatar: "avatar/" + user.email + "/medium",
is_me: people.is_current_user(user.email),
date_joined: dateFormat.format(parseISO(user.date_joined)),
last_seen: buddy_data.user_last_seen_time_status(user.user_id),
show_email: settings_data.show_email(),
user_time: people.get_user_time(user.user_id),
user_type: people.get_user_type(user.user_id),
user_is_guest: user.is_guest,
};
$("#user-profile-modal-holder").html(render_user_profile_modal(args));
$("#user-profile-modal").modal("show");
$(".tabcontent").hide();
$("#profile-tab").show(); // Show general profile details by default.
const opts = {
selected: 0,
child_wants_focus: true,
values: [
{label: $t({defaultMessage: "Profile"}), key: "profile-tab"},
{label: $t({defaultMessage: "Streams"}), key: "streams-tab"},
{label: $t({defaultMessage: "User groups"}), key: "groups-tab"},
],
callback(name, key) {
$(".tabcontent").hide();
$("#" + key).show();
switch (key) {
case "groups-tab":
render_user_group_list(groups_of_user, user);
break;
case "streams-tab":
render_user_stream_list(user_streams, user);
break;
}
},
};
const elem = components.toggle(opts).get();
elem.addClass("large allow-overflow");
$("#tab-toggle").append(elem);
settings_account.initialize_custom_user_type_fields(
"#user-profile-modal #content",
user.user_id,
false,
false,
);
}
export function show_user_info_popover(element, user) {
const last_popover_elem = current_user_info_popover_elem;
hide_all();
@ -1060,14 +891,6 @@ export function register_click_handlers() {
e.preventDefault();
});
$("body").on("click", ".info_popover_actions .view_full_user_profile", (e) => {
const user_id = elem_to_user_id($(e.target).parents("ul"));
const user = people.get_by_user_id(user_id);
show_user_profile(user);
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".info_popover_actions .clear_status", (e) => {
e.preventDefault();
const me = elem_to_user_id($(e.target).parents("ul"));
@ -1091,13 +914,6 @@ export function register_click_handlers() {
/* These click handlers are implemented as just deep links to the
* relevant part of the Zulip UI, so we don't want preventDefault,
* but we do want to close the modal when you click them. */
$("body").on("click", "#user-profile-modal #name #edit-button", () => {
hide_user_profile();
});
$("body").on("click", "#user-profile-modal .stream_list_item", () => {
hide_user_profile();
});
$("body").on("click", ".set_away_status", (e) => {
hide_all();

4
static/js/settings_account.js
View File

@ -17,13 +17,13 @@ import * as overlays from "./overlays";
import {page_params} from "./page_params";
import * as people from "./people";
import * as pill_typeahead from "./pill_typeahead";
import * as popovers from "./popovers";
import * as settings_bots from "./settings_bots";
import * as settings_data from "./settings_data";
import * as settings_ui from "./settings_ui";
import * as setup from "./setup";
import * as ui_report from "./ui_report";
import * as user_pill from "./user_pill";
import * as user_profile from "./user_profile";
let password_quality; // Loaded asynchronously
@ -644,7 +644,7 @@ export function set_up() {
overlays.close_overlay("settings");
const user = people.get_by_user_id(people.my_current_user_id());
setTimeout(() => {
popovers.show_user_profile(user);
user_profile.show_user_profile(user);
}, 100);
// If user opened the "preview profile" modal from user

204
static/js/user_profile.js Normal file
View File

@ -0,0 +1,204 @@
import {parseISO} from "date-fns";
import $ from "jquery";
import render_user_group_list_item from "../templates/user_group_list_item.hbs";
import render_user_profile_modal from "../templates/user_profile_modal.hbs";
import render_user_stream_list_item from "../templates/user_stream_list_item.hbs";
import * as buddy_data from "./buddy_data";
import * as components from "./components";
import * as hash_util from "./hash_util";
import {$t} from "./i18n";
import * as ListWidget from "./list_widget";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
import * as people from "./people";
import * as popovers from "./popovers";
import * as settings_account from "./settings_account";
import * as settings_data from "./settings_data";
import * as settings_profile_fields from "./settings_profile_fields";
import * as stream_data from "./stream_data";
import * as user_groups from "./user_groups";
import * as util from "./util";
function compare_by_name(a, b) {
return util.strcmp(a.name, b.name);
}
function format_user_stream_list_item(stream) {
return render_user_stream_list_item({
name: stream.name,
stream_id: stream.stream_id,
stream_color: stream.color,
invite_only: stream.invite_only,
is_web_public: stream.is_web_public,
stream_edit_url: hash_util.stream_edit_uri(stream),
});
}
function format_user_group_list_item(group) {
return render_user_group_list_item({
group_id: group.id,
name: group.name,
});
}
function render_user_stream_list(streams, user) {
streams.sort(compare_by_name);
const container = $("#user-profile-modal .user-stream-list");
container.empty();
ListWidget.create(container, streams, {
name: `user-${user.user_id}-stream-list`,
modifier(item) {
return format_user_stream_list_item(item);
},
simplebar_container: $("#user-profile-modal .modal-body"),
});
}
function render_user_group_list(groups, user) {
groups.sort(compare_by_name);
const container = $("#user-profile-modal .user-group-list");
container.empty();
ListWidget.create(container, groups, {
name: `user-${user.user_id}-group-list`,
modifier(item) {
return format_user_group_list_item(item);
},
simplebar_container: $("#user-profile-modal .modal-body"),
});
}
function get_custom_profile_field_data(user, field, field_types, dateFormat) {
const field_value = people.get_custom_profile_data(user.user_id, field.id);
const field_type = field.type;
const profile_field = {};
if (!field_value) {
return profile_field;
}
if (!field_value.value) {
return profile_field;
}
profile_field.name = field.name;
profile_field.is_user_field = false;
profile_field.is_link = field_type === field_types.URL.id;
profile_field.is_external_account = field_type === field_types.EXTERNAL_ACCOUNT.id;
profile_field.type = field_type;
switch (field_type) {
case field_types.DATE.id:
profile_field.value = dateFormat.format(parseISO(field_value.value));
break;
case field_types.USER.id:
profile_field.id = field.id;
profile_field.is_user_field = true;
profile_field.value = field_value.value;
break;
case field_types.SELECT.id: {
const field_choice_dict = JSON.parse(field.field_data);
profile_field.value = field_choice_dict[field_value.value].text;
break;
}
case field_types.SHORT_TEXT.id:
case field_types.LONG_TEXT.id:
profile_field.value = field_value.value;
profile_field.rendered_value = field_value.rendered_value;
break;
case field_types.EXTERNAL_ACCOUNT.id:
profile_field.value = field_value.value;
profile_field.field_data = JSON.parse(field.field_data);
profile_field.link = settings_profile_fields.get_external_account_link(profile_field);
break;
default:
profile_field.value = field_value.value;
}
return profile_field;
}
export function hide_user_profile() {
overlays.close_modal("#user-profile-modal");
}
export function show_user_profile(user) {
popovers.hide_all();
const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
const field_types = page_params.custom_profile_field_types;
const profile_data = page_params.custom_profile_fields
.map((f) => get_custom_profile_field_data(user, f, field_types, dateFormat))
.filter((f) => f.name !== undefined);
const user_streams = stream_data.get_subscribed_streams_for_user(user.user_id);
const groups_of_user = user_groups.get_user_groups_of_user(user.user_id);
const args = {
full_name: user.full_name,
email: people.get_visible_email(user),
profile_data,
user_avatar: "avatar/" + user.email + "/medium",
is_me: people.is_current_user(user.email),
date_joined: dateFormat.format(parseISO(user.date_joined)),
last_seen: buddy_data.user_last_seen_time_status(user.user_id),
show_email: settings_data.show_email(),
user_time: people.get_user_time(user.user_id),
user_type: people.get_user_type(user.user_id),
user_is_guest: user.is_guest,
};
$("#user-profile-modal-holder").html(render_user_profile_modal(args));
$("#user-profile-modal").modal("show");
$(".tabcontent").hide();
$("#profile-tab").show(); // Show general profile details by default.
const opts = {
selected: 0,
child_wants_focus: true,
values: [
{label: $t({defaultMessage: "Profile"}), key: "profile-tab"},
{label: $t({defaultMessage: "Streams"}), key: "streams-tab"},
{label: $t({defaultMessage: "User groups"}), key: "groups-tab"},
],
callback(name, key) {
$(".tabcontent").hide();
$("#" + key).show();
switch (key) {
case "groups-tab":
render_user_group_list(groups_of_user, user);
break;
case "streams-tab":
render_user_stream_list(user_streams, user);
break;
}
},
};
const elem = components.toggle(opts).get();
elem.addClass("large allow-overflow");
$("#tab-toggle").append(elem);
settings_account.initialize_custom_user_type_fields(
"#user-profile-modal #content",
user.user_id,
false,
false,
);
}
export function register_click_handlers() {
$("body").on("click", ".info_popover_actions .view_full_user_profile", (e) => {
const user_id = popovers.elem_to_user_id($(e.target).parents("ul"));
const user = people.get_by_user_id(user_id);
show_user_profile(user);
e.stopPropagation();
e.preventDefault();
});
/* These click handlers are implemented as just deep links to the
* relevant part of the Zulip UI, so we don't want preventDefault,
* but we do want to close the modal when you click them. */
$("body").on("click", "#user-profile-modal #name #edit-button", () => {
hide_user_profile();
});
$("body").on("click", "#user-profile-modal .stream_list_item", () => {
hide_user_profile();
});
}

1
tools/test-js-with-node
View File

@ -169,6 +169,7 @@ EXEMPT_FILES = {
"static/js/unread_ops.js",
"static/js/unread_ui.js",
"static/js/upload_widget.js",
"static/js/user_profile.js",
"static/js/user_status_ui.js",
"static/js/webpack_public_path.js",
"static/js/zcommand.js",