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();
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);

14
frontend_tests/node_tests/widgetize.js
View File

@ -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,

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 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;
}
});

8
static/styles/widgets.scss
View File

@ -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%);
}

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

@ -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}}

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

@ -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>

2
zerver/lib/widget.py
View File

@ -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 = {