Add search field to inbox

Using the search field produces a filtered view of all contacts and
groups containing the input. To make this fast and scalable, add an
index on a 'tokens' array containing words from the conversation name
and different forms of phone number.

Closes #365

// FREEBIE
This commit is contained in:
lilia 2015-10-15 12:10:03 -07:00
parent 7414828bb3
commit f70c22f898
8 changed files with 221 additions and 9 deletions

View file

@ -18,13 +18,18 @@
initialize: function() {
this.listenTo(this.model, 'change', this.render); // auto update
this.listenTo(this.model, 'destroy', this.remove); // auto update
this.listenTo(this.model, 'opened', this.markSelected); // auto update
extension.windows.beforeUnload(function() {
this.stopListening();
}.bind(this));
},
select: function(e) {
markSelected: function() {
this.$el.addClass('selected').siblings('.selected').removeClass('selected');
},
select: function(e) {
this.markSelected();
this.$el.trigger('select', this.model);
},

View file

@ -0,0 +1,94 @@
/*
* vim: ts=4:sw=4:expandtab
*/
(function () {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.ConversationSearchView = Whisper.View.extend({
className: 'conversation-search',
initialize: function(options) {
this.$input = options.input;
this.$new_contact = this.$('.new-contact');
this.typeahead = new Whisper.ConversationCollection();
// View to display the matched contacts from typeahead
this.typeahead_view = new Whisper.ConversationListView({
collection : new Whisper.ConversationCollection([], {
comparator: function(m) { return m.getTitle().toLowerCase(); }
})
});
this.$el.append(this.typeahead_view.el);
this.initNewContact();
//this.listenTo(this.collection, 'reset', this.filterContacts);
},
events: {
'select .new-contact': 'createConversation',
'select .contacts': 'open'
},
filterContacts: function(e) {
var query = this.$input.val();
if (query.length) {
if (this.maybeNumber(query)) {
this.new_contact_view.model.set('id', query);
this.new_contact_view.render().$el.show();
} else {
this.new_contact_view.$el.hide();
}
this.typeahead.search(query).then(function() {
this.typeahead_view.collection.reset(this.typeahead.models);
}.bind(this));
this.trigger('show');
} else {
this.resetTypeahead();
}
},
initNewContact: function() {
if (this.new_contact_view) {
this.new_contact_view.undelegateEvents();
this.new_contact_view.$el.hide();
}
// Creates a view to display a new contact
this.new_contact_view = new Whisper.ConversationListItemView({
el: this.$new_contact,
model: ConversationController.create({
type: 'private',
newContact: true
})
}).render();
},
createConversation: function() {
this.$el.trigger('open', this.new_contact_view.model);
this.initNewContact();
this.resetTypeahead();
},
open: function(e, conversation) {
this.$el.trigger('open', conversation);
},
reset: function() {
this.delegateEvents();
this.typeahead_view.delegateEvents();
this.new_contact_view.delegateEvents();
this.resetTypeahead();
},
resetTypeahead: function() {
this.new_contact_view.$el.hide();
this.$input.val('').focus();
this.typeahead_view.collection.reset([]);
this.trigger('hide');
},
maybeNumber: function(number) {
return number.match(/^\+?[0-9]*$/);
}
});
})();

View file

@ -67,6 +67,7 @@
});
});
conversation.markRead();
conversation.trigger('opened');
}
});
@ -88,11 +89,30 @@
var inboxCollection = bg.getInboxCollection();
this.inboxListView = new Whisper.ConversationListView({
el : this.$('.conversations'),
el : this.$('.inbox'),
collection : inboxCollection
}).render();
this.inboxListView.listenTo(inboxCollection, 'add change:active_at', this.inboxListView.onChangeActiveAt);
this.inboxListView.listenTo(inboxCollection,
'add change:active_at',
this.inboxListView.onChangeActiveAt);
this.searchView = new Whisper.ConversationSearchView({
el : this.$('.search-results'),
input : this.$('input.search')
});
this.searchView.$el.hide().insertAfter(this.inboxListView.el);
this.listenTo(this.searchView, 'hide', function() {
this.searchView.$el.hide();
this.inboxListView.$el.show();
});
this.listenTo(this.searchView, 'show', function() {
this.searchView.$el.show();
this.inboxListView.$el.hide();
});
new SocketView().render().$el.appendTo(this.$('.socket-status'));
@ -109,9 +129,20 @@
'click .hamburger': 'toggleMenu',
'click .show-debug-log': 'showDebugLog',
'click .show-new-conversation': 'showCompose',
'select .gutter .contact': 'openConversation'
'select .gutter .contact': 'openConversation',
'input input.search': 'filterContacts'
},
filterContacts: function(e) {
this.searchView.filterContacts(e);
var input = this.$('input.search');
if (input.val().length > 0) {
input.addClass('active');
} else {
input.removeClass('active');
}
},
openConversation: function(e, conversation) {
conversation = ConversationController.create(conversation);
this.conversation_stack.open(conversation);
this.hideCompose();
},