Added search bar to the channels flex

i18n/en.i18n.json

@@ -510,6 +510,7 @@
   "Screen_Share" : "Screen Share",
   "Search" : "Search",
   "Search_Messages" : "Search Messages",
+  "Search_Channels" : "Search Channels",
   "Search_settings" : "Search settings",
   "seconds" : "seconds",
   "See_all" : "See all",

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -1229,6 +1229,32 @@ a.github-fork {
 		}
 		> .wrapper {
 			direction: ltr;
+
+			.flex-control {
+				.search {
+					display: table;
+					width: 100%;
+					margin-bottom: 10px;
+				}
+				.sort {
+					display: table;
+					width: 100%;
+					margin-bottom: 30px;
+					position: relative;
+
+					.sort-item {
+						display: table-cell;
+						vertical-align: middle;
+						text-align: center;
+						position: relative;
+						padding-right: 5px;
+
+						&:first {
+							width: 1px;
+						}
+					}
+				}
+			}
 		}
 		h4 {
 			margin-bottom: 30px;

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

 Template.listChannelsFlex.helpers
 	channel: ->
 		return Template.instance().channelsList?.get()
+	tSearchChannels: ->
+		return t('Search_Channels')
 
 Template.listChannelsFlex.events
 	'click header': ->
@@ -19,11 +21,18 @@ Template.listChannelsFlex.events
 	'mouseleave header': ->
 		SideNav.leaveArrow()
 
+	'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 []
 
-	Meteor.call 'channelsList', (err, result) ->
-		if result
-			instance.channelsList.set result.channels
+	instance.autorun ->
+		Meteor.call 'channelsList', instance.nameFilter.get(), (err, result) ->
+			if result
+				instance.channelsList.set result.channels
 

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

@@ -6,6 +6,16 @@
 	</header>
 	<div class="content">
 		<div class="wrapper">
+			<div class="flex-control">
+				<div class="search">
+					<form class="search-form" role="form">
+						<div class="input-line search">
+							<input type="text" id="channel-search" class="search" placeholder="{{tSearchChannels}}" autocomplete="off" />
+							<i class="icon-right-open-small"></i>
+						</div>
+					</form>
+				</div>
+			</div>
 			<h4>{{_ "Channels_list"}}</h4>
 			<ul>
 			{{#each channel}}

server/methods/channelsList.coffee

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