[IMPROVE] Use the paginated select on AutocompleteDepartment

app/livechat/imports/server/rest/departments.js

@@ -13,7 +13,7 @@ API.v1.addRoute('livechat/department', { authRequired: true }, {
 
 		const { text, enabled, onlyMyDepartments } = this.queryParams;
 
-		const departments = Promise.await(findDepartments({
+		const { departments, total } = Promise.await(findDepartments({
 			userId: this.userId,
 			text,
 			enabled,
@@ -25,7 +25,11 @@ API.v1.addRoute('livechat/department', { authRequired: true }, {
 			},
 		}));
 
-		return API.v1.success(departments);
+		return API.v1.success({ departments,
+			count: departments.length,
+			offset,
+			total,
+		});
 	},
 	post() {
 		if (!hasPermission(this.userId, 'manage-livechat-departments')) {

client/components/AutoCompleteDepartment.js

@@ -1,39 +1,48 @@
-import { AutoComplete, Option } from '@rocket.chat/fuselage';
+import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useMemo, useState } from 'react';
 
 import { useTranslation } from '../contexts/TranslationContext';
-import { useEndpointData } from '../hooks/useEndpointData';
+import { useRecordList } from '../hooks/lists/useRecordList';
+import { AsyncStatePhase } from '../hooks/useAsyncState';
+import { useDepartmentsList } from '../views/hooks/useDepartmentsList';
 
 const AutoCompleteDepartment = (props) => {
-	const { label, onlyMyDepartments = false } = props;
+	const { value, onlyMyDepartments = false, onChange = () => { } } = props;
 
 	const t = useTranslation();
-	const [filter, setFilter] = useState('');
-	const { value: data } = useEndpointData(
-		'livechat/department',
-		useMemo(() => ({ text: filter, onlyMyDepartments }), [filter, onlyMyDepartments]),
-	);
+	const [departmentsFilter, setDepartmentsFilter] = useState('');
+
+	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);
 
-	const options = useMemo(
-		() =>
-			(data && [
-				{ value: 'all', label: label && t('All') },
-				...data.departments.map((department) => ({
-					value: department._id,
-					label: department.name,
-				})),
-			]) || [{ value: 'all', label: label || t('All') }],
-		[data, label, t],
+	const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList(
+		useMemo(() => ({ filter: debouncedDepartmentsFilter, onlyMyDepartments }), [
+			debouncedDepartmentsFilter,
+			onlyMyDepartments,
+		]),
 	);
 
+	const {
+		phase: departmentsPhase,
+		items: departmentsItems,
+		itemCount: departmentsTotal,
+	} = useRecordList(departmentsList);
+
 	return (
-		<AutoComplete
-			{...props}
-			filter={filter}
-			setFilter={setFilter}
-			renderSelected={({ label }) => <>{label}</>}
-			renderItem={({ value, ...props }) => <Option key={value} {...props} />}
-			options={options}
+		<PaginatedSelectFiltered
+			value={value}
+			onChange={onChange}
+			filter={departmentsFilter}
+			setFilter={setDepartmentsFilter}
+			options={departmentsItems}
+			maxWidth='100%'
+			placeholder={t('Select_an_option')}
+			flexGrow={1}
+			endReached={
+				departmentsPhase === AsyncStatePhase.LOADING
+					? () => { }
+					: (start) => loadMoreDepartments(start, Math.min(50, departmentsTotal))
+			}
 		/>
 	);
 };

client/views/omnichannel/analytics/AnalyticsPage.js

@@ -1,9 +1,9 @@
 import { Box, Select, Margins, Field, Label } from '@rocket.chat/fuselage';
 import React, { useMemo, useState, useEffect } from 'react';
 
+import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
 import Page from '../../../components/Page';
 import { useTranslation } from '../../../contexts/TranslationContext';
-import DepartmentAutoComplete from '../DepartmentAutoComplete';
 import AgentOverview from './AgentOverview';
 import DateRangePicker from './DateRangePicker';
 import InterchangeableChart from './InterchangeableChart';
@@ -31,7 +31,7 @@ const useOptions = (type) => {
 const AnalyticsPage = () => {
 	const t = useTranslation();
 	const [type, setType] = useState('Conversations');
-	const [departmentId, setDepartmentId] = useState(null);
+	const [department, setDepartment] = useState(null);
 	const [dateRange, setDateRange] = useState({ start: null, end: null });
 	const [chartName, setChartName] = useState();
 
@@ -61,17 +61,18 @@ const AnalyticsPage = () => {
 						</Box>
 						<Box display='flex' mi='x4' flexGrow={1} flexDirection='column'>
 							<Label mb='x4'>{t('Departments')}</Label>
-							<DepartmentAutoComplete
-								flexShrink={0}
+							<AutoCompleteDepartment
+								value={department}
+								onChange={setDepartment}
 								placeholder={t('All')}
-								value={departmentId}
-								onChange={setDepartmentId}
+								label={t('All')}
+								onlyMyDepartments
 							/>
 						</Box>
 						<DateRangePicker mi='x4' flexGrow={1} onChange={setDateRange} />
 					</Box>
 					<Box>
-						<Overview type={type} dateRange={dateRange} departmentId={departmentId} />
+						<Overview type={type} dateRange={dateRange} departmentId={department?.value} />
 					</Box>
 					<Box display='flex' flexDirection='row'>
 						<Margins inline='x2'>
@@ -89,7 +90,7 @@ const AnalyticsPage = () => {
 							w='66%'
 							h='100%'
 							chartName={chartName}
-							departmentId={departmentId}
+							departmentId={department?.value}
 							dateRange={dateRange}
 							alignSelf='stretch'
 						/>
@@ -101,7 +102,7 @@ const AnalyticsPage = () => {
 							p='x10'
 							mis='x4'
 						>
-							<AgentOverview type={chartName} dateRange={dateRange} departmentId={departmentId} />
+							<AgentOverview type={chartName} dateRange={dateRange} departmentId={department} />
 						</Box>
 					</Box>
 				</Margins>

client/views/omnichannel/currentChats/FilterByText.js

@@ -81,7 +81,7 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 			guest,
 			servedBy,
 			status,
-			department,
+			...(department?.value && { department: department.value }),
 			from: from && moment(new Date(from)).utc().format('YYYY-MM-DDTHH:mm:ss'),
 			to: to && moment(new Date(to)).utc().format('YYYY-MM-DDTHH:mm:ss'),
 			tags,

client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js

@@ -2,10 +2,10 @@ import { Box, Select, Field, Margins } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { useRef, useState, useMemo, useEffect } from 'react';
 
+import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
 import Page from '../../../components/Page';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { getDateRange } from '../../../lib/getDateRange';
-import DepartmentAutoComplete from '../DepartmentAutoComplete';
 import AgentStatusChart from './charts/AgentStatusChart';
 import ChatDurationChart from './charts/ChatDurationChart';
 import ChatsChart from './charts/ChatsChart';
@@ -29,7 +29,7 @@ const RealTimeMonitoringPage = () => {
 
 	const departmentParams = useMemo(
 		() => ({
-			...(department && { departmentId: department }),
+			...(department?.value && { departmentId: department?.value }),
 		}),
 		[department],
 	);
@@ -80,10 +80,11 @@ const RealTimeMonitoringPage = () => {
 						<Field mie='x4' flexShrink={1}>
 							<Field.Label>{t('Department')}</Field.Label>
 							<Field.Row>
-								<DepartmentAutoComplete
-									placeholder={t('All')}
+								<AutoCompleteDepartment
 									value={department}
 									onChange={setDepartment}
+									placeholder={t('All')}
+									label={t('All')}
 									onlyMyDepartments
 								/>
 							</Field.Row>

ee/app/livechat-enterprise/server/api/departments.js

@@ -330,10 +330,10 @@ API.v1.addRoute('livechat/departments.available-by-unit/:unitId', { authRequired
 		});
 		const { offset, count } = this.getPaginationItems();
 		const { unitId } = this.urlParams;
-		const { text } = this.queryParams;
+		const { text, onlyMyDepartments } = this.queryParams;
 
 
-		const { departments, total } = Promise.await(findAllDepartmentsAvailable(unitId, offset, count, text));
+		const { departments, total } = Promise.await(findAllDepartmentsAvailable(this.userId, unitId, offset, count, text, onlyMyDepartments === 'true'));
 
 		return API.v1.success({
 			departments,

ee/app/livechat-enterprise/server/lib/Department.js

@@ -1,18 +1,25 @@
 import { escapeRegExp } from '@rocket.chat/string-helpers';
 
+import { callbacks } from '../../../../../app/callbacks/server';
 import {
 	LivechatDepartment,
 } from '../../../../../app/models/server/raw';
 
-export const findAllDepartmentsAvailable = async (unitId, offset, count, text) => {
+export const findAllDepartmentsAvailable = async (uid, unitId, offset, count, text, onlyMyDepartments = false) => {
 	const filterReg = new RegExp(escapeRegExp(text), 'i');
 
-	const cursor = LivechatDepartment.find({
+	let query = {
 		type: { $ne: 'u' },
 		$or: [{ ancestors: { $in: [[unitId], null, []] } }, { ancestors: { $exists: false } }],
 		...text && { name: filterReg },
 
-	}, { limit: count, offset });
+	};
+
+	if (onlyMyDepartments) {
+		query = callbacks.run('livechat.applyDepartmentRestrictions', query, { userId: uid });
+	}
+
+	const cursor = LivechatDepartment.find(query, { limit: count, offset });
 
 	const departments = await cursor.toArray();
 	const total = await cursor.count();