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

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:
Rohitt Vashishtha 2019-01-28 18:13:56 +00:00 committed by Tim Abbott
parent 5641afc6e2
commit c176891c2e
7 changed files with 92 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
frontend_tests/node_tests/voting_widget.js
View File

@ -23,7 +23,7 @@ run_test('poll_data_holder my question', () => {
let data = data_holder.get_widget_data(); let data = data_holder.get_widget_data();
assert.deepEqual(data, { assert.deepEqual(data, {
comments: [], options: [],
question: 'Favorite color?', question: 'Favorite color?',
}); });
@ -36,25 +36,25 @@ run_test('poll_data_holder my question', () => {
data = data_holder.get_widget_data(); data = data_holder.get_widget_data();
assert.deepEqual(data, { assert.deepEqual(data, {
comments: [], options: [],
question: 'best plan?', question: 'best plan?',
}); });
const comment_event = { const option_event = {
type: 'new_comment', type: 'new_option',
idx: 1, idx: 1,
comment: 'release now', option: 'release now',
}; };
people.safe_full_names = () => ''; 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(); data = data_holder.get_widget_data();
assert.deepEqual(data, { assert.deepEqual(data, {
comments: [ options: [
{ {
comment: 'release now', option: 'release now',
names: '', names: '',
count: 0, count: 0,
key: '99,1', key: '99,1',
@ -73,9 +73,9 @@ run_test('poll_data_holder my question', () => {
data = data_holder.get_widget_data(); data = data_holder.get_widget_data();
assert.deepEqual(data, { assert.deepEqual(data, {
comments: [ options: [
{ {
comment: 'release now', option: 'release now',
names: '', names: '',
count: 1, count: 1,
key: '99,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_holder.handle_event(sender_id, invalid_vote_event);
data = data_holder.get_widget_data(); data = data_holder.get_widget_data();
const comment_outbound_event = data_holder.handle.new_comment.outbound('new comment'); const option_outbound_event = data_holder.handle.new_option.outbound('new option');
assert.deepEqual(comment_outbound_event, { assert.deepEqual(option_outbound_event, {
type: 'new_comment', type: 'new_option',
idx: 2, idx: 2,
comment: 'new comment', option: 'new option',
}); });
const new_question = 'Any new plan?'; const new_question = 'Any new plan?';
@ -123,9 +123,9 @@ run_test('poll_data_holder my question', () => {
data = data_holder.get_widget_data(); data = data_holder.get_widget_data();
assert.deepEqual(data, { assert.deepEqual(data, {
comments: [ options: [
{ {
comment: 'release now', option: 'release now',
names: '', names: '',
count: 0, count: 0,
key: '99,1', key: '99,1',
@ -170,15 +170,15 @@ run_test('activate another person poll', () => {
return elem; return elem;
}; };
const poll_comment = set_widget_find_result('button.poll-comment'); const poll_option = set_widget_find_result('button.poll-option');
const poll_comment_input = set_widget_find_result('input.poll-comment'); const poll_option_input = set_widget_find_result('input.poll-option');
const widget_comment_container = set_widget_find_result('ul.poll-widget'); 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_question_submit = set_widget_find_result('button.poll-question-check');
const poll_edit_question = set_widget_find_result('.poll-edit-question'); 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_header = set_widget_find_result('.poll-question-header');
const poll_question_container = set_widget_find_result('.poll-question-bar'); 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_vote_button = set_widget_find_result('button.poll-vote');
const poll_please_wait = set_widget_find_result('.poll-please-wait'); 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('button.poll-question-remove');
set_widget_find_result('input.poll-question'); set_widget_find_result('input.poll-question');
let comment_button_callback; let option_button_callback;
let vote_button_callback; let vote_button_callback;
poll_comment.on = (event, func) => { poll_option.on = (event, func) => {
assert.equal(event, 'click'); assert.equal(event, 'click');
comment_button_callback = func; option_button_callback = func;
}; };
poll_vote_button.on = (event, func) => { poll_vote_button.on = (event, func) => {
@ -217,7 +217,7 @@ run_test('activate another person poll', () => {
assert(!show); assert(!show);
}; };
poll_comment_container.toggle = (show) => { poll_option_container.toggle = (show) => {
assert.equal(show, true); assert.equal(show, true);
}; };
@ -232,7 +232,7 @@ run_test('activate another person poll', () => {
poll_widget.activate(opts); poll_widget.activate(opts);
assert.equal(widget_elem.html(), 'poll-widget'); 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?'); assert.equal(poll_question_header.text(), 'What do you want?');
const e = { const e = {
@ -240,15 +240,15 @@ run_test('activate another person poll', () => {
}; };
{ {
/* Testing data sent to server on adding comment */ /* Testing data sent to server on adding option */
poll_comment_input.val('cool choice'); poll_option_input.val('cool choice');
out_data = undefined; out_data = undefined;
comment_button_callback(e); option_button_callback(e);
assert.deepEqual(out_data, { type: 'new_comment', idx: 1, comment: 'cool choice' }); assert.deepEqual(out_data, { type: 'new_option', idx: 1, option: 'cool choice' });
poll_comment_input.val(''); poll_option_input.val('');
out_data = undefined; out_data = undefined;
comment_button_callback(e); option_button_callback(e);
assert.deepEqual(out_data, undefined); assert.deepEqual(out_data, undefined);
} }
@ -256,9 +256,9 @@ run_test('activate another person poll', () => {
{ {
sender_id: 100, sender_id: 100,
data: { data: {
type: 'new_comment', type: 'new_option',
idx: 1, idx: 1,
comment: 'release now', option: 'release now',
}, },
}, },
{ {
@ -333,16 +333,16 @@ run_test('activate own poll', () => {
return elem; return elem;
}; };
const poll_comment = set_widget_find_result('button.poll-comment'); const poll_option = set_widget_find_result('button.poll-option');
const poll_comment_input = set_widget_find_result('input.poll-comment'); const poll_option_input = set_widget_find_result('input.poll-option');
const widget_comment_container = set_widget_find_result('ul.poll-widget'); 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_question_submit = set_widget_find_result('button.poll-question-check');
const poll_edit_question = set_widget_find_result('.poll-edit-question'); 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_input = set_widget_find_result('input.poll-question');
const poll_question_header = set_widget_find_result('.poll-question-header'); const poll_question_header = set_widget_find_result('.poll-question-header');
const poll_question_container = set_widget_find_result('.poll-question-bar'); 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_vote_button = set_widget_find_result('button.poll-vote');
const poll_please_wait = set_widget_find_result('.poll-please-wait'); 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 // Following event handler are already tested and doesn't make sense
// to test them again // to test them again
poll_comment.on = noop; poll_option.on = noop;
poll_vote_button.on = noop; poll_vote_button.on = noop;
poll_question_header.toggle = (show) => { poll_question_header.toggle = (show) => {
@ -379,7 +379,7 @@ run_test('activate own poll', () => {
assert(!show); assert(!show);
}; };
poll_comment_container.toggle = (show) => { poll_option_container.toggle = (show) => {
assert(show); assert(show);
}; };
@ -394,7 +394,7 @@ run_test('activate own poll', () => {
poll_widget.activate(opts); poll_widget.activate(opts);
assert.equal(widget_elem.html(), 'poll-widget'); 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?'); assert.equal(poll_question_header.text(), 'Where to go?');
{ {
@ -409,7 +409,7 @@ run_test('activate own poll', () => {
question_button_callback(e); question_button_callback(e);
assert.deepEqual(out_data, { type: 'question', question: 'Is it new?' }); assert.deepEqual(out_data, { type: 'question', question: 'Is it new?' });
poll_comment_input.val(''); poll_option_input.val('');
out_data = undefined; out_data = undefined;
question_button_callback(e); question_button_callback(e);
assert.deepEqual(out_data, undefined); assert.deepEqual(out_data, undefined);

14
frontend_tests/node_tests/widgetize.js
View File

@ -29,25 +29,25 @@ run_test('activate', () => {
const events = [ const events = [
{ {
data: { data: {
comment: "First option", option: "First option",
idx: 1, idx: 1,
type: "new_comment", type: "new_option",
}, },
sender_id: 101, sender_id: 101,
}, },
{ {
data: { data: {
comment: "Second option", option: "Second option",
idx: 1, idx: 1,
type: "new_comment", type: "new_option",
}, },
sender_id: 102, sender_id: 102,
}, },
{ {
data: { data: {
comment: "Third option", option: "Third option",
idx: 1, idx: 1,
type: "new_comment", type: "new_option",
}, },
sender_id: 102, sender_id: 102,
}, },
@ -145,7 +145,7 @@ run_test('activate', () => {
const post_activate_event = { const post_activate_event = {
data: { data: {
idx: 1, idx: 1,
type: "new_comment", type: "new_option",
}, },
message_id: 2001, message_id: 2001,
sender_id: 102, sender_id: 102,

68
static/js/poll_widget.js
View File

@ -11,7 +11,7 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
var me = people.my_current_user_id(); var me = people.my_current_user_id();
var poll_question = question; var poll_question = question;
var key_to_comment = {}; var key_to_option = {};
var my_idx = 1; var my_idx = 1;
var input_mode = is_my_poll; // for now 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 () { 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); var voters = _.keys(obj.votes);
comments.push({ options.push({
comment: obj.comment, option: obj.option,
names: people.safe_full_names(voters), names: people.safe_full_names(voters),
count: voters.length, count: voters.length,
key: key, key: key,
@ -57,7 +57,7 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
var widget_data = { var widget_data = {
comments: comments, options: options,
question: poll_question, question: poll_question,
}; };
@ -65,12 +65,12 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
}; };
self.handle = { self.handle = {
new_comment: { new_option: {
outbound: function (comment) { outbound: function (option) {
var event = { var event = {
type: 'new_comment', type: 'new_option',
idx: my_idx, idx: my_idx,
comment: comment, option: option,
}; };
my_idx += 1; my_idx += 1;
@ -81,11 +81,11 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
inbound: function (sender_id, data) { inbound: function (sender_id, data) {
var idx = data.idx; var idx = data.idx;
var key = sender_id + ',' + idx; var key = sender_id + ',' + idx;
var comment = data.comment; var option = data.option;
var votes = {}; var votes = {};
key_to_comment[key] = { key_to_option[key] = {
comment: comment, option: option,
user_id: sender_id, user_id: sender_id,
votes: votes, votes: votes,
}; };
@ -119,7 +119,7 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
var vote = 1; var vote = 1;
// toggle // toggle
if (key_to_comment[key].votes[me]) { if (key_to_option[key].votes[me]) {
vote = -1; vote = -1;
} }
@ -135,14 +135,14 @@ exports.poll_data_holder = function (is_my_poll, question, options) {
inbound: function (sender_id, data) { inbound: function (sender_id, data) {
var key = data.key; var key = data.key;
var vote = data.vote; 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); blueslip.error('unknown key for poll: ' + key);
return; return;
} }
var votes = comment.votes; var votes = option.votes;
if (vote === 1) { if (vote === 1) {
votes[sender_id] = 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 // function to check whether option already exists
self.is_comment_present = function (data, latest_comment) { self.is_option_present = function (data, latest_option) {
return _.any(data, function (el) { 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) { _.each(options, function (option, i) {
self.handle.new_comment.inbound('canned', { self.handle.new_option.inbound('canned', {
idx: i, idx: i,
comment: option, option: option,
}); });
}); });
@ -212,7 +212,7 @@ exports.activate = function (opts) {
update_edit_controls(); update_edit_controls();
elem.find('.poll-question-bar').toggle(input_mode); 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); elem.find('.poll-please-wait').toggle(waiting);
@ -259,21 +259,21 @@ exports.activate = function (opts) {
} }
function submit_option() { function submit_option() {
var poll_comment_input = elem.find("input.poll-comment"); var poll_option_input = elem.find("input.poll-option");
var comment = poll_comment_input.val().trim(); var option = poll_option_input.val().trim();
var comments = poll_data.get_widget_data().comments; 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; return;
} }
if (comment === '') { if (option === '') {
return; 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); callback(data);
} }
@ -320,12 +320,12 @@ exports.activate = function (opts) {
abort_edit(); abort_edit();
}); });
elem.find("button.poll-comment").on('click', function (e) { elem.find("button.poll-option").on('click', function (e) {
e.stopPropagation(); e.stopPropagation();
submit_option(); submit_option();
}); });
elem.find('input.poll-comment').on('keydown', function (e) { elem.find('input.poll-option').on('keydown', function (e) {
e.stopPropagation(); e.stopPropagation();
if (e.keyCode === 13) { if (e.keyCode === 13) {
@ -334,7 +334,7 @@ exports.activate = function (opts) {
} }
if (e.keyCode === 27) { if (e.keyCode === 27) {
$('input.poll-comment').val(''); $('input.poll-option').val('');
return; return;
} }
}); });

8
static/styles/widgets.scss
View File

@ -78,8 +78,8 @@ img.task-completed {
input.add-task, input.add-task,
button.add-task, button.add-task,
input.poll-comment, input.poll-option,
button.poll-comment, button.poll-option,
input.poll-question, input.poll-question,
button.poll-question { button.poll-question {
padding: 4px 6px; padding: 4px 6px;
@ -87,7 +87,7 @@ button.poll-question {
} }
button.add-task, button.add-task,
button.poll-comment, button.poll-option,
button.poll-question { button.poll-question {
border-radius: 3px; border-radius: 3px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0, 0%, 80%);
@ -96,7 +96,7 @@ button.poll-question {
} }
button.add-task:hover, button.add-task:hover,
button.poll-comment:hover, button.poll-option:hover,
button.poll-question:hover { button.poll-question:hover {
border-color: hsl(0, 0%, 60%); border-color: hsl(0, 0%, 60%);
} }

4
static/templates/widgets/poll-widget-results.handlebars
View File

@ -1,9 +1,9 @@
{{#each comments}} {{#each options}}
<li> <li>
<button class="poll-vote" data-key="{{ key }}"> <button class="poll-vote" data-key="{{ key }}">
{{ count }} {{ count }}
</button> </button>
<span class="poll-option">{{ comment }}</span> <span class="poll-option">{{ option }}</span>
{{#if names}} {{#if names}}
<span class="poll-names">({{ names }})</span> <span class="poll-names">({{ names }})</span>
{{/if}} {{/if}}

6
static/templates/widgets/poll-widget.handlebars
View File

@ -14,9 +14,9 @@
</div> </div>
<ul class="poll-widget"> <ul class="poll-widget">
</ul> </ul>
<div class="poll-comment-bar"> <div class="poll-option-bar">
<input type="text" class="poll-comment" placeholder="{{t 'New choice'}}" /> <input type="text" class="poll-option" placeholder="{{t 'New choice'}}" />
<button class="poll-comment">{{t "Add choice" }}</button> <button class="poll-option">{{t "Add choice" }}</button>
</div> </div>
<br /> <br />
</div> </div>

2
zerver/lib/widget.py
View File

@ -34,7 +34,7 @@ def get_extra_data_from_widget_type(content: str,
for line in lines: for line in lines:
# If someone is using the list syntax, we remove it # If someone is using the list syntax, we remove it
# before adding an option. # 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: if len(option) > 0:
options.append(option) options.append(option)
extra_data = { extra_data = {