[IMPROVE] Replace fullUserStatusData publication by REST (RocketChat#…

…15942)

app/api/server/index.js

@@ -32,5 +32,6 @@ import './v1/subscriptions';
 import './v1/users';
 import './v1/video-conference';
 import './v1/autotranslate';
+import './v1/custom-user-status';
 
 export { API, APIClass, defaultRateLimiterOptions } from './api';

app/api/server/lib/custom-user-status.js

@@ -0,0 +1,20 @@
+import { CustomUserStatus } from '../../../models/server/raw';
+
+export async function findCustomUserStatus({ query = {}, pagination: { offset, count, sort } }) {
+	const cursor = await CustomUserStatus.find(query, {
+		sort: sort || { name: 1 },
+		skip: offset,
+		limit: count,
+	});
+
+	const total = await cursor.count();
+
+	const statuses = await cursor.toArray();
+
+	return {
+		statuses,
+		count: statuses.length,
+		offset,
+		total,
+	};
+}

app/api/server/v1/custom-user-status.js

@@ -0,0 +1,18 @@
+import { API } from '../api';
+import { findCustomUserStatus } from '../lib/custom-user-status';
+
+API.v1.addRoute('custom-user-status.list', { authRequired: true }, {
+	get() {
+		const { offset, count } = this.getPaginationItems();
+		const { sort, query } = this.parseJsonQuery();
+
+		return API.v1.success(Promise.await(findCustomUserStatus({
+			query,
+			pagination: {
+				offset,
+				count,
+				sort,
+			},
+		})));
+	},
+});

app/models/client/index.js

@@ -21,7 +21,6 @@ import { UserRoles } from './models/UserRoles';
 import { AuthzCachedCollection, ChatPermissions } from './models/ChatPermissions';
 import { WebdavAccounts } from './models/WebdavAccounts';
 import CustomSounds from './models/CustomSounds';
-import CustomUserStatus from './models/CustomUserStatus';
 import EmojiCustom from './models/EmojiCustom';
 
 const Users = _.extend({}, users, Meteor.users);
@@ -52,7 +51,6 @@ export {
 	ChatSubscription,
 	Rooms,
 	CustomSounds,
-	CustomUserStatus,
 	EmojiCustom,
 	WebdavAccounts,
 };

app/models/server/raw/CustomUserStatus.js

@@ -0,0 +1,5 @@
+import { BaseRaw } from './BaseRaw';
+
+export class CustomUserStatusRaw extends BaseRaw {
+
+}

app/models/server/raw/index.js

@@ -28,6 +28,8 @@ import LivechatExternalMessagesModel from '../models/LivechatExternalMessages';
 import { LivechatExternalMessageRaw } from './LivechatExternalMessages';
 import LivechatVisitorsModel from '../models/LivechatVisitors';
 import { LivechatVisitorsRaw } from './LivechatVisitors';
+import CustomUserStatusModel from '../models/CustomUserStatus';
+import { CustomUserStatusRaw } from './CustomUserStatus';
 import LivechatAgentActivityModel from '../models/LivechatAgentActivity';
 import { LivechatAgentActivityRaw } from './LivechatAgentActivity';
 
