[NEW] Customizable default directory view (#11965)

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -175,6 +175,7 @@
   "Accounts_RequireNameForSignUp": "Require Name For Signup",
   "Accounts_RequirePasswordConfirmation": "Require Password Confirmation",
   "Accounts_SearchFields": "Fields to Consider in Search",
+  "Accounts_Directory_DefaultView": "Default Directory Listing",
   "Accounts_SetDefaultAvatar": "Set Default Avatar",
   "Accounts_SetDefaultAvatar_Description": "Tries to determine default avatar based on OAuth Account or Gravatar",
   "Accounts_ShowFormLogin": "Show Default Login Form",

packages/rocketchat-lib/server/startup/settings.js

@@ -74,6 +74,7 @@ RocketChat.settings.addGroup('Accounts', function() {
 		public: true,
 		i18nLabel: 'Placeholder_for_password_login_field',
 	});
+
 	this.add('Accounts_ConfirmPasswordPlaceholder', '', {
 		type: 'string',
 		public: true,
@@ -87,7 +88,20 @@ RocketChat.settings.addGroup('Accounts', function() {
 		type: 'string',
 		public: true,
 	});
-
+	this.add('Accounts_Directory_DefaultView', 'channels', {
+		type: 'select',
+		values: [
+			{
+				key: 'channels',
+				i18nLabel: 'Channels',
+			},
+			{
+				key: 'users',
+				i18nLabel: 'Users',
+			},
+		],
+		public: true,
+	});
 	this.section('Registration', function() {
 		this.add('Accounts_DefaultUsernamePrefixSuggestion', 'user', {
 			type: 'string',

packages/rocketchat-theme/client/imports/components/table.css

@@ -171,6 +171,7 @@
 	min-height: 0;
 
 	margin-top: 2rem;
+	margin-bottom: 0.5rem;
 
 	border-top: 1px solid rgba(216, 216, 216, 0.4);
 	flex-grow: 1;

packages/rocketchat-ui/client/views/app/directory.js

@@ -63,29 +63,37 @@ Template.directory.helpers({
 			end,
 			page,
 		} = Template.instance();
+		const channelsTab = {
+			label: t('Channels'),
+			value: 'channels',
+			condition() {
+				return true;
+			},
+		};
+		const usersTab = {
+			label: t('Users'),
+			value: 'users',
+			condition() {
+				return true;
+			},
+		};
+		if (searchType.get() === 'channels') {
+			channelsTab.active = true;
+		} else {
+			usersTab.active = true;
+		}
 		return {
-			tabs: [
-				{
-					label: t('Channels'),
-					value: 'channels',
-					condition() {
-						return true;
-					},
-					active: true,
-				},
-				{
-					label: t('Users'),
-					value: 'users',
-					condition() {
-						return true;
-					},
-				},
-			],
+			tabs: [channelsTab, usersTab],
 			onChange(value) {
 				results.set([]);
 				end.set(false);
-				searchSortBy.set('name');
-				sortDirection.set('asc');
+				if (value === 'channels') {
+					searchSortBy.set('usersCount');
+					sortDirection.set('desc');
+				} else {
+					searchSortBy.set('name');
+					sortDirection.set('asc');
+				}
 				page.set(0);
 				searchType.set(value);
 			},
@@ -190,10 +198,16 @@ Template.directory.onRendered(function() {
 });
 
 Template.directory.onCreated(function() {
+	const viewType = RocketChat.settings.get('Accounts_Directory_DefaultView') || 'channels';
+	this.searchType = new ReactiveVar(viewType);
+	if (viewType === 'channels') {
+		this.searchSortBy = new ReactiveVar('usersCount');
+		this.sortDirection = new ReactiveVar('desc');
+	} else {
+		this.searchSortBy = new ReactiveVar('name');
+		this.sortDirection = new ReactiveVar('asc');
+	}
 	this.searchText = new ReactiveVar('');
-	this.searchType = new ReactiveVar('channels');
-	this.searchSortBy = new ReactiveVar('usersCount');
-	this.sortDirection = new ReactiveVar('desc');
 	this.limit = new ReactiveVar(0);
 	this.page = new ReactiveVar(0);
 	this.end = new ReactiveVar(false);