Merge pull request #2397 from RocketChat/channels-flex-infinite-scroll

Adds infinite scrolling to channels list

packages/rocketchat-lib/server/models/Rooms.coffee

@@ -70,7 +70,7 @@ RocketChat.models.Rooms = new class extends RocketChat.models._Base
 		return @find query, options
 
 	findByNameContaining: (name, options) ->
-		nameRegex = new RegExp name, "i"
+		nameRegex = new RegExp s.trim(s.escapeRegExp(name)), "i"
 
 		query =
 			$or: [
@@ -83,7 +83,7 @@ RocketChat.models.Rooms = new class extends RocketChat.models._Base
 		return @find query, options
 
 	findByNameContainingAndTypes: (name, types, options) ->
-		nameRegex = new RegExp name, "i"
+		nameRegex = new RegExp s.trim(s.escapeRegExp(name)), "i"
 
 		query =
 			t:

packages/rocketchat-ui-sidenav/side-nav/listChannelsFlex.coffee

 Template.listChannelsFlex.helpers
 	channel: ->
 		return Template.instance().channelsList?.get()
+	hasMore: ->
+		return Template.instance().hasMore.get()
 	tSearchChannels: ->
 		return t('Search_Channels')
 
@@ -21,18 +23,25 @@ Template.listChannelsFlex.events
 	'mouseleave header': ->
 		SideNav.leaveArrow()
 
+	'scroll .content': _.throttle (e, t) ->
+		if e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight
+			t.limit.set(t.limit.get() + 50)
+	, 200
+
 	'keyup #channel-search': _.debounce (e, instance) ->
 		instance.nameFilter.set($(e.currentTarget).val())
 	, 300
 
-
 Template.listChannelsFlex.onCreated ->
-	instance = this
-	instance.nameFilter = new ReactiveVar ''
-	instance.channelsList = new ReactiveVar []
+	@channelsList = new ReactiveVar []
+	@hasMore = new ReactiveVar true
+	@limit = new ReactiveVar 50
+	@nameFilter = new ReactiveVar ''
 
-	instance.autorun ->
-		Meteor.call 'channelsList', instance.nameFilter.get(), (err, result) ->
+	@autorun =>
+		Meteor.call 'channelsList', @nameFilter.get(), @limit.get(), (err, result) =>
 			if result
-				instance.channelsList.set result.channels
-
+				@hasMore.set true
+				@channelsList.set result.channels
+				if result.channels.length < @limit.get()
+					@hasMore.set false

packages/rocketchat-ui-sidenav/side-nav/listChannelsFlex.html

@@ -26,6 +26,15 @@
 					</a>
 				</li>
 			{{/each}}
+			{{#if hasMore}}
+				<li class="load-more">
+					{{#if Template.subscriptionsReady}}
+						<a href="">{{_ "Has_more"}}...</a>
+					{{else}}
+						<div class="load-more-loading">{{_ "Loading..."}}</div>
+					{{/if}}
+				</li>
+			{{/if}}
 			</ul>
 		</div>
 	</div>

server/methods/channelsList.coffee

 Meteor.methods
-	channelsList: (filter, sort) ->
+	channelsList: (filter, limit) ->
+		options =  { sort: { msgs:-1 } }
+		if _.isNumber limit
+			options.limit = limit
+
 		if filter
-			return { channels: RocketChat.models.Rooms.findByNameContainingAndTypes(filter, ['c'], { sort: { name: 1 } }).fetch() }
+			options.sort = { name: 1 }
+			return { channels: RocketChat.models.Rooms.findByNameContainingAndTypes(filter, ['c'], options).fetch() }
 		else
-			return { channels: RocketChat.models.Rooms.findByTypeAndArchivationState('c', false, { sort: { msgs:-1 } }).fetch() }
+			return { channels: RocketChat.models.Rooms.findByTypeAndArchivationState('c', false, options).fetch() }