Files
zulip/static/js/stream_create.js
Steve Howell d999827465 Improve how we report errors when we name new streams.
When the user creates a stream, we no longer do a synchronous
check on the back end to find if the stream name already exists.
Instead, we only check our local data, which will prevent many
typical errors, and then we let the back end capture duplicates for
stream names that the client doesn't know about.

We also tone down errors when the stream name is blank--we
only whine about empty streams right before submitting the form.

Also, since our check for duplicate streams is less expensive,
we now capture the "input" event instead of the "focusout" event,
so that if you fix up the name to avoid a collision, you get more
immediate feedback.

When we do detect stream name errors, we conveniently focus the
text field to let the user correct the problem.
2017-04-28 16:17:52 -07:00

360 lines
12 KiB
JavaScript

var stream_create = (function () {
var exports = {};
var created_stream;
exports.reset_created_stream = function () {
created_stream = undefined;
};
exports.set_name = function (stream) {
created_stream = stream;
};
exports.get_name = function () {
return created_stream;
};
var stream_name_error = (function () {
var self = {};
self.report_already_exists = function () {
$("#stream_name_error").text(i18n.t("A stream with this name already exists"));
$("#stream_name_error").show();
};
self.clear_errors = function () {
$("#stream_name_error").hide();
};
self.report_empty_stream = function () {
$("#stream_name_error").text(i18n.t("A stream needs to have a name"));
$("#stream_name_error").show();
};
self.select = function () {
$("#create_stream_name").focus().select();
};
self.pre_validate = function (stream_name) {
// Don't worry about empty strings...we just want to call this
// to warn users early before they start doing too much work
// after they make the effort to type in a stream name. (The
// use case here is that I go to create a stream, only to find
// out it already exists, and I was just too lazy to look at
// the public streams that I'm not subscribed to yet. Once I
// realize the stream already exists, I may want to cancel.)
if (stream_name && stream_data.get_sub(stream_name)) {
self.report_already_exists();
return;
}
self.clear_errors();
};
self.validate_for_submit = function (stream_name) {
if (!stream_name) {
self.report_empty_stream();
self.select();
return false;
}
if (stream_data.get_sub(stream_name)) {
self.report_already_exists();
self.select();
return false;
}
// If we got this far, then we think we have a new unique stream
// name, so we'll submit to the server. (It's still plausible,
// however, that there's some invite-only stream that we don't
// know about locally that will cause a name collision.)
return true;
};
return self;
}());
function ajaxSubscribeForCreation(stream, description, principals, invite_only, announce) {
// Subscribe yourself and possible other people to a new stream.
return channel.post({
url: "/json/users/me/subscriptions",
data: {subscriptions: JSON.stringify([{name: stream, description: description}]),
principals: JSON.stringify(principals),
invite_only: JSON.stringify(invite_only),
announce: JSON.stringify(announce),
},
success: function () {
$("#create_stream_name").val("");
$("#create_stream_description").val("");
$("#subscriptions-status").hide();
// The rest of the work is done via the subscribe event we will get
},
error: function (xhr) {
var msg = JSON.parse(xhr.responseText).msg;
if (msg.indexOf('access') >= 0) {
// If we can't access the stream, we can safely assume it's
// a duplicate stream that we are not invited to.
stream_name_error.report_already_exists(stream);
stream_name_error.select();
}
// TODO: This next line does nothing. See #4647.
ui_report.error(i18n.t("Error creating stream"), xhr,
$("#subscriptions-status"), 'subscriptions-status');
},
});
}
// Within the new stream modal...
function update_announce_stream_state() {
// If the stream is invite only, or everyone's added, disable
// the "Announce stream" option. Otherwise enable it.
var announce_stream_checkbox = $('#announce-new-stream input');
var disable_it = false;
var is_invite_only = $('input:radio[name=privacy]:checked').val() === 'invite-only';
if (is_invite_only) {
disable_it = true;
announce_stream_checkbox.prop('checked', false);
} else {
disable_it = $('#user-checkboxes input').length
=== $('#user-checkboxes input:checked').length;
}
announce_stream_checkbox.prop('disabled', disable_it);
}
exports.new_stream_clicked = function (stream) {
// this changes the tab switcher (settings/preview) which isn't necessary
// to a add new stream title.
$(".display-type #add_new_stream_title").show();
$(".display-type #stream_settings_title").hide();
$(".stream-row.active").removeClass("active");
$("#stream_settings_title, .subscriptions-container .settings, .nothing-selected").hide();
$("#stream-creation, #add_new_stream_title").show();
if (stream !== '') {
$('#create_stream_name').val(stream);
}
exports.show_new_stream_modal();
// at less than 700px we have a @media query that when you tap the
// #create_stream_button, the stream prompt slides in. However, when you
// focus the button on that page, the entire app view jumps over to
// the other tab, and the animation breaks.
// it is unclear whether this is a browser bug or "feature", however what
// is clear is that this shoudn't be touched unless you're also changing
// the mobile @media query at 700px.
if (window.innerWidth > 700) {
$('#create_stream_name').focus();
}
// change the hash to #streams/new to allow for linking and
// easy discovery.
window.location.hash = "#streams/new";
};
// *Synchronously* check if a stream exists.
// This is deprecated and we hope to remove it.
exports.check_stream_existence = function (stream_name, autosubscribe) {
var result = "error";
var request = {stream: stream_name};
if (autosubscribe) {
request.autosubscribe = true;
}
channel.post({
url: "/json/subscriptions/exists",
data: request,
async: false,
success: function (data) {
if (data.subscribed) {
result = "subscribed";
} else {
result = "not-subscribed";
}
},
error: function (xhr) {
if (xhr.status === 404) {
result = "does-not-exist";
} else {
result = "error";
}
},
});
return result;
};
exports.show_new_stream_modal = function () {
$("#stream-creation").removeClass("hide");
$(".right .settings").hide();
$('#people_to_add').html(templates.render('new_stream_users', {
users: people.get_rest_of_realm(),
streams: stream_data.get_streams_for_settings_page(),
}));
// Make the options default to the same each time:
// public, "announce stream" on.
$('#make-invite-only input:radio[value=public]').prop('checked', true);
$('#announce-new-stream input').prop('disabled', false);
$('#announce-new-stream input').prop('checked', true);
stream_name_error.clear_errors();
$("#stream-checkboxes label.checkbox").on('change', function (e) {
var elem = $(this);
var stream_id = elem.attr('data-stream-id');
var checked = elem.find('input').prop('checked');
var subscriber_ids = stream_data.get_sub_by_id(stream_id).subscribers;
$('#user-checkboxes label.checkbox').each(function () {
var user_elem = $(this);
var user_id = user_elem.attr('data-user-id');
if (subscriber_ids.has(user_id)) {
user_elem.find('input').prop('checked', checked);
}
});
update_announce_stream_state();
e.preventDefault();
});
};
$(function () {
$('body').on('change', '#user-checkboxes input, #make-invite-only input', update_announce_stream_state);
// 'Check all' and 'Uncheck all' visible users
$(document).on('click', '.subs_set_all_users', function (e) {
$('#user-checkboxes .checkbox').each(function (idx, li) {
if (li.style.display !== "none") {
$(li.firstElementChild).prop('checked', true);
}
});
e.preventDefault();
update_announce_stream_state();
});
$(document).on('click', '.subs_unset_all_users', function (e) {
$('#user-checkboxes .checkbox').each(function (idx, li) {
if (li.style.display !== "none") {
$(li.firstElementChild).prop('checked', false);
}
});
e.preventDefault();
update_announce_stream_state();
});
$(document).on('click', '#copy-from-stream-expand-collapse', function (e) {
$('#stream-checkboxes').toggle();
$("#copy-from-stream-expand-collapse .toggle").toggleClass('icon-vector-caret-right icon-vector-caret-down');
e.preventDefault();
update_announce_stream_state();
});
// Search People or Streams
$(document).on('input', '.add-user-list-filter', function (e) {
var user_list = $(".add-user-list-filter");
if (user_list === 0) {
return;
}
var search_term = user_list.expectOne().val().trim();
var search_terms = search_term.toLowerCase().split(",");
(function filter_user_checkboxes() {
var user_labels = $("#user-checkboxes label.add-user-label");
if (search_term === '') {
user_labels.css({display: 'block'});
return;
}
var users = people.get_rest_of_realm();
var filtered_users = people.filter_people_by_search_terms(users, search_terms);
// Be careful about modifying the follow code. A naive implementation
// will work very poorly with a large user population (~1000 users).
//
// I tested using: `./manage.py populate_db --extra-users 3500`
//
// This would break the previous implementation, whereas the new
// implementation is merely sluggish.
user_labels.each(function () {
var elem = $(this);
var user_id = elem.attr('data-user-id');
var user_checked = filtered_users.has(user_id);
var display = user_checked ? "block" : "none";
elem.css({display: display});
});
}());
update_announce_stream_state();
e.preventDefault();
});
$(".subscriptions").on("submit", "#stream_creation_form", function (e) {
e.preventDefault();
var stream = $.trim($("#create_stream_name").val());
var description = $.trim($("#create_stream_description").val());
var name_ok = stream_name_error.validate_for_submit(stream);
if (!name_ok) {
return;
}
var principals = _.map(
$("#stream_creation_form input:checkbox[name=user]:checked"),
function (elem) {
return $(elem).val();
}
);
// You are always subscribed to streams you create.
principals.push(people.my_current_email());
created_stream = stream;
ajaxSubscribeForCreation(stream,
description,
principals,
$('#stream_creation_form input[name=privacy]:checked').val() === "invite-only",
$('#announce-new-stream input').prop('checked')
);
});
$(".subscriptions").on("input", "#create_stream_name", function () {
var stream = $.trim($("#create_stream_name").val());
// This is an inexpensive check.
stream_name_error.pre_validate(stream);
});
$("body").on("mouseover", "#announce-stream-docs", function (e) {
var announce_stream_docs = $("#announce-stream-docs");
announce_stream_docs.popover({placement: "right",
content: templates.render('announce_stream_docs'),
trigger: "manual"});
announce_stream_docs.popover('show');
announce_stream_docs.data('popover').tip().css('z-index', 2000);
e.stopPropagation();
});
$("body").on("mouseout", "#announce-stream-docs", function (e) {
$("#announce-stream-docs").popover('hide');
e.stopPropagation();
});
});
return exports;
}());
if (typeof module !== 'undefined') {
module.exports = stream_create;
}