snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx

@@ -0,0 +1,158 @@
+import type { ILivechatDepartment } from '@rocket.chat/core-typings';
+import { Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	GenericTableRow,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery, hashKey, keepPreviousData } from '@tanstack/react-query';
+import { useState, useMemo } from 'react';
+
+import DepartmentItemMenu from './DepartmentItemMenu';
+import FilterByText from '../../../../components/FilterByText';
+import GenericNoResults from '../../../../components/GenericNoResults/GenericNoResults';
+import { links } from '../../../../lib/links';
+
+const DEPARTMENTS_ENDPOINTS = {
+	department: '/v1/livechat/department',
+	archived: '/v1/livechat/departments/archived',
+} as const;
+
+export type DepartmentsTableProps = { archived: boolean };
+
+const DepartmentsTable = ({ archived }: DepartmentsTableProps) => {
+	const t = useTranslation();
+	const router = useRouter();
+	const [text, setText] = useState('');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'description' | 'numAgents' | 'enabled' | 'showOnRegistration'>('name');
+
+	const getDepartments = useEndpoint('GET', archived ? DEPARTMENTS_ENDPOINTS.archived : DEPARTMENTS_ENDPOINTS.department);
+
+	const handleAddNew = useStableCallback(() => router.navigate('/omnichannel/departments/new'));
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				onlyMyDepartments: 'true' as const,
+				text,
+				sort: JSON.stringify({ [sortBy]: sortDirection === 'asc' ? 1 : -1 }),
+				...(current && { offset: current }),
+				...(itemsPerPage && { count: itemsPerPage }),
+			}),
+			[current, itemsPerPage, sortBy, sortDirection, text],
+		),
+		500,
+	);
+
+	const { data, isSuccess, isLoading } = useQuery({
+		queryKey: ['livechat-departments', query, archived],
+		queryFn: async () => getDepartments(query),
+		placeholderData: keepPreviousData,
+	});
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='description'
+				direction={sortDirection}
+				active={sortBy === 'description'}
+				onClick={setSort}
+				sort='description'
+			>
+				{t('Description')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='numAgents' direction={sortDirection} active={sortBy === 'numAgents'} onClick={setSort} sort='numAgents'>
+				{t('Num_Agents')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='enabled' direction={sortDirection} active={sortBy === 'enabled'} onClick={setSort} sort='enabled'>
+				{t('Enabled')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='showOnRegistration'
+				direction={sortDirection}
+				active={sortBy === 'showOnRegistration'}
+				onClick={setSort}
+				sort='showOnRegistration'
+			>
+				{t('Show_on_registration_page')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='spacer' width={40} />
+		</>
+	);
+
+	return (
+		<>
+			{((isSuccess && data?.departments.length > 0) || queryHasChanged) && (
+				<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			)}
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={6} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.departments.length === 0 && (queryHasChanged || archived) && <GenericNoResults />}
+			{isSuccess && data?.departments.length === 0 && !queryHasChanged && !archived && (
+				<GenericNoResults
+					icon='folder'
+					title={t('No_departments_yet')}
+					description={t('No_departments_yet_description')}
+					buttonAction={handleAddNew}
+					buttonTitle={t('Create_department')}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_departments')}
+				/>
+			)}
+			{isSuccess && data?.departments.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Departments')} aria-busy={isLoading} aria-live='polite'>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.departments.map((department: Omit<ILivechatDepartment, '_updatedAt'>) => (
+								<GenericTableRow key={department._id} tabIndex={0} width='full'>
+									<GenericTableCell withTruncatedText>{department.name}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{department.description}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{department.numAgents || '0'}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{department.enabled ? t('Yes') : t('No')}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{department.showOnRegistration ? t('Yes') : t('No')}</GenericTableCell>
+									<GenericTableCell withTruncatedText>
+										<DepartmentItemMenu department={department} archived={archived} />
+									</GenericTableCell>
+								</GenericTableRow>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default DepartmentsTable;