const render_settings_deactivation_stream_modal = require("../templates/settings/deactivation_stream_modal.hbs"); const render_stream_member_list_entry = require('../templates/stream_member_list_entry.hbs'); const render_subscription_settings = require('../templates/subscription_settings.hbs'); const render_subscription_stream_privacy_modal = require("../templates/subscription_stream_privacy_modal.hbs"); const settings_data = require("./settings_data"); function setup_subscriptions_stream_hash(sub) { const hash = hash_util.stream_edit_uri(sub); hashchange.update_browser_history(hash); } function compare_by_email(a, b) { if (a.delivery_email && b.delivery_email) { return a.delivery_email.localeCompare(b.delivery_email); } return a.email.localeCompare(b.email); } function compare_by_name(a, b) { return a.full_name.localeCompare(b.full_name); } exports.setup_subscriptions_tab_hash = function (tab_key_value) { if (tab_key_value === "all-streams") { hashchange.update_browser_history('#streams/all'); } else if (tab_key_value === "subscribed") { hashchange.update_browser_history('#streams/subscribed'); } else { blueslip.debug("Unknown tab_key_value: " + tab_key_value); } }; exports.settings_for_sub = function (sub) { return $("#subscription_overlay .subscription_settings[data-stream-id='" + sub.stream_id + "']"); }; exports.is_sub_settings_active = function (sub) { // This function return whether the provided given sub object is // currently being viewed/edited in the stream edit UI. This is // used to determine whether we need to rerender the stream edit // UI when a sub object is modified by an event. const active_stream = subs.active_stream(); if (active_stream !== undefined && active_stream.id === sub.stream_id) { return true; } return false; }; exports.get_users_from_subscribers = function (subscribers) { return subscribers.map(function (user_id) { return people.get_by_user_id(user_id); }); }; function clear_edit_panel() { $(".display-type #add_new_stream_title").hide(); $(".display-type #stream_settings_title, .right .settings").show(); $(".stream-row.active").removeClass("active"); } function get_stream_id(target) { if (target.constructor !== jQuery) { target = $(target); } const row = target.closest(".stream-row, .subscription_settings"); return parseInt(row.attr("data-stream-id"), 10); } function get_sub_for_target(target) { const stream_id = get_stream_id(target); if (!stream_id) { blueslip.error('Cannot find stream id for target'); return; } const sub = stream_data.get_sub_by_id(stream_id); if (!sub) { blueslip.error('get_sub_for_target() failed id lookup: ' + stream_id); return; } return sub; } exports.open_edit_panel_for_row = function (stream_row) { const sub = get_sub_for_target(stream_row); clear_edit_panel(); subs.show_subs_pane.settings(); $(stream_row).addClass("active"); setup_subscriptions_stream_hash(sub); exports.show_settings_for(stream_row); }; exports.open_edit_panel_empty = function () { const tab_key = subs.get_active_data().tab.attr("data-tab-key"); clear_edit_panel(); subs.show_subs_pane.nothing_selected(); exports.setup_subscriptions_tab_hash(tab_key); }; function format_member_list_elem(person) { return render_stream_member_list_entry({ name: person.full_name, user_id: person.user_id, email: settings_data.email_for_user_settings(person), displaying_for_admin: page_params.is_admin, show_email: settings_data.show_email(), }); } function get_subscriber_list(sub_row) { const stream_id_str = sub_row.data("stream-id"); return $('.subscription_settings[data-stream-id="' + stream_id_str + '"] .subscriber-list'); } exports.update_stream_name = function (sub, new_name) { const sub_settings = exports.settings_for_sub(sub); sub_settings.find(".email-address").text(sub.email_address); sub_settings.find(".stream-name-editable").text(new_name); }; exports.update_stream_description = function (sub) { const stream_settings = exports.settings_for_sub(sub); stream_settings.find('input.description').val(sub.description); stream_settings.find('.stream-description-editable').html(sub.rendered_description); }; exports.invite_user_to_stream = function (user_email, sub, success, failure) { // TODO: use stream_id when backend supports it const stream_name = sub.name; return channel.post({ url: "/json/users/me/subscriptions", data: {subscriptions: JSON.stringify([{name: stream_name}]), principals: JSON.stringify([user_email])}, success: success, error: failure, }); }; exports.remove_user_from_stream = function (user_email, sub, success, failure) { // TODO: use stream_id when backend supports it const stream_name = sub.name; return channel.del({ url: "/json/users/me/subscriptions", data: {subscriptions: JSON.stringify([stream_name]), principals: JSON.stringify([user_email])}, success: success, error: failure, }); }; exports.sort_but_pin_current_user_on_top = function (users) { if (users === undefined) { blueslip.error("Undefined users are passed to function sort_but_pin_current_user_on_top"); return; } const my_user = people.get_by_email(people.my_current_email()); let compare_function; if (settings_data.show_email()) { compare_function = compare_by_email; } else { compare_function = compare_by_name; } if (users.includes(my_user)) { users.splice(users.indexOf(my_user), 1); users.sort(compare_function); users.unshift(my_user); } else { users.sort(compare_function); } }; function show_subscription_settings(sub_row) { const stream_id = sub_row.data("stream-id"); const sub = stream_data.get_sub_by_id(stream_id); const sub_settings = exports.settings_for_sub(sub); const colorpicker = sub_settings.find('.colorpicker'); const color = stream_data.get_color(sub.name); stream_color.set_colorpicker_color(colorpicker, color); stream_ui_updates.update_add_subscriptions_elements(sub); if (!sub.render_subscribers) { return; } if (!sub.should_display_subscription_button) { stream_ui_updates.initialize_cant_subscribe_popover(sub); } // fetch subscriber list from memory. const list = get_subscriber_list(sub_settings); list.empty(); const users = exports.get_users_from_subscribers(sub.subscribers); exports.sort_but_pin_current_user_on_top(users); list_render.create(list, users, { name: "stream_subscribers/" + stream_id, modifier: function (item) { return format_member_list_elem(item); }, filter: { element: $("[data-stream-id='" + stream_id + "'] .search"), predicate: function (item, value) { const person = item; if (person) { if (person.email.toLocaleLowerCase().includes(value) && settings_data.show_email()) { return true; } return person.full_name.toLowerCase().includes(value); } }, }, }).init(); sub_settings.find('input[name="principal"]').typeahead({ source: () => stream_data.potential_subscribers(sub), items: 5, highlighter: function (item) { return typeahead_helper.render_person(item); }, matcher: function (item) { const query = $.trim(this.query.toLowerCase()); if (query === '' || query === item.email) { return false; } // Case-insensitive. return item.email.toLowerCase().includes(query) || item.full_name.toLowerCase().includes(query); }, sorter: function (matches) { const current_stream = compose_state.stream_name(); return typeahead_helper.sort_recipientbox_typeahead( this.query, matches, current_stream); }, updater: function (item) { return item.email; }, }); } exports.is_notification_setting = function (setting_label) { if (setting_label.includes("_notifications")) { return true; } else if (setting_label.includes("_notify")) { return true; } return false; }; const settings_labels = { is_muted: i18n.t("Mute stream"), desktop_notifications: i18n.t("Visual desktop notifications"), audible_notifications: i18n.t("Audible desktop notifications"), push_notifications: i18n.t("Mobile notifications"), email_notifications: i18n.t("Email notifications"), pin_to_top: i18n.t("Pin stream to top of left sidebar"), wildcard_mentions_notify: i18n.t("Notifications for @all/@everyone mentions"), }; const check_realm_setting = { push_notifications: !page_params.realm_push_notifications_enabled, }; exports.stream_settings = function (sub) { const settings = Object.keys(settings_labels).map((setting) => { const ret = { name: setting, label: settings_labels[setting], disabled_realm_setting: check_realm_setting[setting], is_disabled: check_realm_setting[setting], is_notification_setting: exports.is_notification_setting(setting), }; if (exports.is_notification_setting(setting)) { ret.is_checked = sub[setting + "_display"] && !check_realm_setting[setting]; ret.is_disabled = ret.is_disabled || sub.is_muted; return ret; } ret.is_checked = sub[setting] && !check_realm_setting[setting]; return ret; }); return settings; }; exports.show_settings_for = function (node) { const stream_id = get_stream_id(node); const sub = stream_data.get_sub_by_id(stream_id); stream_data.update_calculated_fields(sub); const html = render_subscription_settings({ sub: sub, settings: exports.stream_settings(sub), stream_post_policy_values: stream_data.stream_post_policy_values, }); ui.get_content_element($('.subscriptions .right .settings')).html(html); const sub_settings = exports.settings_for_sub(sub); $(".nothing-selected").hide(); sub_settings.addClass("show"); show_subscription_settings(sub_settings); }; function stream_is_muted_clicked(e) { const sub = get_sub_for_target(e.target); if (!sub) { blueslip.error('stream_is_muted_clicked() fails'); return; } const sub_settings = exports.settings_for_sub(sub); const notification_checkboxes = sub_settings.find(".sub_notification_setting"); subs.toggle_home(sub); if (!sub.is_muted) { sub_settings.find(".mute-note").addClass("hide-mute-note"); notification_checkboxes.removeClass("muted-sub"); notification_checkboxes.find("input[type='checkbox']").prop("disabled", false); } else { sub_settings.find(".mute-note").removeClass("hide-mute-note"); notification_checkboxes.addClass("muted-sub"); notification_checkboxes.find("input[type='checkbox']").attr("disabled", true); } } function stream_setting_clicked(e) { if (e.currentTarget.id === 'sub_is_muted_setting') { return; } const checkbox = $(e.currentTarget).find('.sub_setting_control'); const sub = get_sub_for_target(e.target); const setting = checkbox.attr('name'); if (!sub) { blueslip.error('undefined sub in stream_setting_clicked()'); return; } if (checkbox.prop('disabled')) { return false; } if (exports.is_notification_setting(setting) && sub[setting] === null) { if (setting === 'wildcard_mentions_notify') { sub[setting] = page_params[setting]; } else { sub[setting] = page_params["enable_stream_" + setting]; } } exports.set_stream_property(sub, setting, !sub[setting]); // A hack. Don't change the state of the checkbox if we // clicked on the checkbox itself. if (checkbox[0] !== e.target) { checkbox.prop("checked", !checkbox.prop("checked")); } } exports.bulk_set_stream_property = function (sub_data) { return channel.post({ url: '/json/users/me/subscriptions/properties', data: {subscription_data: JSON.stringify(sub_data)}, timeout: 10 * 1000, }); }; exports.set_stream_property = function (sub, property, value) { const sub_data = {stream_id: sub.stream_id, property: property, value: value}; exports.bulk_set_stream_property([sub_data]); }; function change_stream_privacy(e) { e.stopPropagation(); const stream_id = $(e.target).data("stream-id"); const sub = stream_data.get_sub_by_id(stream_id); const privacy_setting = $('#stream_privacy_modal input[name=privacy]:checked').val(); const stream_post_policy = parseInt($('#stream_privacy_modal input[name=stream-post-policy]:checked').val(), 10); let invite_only; let history_public_to_subscribers; if (privacy_setting === 'invite-only') { invite_only = true; history_public_to_subscribers = false; } else if (privacy_setting === 'invite-only-public-history') { invite_only = true; history_public_to_subscribers = true; } else { invite_only = false; history_public_to_subscribers = true; } $(".stream_change_property_info").hide(); const data = { stream_name: sub.name, // toggle the privacy setting is_private: JSON.stringify(invite_only), stream_post_policy: JSON.stringify(stream_post_policy), history_public_to_subscribers: JSON.stringify(history_public_to_subscribers), }; channel.patch({ url: "/json/streams/" + stream_id, data: data, success: function () { $("#stream_privacy_modal").remove(); // The rest will be done by update stream event we will get. }, error: function () { $("#change-stream-privacy-button").text(i18n.t("Try again")); }, }); } exports.change_stream_name = function (e) { e.preventDefault(); const sub_settings = $(e.target).closest('.subscription_settings'); const stream_id = get_stream_id(e.target); const new_name_box = sub_settings.find('.stream-name-editable'); const new_name = $.trim(new_name_box.text()); $(".stream_change_property_info").hide(); channel.patch({ // Stream names might contain unsafe characters so we must encode it first. url: "/json/streams/" + stream_id, data: {new_name: JSON.stringify(new_name)}, success: function () { new_name_box.val(''); ui_report.success(i18n.t("The stream has been renamed!"), $(".stream_change_property_info")); }, error: function (xhr) { new_name_box.text(stream_data.maybe_get_stream_name(stream_id)); ui_report.error(i18n.t("Error"), xhr, $(".stream_change_property_info")); }, }); }; exports.set_raw_description = function (target, destination) { const sub_settings = $(target).closest('.subscription_settings'); const sub = get_sub_for_target(sub_settings); if (!sub) { blueslip.error('set_raw_description() fails'); return; } destination.text(sub.description); }; exports.change_stream_description = function (e) { e.preventDefault(); const sub_settings = $(e.target).closest('.subscription_settings'); const sub = get_sub_for_target(sub_settings); if (!sub) { blueslip.error('change_stream_description() fails'); return; } const stream_id = sub.stream_id; const description = sub_settings.find('.stream-description-editable').text().trim(); $(".stream_change_property_info").hide(); channel.patch({ // Description might contain unsafe characters so we must encode it first. url: '/json/streams/' + stream_id, data: { description: JSON.stringify(description), }, success: function () { // The event from the server will update the rest of the UI ui_report.success(i18n.t("The stream description has been updated!"), $(".stream_change_property_info")); }, error: function (xhr) { sub_settings.find('.stream-description-editable').html(sub.rendered_description); ui_report.error(i18n.t("Error"), xhr, $(".stream_change_property_info")); }, }); }; exports.delete_stream = function (stream_id, alert_element, stream_row) { channel.del({ url: '/json/streams/' + stream_id, error: function (xhr) { ui_report.error(i18n.t("Failed"), xhr, alert_element); }, success: function () { stream_row.remove(); }, }); }; exports.initialize = function () { $("#main_div").on("click", ".stream_sub_unsub_button", function (e) { e.preventDefault(); e.stopPropagation(); const stream_name = narrow_state.stream(); if (stream_name === undefined) { return; } const sub = stream_data.get_sub(stream_name); subs.sub_or_unsub(sub); }); $("#subscriptions_table").on("click", ".change-stream-privacy", function (e) { const stream_id = get_stream_id(e.target); const stream = stream_data.get_sub_by_id(stream_id); const template_data = { stream_id: stream_id, stream_name: stream.name, stream_post_policy_values: stream_data.stream_post_policy_values, stream_post_policy: stream.stream_post_policy, is_public: !stream.invite_only, is_private: stream.invite_only && !stream.history_public_to_subscribers, is_private_with_public_history: stream.invite_only && stream.history_public_to_subscribers, is_admin: page_params.is_admin, }; const change_privacy_modal = render_subscription_stream_privacy_modal(template_data); $("#stream_privacy_modal").remove(); $("#subscriptions_table").append(change_privacy_modal); overlays.open_modal('stream_privacy_modal'); e.preventDefault(); e.stopPropagation(); }); $("#subscriptions_table").on('click', '#change-stream-privacy-button', change_stream_privacy); $("#subscriptions_table").on('click', '.close-privacy-modal', function (e) { // This fixes a weird bug in which, subscription_settings hides // unexpectedly by clicking the cancel button. e.stopPropagation(); }); $("#subscriptions_table").on("click", "#sub_is_muted_setting", stream_is_muted_clicked); $("#subscriptions_table").on("click", ".sub_setting_checkbox", stream_setting_clicked); $("#subscriptions_table").on("submit", ".subscriber_list_add form", function (e) { e.preventDefault(); const settings_row = $(e.target).closest('.subscription_settings'); const sub = get_sub_for_target(settings_row); if (!sub) { blueslip.error('.subscriber_list_add form submit fails'); return; } const text_box = settings_row.find('input[name="principal"]'); const principal = $.trim(text_box.val()); const stream_subscription_info_elem = $('.stream_subscription_info').expectOne(); function invite_success(data) { text_box.val(''); if (data.subscribed.hasOwnProperty(principal)) { stream_subscription_info_elem.text(i18n.t("Subscribed successfully!")); // The rest of the work is done via the subscription -> add event we will get } else { stream_subscription_info_elem.text(i18n.t("User already subscribed.")); } stream_subscription_info_elem.addClass("text-success") .removeClass("text-error"); } function invite_failure(xhr) { const error = JSON.parse(xhr.responseText); stream_subscription_info_elem.text(error.msg) .addClass("text-error").removeClass("text-success"); } exports.invite_user_to_stream(principal, sub, invite_success, invite_failure); }); $("#subscriptions_table").on("submit", ".subscriber_list_remove form", function (e) { e.preventDefault(); const list_entry = $(e.target).closest("tr"); const target_user_id = parseInt(list_entry.attr("data-subscriber-id"), 10); const principal = people.get_by_user_id(target_user_id).email; const settings_row = $(e.target).closest('.subscription_settings'); const sub = get_sub_for_target(settings_row); if (!sub) { blueslip.error('.subscriber_list_remove form submit fails'); return; } const stream_subscription_info_elem = $('.stream_subscription_info').expectOne(); function removal_success(data) { if (data.removed.length > 0) { // Remove the user from the subscriber list. list_entry.remove(); stream_subscription_info_elem.text(i18n.t("Unsubscribed successfully!")); // The rest of the work is done via the subscription -> remove event we will get } else { stream_subscription_info_elem.text(i18n.t("User is already not subscribed.")); } stream_subscription_info_elem.addClass('text-success') .removeClass('text-error'); } function removal_failure() { stream_subscription_info_elem.text(i18n.t("Error removing user from this stream.")) .addClass("text-error").removeClass("text-success"); } exports.remove_user_from_stream(principal, sub, removal_success, removal_failure); }); // This handler isn't part of the normal edit interface; it's the convenient // checkmark in the subscriber list. $("#subscriptions_table").on("click", ".sub_unsub_button", function (e) { const sub = get_sub_for_target(e.target); const stream_row = $(this).parent(); subs.sub_or_unsub(sub); if (!sub.subscribed) { exports.open_edit_panel_for_row(stream_row); } stream_ui_updates.update_regular_sub_settings(sub); e.preventDefault(); e.stopPropagation(); }); $("#subscriptions_table").on("click", ".deactivate", function (e) { e.preventDefault(); e.stopPropagation(); const stream_id = get_stream_id(e.target); if (!stream_id) { ui_report.message(i18n.t("Invalid stream id"), $(".stream_change_property_info"), 'alert-error'); return; } const stream_name = stream_data.maybe_get_stream_name(stream_id); const deactivate_stream_modal = render_settings_deactivation_stream_modal({ stream_name: stream_name, stream_id: stream_id, }); $("#deactivation_stream_modal").remove(); $("#subscriptions_table").append(deactivate_stream_modal); overlays.open_modal('deactivation_stream_modal'); }); $("#subscriptions_table").on("click", "#do_deactivate_stream_button", function (e) { const stream_id = $(e.target).data("stream-id"); overlays.close_modal('deactivation_stream_modal'); $("#deactivation_stream_modal").remove(); if (!stream_id) { ui_report.message(i18n.t("Invalid stream id"), $(".stream_change_property_info"), 'alert-error'); return; } const row = $(".stream-row.active"); exports.delete_stream(stream_id, $(".stream_change_property_info"), row); }); $("#subscriptions_table").on("hide.bs.modal", "#deactivation_stream_modal", function () { $("#deactivation_stream_modal").remove(); }); $("#subscriptions_table").on("click", ".stream-row", function (e) { if ($(e.target).closest(".check, .subscription_settings").length === 0) { exports.open_edit_panel_for_row(this); } }); $(document).on('peer_subscribe.zulip peer_unsubscribe.zulip', function (e, data) { const sub = stream_data.get_sub(data.stream_name); subs.rerender_subscriptions_settings(sub); }); }; window.stream_edit = exports;