@@ -46,4 +48,5 @@ export const LivechatRooms = new LivechatRoomsRaw(LivechatRoomsModel.model.rawCo
 export const Messages = new MessagesRaw(MessagesModel.model.rawCollection());
 export const LivechatExternalMessage = new LivechatExternalMessageRaw(LivechatExternalMessagesModel.model.rawCollection());
 export const LivechatVisitors = new LivechatVisitorsRaw(LivechatVisitorsModel.model.rawCollection());
+export const CustomUserStatus = new CustomUserStatusRaw(CustomUserStatusModel.model.rawCollection());
 export const LivechatAgentActivity = new LivechatAgentActivityRaw(LivechatAgentActivityModel.model.rawCollection());

app/user-status/client/admin/adminUserStatus.html

@@ -9,7 +9,11 @@
 				<form class="search-form" role="form">
 					<div class="rc-input__wrapper">
 						<div class="rc-input__icon">
-							{{#if isReady}} {{> icon block="rc-input__icon-svg" icon="magnifier" }} {{else}} {{> loading }} {{/if}}
+							{{#if isLoading}}
+								{{> loading }}
+							{{else}}
+								{{> icon block="rc-input__icon-svg" icon="magnifier" }}
+							{{/if}}
 						</div>
 						<input id="user-status-filter" type="text" class="rc-input__element" placeholder="{{_ " Search "}}" autofocus dir="auto">
 					</div>
@@ -57,16 +61,18 @@
 							</td>
 						</tr>
 						{{/each}}
+						{{#if isLoading}}
+							<tr class="table-no-click">
+								<td class="table-loading-td">{{> loading}}</td>
+							</tr>
+						{{/if}}
 					</tbody>
 					{{/table}}
-					{{#if hasMore}}
-					<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
-					{{/if}}
 				{{/unless}}
 			</div>
 		</section>
 		{{#with flexData}}
-		{{> flexTabBar}}
+			{{> flexTabBar}}
 		{{/with}}
 	</div>
 </template>

app/user-status/client/admin/adminUserStatus.js

@@ -1,22 +1,23 @@
-import s from 'underscore.string';
+import _ from 'underscore';
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Tracker } from 'meteor/tracker';
 
-import { CustomUserStatus } from '../../../models';
 import { TabBar, SideNav, RocketChatTabBar } from '../../../ui-utils';
 import { t } from '../../../utils';
+import { APIClient } from '../../../utils/client';
+
+const LIST_SIZE = 50;
+const DEBOUNCE_TIME_TO_SEARCH_IN_MS = 500;
 
 Template.adminUserStatus.helpers({
-	isReady() {
-		if (Template.instance().ready != null) {
-			return Template.instance().ready.get();
-		}
-		return undefined;
+	searchText() {
+		const instance = Template.instance();
+		return instance.filter && instance.filter.get();
 	},
 	customUserStatus() {
-		return Template.instance().customUserStatus().map((userStatus) => {
+		return Template.instance().statuses.get().map((userStatus) => {
 			const { _id, name, statusType } = userStatus;
 			const localizedStatusType = statusType ? t(statusType) : '';
 
@@ -29,40 +30,56 @@ Template.adminUserStatus.helpers({
 		});
 	},
 	isLoading() {
-		if (Template.instance().ready != null) {
-			if (!Template.instance().ready.get()) {
-				return 'btn-loading';
-			}
-		}
-	},
-	hasMore() {
-		if (Template.instance().limit != null) {
-			if (typeof Template.instance().customUserStatus === 'function') {
-				return Template.instance().limit.get() === Template.instance().customUserStatus().length;
-			}
-		}
-		return false;
+		return Template.instance().isLoading.get();
 	},
 	flexData() {
 		return {
 			tabBar: Template.instance().tabBar,
 			data: Template.instance().tabBarData.get(),
 		};
 	},
+	onTableScroll() {
+		const instance = Template.instance();
+		return function(currentTarget) {
+			if (currentTarget.offsetHeight + currentTarget.scrollTop < currentTarget.scrollHeight - 100) {
+				return;
+			}
+			const statuses = instance.statuses.get();
+			if (instance.total.get() > statuses.length) {
+				instance.offset.set(instance.offset.get() + LIST_SIZE);
+			}
+		};
+	},
+	onTableItemClick() {
+		const instance = Template.instance();
+		return function(item) {
+			instance.tabBarData.set({
+				status: instance.statuses.get().find((status) => status._id === item._id),
+				onSuccess: instance.onSuccessCallback,
+			});
+			instance.tabBar.showGroup('user-status-custom-selected');
+			instance.tabBar.open('admin-user-status-info');
+		};
+	},
 });
 
 Template.adminUserStatus.onCreated(function() {
 	const instance = this;
 	this.limit = new ReactiveVar(50);
 	this.filter = new ReactiveVar('');
 	this.ready = new ReactiveVar(false);
+	this.total = new ReactiveVar(0);
+	this.query = new ReactiveVar({});
+	this.statuses = new ReactiveVar([]);
+	this.isLoading = new ReactiveVar(false);
+	this.offset = new ReactiveVar(0);
 
 	this.tabBar = new RocketChatTabBar();
 	this.tabBar.showGroup(FlowRouter.current().route.name);
 	this.tabBarData = new ReactiveVar();
 
 	TabBar.addButton({
-		groups: ['user-status-custom'],
+		groups: ['user-status-custom', 'user-status-custom-selected'],
 		id: 'add-user-status',
 		i18nTitle: 'Custom_User_Status_Add',
 		icon: 'plus',
@@ -71,34 +88,48 @@ Template.adminUserStatus.onCreated(function() {
 	});
 
 	TabBar.addButton({
-		groups: ['user-status-custom'],
+		groups: ['user-status-custom-selected'],
 		id: 'admin-user-status-info',
 		i18nTitle: 'Custom_User_Status_Info',
 		icon: 'customize',
 		template: 'adminUserStatusInfo',
 		order: 2,
 	});
 
-	this.autorun(function() {
-		const limit = instance.limit !== null ? instance.limit.get() : 0;
-		const subscription = instance.subscribe('fullUserStatusData', '', limit);
-		instance.ready.set(subscription.ready());
-	});
+	this.onSuccessCallback = () => {
+		this.offset.set(0);
+		return this.loadStatus(this.query.get(), this.offset.get());
+	};
 
-	this.customUserStatus = function() {
-		const filter = instance.filter != null ? s.trim(instance.filter.get()) : '';
+	this.tabBarData.set({
+		onSuccess: instance.onSuccessCallback,
+	});
 
-		let query = {};
+	this.loadStatus = _.debounce(async (query, offset) => {
+		this.isLoading.set(true);
+		const { statuses, total } = await APIClient.v1.get('custom-user-status.list', {
+			count: LIST_SIZE,
+			offset,
+			query: JSON.stringify(query),
+		});
+		this.total.set(total);
+		if (offset === 0) {
+			this.statuses.set(statuses);
+		} else {
+			this.statuses.set(this.statuses.get().concat(statuses));
+		}
+		this.isLoading.set(false);
+	}, DEBOUNCE_TIME_TO_SEARCH_IN_MS);
 
+	this.autorun(() => {
+		const filter = this.filter.get() && this.filter.get().trim();
+		const offset = this.offset.get();
 		if (filter) {
-			const filterReg = new RegExp(s.escapeRegExp(filter), 'i');
-			query = { $or: [{ name: filterReg }] };
+			const regex = { $regex: filter, $options: 'i' };
+			return this.loadStatus({ name: regex }, offset);
 		}
-
-		const limit = instance.limit != null ? instance.limit.get() : 0;
-
-		return CustomUserStatus.find(query, { limit, sort: { name: 1 } }).fetch();
-	};
+		return this.loadStatus({}, offset);
+	});
 });
 
 Template.adminUserStatus.onRendered(() =>
@@ -121,12 +152,7 @@ Template.adminUserStatus.events({
 		e.stopPropagation();
 		e.preventDefault();
 		t.filter.set(e.currentTarget.value);
-	},
-
-	'click .user-status-info'(e, instance) {
-		e.preventDefault();
-		instance.tabBarData.set(CustomUserStatus.findOne({ _id: this._id }));
-		instance.tabBar.open('admin-user-status-info');
+		t.offset.set(0);
 	},
 
 	'click .load-more'(e, t) {

app/user-status/client/admin/userStatusEdit.js

@@ -56,6 +56,7 @@ Template.userStatusEdit.onCreated(function() {
 	}
 
 	this.tabBar = Template.currentData().tabBar;
+	this.onSuccess = Template.currentData().onSuccess;
 
 	this.cancel = (form, name) => {
 		form.reset();
@@ -102,7 +103,7 @@ Template.userStatusEdit.onCreated(function() {
 					} else {
 						toastr.success(t('Custom_User_Status_Added_Successfully'));
 					}
-
+					this.onSuccess();
 					this.cancel(form, userStatusData.name);
 				}
 

app/user-status/client/admin/userStatusInfo.js

@@ -24,6 +24,7 @@ Template.userStatusInfo.helpers({
 		return {
 			tabBar: this.tabBar,
 			userStatus: instance.userStatus.get(),
+			onSuccess: instance.onSuccess,
 			back(name) {
 				instance.editingUserStatus.set();
 
@@ -72,7 +73,7 @@ Template.userStatusInfo.events({
 						timer: 2000,
 						showConfirmButton: false,
 					});
-
+					instance.onSuccess();
 					instance.tabBar.close();
 				});
 			});
@@ -92,6 +93,7 @@ Template.userStatusInfo.onCreated(function() {
 	this.editingUserStatus = new ReactiveVar();
 	this.loadedName = new ReactiveVar();
 	this.tabBar = Template.currentData().tabBar;
+	this.onSuccess = Template.currentData().onSuccess;
 
 	this.autorun(() => {
 		const data = Template.currentData();
@@ -101,7 +103,7 @@ Template.userStatusInfo.onCreated(function() {
 	});
 
 	this.autorun(() => {
-		const data = Template.currentData();
+		const data = Template.currentData().status;
 		const userStatus = this.userStatus.get();
 		if (userStatus != null && userStatus.name != null) {
 			this.loadedName.set(userStatus.name);
@@ -111,7 +113,7 @@ Template.userStatusInfo.onCreated(function() {
 	});
 
 	this.autorun(() => {
-		const data = Template.currentData();
+		const data = Template.currentData().status;
 		this.userStatus.set(data);
 	});
 });

app/user-status/server/publications/fullUserStatusData.js

@@ -4,6 +4,7 @@ import { Meteor } from 'meteor/meteor';
 import { CustomUserStatus } from '../../../models';
 
 Meteor.publish('fullUserStatusData', function(filter, limit) {
+	console.warn('The publication "fullUserStatusData" is deprecated and will be removed after version v3.0.0');
 	if (!this.userId) {
 		return this.ready();
 	}