Closes #625: Filter and sorts direct messages and private groups.
Marcelo Schmidt
10 years ago
parent
b79a08aeeb
commit
ca8d55e1f5
@ -0,0 +1,53 @@ |
||||
<template name="listDirectMessagesFlex"> |
||||
<header> |
||||
<div> |
||||
<h4>{{_ "Direct_Messages"}}</h4> |
||||
</div> |
||||
</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="{{_ "Search_Direct_Messages"}}" autocomplete="off" /> |
||||
<i class="icon-right-open-small"></i> |
||||
</div> |
||||
<div class="input-line search"> |
||||
<select class="c-select" id="sort"> |
||||
<option value="name" selected="{{sortSelected 'name'}}">{{_ "Name"}}</option> |
||||
<option value="ls" selected="{{sortSelected 'ls'}}">{{_ "Last_seen"}}</option> |
||||
</select> |
||||
<i class="icon-sort-alt-up"></i> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
<h4>{{_ "List_of_Direct_Messages"}}</h4> |
||||
<ul> |
||||
{{#each rooms}} |
||||
<li> |
||||
<a href="{{pathFor 'direct' username=name}}" class="channel-link"> |
||||
<i class="icon-at {{userStatus}}"></i> |
||||
{{name}} |
||||
<span class='opt fixed'> |
||||
{{#if hidden}} |
||||
<i class="icon-eye-off" title="{{_ "Hidden"}}" aria-label="{{_ "Hidden"}}"></i> |
||||
{{/if}} |
||||
</span> |
||||
</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> |
||||
</template> |
||||
@ -0,0 +1,90 @@ |
||||
/* globals SideNav */ |
||||
|
||||
Template.listDirectMessagesFlex.helpers({ |
||||
rooms() { |
||||
return Template.instance().roomsList.get(); |
||||
}, |
||||
sortSelected(sort) { |
||||
return Template.instance().sort.get() === sort; |
||||
}, |
||||
hasMore() { |
||||
return Template.instance().hasMore.get(); |
||||
}, |
||||
userStatus() { |
||||
return 'status-' + (Session.get('user_' + this.name + '_status') || 'offline'); |
||||
}, |
||||
hidden() { |
||||
return !!RocketChat.models.Subscriptions.findOne({ name: this.name, open: false }); |
||||
} |
||||
}); |
||||
|
||||
Template.listDirectMessagesFlex.events({ |
||||
'click header': function() { |
||||
SideNav.closeFlex(); |
||||
}, |
||||
|
||||
'click .channel-link': function() { |
||||
SideNav.closeFlex(); |
||||
}, |
||||
|
||||
'click footer .create': function() { |
||||
SideNav.setFlex('privateGroupsFlex'); |
||||
}, |
||||
|
||||
'mouseenter header': function() { |
||||
SideNav.overArrow(); |
||||
}, |
||||
|
||||
'mouseleave header': function() { |
||||
SideNav.leaveArrow(); |
||||
}, |
||||
|
||||
'keyup #channel-search': _.debounce((e, instance) => { |
||||
instance.nameFilter.set($(e.currentTarget).val()); |
||||
}, 300), |
||||
|
||||
'scroll .content': _.throttle((e, instance) => { |
||||
if (instance.hasMore.get() && e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight) { |
||||
instance.limit.set(instance.limit.get() + 50); |
||||
} |
||||
} , 200), |
||||
|
||||
'change #sort': (e, instance) => { |
||||
instance.sort.set($(e.currentTarget).val()); |
||||
} |
||||
|
||||
}); |
||||
|
||||
Template.listDirectMessagesFlex.onCreated(function() { |
||||
this.limit = new ReactiveVar(50); |
||||
this.sort = new ReactiveVar('name'); |
||||
this.hasMore = new ReactiveVar(true); |
||||
this.nameFilter = new ReactiveVar(''); |
||||
this.roomsList = new ReactiveVar([]); |
||||
this.autorun(() => { |
||||
this.hasMore.set(true); |
||||
let options = { fields: { name: 1 } }; |
||||
if (_.isNumber(this.limit.get())) { |
||||
options.limit = this.limit.get(); |
||||
} |
||||
if(s.trim(this.sort.get())) { |
||||
switch (this.sort.get()) { |
||||
case 'name': |
||||
options.sort = { name: 1 }; |
||||
break; |
||||
case 'ls': |
||||
options.sort = { ls: -1 }; |
||||
break; |
||||
} |
||||
} |
||||
let query = { t: 'd' }; |
||||
if (s.trim(this.nameFilter.get())) { |
||||
query.name = new RegExp(s.trim(s.escapeRegExp(this.nameFilter.get())), 'i'); |
||||
} |
||||
|
||||
this.roomsList.set(RocketChat.models.Subscriptions.find(query, options).fetch()); |
||||
if (this.roomsList.get().length < this.limit.get()) { |
||||
this.hasMore.set(false); |
||||
} |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue