paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

recent_topics: Don't complete_rerender on filter change.

Browse Source 
We store the relevant data to hide/show a topic in the row itself,
and use jquery to hide/show it on filter change.

This also fixes search breaking the set filters.
This commit is contained in:
Aman Agrawal
2020-05-29 15:26:19 +05:30
committed by Tim Abbott
parent 272a3eed8a
commit e8cc9da4c7
6 changed files with 171 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend_tests/node_tests/recent_topics.js
View File

@@ -199,11 +199,20 @@ messages[9] = {
function generate_topic_data(topic_info_array) {
// Since most of the fields are common, this function helps generate fixtures
// with non common fields.
$.clear_all_elements();
const data = [];
for (const [stream_id, topic, unread_count, hidden] of topic_info_array) {
for (const [stream_id, topic, unread_count, muted, participated] of topic_info_array) {
const topic_selector = $.create('#recent_topic:' + stream_id + ":" + topic);
topic_selector.data = function () {
return {
participated: participated,
muted: muted,
unreadCount: unread_count,
};
};
data.push({
count_senders: 0,
hidden: hidden,
invite_only: false,
is_web_public: true,
last_msg_time: 'Just now',
@@ -218,6 +227,8 @@ function generate_topic_data(topic_info_array) {
topic: topic,
topic_url: 'https://www.example.com',
unread_count: unread_count,
muted: muted,
participated: participated,
});
}
return data;
@@ -238,14 +249,14 @@ run_test("test_recent_topics_launch", () => {
filter_participated: false,
filter_unread: false,
recent_topics: generate_topic_data([
// stream_id, topic, unread_count, hidden
[1, 'topic-7', 1, true],
[1, 'topic-6', 1, false],
[1, 'topic-5', 1, false],
[1, 'topic-4', 1, false],
[1, 'topic-3', 1, false],
[1, 'topic-2', 1, false],
[1, 'topic-1', 0, false],
// stream_id, topic, unread_count, muted, participated
[1, 'topic-7', 1, true, true],
[1, 'topic-6', 1, false, true],
[1, 'topic-5', 1, false, true],
[1, 'topic-4', 1, false, false],
[1, 'topic-3', 1, false, false],
[1, 'topic-2', 1, false, true],
[1, 'topic-1', 0, false, true],
]),
};
@@ -268,7 +279,7 @@ run_test("test_recent_topics_launch", () => {
run_test('test_filter_all', () => {
// Just tests inplace rerender of a message
// in All topics filter.
let expected = generate_topic_data([[1, 'topic-1', 0, false]])[0];
let expected = generate_topic_data([[1, 'topic-1', 0, false, true]])[0];
global.stub_templates(function (template_name, data) {
assert.equal(template_name, 'recent_topic_row');
@@ -280,7 +291,7 @@ run_test('test_filter_all', () => {
const rt = zrequire('recent_topics');
rt.process_messages([messages[0]]);
expected = generate_topic_data([[1, 'topic-7', 1, true]])[0];
expected = generate_topic_data([[1, 'topic-7', 1, true, true]])[0];
// topic is muted (=== hidden)
rt.process_messages([messages[9]]);
@@ -292,14 +303,14 @@ run_test('test_filter_unread', () => {
filter_participated: false,
filter_unread: true,
recent_topics: generate_topic_data([
// stream_id, topic, unread_count, hidden
[1, 'topic-7', 1, true],
[1, 'topic-6', 1, false],
[1, 'topic-5', 1, false],
[1, 'topic-4', 1, false],
[1, 'topic-3', 1, false],
[1, 'topic-2', 1, false],
[1, 'topic-1', 0, true],
// stream_id, topic, unread_count, muted, participated
[1, 'topic-7', 1, true, true],
[1, 'topic-6', 1, false, true],
[1, 'topic-5', 1, false, true],
[1, 'topic-4', 1, false, false],
[1, 'topic-3', 1, false, false],
[1, 'topic-2', 1, false, true],
[1, 'topic-1', 0, false, true],
]),
};
@@ -320,7 +331,6 @@ run_test('test_filter_unread', () => {
// Unselect "unread" filter by clicking twice.
expected.filter_unread = false;
expected.recent_topics[6].hidden = false;
rt.set_filter('unread');
// Now clicking "all" filter should have no change to expected data.
@@ -333,14 +343,14 @@ run_test('test_filter_participated', () => {
filter_participated: true,
filter_unread: false,
recent_topics: generate_topic_data([
// stream_id, topic, unread_count, hidden
[1, 'topic-7', 1, true],
[1, 'topic-6', 1, false],
[1, 'topic-5', 1, false],
[1, 'topic-4', 1, true],
[1, 'topic-3', 1, true],
[1, 'topic-2', 1, false],
[1, 'topic-1', 0, false],
// stream_id, topic, unread_count, muted, participated
[1, 'topic-7', 1, true, true],
[1, 'topic-6', 1, false, true],
[1, 'topic-5', 1, false, true],
[1, 'topic-4', 1, false, false],
[1, 'topic-3', 1, false, false],
[1, 'topic-2', 1, false, true],
[1, 'topic-1', 0, false, true],
]),
};
@@ -359,8 +369,6 @@ run_test('test_filter_participated', () => {
});
rt.set_filter('participated');
expected.recent_topics[3].hidden = false;
expected.recent_topics[4].hidden = false;
expected.filter_participated = false;
rt.set_filter('all');
});
@@ -492,6 +500,14 @@ run_test('test_topic_edit', () => {
verify_topic_data(all_topics, stream1, topic6, messages[8].id, true);
assert.equal(all_topics.get(stream1 + ":" + topic8), undefined);
let topic_selector = $.create('#recent_topic:' + stream1 + ":" + topic8);
topic_selector.data = function () {
return {
participated: true,
muted: false,
unreadCount: 1,
};
};
// change topic of topic6 to topic8
messages[7].topic = topic8;
messages[8].topic = topic8;
@@ -505,6 +521,14 @@ run_test('test_topic_edit', () => {
verify_topic_data(all_topics, stream1, topic1, messages[0].id, true);
assert.equal(all_topics.get(stream2 + ":" + topic1), undefined);
topic_selector = $.create('#recent_topic:' + stream2 + ":" + topic1);
topic_selector.data = function () {
return {
participated: true,
muted: false,
unreadCount: 0,
};
};
messages[0].stream_id = stream2;
rt.process_topic_edit(stream1, topic1, topic1, stream2);
all_topics = rt.get();
@@ -516,6 +540,14 @@ run_test('test_topic_edit', () => {
verify_topic_data(all_topics, stream2, topic1, messages[0].id, true);
assert.equal(all_topics.get(stream3 + ":" + topic9), undefined);
topic_selector = $.create('#recent_topic:' + stream3 + ":" + topic9);
topic_selector.data = function () {
return {
participated: false,
muted: false,
unreadCount: 1,
};
};
messages[0].stream_id = stream3;
messages[0].topic = topic9;
rt.process_topic_edit(stream2, topic1, topic9, stream3);

17
static/js/click_handlers.js
View File

@@ -358,25 +358,12 @@ exports.initialize = function () {
$('body').on('click', '.btn-recent-filters', function (e) {
e.stopPropagation();
recent_topics.set_filter(e.currentTarget.dataset.filter);
recent_topics.update_filters_view();
});
// Search for all table rows (this combines stream & topic names)
$('body').on('keyup', '#recent_topics_search', _.debounce(function () {
// take all rows and slice off the header.
const $rows = $('.recent_topics_table tr').slice(1);
// split the search text around whitespace(s).
// eg: "Denamark recent" -> ["Denamrk", "recent"]
const search_keywords = $.trim($(this).val()).split(/\s+/);
// turn the search keywords into word boundry groups
// eg: ["Denamrk", "recent"] -> "^(?=.*\bDenmark\b)(?=.*\brecent\b).*$"
const val = '^(?=.*\\b' + search_keywords.join('\\b)(?=.*\\b') + ').*$';
const reg = RegExp(val, 'i'); // i for ignorecase
let text;
$rows.show().filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
recent_topics.update_filters_view();
// Wait for user to go idle before initiating search.
}, 300));

107
static/js/recent_topics.js
View File

@@ -1,5 +1,6 @@
const render_recent_topics_body = require('../templates/recent_topics_table.hbs');
const render_recent_topic_row = require('../templates/recent_topic_row.hbs');
const render_recent_topics_filters = require('../templates/recent_topics_filters.hbs');
const topics = new Map(); // Key is stream-id:topic.
// Sets the number of avatars to display.
// Rest of the avatars, if present, are displayed as {+x}
@@ -84,14 +85,11 @@ function format_topic(topic_data) {
const last_msg_time = timerender.last_seen_status_from_date(time);
// We hide the row according to filters or if it's muted.
let hidden = muting.is_topic_muted(stream_id, topic);
// We only supply the data to the topic rows and let jquery
// display / hide them according to filters instead of
// doing complete re-render.
const muted = !!muting.is_topic_muted(stream_id, topic);
const unread_count = unread.unread_topic_counter.get(stream_id, topic);
if (unread_count === 0 && filters.has('unread')) {
hidden = true;
}
if (!topic_data.participated && filters.has('participated')) {
hidden = true;
}
// Display in most recent sender first order
const all_senders = recent_senders.get_topic_recent_senders(stream_id, topic);
@@ -111,9 +109,10 @@ function format_topic(topic_data) {
unread_count: unread_count,
last_msg_time: last_msg_time,
topic_url: hash_util.by_stream_topic_uri(stream_id, topic),
hidden: hidden,
senders: senders_info,
count_senders: Math.max(0, all_senders.length - MAX_AVATAR),
muted: muted,
participated: topic_data.participated,
};
}
@@ -144,6 +143,18 @@ exports.process_topic_edit = function (old_stream_id, old_topic, new_topic, new_
exports.process_messages(new_topic_msgs);
};
function is_row_hidden(data) {
const {participated, muted, unreadCount} = data;
if (unreadCount === 0 && filters.has('unread')) {
return true;
} else if (!participated && filters.has('participated')) {
return true;
} else if (muted) {
return true;
}
return false;
}
exports.inplace_rerender = function (topic_key) {
// We remove topic from the UI and reinsert it.
// This makes sure we maintain the correct order
@@ -153,7 +164,7 @@ exports.inplace_rerender = function (topic_key) {
return false;
}
const formatted_values = format_topic(topic_data);
const topic_row = get_topic_row(topic_key);
let topic_row = get_topic_row(topic_key);
topic_row.remove();
const rendered_row = render_recent_topic_row(formatted_values);
@@ -176,6 +187,13 @@ exports.inplace_rerender = function (topic_key) {
get_topic_row(sorted_topic_keys[1]).before(rendered_row);
}
get_topic_row(sorted_topic_keys[topic_index - 1]).after(rendered_row);
topic_row = get_topic_row(topic_key);
if (is_row_hidden(topic_row.data())) {
topic_row.hide();
} else {
topic_row.show();
}
};
exports.update_topic_is_muted = function (stream_id, topic, is_muted) {
@@ -210,7 +228,63 @@ exports.set_filter = function (filter) {
} else {
filters.add(filter);
}
exports.complete_rerender();
};
function show_selected_filters() {
if (filters.size === 0) {
$('#recent_topics_filter_buttons')
.find('[data-filter="all"]')
.addClass('btn-recent-selected');
} else {
for (const filter of filters) {
$('#recent_topics_filter_buttons')
.find('[data-filter="' + filter + '"]')
.addClass('btn-recent-selected');
}
}
}
exports.update_filters_view = function () {
const $rows = $('.recent_topics_table tr').slice(1);
const search_val = $('#recent_topics_search').val();
$rows.each(function () {
const row = $(this);
if (is_row_hidden(row.data())) {
row.hide();
} else {
row.show();
}
});
exports.search_keyword(search_val);
const rendered_filters = render_recent_topics_filters({
filter_participated: filters.has('participated'),
filter_unread: filters.has('unread'),
});
$("#recent_filters_group").html(rendered_filters);
show_selected_filters();
};
exports.search_keyword = function (keyword) {
if (keyword === "") {
return false;
}
// take all rows and slice off the header.
const $rows = $('.recent_topics_table tr').slice(1);
// split the search text around whitespace(s).
// eg: "Denamark recent" -> ["Denamrk", "recent"]
const search_keywords = $.trim(keyword).split(/\s+/);
// turn the search keywords into word boundry groups
// eg: ["Denamrk", "recent"] -> "^(?=.*\bDenmark\b)(?=.*\brecent\b).*$"
const val = '^(?=.*\\b' + search_keywords.join('\\b)(?=.*\\b') + ').*$';
const reg = RegExp(val, 'i'); // i for ignorecase
let text;
$rows.filter(function () {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
};
exports.complete_rerender = function () {
@@ -223,18 +297,7 @@ exports.complete_rerender = function () {
filter_unread: filters.has('unread'),
});
$('#recent_topics_table').html(rendered_body);
if (filters.size === 0) {
$('#recent_topics_filter_buttons')
.find('[data-filter="all"]')
.addClass('btn-recent-selected');
} else {
for (const filter of filters) {
$('#recent_topics_filter_buttons')
.find('[data-filter="' + filter + '"]')
.addClass('btn-recent-selected');
}
}
show_selected_filters();
};
exports.launch = function () {

2
static/templates/recent_topic_row.hbs
View File

@@ -1,4 +1,4 @@
<tr id="recent_topic:{{stream_id}}:{{topic}}" {{#if hidden}}style="display:none;"{{/if}}>
<tr id="recent_topic:{{stream_id}}:{{topic}}" data-unread-count="{{unread_count}}" data-muted="{{muted}}" data-participated="{{participated}}">
<td class="recent_topic_stream">
<span id="stream_sidebar_privacy_swatch_{{stream_id}}" class="stream-privacy filter-icon" style="color: {{stream_color}}">
{{> stream_privacy }}

17
static/templates/recent_topics_filters.hbs Normal file
View File

@@ -0,0 +1,17 @@
<button data-filter="all" type="button" class="btn btn-default btn-recent-filters">{{t 'All' }}</button>
<button data-filter="unread" type="button" class="btn btn-default btn-recent-filters">
{{#if filter_unread}}
<i class="fa fa-check-square-o"></i>
{{else}}
<i class="fa fa-square-o"></i>
{{/if}}
{{t 'Unread' }}
</button>
<button data-filter="participated" type="button" class="btn btn-default btn-recent-filters">
{{#if filter_participated}}
<i class="fa fa-check-square-o"></i>
{{else}}
<i class="fa fa-square-o"></i>
{{/if}}
{{t 'Participated' }}
</button>

20
static/templates/recent_topics_table.hbs
View File

@@ -1,21 +1,7 @@
<div id="recent_topics_filter_buttons" class="btn-group" role="group">
<button data-filter="all" type="button" class="btn btn-default btn-recent-filters">{{t 'All' }}</button>
<button data-filter="unread" type="button" class="btn btn-default btn-recent-filters">
{{#if filter_unread}}
<i class="fa fa-check-square-o"></i>
{{else}}
<i class="fa fa-square-o"></i>
{{/if}}
{{t 'Unread' }}
</button>
<button data-filter="participated" type="button" class="btn btn-default btn-recent-filters">
{{#if filter_participated}}
<i class="fa fa-check-square-o"></i>
{{else}}
<i class="fa fa-square-o"></i>
{{/if}}
{{t 'Participated' }}
</button>
<div id="recent_filters_group">
{{> recent_topics_filters}}
</div>
<input type="text" id="recent_topics_search" placeholder="{{t 'Search stream / topic' }}">
</div>
<div class="tableFixHead">