diff --git a/app/ui-flextab/client/tabs/uploadedFilesList.html b/app/ui-flextab/client/tabs/uploadedFilesList.html
index ad09ca8819dc..3da55f8603fb 100644
--- a/app/ui-flextab/client/tabs/uploadedFilesList.html
+++ b/app/ui-flextab/client/tabs/uploadedFilesList.html
@@ -12,7 +12,6 @@
-
{{#each files}}
@@ -39,19 +38,17 @@
{{> icon file=. block="attachments-menu js-action" icon="menu"}}
-
+ {{else}}
+ {{#if Template.subscriptionsReady}}
+ {{_ "Room_uploaded_file_list_empty"}}
+ {{/if}}
{{/each}}
- {{#if hasMore}}
+ {{#if isLoading}}
{{> loading}}
{{/if}}
- {{#if Template.subscriptionsReady}}
- {{#unless hasFiles}}
-
{{_ "Room_uploaded_file_list_empty"}}
- {{/unless}}
- {{/if}}
diff --git a/app/ui-flextab/client/tabs/uploadedFilesList.js b/app/ui-flextab/client/tabs/uploadedFilesList.js
index 9f65c18d2ad9..abbacb4556db 100644
--- a/app/ui-flextab/client/tabs/uploadedFilesList.js
+++ b/app/ui-flextab/client/tabs/uploadedFilesList.js
@@ -3,6 +3,7 @@ import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { Mongo } from 'meteor/mongo';
import { ReactiveVar } from 'meteor/reactive-var';
+import { ReactiveDict } from 'meteor/reactive-dict';
import { DateFormat } from '../../../lib/client';
import { canDeleteMessage, getURL, handleError, t } from '../../../utils/client';
@@ -10,18 +11,20 @@ import { popover, modal } from '../../../ui-utils/client';
const roomFiles = new Mongo.Collection('room_files');
+const LIST_SIZE = 50;
+
Template.uploadedFilesList.onCreated(function() {
const { rid } = Template.currentData();
this.searchText = new ReactiveVar(null);
- this.hasMore = new ReactiveVar(true);
- this.limit = new ReactiveVar(50);
+
+ this.state = new ReactiveDict({
+ limit: LIST_SIZE,
+ hasMore: true,
+ });
this.autorun(() => {
- this.subscribe('roomFilesWithSearchText', rid, this.searchText.get(), this.limit.get(), () => {
- if (roomFiles.find({ rid }).fetch().length < this.limit.get()) {
- this.hasMore.set(false);
- }
- });
+ const ready = this.subscribe('roomFilesWithSearchText', rid, this.searchText.get(), this.state.get('limit'), () => this.state.set('hasMore', this.state.get('limit') <= roomFiles.find({ rid }).count())).ready();
+ this.state.set('loading', !ready);
});
});
@@ -46,6 +49,9 @@ Template.uploadedFilesList.helpers({
return getURL(this.url);
}
},
+ limit() {
+ return Template.instance().state.get('limit');
+ },
format(timestamp) {
return DateFormat.formatDateAndTime(timestamp);
},
@@ -96,12 +102,8 @@ Template.uploadedFilesList.helpers({
return DateFormat.formatDateAndTime(timestamp);
},
- hasMore() {
- return Template.instance().hasMore.get();
- },
-
- hasFiles() {
- return roomFiles.find({ rid: this.rid }).count() > 0;
+ isLoading() {
+ return Template.instance().state.get('loading');
},
});
@@ -112,12 +114,15 @@ Template.uploadedFilesList.events({
'input .uploaded-files-list__search-input'(e, t) {
t.searchText.set(e.target.value.trim());
- t.hasMore.set(true);
+ t.state.set('hasMore', true);
},
'scroll .flex-tab__result': _.throttle(function(e, t) {
if (e.target.scrollTop >= (e.target.scrollHeight - e.target.clientHeight)) {
- return t.limit.set(t.limit.get() + 50);
+ if (!t.state.get('hasMore')) {
+ return;
+ }
+ return t.state.set('limit', t.state.get('limit') + LIST_SIZE);
}
}, 200),