arm-core/web/src/widgets/RelatedGroupTable/RelatedGroupTable.tsx

import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Dropdown, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { type ReactNode, useMemo, useState } from 'react';
import { ApiError } from '../../api/client';
import { ColumnSettings, DataTable, useFilteredRows, useVisibleColumns } from '../../components/GenericTable';
import { useTableFilters } from '../../components/GenericTable/useTableFilters';
import { deleteRelatedGroup, editRelatedGroup } from '../../services/api/directories/related-groups';
import type { RelatedGroupOut } from '../../types/api';
import type { RelatedGroupFormType } from '../../types/relatedGroup/relatedGroup';
import { useNotificationApi } from '../../utils/useNotification';
import { DeleteRelatedGroupModal } from '../DeleteRelatedGroupModal/DeleteRelatedGroupModal';
import { RelatedGroupForm } from '../RelatedGroupForm/RelatedGroupForm';
import { relateGroupConfig } from './config';

interface RelatedGroupTableI {
	tabsComponent?: ReactNode;
	data: RelatedGroupOut[];
	loading: boolean;
	getData: () => void;
	activeTab: 'gsk' | 'gsz';
}

export function RelatedGroupTable({ tabsComponent, data, loading, getData, activeTab }: RelatedGroupTableI) {
	const notification = useNotificationApi();

	const [editFormOpen, setEditFormOpen] = useState(false);
	const [deleteModalOpen, setDeleteModalOpen] = useState(false);
	const [deletingLoading, setDeletingLoading] = useState(false);
	const [groupId, setGroupId] = useState('');

	const { visibleKeys, setVisibleKeys } = useVisibleColumns(relateGroupConfig);
	const { rawQuery, columnFilters, setColumnFilters, sort, setSort, resetAll, hasActiveFilters } = useTableFilters<RelatedGroupOut>();
	// single filtered array — title count and table share it
	const { rows } = useFilteredRows(data, relateGroupConfig, rawQuery, columnFilters, sort);

	function closeEditRelatedGroupHandler() {
		setGroupId('');
		setEditFormOpen(false);
	}
	function closeDeleteRelatedGroupHandler() {
		setGroupId('');
		setDeleteModalOpen(false);
	}

	async function deleteRelatedGroupHandler() {
		try {
			setDeletingLoading(true);
			await deleteRelatedGroup(groupId);
			getData();
			setDeleteModalOpen(false);
			setGroupId('');
		} catch (e) {
			if (e instanceof ApiError) {
				notification.error({
					description: e.message,
				});
			}
		} finally {
			setDeletingLoading(false);
		}
	}

	async function editRelatedGroupHandler(values: RelatedGroupFormType) {
		await editRelatedGroup(groupId, values);
		getData();
		closeEditRelatedGroupHandler();
	}

	const extraColumns: ColumnsType<RelatedGroupOut> = useMemo(
		() => [
			{
				key: 'actions',
				title: '',
				width: 30,
				render: (_: unknown, row: RelatedGroupOut) => {
					const items = [
						{
							key: 'edit',
							label: 'Изменить',
							onClick: () => {
								setGroupId(row.id);
								setEditFormOpen(true);
							},
						},
						{
							key: 'delete',
							label: 'Удалить',
							danger: true,
							onClick: () => {
								setGroupId(row.id);
								setDeleteModalOpen(true);
							},
						},
					];
					return (
						<Dropdown menu={{ items }} trigger={['click']}>
							<Button type='default' style={{ width: '32px' }}>
								<EllipsisOutlined />
							</Button>
						</Dropdown>
					);
				},
			},
		],
		[],
	);

	return (
		<div
			style={{
				width: '100%',
				display: 'flex',
				flexDirection: 'column',
				height: '100%',
				background: 'white',
				borderRadius: 12,
			}}>
			<Space
				style={{
					padding: '0 12px',
					width: '100%',
					justifyContent: 'space-between',
					borderBottom: '1px',
				}}>
				{tabsComponent}

				<Space>
					{hasActiveFilters && (
						<Button
							type='default'
							onClick={() => {
								resetAll();
							}}>
							Сбросить фильтры
						</Button>
					)}
					<ColumnSettings defs={relateGroupConfig.columns} visibleKeys={visibleKeys} onChange={setVisibleKeys} />
				</Space>
			</Space>
			<DataTable
				sortState={sort}
				onSortChange={setSort}
				config={relateGroupConfig}
				loading={loading}
				rows={rows}
				allRows={data}
				visibleKeys={visibleKeys}
				globalQuery={rawQuery}
				columnFilters={columnFilters}
				onColumnFiltersChange={setColumnFilters}
				extraColumns={extraColumns}
			/>
			{editFormOpen && (
				<RelatedGroupForm
					kind={activeTab}
					relatedGroupId={groupId}
					open={editFormOpen}
					onCancel={() => {
						closeEditRelatedGroupHandler();
					}}
					onOk={editRelatedGroupHandler}
				/>
			)}
			{deleteModalOpen && (
				<DeleteRelatedGroupModal
					open={deleteModalOpen}
					loading={deletingLoading}
					onCancel={() => closeDeleteRelatedGroupHandler()}
					onOk={deleteRelatedGroupHandler}
					kind={activeTab}
				/>
			)}
		</div>
	);
}