mirror of https://github.com/zulip/zulip.git
poll-widget: Refactor comment to option.
We had initially designed the poll widget like a blog post with comments beneath it but it makes more sense to think of it as just a simple poll with options.
This commit is contained in:
parent
5641afc6e2
commit
c176891c2e
|
@ -23,7 +23,7 @@ run_test('poll_data_holder my question', () => {
|
|||
let data = data_holder.get_widget_data();
|
||||
|
||||
assert.deepEqual(data, {
|
||||
comments: [],
|
||||
options: [],
|
||||
question: 'Favorite color?',
|
||||
});
|
||||
|
||||
|
@ -36,25 +36,25 @@ run_test('poll_data_holder my question', () => {
|
|||
data = data_holder.get_widget_data();
|
||||
|
||||
assert.deepEqual(data, {
|
||||
comments: [],
|
||||
options: [],
|
||||
question: 'best plan?',
|
||||
});
|
||||
|
||||
const comment_event = {
|
||||
type: 'new_comment',
|
||||
const option_event = {
|
||||
type: 'new_option',
|
||||
idx: 1,
|
||||
comment: 'release now',
|
||||
option: 'release now',
|
||||
};
|
||||
|
||||
people.safe_full_names = () => '';
|
||||
|
||||
data_holder.handle_event(sender_id, comment_event);
|
||||
data_holder.handle_event(sender_id, option_event);
|
||||
data = data_holder.get_widget_data();
|
||||
|
||||
assert.deepEqual(data, {
|
||||
comments: [
|
||||
options: [
|
||||
{
|
||||
comment: 'release now',
|
||||
option: 'release now',
|
||||
names: '',
|
||||
count: 0,
|
||||
key: '99,1',
|
||||
|
@ -73,9 +73,9 @@ run_test('poll_data_holder my question', () => {
|
|||
data = data_holder.get_widget_data();
|
||||
|
||||
assert.deepEqual(data, {
|
||||
comments: [
|
||||
options: [
|
||||
{
|
||||
comment: 'release now',
|
||||
option: 'release now',
|
||||
names: '',
|
||||
count: 1,
|
||||
key: '99,1',
|
||||
|
@ -96,11 +96,11 @@ run_test('poll_data_holder my question', () => {
|
|||
data_holder.handle_event(sender_id, invalid_vote_event);
|
||||
data = data_holder.get_widget_data();
|
||||
|
||||
const comment_outbound_event = data_holder.handle.new_comment.outbound('new comment');
|
||||
assert.deepEqual(comment_outbound_event, {
|
||||
type: 'new_comment',
|
||||
const option_outbound_event = data_holder.handle.new_option.outbound('new option');
|
||||
assert.deepEqual(option_outbound_event, {
|
||||
type: 'new_option',
|
||||
idx: 2,
|
||||
comment: 'new comment',
|
||||
option: 'new option',
|
||||
});
|
||||
|
||||
const new_question = 'Any new plan?';
|
||||
|
@ -123,9 +123,9 @@ run_test('poll_data_holder my question', () => {
|
|||
data = data_holder.get_widget_data();
|
||||
|
||||
assert.deepEqual(data, {
|
||||
comments: [
|
||||
options: [
|
||||
{
|
||||
comment: 'release now',
|
||||
option: 'release now',
|
||||
names: '',
|
||||
count: 0,
|
||||
key: '99,1',
|
||||
|
@ -170,15 +170,15 @@ run_test('activate another person poll', () => {
|
|||
return elem;
|
||||
};
|
||||
|
||||
const poll_comment = set_widget_find_result('button.poll-comment');
|
||||
const poll_comment_input = set_widget_find_result('input.poll-comment');
|
||||
const widget_comment_container = set_widget_find_result('ul.poll-widget');
|
||||
const poll_option = set_widget_find_result('button.poll-option');
|
||||
const poll_option_input = set_widget_find_result('input.poll-option');
|
||||
const widget_option_container = set_widget_find_result('ul.poll-widget');
|
||||
|
||||
const poll_question_submit = set_widget_find_result('button.poll-question-check');
|
||||
const poll_edit_question = set_widget_find_result('.poll-edit-question');
|
||||
const poll_question_header = set_widget_find_result('.poll-question-header');
|
||||
const poll_question_container = set_widget_find_result('.poll-question-bar');
|
||||
const poll_comment_container = set_widget_find_result('.poll-comment-bar');
|
||||
const poll_option_container = set_widget_find_result('.poll-option-bar');
|
||||
|
||||
const poll_vote_button = set_widget_find_result('button.poll-vote');
|
||||
const poll_please_wait = set_widget_find_result('.poll-please-wait');
|
||||
|
@ -187,12 +187,12 @@ run_test('activate another person poll', () => {
|
|||
set_widget_find_result('button.poll-question-remove');
|
||||
set_widget_find_result('input.poll-question');
|
||||
|
||||
let comment_button_callback;
|
||||
let option_button_callback;
|
||||
let vote_button_callback;
|
||||
|
||||
poll_comment.on = (event, func) => {
|
||||
poll_option.on = (event, func) => {
|
||||
assert.equal(event, 'click');
|
||||
comment_button_callback = func;
|
||||
option_button_callback = func;
|
||||
};
|
||||
|
||||
poll_vote_button.on = (event, func) => {
|
||||
|
@ -217,7 +217,7 @@ run_test('activate another person poll', () => {
|
|||
assert(!show);
|
||||
};
|
||||
|
||||
poll_comment_container.toggle = (show) => {
|
||||
poll_option_container.toggle = (show) => {
|
||||
assert.equal(show, true);
|
||||
};
|
||||
|
||||
|
@ -232,7 +232,7 @@ run_test('activate another person poll', () => {
|
|||
poll_widget.activate(opts);
|
||||
|
||||
assert.equal(widget_elem.html(), 'poll-widget');
|
||||
assert.equal(widget_comment_container.html(), 'poll-widget-results');
|
||||
assert.equal(widget_option_container.html(), 'poll-widget-results');
|
||||
assert.equal(poll_question_header.text(), 'What do you want?');
|
||||
|
||||
const e = {
|
||||
|
@ -240,15 +240,15 @@ run_test('activate another person poll', () => {
|
|||
};
|
||||
|
||||
{
|
||||
/* Testing data sent to server on adding comment */
|
||||
poll_comment_input.val('cool choice');
|
||||
/* Testing data sent to server on adding option */
|
||||
poll_option_input.val('cool choice');
|
||||
out_data = undefined;
|
||||
comment_button_callback(e);
|
||||
assert.deepEqual(out_data, { type: 'new_comment', idx: 1, comment: 'cool choice' });
|
||||
option_button_callback(e);
|
||||
assert.deepEqual(out_data, { type: 'new_option', idx: 1, option: 'cool choice' });
|
||||
|
||||
poll_comment_input.val('');
|
||||
poll_option_input.val('');
|
||||
out_data = undefined;
|
||||
comment_button_callback(e);
|
||||
option_button_callback(e);
|
||||
assert.deepEqual(out_data, undefined);
|
||||
}
|
||||
|
||||
|
@ -256,9 +256,9 @@ run_test('activate another person poll', () => {
|
|||
{
|
||||
sender_id: 100,
|
||||
data: {
|
||||
type: 'new_comment',
|
||||
type: 'new_option',
|
||||
idx: 1,
|
||||
comment: 'release now',
|
||||
option: 'release now',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@ -333,16 +333,16 @@ run_test('activate own poll', () => {
|
|||
return elem;
|
||||
};
|
||||
|
||||
const poll_comment = set_widget_find_result('button.poll-comment');
|
||||
const poll_comment_input = set_widget_find_result('input.poll-comment');
|
||||
const widget_comment_container = set_widget_find_result('ul.poll-widget');
|
||||
const poll_option = set_widget_find_result('button.poll-option');
|
||||
const poll_option_input = set_widget_find_result('input.poll-option');
|
||||
const widget_option_container = set_widget_find_result('ul.poll-widget');
|
||||
|
||||
const poll_question_submit = set_widget_find_result('button.poll-question-check');
|
||||
const poll_edit_question = set_widget_find_result('.poll-edit-question');
|
||||
const poll_question_input = set_widget_find_result('input.poll-question');
|
||||
const poll_question_header = set_widget_find_result('.poll-question-header');
|
||||
const poll_question_container = set_widget_find_result('.poll-question-bar');
|
||||
const poll_comment_container = set_widget_find_result('.poll-comment-bar');
|
||||
const poll_option_container = set_widget_find_result('.poll-option-bar');
|
||||
|
||||
const poll_vote_button = set_widget_find_result('button.poll-vote');
|
||||
const poll_please_wait = set_widget_find_result('.poll-please-wait');
|
||||
|
@ -359,7 +359,7 @@ run_test('activate own poll', () => {
|
|||
|
||||
// Following event handler are already tested and doesn't make sense
|
||||
// to test them again
|
||||
poll_comment.on = noop;
|
||||
poll_option.on = noop;
|
||||
poll_vote_button.on = noop;
|
||||
|
||||
poll_question_header.toggle = (show) => {
|
||||
|
@ -379,7 +379,7 @@ run_test('activate own poll', () => {
|
|||
assert(!show);
|
||||
};
|
||||
|
||||
poll_comment_container.toggle = (show) => {
|
||||
poll_option_container.toggle = (show) => {
|
||||
assert(show);
|
||||
};
|
||||
|
||||
|
@ -394,7 +394,7 @@ run_test('activate own poll', () => {
|
|||
poll_widget.activate(opts);
|
||||
|
||||
assert.equal(widget_elem.html(), 'poll-widget');
|
||||
assert.equal(widget_comment_container.html(), 'poll-widget-results');
|
||||
assert.equal(widget_option_container.html(), 'poll-widget-results');
|
||||
assert.equal(poll_question_header.text(), 'Where to go?');
|
||||
|
||||
{
|
||||
|
@ -409,7 +409,7 @@ run_test('activate own poll', () => {
|
|||
question_button_callback(e);
|
||||
assert.deepEqual(out_data, { type: 'question', question: 'Is it new?' });
|
||||
|
||||
poll_comment_input.val('');
|
||||
poll_option_input.val('');
|
||||
out_data = undefined;
|
||||
question_button_callback(e);
|
||||
assert.deepEqual(out_data, undefined);
|
||||
|
|
|
@ -29,25 +29,25 @@ run_test('activate', () => {
|
|||
const events = [
|
||||
{
|
||||
data: {
|
||||
comment: "First option",
|
||||
option: "First option",
|
||||
idx: 1,
|
||||
type: "new_comment",
|
||||
type: "new_option",
|
||||
},
|
||||
sender_id: 101,
|
||||
},
|
||||
{
|
||||
data: {
|
||||
comment: "Second option",
|
||||
option: "Second option",
|
||||
idx: 1,
|
||||
type: "new_comment",
|
||||
type: "new_option",
|
||||
},
|
||||
sender_id: 102,
|
||||
},
|
||||
{
|
||||
data: {
|
||||
comment: "Third option",
|
||||
option: "Third option",
|
||||
idx: 1,
|
||||
type: "new_comment",
|
||||
type: "new_option",
|
||||
},
|
||||
sender_id: 102,
|
||||
},
|
||||
|
@ -145,7 +145,7 @@ run_test('activate', () => {
|
|||
const post_activate_event = {
|
||||
data: {
|
||||
idx: 1,
|
||||
type: "new_comment",
|
||||
type: "new_option",
|
||||
},
|
||||
message_id: 2001,
|
||||
sender_id: 102,
|
||||
|
|
|
@ -11,7 +11,7 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
|
||||
var me = people.my_current_user_id();
|
||||
var poll_question = question;
|
||||
var key_to_comment = {};
|
||||
var key_to_option = {};
|
||||
var my_idx = 1;
|
||||
|
||||
var input_mode = is_my_poll; // for now
|
||||
|
@ -42,13 +42,13 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
}
|
||||
|
||||
self.get_widget_data = function () {
|
||||
var comments = [];
|
||||
var options = [];
|
||||
|
||||
_.each(key_to_comment, function (obj, key) {
|
||||
_.each(key_to_option, function (obj, key) {
|
||||
var voters = _.keys(obj.votes);
|
||||
|
||||
comments.push({
|
||||
comment: obj.comment,
|
||||
options.push({
|
||||
option: obj.option,
|
||||
names: people.safe_full_names(voters),
|
||||
count: voters.length,
|
||||
key: key,
|
||||
|
@ -57,7 +57,7 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
|
||||
|
||||
var widget_data = {
|
||||
comments: comments,
|
||||
options: options,
|
||||
question: poll_question,
|
||||
};
|
||||
|
||||
|
@ -65,12 +65,12 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
};
|
||||
|
||||
self.handle = {
|
||||
new_comment: {
|
||||
outbound: function (comment) {
|
||||
new_option: {
|
||||
outbound: function (option) {
|
||||
var event = {
|
||||
type: 'new_comment',
|
||||
type: 'new_option',
|
||||
idx: my_idx,
|
||||
comment: comment,
|
||||
option: option,
|
||||
};
|
||||
|
||||
my_idx += 1;
|
||||
|
@ -81,11 +81,11 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
inbound: function (sender_id, data) {
|
||||
var idx = data.idx;
|
||||
var key = sender_id + ',' + idx;
|
||||
var comment = data.comment;
|
||||
var option = data.option;
|
||||
var votes = {};
|
||||
|
||||
key_to_comment[key] = {
|
||||
comment: comment,
|
||||
key_to_option[key] = {
|
||||
option: option,
|
||||
user_id: sender_id,
|
||||
votes: votes,
|
||||
};
|
||||
|
@ -119,7 +119,7 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
var vote = 1;
|
||||
|
||||
// toggle
|
||||
if (key_to_comment[key].votes[me]) {
|
||||
if (key_to_option[key].votes[me]) {
|
||||
vote = -1;
|
||||
}
|
||||
|
||||
|
@ -135,14 +135,14 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
inbound: function (sender_id, data) {
|
||||
var key = data.key;
|
||||
var vote = data.vote;
|
||||
var comment = key_to_comment[key];
|
||||
var option = key_to_option[key];
|
||||
|
||||
if (comment === undefined) {
|
||||
if (option === undefined) {
|
||||
blueslip.error('unknown key for poll: ' + key);
|
||||
return;
|
||||
}
|
||||
|
||||
var votes = comment.votes;
|
||||
var votes = option.votes;
|
||||
|
||||
if (vote === 1) {
|
||||
votes[sender_id] = 1;
|
||||
|
@ -160,18 +160,18 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
|
|||
}
|
||||
};
|
||||
|
||||
// function to check whether comment already exists
|
||||
self.is_comment_present = function (data, latest_comment) {
|
||||
// function to check whether option already exists
|
||||
self.is_option_present = function (data, latest_option) {
|
||||
return _.any(data, function (el) {
|
||||
return el.comment === latest_comment;
|
||||
return el.option === latest_option;
|
||||
});
|
||||
};
|
||||
|
||||
// function to add all comments added along with the /poll command
|
||||
// function to add all options added along with the /poll command
|
||||
_.each(options, function (option, i) {
|
||||
self.handle.new_comment.inbound('canned', {
|
||||
self.handle.new_option.inbound('canned', {
|
||||
idx: i,
|
||||
comment: option,
|
||||
option: option,
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -212,7 +212,7 @@ exports.activate = function (opts) {
|
|||
update_edit_controls();
|
||||
|
||||
elem.find('.poll-question-bar').toggle(input_mode);
|
||||
elem.find('.poll-comment-bar').toggle(can_vote);
|
||||
elem.find('.poll-option-bar').toggle(can_vote);
|
||||
|
||||
elem.find('.poll-please-wait').toggle(waiting);
|
||||
|
||||
|
@ -259,21 +259,21 @@ exports.activate = function (opts) {
|
|||
}
|
||||
|
||||
function submit_option() {
|
||||
var poll_comment_input = elem.find("input.poll-comment");
|
||||
var comment = poll_comment_input.val().trim();
|
||||
var comments = poll_data.get_widget_data().comments;
|
||||
var poll_option_input = elem.find("input.poll-option");
|
||||
var option = poll_option_input.val().trim();
|
||||
var options = poll_data.get_widget_data().options;
|
||||
|
||||
if (poll_data.is_comment_present(comments, comment)) {
|
||||
if (poll_data.is_option_present(options, option)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (comment === '') {
|
||||
if (option === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
poll_comment_input.val('').focus();
|
||||
poll_option_input.val('').focus();
|
||||
|
||||
var data = poll_data.handle.new_comment.outbound(comment);
|
||||
var data = poll_data.handle.new_option.outbound(option);
|
||||
callback(data);
|
||||
}
|
||||
|
||||
|
@ -320,12 +320,12 @@ exports.activate = function (opts) {
|
|||
abort_edit();
|
||||
});
|
||||
|
||||
elem.find("button.poll-comment").on('click', function (e) {
|
||||
elem.find("button.poll-option").on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
submit_option();
|
||||
});
|
||||
|
||||
elem.find('input.poll-comment').on('keydown', function (e) {
|
||||
elem.find('input.poll-option').on('keydown', function (e) {
|
||||
e.stopPropagation();
|
||||
|
||||
if (e.keyCode === 13) {
|
||||
|
@ -334,7 +334,7 @@ exports.activate = function (opts) {
|
|||
}
|
||||
|
||||
if (e.keyCode === 27) {
|
||||
$('input.poll-comment').val('');
|
||||
$('input.poll-option').val('');
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -78,8 +78,8 @@ img.task-completed {
|
|||
|
||||
input.add-task,
|
||||
button.add-task,
|
||||
input.poll-comment,
|
||||
button.poll-comment,
|
||||
input.poll-option,
|
||||
button.poll-option,
|
||||
input.poll-question,
|
||||
button.poll-question {
|
||||
padding: 4px 6px;
|
||||
|
@ -87,7 +87,7 @@ button.poll-question {
|
|||
}
|
||||
|
||||
button.add-task,
|
||||
button.poll-comment,
|
||||
button.poll-option,
|
||||
button.poll-question {
|
||||
border-radius: 3px;
|
||||
border: 1px solid hsl(0, 0%, 80%);
|
||||
|
@ -96,7 +96,7 @@ button.poll-question {
|
|||
}
|
||||
|
||||
button.add-task:hover,
|
||||
button.poll-comment:hover,
|
||||
button.poll-option:hover,
|
||||
button.poll-question:hover {
|
||||
border-color: hsl(0, 0%, 60%);
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
{{#each comments}}
|
||||
{{#each options}}
|
||||
<li>
|
||||
<button class="poll-vote" data-key="{{ key }}">
|
||||
{{ count }}
|
||||
</button>
|
||||
<span class="poll-option">{{ comment }}</span>
|
||||
<span class="poll-option">{{ option }}</span>
|
||||
{{#if names}}
|
||||
<span class="poll-names">({{ names }})</span>
|
||||
{{/if}}
|
||||
|
|
|
@ -14,9 +14,9 @@
|
|||
</div>
|
||||
<ul class="poll-widget">
|
||||
</ul>
|
||||
<div class="poll-comment-bar">
|
||||
<input type="text" class="poll-comment" placeholder="{{t 'New choice'}}" />
|
||||
<button class="poll-comment">{{t "Add choice" }}</button>
|
||||
<div class="poll-option-bar">
|
||||
<input type="text" class="poll-option" placeholder="{{t 'New choice'}}" />
|
||||
<button class="poll-option">{{t "Add choice" }}</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
|
|
|
@ -34,7 +34,7 @@ def get_extra_data_from_widget_type(content: str,
|
|||
for line in lines:
|
||||
# If someone is using the list syntax, we remove it
|
||||
# before adding an option.
|
||||
option = re.sub(r'(\s*[-*]?\s*)', '', line.strip())
|
||||
option = re.sub(r'(\s*[-*]?\s*)', '', line.strip(), 1)
|
||||
if len(option) > 0:
|
||||
options.append(option)
|
||||
extra_data = {
|
||||
|
|
Loading…
Reference in New Issue